CS 1150 – JavaScript Programming Lab TA – Sanjaya Wijeratne E-mail –...

15
CS 1150 – JavaScript Programming Lab TA – Sanjaya Wijeratne E-mail – [email protected] Web Page - http://knoesis.org/researchers/sanjaya/

Transcript of CS 1150 – JavaScript Programming Lab TA – Sanjaya Wijeratne E-mail –...

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?

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