Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
Guidelines and tips
Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
Community
Ask the community
Ask the community for help and clear up your study doubts
University Rankings
Discover the best universities in your country according to Docsity users
Free resources
Our save-the-student-ebooks!
Download our free guides on studying techniques, anxiety management strategies, and thesis advice from Docsity tutors
Introduction to Java Script Part IV - Lecture Notes | CGS 3175, Study notes of Computer Science
Material Type: Notes; Professor: Llewellyn; Class: Internet Applications; Subject: Computer General; University: University of Central Florida; Term: Fall 2007;
Typology: Study notes
Pre 2010
1 / 34
Related documents
Partial preview of the text
Download Introduction to Java Script Part IV - Lecture Notes | CGS 3175 and more Study notes Computer Science in PDF only on Docsity! CGS 3175: Internet Applications (JavaScript – Part 4) Page 1 © Mark Llewellyn CGS 3175: Internet Applications Fall 2007 Introduction To JavaScript – Part 4 School of Electrical Engineering and Computer Science University of Central Florida Instructor : Dr. Mark Llewellyn markl@cs.ucf.edu HEC 236, 407-823-2790 http://www.cs.ucf.edu/courses/cgs3175/fall2007 CGS 3175: Internet Applications (JavaScript – Part 4) Page 2 © Mark Llewellyn 26. Modify the example XHTML document on page 20 so that it uses a function to print Tiffany’s name. Things to Try Yourself CGS 3175: Internet Applications (JavaScript – Part 4) Page 5 © Mark Llewellyn More On JavaScript Functions <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> JavaScript functions with parameters </title> <script type="text/javascript"> function writeVisitorName(name) { document.write(" " + name + " "); } </script> </head> <body> <h1> Thanks for using JavaScript <img src="smiley1.jpg" alt="a smiley face" /> </h1> <h2> <script type="text/javascript"> /* <![CDATA[ */ var userName; userName = prompt("Hi! Please tell me your name"); document.write("<br /> Welcome "); writeVisitorName(userName); document.write(" !!<br /><br /> <br />"); document.write("Welcome to our Web site...We hope you enjoy your stay "); writeVisitorName(userName); document.write("!<br />"); /* ]]> */ </script> </h2> </body> </html> CGS 3175: Internet Applications (JavaScript – Part 4) Page 6 © Mark Llewellyn More On JavaScript Functions CGS 3175: Internet Applications (JavaScript – Part 4) Page 7 © Mark Llewellyn More On JavaScript Functions CGS 3175: Internet Applications (JavaScript – Part 4) Page 10 © Mark Llewellyn Creating A Slide Show Using JavaScript /* The text captions are stored in another array.*/ var myCaptions = new Array(); myCaptions[1] = "Team USA - Pan Am Gold Medalists."; myCaptions[2] = "Jennie Finch - Team USA pitcher."; myCaptions[3] = "Jessica Mendosa - Team USA - right fielder."; myCaptions[4] = "Cat Osterman - Team USA pitcher."; myCaptions[5] = "Caitlin Lowe - Team USA and Arizona Wildcat."; myCaptions[6] = "Taryne Mowatt - University of Arizona Wildcats - pitcher."; myCaptions[6] += " ESPN Female Athlete of the Year 2007."; myCaptions[7] = "Lovie Jung - Team USA - Sliding int 2nd base during 2007 World Cup."; myCaptions[8] = "Three great pitchers: Jennie Finch, Alica Hollowell, and Cat Osterman."; var slidenumber = 1; var totalslides = mySlides.length - 1; function showSlide(direction){ if (direction == "next"){ (slidenumber == totalslides) ? slidenumber = 1 : slidenumber++; }else{ (slidenumber == 1) ? slidenumber = totalslides : slidenumber--; } if (document.images){ document.slideframe.src = mySlides[slidenumber].src; document.slidecontrols.caption.value = myCaptions[slidenumber]; document.slidecontrols.currentslide.value = slidenumber; } } </script> </head> CGS 3175: Internet Applications (JavaScript – Part 4) Page 11 © Mark Llewellyn Creating A Slide Show Using JavaScript <body style="background-color:white"> <div> <h2>Softball Images 2006-2007</h2> <img src="Pan Am Gold.jpg" id="slideframe" width="550" height="350" alt="Slide show images appear here." /> <!-- NOTE: This XHTML document will not validate under Strict DTD because the name attribute of the form element has been deprecated, however, current browser support suggests to ignore this validation error as the form may not be scriptable under some browsers without a name attribute. --> <form id="slidecontrols" name="slidecontrols" action="#" method = "post"> <p><textarea id="caption" rows="2" cols="50">Our slide show begins with Team USA - Pan Am Gold Medalists</textarea><br /> <br /> <input type="button" id="previous" name="previous" value="Previous Slide" onclick="showSlide('previous');" /> <input type="button" id="next" name="next" value="Next Slide" onclick="showSlide('next');" /> <br /> <br /> Slide Number: <input type="text" value="1" id="currentslide" name="currentslide" size="4" /></p> </form> </div> </body> </html> CGS 3175: Internet Applications (JavaScript – Part 4) Page 12 © Mark Llewellyn CGS 3175: Internet Applications (JavaScript – Part 4) Page 15 © Mark Llewellyn • The browser loads the <head> and stores eight new image objects in an array called mySlides beginning with array element 1 (we are not using array element 0, but it is there). The src property of each image is then filled with a jpeg image file. After this step all of the images are preloaded onto the visitors computer. • The next thing that happens is all of the image captions are loaded into an array called myCaptions, again beginning with array position 1 and corresponding to the correct images in the mySlides array. Notice the use of the add-by-value operator (+=) to store the long caption for the sixth image. • A global variable, slidenumber is created to hold the number of the current slide. A second global variable, totalslides, is created to hold the number of slides in the presentation. Since array element 0 is not used, we need to subtract 1 from the length of the array to determine the number of slides in the presentation. • The function showSlide(direction) is stored in memory and will perform its function when called later. How The Slide Show Script Works CGS 3175: Internet Applications (JavaScript – Part 4) Page 16 © Mark Llewellyn • The <body> fo the document includes an image called slideframe and a from called slidecontrols. Wihtin the form is a textarea called caption set to display 2 rows and 50 characters (columns) of text. An initial text string informs the visitor that the slide show begins with a picture of the 2007 Pan Am gold medal team from the USA. • The form includes two buttons, the first button calls the showSlide() function and sends it the value previous. The second button calls the showSlide() function and sends it the value next. • The showSlide() function in the <head> takes the value of the parameter it receives (either previous or next) and places it in a local (temporary) variable named direction. If direction has a value of next, the function looks to see whether the current slide number (stored in the global variable slidenumber) is the last slide in the show. If it is, slidenumber is reset to 1, Otherwise, slidenumber is incremented by 1. If direction is previous, the function checks to see if the current slide number is the first slide in the show. If it is, slidenumber is set to the total number of slides. Otherwise, slidenumber is decremented by 1. How The Slide Show Script Works if (direction == "next"){ (slidenumber == totalslides) ? slidenumber = 1 : slidenumber++; }else{ (slidenumber == 1) ? slidenumber = totalslides : slidenumber--; } CGS 3175: Internet Applications (JavaScript – Part 4) Page 17 © Mark Llewellyn • Finally, the showSlide() function checks to make sure that the browser supports the images array. It then uses the current value of slidenumber to determine which element of the mySlides array and corresponding element of the myCaptions array to display. The slidenumber is also displayed in the text field called currentslide so that the visitor will see the number of the current slide. • This slide show technique is useful for building pages where you want the visitor to proceed through a series of images by clicking buttons. Corporate presentations, travel logs, instructional demonstrations are just some of the possible applications. How The Slide Show Script Works CGS 3175: Internet Applications (JavaScript – Part 4) Page 20 © Mark Llewellyn XHTML Table – Example 1 <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Table Example in XHTML</title> </head> <body> <div style="align:center"><h1>Our First Table</h1></div> <!-- Begin Table --> <table border="1"> <caption>A Simple Table of Columns and Rows</caption> <!-- Begin First Row --> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <!-- End First Row --> <!-- Begin Second Row --> <tr> <td>Column 1 <br /> Row 2</td> <td>Column 2 <br /> Row 2</td> <td>Column 3 <br /> Row 2</td> </tr> <!-- End Second Row --> <!-- Begin Third Row --> <tr> <td>Column 1 <br /> Row 3</td> <td>Column 2 <br /> Row 3</td> <td>Column 3 <br /> Row 3</td> </tr> <!-- End Third Row --> </table> <!-- End Table --> </body> </html> CGS 3175: Internet Applications (JavaScript – Part 4) Page 21 © Mark Llewellyn • Labeling table sections with <thead>, <tbody>, and <tfoot>. – The <thead>, <tbody>, and <tfoot> can be used to define logical sections of a table. These elements are used to group the various rows in a table into a header (<thead>), body (<tbody>), and footer (<tfoot>) section. While not heavily used in practice today these elements will become more important as new user agents become more dependent on document structure, so you want to be sure to use them when necessary. – These elements are optional, but when used must appear in the following order: <thead>, <tfoot>, <tbody>, The <tfoot> element must appear after the ending tag for the </thead> and before the open tag for the <tbody> element, even though its content will be displayed at the bottom of the table in a browser. • The various table elements have a number of attributes that can be used to customize the look and layout of tables, rows, and cells. As with other elements, XHTML Strict does not allow all of the formatting attributes that Transitional and Frameset allow. The table on the next page illustrates the most common attributes that can be used with the <table>, <tr> and <td> elements. Formatting Tables CGS 3175: Internet Applications (JavaScript – Part 4) Page 22 © Mark Llewellyn <table> Element Attributes Name Description and Values summary Text description of the table. Useful for nonvisual browsers. width Sets the width of the table. Values: Percentage or pixels border Sets the width of the border around the table. Values: A value of 0 makes the border invisible. An integer value greater than 0 will result in a border of that number of pixels. cellpadding Sets the amount of space between the border of the table cell and the data contained in the cell. Values: Percentage or pixels cellspacing Sets the amount of space between cells. Values: Percentage or pixels frame Defines which sides of the table will be displayed. Values: above, below, border, box, lhs, bsides, rhs, vsides, void rules Defines which rule lines will be displayed. Values: all, cols, groups, none, rows CGS 3175: Internet Applications (JavaScript – Part 4) Page 25 © Mark Llewellyn • For our second table example, we’ll have content that spans multiple rows and columns. • The third table example illustrates a nested table (a table within a table). • As with any skill, the best way to master the skill is to practice, practice, practice, so I encourage you to try an develop some additional tables on your own. XHTML Table – Examples CGS 3175: Internet Applications (JavaScript – Part 4) Page 26 © Mark Llewellyn <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Spanning Multiple Table Rows and Columns with XHTML Tables</title> <style type="text/css"> .teal_bg { background-color: #99FFFF } .yellow_bg { background-color: #FFFF00 } caption { font-weight: bold; font-size: 14pt; text-align: center; color: #000099; } </style> </head> <body> <!-- Begin Table --> <table border="1" cellpadding="5" class="teal_bg"> <caption>Saltwater Aquarium Invoice</caption> <thead> <!-- Begin Header Row --> <tr> <th rowspan="2">Item</th> <th colspan="2">Purchase Details</th> <th rowspan="2">Total Price</th> </tr> <tr> <th>Price</th> <th>Quantity</th> XHTML Table – Example 2 CGS 3175: Internet Applications (JavaScript – Part 4) Page 27 © Mark Llewellyn </tr> </thead> <tfoot> <tr align="center"> <td colspan="4"><small>Thank you for shopping with us.</small></td> </tr> <!-- End First Row --> </tfoot> <tbody> <!-- Begin First Item --> <tr> <th>Blue Angel Fish</th> <td align="center">$19.95</td> <td align="center">2</td> <td align="center">$39.90</td> </tr> <!-- End First Item --> <!-- Begin Second Item --> <tr> <th>Sailfin Tang Fish</th> <td align="center">$34.95</td> <td align="center">1</td> <td align="center">$34.95</td> </tr> <!-- End Second Item --> <!-- Begin Third Item --> <tr> <th>Clown Fish</th> <td align="center">$3.95</td> <td align="center">4</td> <td align="center">$15.80</td> </tr> CGS 3175: Internet Applications (JavaScript – Part 4) Page 30 © Mark Llewellyn </tr> <tr> <td>Miami</td> <td>FL</td> <td>32769</td> </tr> </table> <!-- End Inner Table --> </td> <td>(321) 555-1212</td> </tr> <!-- End First Row --> <!-- Begin Second Row --> <tr> <td>Carrie Underwood</td> <td> <!-- Begin Inner Table --> <table border="1" class="inner"> <tr> <td colspan="3">456 Lighthouse Way</td> </tr> <tr> <td>Nashville</td> <td>TN</td> <td>02901</td> </tr> </table> <!-- End Inner Table --> </td> <td>(415) 555-1212</td> </tr> <!-- End Second Row --> </table></body></html> CGS 3175: Internet Applications (JavaScript – Part 4) Page 31 © Mark Llewellyn 27. Modify the JavaScript example on page 5 that uses a function that returns a value and change the function (and the XHTML document) to convert Celsius temperatures to Fahrenheit temperatures. The conversion you will need is ((9/5) * temp)+32. Things to Try Yourself CGS 3175: Internet Applications (JavaScript – Part 4) Page 32 © Mark Llewellyn Solution To Practice Problem #27 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> JavaScript function that returns a value </title> <script type="text/javascript"> function fahrenheitToCelsius(tempInF) { return (Math.round((5/9)*(tempInF-32))); } </script> </head> <body> <h1><span style="color:blue"> Welcome to the CGS 3175 Temperature Converter</span> <img src="thermometer.wmf" alt="a thermometer" width="200px" height="200px" display="inline" float="right" /> </h1> <h2> <script type="text/javascript"> /* <![CDATA[ */ var temperature; temperature = prompt("Please enter the temperature in degrees Fahrenheit."); document.write("<br /> <br />"); document.write("A temperature of " + temperature + " degrees F is equivalent to "); document.write(fahrenheitToCelsius(temperature)); document.write(" degrees C.<br />"); /* ]]> */ </script> </h2> </body> </html> Clip art file available on the Web.
Copyright © 2024 Ladybird Srl - Via Leonardo da Vinci 16, 10126, Torino, Italy - VAT 10816460017 - All rights reserved