Webpages are made up of three elements:
- HTML — The structure and content of the webpage.
- CSS — The style and design of the webpage.
All three parts of a webpage are written in a unique syntax, and are considered different languages.
<script> tag. Put your code between the opening and closing script tags.
<script> tag with no attribute.
- Variables should start with a letter (underscore or dollar symbol are also acceptable, but typically reserved for certain situations)
- Variables can only contain letters, numbers, an underscore, dollar symbol, or Unicode characters
- Variables cannot have spaces
mytotalis a different variable than
Variable names can be a single letter, such as i, j or k. But it is better better to use more descriptive names such as total, sum or totalscore. You will come up with your own names for variables in your program which pertain to your own application.
The VAR keyword
var i; var total; var numberofphotos;
Only use the var keyword the first time you mention a variable in any scope (space).
var x = 7;
means that we are storing the value 7 inside the variable x. It does not establish equivalency — saying x is the same as 7 — rather, the equals sign is performing a task of storing the value on the right inside the variable on the left.
It is also possible to replace the value of variable with something else. Thus the expression:
var x = 7; x = 8; x = 9;
means that x will be 9 — the final value. Each time we assign a new value, it replaces the old value.
Assignting a Variable to Another Variable
When a variable is assigned to another variable, it receives its value, as in this example:
var x = 8; var y = x;
The value of
y is 8. Because in the first line, we assigned 8 to the
x variable. Then in the second line, we assigned the value of
Basic Math Operations
var x = 5 + 7;
The value of x will be 12. Likewise, you can use other variables for a part of these math operations.
var x = 5; var y = 2; var j = x + y;
In this case the value of j will be 7. You can also perform multiplcation and division, and even use parethesis much the same way you do with algebraic expressions. Multiplication is done with an asterisk (*), and division with a forward slash (/).
var x = 9; var y = (x / 4) * (x + 3);
The value of
y is 27, or 9 divided by 4, multiplied by the sum of 9 and 3.
String Data Type
Variables can store more than numbers. They can also store words, phrases and several other types of abstract data. If you want to store a word or a phrase, you need to surround it by quotes. (both single or double quotes work.)
var myname = "Jeremy"; var website = "Knight Digital Media Center";
If you don’t use quotes, the browser will think you are trying assign values to another variable.
firstname = "Jeremy"; lastname = "Rue"; fullname = firstname + lastname;
sentence = "This tutorial is written by"; firstname = "Jeremy"; lastname = "Rue"; fullsentence = sentence + " " + firstname + " " + lastname;
In this example, the fullsentence variable will contain the string This tutorial is writtten by Jeremy Rue, with spaces between all words.
Concatenating strings with numbers
It is also possible to concatenate strings and number. The result will always be a string.
firstnumber = "4"; secondnumber = 5; fullnumber = firstnumber + secondnumber;
In this example, the value of fullnumber would be the string “45.” It’s important to understand when variables are numbers, and when they are strings of text that simply contain numbers. Taking the example above, if we didn’t have quotes around the 4, it would not concatenate the two values, but rather combine them.
firstnumber = 4; secondnumber = 5; fullnumber = firstnumber + secondnumber;
In this example, the value of fullnumber is 9. Because the type of data in both of these variables are numbers, they are not concatenated, but rather combined as numbers.
Boolean Data Type
var showtooltip = false;
Assigning a Variable to Itself
Sometimes you want to change the value of a variable, based on its current value. This often done by assigning a variable to itself, and applying the changes.
var x = 27; x = x + 3;
In the above example, the value of x is now 30. When you assign a variable to itself, the value doesn’t change until the operation is complete. It is also possible to do this with strings, which concatenates the variable:
var fullname = "Jeremy"; fullname = fullname + " " + "Rue";
In the above example, the value of full name is Jeremy Rue. We first assign it the value Jeremy, then we assign the original value with the last name concatenated.
An array is a method of storing multiple values in a single variable.
var myarray = ["bob", "john", "peter", "sandy"];
Each value in an array is separated by a comma. The values can also have a unique data types. For example, some values can be numbers, while other values can be strings or booleans.
var myarray = ["joe", 47, false, true];
In order to retrieve any element in the array, we use something called the index number. It is important to note that the index of every array starts on zero.
var myarray = ["bob", "john", "peter", "sandy"]; console.log( myarray );
In the above example, myarray would retrieve the value “peter” because it is the third element in the array. (remember, we start on zero.) We can also cite the index in a number of ways. What are the values of the following variables?
var myarray = [ "bob", "john", "peter", "sandy" ]; var x = 1; myarray[1 + 2] myarray[x]
In the first example,
myarray[1+2] would retrieve the “sandy” value, because it is the fourth element. In the second example, the
myarray[x] would retrieve the “john” value, because it is the second element. This idea of being able to bring up a value becomes very useful later, especially when working with large datasets.
You can change individual values within an array by referencing them by their index number. Consider the following:
var myarray = [ "bob", "john", "peter", "sandy" ]; myarray = "mary";
john value no longer exists in myarray, because we’ve replaced it with
mary. Remember, john was located at index
1, which is the second value because indices start on zero.
A multidimensional array sounds more complicated than it is. The idea is simple: An array within an array. Sometimes the key to grasping a multidimensional array lies in how it’s typed out.
var my2Darray = [ ["bob", "alex", "joe", "wendy"], ["teresa", "jodi", "sara", "peter"], ["jack", 44, 90], [true, false] ];
The above array has four elements, each one is also an array. So how do we reference each item? We use indexes for both the main array, and each child array nested. For the above array:
my2Darray //This would return "alex" my2Darray //This would return 90 my2Darray //This would return true my2Darray //This is undefined, since there is no fourth element
We used the name 2D array because this is a two-dimensional array. It is possible to further have more arrays nested within these arrays, and so on. It begins to get very complex however. Generally, most arrays don’t go too far beyond three dimensions. More ways to write arrays
Arrays can be typed and declared in a number of ways. If you want to declare a variable as an array without assigning any values to it, you have to use a special statement called a constructor. Here are two ways to do this:
var myarray = new Array(); var myarray = ;
These are both functionally the same thing. Once you’ve declared your array, it is possible to change out or assign specific values at various indices.
var myarray = ; myarray = "john"; myarray = 56; myarray = "Peter";
If there was already a value in those spots, it would be replaced.
When you reference an array item, it works just like any other variable. You can concatenate them, or use them in arithmetic functions, like so:
var myarray = [1, 2, 3, 4, 5, 6, 7]; var sum = myarray + myarray;
The value of sum would be 8, since we are adding the values 3 and 5. Remember, indices start on zero.
var myarray = ["Java", "learned", "I", "today", "Script"]; var indices = [3, 2, 1, 0, 4]; //What is the value of the variable message? var message = myarray[indices] + " " + myarray[indices] + " " + myarray[indices] + " " + myarray[indices] + myarray[indices];
In the above example, we actually use an array to represent the index value of each array.