Session #8 Dynamic HTML March 22, 2004 B118 Web Programming Session #8 Dynamic HTML March 22, 2004
Tonight’s Agenda Administrative JavaScript wrap-up Document Object Model & JavaScript Quiz
Administrative Individual presentation Term project – FTP access
Administrative – Term Project FTP information: ftp://cypress.cob.sjsu.edu/b118w WS_FTP LE demo?
Midterm #2 Study Guide Understand: window.prompt (chapter 8) while loops (chapter 14) if statements (chapter 12) parseInt and parseFloat + math object (chapter 11) functions in general (chapter 9) onclick & buttons (chapter 8) text area (chapter 10) forms (chapter 10) how to define and apply internal style sheets (chapter 3)
Midterm #2 Study Guide (cont’d) Coding questions based on the following session note exercises: 5.11 6.8 7.18 8.11 7.26 8.12 8.16
JavaScript Object Hierarchy JavaScript objects contain Properties that are JavaScript variables or other objects Functions that are known as the object's methods.
JavaScript Objects and Methods objectName.propertyName myCar.make = “Pontiac" myCar.model = “TransAm" myCar.year = 2000; objectName.propertyName.methodName myCar.make.value would return the value of myCar.make (if value were defined as a valid method) Everything’s case sensitive
JavaScript Objects and Methods (cont’d) document.codelab.codefield.value Retrieves the codefield property from the textarea object contained in the codelab form object of the document object being displayed. <head> <script type='text/javascript' language='javascript'> function runCode(){ eval(document.codelab.codefield.value);} </script></head> <body> <form name="codelab"> <p><textarea name="codefield" rows=4 cols=60></textarea> <br><br><input type="button" onclick="runCode();" value="Run Code"></p> </form> </body>
National Parks Slideshow Responds to mouse events <img id="slideShow" onmouseover="mouseOver()" onmouseout="mouseOut()" Responds to onload event <body onload="changeImage()"> Changes slideShow source properties document.slideShow.src=park_image[current_image].src; Uses object array to store picture parameters function park_object(name,photo) { this.name = name this.photo = photo }
National Parks Slideshow Checks for an <img> object if (document.images) { //do this code only if there's //an image defined for the page!
Practice Exercises for Midterm #2 Exercise 5.11 (Session #3 Notes): create an XHTML document that displays a tic-tac-toe table with player X winning. Use <h2> to mark up both Xs and Os. Center the letters in each cell horizontally. Title the game using an <h1> tag. This title should span all three columns. Set the table border to one.
Practice Exercises for Midterm #2 Exercise 6.8 (Session #4 Notes): Write an XHTML document that shows the results of a color survey. The document should contain a form with radio buttons that allows users to vote for their favorite color. One of the colors should be selected as a default. The document should also contain a table showing various colors and the corresponding percentage of votes for each color. (Each row should be displayed in the color to which it is referring.) Use attributes to format width, border and cell spacing for the table. You don't need to make the Submit and Clear buttons do anything if they're clicked. Screen shot of one possible solution.
Practice Exercises for Midterm #2 This exercise and the others following it are from Session #6 Notes Exercise 7.18: write a script that inputs three integers from the user and displays the sum, average, product, smallest and largest of the numbers in an alert dialog. Screen shot of one possible solution. [Instructor's note: Figure 7.15 of the Deitel, Deitel text is an example program that can help you get started. View the program by clicking here.]
Practice Exercises for Midterm #2 Exercise 7.26: write a script that reads five integers and determines and outputs XHTML text that displays the largest integer and the smallest integer in the group. Use only IF statements to do the comparison tests. Screen shot of one possible solution.
Practice Exercises for Midterm #2 Exercise 8.11: drivers are concerned with the mileage obtained by their automobiles. One driver has kept track of several tankfuls of gasoline by recording the number of miles drive and the number of gallons used for each tankful. Develop a JavaScript program that will input the miles driven and gallons used (both as integers) for each tankful. The program should calculate and output XHTML text that displays the number of miles per gallon obtained for each tankful and prints the combined number of miles per gallon obtained for all tankfuls up to this point. Use prompt dialogs to obtain the data from the user. Screen shot of one possible solution.
Practice Exercises for Midterm #2 Exercise 8.12: develop a JavaScript program that will determine whether a department-store customer has exceeded the credit limit on a charge account. For each customer, the following facts are available: Account number Balance at the beginning of the month Total of all items charged by the customer this month Total of all credits applied to this customer's account this month Allowed credit limit The program should input each of these facts from prompt dialogs as integers, calculate the new balance (= beginning balance + charges - credits), display the new balance and determine whether the new balance exceeds the customer's credit limit. For customers whose credit limit is exceeded, the program should output XHTML text that displays the message "Credit limit exceeded." Screen shot of one possible solution.
Practice Exercises for Midterm #2 Exercise 8.16: Write a JavaScript program that uses looping to print the following table of values. Output the results in an XHTML table. N 10*N 100*N 1000*N 1 10 100 1000 2 20 200 2000 3 30 300 3000 4 40 400 4000 5 50 500 5000