1. 1 Representation and Management of Data on the Web Javascript

2. 2 Overview A "scripting" language for HTML pages Embed code in HTML pages so they are downloaded directly to browser The browser interprets and executes the script (it is not compiled) Do not declare data types for variables (loose typing) Dynamic binding – object references checked at runtime

3. 3 Overview (cont.) Scripts can manipulate "browser objects:" –HTML form elements –Images –Frames –etc. For security – cannot write to disk (when run on a client)

4. 4 Abilities Generating HTML content dynamically Monitoring and responding to user events Validate forms before submission Manipulate HTTP cookies Interact with the frames and windows of the browser Customize pages to suit users

5. 5 It is not Java Java : –compilation required (not a script) –can create “stand alone” application –object-oriented Why is it called Javascript then?

6. Web browser HTML Page: …code..… Desktop access Internet HTML/HTTP TCP/IP HTML/HTTP TCP/IP Web (HTTP) Server HTML pages w/ embedded script Remote host built-in JavaScript interpreter Web Architecture for JavaScript "CLIENT""SERVER"

7. 7 Example An Hello World Example document.write(" "); document.writeln("Hello World! "); document.writeln("What a boring example ") Why do we need if we used writeln? RESULT

8. 8 Example An Hello World Example document.write(" "); document.writeln("Hello World! "); document.writeln("What a boring example ") My Hello World Example RESULT

9. 9 Past and Present Built into Netscape Navigator since v2.0 (early 1996) Developed independently of Java Proprietary, but submitted as standard and built into Microsoft IE 3.0 and later Standardized by ECMA (European Computer Manufacture’s Association) into ECMAscript EMCAscript joins JavaScript and Jscript to one standardEMCAscript

10. 10 Client and Server JavaScript can be used –On the client side –On the server More lightweight and reliable on clients than Java (Applets) Useful for developing interactive interface (Dynamic HTML)

11. 11 CGI and other Server-side Architectures Strengths –allows access to server files and databases –makes no assumptions about client computer capabilities, puts little burden on it –easier to manage and control on server –more secure for client Weaknesses –puts most of processing load on server –requires round-trip for every submission, using valuable bandwidth –cannot provide instantaneous response expected with GUI –less secure for server

12. 12 JavaScript Reserved Keywords break case continue delete do else false for function if in new null return switch this true typeof var void while with

13. 13 Non Used Reserved Words catch class const debugger default enum export extends finally import super try

14. 14 Javascript Variables Untyped! Can be declared with var keyword: var foo; Can be created automatically by assigning a value: val = 1; val = “Thank for all the fish"; val has changed from an int to a String!

15. 15 Variables Names A variable name can be any valid identifier The identifier is a series of characters –Consisting of letters (lower and upper case), digits, and underscores (_) –Does not begin with a digit –Does not contain any space Javascript is case sensitive (foo and FOO are different)

16. 16 Variables Local variable is available only in the function where it is declared Global variable is available all over the document A variable declaration –Inside a function creates a local variable –Outside a function creates a global variable Local variables must be declared with var

17. 17 Literals The typical bunch: –Numbers 17 123.45 –Strings “Let it be” –Boolean: true false –Arrays: [1,“ab ba”,17.234] –null –undefined Arrays can hold anything! You can use typeof(A) to get the type of A: number, string, object..

18. 18 Operators Arithmetic, comparison, assignment, bit wise, Boolean (pretty much just like Java) + - * / % ++ -- == != > = <= && || ! & | > += -= *= /= %=

19. 19 The Special Plus Command Which of the following two is correct? What is the ‘type’ of the answer? x = “The answer is” + 42 y = 42 + “is the answer”

20. 20 Which is correct? Which of the following two is correct? What is the ‘type’ of the answer? x = "37" + 7 y = "37" - 7

21. 21 Types of Equality The equals == checks if both operands are equal after performing type conversion The equals === checks if both operands are of the same type and equal Example: –3 == "3" (true or false?) –3 === "3" (true or false?)

22. 22 Types of Inequality The equals != checks if both operands are unequal after performing type conversion The equals !== checks if both operands are not of the same type and or not equal Example: –3 != "3" (true or false?) –3 !== "3" (true or false?)

23. Conditional Operators equals if (a == b) {…} not equals if (a != b) {…} greater than or equal to if (a >= b) {...} less than or equal to if (a <= b) {...}

24. Boolean Operators and if (true && true) {…} or if (true || false) {…} not if (! false) {...}

25. 25 Using Variables var firstNumber = 11, secondNumber = 23, sum; sum = firstNumber + secondNumber; document.write(" The sum of " + firstNumber + " and " + secondNumber + " is "); document.write(" " + sum + " "); RESULT

26. 26 Control Structures Some just like Java: if if-else ?: switch for while do-while And a few not like in Java for (var in object) with (object)

27. JavaScript’s Basic Constructs sequence (block) condition (selection) loop (iteration)

28. JavaScript Constructs sequence (block) –executes with no conditions –semicolons optional using one statement per line, but not a bad thing to use all the time var metushelahAge = 130; var yourAverageAge yourAverageAge = metushelahAge - 98 var myObject = new Object("initial value") more statements here.. …..

29. JavaScript Constructs condition (selection) if (condition) {statements if true} else {statements if false} if (metushelahAge < yourAverageAge) { document.write (" its true that Metushelah is younger than most of you,") document.write (" computers never lie! ") }

30. JavaScript Constructs loop (iteration): both for and while loops are available for (var i=0; i < inputAge.length; i++) { var oneChar = inputAge.substring (i, i+1) if (oneChar "9") { alert("Please enter a valid number “ + oneChar + " is not valid.") } }

31. 31 Loops Example for (var counter = 1 ; counter <= 8 ; ++counter) { document.write(“ Now with font size " + counter + " “); } RESULT

32. 32 JavaScript Functions Functions are first class citizens The keyword function used to define a function (subroutine): function add(x,y) { return(x+y); }

33. 33 Function Input and Outout Numbers and Boolean values always passed to functions using call-by-value For objects, a call-by-reference is used to pass them to the functions Numbers and Boolean values are always returned by value Objects returned by reference

34. 34 Example Computing the Fibonacci numbers. HTML Page

35. 35 Functions Example function fibonacciValue() { var value = parseInt(document.fibonacciForm.number.value ); window.status = "Calculating Fibonacci number for " + value; document.fibonacciForm.result.value = fibonacci(value); window.status = "Done Calculating Fibonacci number"; } function fibonacci( n ) { if (n == 0 || n == 1) return n; else return fibonacci( n - 1 ) + fibonacci( n - 2 ); }

36. 36 Enter a number <INPUT TYPE = "button" VALUE = "Calculate" ONCLICK = "fibonacciValue()" Fibonacci Value

37. 37 Function Arguments Within a function, its arguments can be accessed with arguments[i]. The number of arguments is arguments.length A function can be created that takes any number of arguments

38. 38 Example function myConcat(separator) { result="" // initialize list // iterate through arguments for (var i=1; i<arguments.length; i++) { result += arguments[i] + separator } return result } //What does this return? myConcat(", ","red","orange","blue")

39. 39 Global Functions (1) escape – changes characters in a string that are not in the ASCII characters set to HEX unescape – decodes the escape encoding eval – gets a string of JavaScript code, evaluates it and executes it –It allows dynamic code execution

40. 40 Global Functions (2) isNaN – takes a numeric argument and returns true if the value is not a number parseFloat – takes a string argument and converts its beginning to a float number (or return NaN) parseInt – takes a string argument and converts its beginning to an integer number (or return NaN)

41. 41 Global Functions (3) isFinite – given a numeric argument it returns true if the argument is not –NaN –Number.POSITIVE_INFINITY –Number.NEGATIVE_INFINITY

42. 42 Objects Objects have attributes and methods There are pre-defined objects and user- defined object types Using objects has similarity to the syntax of C++/Java: objectName.attributeName objectName.methodName()

43. 43 Objects Are Like Arrays myCar.make = "Ford" myCar.model = "Mustang" myCar.year = 66; myCar[“make”] = "Ford" myCar[“model”] = "Mustang" myCar[“year”] = 66;

44. 44 function show_props(obj, obj_name) { var result = "" for (var i in obj) result += obj_name + "." + i + " = " + obj[i] + "\n" return result } myCar.make = Ford myCar.model = Mustang myCar.year = 66 So, the function call show_props(myCar, "myCar") would return the following:

45. 45 Creating a New Object There are two ways to create new objects: Object Initializer: –objectName={prop1:val1, …, propN:valN} Constructor Function: –define a constructor function –create the new object using new

46. 46 Example function car(make, model, year) { this.make = make this.model = model this.year = year } theMazda = new car(“Mazda", “323", 1991) theHonda = {make:”Honda”, year:1992, color:"red",wheels:4, engine:{cylinders:4,size:2.2}}

47. 47 Creating a Method A method of an object is a function that has been assigned to the object: object.methodName = functionName

48. 48 Example function displayCar() { var result = "A Beautiful " + this.year + " " + this.make + " " + this.model; document.writeln(result) } function car(make, model, year) { this.make = make this.model = model this.year = year this.displayCar = displayCar } Setting the method

49. 49 Eval Example function Dog(name,breed,color) { this.name=name this.breed=breed this.color=color } myDog = new Dog("Gabby") myDog.breed="Lab" var breed='Shepherd' document.write(" " + eval('breed')) document.write(" " + myDog.eval('breed'))

50. 50 Eval Example function stone(str) { eval("this."+str) this.y=43 this["z"] = 44 } flint = new stone("x=42") document.write(" flint.x is " + flint.x) document.write(" flint.y is " + flint.y) document.write(" flint.z is " + flint.z)

51. 51 Deleting an Object To delete an object just set the object reference to null When are objects that are not set to null being removed?

52. 52 Array Objects Arrays are supported as objects Attribute length Methods include: concat, join, pop, push, reverse, sort Joins elements into a string Joins two arrays

53. 53 Creating a New Array var a = [“red”, “blue”, “green”] –Allocates an array of 3 cells and initializes the values var b = new Array(5) –Allocates an array of 5 cells without initializing values var c = new Array() –Creates a new empty array

54. 54 Array Example Code var a = [8,7,6,5]; for (i=0;i<a.length;i++) a[i] += 2; b = a.reverse();

55. 55 Understanding Arrays Array literals: –arr1 = ["hello", 1, 33] Accessing arrays: (what is the result of) –document.writeln(arr1.length) –document.writeln(arr1[0]) –document.writeln(arr1["abc"]) –arr1[10]=66 –document.writeln(arr1.length)

56. 56 Passing Arrays to Functions Arrays can be passed to functions as arguments The array is passed by call-by-reference The name of the array is given to the function

57. 57 Arrays Example function start() { var colors = ["red", "blue", "green"] printArray(colors); } function printArray( arr) { for (var i in arr) { document.writeln(" " + arr[i] + " "); arr[i] = "gray"; } RESULT

58. 58 Multidimentional Arrays var matrix = [ [0, 1, 1], [1, 1, 0], [0, 0, 0]]; var myArray = [[1, 2, 3], [1], [1, 2]]; Going over the array for (var i in myArray ) { for (var j in myArray[i]) document.write(myArray[i][j]);

59. 59 Other Object Types String: manipulation methods Math: trig, log, random numbers Date: date conversions RegExp: regular expressions Number: limits, conversion to string

60. 60 Math Common Methods abs(x) round(x) ceil(x) floor(x) max(x, y) min(x, y) cos(x) sin(x) tan(x) exp(x) pow(x, y) sqrt(x) log(x) Math Also includes constants such as: Math.E, Math.PI

61. 61 String Common Methods charAt (index) charCodeAt(index) concat(string) fromCharCode(value1, value2, …) indexOf(substring, index) lastIndexOf(substring, index) slice(start, end) split(string) substr(start, length) substring(start, end) toLowerCase() toUpperCase() toString() valueOf()

62. 62 Methods that Generate HTML anchor(name) – wraps the source with – big() – wraps the source with – blink() – wraps with – bold() – wraps the source with – fixed() – wraps the source with –

63. 63 More Methods that Generate HTML fontcolor(color) – wraps with – fontsize(size) – wraps with – italic() – wraps with – link(url) –

64. 64 More Methods that Generate HTML small() – wraps the source with – strike() – wraps the source with – sub() – wraps the source with – sup() – wraps the source with –

65. 65 Date Common Methods getDate(), getFullYear(), getMonth(), getDay getTime(), getHours(), getMinutes(), getSeconds(), getMilliseconds()

66. 66 Time Example function getTimes() { var current = new Date(); var out = "Day: " + current.getDay()+"\n"; out = out.concat("Month: " + current.getMonth() + "\n"); out = out.concat("Year: " + current.getFullYear() + "\n"); out = out.concat("GMT Time: " + current.toUTCString() + "\n"); out = out.concat("Time: " + current.toString() + "\n"); timesForm.output.value = out; }

67. 67 RESULT

68. 68 Predefined Objects In JavaScript the following objects are automatically created for you (always available) –document –navigator –screen –window

69. 69 The document Object Many attributes of the current document are available via the document object: TitleReferrer URLImages FormsLinks Colors

70. 70 Objects Hierarchy JavaScript objects include object hierarchy + (property or method) –window.document.lastModified –metushelahBirthday.getYear() need not be fully qualified –document.lastModified proceeds from most to least general –window.document.forms[0].inputText1.value all names are case sensitive

71. 71 Objects  Object Oriented Objects – complex data types or “containers” that have both data and code Methods – code or “functions” that work on an object’s properties Properties – data that are stored and retrieved via object references This is not true "OO" because the object hierarchy is not extensible, you can create new objects, but cannot extend existing ones

72. 72 The with Statement Establishes the default object for a set of statements Within the set of statements, any property references that do not specify an object are assumed to be for the default object

73. 73 Example of with var a, x, y var r=10 with (Math) { a = PI * r * r x = r * cos(PI) y = r * sin(PI/2) }

74. 74 Dynamic HTML HTML CSS Java Script HTML Dynamic HTML HTML CSS Java Script