In this section, we'll focus on the features of the JavaScript programming language.
To start with, you need not declare a variable first if you want to assign a value into it. For example, the following two groups of statements are both legal:
var my_age;However, it is illegal to use a variable's value if it has been neither declared nor assigned a value.
my_age = prompt("Enter your age","");my_age = prompt("Enter your age","");
Let's look at the following example.
<html>
<head>
<title>Example 1</title>
</head>
<body>
<script>
var age;
age = prompt("Enter your age","");
var phone;
alert("Your age is: " + age);
alert("Your phone number is: " + phone);
alert("Your school is: " + school);
</script>
<p>
This is the regular page.
<p>
<a href="js2.htm#ex1"> Go Back </a>
</body>
</html>
In this example, the first alert of course shows the value of age.
The second alert is legal, since the variable phone has been declared. But since the variable has not been assigned a value, the value of the variable is the string "undefined".
Then the script fails on the third alert, since the variable school has neither declared nor assigned a value.
The rules for naming a variable are:
There are only three types of variables:
Unlike C++, JavaScript is a loosely typed language. You can assign any value to any variable.
There is also nothing incorrect if you change the type of a variable in a program. Consider the following example:
<html>
<head>
<title>Example 1</title>
</head>
<body>
<script>
var grade = 93;
alert("The numeric grade is " + grade);
grade = grade + 5;
alert("Five more makes " + grade);
grade = "A";
alert("The string grade is " + grade);
grade = grade + 5;
alert("Five more makes " + grade);
grade = true;
alert("Is this strange? " + grade)
</script>
<p>
This is the regular page.
<p>
<a href="js2.htm#ex2"> Go Back </a>
</body>
</html>
First the variable grade starts out as a numeric variable. When we add 5 to it, we get 98 (of course).
Then we store the string "A" in variable grade. Adding 5 to it really means concatenation now (since + means concatenation if at least one operand is a string). So we get "A5".
Finally we store a boolean value, true, in variable grade.
If you declare a variable inside a function, it's local to that function, and can be used only within that function.
If you declare a variable outside a function, it's available anywhere inside the script.
If a variable is available both globally and also locally within a function, the function uses the more local variable.
Let's look at the following example:
<html>
<head>
<title>Example 3</title>
</head>
<script>
var grade = 93;
var phone = "999-9999";
function f1()
{
var phone = "444-4444";
var city = "Albany";
alert("In the function...");
alert("Global grade is " + grade);
alert("Local phone is " + phone);
alert("Local city is " + city);
}
</script>
<body>
<script>
f1();
alert("In the body...");
alert("Global phone is " + phone);
alert("City is..." + city);
</script>
<p>
This is the regular page.
<p>
<a href="js2.htm#ex3"> Go Back </a>
</body>
</html>
Here's another example. The function f2 redeclares variable grade1 each time it's called.
The value of the global variable grade gets reset whenever the page is reloaded.
<html>
<head>
<title>Example 4</title>
</head>
<script>
var grade = 93;
function f1()
{
grade++;
alert("Grade is now " + grade);
}
function f2()
{
var grade1=0;
grade1++;
alert("Grade is now " + grade1);
}
</script>
<body>
<form>
<input type=button value="First Example" onclick="f1();">
<input type=button value="Second Example" onclick="f2();">
</form>
<p>
This is the regular page.
<p>
<a href="js2.htm#ex4"> Go Back </a>
</body>
</html>
Arithmetic Operations
JavaScript has a set of arithmetic operators much like in C++.
They include:
We also have those weird assignment operators that are also in C, like +=, -=, *=, /=, and %=.
There are even bit-wise operators.
And you can use parentheses to change the order of operations.
Look at the following example:
<html>
<head>
<title>Example 5</title>
</head>
<script>
function average(a, b, c)
{
var answer = (a + b + c) / 3;
alert ("Doing average of " + a + ", " + b
+ ", and " + c);
alert("Answer is " + answer);
}
</script>
<body>
<script>
average(5, 9, 10);
</script>
<p>
This is the regular page.
<p>
<a href="js2.htm#ex5"> Go Back </a>
</body>
</html>
Of course this script always prints the average of the same three numbers!
One way to get input into variables, as we've seen, is to use the prompt function. Consider the next example.
<html>
<head>
<title>Example 6</title>
</head>
<script>
function average(a, b, c)
{
var answer = (a + b + c) / 3;
alert ("Doing average of " + a + ", " + b
+ ", and " + c);
alert("Answer is " + answer);
}
</script>
<body>
<script>
var num1 = prompt("Enter first number","");
var num2 = prompt("Enter second number","");
var num3 = prompt("Enter third number","");
average(num1, num2, num3);
</script>
<p>
This is the regular page.
<p>
<a href="js2.htm#ex6"> Go Back </a>
</body>
</html>
There are no errors in this program, but the answer is wrong!
The problem is that the return value of the prompt function is a string!
Since we then apply the + operator to the strings, we concatenate the numbers! So if we input 3, 5, and 7, 3+5+7 is 357!
Then, oddly enough, JavaScript thinks it's just fine to divide a number into a string (as long as the string actually represents some number).
The solution is that we have to convert the string value stored in the variable to a number before we can use the variable's value in an addition operation. You do not need to do this conversion for any other arithmetic operation. Look at the next example:
<html>
<head>
<title>Example 7</title>
</head>
<script>
function average(a, b, c)
{
var answer = (parseInt(a) + parseInt(b) + parseInt(c)) /
3;
alert ("Doing average of " + a + ", " + b
+ ", and " + c);
alert("Answer is " + answer);
var product = a * b * c;
alert("But the product is " + product);
}
</script>
<body>
<script>
var num1 = prompt("Enter first number","");
var num2 = prompt("Enter second number","");
var num3 = prompt("Enter third number","");
average(num1, num2, num3);
</script>
<p>
This is the regular page.
<p>
<a href="js2.htm#ex7"> Go Back </a>
</body>
</html>
The parseInt function translates its String argument, and returns the integer equivalent.
There is a similar parseFloat function.
In Example 7, try entering the numbers 3.5, 3.8, and 3.99. As you can see, the parseInt function truncates any floating point number.
Again in Example 7, try entering the phrase 3 blind mice for one of the numbers. Now the parseInt function returns 3 for "3 blind mice", because the function stops when it encounters the first non-digit. Of course, the product no longer works, and NaN is returned in the alert statement.
Another way to enter input is via form elements. For now, we'll just use text fields. The data you enter into a text field is a String (same as with the data entered into a prompt).
Here's another version of the average and product program:
<html>
<head>
<title>Example 8</title>
</head>
<script>
function average(a, b, c)
{
var answer = (parseInt(a) + parseInt(b) + parseInt(c)) /
3;
alert ("Doing average of " + a + ", " + b
+ ", and " + c);
alert("Answer is " + answer);
var product = a * b * c;
alert("But the product is " + product);
}
</script>
<body>
<center> Calculating average and product </center>
<p>
<form>
Enter number 1: <input type=text name=num1>
<br> Enter number 2: <input type=text name=num2>
<br> Enter number 3: <input type=text name=num3>
<p>
<input type=button value="Click Me"
onClick="average(num1.value,
num2.value, num3.value);">
</form>
<p>
<a href="js2.htm#ex8"> Go Back </a>
</body>
</html>
Notice that the call of the function passes the value property of the textfield's to the function.
A function can also have a return value. We can also set the value property (or any property) of an input object inside programming code, as is done in the following example:
<html>
<head>
<title>Example 9</title>
</head>
<script>
function average(a, b, c)
{
var answer = (parseInt(a) + parseInt(b) + parseInt(c)) /
3;
return answer;
}
</script>
<body>
<center> Calculating average</center>
<p>
<form>
Enter number 1: <input type=text name=num1 size=6>
<br> Enter number 2: <input type=text name=num2 size=6>
<br> Enter number 3: <input type=text name=num3 size=6>
<br> Average is: <input type=text name=answer size=6>
<p>
<input type=button value="Get Average"
onClick="answer.value=average(num1.value,
num2.value, num3.value);">
</form>
<p>
<a href="js2.htm#ex9"> Go Back </a>
</body>
</html>
You can also pass a form element to a function, as in the next example:
<html>
<head>
<title>Example 10</title>
</head>
<script>
function average(a, b, c,answer)
{
answer.value = (parseInt(a) + parseInt(b) + parseInt(c))
/ 3;
}
</script>
<body>
<center> Calculating average</center>
<p>
<form>
Enter number 1: <input type=text name=num1 size=6>
<br> Enter number 2: <input type=text name=num2 size=6>
<br> Enter number 3: <input type=text name=num3 size=6>
<br> Average is: <input type=text name=answer size=6>
<p>
<input type=button value="Get Average"
onClick="average(num1.value,
num2.value, num3.value, answer);">
</form>
<p>
<a href="js2.htm#ex9"> Go Back </a>
</body>
</html>
As you can see, you can either pass a property of a form element, or the form element itself to a function.
You can even pass the entire form to the function if you wish, as in the next example:
<html>
<head>
<title>Example 11</title>
</head>
<script>
function average(myform)
{
myform.answer.value = (parseInt(myform.num1.value) +
parseInt(myform.num2.value) +
parseInt(myform.num3.value)) / 3;
}
</script>
<body>
<center> Calculating average</center>
<p>
<form name=thisform>
Enter number 1: <input type=text name=num1 size=6>
<br> Enter number 2: <input type=text name=num2 size=6>
<br> Enter number 3: <input type=text name=num3 size=6>
<br> Average is: <input type=text name=answer size=6>
<p>
<input type=button value="Get Average" onClick="average(thisform);">
</form>
<p>
<a href="js2.htm#ex11"> Go Back </a>
</body>
</html>
If the form is to be an argument, it must have a name.