COMP284 Scripting Languages
Lecture 15: JavaScript (Part 2)
Handouts
Ullrich Hustadt
Department of Computer Science
School of Electrical Engineering, Electronics, and Computer Science
University of Liverpool
Primitive datatypes Numbers
Integers and Floating-point numbers
•
The JavaScript datatype number covers both
•
integer numbers 0 2012 -40 1263978
•
floating-point numbers 1.25 256.0 -12e19 2.4e-10
•
The Math object provides a wide range of mathematical functions
Math.abs(number) absolute value
Math.ceil(number) round fractions up
Math.floor(number) round fractions down
Math.round(number) round fractions
Math.log(number) natural logarithm
Math.random() random number between 0 and 1
Math.sqrt(number) square root
•
There are also some pre-defined number constants including
Math.PI (case sensitive) 3.14159265358979323846
NaN (case sensitive) ‘not a number’
Infinity (case sensitive) ‘infinity’
COMP284 Scripting Languages Lecture 15 Slide L15 – 2
Primitive datatypes Numbers
Numbers: NaN and Infinity
•
The constants NaN and Infinity are used as return values for
applications of mathematical functions that do not return a number
•
Math.log(0) returns -Infinity (negative ‘infinity’)
•
Math.sqrt(-1)returns NaN (‘not a number’)
•
1/0 returns Infinity (positive ‘infinity’)
•
0/0 returns NaN (‘not a number’)
•
Equality and comparison operators produce the following results
for NaN and Infinity:
NaN == NaN ; false NaN === NaN ; false
Infinity == Infinity ; true Infinity === Infinity ; true
NaN == 1 ; false Infinity == 1 ; false
NaN < NaN ; false Infinity < Infinity ; false
1 < Infinity ; true 1 < NaN ; false
Infinity < 1 ; false NaN < 1 ; false
NaN < Infinity ; false Infinity < NaN ; false
COMP284 Scripting Languages Lecture 15 Slide L15 – 3
Primitive datatypes Numbers
Integers and Floating-point numbers: NaN and Infinity
•
JavaScript provides two functions to test whether a value is or is not
NaN, Infinity or -Infinity:
•
bool isNaN(value)
returns TRUE iff value is NaN
•
bool isFinite(value)
returns TRUE iff value is neither NaN nor Infinity/-Infinity
There is no isInfinite function
•
In conversion to a boolean value,
•
NaN converts to false
•
Infinity converts to true
•
In conversion to a string,
•
NaN converts to 'NaN'
•
Infinity converts to 'Infinity'
COMP284 Scripting Languages Lecture 15 Slide L15 – 4
Primitive datatypes Booleans
Booleans
•
JavaScript has a boolean datatype
with constants true and false (case sensitive)
•
JavaScript offers the same short-circuit boolean operators
as Java, Perl and PHP:
&& (conjunction) || (disjunction) ! (negation)
But and and or cannot be used instead of && and ||, respectively
•
The truth tables for these operators are the same as for Perl and PHP,
taking into account that the conversion of non-boolean values to
boolean values differs
•
Remember that && and || are not commutative, that is,
(A && B) is not the same as (B && A)
(A || B) is not the same as (B || A)
COMP284 Scripting Languages Lecture 15 Slide L15 – 5
Primitive datatypes Booleans
Type conversion to boolean
When converting to boolean, the following values are considered false:
•
the boolean false itself
•
the number 0 (zero)
•
the empty string, but not the string ’0’
•
undefined
•
null
•
NaN
Every other value is converted to true including
•
Infinity
•
'0'
•
functions
•
objects, in particular, arrays with zero elements
COMP284 Scripting Languages Lecture 15 Slide L15 – 6
Primitive datatypes Strings
Strings
•
JavaScript supports both single-quoted and double-quoted strings
•
JavaScript uses + for string concatenation
•
Within double-quoted strings JavaScript supports the following
escape characters
\b (backspace) \f (form feed) \n (newline)
\r (carriage return) \t (tab) \ (backslash)
\' (single quote) \" (double quote)
•
JavaScript does not support variable interpolation
•
JavaScript also does not support heredocs,
but multi-line strings are possible
documen t . writeln ( " Your \
name is " + name + " and \
you are s tudying " + degre e + " \
at " + un ive rsity );
COMP284 Scripting Languages Lecture 15 Slide L15 – 7
Arrays Definition
Arrays
•
An array is created by assigning an array value to a variable
var arr ayV ar = []
var arr ayV ar = [elem0 , elem1 , ... ]
•
JavaScript uses
arr ayV ar [ index ]
to denote the element stored at position index in arrayVar
The first array element has index 0
•
Arrays have no fixed length and it is always possible to add more
elements to an array
•
Accessing an element of an array that has not been assigned a value yet
returns undefined
•
For an array arrayVar, arrayVar.length returns the maximal index
index such that arrayVar[index] has been assigned a value
(including the value undefined) plus one
COMP284 Scripting Languages Lecture 15 Slide L15 – 8
Arrays Definition
Arrays
•
It is possible to assign a value to arrayVar.length
•
if the assigned value is greater than the previous value of arrayVar.length,
then the array is ‘extended’ by additional undefined elements
•
if the assigned value is smaller than the previous value of arrayVar.length,
then array elements with greater or equal index will be deleted
•
Assigning an array to a new variable creates a reference to the
original array
; changes to the new variable affect the original array
•
Arrays are also passed to functions by reference
•
The slice function can be used to create a proper copy of an array:
object arrayVar.slice(start, end)
returns a copy of those elements of array variable that have indices
between start and end
COMP284 Scripting Languages Lecture 15 Slide L15 – 9
Arrays Definition
Arrays: Example
var array1 = ['hello', [1, 2], function() {return 5}, 43]
document.writeln("1: array1.length = "+array1.length+"<br>")
1: array1.length = 4<br>
document.writeln("2: array1[3] ="+array1[3]+"<br>")
2: array1[3] = 43<br>
array1[5] = 'world'
document.writeln("3: array1.length = "+array1.length+"<br>")
3: array1.length = 6<br>
document.writeln("4: array1[4] ="+array1[4]+"<br>")
4: array1[4] = undefined<br>
document.writeln("5: array1[5] ="+array1[5]+"<br>")
5: array1[5] = world<br>
array1.length = 4
document.writeln("6: array1[5] ="+array1[5]+"<br>")
6: array1[5] = undefined<br>
var array2 = array1
array2[3] = 7
document.writeln("7: array1[3] ="+array1[3]+"<br>")
7: array1[3] = 7<br>
COMP284 Scripting Languages Lecture 15 Slide L15 – 10
Arrays forEach-method
forEach-method
•
The recommended way to iterate over all elements of an array is a
for-loop
for ( index = 0; index < ar ray Var . length ; i ndex ++) {
... arr ayV ar [ index ] ...
}
•
An alternative is the use of the forEach method:
var cal lba ck = f unction ( elem , index , ar ray Arg ) {
statemen ts
}
array . forEach ( ca llb ack );
•
The forEach method takes a function as an argument
•
It iterates over all indices/elements of an array
•
It passes the current array element (elem), the current index (index) and
a pointer to the array (arrayArg) to the function
•
Return values of that function are ignored,
but the function may have side effecs
COMP284 Scripting Languages Lecture 15 Slide L15 – 11
Arrays forEach-method
forEach-method: Example
var myArray = [ ' Michele Zito ' ,' U llrich Hu stadt ' ];
var re write Names = functio n (elem , index , arr ) {
arr [ index ] = elem . re place (/(\ w +)\ s(\ w +)/ , "$2 , $1 " );
}
myArray . f orEach ( r ewrit eName s );
for (i =0; i < myA rray . le ngth ; i ++) {
doc ume nt . write ( ' [ ' +i + '] = '+ myArray [i ]+ " " );
}
doc ume nt . writel n ( " <br >");
[0] = Zito , Michele [1] = Hustadt , U llrich <br >
COMP284 Scripting Languages Lecture 15 Slide L15 – 12
Arrays Array functions
Array operators
JavaScript has no stack or queue data structures,
but has stack and queue functions for arrays:
•
number array.push(value1, value2,...)
appends one or more elements at the end of an array;
returns the number of elements in the resulting array
•
mixed array.pop()
extracts the last element from an array and returns it
•
mixed array.shift()
shift extracts the first element of an array and returns it
•
number array.unshift(value1, value2,...)
inserts one or more elements at the start of an array variable;
returns the number of elements in the resulting array
Note: In contrast to PHP and Perl, array does not need to be a variable
COMP284 Scripting Languages Lecture 15 Slide L15 – 13
Arrays Array functions
Array operators: push, pop, shift, unshift
planets = ["earth"]
planets.unshift("mercury","venus")
planets.push("mars","jupiter","saturn");
document.writeln("planets\@1: "+planets.join(" ")+" <br>")
planets@1: mercury venus earth mars jupiter saturn <br>
last = planets.pop()
document.writeln("planets\@2: "+planets.join(" ")+" <br>")
planets@2: mercury venus earth mars jupiter <br>
first = planets.shift()
document.writeln("planets\@3: "+planets.join(" ")+" <br>")
planets@3: venus earth mars jupiter <br>
document.writeln(" \@4: "+first+" "+last+" <br>")
@4: mercury saturn <br>
home = ["mercury","venus","earth"].pop()
document.writeln(" \@5: "+ home + " <br>")
@5: earth <br>
number = ["earth"].push("mars");
document.writeln(" \@6: "+ number + " <br>")
@6: 2 <br>
COMP284 Scripting Languages Lecture 15 Slide L15 – 14
Control structures Conditional statements
Control structures: conditional statements
JavaScript conditional statements do not allow for elsif- or
elseif-clauses, but conditional statements can be nested:
if ( condi tio n ) {
statemen ts
} else if ( condition ) {
statemen ts
} else {
statemen ts
}
•
The else-clause is optional but there can be at most one
•
Curly brackets can be omitted if there is only
a single statement in a clause
JavaScript also supports conditional expressions
con dition ? if _t rue_e xpr : if _f alse_ ex pr
COMP284 Scripting Languages Lecture 15 Slide L15 – 16
Control structures Switch statements
Control structures: switch statement
Switch statements in JavaScript take the same form as in PHP:
swit ch ( expr ) {
case expr1 :
statemen ts
break ;
case expr2 :
statemen ts
break ;
default :
statemen ts
break ;
}
•
there can be arbitrarily many case-clauses
•
the default-clause is optional but there can be
at most one
•
expr is evaluated only once and then compared
to expr1, expr2, etc using (loose) equality ==
•
once two expressions are found to be equal the
corresponing clause is executed
•
if none of expr1, expr2, etc are equal to expr,
then the default-clause will be executed
•
break ‘breaks out’ of the switch statement
•
if a clause does not contain a break command,
then execution moves to the next clause
COMP284 Scripting Languages Lecture 15 Slide L15 – 17
Control structures Switch statements
Control structures: switch statement
Not every case-clause needs to have associated statements
Example:
swit ch ( month ) {
case 1: case 3: case 5: case 7:
case 8: case 10: case 12:
days = 31;
break ;
case 4: case 6: case 9: case 11:
days = 30;
break ;
case 2:
days = 28;
break ;
default :
days = 0;
break ;
}
COMP284 Scripting Languages Lecture 15 Slide L15 – 18
Control structures While- and Do While-loops
Control structures: while- and do while-loops
•
JavaScript offers while-loops and do while-loops
while ( co ndi tion ) {
statemen ts
}
do {
statemen ts
} while ( condition );
•
As usual, curly brackets can be omitted if the loop onsists of only one
statement
Example:
// Co mpute the factorial of a given num ber
fac torial = 1;
do {
fac torial *= number - -;
} while ( number > 0);
COMP284 Scripting Languages Lecture 15 Slide L15 – 19
Control structures For-loops
Control structures: for-loops
•
for-loops in JavaScript take the form
for ( initialisation ; test ; increm ent ) {
stat ements
}
Again, the curly brackets are not required if the body of the loop only
consists of a single statement
•
In JavaScript, as in PHP, initialisation and increment can consist
of more than one statement, separated by commas instead of semicolons
Example:
for (i = 3, j = 3; j >= 0; i ++ , j - -)
doc ume nt . writel n ( i + " - " + j + " - " + i* j)
// I nde nt ati on has no ` meaning ' in JavaScript ,
// the next line is not part of the loop
doc ume nt . writel n ( " After loop : " + i + " - " + j)
•
Note: Variables introduced in a for-loop are still global even if declared
using var
COMP284 Scripting Languages Lecture 15 Slide L15 – 20
Control structures For-loops
Control structures: break and continue
•
The break command can also be used in while-, do while-, and for-loops
and discontinues the execution of the loop
while ( value < 100) {
if ( value == 0) break ;
value ++
}
•
The continue command stops the execution of the current iteration of a
loop and moves the execution to the next iteration
for (x = -2; x <= 2; x ++) {
if ( x == 0) contin ue ;
doc ume nt . writel n ( " 10 / " + x + " = " + (10/ x ));
}
10 / -2 = -5
10 / -1 = -10
10 / 1 = 10
10 / 2 = 5
COMP284 Scripting Languages Lecture 15 Slide L15 – 21
