1. copyright Penny McIntire, 2007 1 Scripting Languages and the DOM

2. 2 copyright Penny McIntire, 2007 Contents Scripting Languages The Document Object Model Referencing an object Event-driven programming Note: purpose of the JavaScript lectures is to give you the background to learn more advanced usage on your own.

3. 3 copyright Penny McIntire, 2007 Scripting Languages Scripting language: a programming language that is interpreted as opposed to being compiled. –The interpreter executes the script directly, similar to the scripting used in Unix shells. –Slower than compiled languages. –Essentially “light” programming languages, with a stripped-down functionality. –Nonetheless, JavaScript is quite powerful, and quite complex.

4. 4 copyright Penny McIntire, 2007 Scripting Languages Static web pages are merely displayed, while dynamic web pages “do” things. Scripting languages are what enable us to create dynamic web pages, which can do things like…

5. 5 copyright Penny McIntire, 2007 Scripting Languages Accessing document content. –Can include cool graphics features such as displaying a different image on mouse- over. Accessing the browser. –Can determine browser type and version, pop windows up, reroute to a different page, route to previous or next pages (e.g, doing the same thing as forward and back buttons on the browser window).

6. 6 copyright Penny McIntire, 2007 Scripting Languages Saving user information with a cookie: a piece of data that allows a web site to “remember” things. –Example: saving log-in data about a user, which would allow the user to breeze through the log-in process after the first time on the site. –Cookies are saved on the user’s computer, if the user has not disabled cookies.

7. 7 copyright Penny McIntire, 2007 Scripting Languages Interacting with the user. –Provides event handlers for capturing events like mouse clicks. Capturing user input from HTML forms and validating the format of that input before sending off to the server. Performing calculations. All of these have been examples of dynamic content.

8. 8 copyright Penny McIntire, 2007 Scripting Languages Scripting languages are specifically designed not to do things that might violate the security of the client. –Cannot (uhm, should not?) do such things as mess around with the browser’s preference settings or reading or writing files on the user’s computer (exception: cookies). –“Sandbox” metaphor similar to Java: they are given a sandbox in which to play and cannot leave that sandbox.

9. 9 copyright Penny McIntire, 2007 Scripting Languages Scripting language standards: –European Computer Manufacturer’s Association (ECMA, pronounced ECK-ma, www.ecma.ch ) maintains scripting standards. –All browser manufacturers have pledged to follow the standard, but even so, they follow their own interpretations of the standards.

10. 10 copyright Penny McIntire, 2007 Scripting Languages Two major scripting languages used in browsers: –VBScript –JavaScript

11. 11 copyright Penny McIntire, 2007 VBScript Developed by Microsoft. Technically, VBScript works only in IE, not in Firefox, although there is an add- on for Firefox. Due to its proprietary nature, VBScript is less portable. We won’t use it.

12. 12 copyright Penny McIntire, 2007 JavaScript Developed by Netscape but supported by all major browsers. Cross-platform. Microsoft has its own, proprietary, implementation of JavaScript, called Jscript. We will simply refer to all versions by the generic name JavaScript.

13. 13 copyright Penny McIntire, 2007 JavaScript First announced in December 1995. Various versions of JavaScript are supported by various browser versions. Always keep in mind that different versions of even the same browser support JavaScript differently.

14. 14 copyright Penny McIntire, 2007 JavaScript JavaScript and Java are not the same: –Netscape got permission to use “Java” in the JavaScript name. –Good marketing ploy, but JavaScript should not be confused with the Java programming language. –JavaScript is a scripting language that is interpreted on the browser, while Java is a full-blown programming language. –However, the syntax of JavaScript is very similar to that of Java, C, and C++.

15. 15 copyright Penny McIntire, 2007 JavaScript Three implementations of JavaScript: –Server-side JavaScript –Client-side JavaScript –Core JavaScript

16. 16 copyright Penny McIntire, 2007 JavaScript Server-side JavaScript –JavaScript used to access data from web servers. –Intended to be an alternative to CGI, PHP, etc. –Not the best way of doing data access. –We won’t be doing any server-side stuff in here, including server-side JavaScript.

17. 17 copyright Penny McIntire, 2007 JavaScript Client-Side JavaScript –Is interpreted by the browser. –Most common implementation of JavaScript. –It has no direct access to the web server at all, because it exists only on the client. –We will use only client-side JS in this class. –Used, along with the Document Object Model (more in a bit…), to create “dynamic” documents.

18. 18 copyright Penny McIntire, 2007 JavaScript Core JavaScript –Generic term for the overlapping features of JavaScript that are available to both server- side and client-side JavaScript.

19. 19 copyright Penny McIntire, 2007 Document Object Model (DOM) The Document Object Model (DOM) is what allows us to have dynamic access to the contents of otherwise static documents. The DOM is a hidden, internal, hierarchical roadmap of all of the scriptable elements within a document loaded in a browser.

20. 20 copyright Penny McIntire, 2007 Document Object Model (DOM) It is an evolving standard that specifies how a scripting language can access and manipulate the detailed structure of an HTML (or XML) document. The DOM standardization effort is being led by the World Wide Web Consortium (W3C). Again, all browser manufacturers pledge to follow the standards. (Yeah, right, when it comes to Microsoft.)

21. 21 copyright Penny McIntire, 2007 Document Object Model (DOM) Refer to Chapter 9 of DHTML for the DOMs of both browsers – critical for coding and debugging JavaScript.

22. 22 copyright Penny McIntire, 2007 JavaScript is object-based, not truly object-oriented. Still, we manipulate objects using their associated methods much as we would with an object-oriented language. JavaScript Introduction

23. 23 copyright Penny McIntire, 2007 Document Object Model (DOM) Before looking at what the DOM actually is, let’s review what objects are… Object: a self-contained module of data and its associated processing. –Includes a collection of named pieces of data called properties (fields and their values) and methods that can modify those properties.

24. 24 copyright Penny McIntire, 2007 Document Object Model (DOM) Methods versus functions –Methods are behaviors tied directly to specific objects to act upon those objects. Many predefined JavaScript methods are provided by the browser. –Functions are programmer-defined routines and are not necessarily associated with a specific object.

25. 25 copyright Penny McIntire, 2007 Document Object Model (DOM) Let’s look at one generic object, the Document Object (represents a single page in a browser): –One property would be the document’s URL; the value of that URL field might be “www.mysite.com/index.html”. –Other properties include the last-modified date, title, background color of the document, etc.

26. 26 copyright Penny McIntire, 2007 Document Object Model (DOM) –Some properties are stored as arrays, representing things such as: forms images links applets –A method could be a mechanism to display something on the window, such as document.writeln(), or performing mathematics.

27. 27 copyright Penny McIntire, 2007 Document Object Model (DOM) When an HTML page loads into a scriptable browser, the browser organizes all of the scriptable HTML elements and page information into a: –hidden –internal –hierarchical –object roadmap, referred to as the DOM.

28. 28 copyright Penny McIntire, 2007 Document Object Model (DOM) A basic understanding of the architecture of the DOM is important, because you can’t access an object without knowing the hierarchical path to the object; e.g.: document.myForm.myTextArea

29. 29 copyright Penny McIntire, 2007 Document Object Model (DOM) The DOM has three types of pre- defined objects: –“Utility” objects, such as String or Math. We will look at these later, when we examine JavaScript syntax. –Dynamically-built objects which have a one-to-one relationship with major HTML tags, such as Image or Table. –Browser interaction objects, such as Window, Document, Location, or History.

30. 30 copyright Penny McIntire, 2007 Browser Interaction Objects To understand browser interaction objects, you must understand the object containment hierarchy: –The most global (highest-level) object in the DOM is the Window Object. –That, in turn, contains the Document Object that represents the HTML document. –The document, in turn, may contain a Form Object, which in turn contains form elements…

31. 31 copyright Penny McIntire, 2007 Browser Interaction Objects Let’s look at the Window object… Window Document Form[ ]Image[ ]Link[ ]Applet[ ] Text input[ ] Checkbox [ ] Radio[ ]Submit[ ]Textarea[ ] History

32. 32 copyright Penny McIntire, 2007 Browser Interaction Objects The Window Object represents the window that displays the document. –The Window Object is global, with global variables. –It defines the properties and methods for the web browser window.

33. 33 copyright Penny McIntire, 2007 Browser Interaction Objects –Under the Window Object is a hierarchy of other objects, including: A History Object to track URLs associated with forward and back, like the forward and back buttons on the browser. A Document Object represents the HTML document that is displayed in that window.

34. 34 copyright Penny McIntire, 2007 Browser Interaction Objects Let’s look at the Document object… Window Document Form[ ]Image[ ]Link[ ]Applet[ ] Text input[ ] Checkbox [ ] Radio[ ]Submit[ ]Textarea[ ] History

35. 35 copyright Penny McIntire, 2007 Browser Interaction Objects Now, let’s look at the Document Object. –This is confusing, because the Document Object is only one of the many objects contained in the Document Object Model.

36. 36 copyright Penny McIntire, 2007 Tag-Associated Objects Within the Document object are tag- associated objects that are dynamically- built (when the page loads) and have a one-to-one relationship with major HTML tags, such as Image or Table. Attributes from individual HTML tags must be associated with their DOM objects…

37. 37 copyright Penny McIntire, 2007 Tag-Associated Objects type = specifies that this will be stored as a text input in the DOM. name = and value = are associated with properties of the input object. –The name object property is assigned “firstName” and the value object property is assigned “Type your name here.”

38. 38 copyright Penny McIntire, 2007 Tag-Associated Objects Let’s look at assigning properties such as these to another tag-associated object, this time a.

39. HTML tags <form name = “userInfo” method = “post” action = “prgrm.name”> … FORM Object in DOM Properties name = “userInfo” method = “post” action = “prgm.name” Methods submit() reset() Events onSubmit onReset As the HTML document loads, the Form Object is created using the attributes from the tag. Ignore these for now.

40. 40 copyright Penny McIntire, 2007 Referencing an Object Using JavaScript Next, we need to understand the way that JavaScript can access DOM objects... Remember how in HTML many tags had the name attribute?

41. 41 copyright Penny McIntire, 2007 Referencing an Object Using JavaScript We can now use those names to access those objects through the DOM hierarchy. That is, you have to drill down the path through the DOM hierarchy in order to get to the object, just like you have to list upper-level subdirectories to get to a lower-level subdirectory on a computer disk.

42. window –document –link –image –form –text field –submit button –anchor –link Window Document (HTML file) link anchor link form text field image text field submit button

43. 43 copyright Penny McIntire, 2007 Referencing an Object Using JavaScript So, if we had the following (incomplete) HTML code… <input name = “zipcode” type = “text” value = “60115” />

44. 44 copyright Penny McIntire, 2007 Form object Referencing an Object Using JavaScript To access the named userInfo, drill down through each object in the hierarchy, separating the various elements with periods: window.document.userInfo Window object, contains... Document object, contains...

45. 45 copyright Penny McIntire, 2007 Referencing an Object Using JavaScript To access the the named zipCode: window.document.userInfo.zipCode Window object, contains... Document object, contains... Form object, contains... Form element

46. 46 copyright Penny McIntire, 2007 Referencing an Object Using JavaScript However, referring to the Window Object is actually unnecessary. Because the window object is the most “global” object and only exists once per document, it is always assumed unless there are naming overlaps with other objects properties (such as window.location versus document.location).

47. 47 copyright Penny McIntire, 2007 Referencing an Object Using JavaScript Anyway, as a result, the part of the containment hierarchy that refers to the window can usually be omitted: window.document.userInfo.zipCode becomes just document.userInfo.zipCode

48. 48 copyright Penny McIntire, 2007 Referencing an Object Using JavaScript Referencing the first image tag in the document Referencing the fourth form tag in the document Examples of referencing objects: document.getdata.customerName Refers to the customerName input from the getdata form from the document. document.img[0] document.form[3] document.myForm.submit[2] Referencing the third submit button in myForm

49. 49 copyright Penny McIntire, 2007 Referencing an Object Using JavaScript References like these get you to the field, but they won’t get you to the value property, which is the content that the field holds. <input name = “zipcode” type=“text” value = “60115”>

50. 50 copyright Penny McIntire, 2007 Referencing an Object Using JavaScript To reference the contents of the text field, specify the value property of that field: document.userInfo.zipCode.value This, then, contains the value currently associated with the zipCode input tag. Alternate way to reference: var x=document.getElementById("zipCode")

51. 51 copyright Penny McIntire, 2007 Referencing an Object Using JavaScript DOM Reference: Chapter 9 of DHTML. –Be careful to note which browser uses a particular property or method. –The DOM is a bit different for each browser.

52. 52 copyright Penny McIntire, 2007 Event-driven Programming Next, we need to understand the concepts of event-driven programming.

53. 53 copyright Penny McIntire, 2007 Event-driven Programming Event-driven programs are very different from programs that are executed and run to completion without further user interference. –Example of non-event-driven programming: the programs you wrote in most of your programming classes. –With those types of programs, the only “event” is the user executing the program.

54. 54 copyright Penny McIntire, 2007 Event-driven Programming In contrast, event-driven programs are, well, driven by events. An event is some action, which may or may not be user-initiated. –An example of a user-initiated event would be clicking a button on a web page. –An example of a timed event (rather than a user-initiated event) would be a splash page timed to redirect a user to the home page after 10 seconds.

55. 55 copyright Penny McIntire, 2007 Event-driven Programming So, although HTML alone is static (that is, once a page loads, it will not change on its own), dynamic HTML using JavaScript is triggered by events. By telling the browser to “listen” for specific events, JavaScript can be associated with those events.

56. 56 copyright Penny McIntire, 2007 Event-driven Programming Remember the object creation slide earlier, when we looked at putting values into a form, which was a tag- associated object? Let’s take a look at that same example to see how methods and events are associated with objects and used to make “static” HTML “dynamic”.

57. HTML tags <form name = “userinfo” method = “post” action = “/prgrm.name”> Form object in DOM Properties name = “userInfo” method = “post” action = “/prgm.name” Methods submit() reset() Events onSubmit onReset The onSubmit event automatically triggers the submit( ) method, which is the default unless overridden. The submit method accesses the method and action properties to know how to invoke the program on the server.

58. 58 copyright Penny McIntire, 2007 Scripting Languages and the DOM Everything so far has been background information, stuff you need to know to write JavaScript. In the next lecture, we will look at JavaScript examples and examine JavaScript syntax.

59. 59 copyright Penny McIntire, 2007 References If you are serious about JavaScript, get a good JS book. –The JavaScript Bible by Danny Goodman, published by IDG Books. (how-to) –JavaScript: The Definitive Guide by David Flanagan, published by O'Reilly & Associates. (reference)