Introduction to JavaScript Lab



Introduction to JavaScript Lab

(or I have no voice due to sore throat lab)

• Initially called LiveScript, changed to JavaScript for marketing reasons.

• Java and JavaScript are two separate languages that both have strong web usability.

• Present versions of JavaScript are:

– JavaScript 1.5

– Jscript 5.5

– ECMA v3

• Relies on direct support from web browsers.

– Makes it harder to keep consistency across browsers for pages that use JavaScript.

• Much stronger at direct interaction with a web page than Java.

• Possible to use as a full blown programming language.

– But if you need a full blown programming language there are probably better choices.

JavaScript in HTML

• Relies heavily on the proper use and setting of the name attribute.

• All variables are declared as var, datatype is determined dynamically.

• When interacting with the web page you use the document object.

– Allows access to forms, applets, and allows you to write additional HTML to the page.

Placing JavaScript in HTML

• Embed all JavaScript between the and tags.

– Need to set the type attribute to “text/javascript”.

– However the older language attribute is better supported (set to “JavaScript”).

Examples: Code Goes Here.

Code Goes Here.

• We can also use the src attribute to simply load a file containing the JavaScript.

– Similar to setting the applet to load in a page when using Java.

– Allows easier code reuse and makes your HTML pages less complex.

Example:

Lab Part (e.g. Stuff you should do)

Go to “clipper.ship.edu/~cdgira” and look at “Example 1” under the links for “Intro to JavaScript”. You should be able to click on the link and view the web page generated by the JavaScript.

Step 1: Go to view source on the web page so you can get a copy of the code.

Step 2: Pull the JavaScript code out and save to a file called 1-1.js

Step 3: Change the tags for the JavaScript in the web page so it loads your 1-1.js file. Make sure you remove all the JavaScript code that was there before.

Declaring Variables in JavaScript

• var

• Depending on what you store in it, determines what type it is.

– Very flexible, but can make catching errors much harder.

• No case sensitivity in HTML, but XHTML is.

• If you try to store a value in an undeclared variable, it will be declared.

– This is a very bad thing, but something we a stuck with.

Lab Part

Notice that in the 1-1.js JavaScript program that none of the variables used were declared ahead of time.

Step 1: Try changing the first occurrence of the “fact” variable to “pact” and see what happens with the program.

Step 2: Now undo the changes from Step 1 and instead change the second occurrence of the “fact” variable to “pact” and see what happens.

Step 3: Now change the “pact” variable to “FaCt” (note there are upper and lower case letters now. Try the program and see what happens.

Step 4: Make an XML compliant version of 1-1.html and be sure to save it as 1-1.xhtml. You will need to use Netscape, Firefox, or Mozilla to view the page. See what happens now.

The Document Object

• Key methods: close, open, write, writeln.

• Key properties

– anchors[ ] applets[ ] bgColor fgColor

– cookie domain forms[ ] images [ ]

– lastModified links [ ] location referrer

– title URL

• Better to rely on the name attribute than using the applets, images, or forms property.

Notice how the document object is used in Example 1 to write additional parts to the web page.

Lab Question: Why would something like this be useful?

Some Final Notes

• Normally the code only is run once when the page loads.

• We can retrigger code through events:

– onclick, onmousedown, onmouseup, onmouseover, onmouseout, onchange, onsubmit, and onreset.

• Triggers of this type is a way to increase the power of HTML indirectly.

Lab Part

Go take a look at Example 2, specifically look at the page source.

First: Try to see if you understand how the document object is used by the JavaScript code to get information from the form objects.

Second: Try to see if you can figure out how the form objects can call JavaScript functions.

Final Notes: There are subtle differences in JavaScript syntax and Java syntax. The good news is most of what you know about for, while, and if statements in Java should hold for JavaScript. Also, JavaScript relies heavily on functions while Java relies on methods. For the most part (as far as we are concerned in this class) these two are roughly equivalent (other than slight differences in syntax).

For Practice

Try incorporating JavaScript into the Form page you did in Project 1.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download