Creating Web Documents catch-up JavaScript slide show tools redirection

Catch-up good and bad uses of multimedia posting –better late than never –Two viewpoints: evaluate in terms of what is required AND if you had all the plugins, large screen, fast connection, how would it be tool use your 2 projects linked from class site

JavaScript concepts: functions Also known as user defined function as opposed to something built into JavaScript Typically defined in the head section function functionname (parameter list) { …. } called functionname(parameters) as href or event (such as onMouseOver="…")

JavaScript concept: variables variables hold values—names associated with values. The values can change. Recall var rawDate = Date(); var mon = rawDate.substr(4,3); variables can hold strings of characters and numbers var qty = 5; var cost = 10.50; You can set a variable with an expression var total = qty * cost;

JavaScript concepts: expression Arithmetic: total = total * 1.08; This sets the value of the variable total to the result of multiplying the original value total times 1.08 shorthand: –count++ means to add one to count (make the new value of count, the old value plus 1). You can also use ++count. The first returns the original value, the second returns the incremented value. Combine strings: wholename = "Prof. " + fname + " " + lname; If fname="Peter" and lname="Ohring", this would produce "Prof. Peter Ohring". Note that my expression made sure there was a space between the first and last name.

JavaScript concepts: IF IF statement is used to check a condition and possibly execute [section of] code. Say you want to calculate a tip and also always leave at least a dollar: tip =.15 * total; if (tip < 1) { tip = 1; } (tip<1) is the condition. The code in the brackets is only done if the condition is true.

JavaScript concepts: arrays Array are variables that are sets of things slides = new Array( 'bird.gif', 'frog.gif', 'heart.gif' ); The individual components of an array are cited using an index slides[0] is 'bird.gif', slides[1] is 'frog.gif', slides[2] is 'heart.gif' The indices start at zero. slides.length gives the number of elements in the array.

JavaScript concept: time interval You can set up an event that will happen every interval tid = setInterval("change()", 800); –Every 800 milliseconds (slightly less than one second=1000 milliseconds), change() will be called. change is a function you will write. The function has no parameters. window.clearInterval(tid); –The time interval numbered tid is stopped.

Slide show example In the head section, define an array with the names of 3 (could be any number) of image files and 3 functions: –change() –startss() –stopss() and two variables –ns, which will hold the number of distinct images –tid, which will hold the timing interval

Slide show <!-- slides = new Array('bird.gif', 'frog.gif', 'heart.gif'); var sn = 0; var ns = slides.length; var tid; function change() { document.pic1.src = slides[sn]; if (ns<=++sn) { sn = 0; } function startss() { tid=setInterval('change()',800); } function stopss() { window.clearInterval(tid); } //-->

Start show Stop Show

Alternatives In place of: Start show you can set the onClick event. Start show You need to include return false, or else the whole page may be refreshed.

Tools Pros and cons? Why we use NotePad in class? –to get you to learn the tags –to make things less complicated –to keep you from doing more complicated things –to prevent problems produced by the tools, such as absolute names for files and extra tags.

What do you do… when you move a site to new location? For example, we decided (at long last) to move the Meyer family origami site to a Purchase server from the Pace server links all worked because they were relative links we changed addresses on the first page used 'redirection' command

Origami Paper This site has been moved to Meyer Family Origami Site at You should be redirected to the new site. If not, click on the link or enter the address into the location field on the browser. Thank you

Homework catch up on postings Define your project III. Read in the textbook on JavaScript and Forms. Project III must have –at least one use of JavaScript –at least one use of Forms –image map AND animation –frames or tables (if you didn't use one before, do it now) –styles – which we will get to later.