Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSIS 138 JavaScript Class3

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

  • Login to see the comments

CSIS 138 JavaScript Class3

  1. 1. JavaScript – Class 3 <ul><ul><li>String object </li></ul></ul><ul><ul><li>toLowerCase() </li></ul></ul><ul><ul><li>toUpperCase() </li></ul></ul><ul><ul><li>Switch statement </li></ul></ul><ul><ul><li>Arrays </li></ul></ul><ul><ul><li>loops </li></ul></ul>
  2. 2. String Object – comparing strings var answer = “xyz”; stringName. toLowerCase() ; stringName. toUpperCase() ;
  3. 3. String Object var answer = prompt(&quot;What breed of dog was Lassie?&quot;, &quot;&quot;); if (answer == &quot;collie&quot;) { document.write(&quot;Yes, that is correct!&quot;); }
  4. 4. var answer = prompt(&quot;What breed of dog was Lassie?&quot;, &quot;&quot;); if (answer. toLowerCase() == &quot;collie&quot;) { document.write(&quot;Yes, Lassie was a collie!&quot;); } else { document.write(&quot;No, you are wrong!&quot;); } comparison
  5. 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
  6. 6. var theDay= prompt(&quot;What day is the fourth of July?&quot;, &quot;&quot;); 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 quotes for a literal/string
  7. 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
  8. 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”
  9. 9. Listing the elements in an array var dogs = new Array(); dogs[0] = &quot;Missy&quot; ; dogs[1] = &quot;Letty&quot; ; dogs[2] = &quot;Andy&quot; ; dogs[3] = &quot;Terri&quot; ; var dogs = new Array(“Missy”, “Letty”, “Andy”, “Terri”); ______________________________________________ Returning the value of the array elements : document.write(&quot;my first dog is &quot; + dogs[0] + &quot;<br>&quot;); document.write(&quot;my second dog is &quot; + dogs[1] + &quot;<br>&quot;); see page 8 index position 0
  10. 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
  11. 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
  12. 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>”); }
  13. 13. for loop - Pages 9 -11
  14. 14. for in loop - Page 12
  15. 15. for in loop - Page 12
  16. 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(&quot;Enter a number from 1 to 10&quot;, &quot;&quot;); while (counter <= 10) { document.write(&quot;this is count number &quot; + counter + &quot;<br><br>&quot; ); counter++ }
  17. 17. <ul><li>do while loop </li></ul><ul><li>Same as the while loop except </li></ul><ul><ul><li>The test condition is at the bottom </li></ul></ul><ul><ul><li>Will always loop at least once </li></ul></ul><ul><li>var counter; </li></ul><ul><li>counter = prompt(&quot;Enter a number from 1 to 10&quot;, &quot;&quot;); </li></ul><ul><li>do </li></ul><ul><li>{ </li></ul><ul><li>document.write(&quot;this is count number &quot; + counter + &quot;<br><br>&quot; ); </li></ul><ul><li>counter++ </li></ul><ul><li>} </li></ul><ul><li>while (counter <= 5) </li></ul>
  18. 18. <ul><li>Assignment 3 </li></ul><ul><li>Looping through an array of URLs </li></ul><ul><li>Concatenating a variable with HTML to produce a hypertext link </li></ul><ul><li><a href=”http://variable”>variable</a> </li></ul><ul><li>document.write (‘<a href=”http://’ + variable + ‘”>’ + variable + ‘</a>’); </li></ul><ul><li>note the double quotes inside the document.write() </li></ul>

×