1 / 16

Creating Web Documents

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

avari
Download Presentation

Creating Web Documents

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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=http://rachel.ns.purchase.edu/~Jeanine/origami"> <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="http://rachel.ns.purchase.edu/~Jeanine/origami"> Meyer Family Origami Site at http://rachel.ns.purchase.edu/~Jeanine/origami </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.

More Related