JavaScript Programming an Introduction Prepared By P .D. Krolak and M.S. Krolak

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

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

3. 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

4. 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

5. 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.

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

7. JavaScript Objects & Corresponding HTML Tags

8. JS Object Hierarchy

9. JS Window Object • The Window Object contains all the objects.

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

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

12. JS History Properties & Methods

13. JS History Properties & Methods

14. JS History Example Create a back to last page link <a HREF=“javascript:history.back();”> Go to Last Page </a>

15. 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.

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

17. JS Frame Object • Contains information about the frames in the widow.

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

19. Array Object

20. Date Object

21. Math Object

22. String Object

23. 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

24. 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.

25. JavaScript Methods • Methods are functions that provide services for the object • Set the value of a property • Get the value of a property • Iterate on the object’s properties • Constructor for the object.

26. Embedding JS in HTML

27. Embedding JS in HTML • The <script> 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

28. The <script> tag • <script language=“JavaScript1.x”> 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. • <Script > </Script> 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.

29. The <script> tag continued • JavaScript libraries may be stored external to the HTML document. • <script Language=javascript1.2 src=“Library’s_URL”> • Library file extension must be “.js”

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

31. Viewing the JS code <Html> <Head> </Head> <Body> <script Language=“javascript1.2”> document.write(“Hello World”); </Script> </Body> </Html>

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

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

34. HTML enhancements

35. JS Fundamentals

36. Versions of JS

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

38. Arithmetic Assignment

39. Assignment

40. Arithmetic

41. Arithmetic Operators

42. Comparison

43. Comparison Operators

44. 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 • a+b • a +=b

45. String Operator

46. Conditional

47. Boolean

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

49. Function Operator

50. 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.