Your Ad Here

Monday, February 25, 2008

some basic tips of javascript

ariable Basics and Program Flow Control

Here is what this part of the tutorial covers:

Types of variables
Program Flow Control
Name Spitter

~~ Types of variables

In Part I of this article series you were introduced to variables. Part II used some more variables while explaining functions.

You may have come to the conclusion that JavaScript has several different types of variables. Well, you're right.

The variable type is determined by what type of value it contains.

JavaScript has 3 main types of variables:

(1) Number -- A variable containing a number. It can
be whole or decimal.

Examples: 4

(2) String -- A variable containing a string of
characters. It may include numbers and any
other characters. Strings are assigned to a
variable or otherwise manipulated in a JavaScript
program by enclosing them between either
single (') or double (") quotes.

Examples: '4b'
"Hello, world!"
"12 + 24"

When it is enclosed between single or double
quotes it is a string variable, even if all
the characters are numerical.

Example: "4"

Because "4" is between quotes, it signals the
browser that it is a string rather than a

(3) Object -- An object is a variable which can
contain more than one value. It can contain
number(s) and string(s), together, in the same
object. An object variable can also contain
functions and even other objects.

Here are some basics about each of the variable types.

~~ ~~ Numbers

Number variables are used when number comparisons or mathematical calculations are required.

Here are some basic calculations that can be done:

Note: The equal sign used in the context of assigning a value to a variable is "determine the value or equation on the right and then let the variable on the left equal that determination". The programming code assigning a value to a variable is referred to as an assignment statement.

var n = 2; // variable n now holds the value 2
n = n * 3; // (* is multiply) variable n now holds the
// value 6
n = n / 4; // (/ is divide) variable n now holds the
// value 1.5
n = n - 7; // (- is subtract) variable n now holds the
// value -5.5
n = n + 13.5;// (+ is addition) variable n now holds the
// value 8
n++; // (++ is increment by 1) variable n now
// holds the value 9
n--; // (-- is decrement by 1) variable n now
// holds the value 8
n = n % 3; // (% is modulus -- the remainder of a
// division) variable n now holds the
// value 2
n = n * n; // variable n now holds the value 4

One could build a calculator using the above mathematical operators. A graphical calculator with a scrolling tape, operated entirely by clicking with no keyboard input being accepted, and with memory keys used to assign and display the results of interim calculations, may be a nice project for later in this series when a few more of the basics of program decision and flow control have been introduced.

Program flow is often determined by the content of a variable. This

if(n == 10) { document.write('It is 10.'); }

will print "It is 10." on your page if the variable n equals 10.

Program flow can also be decided by comparing two or more variables and determining whether they are equal or in what way they are unequal.

Here are some number variable comparisons that can be done. Each comparison yields either "true" or "false":

(n == b) // true if both n and b contain the same number.
Otherwise, false.
(Note: "==" is a test for equality while "="
is an assignment statement symbol.)
(n < b) // true if n is less than b. Otherwise, false.
(n <= b) // true if n is less than or equal to b. Otherwise,
(n > b) // true if n is more than b. Otherwise, false.
(n >= b) // true if n is more than or equal to b. Otherwise,
(n != b) // true if n is not equal to b. Otherwise, false.

In the above examples, the variable b could be an actual number. For example,

if(n < 10) { document.write('Is less than 10.'); }

will print "Is less than 10." on your page if the variable n is less than 10.

~~ ~~ Strings

String variables are used when a sequence of characters (any characters not to be treated as numbers) are required for display or program control.

String variables have several symbols in common with number variables.

"=" means the same as it does in numbers, "assign the value on the right to the variable on the left".

"==" means "is equal to" except the comparison is character by character rather than the numerical value. Examples:

var s = 'hi'; // assigns "hi" to variable s
s == 'hi'; // is true
s == 'hi ya'; // is false (is not exactly the same)
s == 'HI'; // is false ("==" is case sensitive)
s == 'bye'; // is false

The program code:

var s = 'hi';
if(s == 'hi') { document.write('The same!'); }

will print "The same!" on your page if the variable s contains 'hi'.

Another symbol that string and number variables have in common is the "+" symbol. For number variables, it means addition. However, for string variables it means concatenation:

var a = "Hello,";
var b = "world!";
var s = a + b;

stores the string "Hello,world!" in the variable s.

If you know ahead of time what the variables a and b will contain, you can accomplish the same thing with:

var s = "Hello," + "world!";

If you want a space in between, you could use either one of the following two lines:

var s = a + " " + b;
var s = "Hello," + " " + "world!";

With the above value in s, the code:

s = s + ' -- real loud :)';
document.write("My program says: " + s);

will print "My program says: Hello, world! -- real loud :)" on your page.

~~ ~~ Objects

An object can contain many variables and entire functions, and even other objects, within itself. In order to use the stuff in the object, the object must be assigned to a variable.

(Although you can make your own objects, this article deals only with objects that are built into the JavaScript language.)

To assign an object to a variable, the name of the object must have a pair of parenthesis at the end (which can have values in them, like functions) and you must use the word: new

~~ ~~ Date

Here is an example of assigning the Date object to a variable.

var d = new Date();

The variable d is now an object variable and has access to all the variables and functions within the object. To accomplish an access, type the object variable's name, then a period, then the name of the function or variable inside the object.

The following example will access several functions and store the results. Wherever you put the following code, it will print the current date and time on your page:

No comments:

liveCricket Headline Animator