Scripting Languages and the DOM 1 copyright Penny

Scripting Languages and the DOM 1 copyright Penny Mc. Intire, 2007

Contents • • Scripting Languages The Document Object Model Referencing an object Event-driven programming • Note: purpose of the Java. Script lectures is to give you the background to learn more advanced usage on your own. 2 copyright Penny Mc. Intire, 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, Java. Script is quite powerful, and quite complex. 3 copyright Penny Mc. Intire, 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… 4 copyright Penny Mc. Intire, 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). 5 copyright Penny Mc. Intire, 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. 6 copyright Penny Mc. Intire, 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 7 dynamic content. copyright Penny Mc. Intire, 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. 8 copyright Penny Mc. Intire, 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. 9 copyright Penny Mc. Intire, 2007

Scripting Languages • Two major scripting languages used in browsers: – VBScript – Java. Script 10 copyright Penny Mc. Intire, 2007

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

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

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

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

Java. Script • Three implementations of Java. Script: – Server-side Java. Script – Client-side Java. Script – Core Java. Script 15 copyright Penny Mc. Intire, 2007

Java. Script • Server-side Java. Script – Java. Script 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 Java. Script. 16 copyright Penny Mc. Intire, 2007

Java. Script • Client-Side Java. Script – Is interpreted by the browser. – Most common implementation of Java. Script. – 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. 17 copyright Penny Mc. Intire, 2007

Java. Script • Core Java. Script – Generic term for the overlapping features of Java. Script that are available to both serverside and client-side Java. Script. 18 copyright Penny Mc. Intire, 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. 19 copyright Penny Mc. Intire, 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 (W 3 C). • Again, all browser manufacturers pledge to follow the standards. (Yeah, right, 20 when it comes to Microsoft. ) copyright Penny Mc. Intire, 2007

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

Java. Script Introduction • Java. Script is object-based, not truly object-oriented. • Still, we manipulate objects using their associated methods much as we would with an object-oriented language. 22 copyright Penny Mc. Intire, 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. 23 copyright Penny Mc. Intire, 2007

Document Object Model (DOM) • Methods versus functions – Methods are behaviors tied directly to specific objects to act upon those objects. • Many predefined Java. Script methods are provided by the browser. – Functions are programmer-defined routines and are not necessarily associated with a specific object. 24 copyright Penny Mc. Intire, 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. 25 copyright Penny Mc. Intire, 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. 26 copyright Penny Mc. Intire, 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. 27 copyright Penny Mc. Intire, 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. my. Form. my. Text. Area 28 copyright Penny Mc. Intire, 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 Java. Script 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. 29 copyright Penny Mc. Intire, 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… 30 copyright Penny Mc. Intire, 2007

Browser Interaction Objects Window History Form[ ] Text input[ ] Document Image[ ] Checkbox [] Let’s look at the Window object… Radio[ ] Link[ ] Submit[ ] Applet[ ] Textarea[ ] 31 copyright Penny Mc. Intire, 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. 32 copyright Penny Mc. Intire, 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. 33 copyright Penny Mc. Intire, 2007

Browser Interaction Objects Window History Form[ ] Text input[ ] Document Image[ ] Checkbox [] Let’s look at the Document object… Radio[ ] Link[ ] Submit[ ] Applet[ ] Textarea[ ] 34 copyright Penny Mc. Intire, 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. 35 copyright Penny Mc. Intire, 2007

Tag-Associated Objects • Within the Document object are tagassociated objects that are dynamicallybuilt (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… 36 copyright Penny Mc. Intire, 2007

Tag-Associated Objects <input type = “text” name =“first. Name” value = “Type your name here. ” /> • 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 “first. Name” and the value object property is assigned “Type your name here. ” 37 copyright Penny Mc. Intire, 2007

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

HTML tags <form FORM Object in DOM name = “user. Info” • Properties method = “post” • name = “user. Info” action = “prgrm. name”> • method = “post” <input … /> • action = “prgm. name” <textarea …>… </textarea> • Methods … </form> As the HTML document loads, the Form Object is created using the attributes from the <form> tag. • submit() • reset() • Events • on. Submit • on. Reset Ignore these for now.

Referencing an Object Using Java. Script • Next, we need to understand the way that Java. Script can access DOM objects. . . • Remember how in HTML many tags had the name attribute? <input name ="firstname" type ="text"… /> 40 copyright Penny Mc. Intire, 2007

Referencing an Object Using Java. Script • 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. 41 copyright Penny Mc. Intire, 2007

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

Referencing an Object Using Java. Script So, if we had the following (incomplete) HTML code… <body. . . > <form name = “userinfo”. . . > <input name = “zipcode” type = “text” value = “ 60115” /> </form> </body> 43 copyright Penny Mc. Intire, 2007

Referencing an Object Using Java. Script • To access the <form> named user. Info, drill down through each object in the hierarchy, separating the various elements with periods: window. document. user. Info Document object, contains. . . Window object, contains. . . Form object 44 copyright Penny Mc. Intire, 2007

Referencing an Object Using Java. Script • To access the <input> named zip. Code: window. document. user. Info. zip. Code Document object, contains. . . Window object, contains. . . Form element Form object, contains. . . 45 copyright Penny Mc. Intire, 2007

Referencing an Object Using Java. Script • 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). 46 copyright Penny Mc. Intire, 2007

Referencing an Object Using Java. Script • Anyway, as a result, the part of the containment hierarchy that refers to the window can usually be omitted: window. document. user. Info. zip. Code becomes just document. user. Info. zip. Code 47 copyright Penny Mc. Intire, 2007

Referencing an Object Using Java. Script • Examples of referencing objects: document. getdata. customer. Name Refers to the customer. Name input from the getdata form from the document. Referencing the first image tag document. img[0] in the document. form[3] Referencing the fourth form tag document. my. Form. submit[2] in the document Referencing the third submit button in my. Form 48 copyright Penny Mc. Intire, 2007

Referencing an Object Using Java. Script • 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”> 49 copyright Penny Mc. Intire, 2007

Referencing an Object Using Java. Script • To reference the contents of the text field, specify the value property of that field: document. user. Info. zip. Code. value • This, then, contains the value currently associated with the zip. Code input tag. • Alternate way to reference: var x=document. get. Element. By. Id("zip. Code") 50 copyright Penny Mc. Intire, 2007

Referencing an Object Using Java. Script • 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. 51 copyright Penny Mc. Intire, 2007

Event-driven Programming • Next, we need to understand the concepts of event-driven programming. 52 copyright Penny Mc. Intire, 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. 53 copyright Penny Mc. Intire, 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. 54 copyright Penny Mc. Intire, 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 Java. Script is triggered by events. • By telling the browser to “listen” for specific events, Java. Script can be associated with those events. 55 copyright Penny Mc. Intire, 2007

Event-driven Programming • Remember the object creation slide earlier, when we looked at putting values into a form, which was a tagassociated 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”. 56 copyright Penny Mc. Intire, 2007

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

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

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