 |
Lesson
Plan |
March 8, 2000
Details
|
Title
|
Introduction
to Programming with JavaScript
(data types, operators, and functions) |
|
Time Allotment
|
6 hrs
|
Reading / References
Tutorial
7 - Programming with JavaScript
- New Perspectives Manual (NP)
|
Objectives
-
Learn the features of JavaScript
-
Send output to a Web page
-
Work with variables and data
-
Work with expressions and operators
-
Create a JavaScript function
Coursework / Lab Work
Homework
Demo
-
Intro (client vs server) - NP 7.2-7.4
-
SCRIPT tag - NP 7.6
-
Hiding scripts from old browsers - NP 7.7
-
Sending output to a web page -
document.write("text") - NP 7.8 - 7.11
-
Variables? (assignment, data types, displaying,
restrictions, declarations) - NP 7.11 - 7.12
-
Dates - declarations - 7.13
-
Extracting date information - NP 7.14 - 7.17
-
Arithmetic operators - NP 7.18 - 7.20
-
Logical & comparison operators - NP 7.20 - 7.21
-
Assignment operators - NP 7.21
-
Functions - NP 7.22 - 7.26
Exercises
EXERCISE
1:
WEIGHT
CONVERTER
Write a two conversion functions:
-
LbToKg - This function should accept a weight in
pounds, and return Kg
-
KgToLb - This function should accept a weight in Kg,
and return pounds.
(remember the conversion is 2.2 pounds per kilo)
Use these functions in a script.
-
Create two variables: one for lbs, and one for kgs.
-
Start by assigning the weight of 45 to the kgs.
-
Convert the kgs to lbs using your function and assign
to the lbs variable.
-
Display both to screen
Then
-
Assign the weight of 230 to the lbs.
-
Convert the lbs to kgs and assign to the kgs
variable.
-
Display both to screen.
EXERCISE
2:
LENGTH
CONVERTER
Repeat
the steps (in exercise #1) in a program that will convert inches to
centimeters and vice versa. The conversion factor is 2.54 centimeters per
inch.
EXERCISE
3:
CURRENCY
CONVERTER
Repeat the steps (in exercise #1) in a program that will
convert CDN to USD and vice versa. Make up an exchange rate and assign it to a
variable named ExchRate. Use the Exch rate to calculate in either direction.
The functions differ from the previous two exercises in they should accept two
parameters: the value being converted and the exchange rate.
EXERCISE
4:
AREA CALCULATOR
Write a function that will calculate the area of a
rectangular shape. Your function should accept the length and width, returning
the area. Remember that area is calculated by multiplying the width and the
length.
EXERCISE
5:
DATE DISPLAY
Write a function that will accept any date and display it
on the screen in the format:
Today is Month/Day/Year
-
You will need to make use of the functions to extract
months, days, and years to variables.
-
Test your function by passing in the current date.
-
Test your function by passing in a date defined as
February 14, 1999.
Solutions
EXERCISE
1:
WEIGHT
CONVERTER
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from older browsers
function
LbToKg(pounds)
{
var kg = pounds / 2.2;
return kg;
}
function
KgToLb(kg)
{
var pounds = kg * 2.2;
return pounds;
}
// End Hide -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from older browsers
var kgs =
45;
var pounds =
KgToLb(kgs);
document.write(kgs
+ " kilograms = " + pounds + " pounds.<BR>");
pounds =
230;
kgs =
LbToKg(pounds);
document.write(pounds
+ " pounds = " + kgs + " kolograms.<BR>");
// End Hide -->
</SCRIPT>
</BODY>
</HTML>
EXERCISE
2:
LENGTH
CONVERTER
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from older browsers
function
CMToInch(CM)
{
var Inch = CM / 2.54;
return Inch;
}
function
InchToCM(Inch)
{
var CM = Inch * 2.54;
return CM;
}
// End Hide -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from older browsers
var CM =
100;
var Inches =
CMToInch(CM);
document.write(CM
+ " centimeters = " + Inches + " inches.<BR>");
Inches =
100;
CM =
InchToCM(Inches);
document.write(Inches
+ " inches = " + CM + " centimeters.<BR>");
// End Hide -->
</SCRIPT>
</BODY>
</HTML>
EXERCISE
3:
CURRENCY
CONVERTER
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from older browsers
function
CanToUSD(CDN, ExchRate)
{
var USD = CDN / ExchRate;
return USD;
}
function
USDToCan(USD, ExchRate)
{
var CDN = USD * ExchRate;
return CDN;
}
// End Hide -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from older browsers
var ExchRate
= 1.5;
var CDN =
100;
var USD =
CanToUSD(CDN, ExchRate);
document.write(CDN
+ " CDN = " + USD + " USD.<BR>");
USD = 100;
CDN =
USDToCan(USD, ExchRate);
document.write(USD
+ " USD = " + CDN + " CDN.<BR>");
// End Hide -->
</SCRIPT>
</BODY>
</HTML>
EXERCISE
4:
AREA CALCULATOR
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from older browsers
function
CalcArea(Length, Width)
{
var Area = Length * Width;
return Area;
}
// End Hide -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from older browsers
var Length =
5;
var Width =
7;
var Area =
CalcArea(Length, Width);
document.write("The
width is " + Width + ".<BR>");
document.write("The
length is " + Length + ".<BR>");
document.write("The
area is " + Area + ".<BR>");
// End Hide -->
</SCRIPT>
</BODY>
</HTML>
EXERCISE
5:
DATE DISPLAY
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from older browsers
function
DisplayDate(date)
{
var Month = date.getMonth() + 1;
var Day = date.getDate();
var Year = date.getYear();
document.write(Month + "/" + Day + "/" + Year +
"<BR>");
}
// End Hide -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from older browsers
var Today =
new Date();
var
Valentines = new Date("February, 14, 1999");
DisplayDate(Today);
DisplayDate(Valentines);
// End Hide -->
</SCRIPT>
</BODY>
</HTML>