24 Aug Admin
o We have been introduced to the concepts of objects and their various properties and methods. These inter-related concepts allow any web page to be broken down into little snippets of information or data, which can then be accessed by JavaScript and, in many cases, changed.
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 Variables are named containers for values within JavaScript. They are similar to object properties in many ways, but differ importantly:
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:
BrowserName
page_name
Message1
MESSAGE1
o In many browsers, JavaScript is case-sensitive, which means that the last two variables in the example above are distinct variables. It is a good idea to pick a particular naming style for your variables, and to stick to it within your projects.
o At the simplest level, variables can store three different types of value:
o Numbers
e.g. 1.3324, 3.14159, 100000, -8 etc.
o Strings
e.g. “JavaScript for Beginners, week 3”, “Hello World” 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 Some developers use their own naming convention with variable names to denote the type of value expected to be contained in a given variable. This can often be helpful, but is in no way required by JavaScript (c.f. JavaScript comments)
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:
alert(“Message”);
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!”
Our last example may have been unexpected – we added a number to a string and got a string as a result. JavaScript is smart enough to realise that a number cannot be “added” to a string in a numerical sense, so it converts the number temporarily to a string and performs a concatenation of the two strings. Note that b remains 13, not “13”. o A table of operators:
Operator | Function |
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 |
Project
o Open your previous project file, and save it under the name chapter_11.html.
o Clear the previous JavaScript code, and ensure that the script tags are contained in the body section of the document.
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.
Title
- Introduction to JavaScript
- Implementation
- Variables in JavaScript
- Client-side vs. Server-side
- Programming Language
- Variables and Operators
- About Javascript
- A tour of javascript
- Objects, Properties and Methods
- Assigning Values to Properties
- Comparisons
- Automatically Redirecting the User
- Hiding Scripts from Older Browsers
- About Comments
- Alert, Prompt and Confirm
- Conditionals
- Looping
- Arrays
- 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