Chapter 14 JavaScript and DHTML

Size: px

Start display at page:

Download "Chapter 14 JavaScript and DHTML"

Dora Garrison
6 years ago
Views:

1 Chapter 14 JavaScript and DHTML Presented by Thomas Powell Slides adopted from HTML & XHTML: The Complete Reference, 4th Edition 2003 Thomas A. Powell

2 Web Programming Toolbox Redux Java Applets Scripting Languages * JavaScript * VBScript Client Side Helper Applications Netscape Plug-ins ActiveX Controls CGI scripts and programs Server API Programs * ISAPI * NSAPI * Apache Modules Java Servlets Server Side Server-side scripting * Active Server Pages (ASP) * ColdFusion * PHP

3 JavaScript Intro Certainly the most popular Web client-side programming technology today Difficult to characterize Many names JavaScript, Jscript, ECMAScript, DHTML, etc. Object Models Vary Traditional DOM, IE4/5 Object Model, Nav 4, DOM Standard Not studied rigorously like most programming langs Lots of copy-paste scripters Generated code from editors like Dreamweaver

4 JavaScript s Origins Netscape 3 (late 1995) Originally called LiveScript Goal: Form validation and basic user handling Renamed JavaScript due to Java craze Common misunderstanding about its relationship with Java Not Java Lite, not as formal in OOP, etc. Microsoft introduces Jscript in IE 3 Clone of JavaScript and few incompatibilities DHTML Wars of 4.x generation browsers Both browsers introduce widely incompatible object models (e.g. Netscape 4 layers and IE s document.all)

5 JavaScript Today ECMA (European Computer Manufactuer s Association) standardizes the core of JavaScript as ECMAScript Handles the basic features like functions, variables, types, control structures, etc. All major variants of JavaScript are ECMAScript compliant W3C creates a standard Document Object Model (DOM) Modern browsers are compliant to one degree or another. Mozilla & Opera are very compliant, IE is fairly compliant Should end DHTML wars Still JavaScript lacks respect, despite

6 JavaScript Today Contd. It is all around us Flash s ActionScript = ECMAScript + different objects Many other languages based on it (LotusScript, etc.) It is used to build some very interesting things Games, Outlook clones, message boards, etc. It is used to automate Dreamweaver! It has fullfilled the promise given by Java Applets Likely outcome JavaScript will be one of the four technologies you must know as a client-side developer XHTML/HTML, XML, CSS, and JavaScript

7 First Example <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>javascript Hello World</title> </head> <body> <h1 align="center">first JavaScript</h1> <hr> <script language="javascript" type="text/javascript"> document.write("hello World from JavaScript!"); </script> </body> </html>

8 Script and HTML Basics <script> element delimits HTML from JavaScript Once within the element the rules change Two pass concept First JavaScript interpreter fires and then HTML may be produced and rendered Example Be careful with intermixing HTML and script code Example of an error Problem with browser error suppression Need to know how to see the errors Preference setting JavaScript console

9 Script Inclusion Methods There are four standard ways to include script in an HTML document: 1. Within the <script> element 2. As a linked file via the src attribute of the <script> element 3. Within an HTML event handler attribute such as onclick 4. Via the pseudo-url javascript: syntax referenced by a link Note: There are other approaches but they are non-standard

10 The <script> Element <script> </script> By default tends to interpret contents as JavaScript unless one of the following occurs: Inclusion of language attribute <script language= VBS >, etc. Inclusion of type attribute <script type= text/javascript > The type attribute is W3C recommended, language more common and more useful <meta> tag can also be used to set the script language document wide or even by a Web server. <meta http-equiv= Content-Script-Type content= text/javascript >

11 The <script> Element Continued You can use as many <script> tags as you like in both the <head> and <body> and they are executed sequentially. <h1>ready start</h1> <script language="javascript" type="text/javascript"> alert("first Script Ran"); </script> <h2>running </h2> <script language="javascript" type="text/javascript"> alert("second Script Ran"); </script> <h2>keep running</h2> <script language="javascript" type="text/javascript"> alert("third Script Ran"); </script> </h1>stop!</h1> </body>

12 JavaScript in the <head> <!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script language="javascript" type="text/javascript"> function alerttest() { alert("danger! Danger! JavaScript Ahead"); } </script> </head> <body> <h2 align="center">script in the Head</h2> <hr> <script language="javascript" type="text/javascript"> alerttest(); </script> </body> </html>

13 Script Hiding and <noscript> Script Hiding using HTML and JavaScript comments <script language="javascript" type="text/javascript">  </script> Avoids printing script onscreen in non-script aware browsers <noscript> Element Useful to provide alternative rendering in browsers that have script off or don t support script <noscript> <i>either your browser does not support JavaScript or it is currently disabled.</i> </noscript> Next example shows a great way to keep non-javascript aware users out of your site

14 <noscript> Exclusion Example <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>needs JavaScript</title> <noscript> <meta http-equiv="refresh" content="0;url=noscript.htm"> </noscript> </head> <body> <script language="javascript" type="text/javascript">  </script> <noscript> <b>javascript required</b><br> <p>read how to <a href="noscript.htm">rectify this problem</a>. </noscript> </body> </html>

15 Event Handlers HTML defines a set of event handler attributes related to JavaScript events such as onclick, onmouseover, etc. which you can bind JavaScript statements to. There are both the core events defined by HTML 4 as well as common form and page events like onsubmit, onload, etc. <body onload="alert( page loaded );"> <form> <input type="button" value="press me" onclick="alert('hello from JavaScript!');"> </form> <a href= onmouseover="alert( hi );">Yahoo</a>

16 Linked Scripts Like linked style sheets you can store JavaScript code in a separate file and reference it Use a.js file Contains only JavaScript Store these files like images in a common directory in your site (e.g. /scripts) Linked scripts can be cached and clean up HTML documents Linked scripts do have problems under some browsers

17 Linked Script Example <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script language="javascript" type="text/javascript" src="danger.js"> </script> </head> <body> <div align="center"> <form> <input type="button" name="testbutton" value="don't push me!" onclick="alerttest()"> </form> </div> </body> </html>

18 Linked Script Example Contd. In file danger.js you would have simply function alerttest( ) { alert("danger! Danger!"); }

19 JavaScript Pseudo-URLs You can use the JavaScript pseudo-url to trigger a script statements For example <a href= javascript: alert( hi ) >Click me</a> You can also type such a URL directly in the browser s location box, for example javascript:alert(5+9) Be aware that JavaScript pseudo-urls do not degrade well in non-javascript aware browsers

20 Other JavaScript Inclusion Methods There are a few other ways to include JavaScript in a Web page the most notable being the JavaScript entity supported by Netscape 4.x generation browsers This method uses a standard HTML character entity in a macro style manner &{script}; You shouldn t use this form of inclusion since it is no longer supported by even Netscape and is not cross browser in support

21 Learning JavaScript Simple syntax C like with some Perl and other characteristics Three basic types (Numbers, Strings, Booleans) and some complex types (Arrays and Objects) Loosely typed with lots of type conversion problems Interpreted language The details are really well beyond the scope of this class though JavaScript: The Complete Reference or JavaScript I are both accessible once you actually understand HTML Tip: Do not approach JavaScript unless you know HTML as its goal really is to manipulate HTML! The next slides show a few issues about how tightly wound together HTML and JavaScript are

22 DHTML: What is it? Microsoft and Netscape extended the object model with a variety of new events Dynamic HTML = CSS + DOM + Scripting + Extra stuff DHTML really is just JavaScript Some say DHTML is the use of JavaScript to move things around or perform other Dynamic effects Fits in with the marketing origin of the word, but still causes confusion Let s assume that DHTML refers to the concept of being able to manipulate arbitrary HTML in an aribtray ways Make tags, delete tags, move tags around, add style, delete style etc.

23 DOM Intro The Document Object Model or DOM suggests that we think about a document as a collection of objects In the case of Web documents tags = objects Every <p> tag makes an HTMLParagraph object, every <form> tag a form object and so on Now that everything in the document has the ability to be scripted we see that naming is key ID needs to be set and must be unique NAME may also have to be used and interestingly does not have to be unique

24 Traditional DOM Example <html xmlns=" lang="en"> <head> <title>meet and Greet</title> <script type="text/javascript">  </script> </head> <body> <form action="#" name="myform" id="myform"> <b>what's your name?</b> <input type="text" name="username" id="username" size="20" /> <input type="button" value="greet" onclick="sayhello()" /> </form> </body> </html>

25 DOM Example <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" lang="en"> <head> <title>the Dynamic Paragraph: DOM Style</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> </head> <body> <h1 align="center">the Dynamic Paragraph</h1> <hr /> <p id="para1">i am a dynamic paragraph. Watch me dance!</p> <hr /> <form action="#"> <input type="button" value="right" onclick="getelementbyid('para1').align='right';" /> <input type="button" value="left" onclick="getelementbyid('para1').align='left';" /> <input type="button" value="center" onclick="getelementbyid('para1').align='center';" /> </form> </body> </html>

26 DOM Example 2 <script type="text/javascript">  </script> </head> <body> <div id="div1">this is some text.</div> <hr /> <form action="#" name="testform" id="testform"> New text: <input type="text" name="newtext" id="newtext" /> <input type="button" value="add" onclick="addtext()" /> </form>

27 DOM Thoughts While the DOM is very powerful and shows the future the major browsers are not the same in their support for it and it is still difficult to make cross platform pages People still are using libraries to handle differences (e.g. No matter how this turns out the ramifications of scripting are significant. Bugs Compatibility Testing Software development methodology Raises the bar

28 Using JavaScript Ok maybe the DOM is not where you are today, but you should still be able to copy-paste or insert basic scripts into documents Script library sites like dynamicdrive.com are useful The book has some basic scripts including rollovers, form validation, pulldown navigation, and last modification date inclusion Some editors like Dreamweaver can insert basic JavaScript easily We look at the most common use of JavaScript here briefly

29 Form Validation Intro Most common use of scripting on the Web is for form validation (checking the form fields for correctness before submission to a CGI program) Basic stub <form action= method= onsubmit= return validate() > </form> Then we need to write a function validate that returns true if all fields are ok and false if there are mistakes.

30 Form Validation The key to form validation is naming your fields correctly and then either writing your own or using existing validation routine to check for common errors like: Blank fields Bad formats Non-numeric data Bad dates Any other criteria you can think of Demo By hand (see book page ) In Dreameaver

JavaScript By: A. Mousavi & P. Broomhead SERG, School of Engineering Design, Brunel University, UK

Programming for Digital Media EE1707 JavaScript By: A. Mousavi & P. Broomhead SERG, School of Engineering Design, Brunel University, UK 1 References and Sources 1. Javascript & JQuery: interactive front-end