Lesson13

JavaScript JavaScript is an interpreted language, designed to function within a web browser. It can also be used on the server.

JavaScript JavaScript was created by Netscape. JavaScript is easy to learn because its syntax is similar to that of the modern high- level languages like C, C++, and Java.

JavaScript Java and JavaScript are two separate, unrelated languages. The original name for the language was LiveScript The name JavaScript was chosen as a marketing ploy to use the name Java to attract attention.

JavaScript Microsoft created their own scripting language for use within a browser. It is called VBScript, and is based on Visual Basic. Fortunately, Microsoft also created JScript, their version of JavaScript. Internet Explorer can handle pages using either JavaScript (JScript) or VBScript.

JavaScript Jscript can be considered the same as JavaScript for practical purposes, so we can use JavaScript in both IE and Netscape. VBScript can only be used with Internet Explorer.

ECMAScript There is work underway to standardize the language, and a new name, ECMAscript, is used to refer to the standardized language. (ECMA stands for European Computer Manufacturer’s Association). This standardization will not affect current JavaScripts.

JavaScript my first script document.write("hello, world!")

The Document Object Model (DOM) The DOM provides a naming convention which allows us to refer to various parts of a web page by name. Once we can do this, we can use JavaScript to control and work with these different items. The DOM is not a part of JavaScript. It is a separate standard that allows us to use JavaScript with the different parts of an HTML page.

DOM naming conventions The DOM uses a hierarchical naming convention, like Java. We break the page up into a number of objects. We use dots to separate the different levels, from general to specific.

DOM naming conventions This is similar to specifying where someone lives by starting with the continent, then the country, then the province, then the city, then the street, then the building number, then the apartment, like this; NorthAmerica.Canada.Ontario.Toronto.AnyStreet

DOM naming conventions Some DOM objects are: –document: refers to the HTML page –window: refers to the browser window –forms: refers to the form elements in the document (e.g. text boxes, radio buttons etc.)

DOM naming conventions Some more DOM objects are: –images: refers to all the images in a document –navigator: refers to an unseen object that contains information about the browser version and type.

Events For our purposes at this time, an event is the result of an action taken by a user. Examples of user actions are; –Moving the mouse cursor over an image –Moving the mouse cursor away from an image –Clicking the mouse button –Double clicking the mouse button

Events Certain HTML tags have attributes to describe these events. These are called event handlers. The browser will take action when an event occurs, based on the value of the attribute.

Events Some common event handlers we will use are: –onMouseOver : Defines the action to take when the mouse pointer is placed over the image. –onMouseOut: Defines the action to take when the mouse pointer is moved off the image.

Events More common event handlers: –onChange: Defines an action to take when there is a change to the input field. –onBlur: Defines an action to take when focus is removed from the element.

Events More common event handlers: –onSubmit: Defines the action to take when a form has been submitted. –onLoad: Defines an action to take when a page has loaded.

JavaScript (continued) my first script <!-- hide script from old browsers document.write("hello, world!") // end hiding script from old browsers -->

JavaScript (continued) my first script <!-- hide script from old browsers /* this is an example of a long javascript comment. note the characters at the beginning and ending of the comment. this script adds the words "hello, world!" into the body area of the html page. */ document.write("hello, world!") // end hiding script from old browsers -->

JavaScript (continued) you should have javascript! <!-- hide script from old browsers window.location="jswelcome.html" // end hiding script from old browsers --> you won't get much from this site without the latest version of javascript--i suggest that you upgrade now!

JavaScript (continued) welcome to our site <a href="script04.html" onclick="window.location='jswelcome.html'; return false">welcome to our site... c'mon in!

JavaScript (continued) welcome to our site <a href="script04.html" onclick="window.location='jswelcome.html'; return false">welcome to our site... c'mon in!

JavaScript (continued) what's your browser? <!-- hide script from old browsers if (navigator.appname == "netscape") { document.write("you're running netscape navigator, a fine javascript- enabled browser.") } else { document.write("you're not running netscape navigator--maybe you should?") } // end hiding script from old browsers -->

Dynamic images (1) For our first use of DHTML, we will learn how to cause an image to change, based on the mouse position. This is commonly referred to as an image flip.

Dynamic images (2) The tag has the following attributes that we will take advantage of; –onMouseOver : Defines the action to take when the mouse pointer is placed over the image which is inside the tag. –onMouseOut: Defines the action to take when the mouse pointer is moved off the image which is inside the tag.

Dynamic images (3) We will make it so that when the user puts the mouse over a certain image, that image changes. To do this, we need to create the two different images. 1.The default image, the one the user sees first. 2.The swap image, the one that replaces the default image when the mouse is placed over it.

Dynamic images (4) The default image: The swap image:

Dynamic images (5) Start with a normal tag inside an anchor, like this; Give a name to our image

Dynamic images (6) In order to change the image on the screen, we need to be able to refer to it. We use the DOM for this, giving the complete path to the image. The DOM path to our image is document.images.image1

Dynamic images (7) Now we specify what we want to change about this image, in this case it is the src attribute (i.e. which image is being displayed) document.images.image1.src

Dynamic images (8) Next we add the onMouseOver attribute to the tag containing the image we want to change, and we use the DOM to say what image to use instead. Note the single quotes inside the double quotes.

Dynamic images (9) This works fine, but once we put the mouse over the image, it changes and stays that way. Now we want to make it so that when we move the mouse off the image, it goes back to the original image.

Dynamic images (10) Now we need to use the onMouseOut attribute to set the behaviour when the mouse cursor is moved off the image.

Dynamic images (11) We just have to change the code as follows; <a href="mouseovermouseout.html" onMouseOver="document.images.image1.src='presshere.gif'" onMouseOut="document.images.image1.src='lookatme.gif'">

JavaScript errors Since JavaScript is an interpreted language, syntax errors will usually cause the script to fail. Both browsers will provide error messages which can be very helpful in debugging JavaScript.