Programming on the Client Side: Javascript/Dynamic HTML How

Return to Client Side (The Browser) So far we have been developing Programming on the Client Side: Static Web pages JavaScript/Dynamic HTML • Recap —- Perl/CGI: 569 Static Pages: 570 Server Side • Very nice. Essential to do hard work processing on the Internet (PHP similar) • • Often Adequate for the task in hand – Search Engine • Often useful and – Log Usage • – Gather Data/Stats Often entertaining or informative. • – Interface to Databases – Many more suitable applications .... !! !! "" "" ! ! " " Back Back Close Close Making Web Pages Dynamic Other Typical Uses of Dynamic Web Page Can replace some (but not all) CGI functionality? Detecting which browser accesses page • Customising HTML for browsers E.g. HTML form: • User Customised HTML Users enter data and submit it to the server • • 571 Opening new browser windows for new links 572 a CGI script is used to verify and validate that data. • • Messages and confirmations, Alerts, Status Bar passes data across the network — slow. • • Writing to Frames • Rollover Buttons, Moving Images How much more interactive could a site • Multiple pages in a single Download be if data were checked by the browser and • ..... Many More any error messages originated locally? • !! !! "" "" ! ! " " Back Back Close Close Some More Definitions: Dynamic HTML and Document Object The Document Object Model (DOM) Model DOM: Before delving into the programming there are two more topics to The key element of DHTML is probably the document object introduce. • model. The Document Object Model (DOM) : 573 DOM makes everything on the page into an object 574 • Scripts can only manipulate objects on the page because of Elements can be manipulated by programmed scripts. • DOM • This was developed by the World Wide Web Consortium (W3C) • Limited Cross-browser Support — neither of the big players • yet adheres fully to it. Dynamic HTML (DHTML) : A combination of content formatted using HTML, cascading • style sheets, a scripting language and the DOM. !! !! "" "" ! ! " " Back Back Close Close DOM of an HTML Document Example HTML DOM The DOM model of an HTML document is a hierarchical structure The relationship between some HTML code and the DOM which might reasonably be represented as a tree. <html> Does NOT imply that DOM software must manipulate the <head> • document in a hierarchical manner, <title>TITLE OF PAGE</title> 575 576 </head> It is simply a representation. • <body> <p>Some text...</p> <ul> <li>First <li>Second </ul> </body> </html> !! !! "" "" ! ! " " Back Back Close Close Example HTML DOM (Cont.) JavaScript JavaScript is NOT JAVA: The only similarity between the two languages is in their names!!! • Basic idea : a client-side browser language not as complicated as • 577 Java. 578 JavaScript and JScript Meant to be implementations of the same thing. • Not exactly the SAME!!!! • The DOM models, but does not implement: Objects that comprise a document • !! !! Semantics, behaviour and attributes of those objects "" "" • Relationships between those objects ! ! • " " Back Back Close Close What is JavaScript and What is it Used For? Pros and Cons of JavaScript JavaScript is: Advantages: Wide browser support i.e. Most Browsers speak a dialect. A fairly simple language • • Easy access to document objects and their manipulation Only suitable for fairly simple tasks • • No long download times w.r.t java or graphic animations Best suited to tasks which run for a short time 579 • 580 • No Plug-in support required Most commonly used to manipulate the pieces of the document • • Relatively Secure object model. • Disadvantages: Not standard support for Javascript across browsers esp. DOM • Web page useless if script does not work!! • Javascript may be disabled by browser reading HTML file no • control over this !! !! JavaScripts can run slowly "" • "" ! The version of JavaScript that was used as the basis of the ECMA ! " Script standard was 1.1. Therefore everything that is written using " Back JavaScript 1.1 should comply with the standard. Back Close Close Learning JavaScript Borrowing Code First Steps in JavaScript As with HTML (and Perl): Running Javascript A lot of code on Web. • 581 JavaScript can be run on some file and Web servers 582 All the JavaScript that your browser encounters is freely available • • MOST COMMONLY: front-ends for Web pages. to you. • – Part of HTML document (as we will see very soon) Therefore: – So View Source, or You do not compile it like other programs, Java, C, Pascal – Save as ... HTML will give you access to lots of Examples. • It is an interpreted language: It is a script • To Use: Simply embed JavaScript in you HTML web page One of the best resources on the web is The JavaScript Source at • http://javascript.internet.com !! !! "" "" ! ! " " Back Back Close Close A Simple Example 1 — Hello World The key points of JavaScript Programs The script that follows could hardly be easier. The JavaScript program is contained between the <script> .... </script> We’ll list the code first then explain what’s going on. • • The language attribute must be set to "javascript" i.e <html> • <head> <script language="javascript"> <title> Hello World JavaScript</title> 583 584 </head> JavaScript programs contain variables, objects and functions. • <body > Each line of code is terminated by a semi-colon; <script language="javascript"> • Blocks of code must be surrounded by a pair of curly brackets. A block of code • var str = "Hello World"; is a set of instructions that are to be executed together as a unit. This might be because they are optional and dependent upon a boolean condition or because window.alert(str); they are to be executed repeatedly; Functions have parameters which are passed inside parenthesis; document.write("<h1>" + str + "</h1>"); • Variables are declared using the keyword var; </script> • !! Scripts require neither a main function nor an exit condition. !! • "" Functions may be used. "" </body> ! • ! </html> " " Back Back Close Close Our First Hello World Example A Simple Example — Hello World with a Function Specifically for the Hello World Program: Let us now see how we use use funtions in JavaScript We create a variable str and store the string "Hello World" in Here wee also note that • it. You may freely write JavaScript in any place in your Web page. • We create an alert window with the message "Hello World". • 585 However if you wish to trigger actions from certain events you 586 The window object is used and we call the alert method • may wish to put your JavaScript in functions in the Head section (function) of this object. of the document. !! !! "" "" Figure 29: Hello World JavaScript Example ! ! We write() to the document model some HTML. " " • Back Back Close Close Hello World with a Function Hello World with a Function — Explanation The Hello World program called from a function is as follows: The operation of the program is essentially the same as the first version except that <html> We write a function <head> • <script language="javascript"> 587 588 init() function init(){ var str = "Hello World"; to do the job. window.alert(str); We call the function when the Web page loads with the • document.write("<h1>" + str + "</h1>"); onLoad="init()" } </script> attribute in the body tag. </head> !! !! <body onLoad="init()"> "" "" ! ! </body> </html> " " Back Back Close Close More Functions Popup Browser Information Example We can add more functions that get called on different events: The program also introduces some more objects and some useful applications of JavaScript: We call a function popup() when the Web page loads • We call a function farewell() when the page is unloaded: The navigator contains • • 589 data about the browser being 590 – The onUnLoad="farewell()" attribute is set. used The program finds the • version of the application appVersion and the Safari Version userAgent(). This information is displayed • in a pop up alert When you leave the Web !! • !! "" page or Refresh the page an "" alert Explorer Version ! different is brought ! " up " Back Back Close Close Popup Browser Information Example Popup Browser Information Example Code The full code for this example is: <html> <head> <script language="javascript"> 591 function popup(){ 592 var major = parseInt(navigator.appVersion); var minor = parseFloat(navigator.appVersion); var agent = navigator.userAgent.toLowerCase(); document.write("<h1>Details in Popup</h1>"); window.alert(agent + " " + major); } Figure 30: Browser Version Page Exit JavaScript Example (Internet function farewell(){ window.alert("Farewell and thanks for visiting"); Explorer Display Shown) } </script> !! </head> !! "" "" ! <body onLoad="popup()" onUnLoad="farewell()"> ! </body> " </html> " Back Back Close Close More Browser Information A Second Browser Information Example So far our examples have done everything inside JavaScript The program achieves a similar task as the previous example but in environments: a completely different way: You can also mix HTML and JavaScript The program an HTML TABLE (see later) to a Browser with the • • Browser’s details: You can also access JavaScript variables in the HTML 593 594 • Figure 31: Browser Version 2 JavaScript Example (Explorer) !! !! "" "" ! ! " " Back Back Close Close Browser Information Example 2: Javascript and HTML Mix Browser Information Example 2: HTML HEAD <HEAD> <SCRIPT>  595 596 Figure 32: Browser Version 2 JavaScript Example (Safari)  <!-- Begin The program use

Programming on the Client Side: Javascript/Dynamic HTML How

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support