JavaScript Lab
advertisement
CS 1150 – JavaScript
Programming Lab
TA – Sanjaya Wijeratne
E-mail – wijeratne.2@wright.edu
Web Page - http://knoesis.org/researchers/sanjaya/
TA Labs, Office Hours Laboratory Polices
• Lab Hours
• 2:30 PM - 4:20 PM, Monday and Friday at Room 320 - Oelman Hall
• TA Office Hours
• 4:40 PM - 5:40 PM, Monday and Friday at Room 316 - Russ Engineer Center
• By appointment – Please email to wijeratne.2@wright.edu
• 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 2 - Exploring Number Systems
2
JavaScript Programming Lab Overview
• Learn how to write Output Statements, use Message Boxes
and Variables
• Gain an understanding of Conditional Statements
• Complete Part 1, 2, 3, 4 and 5 (Required for all Students)
• Extra Credit Question at the End (Worth 3 Points)
• Lab Due Date - Oct 28, 2013 12:30 PM
CS 1150 - Lab 2 - Exploring Number Systems
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/screenshots to pilot
• Use the checklist to make sure you submitted all files
CS 1150 - Lab 2 - Exploring Number Systems
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 2 - Exploring Number Systems
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 2 - Exploring Number Systems
6
Helper HTML Code
• Use a new copy of this template for every section (part 1 – 4)
<html>
<head>
<script language="javaScript">
<!-- write JavaScript code here -->
CS 1150 - Lab 2 - Exploring Number Systems
</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 2 - Exploring Number Systems
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 2 - Exploring Number Systems
<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 Help
• You Need to Do Two Tasks
• Task 1 – Write a Psudo-code or a Flow Chart to Convert
Temperature from Celsius to Fahrenheit or from Fahrenheit
to Celsius
• Task 2 – Write a JavaScript Program to Convert Temperature
from Celsius to Fahrenheit or from Fahrenheit to Celsius
CS 1150 - Lab 2 - Exploring Number Systems
10
Part 4 Help Cont.
• You need minimum of three variables
• Look at the screenshots given at the end to have an idea
about the inputs and the output
• You need to change the variables in the equations given in
part 4 using the variables you defined to make temperature
calculation work
CS 1150 - Lab 2 - Exploring Number Systems
11
Part 5 Help
• Simple for loop written
in JavaScript
• Run this to see how a
for loop works in
JavaScript
CS 1150 - Lab 2 - Exploring Number Systems
<html>
<head>
<script language="javaScript">
for (var i=0; i<2; i++) {
alert("Hello " + i);
}
</script>
</head>
<body>
</body>
</html>
12
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 2 - Exploring Number Systems
<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>
13
Extra Credit Help
• Think the following three steps when writing the loop
•
•
•
•
What number should you use at the loop initialization step
What should be the loop test or looping condition
What should be the loop updating statement
Should you increase the loop condition variable or decrease it?
CS 1150 - Lab 2 - Exploring Number Systems
14
Questions ?
If you have questions, please raise your
hand, Colin or myself will come to help
you
CS 1150 - Lab 2 - Exploring Number Systems
15
