Spring Term 2011
Washington College
Professor Suydam
BASICS OF COMPUTING
Week 12 Part 2
Creating the JS Dashboard
AGENDA – WEEK 12
•
Create/start remaining JavaScript web pages for HW5
12b-2
HW 5 “JavaScript Data Dashboard” Setup
In-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.
<html>
The page will then appear and
then have a link to a “favorite”
webpage.
<script type="text/javascript">
Copy and paste red text to
Source Code and save as
“memory2”
<body>
<font face="'Comic Sans MS'">
<!--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
Math.random() is JavaScript’s built-in function for generating
event whose two outcomes are “equally probable”; Computers
can generate pseudo-random numbers
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-mouseclick 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
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
12b-11
© Copyright 2026 Paperzz