HTML5 and CSS3 More JavaScript Page 1 - Prof. … and CSS3 More JavaScript.pdfHTML5 and CSS3—More...
13
HTML5 and CSS3—More JavaScript Page 1 HTML5 and CSS3 MORE JAVASCRIPT 1 The Math Object The Math object lets the programmer perform “built-in” mathematical tasks Includes several mathematical methods Math.min() // Finds smallest number in a list Math.max() // Finds largest number in a list Math.pow() // Calculates the power of a number Math.round() // Round to an integer Math.random() // Returns a random number Constants of the Math Object A constant is an identifier (like a variable) whose value once assigned never changes Some “built-in” constants of the Math object are: Math.PI Math.E 3 4 3 4 The Date Object The Date object has several constructors for instantiating objects that store dates and times var dateObject = new Date(year, month, date); The date specified as arguments var dateObject = new Date(year, month, date, hour, minutes, seconds); The date and time specified as arguments var dateObject = new Date(); The current system date and time Some Methods of the Date Object Some methods of the date object are: dateObject.getFullYear() dateObject.getMonth() dateObject.getDay() // Number of day of week dateObject.getHours() dateObject.toString() // Local time dateObject.toUTCString() // GMT dateObject.getLocaleDateString() dateObject.getLocaleTimeString () 6 7 6 7 Escape Sequences Characters within a string followed by the backslash (\) character have a special meaning \b Backspace 9 9
Transcript of HTML5 and CSS3 More JavaScript Page 1 - Prof. … and CSS3 More JavaScript.pdfHTML5 and CSS3—More...
HTML5 and CSS3—More JavaScript Page 1
HTML5 and CSS3
MORE JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
Expressions, Objects and Types
The Math Object
The Math object lets the programmer perform “built-in” mathematical tasks
Includes several mathematical methods
Math.min() // Finds smallest number in a list
Math.max() // Finds largest number in a list
Math.pow() // Calculates the power of a number
Math.round() // Round to an integer
Math.random() // Returns a random number
Constants of the Math Object
A constant is an identifier (like a variable) whose value once assigned never changes
Some “built-in” constants of the Math object are:
Math.PI
Math.E
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
2
3
4
expressions1.htm
The Date Object
The Date object has several constructors for instantiating objects that store dates
and times
var dateObject = new Date(year, month, date);
The date specified as arguments
var dateObject = new Date(year, month, date, hour, minutes, seconds);
The date and time specified as arguments
var dateObject = new Date();
The current system date and time
Some Methods of the Date Object
Some methods of the date object are:
dateObject.getFullYear()
dateObject.getMonth()
dateObject.getDay() // Number of day of week
dateObject.getHours()
dateObject.toString() // Local time
dateObject.toUTCString() // GMT
dateObject.getLocaleDateString()
dateObject.getLocaleTimeString ()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
6
7
expressions2.htm
Escape Sequences
Characters within a string followed by the backslash (\) character have a special
meaning
\b Backspace
\nNewline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
9
HTML5 and CSS3—More JavaScript Page 2
\b Backspace
\nNewline
\t Vertical tab
\" (For placing a quote inside a string)
\\ (For placing a backslash inside a string)
\uxxxx (Returns hex Unicode character)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
expressions3.htm
Type Conversions
JavaScript is flexible with data types
Automatically converts data type of variable to the type of the variable that is
assigned to it
Will attempt to convert factors in an expression based upon the operator
17 + "hello"; // Concatenates number and string
"24" / "3"; // Converts both strings and divides
"7" * "n"; // Cannot convert "n" to a number
// cannot multiply, returns NaN
Predefined Global Variables
JavaScript read-only variables that usually are the result of some error in processing
NaN (not a number)
Infinity
null (primitives, e.g. integers and floats, not assigned a value or an object not yet
instantiated)
undefined (value of variables not yet initialized—deeper kind of absence than null)
Wrapper Objects
Used to force an explicit data type conversion onto a variable
E.g. String(), Number(), Boolean(), etc.
Almost never necessary in JavaScript
Examples:
var a = String(23.4);
var b = Number("23.4");
var c = Boolean("true");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
11
12
13
expressions4.htm
The getItemById() Method—Page 1
The document.getElementById() method returns any element in the DOM that has
the ID attribute with the specified value
Not just the value of an input text box
Used almost every time the developer wants to manipulate or get information from
an element on the document
Returns null if no elements with the specified ID exists
The ID should be unique within the web document
If more than one element with the specified ID exists, returns the first element in
the source code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
15
HTML5 and CSS3—More JavaScript Page 3
the source code
The getItemById() Method—Page 2
Format:
document.getElementById("elementID")
The elementID is the ID attribute value of any element in the document
The getItemById() Method—Page 3
Examples:
var number = document.getElementById("number").value;
Retrieves (gets) the current value from an element with ID = "number" (could be
any <form> element)
document.getElementById("resultBinary").value = "10110";
Updates (sets) the value of an element with ID = "resultBinary"
The innerHTML Property—Page 1
The innerHTML property updates (sets) or returns (gets) the HTML content of an
element
Can be a combination of text and HTML tags
There is a rarely used innerText property that can be used to update (set) and
return (get) text only
Format:
HTMLElementObject.innerHTML
The HTMLElementObject is an element in the DOM (might be identified by ID or
some other attribute)
The innerHTML Property—Page 2
Examples:
document.getElementById("resultBinary").innerHTML = "10110";
Updates (sets) the HTML content of an element with ID = "resultBinary"
var number = document.getElementById("number").value;
Retrieves (gets) the current HTML content from an element with ID = "number"
The toString() Method
The toString() method converts a number to a string displayed in a specific base
E.g. binary, octal, hexadecimal, etc.
Convert to binary
numb.toString(2)
Convert to hexadecimal
numb.toString(16)
Parse Methods—Page 1
The parse methods (parseInt and parseFloat) methods take string arguments and
parse (e.g. convert) them to int’s and float’s respectively
Formats:
parseInt(string)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
16
17
18
19
20
21
HTML5 and CSS3—More JavaScript Page 4
Formats:
parseInt(string)
parseFloat(string)
The string is the string that contains the number that is to be parsed
Parse Methods—Page 2
Both the first and second examples below will execute identically and return the
integer 123:
var number = parseInt("123");
var number = parseInt("123abc4");
In the second instance the JavaScript engine assumes there are no more numbers
when it gets to the letter “a”
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
22
Conditions & Loops
Conditional Statements
Provides alternative execution paths
One path or another is chosen when the program executes depending upon a
Boolean test result
Either True or False—the only two truth values
Both selection (decision) and iteration (repetition/loop) structures use conditional
statements
The Relation Condition—Page 1
A booleanExpression that compares two factors for conditions that are:
Equal to (or not equal to)
Greater than (or equal to)
Less than (or equal to)
The Relation Condition—Page 2
Format:
factor1 relationalOperator factor2
At least one factor must be a variable—both may be
Examples:
salary >= 150
hours == noon
Relational Operators
Also sometimes called conditional operators:
== Is equal to
< Is less than
> Is greater than
<= Is less than or equal (identical) to
>= Is greater than or equal (identical) to
!= Is not equal to
Single-Sided if Statement—Page 1
Statement(s) executed only if the test is true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
24
25
26
27
28
29
HTML5 and CSS3—More JavaScript Page 5
Single-Sided if Statement—Page 1
Statement(s) executed only if the test is true
If the condition is false, statement(s) in body of structure are skipped
Format:
if (booleanExpression)
{
statement(s) to be executed
when the test succeeds go here;
}
Single-Sided if Statement—Page 2
1. The keyword if
2. The booleanExpression inside (parentheses)
3. Statement(s) to be executed if booleanExpression is true in {braces}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
29
30
Flowchart for Single-Sided if Statement
Single-Sided if Statement—Page 3
Example:
var richPoor = "poor";
if (salary >= 150)
{
richPoor = "rich";
}
Semi-colon (;) placement—after every statement in the body of the structure (not
after the condition)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
31
32
conditionals1.htm
Single-Sided if Statement—Page 4
Alternates if only one statement to be executed (braces not necessary)—
Alternate example 1:
if (salary >= 150)
richPoor = "rich";
Alternate example 2 (on a single line):
if (salary >= 150) richPoor = "rich";
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
34
conditionals1b.htm
Double-Sided if Statement—Page 1
One (set of) statement(s) executed if the test evaluates as true
Another (set of) statement(s) executed if the test is false
Double-Sided if Statement—Page 2
Format:
if (booleanExpression)
{
statement(s) to be executed
when the test succeeds go here;
}
else
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
36
37
HTML5 and CSS3—More JavaScript Page 6
}
else
{
statement(s) to be executed
when the test fails go here;
}
Double-Sided if Statement—Page 3
1. The keyword if
2. The booleanExpression inside (parentheses)
3. Statement(s) to be executed if booleanExpression is true in the first set of {braces}
4. The keyword else
5. The statement(s) to be executed if the test fails in the second set of {braces}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
38
Flowchart for Double-Sided if Statement
Double-Sided if Statement—Page 4
Example:
if (salary >= 150)
{
document.write("You must be rich");
}
else // if salary < 150
{
document.write("You must be poor");
}
Double-Sided if Statement (Page 5)
Example (alternate version with no braces):
if (salary >= 150)
document.write("You must be rich");
else // if salary < 150
document.write("You must be poor");
Valid usage without {braces} because there is only one statement for each truth
value …
Statement if true goes after the condition
Statement if false goes after the keyword else
Double-Sided if Statement (Page 6)
Example (another alternate version):
if (salary >= 150) document.write("You must be rich");
else document.write("You must be poor"); // salary < 150
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
39
40
41
42
conditionals2htm
Code Blocks—Page 1
A set of statements inside {braces}
More than one statement may executed within either true or false test block
Format:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
44
HTML5 and CSS3—More JavaScript Page 7
More than one statement may executed within either true or false test block
Format:
if (booleanExpression)
{
statement1;
statement2;
[statement3; … ]
}
Code Blocks—Page 2
Example:
if (mouseX > 100)
{
fill(255);
background(0);
}
The else if Structure
The if statement only can test for two truth values in an individual statement
An option available for this purpose is the linear nested if …
It can test for more than two values (or ranges of values) of same variable within the
structure
The key words else if provide for an unlimited number of boolean expressions
Sometimes known as case selection
Format of else if
if (booleanExpression1)
{
statement(s) to be executed
when test 1 succeeds go here;
}
else if (booleanExpression2)
{
statement(s) to be executed
when test 2 succeeds go here;
}
[else if … ]
[else
{
statement(s) to be executed
when all tests fail go here;
} ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
45
46
47
HTML5 and CSS3—More JavaScript Page 8
Flowchart for else if
Example of else if—Page 1
if (error.code == error.PERMISSION)
{
alert("Not sharing your location");
}
else if (error.code == error.POSITION_UNAVAILABLE)
{
alert("Cannot detect position");
}
…
Example of else if—Page 2
…
else if (error.code == error.TIME_OUT)
{
alert("Position retrieval timed out");
}
else // if (error.code == error.UNKNOWN_ERROR)
{
alert("Unknown error");
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
48
49
50
conditionals3.htm
Combined if Statements—Page 1
A combined (also called compound) if statement contains …
Multiple Boolean expressions (more than one)
Connected by the logical operators …
&& (meaning AND)
|| (meaning OR)
Combined if Statements—Page 2
Formats:
if (booleanExpression1 && booleanExpression2)
— or—
if (booleanExpression3 || booleanExpression4)
Combined if Statements—Page 3
Examples:
if (age >= 0 && age <= 10)
With the && (AND) operator all conditions must be true
if (age <= 10 || age >= 80)
With the || (OR) operator any one condition (or more conditions) must be true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
52
53
54
HTML5 and CSS3—More JavaScript Page 9
With the || (OR) operator any one condition (or more conditions) must be true
The ! (NOT) Logical Operator
Used to negate a Boolean expression so that the inverse (opposite) of the condition
is true
Format:
! booleanExpression
The booleanExpression could be a Boolean variable, Boolean function or a relation
condition
Example:
if ( ! (age >= 0 && age <= 10) )
Is equivalent to:
if (age < 0 || age > 10)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
55
conditionals4.htm
The switch Statement—Page 1
The switch statement is used to select from one of a series of code blocks
The switch expression is evaluated once
The value of the expression is compared with the values of each case looking for a
match (an “equal to” value)
If there is a match between the expression and one case, the associated code block is
executed
The switch Statement—Page 2
The keyword break “breaks out” of the switch block
Stops execution of more code and additional case testing inside the block
“The job is done” once one case matches the expression
The default case is optional
The switch Statement—Page 3
Format:
switch(expression)
{
case value:
statements executed if value matches
break;
case value:
statements executed if value matches
break;
…
default:
statements executed if all cases false
}
The switch Statement—Page 4
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
57
58
59
60
HTML5 and CSS3—More JavaScript Page 10
The switch Statement—Page 4
Example:
switch ( new Date().getDay() )
{
case 6:
result = "Today is Saturday";
break;
case 0:
result = "Today is Sunday";
break;
default:
result = "Looking forward to weekend";
}
The switch Statement—Page 5
Equivalent to:
var day = new Date().getDay();
if (day == 6)
result = "Today is Saturday";
else if (day == 0)
result = "Today is Sunday";
else
result = "Looking forward to weekend";
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
60
61
conditionals5.htm
Iteration (Loop) Statements
Provides repeated execution of a block of statements
The loop continues:
A specified number of times (counter-controlled looping)
While a condition is met (sentinel-controlled looping) or …
Also called repetition or do while structure
Meaning do the loop while condition is True
The for Loop—Page 1
Implements a loop by counting a specific number of iterations (repetitions)
Counter-controlled looping
Appropriate when the exact number of loop repetitions is known
Format:
for (initialize; booleanExpression; increment)
{
statement(s) to be repeated;
}
The for Loop—Page 2
Example (three expressions in the parentheses):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
63
64
65
HTML5 and CSS3—More JavaScript Page 11
The for Loop—Page 2
Example (three expressions in the parentheses):
for (var ctr = 1; ctr <= 10; ctr++)
The initialize component (var ctr = 1)
Value assigned to a counter variable when the loop is first encountered in the
program
The booleanExpression component (ctr <= 10)
Relation condition which is tested to determine if the loop should be entered again
The increment component (ctr++)
Indicates by what value the counter changes at the beginning of each subsequent
loop
The for Loop—Page 3
Example 1:
for (var ctr = 1; ctr <= stars; ctr++)
{
document.write("*");
}
Unary Operators
Unary operators update variables values by adding (increment operator) or
subtracting (decrement operator) value of 1 to (or from)
Operator Example Explanation
++ ctr++; ctr = ctr + 1;
++ ++ctr; ctr = ctr + 1;
-- ctr--; ctr = ctr – 1;
-- --ctr; ctr = ctr – 1;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
65
66
67
loops1.htm
The for Loop—Page 4
Example 2:
var fahrenheit = [212, 72, 32, 0, -444];
var centigrade;
for (var index = 0; index < 4; index++)
{
centigrade = 5 / 9 * (fahrenheit[index] – 32);
document.write(centigrade);
}
Array Initializers
An array initializer is an array literal in square [brackets], e.g.:
[] is an empty array with no elements
[3, 7] is an array with two elements
[ [1, 2, 3], [4, 5, 6], [7, 8, 9] ] is a 3 x 3 2-dimensional array
[1, , , , 5] is an array with five elements in which three of the elements are undefined
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
69
70
HTML5 and CSS3—More JavaScript Page 12
[ [1, 2, 3], [4, 5, 6], [7, 8, 9] ] is a 3 x 3 2-dimensional array
[1, , , , 5] is an array with five elements in which three of the elements are undefined
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
loops2.htm
The for…in Statement—Page 1
Enables looping through an array without knowing exact number of elements
During each loop execution the index for the array element is assigned to the for…in
variable
Format:
for (var index in arrayName)
{
statement(s)
}
The for…in Statement—Page 2
Example:
var fahrenheit = [212, 72, 32, 0, -444];
var centigrade;
for (var index in fahrenheit)
{
centigrade = 5 / 9 * (fahrenheit[index] – 32);
document.write(centigrade);
}
The for…in Statement—Page 3
Equivalent to:
var fahrenheit = [212, 72, 32, 0, -444];
var centigrade;
for (var index = 0; index < 4; index++)
{
centigrade = 5 / 9 * (fahrenheit[index] – 32);
document.write(centigrade);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
72
73
74
loops3.htm
The while Loop—Page 1
Continues to repeat a loop as long as a controlling condition is true (pre-test)
Sentinel-controlled looping
The variable controlling the condition must be updated by logic within the loop
Exact number of loops is usually unknown
The while Loop—Page 2
Format:
while (booleanExpression)
{
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
76
77
HTML5 and CSS3—More JavaScript Page 13
while (booleanExpression)
{
statement(s) to be repeated as long as the booleanExpression is true;
}
The while Loop—Page 3
Example:
var balance = 250000;
var rate = .08;
while (balance < 1000000)
{
balance *= (1 + rate);
year++;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
78
The while Loop
Assignment Operators
Also known as op equals operators
Assigns an updated value to a variable
Operator Example Explanation
+= ctr += 1; ctr = ctr + 1;
-= ctr -= 17; ctr = ctr - 17;
*= ctr *= 8; ctr = ctr * 8;
/= ctr /= 5; ctr = ctr / 5;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
79
80
