Client Side Programming with JavaScript Why use client side programming? Web sides built on CGI programs can rapidly become overly complicated to maintain, and there is also the problem of response time. One example is the dynamic graphing. It is nearly impossible to perform with consistency because a GIF file must be created and move from the server to client for each version of the graph. Why JavaScript is introduced? JavaScript, just as other script language such as Tcl/Tk, used inside Web Browser is really intended to solve specific types of problem, primarily the creation of richer and more interactive graphical user interfaces (GUIs).

With JavaScript you can: –Create swapping images on your Webpage. –Do calculations without having to resort to a CGI script. –Let the form elements to influence each other on the fly. Outcomes: –How to integrate the JavaScript code into your HTML document. –Basic Syntax: Variables, if-then branching –How to make your Web pages react to users' actions using link events to do a basic image swap.

First Example (js1.html) JavaScript Example // put up an alert box, to show how they work alert("Soon, I will rebuild my browser!");

Key things to notice to this example JavaScript usually goes between the tag and the tag. Like HTML, JavaScript is just text that can be typed into a word processor. The beginning of a bit of JavaScript begins with Right now, you don't really have to put the language="JavaScript" element in there because JavaScript is the default script language for all browsers. However, this could change, so it's a good idea to include the language element. Everything between // and the end of a line is a comment and will be ignored. alert("Soon, I will rebuild my browser!"); calls up a simple dialog box with the words JavaScripts end with the tag.

Hiding JavaScript blah blah blah <!-- hide this stuff from other browsers YOUR SCRIPT HERE // end the hiding comment --> etc., etc., etc.

Example using variables (js2.html) JavaScript Variable Example <!-- hide me // load up some variables var secs_per_min = 60; var mins_per_hour = 60; var hours_per_day = 24; var days_per_year = 365; // do some calculations var secs_per_day = secs_per_min * mins_per_hour * hours_per_day; var secs_per_year = secs_per_day * days_per_year; // end hiding -->

Things should notice in header part The first time you use a variable, you should declare it with the word “var”. Variable names are case-sensitive. You can give a variable a value when you declare it, or you can wait until later Statements end with a semicolon.

Example using variables (js2.html)(Continued) How does the monkey stay so fit? <!-- hide me // here's how to use JavaScript to write out HTML document.writeln(" The monkey dances "); document.writeln(secs_per_year); document.writeln(" seconds per year. "); // end hiding -->

Things about the body part of this example document.writeln() (as in "write line") Writes whatever's between the parentheses to a Web page. Characters inside quotes are printed; characters not inside quotes are considered variables. What JavaScript goes in the head of a page and what goes in the body? Usually it doesn't matter, but it's a good idea to put most of your JavaScript in the head of a page. This is because the head gets read before the body, so any variables that appear in the body (like secs_per_min) will already have been declared in the head by the time they're needed. If for some reason secs_per_min were defined after JavaScript tried to do the document.writeln(secs_per_min) command, you'd get a JavaScript error.

If-then Branching What "if-then" statements do is allow your program to behave very differently depending on what a user inputs. Here's the basic form of an if-then statement: if (some condition is true) { do something; do something; do something; } The important part of this structure are: –It starts with the word "if" (if must be lowercase). –There is a condition in parentheses that is either true or false. –There is a set of statements that should be executed if the condition is true. These statements go between curly brackets.

Example for if – then Branching var monkey_love = prompt("Do you love the monkey?","Type yes or no"); if (monkey_love == "yes") { alert("Welcome! I'm so glad you came! Please, read on!"); }

Link Events Whenever a user clicks on a link, or moves her cursor over one, JavaScript is sent a link event. One link event is called onClick, and it gets sent whenever someone clicks on a link. Another link event is called onMouseOver. This one gets sent when someone moves the cursor over the link. Please notice, there are no tags. That's because anything that appears in the quotes of an onClick or an onMouseOver is automatically interpreted as JavaScript. note that there's a # sign between the quotes in the href="#". This makes it so the browser doesn't try to load another Web page when you click on the link. If you put in the href instead of the #, the browser would run the JavaScript in the onClick and the load up this here SBU site.

Example for link events Link Event Example Link Events Click on me! Mouse over me!

Image Swapping Image Swapping Example Image Swapping #This is just like a standard tag except this one has been given a # name: the_image. #This is where the image swap happens change change