CSIS 138 JavaScript Class3

18
1 JavaScript – Class 3 String object toLowerCase() toUpperCase() Switch statement Arrays loops

description

Instructor Teresa Pelkie at Palomar College - "switch" statement, arrays, loops

Transcript of CSIS 138 JavaScript Class3

Page 1: CSIS 138 JavaScript Class3

1

JavaScript – Class 3

• String object• toLowerCase()• toUpperCase()• Switch statement• Arrays• loops

Page 2: CSIS 138 JavaScript Class3

2

String Object – comparing strings

var answer = “xyz”;

stringName.toLowerCase();

stringName.toUpperCase();

Page 3: CSIS 138 JavaScript Class3

3

String Object

var answer = prompt("What breed of dog was Lassie?", "");

if (answer == "collie") { document.write("Yes, that is correct!"); }

Page 4: CSIS 138 JavaScript Class3

4

var answer = prompt("What breed of dog was Lassie?", "");

if (answer.toLowerCase() == "collie") { document.write("Yes, Lassie was a collie!"); } else { document.write("No, you are wrong!"); }

comparison

Page 5: CSIS 138 JavaScript Class3

5

Switch Statement

For checking a condition when there are a large number of possibilities Can be used in place of an if else if

What it contains: • the test statement - the expression/condition to test

• the case statements - the possible answers

• the break statements – stops checking after a match is

• the default statement –executes if none of the possible answers are found

Page 6: CSIS 138 JavaScript Class3

6

var theDay= prompt("What day is the fourth of July?", "");

switch (theDay.toLowerCase()) → the test expression– what we are comparing{ case “monday”:execute some code; break;

case “tuesday” : execute some code; break;

default: → - the default statement - if nothing matches, this will execute execute some code; break;

}

See pages 4-6 handout and sample code files

Double quotesfor a literal/string

Page 7: CSIS 138 JavaScript Class3

7

the Array Object – (chapter 2)

• Similar to a variable except that it can hold more than one item of data at a time

• Each piece of data stored is referred to as an element

• Each element is referenced by a number or an index

• The index number is enclosed in brackets – [ ]

• Arrays start with the number 0

• Arrays have a length property, which is the number of elements in the array

• Arrays are defined with the JavaScript key word “new”

• The length of the array minus 1 gives the number of the last index

Page 8: CSIS 138 JavaScript Class3

8

Declaring an Array

var myArray = new Array() or var myArray = new Array(4)

We are creating a “new” instance of the “Array()” object

keyword keyword

Array object – upper case “A”

Page 9: CSIS 138 JavaScript Class3

9

Listing the elements in an array

var dogs = new Array(); dogs[0] = "Missy" ; dogs[1] = "Letty" ; dogs[2] = "Andy" ; dogs[3] = "Terri" ;

var dogs = new Array(“Missy”, “Letty”, “Andy”, “Terri”);______________________________________________

Returning the value of the array elements:

document.write("my first dog is " + dogs[0] + "<br>"); document.write("my second dog is " + dogs[1] + "<br>"); see page 8

index position 0

Page 10: CSIS 138 JavaScript Class3

10

Loops

A loop is a type of JavaScript statement that repeats a block of code over and over again if a condition evaluates to true

Two kinds of loops -– a “for” loop and a “while” loop

• Use the “for” loop when you know, or can determine by a calculation, the number of times you want to repeat the code

• Use the “while” loop when you do not know how many times you will need to repeat the block of code

Page 11: CSIS 138 JavaScript Class3

11

The “for” loop – Commonly used with an array

• Repeats a block of code for a certain number of times

• When you know or can determine how many times to repeat the code

• Involves some kind of counter that is incremented as long as the condition is true

Page 12: CSIS 138 JavaScript Class3

12

The “for in” loop – ONLY used with an array

• Repeats a block of code for a certain number of times

• When you know or can determine how many times to repeat the code

• Involves some kind of counter that is incremented as long as the condition is true

var elementIndex; var myArray();

for (elementIndex in myArray) { document.write(myArray[elementIndex] + “<br>”); }

Page 13: CSIS 138 JavaScript Class3

13

for loop - Pages 9 -11

Page 14: CSIS 138 JavaScript Class3

14

for in loop - Page 12

Page 15: CSIS 138 JavaScript Class3

15

for in loop - Page 12

Page 16: CSIS 138 JavaScript Class3

16

while loop

• Allows you to test a condition and keep on looping as long as the condition is true; will stop when the condition is false • If the condition is false to begin with, it will never loop • Used when you don’t know the number of times you need to loop • You must increment the counter in the code to execute or it will loop indefinitely and the computer will crash ☺

var counter; counter = prompt("Enter a number from 1 to 10", ""); while (counter <= 10) { document.write("this is count number " + counter + "<br><br>" ); counter++ }

Page 17: CSIS 138 JavaScript Class3

17

do while loop

Same as the while loop except •The test condition is at the bottom• Will always loop at least once

var counter; counter = prompt("Enter a number from 1 to 10", ""); do { document.write("this is count number " + counter + "<br><br>" ); counter++ }

while (counter <= 5)

Page 18: CSIS 138 JavaScript Class3

18

Assignment 3 Looping through an array of URLs Concatenating a variable with HTML to produce a hypertext link

<a href=”http://variable”>variable</a>

document.write(‘<a href=”http://’ + variable + ‘”>’ + variable + ‘</a>’);

note the double quotes inside the document.write()