CSE2325/3325: Lecture 15

CSE3325 : Javascript, Part 1

In the previous lecture:

Establish a visual hierarchy over which the eye can flow as it processes the information on a (web) page.
Choose page dimensions/length appropriate to the intended purpose of the document.
Ensure web pages are free standing.

In this lecture:

Introduction to Javascript programming.

References

Flanagan, D. JavaScript: The Definitive Guide
2nd edn, O'Reilly & Associates, Inc.
Stein, L.D. How To Set Up and Maintain a Web Site
2nd edn, Addison Wesley 1997, Chpt10.
Goodman, D. Dynamic HTML: The Definitive Reference
O'Reilly & Associates, Inc.

What is Javascript?

JavaScript is not Java! But it has other names like: Livescript, JScript and ECMAScript.

Java is a complete programming language which may be used generally as well as on the Web.
JavaScript (also a complete programming language) whose code is usually embedded in an HTML document.
JavaScript is a scripting language designed to be executed by the browser when it receives an HTML document containing code.
JavaScript is also used by other web-related software such as Adobe's Acrobat and Macromedia Dreamweaver. Netscape servers also use server-side JavaScript.
JavaScript runs on the client machine and so it is not affected by slow Internet connections.
JavaScript can read and write HTML documents that the browser has open including the document in which the script itself resides.
JavaScript has access to some of the browser's functions such as the forward & backward buttons.

JavaScript is suitable for constructing intelligent HTML documents (eg. self-checking fill-out forms) and dynamically created HTML pages. It is also an integral component of Dynamic HTML (D-HTML). More on this latter.

HAL, the starship's computer is behaving strangely. He has killed all the ship's crew except for you. In an emergency (like now) hit this panic button.

There, now that's not so bad is it? You just asked your browser to execute some JavaScript.

Implementing the Panic Button using JavaScript.

The source <HEAD> of this document (have a look!) contains some code.

<script language="Javascript">

function daisy()

{
   alert("Daisy, Daisy, give me your answer do.\n" +
         "I'm half crazy, all for the love of you.\n" +
         "Will you marry me Dave?");
}
</script>

<SCRIPT> & </SCRIPT> tags identify their contents as JavaScript.
A function named daisy is defined.
Function daisy calls Netscape's built in 'alert' dialogue box.
Check the source code to see how comments work and how HTML comments can be used to hide Javascript from older browsers.

The source <BODY> of this document (have a look too!) contains some code.
- This creates a form with a single element of TYPE button.
- When the button is clicked, a JavaScript routine (daisy!) is called.
This is about as interesting (and as useful) as a "Hello World" programme!

Dave: Open the pod bay door HAL!

HAL: I'm sorry Dave, I can't do that.

Did you de-activate HAL? Or are you doomed to be de-activated yourself?

The alert, prompt and confirm dialogue boxes have all been used above.
The document source reveals that JavaScript syntax is similar to that of the C programming language.

In the next set of lecture notes, we'll look more closely at JavaScript Syntax.

This lecture's key point(s):

JavaScript is a client side programming language that may be embedded within an HTML document.
JavaScript allows for user interaction, dynamic generation of content, form checking, and much more...

CSE3325 courseware | CSE3325 lecture notes