JavaScript Lab

CS 1150 – JavaScript
Programming Lab
TA – Sanjaya Wijeratne
E-mail – [email protected]
Web Page - http://knoesis.org/researchers/sanjaya/
TA Labs, Office Hours Laboratory Polices
• Lab Hours
• 2:30 PM - 4:20 PM, Monday at Room 320 - Oelman Hall
• TA Office Hours
• 4:45 PM - 5:45 PM, Monday at Room 316 - Russ Engineer Center
• By appointment – Please email to [email protected]
• Refer to CS 1150 Course Syllabus for Class and Laboratory Policies
• Zero tolerance policy for Academic Misconduct – All parties will get 0% marks
CS 1150 - Lab 8 – JavaScript Programming Lab
2
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 - Mar 24, 2013 11:55 AM
CS 1150 - Lab 8 – JavaScript Programming Lab
3
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. Please submit all
your html files and answers to pilot
• Use the checklist to make sure you have submitted all files
CS 1150 - Lab 8 – JavaScript Programming Lab
4
What is JavaScript
• 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 8 – JavaScript Programming Lab
5
Writing Your First JavaScript Code
HTML Code
HTML Header Code
<html>
<head>
<script type="text/javascript">
document.write("Hello World");
SCRIPT Tags
alert("Hello World");
Writes in to HTML File
Writes in to a Message Box
</script>
</head>
HTML Body
<body>
</body>
</html>
CS 1150 - Lab 8 – JavaScript Programming Lab
6
Helper HTML Code
• Use a new copy of this whenever you need it
<html>
<head>
<script language="javaScript">

CS 1150 - Lab 8 – JavaScript Programming Lab
</script>
</head>
<body>
</body>
</html>
7
Part 2 Help
• 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 8 – JavaScript Programming Lab
8
Part 3 Help
• Simple conditional (if-
else) statement written
in JavaScript
• Run this to see how a
conditional (if-else)
statement works in
JavaScript
CS 1150 - Lab 8 – JavaScript Programming Lab
<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>
9
Part 4 – Speed Conversion Program
• You need to use if-else statements.
• Based on the input you receive from the user (‘M’ or ‘K’), decide which
formula to execute to calculate the new speed.
• You need minimum of three variables
• Look at the screenshots given to have an idea about the inputs
and the output
CS 1150 - Lab 8 – JavaScript Programming Lab
10
Part 4 – Rock Paper Scissors Game
• You need to use nested if-else statements.
• Look at the screenshots given to have an idea about the inputs
and the output
• Think what are the inputs you want to store in variables
• Think about all possible outcomes that you may run into when
playing this game (Draw, Player 1 Wins, Player 2 Wins)
CS 1150 - Lab 8 – JavaScript Programming Lab
11
Part 4 – Rock Paper Scissors Game Cont.
• The game has three outcomes. They are;
• Game ends in a draw (if both players input the same letter)
• Player 1 can win (There are 3 ways player one can win – Check what are they)
• Player 2 can win (If the game is not a tie (draw) nor won by Player 1, Player 2
wins)
• Try to implement this logic using nested if-else statements
CS 1150 - Lab 8 – JavaScript Programming Lab
12
Part 5 Help
• Simple for loop written
in JavaScript
• Run this to see how a
for loop works in
JavaScript
CS 1150 - Lab 8 – JavaScript Programming Lab
<html>
<head>
<script language="javaScript">
for (var i=0; i<2; i++) {
alert("Hello " + i);
}
</script>
</head>
<body>
</body>
</html>
13
Part 5 Help Cont.
• 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
<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>
14
Part 5 – Rock Paper Scissors Tournament
• You need to write a loop that runs 5 times
• You need to have variables to store how many games won by
Player 1 and Player 2 when they play this game for five times
• After the program is run for five times, check who has most
number of wins
CS 1150 - Lab 8 – JavaScript Programming Lab
15
Additional Help
• Look at JavaScript Presentations Slides discussed in class by
Mr. Chris Fickert
• Read the JavaScript Book
CS 1150 - Lab 8 – JavaScript Programming Lab
16
Questions ?
If you have questions, please raise your
hand, Colin or I will come to help you
CS 1150 - Lab 8 – JavaScript Programming Lab
17

Download Report

JavaScript Lab

Paperzz.com

Your Paperzz