Web Programming Primer

Variables are like placeholders, they just hold the place of something else. You should have learned about this in Algebra. Usually a letter, such as x, was inserted in an equation. X replaced a value; it was a placeholder. It is the same in coding. When a variable is created, it is given a "storage spot" in memory with an address of the name you give it. So, you could declare a variable and not give it a value, which would mean you have created an address in memory, with nothing stored at that location. One important thing to remember is that a variable can not have more than one value. It retains the value it has been given until given a new value, and then the old is completely gone and the new is fully and completely stored, alone, in memory.

There are several types of variables, but we are going to talk about numbers and strings first. A number, as you know already, is any numeric value. This could be a whole number, or a decimal number. A string, on the other hand, is a succession of characters. Normally, strings may be used to store words or sentences. Anytime you declare a string, you insert your string of characters inside of quotation marks. This is how the computer knows you are declaring a string. When you declare a number, no quotation marks are necessary, or else your number will be stored as a string and not a number.

Now, on to how to declare these variables. (Side-note: when the word "declare" is used, it simply means, when you bring the variable into existence, in your code). To declare a variable, write "var", this will let JavaScript know that you are declaring a variable. After this, type the name you are going to give your variable. This is the name you will use in any future code in which you wish to call that value you stored. The name should start with a letter and should be short. Also, there cannot be spaces and it is case sensitive. So, it is recommended to not begin with an uppercase letter. After a name, like "value1," is given, you can either end the statement with a semi-colon or you can give the variable a value. To give it a value, you must follow the name with an equal sign, which is called the "assignment operator." After the equal sign, type the number and a semi-colon or type the string (in quotes) followed by a semi-colon.

This is what declaring a number and a string looks like:


So now, in the computer memory, we have a variable named "variable1" with a numerical value of 23, and a variable named "variable2" with a string value of, "this is string text." Now let's tell JavaScript to write this text on the screen. We will do this as we did before, except instead of writing something in quotes, we will simply write the name of our variable.

Like this:



As you can gather from the images above, if you type anything with quotation marks, JavaScript will assume you are inserting a variable. And if you insert a variable, JavaScript will write the value that is stored in that variable. To wrap up what we did, we declared a variable, gave it a value, and then told JavaScript to write that variable on the screen. Pretty cool, huh?

Math operators may be used to perform arithmetic between strings or numbers. When it comes to numbers, this is self-explanatory. If you have a variable name v1 with a value of 5, and a variable named v2 with a value of 3, adding these variables would give you a value of 8. When it comes to strings, if you add one string to another string, the result will be a new string comprised of the value of the first string with the value of the second string just thrown on the end.

Here is an example of two strings being added together:

Inside of "document.write();" variable v2 and variable v3 were added together, so their values were smashed together in the order of the math sequence. Also, notice that there is no space entered between the strings, the first character of the second string is placed right after the last character of the first string.

---

We will not cover any more arithmetic between strings, but we will quickly cover many more operators for numbers.

• "-" is used for subtraction
• "*" is used for multiplication
• "/" is used for division
• "%" is used for modulas division
• "++" is used to increment by 1
• "--" is used to decrement by 1

All of these should be understood, except for modulas division. Modulas division is used to receive the remainder when dividing whole numbers. For instance, when 21 is divided by 5, your result is 4 with a remainder of 1 (4 x 5 = 20, which means 1 is left over). When you use modulas division, your value will be the remainder, this can be very useful, but we will not cover why right now.

Time to apply your JavaScript knowledge.

1. Start with a minimum .html document.
2. Then, add script tags in the body.
3. Inside the script tags, declare 4 variables.
• The first two should be numbers. Give them values of 20 and 5.
• Give the first string a value of your fist name.
• Give the second string a value of your age.
• *you can name these variables anything you want*
4. Write "document.write();"
5. In the parenthesis, type the name of your third variable, type an addition sign, type, in quotes, " is ", type an addition sign, type the name of your last variable, and then type an addition sign followed by a break tag in quotes (this will break to a new line)
6. Make a second document.write
7. In the parenthesis, enter your first variable minus your second variable.

---

Your code should look similar to this:








If we did not add the break tag in, the 15 would be inserted right next to your age, just like it is with XHTML.