creating web documents n.
Skip this Video
Loading SlideShow in 5 Seconds..
Creating Web Documents PowerPoint Presentation
Download Presentation
Creating Web Documents

Creating Web Documents

353 Views Download Presentation
Download Presentation

Creating Web Documents

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Creating Web Documents catch-up JavaScript slide show tools redirection

  2. 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

  3. 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="…")

  4. 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;

  5. 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.

  6. 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.

  7. 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.

  8. 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.

  9. 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

  10. <html> <head><title>Slide show </title> <SCRIPT LANGUAGE="JavaScript"> <!-- 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); } //--></script> </head>

  11. <body> <img src='bird.gif' name='pic1' id='pic1'> <br> <a href="javascript:startss()">Start show </a> &nbsp; &nbsp; <a href="javascript:stopss()">Stop Show </a> </body> </html>

  12. Alternatives In place of: <a href="javascript:startss()">Start show </a> you can set the onClick event. <a href="" onClick="startss(); return false;">Start show </a> You need to include return false, or else the whole page may be refreshed.

  13. 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.

  14. 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

  15. <html> <head> <title>Origami Paper </title> <META HTTP-EQUIV="refresh" CONTENT="5; url="> <meta name="description" content="General strategies and specific models for using origami to teach mathematics and communication skills> <meta name="keywords" content="origami, mathematics education, constructivism, geometry"> </head> <body> <h3> This site has been moved to <br> <a href=""> Meyer Family Origami Site at </a> <br><br> 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. <br> Thank you </h3> </body> </html>

  16. 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.