2. JavaScript Programming an Introduction Prepared By P.D. Krolak and M.S. Krolak Based on material from JavaScript Unleashed (2nd Ed)

3. JavaScript Objects Objects hold data Objects have Properties that can be set and have values Objects can have Methods

4. JavaScript JavaScript is a Programming Language, although not a complete one. JavaScript was developed by Netscape and is becoming an international standard JavaScript is sent with the HTML document and is interpreted at the time it is loaded on the browser JavaScript adds interaction

5. JavaScript Objects JS is not true Object Oriented Programming (OOP) but object like What are the JS’s objects What is the JS object Hierarchy Built-In Language Objects

6. JS is not true OOP but object like. JS objects do have properties and methods like and object orientated language. JS objects do not support inheritance. JS object model is a container model not a class model. Container objects contain other containers.

7. What are the JS’s objects JavaScript objects fall into classes –Navigator Objects that mostly correspond to HTML tags –Built-in Language Objects

8. JavaScript Objects & Corresponding HTML Tags

9. JS Object Hierarchy

10. JS Window Object The Window Object contains all the objects.

11. JS Navigator object Contains information about the browser. Properties can not be set by Javascript.

12. JS History Object The History object records the documents that were displayed in order of their presentation – most recent descending to oldest.

13. JS History Properties & Methods MethodsDescription Back ()Go back n pages – no argument go to last page Forward()Go forward n pages if possible, Go()Go N pages where n >0 for forward and n<=0 for back.

14. JS History Properties & Methods

15. JS History Example Create a back to last page link Go to Last Page

16. JS Document Object Contains all the object that are contained in the document. The objects that are contained correspond to the HTML tags found on the web page.

17. JS Location Object Location Object contains the information about the source of the document, i.e. the URL, and related information.

18. JS Frame Object Contains information about the frames in the widow.

19. Built-In Language Objects Built Objects do not appear in the Document but in the code. Built-in Objects include: –Array –Date –Math –String

20. Array Object

21. Date Object

22. Math Object

23. String Object

24. JavaScript Properties Properties in JS resemble data attributes of an object Properties explain the characteristics and identity of the given object Properties can represent the state of the object Properties could represent the role that the object plays at a given time

25. JavaScript Events & Event Handlers A javaScript event is controlled by browser based on action normally initiated by the viewer. Each tag has an associated set of event handlers that are triggered by a corresponding event. When the event handler is triggered, a javaScript is preformed.

26. JavaScript Methods Methods are functions that provide services for the object 1.Set the value of a property 2.Get the value of a property 3.Iterate on the object’s properties 4.Constructor for the object.

27. Embedding JS in HTML

28. The tag Accommodating the Non JS supporting browsers by using a comment to surround the content of the script within the container. Viewing the JS code Executing the scripts loading a page HTML enhancements

29. The tag where x can be version of JavaScript used, i.e 0,1,2,3. If the browser does not support the version the tag and its content is ignored. language can also be set to vb script, php, etc. form the container The script may be placed anywhere in the document but must exit before needed. Most scripts are placed in the head and are thus loaded before they are needed for the display & interaction. Scripts that contain document.write() must be in the body.

30. The tag continued JavaScript libraries may be stored external to the HTML document. Library file extension must be “.js”

31. Accommodating the Non JS supporting browsers The contents of the script container are commented so non JS browsers will ignore the contents. <! -- // the comment is used by the non-JS Your javaScript code here -->

32. Viewing the JS code document.write(“Hello World”);

33. Executing the scripts The scripts are not executed in any necessary order. They are executed as the flow of events dictates.

34. Loading a page There is no difference in loading a page with a script or without.

35. HTML enhancements

36. JS Fundamentals

37. Versions of JS Version of JavascriptBrowser Support Javascript 1.1Netscape 2. Javascript 1.2Netscape Javascript 1.3Netscape 4.

38. JS Operators Assignment Operators Arithmetic Operators Comparison Operators String Operators Conditional Operators Boolean Operators The type of operators

39. Arithmetic Assignment AssignmentDescription x += yx= x+y addition x -=yx= x-y subtraction x *= yx= x*y x /= yx= x/y x %= yx= x%y x mod (y)

40. Assignment

41. Arithmetic

42. Arithmetic Operators OperatorDescription % or Mod4%3 returns 1 ++ Increment++x sets x= x+1 and returns x+1 but x++ sets x=x+1 and returns x -- Decrement--x sets x= x-1 and returns x-1 but x-- sets x=x-1 and returns x - (uninary negation)Sets x = -x,I.e reverses sign

43. Comparison

44. Comparison Operators OperatorDescription ==Equal !=Not Equal >Greater than >=Greater than or Equal <Less than <=Less than or Equal

45. String String operators are the same as comparison, using a sort sequence String a> b, or a>=b etc. String has two forms of concatenate 1.a+b 2.a +=b

46. String Operator

47. Conditional

48. Boolean

49. JS Operators (continued) Function operators Data structure operators Bit wise operators Operator precedence

50. Function Operator

51. Statements Statements define the flow of the script. JS statements require a “;” at the end if there are more than one on a line. A block of statement that are executed in order is enclosed by curly brackets {}. Flow is normally linear but may be altered by conditional, looping, or similar statements.

52. Comments Comments are not really part of the program statement but are provided for the programmer and others as notes and reminders of what is happening in the JS. Statement; //single line comment /* this the way to create multi line comments */

53. JS Control Structures and Looping Conditional statements Looping statements Labeled with switch

54. Conditional statements If …. else If (condition) {Block of Statements;} else {Block of Statements;}

55. Looping statements For The traditional for loop loops until the test condition is false. The initial statement is executed once. The test is applied and if true, the Block of Statements are executed. The counter is incremented and test applied. Repeat looping. for (initial_statement; test_condition; increment) {Block of Statements;}

56. Looping statements For … in On each iteration get one property of the object. If the object has no properties the loop is not executed. for (property in object) {Block of Statements;}

57. Looping statements do …. while Repeat the block statement until the condition is false. (Note it goes thru loop at least once) do { Block of Statements; } while (condition)

58. Looping statements While While executes as long as condition is true. Will not execute the first time if false. While (condition) { Block of Statements;}

59. Break & Continue Statements Break – Drop out of loop and go to statement following loop. Continue – Drop out of the loop block of statements and go to the loop control. Looping continues until control is false.

60. Labeled Label statement – allows the break and continue statement to transfer to this label. Label: statement;

61. with Establishes an object as the point of reference. with (object) {Block of Statement;}

62. switch Switch is the JavaScript case statement. Switch (expression){ case label-1: {Block of Statements;} break …. case label-n: {Block of Statements;} break default: {Block of Statements;} }

63. JS as Object Orientated Language Object and Dot Notation Properties Methods Events

64. Object and Dot Notation The object is described from the container that holds the container that holds.. the container. Read from left to right and the dot as contains. Example the form object from the diagram Window.document.form

65. Object Dot Notation A property is: Object.property where dot reads is_a A method is: Object.method() where dot reads is_a

66. Object Dot Notation Since a window contains everything, it is called self. In the Dot notation we can drop the window because it is contained by nothing and contains everything.

67. Properties

68. Methods

69. Events

70. JS Events and Event Handlers

71. JS Object Constructor A method is a constuctor if it has the same name as the object an provides a template for creating an instance of the object. Function object(parm 1, … ){ This.property 1 = parm 1 ;.. This.method1= function1.. }

72. Instantiating Objects

73. Debugging JavaScript

74. First sign of trouble will appear as error message in the status window (lower left bottom of window). When a error does appear then type: Javascript: in the location window (where the document URL goes). Note the last character “:” is required. A series of error messages that will attempt to locate the error will appear in the dialog window.

75. When creating JavaScript turn Javascript Console automatically 1.Can not be done through preference option But it can done. 2.Go to the pref.js in the Netscape directory. 3.Open in a text editor. 4.Last line add: user_pref(“javascript.console.open_on_error”, true); 5.Save file and Restart Netscape. Console should pop up when a javascript error occurs.

76. Netscape JS Debugger Download the JS debugger from their web site: http://developer.netscape.com/software/jsdebug.html

77. JavaScript References