- Create a lab8 folder both locally and at your web server.
- Type in the following HTML and JavaScript code. Do not cut and paste. Before you type the code in save the file as greet.html.
<![CDATA[
<html>
<head>
<title> Greetings</title>
</head>
<body>
<h3>First JavaScript Example</h3>
<script type="text/javascript">
var name = prompt("Enter your name", "");
document.write("Greetings " + name + ", welcome to my page.");
</script>
<p>Here you will find all sorts of far out and groovy stuff I am into.</p>
</body>
</html>
]]>
- Modify greet.html so the JavaScript output is broken across two lines. For example if I enter tony into the dialog box the output would be.
Greetings tony,
welcome to my page.
To do this you will insert a
<![CDATA[<br> or <p>]]>
tag inside the string before welcome.
- Type in the following HTML and JavaScript code. Do not cut and paste. Before you type the code in save the file as band.html. The purpose of this exercise is to show you a variable can be used and assigned multiple times. However this program has a bug. First type in the program and run it. Then correct the bug.
<![CDATA[
<html>
<head>
<title>Band</title>
</head>
<body>
<script type="text/javascript">
var band = prompt("What is your favorite band", "");
band = prompt("What is your least favorite band", "");
document.write("Your favorite ban is " + band + "<br />" );
document.write("Your least favorite band is " + band);
</script>
</body>
</html>
]]>
- Type in the javascript code. Do not cut and paste.
<![CDATA[
<html>
<head>
<title> Javascript to convert Fahrenheit to Celsius</title>
</head>
<body style="background:orange">
<h2 style="color:maroon;font-family:verdana">Fahrenheit to Celsius Converter</h2>
<script type="text/javascript">
var fahrenheit, celsius;
fahrenheit = prompt("Enter temperature in Fahrenheit", "");
celsius = (5/9) * (fahrenheit - 32);
document.write(fahrenheit + "F converted to Celsius is " + celsius);
</script>
</body>
</html>
]]>
- Study the above code you typed in. Write a complete javascript program to convert a temperature from Celsius to Fahrenheit. Do not modify the one above, start from scratch. The formula is
fahrenheit = (9 * celsius) / 5 + 32
- Write a complete Javascript program to compute the volume and surface area of a sphere using the following formulas.
You have to prompt the user for the radius from the user.
volume = (4.0/3.0) * 3.14 * radius * radius * radius
Where (radius)^3 is radius raised to the 3rd power.
surfaceArea = 4 * 3.14 * radius * radius
- Follow these instructions.
- Make sure you have a directory on the c drive named it130.
- Create a subdirectory of it130 called lab8.
- Create a subdirectory of 8 called images.
- Download these two pictures and save them to the images directory you created above.
http://condor.depaul.edu/~alarrain/it130/js/images/cub1.jpg
http://condor.depaul.edu/~alarrain/it130/js/images/tiger1.jpg
- Type in HTML and javascript code below.
- Display the code in your browser and move the mouse in and out of the picture.
<![CDATA[
<html>
<!-- Demonstrates Mouse Events Over and Out
Antony Larrain, it130 - class demo -->
<head>
<title>Picture change example using onMouseOver and onMouseOut events.</title>
<style>
body {
background:bisque;
margin: 2% 3%;
}
h2 {
color:darkred;
letter-spacing:6px;
font-family:verdana;
}
p {
font-size:1.1em;
color:midnightblue;
}
</style>
</head>
<body>
<h2> Animals </h2>
<p>Move the mouse over and out of the image.</p>
<img name="animal" src="images/cub1.jpg"
onMouseOver="document.animal.src='images/tiger1.jpg';"
onMouseOut ="document.animal.src='images/cub1.jpg';" />
</body>
</html>
]]>
