Make sure you've done the my JavaScript basics tutorial before you tackle this tutorial (or at least have some JavaScript experience).
Open up your text editor, make a basic page with some script tags, save it somewhere and then open it up in your browser.
<html>
<head>
<title></title>
<script type="text/JavaScript"><!--
//--></script>
</head>
<body>
</body>
</html> |
Save your page every time you make changes, then refresh your page in your browser to see any changes (nothing special will happen with this page).
Let's declare a variable.
<script type="text/JavaScript"><!--
var
//--></script> |
I've left out all those other XHTML tags to save room. Keep them in your page.
The word var tells the browser we're going to make a variable.
Name the variable.
<script type="text/JavaScript"><!--
var message
//--></script> |
We've named our variable. It's name is message
Now we assign a value to our variable.
<script type="text/JavaScript"><!--
var message = "This is some kinda secret message";
//--></script> |
The value of our variable is the string This is some kinda secret message". Don't forget the semi-colon.
We've finished declaring our variable. It doesn't do anything.
Make an alert (don't delete the variable we just declared).
<script type="text/JavaScript"><!--
var message = "This is some kinda secret message";
alert(message);
//--></script> |
Notice how we didn't put in any quotes? That's because we called a variable named message, and the alert printed the value of the variable message.
Rather than type out "This is some kinda secret message" five times over, we can just call the variable message five times. It saves time.
<script type="text/JavaScript"><!--
var message = "This is some kinda secret message";
alert(message);
alert(message);
alert(message);
alert(message);
alert(message);
//--></script> |
There shouldn't be any need to provide an example for this. It'll just throw up five alerts, one after the other.
With variables, we can save lots of time.
- Make sure variables have meaningfull names.
- Variable names can have letters, numbers, dashes or underscores, but makes sure they begin with a letter.
- There are certain words that you can't use as variable names. You'll find those out later.
When we add variables, we are adding their values.
<script type="text/JavaScript"><!--
var message = "This is some kinda secret message";
var numbers = "four, five, six";
var num_mess = message + numbers;
alert(num_mess);
//--></script> |
Notice how I spaced out stuff to make things look neat. You can do that.
We can use the four arithmetic operators.
<script type="text/JavaScript"><!--
var second = 60;
var sec_per_minute = second * 60;
var sec_per_hour = sec_per_minute * 60;
var sec_per_day = sec_per_hour * 24;
var sec_per_year = sec_per_day * 365;
alert("There are " + sec_per_year + " seconds in a year.")
//--></script> |
Examine this code carefully. Notice how we can add strings and variables together, and multiply numbers and variables.
- + is addition.
- - is subtaction.
- * is multiplication.
- / is division.
Only addition can be used with strings and variables with strings as their values. All the others can only be used with numbers. Numbers don't need quotes because they're variables themselves. Here's what happens when you use quotes with numbers.
<script type="text/JavaScript"><!--
alert("17" + "17");
//--></script> |
If I put the addition sign in quotes, it too will appear. That's because anything inside quotes is converted to a string. Had you taken the quotes away from those two 17's, the alert would have said 34.
Experiment with variables until you've mastered them. They are essential to programming.