24 Aug Admin
o However, what if we want to create our own storage space for information that doesn’t necessarily have a page-based counterpart? For example, what if we wanted to store the previous value of a document’s title property before changing it, so it could be retrieved later, or if we wished to store the date time that the page was loaded into the browser for reproduction in several places on the page, and didn’t want to have to recalculate the time on each occasion?
o In a practical sense, variables have no “parent” object with which they are associated.
o Variables can be created (“declared”) by you as a developer, and can be given any arbitrary name (within certain rules) – object properties, however, are restricted by the definition of the parent object. It would make no sense, for example, for our piano object in the previous chapters to have a propeller property!
Variable name rules are straightforward – no spaces, names must start with a letter. Examples of valid variable names are:
o At the simplest level, variables can store three different types of value:
e.g. 1.3324, 3.14159, 100000, -8 etc.
o Boolean Values
e.g. true, false
o Note that strings can contain numbers, but the following variable values are not equivalent:
1.234 and “1.234”
The latter is a string value. This becomes important. Consider:
1+2 = 3
“a” + “b” = “ab”
“1” + “2” = “12”
o For example, strMessage might indicate a string variable, where numPageHits might indicate a numerical value in the variable.
Variable assignment is accomplished in the same way as object property assignment. When a variable is assigned a value for the first time, it is automatically created. This is different from other programming languages, where a variable must be created explicitly first, before it can be loaded with a value.
o Some examples of variable assignment follow:
numBrowserVersion = 5.5;
numTotal += 33;
Message = “Hello!”;
Message = “Goodbye”; Message = 3;
o Note that the last three examples show that variable values can be altered after their initial assignment, and also that the type of value stored in a variable can be altered in a similar manner.
o Once a variable has been created and a value stored within, we will want to be able to access it and perhaps manipulate it. In a similar manner to object properties, we access our variables simply by calling them:
Message = “Hello World!”; alert(Message);
o Note that we do not use quote marks around our variable names. The above code is different from:
for hopefully obvious reasons.
o As well as using variables for storage and access, we can combine and manipulate them using operators. For example:
a = 12; b = 13; c = a + b; // c is now 25 c += a; // c is now 37
c = b + “ Hello!”; // c is now “13 Hello!”
|x + y||Adds x to y if both are numerical – otherwise performs concatenation|
|x – y||Subtracts x from y if both are numerical|
|x * y||Multiplies x and y|
|x / y||Divides x by y|
|x % y||Divides x by y, and returns the remainder|
|-x||Reverses the sign of x|
|x++||Adds 1 to x AFTER any associated assignment|
|++x||Adds 1 to x BEFORE any associated assignment|
|x–||Subtracts 1 from x AFTER any associated assignment|
|–x||Subtracts 1 from x BEFORE any associated assignment|
o Open your previous project file, and save it under the name chapter_11.html.
o Assign the message
“Welcome to my web site”
to a variable called greeting.
o Use this variable to create an alert box containing the message, and also to produce a header on the page without having to retype the message.
o Test this page in your browser. o Now, modify your code to create two variables, var_1 and var_2.
o Assign the value “Welcome to” to var_1, and the value “my web site” to var_2.
o Create a third variable var_3, and assign to it the value of var_1 + var_2. Then use an alert box to check the resultant value of var_3.
o Test this page in your browser.
- Client-side vs. Server-side
- Programming Language
- Variables and Operators
- Objects, Properties and Methods
- Assigning Values to Properties
- Automatically Redirecting the User
- Hiding Scripts from Older Browsers
- About Comments
- Alert, Prompt and Confirm
- Associative & Objective Arrays
- Two Dimensional Arrays
- String Manipulation
- Using Functions
- Logical Operators
- Using Event Handlers
- Working with Images
- Simple Image Rollovers
- Object Instantiation and Better Rollovers
- Working with Browser Windows
- Positioning Browser Windows
- Focus and Blur
- Dynamically Created Content