1 / 11

Basics of Computing

Spring Term 2011 Washington College Professor Suydam. Basics of Computing. Week 12 Part 2 Creating the JS Dashboard. Create/start remaining JavaScript web pages for HW5. Agenda – Week 12. 12b- 2. HW 5 “JavaScript Data Dashboard” Setup In-class Exercise.

margaret-william
Télécharger la présentation

Basics of Computing

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. Spring Term 2011 Washington College Professor Suydam Basics of Computing Week 12 Part 2 Creating the JS Dashboard

  2. Create/start remaining JavaScript web pages for HW5 Agenda – Week 12 12b-2

  3. HW 5 “JavaScript Data Dashboard” SetupIn-class Exercise Download Starter File (UnZip after download) 12b-3

  4. Add a current date <script language="JavaScript">document.write('<center>' + (Date().toString()) + '</center>');</script> References the date object, which contains the current date and time in numeric form, and converts to a printable form Add a Date/Time (already included with downloaded page) 12b-4

  5. Three ways to get the result of a function call to print on the monitor 1) Before the page is created For example, with the alert() call (Fig. 20.1) 2) Interactively after the page is displayed For example, the Conversion application (Fig. 20.2) 3) While the page is being loaded For example, document.write() built-in function • Calling functions while the browser is creating the page allows us to customize pages on-the-fly Calling to Customize a Page 12b-5

  6. We want a page that will have prompt appear and ask user to enter name. The page will then appear and then have a link to a “favorite” webpage. Copy and paste red text to Source Code and save as “memory2” Forms and Functions – Prompt– “memory2” <html> <body> <font face="'Comic Sans MS'"> <script type="text/javascript"> <!--function Info() { Name1=prompt("What is your name Enter a name in the box "+ "so you can see the effect on the page","Fido"); } document.write("<h1>"+Name1+"\'s Special Page</h1>"); document.write("Welcome to my page "); document.write(Name1+". "); document.write("I have made everything just right for you."); document.write("<p>So, "+Name1+", click <a href='http://66.241.206.242/suydam/CSI100SS11/'>here</a> "+ "to go to my favorite website!<hr>"); //--> </script> </font> </body> </html> 12b-6

  7. Flipping Electronic Coin - A coin flip is an unpredictable event whose two outcomes are “equally probable”; Computers can generate pseudo-random numbers • Math.random()is JavaScript’s built-in function for generating random numbers -- Each time it is called, it generates a random number between 0 (inclusive) and 1 (exclusive) • A function to flip electronic coins: function coinFlip () { return Math.round(Math.random()); } • coinFlip() returns with equal probability a “0” or a “1” • Next improvement is to return the text Heads or Tails rather than numbers function flipText () { if (coinFlip ()==0) return 'Tails'; else return 'Heads'; } Flipping Electronic Coins – “memory3” • Add a button and a text window • <input type="button" value="Flip" onclick='document.form.ans.value=flipText()'> • <input type="text" name="ans" size="5"> 12b-7

  8. BMI is a standard measure of weight in proportion to height • We’ll find a publically available script and adapt to our purpose (left-mouse-click on image below: The Body Mass Index Computation – “memory4” 12b-8

  9. Copy html from page and insert in page. • Change form name from “wcbubba” to “form” and modify expressions accordingly using SharePoint Designer Find and Replace dialog. • Test/fix page to ensure it works • Check for Error is Status Bar • Add background, a centered table, and make fonts sans serif • Test again to ensure it is calculating correctly • Insert Credit/source statement The Body Mass Index Computation – “memory4” 12b-9

  10. Add web links -- to original source test “memory” pages Button links to practice pages 12b-10

  11. Sample Final Page – JavaScript Data Dashboard • Incorporate JavaScript components into “Dashboard” up to CoinFlip and BMI (we’ll do thosenext class) • See example below (yours may look different, but should contain the same components 12b-11

More Related