lesson13. javascript javascript is an interpreted language, designed to function within a web...

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<html><head>

<title>my first script</title></head><body bgcolor=white><h1>

<script language=javascript type="text/javascript">

document.write("hello, world!")

</script></h1></body></html>

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.


• 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.54.305


• 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.)


• 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)<html>

<head>

<title>my first script</title>

</head>

<body bgcolor=white>

<h1>




</script>

</h1>

</body>

</html>


<head>

<title>my first script</title>

</head>


<h1>



/* 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.

*/



</script>

</h1>

</body>

</html>


<head>

<title>you should have javascript!</title>

<script language="javascript1.2" type="text/javascript">


window.location="jswelcome.html"


</script>

</head>


<h2>you won't get much from this site without the latest version of

javascript--i suggest that you upgrade now!</h2>

</body>

</html>

JavaScript (continued)

<html>

<head>

<title>welcome to our site</title>

</head>


<h2 align=center><a href="script04.html"

onclick="window.location='jswelcome.html';

return false">welcome to our site... c'mon in!</a></h2>

</body>

</html>


<head>

<title>welcome to our site</title>

</head>


<h2 align=center><a href="script04.html"

onclick="window.location='jswelcome.html';

return false">welcome to our site... c'mon in!</a></h2>

</body>

</html>

JavaScript (continued)

<html> <head><title>what's your browser?</title>

</head><body bgcolor=white><h2>

<script language=javascript type="text/javascript"></script>

</h2></body></html>

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 <a> 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 <a> tag.

– onMouseOut: Defines the action to take when the mouse pointer is moved off the image which is inside the <a> 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 <img> tag inside an anchor, like this;

<a href=“page.html” ><img src=“lookatme.gif”></a>

• Give a name to our image<a href=“page.html” ><img src=“lookatme.gif” name=“image1”></a>

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 <a> tag containing the image we want to change, and we use the DOM to say what image to use instead.

<a href=“page.html” onMouseOver = “document.images.image1.src=‘presshere.gif’”>

<img src=“lookatme.gif” name=“image1”>

</a>

• 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'">

<img src="lookatme.gif" name="image1" border="0">

</a>

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.

lesson13. javascript javascript is an interpreted language, designed to function within a web...

Documents