cs 1150 – javascript programming lab
DESCRIPTION
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 and Friday at Room 320 - Oelman Hall TA Office Hours - PowerPoint PPT PresentationTRANSCRIPT
CS 1150 – JavaScript Programming Lab
TA – Sanjaya WijeratneE-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 CodeHTML Header
Code
SCRIPT Tags
HTML Body
Writes in to HTML FileWrites 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?
CS 1150 - Lab 2 - Exploring Number Systems 15
Questions ?
If you have questions, please raise your hand, Colin or
myself will come to help you