JavaScript Tutorial

JavaScript Introduction

JavaScript is a scripting language (simple programming language) that enables web designers to add interactivity and dynamically change parts of their site. It can reduce the number of requests and sends between clients and servers thus decreasing drag on bandwidth. Javascript can also be used to control the window, interact with forms, create interesting menus, control layers, and many other things.

JavaScript was originally designed by Netscape in 1995 under the name "LiveScript" to make the newly added support for Java Applets more accessible to non-Java programmers and webdesigners. Once plagued by security flaws and lack of support and debuggers, it has now become the most popular language on the web.(*Note Java and javascript are two totally different languages and should not be confused. Java is a compiled language on tier with C and C++, while javascript is an interpreted language, meaning it needs no compilation before execution.)

Other options to JavaScript could be some of the more high tech programming languages like Java, Perl, PHP, etc. If you do not own the server your site is hosted on, this can be difficult, however, because then you need the appropriate programs installed for the server to dish up content properly. Other scripting languages might be a possibility (VBScript, etc.) JavaScript reduces traffic to and from your server and can even protect your information. If you post your email or other contact information as JavaScript, instead of plain HTML, search bots have a much more difficult time collecting it, so they can spam you.

JavaScript is an ultra-powerful client-side tool that complements HTML programming. JavaScript is a simple, yet powerful language that doesn't require any special software or license. Therefore with a simple text editor and a browser one can greatly improve upon his/her website.

Things to know:

• Browser Compatibilities
• Prerequisites & Guidelines

Or enough with the chit-chat: LET'S GET STARTED

Prerequisites

Before getting started with this tutorial you should have a clear understanding of how to build web pages and have a good comprehension of HTML programming. Knowledge of basic programming (variables, conditionals, loops, operators, functions) is a plus.

Guidelines

• JavaScript is an Object Oriented Programming language.
• All open symbols must have a matching close symbol. (i.e. '(' with ')', '{' with '}' )
• JavaScript is case sensitive. Therefore 'variable' is not the same as 'Variable'. This applies to variables, objects, functions,etc.
• JavaScript ignores whitespace just like in HTML
• A code line can be broken up only with a text line using the backslash character (\)
• Ending a code line with a semicolon is completely optional!
• The backslash (\) is also the escape character to treat special symbols as just plain text.
• Similar to C++, comments are done with the // for a single line and /*......*/ for multiple lines

Browser Compatibilities Or Start the Tutorial

Browser Compatibility

JavaScript is compatible with all major browsers that are version 3.0 or higher. The Mozilla browsers and Opera are very good browsers and also have a 'JavaScript Console' to view errors and problems associated with JavaScripting. This can be very helpful when debugging. Your browser must also have JavaScript Enabled. See below on how to enable JavaScript for your browser. (*After making changes, the best bet is always to restart the application.)

Internet Explorer 5.x/6.x	Mozilla Firebird/Firefox
Open Internet Explorer Select Internet Options from the Tools Menu. Click on the Security Tab. Click the Custom Level button. Under the Scripting Category, enable Active Scripting (also allow paste and javapplets Click OK twice to close. Refresh	Open Browser Go to Tools Select Options Click Web Features from the sidebar Check to Enable JavaScripting Restart browser to save changes.
Netscape 7.X	Mozilla 1.X
Open Netscape. Select Preferences from the Edit menu. Click the arrow next to Advanced. Click Scripts & Plugins. Check Navigator beneath "Enable Javascript for". Click OK. Click Reload.	Open Mozilla. Select Preferences from the Edit menu. Click the arrow next to Advanced. Click Scripts & Plugins. Check Navigator beneath "Enable Javascript for". Click OK. Click Reload.
How To Enable Javascript Under Other Browsers Can Be Found Here.

Older browsers render script content as plain text. To deal with older browsers the content between the script tags needs to be commented out like so:

Prerequisites & Guidelines OR Start the Tutorial

Step 1 - Script Tag

The basis of JavaScript is a simple tag, similar to any other HTML tag. To put JavaScript into an HTML document, you use the "<script>" tag. Just like any other tag it needs to be ended with a matching tag ("</script>"). This tag tells the browser to render the code between these tags differently.

<html> <body> <script type="text/javascript"> document.write("Hello World!") </script> </body> </html>

Which produces: Hello World!

The script tag also has attributes like many other tags. Here are some of most popular:

type	%ContentType;	#REQUIRED -- content type of script language(i.e. "text/javascript" or "text/vbscript"
src	%URI;	#IMPLIED -- URI(location) for an external script
defer	(defer)	#IMPLIED -- UA may defer execution of script (boolean that tells user agent whether script is going to change any document content and therefore the user agent can continue parsing and rendering.

<script type="text/javascript" src="file.js" defer="defer"></script>

Next Step

Step 2 - Script Placement

The script tag can be placed in various locations to produce different results. This is key to getting the right effect on the page.
Scripts can be placed in:

The Head Section

Will execute when called or an event is triggered. Scripts load before the page is rendered.

<html>
<head>
<script type="text/javascript">
    some statements
</script>
</head>
<body>
</body>
</html>

The Body Section

Will execute when the page loads (when that section of the page is reached).

<html>
<head>
</head>
<body>
<script type="text/javascript">
    some statements
</script>
</body>
</html>

Placed in both Sections

Script sections can placed in both sections for desired effect.

<html>
<head>
<script type="text/javascript">
    some statements
</script>
</head>
<body>
<script type="text/javascript">
    some statements
</script>
</body>
</html>

External JavaScript.

A script section placed in either the head or body, links to an external javascript file.
Save a file with a ".js" file extension and include everything inside the script tags. For example:
document.write("Hello World, from an external javascript file!")

<html>
<head>
<script type="text/javascript" src="myscript.js"></script>
</head>
<body>
<script type="text/javascript" src="myscript2.js"></script>
</body>
</html>

Next Step

Step 3 - Writing to the Document

As you have seen in previous steps to print to the page, you use the document call.
From now on, assume script tags and included code are placed appropriately in correct syntax within the HTML

<script type="text/javascript"> document.write("Hello world!"); </script>

Which produces: Hello World!

To get more advanced, you can include HTML tags, which the browser will parse and render.

<script type="text/javascript"> document.write("<h3>Hello world!</h3>"); </script>

Which produces: Hello World!

The document.writeln("") function can be used similarly to document.write, except that it automatically adds a <br> at the end of the inner code.

Using the id attribute of HTML tags, one can reference specific parts of a document and change it.

<p id=para>This is a paragraph that is more than one line. It is a long paragraph that has a bunch of words for this javascript tutorial in writing to the world wide web. But we can change it. If you think it is impossible, load me and find out!</p> <script type="text/javascript"> document.getElementById('para').innerHTML="Hi world!"; </script>

Which produces: This is a paragraph that is more than one line. It is a long paragraph that has a bunch of words for this javascript tutorial in writing to the world wide web. But we can change it. If you think it is impossible, load me and find out!

Continuing with the use of the id attribute, JavaScript can be used for form field validation. This prevents unnecessary traffic between client and server, by making sure the information is correct on the user's end, before anything is sent. Each form element can be accessed with the id, and then the value object (i.e. name = getElementById("name").value). This is a major use of JavaScript in the real world.

Click for an example

Next Step

Step 4 - Window Commands

The first item we will begin with under the topic of window commands is alert boxes. Alert boxes are a very useful tool in alerting visitors to your site before they enter. Alert Boxes simply have an 'OK' button. Below you will find a few simple lines of javascript code which calls an alert box to open as the site comes up. This particular line was placed in the body of the html file.

<script type="text/javascript">     alert("You are about to enter a Low Security Site!") </script>

Example: Check Out The Alert Window!

Another useful piece of code allows us to make a Confirm Box. Confirm boxes can be made with the following lines of code. Confirm boxes usually ask the user a question, because they provide an 'OK' button and a 'Cancel' button.

<script type="text/javascript"> var name = confirm("Press a button") if (name == true) { document.write("You pressed OK") } else { document.write("You pressed Cancel") } </script>

Example: Check Out The Confirm Window!

The prompt window is a similar JavaScript window that can be used to get information from the user. This is one of the ways (along with forms) of how JavaScript can make a website more dynamic.

<script type="text/javascript"> var name = prompt("Please enter your name:") if (name != null && name != "") { document.write("<h3>Hello " + name + "</h3>") } </script>

Example: Check Out The Prompt Window!

The window object also has functionality to allow for resizing, scrolling, moving, etc. Using JavaScript's window.open("www.sitename.com") command, you can open another window( or more than one window) and control how the window looks. Here is the code for accomplishing this and a list of some sample files you can look at.

<script type="text/javascript"> function openwindow() { window.open("http://www.rpi.edu") } </script> AND WITHIN THE DOCUMENT: <input type=button value="Open Window" onclick="openwindow()">

Example: New Window!

<script type="text/javascript"> function openwindow() { window.open("http://www.rpi.edu/~laphac/webj") window.open("http://www.rpi.edu/~laphac/writetoweb") } </script> AND WITHIN THE DOCUMENT: <input type=button value="Open Window" onclick="openwindow()">

Example: Two Windows!

<script type="text/javascript"> function openwindow() { window.open("http://www.rpi.edu","my_new_window","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=yes, copyhistory=yes, width=500, height=300") } </script> AND WITHIN THE DOCUMENT: <input type=button value="Open Window" onclick="openwindow()">

Example: Cool Window!

Silly trick with window commands

Next Step

Step 5 - Extended DOM events

We have been discussing the Document Object Model(DOM) which is how JavaScript accesses the HTML document. Now we will see how the document object of the window can also access the title and status bar.

<script type="text/javascript"> document.write(document.title); </script>

Which produces:

Furthermore, you can use this to change the title:

<script type="text/javascript"> document.title = "TITLE IS CHANGED"; </script>

The same can be done with the status bar, as follows:

<script type="text/javascript"> window.status = "What JavaScript can do for you...."; </script>

Click to watch it work

Combined with functions and built in objects you can do some interesting things like A Status Bar Clock

Next Step

Step 6 - Navigator Object

Maybe you are curious about your users, but most often you have to program for multiple browsers, due to the non-standardization. The Navigator Object makes it easy to find out about the user's browser, platform, and more.

<script type="text/javascript"> document.write("BROWSER: ") document.write(navigator.appName + "<br>") document.write("BROWSERVERSION: ") document.write(navigator.appVersion + "<br>") document.write("CODE: ") document.write(navigator.appCodeName + "<br>") document.write("PLATFORM: ") document.write(navigator.platform + "<br>") document.write("REFERRER: ") document.write(document.referrer + "<br>") </script>

Next Step

Step 7 - Functions and Events

A very important part of JavaScript is the use of functions. Functions are usually located in scripts in the head portion. Functions allow you to have script that can do many things, but not have multiple script sections in your document. They can contain loops and variables like any C function and can similarly have arguments, and also return values.

<script type="text/javascript"> function math_print() { document.write("<table>"); for(i = 0; i <= 10; i++) { document.write("<tr><td>" + i + "</td><td>" + Math.pow(i,2) + "</td></tr>"); } document.write("</table>"); } math_print(); </script>

Events respond to various occurances so that you can make your page have certain reactions. Here is a list of a few events that can be manipulated for use:

• onLoad()
• onMouseMove()
• onMouseOver()
• onMouseOut()
• onHelp()
• onKeyDown()
• onKeyUp()
• onKeyPress()
• onUnLoad()

A rollover image is when a picture changes if it is moused-over and changes back when the mouse leaves. Below is the code DreamWeaver uses for doing this.

THIS SCRIPT IS LOCATED IN THE HEAD <script type="text/javascript"> function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script> THEN THIS GOES WHERE THE PICTURE IS GOING TO BE PLACED <a href="http://www.boolive.com/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('boo','','boo2.gif',1)"><img name="boo" border="0" src="boo.gif" alt="boo"></a>

Example:

Next Step

Advanced Topics / Conclusion

As was stated in the introduction, JavaScript is a very powerful tool that web programmers can use to improve their site. Unfortunately, we can't cover all the topics that JavaScript can handle. You may have noticed throughout the tutorial that only the content in this central pane changes. This is accomplished through the use of div tags, css, and javascript functions. See the source to see how it works.

In conclusion using the basic JavaScript related programming from steps 1 - 5 and the slightly more advanced subjects in step 6 & 7, simple webpage designers can accomplish a lot. Please check out the links in the sidebar for other JavaScript tutorials and sources. Contact us if you have any questions. GOOD LUCK!