程序代写代做代考 Java data structure javascript COMP284 Scripting Languages – Handouts (8 on 1)

COMP284 Scripting Languages – Handouts (8 on 1)

COMP284 Scripting Languages
Lecture 15: JavaScript (Part 2)

Handouts (8 on 1)

Ullrich Hustadt

Department of Computer Science
School of Electrical Engineering, Electronics, and Computer Science

University of Liverpool

Contents

1 Primitive datatypes
Numbers
Booleans
Strings

2 Arrays
Definition
forEach-method
Array functions

3 Control structures

COMP284 Scripting Languages Lecture 15 Slide L15 – 1

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 document.writeln("Your\ name is " + name + "and\ you are studying " + degree + "\ at " + university ); COMP284 Scripting Languages Lecture 15 Slide L15 – 7 Arrays Definition Arrays • An array is created by assigning an array value to a variable var arrayVar = [] var arrayVar = [elem0 , elem1 , ... ] • JavaScript uses arrayVar[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+"
“)

1: array1.length = 4

document.writeln(“2: array1[3] =”+array1[3]+”
“)

2: array1[3] = 43

array1[5] = ’world’

document.writeln(“3: array1.length = “+array1.length+”
“)

3: array1.length = 6

document.writeln(“4: array1[4] =”+array1[4]+”
“)

4: array1[4] = undefined

document.writeln(“5: array1[5] =”+array1[5]+”
“)

5: array1[5] = world

array1.length = 4

document.writeln(“6: array1[5] =”+array1[5]+”
“)

6: array1[5] = undefined

var array2 = array1

array2[3] = 7

document.writeln(“7: array1[3] =”+array1[3]+”
“)

7: array1[3] = 7

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 < arrayVar.length; index ++) { ... arrayVar[index] ... } • An alternative is the use of the forEach method: var callback = function (elem , index , arrayArg) { statements } array.forEach(callback ); • 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’,’Ullrich Hustadt ’]; var rewriteNames = function (elem , index , arr) { arr[index] = elem.replace (/(\w+)\s(\w+)/, "$2 , $1"); } myArray.forEach(rewriteNames ); for (i=0; i“);

[0] = Zito , Michele [1] = Hustadt , Ullrich

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(” “)+”
“)

planets@1: mercury venus earth mars jupiter saturn

last = planets.pop()

document.writeln(“planets\@2: “+planets.join(” “)+”
“)

planets@2: mercury venus earth mars jupiter

first = planets.shift()

document.writeln(“planets\@3: “+planets.join(” “)+”
“)

planets@3: venus earth mars jupiter

document.writeln(” \@4: “+first+” “+last+”
“)

@4: mercury saturn

home = [“mercury”,”venus”,”earth”].pop()

document.writeln(” \@5: “+ home + ”
“)

@5: earth

number = [“earth”].push(“mars”);

document.writeln(” \@6: “+ number + ”
“)

@6: 2

COMP284 Scripting Languages Lecture 15 Slide L15 – 14

Control structures

Control structures

JavaScript control structures

• conditional statements
• switch statements
• while- and do while-loops
• for-loops
• break and continue
are identical to those of PHP except for conditional statements

COMP284 Scripting Languages Lecture 15 Slide L15 – 15

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 (condition) {

statements

} else if (condition) {

statements

} else {

statements

}

• 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

condition ? if_true_expr : if_false_expr

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:

switch (expr) {

case expr1:

statements

break;

case expr2:

statements

break;

default:

statements

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:
switch (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 (condition) {

statements

}

do {

statements

} while (condition );

• As usual, curly brackets can be omitted if the loop onsists of only one
statement

Example:

// Compute the factorial of a given number

factorial = 1;

do {

factorial *= 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; increment) {

statements

}

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–)

document.writeln(i + ” – ” + j + ” – ” + i*j)

// Indentation has no ‘meaning ’ in JavaScript ,

// the next line is not part of the loop

document.writeln(“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) continue; document.writeln("10 / " + x + " = " + (10/x)); } 10 / -2 = -5 10 / -1 = -10 10 / 1 = 10 10 / 2 = 5 COMP284 Scripting Languages Lecture 15 Slide L15 – 21 Control structures For-loops Revision Read • Chapter 15: Expressions and Control Flow in JavaScript • Chapter 16: JavaScript Functions, Objects, and Arrays of R. Nixon: Learning PHP, MySQL, and JavaScript. O’Reilly, 2009. COMP284 Scripting Languages Lecture 15 Slide L15 – 22 Lecture 15 Primitive datatypes Numbers Booleans Strings Arrays Definition forEach-method Array functions Control structures Conditional statements Switch statements While- and Do While-loops For-loops