Lab#6
JavaScript Programming Lab Overview
Learn how to write Output Statements, use Message Boxes and Variables
Gain an understanding of Conditional Statements and Loops
Complete Part 1, 2, 3, 4 and 5 (Write All Programs and Answer All Questions)
Lab Due Date - November 2, 2018 11:59 PM
1
CS 1150 - Lab 6 – JavaScript Programming Lab
How to Submit JavaScript Programming Lab
Use Pilot Page for this Weeks’s Submission
Go to Pilot Course Page and Use Dropbox Submission Link to upload your files
I should be able to run your programs.
2
CS 1150 - Lab 6 – JavaScript Programming Lab
What is JavaScript
3
Client-side Scripting Language
Used to create Dynamic Web Pages
Three ways to write JavaScript Code
In HTML Header, within <SCRIPT></SCRIPT> Tags
In HTML Body, within <SCRIPT></SCRIPT> Tags
In Separate .JS file, within <SCRIPT></SCRIPT> Tags
CS 1150 - Lab 6 – JavaScript Programming Lab
Writing Your First JavaScript Code
4
<html>
<head>
<script type="text/javascript">
document.write("Hello World");
alert("Hello World");
</script>
</head>
<body>
</body>
</html>
HTML Code
HTML Header Code
SCRIPT Tags
HTML Body
Writes in to HTML File
Writes in to a Message Box
CS 1150 - Lab 6 – JavaScript Programming Lab
Helper HTML Code
5
Use a new copy of this whenever you need it
<html>
<head>
<script language="javaScript">
<!-- write JavaScript code here -->
</script>
</head>
<body>
</body>
</html>
CS 1150 - Lab 6 – JavaScript Programming Lab
Part 2 Help
6
Input you read through prompt boxes are Strings
To perform arithmetic operations on numbers you read through prompt boxes, you need to first convert them to proper data types.
var x = 1 – Define variable x and sets its value to 1
x = parseInt(x) – Converts the value stored in variable x to an Integer and stores it in variable x.
CS 1150 - Lab 6 – JavaScript Programming Lab
Part 3 Help
7
<html>
<head>
<script language="javaScript">
var x = 1;
if (x== 1) {
document.write("x is " + x);
}
else {
document.write("x is not 1");
}
</script>
</head>
<body>
</body>
</html>
Simple conditional (if-else) statement written in JavaScript
Run this to see how a conditional (if-else) statement works in JavaScript
CS 1150 - Lab 6 – JavaScript Programming Lab
7
Part 3 – Temperature Conversion Program
8
You need to use if-else statements.
Based on the input you receive from the user (‘C’ or ‘F’), you will
You need minimum of three variables
Look at the screenshots shown in the lab file to get an idea about the inputs and the output
CS 1150 - Lab 8 – JavaScript Programming Lab
Part 4 Help
9
<html>
<head>
<script language="javaScript">
var counter = 0;
document.write("Starting Loop" + "<br />");
while (counter < 5) {
document.write("Current Count : " + counter + "<br />");
counter++;
}
document.write("Loop stopped");
</script>
</head>
<body>
</body>
</html>
Copy the code shown
Identify what is;
Loop initialization step
Looping condition (test)
Loop update statement
Now replace the while loop with a for loop
CS 1150 - Lab 8 – JavaScript Programming Lab
9
Part 5 Help
10
<html>
<head>
<script language="javaScript">
for (var i=0; i<2; i++) {
alert("Hello " + i);
}
</script>
</head>
<body>
</body>
</html>
Simple for loop written in JavaScript
Run this to see how a for loop works in JavaScript
CS 1150 - Lab 8 – JavaScript Programming Lab
10