© Hugh McCabe 2000 Web Authoring Lecture 12 JavaScript What is JavaScript? A platform-independent, event-driven, interpreted programming language developed by Netscape and Sun. Used for adding interactivity to web pages because scripts can be embedded in HTML files by enclosing the code in <script> </script> tags. Foundation of Dynamic HTML (DHTML) JavaScript adds to HTML by making possible event-handling client-side processing It is useful to the developer because they can use it to specify actions to carry out based on events which occur when the page is being viewed e.g. mouse clicks, button presses and so on …. © Hugh McCabe 2000 Web Authoring Lecture 12 1 1

© Hugh McCabe 2000 Web Authoring Lecture 12 Differences between Java and JavaScript 1. Execution Java source code is compiled on the server into byte code, then sent to the client for execution as an applet. The Java Virtual Machine (e.g. a browser which can execute applets) must be resident on the client in order to execute this. JavaScript code is embedded as ASCII text within the HTML document itself. This is sent from the server to the client. Browser must include a JavaScript interpreter which executes the JavaScript line by line. In summary Java is compiled, JavaScript is interpreted. 2. Object Methodology Java is a strict object-oriented programming language in that everything has to be developed as an object by the programmer. JavaScript is object based . It has no classes or inheritance but otherwise uses most of the ideas of object-orientation. © Hugh McCabe 2000 Web Authoring Lecture 12 2 2

© Hugh McCabe 2000 Web Authoring Lecture 12 3. Use in HTML Java is a separate language whose programs are created and stored independently of the HTML which might call them. It is called in the same way we might call an image file or sound file. JavaScript is embedded plain text within the HTML document. It can only be executed when the enclosing HTML file is loaded into a browser. 4. Declaration of variables Java uses strong type checking. All variables are declared and checked server side during compilation. JavaScript is loosely typed as data types are determined and assigned at run-time by the interpreter on the client browser 5. Language Scope Java is designed as a general purpose fully-featured programming language suitable for developing a wide range of applications. One of its uses is to provide a level of interactivity to web pages. JavaScript is designed solely as a means of providing interactivity to web pages. © Hugh McCabe 2000 Web Authoring Lecture 12 3 3

© Hugh McCabe 2000 Web Authoring Lecture 12 Why is JavaScript object-based? JavaScript is referred to as an object-based language because it makes use of many of the features of object-orientation without providing the full mechanism of classes, inheritance and so on. Object oriented programming is a programming methodology which designs programs which are based on user and system defined chunks of data, along with the operations which can be performed on this data, and the means of accessing and modifying the data. Fundamental concepts are objects, methods and properties. An object is basically something which stores some information. It may provides ways for you to read that information and a way for you to write to, or change, that information. © Hugh McCabe 2000 Web Authoring Lecture 12 4 4

© Hugh McCabe 2000 Web Authoring Lecture 12 Some of the information in the object may be directly accessible, other information may require you to use a method to access it. A method can be thought of as some operation which can be performed on or by the object. The directly accessible bits of information in the object are its properties. The programmer can change these directly. Other bits of information associated with the object can be only accessed via methods. What’s this got to do with HTML? JavaScript regards the entire web document in which it is embedded as an object. All elements of the web page are also objects e.g. tables, forms, buttons, images etc… All of these objects have properties (information about the object) which can be directly accessed. For example one of the properties of the web document is its background colour. This can be directly altered in JavaScript by: document.bgcolor = “red” © Hugh McCabe 2000 Web Authoring Lecture 12 5 5

© Hugh McCabe 2000 Web Authoring Lecture 12 Most objects have a set of things that they can do. Different objects can do different things. Each of the things that a document can do are methods. For example a document can write things to the screen. In JavaScript this is done using the write() method e.g. document.write(“Hello World”) How do we trigger these methods? JavaScript provides constructs for responding to events. For example we can place a button on a web page and trigger some method when the user clicks on it. Other events are things like OnMouseOver, OnMouseOut, OnLoad. © Hugh McCabe 2000 Web Authoring Lecture 12 6 6

© Hugh McCabe 2000 Web Authoring Lecture 12 What does it look like? Here is a simple example. <html> <body> <br> This is HTML<br> <script language=“JavaScript”> document.write(“This is JavaScript”) </script> <br>This is HTML again! </body> </html> The bit inside the script tags is JavaScript. If you type this is and load into a browser you will see This is HTML This is JavaScript This is HTML again! © Hugh McCabe 2000 Web Authoring Lecture 12 7 7

© Hugh McCabe 2000 Web Authoring Lecture 12 No big deal, could have done this without JavaScript However it demonstrates the <script> tag. Everything inside is interpreted as JavaScript. document.write() outputs to the HTML page. What if the browser doesn’t do JavaScript? In this case it will ignore the <script> tag and outputs everything following it as normal text. Very bad! Fix this as follows: <html> <body> <br> This is a normal HTML document <script language=“JavaScript”> <! -- document.write(“This is JavaScript!”) // --> </script> © Hugh McCabe 2000 Web Authoring Lecture 12 8 8

© Hugh McCabe 2000 Web Authoring Lecture 12 The contents of the script tag has been enclosed in HTML comments <!-- --> So, non-JavaScript browsers will ignore this. JavaScript browsers will ignore the comment tags! Events Events are caused by user actions. We want to be able to write code to respond to these. A simple event is the Click event. For example if the user clicks on a button then we might want a pop-up window to appear. The following code illustrates this: <form> <input type =“button” value=“Click me” onClick=“alert(‘Hi’)”> </form> © Hugh McCabe 2000 Web Authoring Lecture 12 9 9

© Hugh McCabe 2000 Web Authoring Lecture 10 This creates a simple form with a button which will look something like this: Click me If the user clicks the button a pop-up window will ,eh, pop up. It will contain the text “Hi”. onClick defines what happens when a click event occurs. In this case the browser executes alert(‘Hi’) This is JavaScript code. Note it does not have to be enclosed in the <script> tags in this case. Alert creates pop-up windows. Functions These are used to bundle sets of commands together in order to use them to respond to events. © Hugh McCabe 2000 Web Authoring Lecture 10 10 10

© Hugh McCabe 2000 Web Authoring Lecture 12 Here’s an example: <html> <script language=“JavaScript”> <!-- hide function Myfunction() { document.write(“Welcome to my page!<br>”); document.write(“This is JavaScript!<br>”); } myFunction(); // --> </script> </html> This will cause the text Welcome to my page! This is JavaScript! to be displayed three times. © Hugh McCabe 2000 Web Authoring Lecture 12 11 11

© Hugh McCabe 2000 Web Authoring Lecture 12 Functions are generally used in conjunction with event-handlers. Consider this example: <html> <head> <script language=“JavaScript”> <!-- hide function calc() { var x = 12; var y = 5; var result = x+y; alert(result); } //--> </script> </head> <body> <form> <input type=“button” value=“Calculate” onClick=“calc()”> </form> </body> </html> © Hugh McCabe 2000 Web Authoring Lecture 12 12 12

© Hugh McCabe 2000 Web Authoring Lecture 12 The button calls the function calc() . It defines variables, gives them values and fires up a pop-up window with the results of a calculation. Obviously for this to do anything useful we should be able to pass the function values. JavaScript allows this also. The JavaScript Hierarchy JavaScript organises all elements of the web page into an object hierarchy in order to allow the programmer to manipulate these objects. Each object has certain properties and methods associated with it. A simple example allow us to see how the hierarchy is organised. © Hugh McCabe 2000 Web Authoring Lecture 12 13 13

© Hugh McCabe 2000 Web Authoring Lecture 12 <html> <body bgcolor=“#ffffff”> <center> <img src=“home.gif” name=“pic1”> </center> <p> <form name=“myForm”> Name: <input type=“text” name=“name” value=“”><br> e-Mail: <input type=“text” name=“email” value=“”><br><br> <input type=“button” value=“Push me” name=“myButton” onClick=“alert(‘Hi’)”> </form> <img src=“ruler.gif” name=“pic4”> <a href=“http://madeup.dom.ie/~hmccabe”>My homepage</a> </body> </html> © Hugh McCabe 2000 Web Authoring Lecture 12 14 14

© Hugh McCabe 2000 Web Authoring Lecture 12 Here’s a screenshot of the page with some things added © Hugh McCabe 2000 Web Authoring Lecture 12 15 15

© Hugh McCabe 2000 Web Authoring Lecture 12 There’s two images, one link, and one form with two text fields and a button. From JavaScript’s point of view the browser window is a window-object. This window-object contains certain elements like the statusbar (not shown on the diagram). Another element of the window-object is the document-object (into which we have loaded a HTML page). The document-object is an important object in JavaScript. This document-object has various properties like background colour and so on. Furthermore all of the HTML-elements are themselves properties of the document-object. These HTML-elements (like the images, forms etc.) are themselves objects with their own properties. So we have an object hierarchy as shown overleaf. © Hugh McCabe 2000 Web Authoring Lecture 12 16 16

© Hugh McCabe 2000 Web Authoring Lecture 12 In order to refer to different objects on the page we must refer to this hierarchy. Suppose we want to access the first image. This is document.images[0] Access the first text field of the form as document.forms[0].elements[0] © Hugh McCabe 2000 Web Authoring Lecture 12 17 17

© Hugh McCabe 2000 Web Authoring Lecture 12 Suppose we want to know what the user entered into the first text field. Once we have located it (previous slide) we want to be able to manipulate it. This is done with various properties and methods associated with that type of object (look up a JavaScript reference!). If you do this you will see that textelements have a property called value. This is the text entered into the box. We can read this out by using the line of code: name=document.forms[0].elements[0].value; The string is stored in the variable name. We could for example create a pop-up window using this e.g. alert(“Hi “ + name) JavaScript also allow you to associate names with objects on the page in order to avoid working with numbered subscripts. © Hugh McCabe 2000 Web Authoring Lecture 12 18 18

© Hugh McCabe 2000 Web Authoring Lecture 12 The previous example associated the name myForm with the form. It did this with the code <form name=“myForm”> Name: . . . </form> This means that forms[0] is called myForm Similarly the first text field is called name so instead of name=document.forms[0].elements[0].value we can use name=document.myForm.name.value We can also assign a new value to the text field as follows <input type=“text” name=“input” value=“bla bla bla”> <input type=“button” value=“Write” onClick=“document.myForm.input.value=‘Hi!’> © Hugh McCabe 2000 Web Authoring Lecture 12 19 19

© Hugh McCabe 2000 Web Authoring Lecture 12 In this case the text field starts off with the text “bla bla bla” in it but when the user clicks on the button it changes to “Hi!”. Here is another example which illustrates the use of functions and more ... <html> <head> <script language=“JavaScript”> <!--hide function first(){ //creates a popup window with the text which was // entered into the text field alert(“The value of the textfield is: “ + document.myForm.myText.value); } function second(){ //this function checks the state of the checkbox var myString=“The checkbox is “; if(document.myForm.myCheckbox.checked)myString+=“checked” else myString+=“not checked”; alert(myString); (pto) © Hugh McCabe 2000 Web Authoring Lecture 12 20 20

© Hugh McCabe 2000 Web Authoring Lecture 12 //--> </script> </head> <body bgcolor=lightblue> <form name=“myForm”> <input type=“text” name=“myText” value=“bla bla”> <input type=“button” name=“button1” value=“Button 1” onClick=“first()”> <br> <input type=“checkbox” name=“myCheckbox” CHECKED> <input type=“button” name=“button2” value=“Button 2” onClick=“second()”> </form> <p><br><br> <script language=“JavaScript”> <!-- hide document.write(“The background colour is: “); document.write(document.bgColor + “<br>”); document.write(“The text on the second button is: “); document.write(document.myForm.button2.value); </script> </body> </html> © Hugh McCabe 2000 Web Authoring Lecture 12 21 21

© Hugh McCabe 2000 Web Authoring Lecture 12 So what’s it used for? This lecture only suffices to give a brief overview of what JavaScript is and some idea of how it works. Among the common uses of JavaScript are Mouseovers Form input validation Client Side Processing of forms Image Maps Manipulating Windows and Controlling Loading of Documents Any sort of programming which you might consider attaching to a web page … possibilities are endless! © Hugh McCabe 2000 Web Authoring Lecture 12 22 22