4.4 JavaScript (JS)

1. 4.4 JavaScript (JS) Deitel Ch. 7, 8, 9, 10

2. JavaScript & Java: Similarities • JS (JavaScript) is case-sensitive • Operators • arithmetic: unary +, unary -, +, -, *, /, % • bit-wise: ~ (unary), &, |, <<, >>, >>> • logical: ! (unary), &&, || • strings: + (concatenation) • compound assignment: • ++, --, • op= where op is one of the binary operators above, e.g., +=, -=, |=, &&=, • relational: ==, !=, <, >, <=, >= • conditional: op1 ? op2 : op3 (if op1 then op2 else op3)

3. JS & Java: Similarities (cont.) • Assignment with = • Syntax and semantic of control structures • if • if-else • shift-case • while • do-while • for • except for-in, that's different • Block {…}

4. JS & Java: Similarities (cont.+) • Syntax of identifers • e.g., index_1, theCamelNotation • Syntax of numeric and string constants: • e.g., -40, 3.14, 0.1E-7, 1.2e2, NaN, "a string", 0xFF00FF, 0x0a1b2c • Special characters: /n, /t, /f , /r, /", /', //, etc. • Special values: null, true, false • Subprogram calls: sub(p1,p2,…) • Array initialization • e.g.: var cars = ["Mini", "Miata"]; • Array indices begin with 0, end with length-1 • Array access: cars[0]

5. JS & Java: Similarities (cont.++) • break statement • continue statement • return statement • Subprograms can throw exceptions • exceptions are objects, can carry information • difference: subprograms don't declare what they throw • try-catch statement • Object instantiation: new Name(…) • All objects inherit method toString(…)

6. JS & Java: Differences • Type-less variables vs. strongly typed • Interpreted vs. hybrid • Functional features vs. purely imperative • Syntax: declarations, subprograms, classes, … • Additional statements • Different scope rules • Only few standard objects vs. rich set of supporting classes (JDK) • Very different Object-Oriented Facilities • object-prototype vs. class concept • no encapsulation • different inheritance • different syntax

7. Variables • Variables can be declared with var • mandatory for locals • optional, but recommended for globals • Global variables are assigned outside of functions • Typing is implicit • values have types, not variables • a variable can hold a value of any type • the expression decides the type • Type conversion errors are detected at run-time!

8. Types • Types: • "primitive": • undefined, null, boolean, number, string • function, object • Operator typeof • returns "undefined", "boolean", "number", "string", "function" or "object" • null or arrays are also "object"s

9. Values • Strings can be enclosed in ' • 'the "other" way' • Special value: undefined • var a = [1, , , 2]; // a[1],a[2] are undefined • undefined can be tested • if (value) {use(value)} else {alert("undefined value");} • In a condition • 0, "", null and undefined are interpreted as false • everything else is interpreted as true • Watch out: JS doesn't protect you against misuse of values in a condition!

10. Arrays • Array is an explicit object Array • e.g.: var cards = new Array(); • e.g.: var cards = new Array(12);//0..11 undefined • e.g.: var nos = new Array(1,2,3);//=[1,2,3] • Predefined property length • Assigning an element at index that didn't exist is ok • it extends the array • An associative array is not an Array object • indices can be strings • array notation used for accessing an object's properties • see later

11. Array methods • push(item) appends the item at index length • i.e., increments length • pop() removes and returns the last item • decrements length • shift() removes and returns the first item • decrements length and indices of all other items • slice(from,[to]) returns the subarrayfrom..to-1 • concat(array) appends all items of array • splice(from,n,[it1,it2,…]) • replaces n items starting at from by items it1,it2,… • reverse(), sort(), toString()

12. Statements • Statements don't need to be separated by; • but they can – it's recommended • ; is needed for several statements on one line - don't do that! • for-in statements assigns consecutive indices • e.g.: for (var i in anArray) {alert(anArray[i]);} • with statement • allows using properties of an object without object prefix • e.g.:with (document) { write("<h1>Greetings</h1>"); //= document.write() write("<p>Hi there!</p>");}

13. Subprograms • Syntax • function name (…) {…} • Anonymous functions • name = function (…) {…} • called the same way: name(…) • Function body is stored as text • it can be retrieved and modified! • Functions are data • they can be assigned to variables, stored in an array, etc. • A function is an object, can be defined that way • var sum = new Function("a","b","return a+b"); • A function can also define a "class" (see later)

14. Function Parameters • It's ok to call a function with fewer parameters • you can check for undefined values • also, arguments property holds an array of all parameter values • Parameter passing • by value • numbers, strings, true, false, null, undefined • by reference • objects • Return values are passed the same way

15. Built-in Functions: Dialogs • alert(message) • displays a modal dialog with message and OK button • often used while debugging • e.g., alert("variable=" + variable); • used to display multiple lines • e.g., alert("line 1\nline 2\nline3"); • confirm(message) • displays a modal dialog with message and with buttons OK and Cancel • returns true if the user clicked OK • returns false if the she clicked Cancel • prompt(message) • displays a modal dialog with message, input field and OK button • returns the text that the user typed into the input field

16. Built-in Functions (cont.) • parseInt(string) • attempts to convert the string into an integer number and return it • returns the integral part of a real number or NaN if string isn't a number • parseFloat(string) • attempts to convert the string into an floating point number and return it • returns NaN if string isn't a number • eval(expression) • interprets the expression as JavaScript code

17. JavaScript Pitfalls • JavaScript is "silent" • run-time errors stop script's execution • syntax errors may not matter if the code is not executed • JS allows assignments within expressions • like Java • e.g. var x=++y – x=y--; //heck, what? • never use that! don't do that!

18. Browser Pitfalls • IE just reports "runtime error" • Firefox error line numbers are off • check a line before or after • JS in IE is not the same as JS in Firefox is not the same as JS in Opera is not the same as … • in other words: var browsers = [Firefox,IE,Opera,Safari]; var text="You have to test and test because\n"; for (var i = 0; i < browsers.length; i++) { text+="JS in "+browsers[i]+" isn't the same as in\n"; } alert (text+"...");

19. JS & Java • Facit: There are a lot of similarities But despite these similarities JS is very different from Java

20. More to Come • Object-Oriented JavaScript • JavaScript with DOM • Events with JavaScript