ITEC 745 - Co-Opting Javascript

JAVASCRIPT BASICS - Prepping for it.

it begins and ends with <script language="Javascript">insert script</script>
it is usually placed within the <head></head> tag with a connecting piece of script attached to an HTML element within the <body></body> but not always (see below).
you should get into the habit of commenting out sections of script for future edits of your pages and to hide your javascript from older browsers which cannot interpret this code (

Type the following script below into the <body> of your document to generate the above sentence and detection.

BEHAVIORS ARE JAVASCRIPT DONE FOR YOU

In any page you may add a Behavior to, take a look at the Source Code and see what DW did for you to make this happen. As an example, adding the "Play Sound" behavior creates this: -click to view -

WORKING WITH JAVASCRIPT in DREAMWEAVER

Dreamweaver has helfpul facilities to make your dealings with Javascript well supported. Once you have added a script to the page, the tag will appear on the page indicating a sprig of code has been added there (similarly colored symbols also appear for hidden tags like named anchors but you'll notice the script symbol). Click on this symbol and the following property window will appear:

When you click the "Edit" button where the red arrow is pointing, it will launch the handy "Script Properties" window which shows you all of the Javascript code within the <script> tag.

Also, under "Files">"Assets", you'll find a "scripts" where you can view all external .js files (see below) located within your site. This allows you to easily review your external javascripts, edit them and even create "favorites", however it does not detect or allow any interaction with any Javascripts embedded in your site.

CO-OPTING AT LARGE

Javascript can be co-opted in a couple of ways. One way is to find a web page that performs a function you wish to add to your website. You can always "view source" and locate the script embedded in the code. A far better way to co-opt Javascript is to visit a number of Javascript code libraries or "cut and paste" sites that allow you to search for the specific kind of function you'd like to perform and freely download the script and add it to your site. Often, these sites also give you instructions on exactly where to load the code. Here are a few examples of these sites:

For tonight's assignment, you will break into pairs and will work together to add the following items to your web sites (both of them):
Note: you will find all of the scripts on the above listed resources. You may need to put these items on separate pages.

Add a "Browser Information" detection element to your page.
http://javascript.internet.com/user-details/browser-details.html

Add a link that launches a pop-up window. [http://builder.cnet.com/webbuilding/0-7600-8-6414513-1.html?tag=st.bl.7600.dir1.7613]

Choose any additional Javascript function to load on your page.

LIGHTENING YOUR LOAD - Put Your Javascript in a Separate File

Whether you use Behaviors or dump in your own Javascript from a 3rd party source, the code involved can create a bit of overhead in your HTML page, creating a larger file then perhaps is necessary. As an alternative to help lighten your pages using either form of Javascript, you can put the Javascript code (held in the <head> tag) in a separate file that you reference within your page. This is very much like the difference between Embeded and External Style Sheets. This can also allow pages across your site to reference the same Script and much like with external style sheets, centralize any changes to this one file. Here's how:

1. Assuming you have added a Behavior or added some 3rd party Javascript to your page, go to "Show Code" view, locate the Javascript code in the <head> of your document and select and copy the Javascript code between the <script> tag (do not include that tag).

2. Create a new Javascript Document - File > New > Basic Page (select "Javascript" from the left panel). This will create a new ".js" docuement. Paste the code into this document and save it (give it some name, perhaps "script.js").

3. Go back to the original document and delete all of the Javascript code between the <script> tags.

4. Within the <script> tag you had left, add the following line to reference the separate .js document src="script.js", as in:

<script language="Javascript" type="text/javascript" src="script.js"></script>

5. Once this has been done, any Behaviors added to the page will have their <head> code thrown into the separate file. You can also manually add any additional scripts you'd like to this separate file (just remember not to add any more <script> tag references as the initial one added to this page is all you need).

JAVASCRIPT TUTORIALS

Webmonkey - Thau's Javascript Tutorial
http://hotwired.lycos.com/webmonkey/programming/javascript/tutorials/tutorial1.html

Javascript Kit
http://www.wsabstract.com

EXAMPLES

Browser Detection

Pop Up

SFSU Web Page Pop Up Link

Calculate Airport Distances

Airport Calculator
From:
To: