Scribd
Upload
2 views

Lesson 9 Notes

This document serves as a final practice exercise introducing JavaScript, a scripting language that enhances web pages. It outlines the basics of JavaScript, including its history, common uses, and coding techniques, with examples demonstrating alert boxes, link events, and image swapping. The exercise is optional for the final web project but may be beneficial for the final exam.

Uploaded by

cameron.king1202
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Lesson 9 Notes

This document serves as a final practice exercise introducing JavaScript, a scripting language that enhances web pages. It outlines the basics of JavaScript, including its history, common uses, and coding techniques, with examples demonstrating alert boxes, link events, and image swapping. The exercise is optional for the final web project but may be beneficial for the final exam.

Uploaded by

cameron.king1202
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

HTML Practice Exercise - Extra

Since Lesson 1, you have expanded your knowledge of HTML codes through a series of HTML practice exercises. These
exercises, used in conjunction with the assignments, culminated in a complete Web site.

This final practice exercise will introduce you to a programming language that can make your Web pages more powerful.
That programming language (a scripting language) is known as JavaScript. This exercise is NOT a requirement of the final
Web project but may be used if you desire. Concepts from this exercise MAY be used on the final exam.

Please note, JavaScript is much different than the programming language known as Java.

What is JavaScript?
· Object-based scripting language
· Works with the objects associated with a Web page document

o the window

o the document

o the elements

§ such as forms, images, hyperlinks, etc

What is JavaScript?
· Originally developed by Netscape

o Named LiveScript

· Netscape & Sun Microsystems Collaboration

o LiveScript renamed JavaScript

· JavaScript is NOT Java

Common Uses of JavaScript


· Display a message box
· Select list navigation
· Edit and validate form information
· Create a new window with a specified size and screen position
· Image Rollovers
· Status Messages
· Display Current Date
· Calculations

Coding JavaScript
· JavaScript statements can be coded on a Web page using two different techniques:

o Place JavaScript code between <script> tags

o Place JavaScript code as part of an event attached to an XHTML element

JavaScript: Using <script> Elements


· The script element

o A container tag

o May be placed in either the head or the body section of a Web page

o Example

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


<!- -
alert("Welcome to Our Site");
// - ->
</script>

JavaScript Examples
Example 1: The use of the alert box and internal documentation (comments) in JavaScript.

<html>
<head>
<title>2057 JavaScript</title>
<script language="JavaScript" type="text/javascript">
/* multi-line comment,
this is a huge block of
text that I;ve commented
out */
// single line comment - put up an alert box, to show how they work
alert("Hello to your first JavaScript");
</script>
</head>
<body>
</body>
</html>

Example 2: The use of multiple alert boxes in JavaScript.

<html>
<head>
<title>2057 JavaScript</title>
<script language="JavaScript" type="text/javascript">
// put up an alert boxes, to show how they work
alert("Here's the first one");
alert("The second one");
alert("And the third one");
</script>
</head>
<body>
<h1>Yes, I have seen these and now I know it!</h1>
</body>
</html>

Example 3: The use of link events in JavaScript and internal documentation(comments) in HTML.

<html>
<head>
<title>2057 JavaScript</title>
<script language="JavaScript" type="text/javascript">
</head>
<body>
<h1>Link Events Example</h1>

<!-- This is a link event -->


<!-- When someone clicks on this link, run the little bit of JavaScript between the quotes -->
<a href="#" onClick="alert('Try it again!');">Click on me!</a>

<!-- This is like onClick except it uses onMouseOver -->


<a href="#" onMouseOver="alert('Neat Eh!');">Mouse over me!</a>
</body>
</html>

Example 4: The use of image swapping in JavaScript.

<html>
<head>
<title>2057 JavaScript</title>
<script language="JavaScript" type="text/javascript">
</head>
<body>
<h1>Image Swapping Example</h1>

<a href="#" onMouseOver="document.the_image.src='smallibm.gif';"


onMouseOut="document.the_image.src='swoosh.gif';">
<img src="swoosh.gif" border=0 name="the_image">
</a>

</body>
</html>

NOTE: You will need two images that are the same size (height and width) and in your Web page directory. The example
above uses the images named ‘smallibm.gif’ and ‘swoosh.gif’.
Next Step

If you can meet the objectives stated at the beginning of Lesson 9, you are ready to proceed to the next lesson. Keep in
mind the weekly schedule recommended in the course syllabus.

Assignment

Assignment #6 is due this week.

You might also like