As I walk you through animating your name with JavaScript, you will learn the basics of Booleans, functions, variables, strings, and maybe a few other things. This coding guide will be updated when I have time, so don't expect this to be an every-week thing. Things I will be tutoring you one will be HTML codes, Java, python, and maybe some others.
JavaScript~ Interactive banner name~
Let's start with strings, shall we?
A string can contain letters, numbers, spaces, and symbols. Strings are surrounded
with quotes. Example:
"She sells sea shells by the sea shore."
"1 2 3 4 5 6 7 8 9 10"
In our JavaScript code, we're using document.write() simply to display your string.
The important stuff is inside the parentheses, so focus on that. To discover the length
of a string, simply code in '. length .' after the code. Example:
document.write( "Muffins" ).length.
7
Now, you must know math to code.
Addition: 2 + 3
Subtraction: 2 - 3
Multiplication: 2 * 3
Divsion: 2 / 3
If we multiply to big numbers like so:
document.write ( "100 * 43" )
The answer on screen should come up as the problem. It will NOT have the answers, since
we put it in a string.
Let's take a look at booleans.
A boolean is like a like a light switch, but you would replace 'on' and 'off' with 'true' or 'false'.
People use booleans in their code by writing statemants that evaluate to 'true' or 'false', like so:
88 > 10 would evaluate to 'true'.
88 < 10 is clearly incorrect, so the computer would evaluate it to 'false'.
Booleans are extremely useful because they let us run certain parts of our code only IF certain
conditions are TRUE. Let's take a look on how to do this...
We'll be making a statement that evaluates to 'true' if the length of the string is greater than 10 characters, like so:
document.write( "I'm coding like a champ!".length > 10)
After writing something like that, your computer will say it's 'true'. If you made the lesser than sign,
your computer will evaluate it false and therefore showing 'false' on the screen.
Lets learn to animate our names, then! You should make sure you understand this before you go on.
Alright. In the previous section, we obviously just started learning how to use JavaScript. So far
we have used:
Strings
Numbers
and Booleans.
In this section, we will program and animate our names- when we put the cursor over it, it will scatter but soon close
back up together when you remove your mouse from it's range. Fun, right?
To do more... Complex codes, we need a way to save these values. This is possible with variables. A variable
stores and string, number, or boolean and gives it a specific, case-sensitive name.
Example:
var myName = "Paradise";
var myAge = "14"
var isEven = true
So, when we use this code (You can replace what's in the quotes):
var myName = "Paradise";
drawName(myName);
With that code, JavaScript should have your word in a collection of bubbles, how? Like this:
01. In line 1, you created a variable named myName in which you stored a string of your name.
02. In line 5, a function named drawName() took your name string and threw it on the screen.
WOAH, Woah, woah... What's a function?
A function takes in an input, does something with it, and then returns an output.
In our code, the input was your name, and and the output was the picture
of your name in a bunch of fun bubbles- ah, the fun of bubbles. Who knew. right?
Let's give bubbles some color. I've prepared another variable named blue and that stores the color blue.
We will add blue as another input to the drawName function, like this:
var myName = "Paradise";
drawName(myName, blue);
Great! The word (or your name) should have been drawn in bubbles. Wouldn't be fun if we can make our
name all pretty and colorful?
Variables, like myName, can store numbers or strings. But so far, we've only been
able to store one number or one string at a time.
Good thing we have arrays. Arrays store lists of data.
Example:
var names = ["Paradise", "Candy"];
var blue = (196, 77, 55];
Anytime you see data surrounded by [], it is an array.
In fact, computers can understand colors like blue as an array of numbers, as shown in the example above.
So. using the code below, we used an array to make our name more than one colors because we stored more data.
var red = [0, 100, 63];
var orange = [40, 100, 60];
var green = [75, 100, 40];
var blue = [196, 77, 55];
var purple = [280, 50, 60];
var myName = "Paradise";
letterColors = [red, orange, green, blue, purple]
drawName(myName, letterColors);
Colorful <3 We just gave the function two inputs. One was your name, and the other was an array of colors.
The Output was a multi-colored picture of your name. Now, if we add another function called bounceBubbles, the output would be your banner name flowing up an down every time you hover your mouse over it. The
code looks like this:
var red = [0, 100, 63];
var orange = [40, 100, 60];
var green = [75, 100, 40];
var blue = [196, 77, 55];
var purple = [280, 50, 60];
var myName = "Paradise";
letterColors = [red, orange, green, blue, purple];
if(10 < 3) {
bubbleShape = "square";
}
else {
bubbleShape = "circle";
}
drawName(myName, letterColors)
bounceBubbles();
We used Booleans to make sure the program does not make your name out of squares, only in circles. If you're confused about anything, PM me!
UP COMING NEXT
Make your own adventure game with Java!
