basics of computing
DESCRIPTION
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. - PowerPoint PPT PresentationTRANSCRIPT
BASICS OF COMPUTING
Spring Term 2011
Washington College
Professor Suydam
Week 12 Part 2Creating the JS Dashboard
AGENDA – WEEK 12
• Create/start remaining JavaScript web pages for HW5
12b-2
HW 5 “JavaScript Data Dashboard” SetupIn-class Exercise
Download Starter File (UnZip after download)12b-3
ADD A DATE/TIME (ALREADY INCLUDED WITH DOWNLOADED PAGE)
• 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
12b-4
CALLING TO CUSTOMIZE A PAGE
• 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
12b-5
FORMS AND FUNCTIONS – PROMPT– “MEMORY2”
• 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”
<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
FLIPPING ELECTRONIC COINS – “MEMORY3”
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';
}
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
THE BODY MASS INDEX COMPUTATION – “MEMORY4”
• 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:
12b-8
THE BODY MASS INDEX COMPUTATION – “MEMORY4”
• 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
12b-9
BUTTON LINKS TO PRACTICE PAGES
• Add web links -- to original source test “memory” pages
12b-10
Sample Final Page – JavaScript Data Dashboard
12b-11
Incorporate JavaScript components into “Dashboard” up to CoinFlip and BMI (we’ll do those next class)
See example below (yours may look different, but should contain the same components