CS 1150 – JavaScript Programming Lab TA – Sanjaya Wijeratne E-mail – [email protected] Web Page - http://knoesis.org/researchers/sanjaya/
Dec 25, 2015
CS 1150 – JavaScript Programming Lab
TA – Sanjaya Wijeratne
E-mail – [email protected]
Web Page - http://knoesis.org/researchers/sanjaya/
CS 1150 - Lab 2 - Exploring Number Systems 2
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 [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 2 - Exploring Number Systems 3
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 4
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 5
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 6
Writing Your First JavaScript Code
<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 2 - Exploring Number Systems 7
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 -->
</script></head><body></body></html>
CS 1150 - Lab 2 - Exploring Number Systems 8
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 9
Part 3 Help
<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 2 - Exploring Number Systems 10
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 11
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 12
Part 5 Help
<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 2 - Exploring Number Systems 13
Part 5 Help Cont.
<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 2 - Exploring Number Systems 14
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?