CS 1150 – JavaScript Programming Lab

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 - OelmanHall • 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

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

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

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

Writing Your First JavaScript Code HTML Code <html> <head> <script type="text/javascript"> document.write("Hello World"); alert("Hello World"); </script> </head> <body> </body> </html> HTML Header Code Writes in to HTML File SCRIPT Tags Writes in to a Message Box HTML Body CS 1150 - Lab 2 - Exploring Number Systems

Helper HTML Code • Use a new copy of this template for every section (part 1 – 4) <html> <head> <script language="javaScript">  </script> </head> <body> </body> </html> CS 1150 - Lab 2 - Exploring Number Systems

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

Part 3 Help • Simple conditional (if-else) statement written in JavaScript • Run this to see how a conditional (if-else) statement works in JavaScript • <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> CS 1150 - Lab 2 - Exploring Number Systems

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

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

Part 5 Help • Simple for loop written in JavaScript • Run this to see how a for loop works in JavaScript <html> <head> <script language="javaScript"> for (vari=0; i<2; i++) { alert("Hello " + i); } </script> </head> <body> </body> </html> CS 1150 - Lab 2 - Exploring Number Systems

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 <html> <head> <script language="javaScript"> varcounter = 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> CS 1150 - Lab 2 - Exploring Number Systems

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

Questions ? If you have questions, please raise your hand, Colin or myself will come to help you CS 1150 - Lab 2 - Exploring Number Systems

CS 1150 – JavaScript Programming Lab