Working with Arrays, Loops, and Conditional Statements

1. Tutorial 3 New Perspectives on JavaScript, Comprehensive 1 Working with Arrays, Loops, and Conditional Statements Creating a Monthly Calendar

2. Tutorial 3 New Perspectives on JavaScript, Comprehensive 2 Objectives Create an array Populate and reference values from an array Work with array methods

3. Tutorial 3 New Perspectives on JavaScript, Comprehensive 3 Objectives Work with For loops Work with While loops Loop through the contents of an array Work with If, If... Else, and multiple conditional statements

4. Tutorial 3 New Perspectives on JavaScript, Comprehensive 4 Objectives Use arrays, loops, and conditional statements to create a table Work with break, continue, and label commands

5. Tutorial 3 New Perspectives on JavaScript, Comprehensive 5 Introducing the Monthly Calendar Program requirements Easily usable on other Web pages JavaScript code for calendar should be placed in an external file named calendar.js calendar.js should be run from a single function Accessing and displaying monthly calendar table should require minimal amount of recoding

6. Tutorial 3 New Perspectives on JavaScript, Comprehensive 6 Creating and Formatting the Monthly Calendar

7. Tutorial 3 New Perspectives on JavaScript, Comprehensive 7 The Calendar Style Sheet Classes or id names to be created Calendar is set in a table with id calendar_table Cell containing calendar title has id calendar_head Seven cells containing days of week abbreviations belong to class calendar_weekdays Cells containing dates of month belong to class calendar_dates Cell containing current date has id calendar_today

8. Tutorial 3 New Perspectives on JavaScript, Comprehensive 8 The Contents of the calendar.css Style Sheet

9. Tutorial 3 New Perspectives on JavaScript, Comprehensive 9 The calendar() Function Initial code for the calendar() function function calendar() { document.write("<table id='calendar_table'>"); document.write("</table>"); }

10. Tutorial 3 New Perspectives on JavaScript, Comprehensive 10 The calendar() Function Main tasks when creating calendar table Creating the table header row Creating the table row containing the names of the days of the week Creating the rows containing the days of the month

11. Tutorial 3 New Perspectives on JavaScript, Comprehensive 11 Working with Arrays Array Collection of data values organized under a single name Each data value has a number or index General form array[I]

12. Tutorial 3 New Perspectives on JavaScript, Comprehensive 12 Creating and Populating an Array To create an array var array = new Array(length); Arrays without a defined length can take up more memory Creating and populating an array var array = new Array(values); Array literal var array = [values];

13. Tutorial 3 New Perspectives on JavaScript, Comprehensive 13 Creating the monthName Array

14. Tutorial 3 New Perspectives on JavaScript, Comprehensive 14 The Completed writeCalTitle() Function

15. Tutorial 3 New Perspectives on JavaScript, Comprehensive 15 Working with Array Length JavaScript arrays Not required to stay at a fixed size Definition of a value not required for every item Sparse arrays Arrays with several missing or null items

16. Tutorial 3 New Perspectives on JavaScript, Comprehensive 16 Reversing an Array Arrays Associated with a collection of methods that allow you to change their contents, order, and size Syntax for applying methods array.method() Methods for changing order of array items after array is created reverse() and sort()

17. Tutorial 3 New Perspectives on JavaScript, Comprehensive 17 Sorting an Array sort() method Sorts array items in alphabetical order Compare function Used to sort nontextual data correctly Compares values of two adjacent items in the array at a time Applying compare function to sort() method array.sort(function)

18. Tutorial 3 New Perspectives on JavaScript, Comprehensive 18 Extracting and Inserting Array Items Subarray A section of an array slice() method Extracts a part of an array Syntax: array.slice(start, stop) Can be used to insert new items into an array array.splice(start, size, values)

19. Tutorial 3 New Perspectives on JavaScript, Comprehensive 19 Extracting and Inserting Array Items Most efficient methods to insert or remove items push() pop() unshift() shift()

20. Tutorial 3 New Perspectives on JavaScript, Comprehensive 20 Array Methods

21. Tutorial 3 New Perspectives on JavaScript, Comprehensive 21 Working with Program Loops Program loop Set of commands that executes repeatedly until a stopping condition is met The For loop Counter variable is used to track number of times a set of commands is run General structure for (start; continue; update) { commands }

22. Tutorial 3 New Perspectives on JavaScript, Comprehensive 22 The For Loop Can be nested inside another Command block Collection of commands that is run each time through a loop Distinguished by opening and closing curly braces { }

23. Tutorial 3 New Perspectives on JavaScript, Comprehensive 23 Counter Values in the For loop

24. Tutorial 3 New Perspectives on JavaScript, Comprehensive 24 For Loops and Arrays For loops Used to cycle through different values contained within an array General structure for accessing each value in array for (var i=0; i < array.length; i++) { commands involving array[i] }

25. Tutorial 3 New Perspectives on JavaScript, Comprehensive 25 Creating the writeDayNames() Function

26. Tutorial 3 New Perspectives on JavaScript, Comprehensive 26 The While Loop A command block is run as long as a specific condition is met Condition does not depend on value of a counter variable General syntax while (continue) { commands }

27. Tutorial 3 New Perspectives on JavaScript, Comprehensive 27 The Do/While Loop Test to determine whether to continue to loop is made after the command block is run Structure do { commands } while (continue);

28. Tutorial 3 New Perspectives on JavaScript, Comprehensive 28 Working with Conditional Statements Conditional statement Runs a command or command block only when certain conditions are met If statement Most common conditional statement

29. Tutorial 3 New Perspectives on JavaScript, Comprehensive 29 The Initial daysInMonth()

30. Tutorial 3 New Perspectives on JavaScript, Comprehensive 30 Calculating Leap Years

31. Tutorial 3 New Perspectives on JavaScript, Comprehensive 31 The If Statement Syntax if (condition) { commands } Modulus operator Returns the integer remainder after dividing one integer by another

32. Tutorial 3 New Perspectives on JavaScript, Comprehensive 32 Nesting If Statements General structure if (thisYear % 4 == 0) { if statement for century years }

33. Tutorial 3 New Perspectives on JavaScript, Comprehensive 33 The Complete daysInMonth() Function

34. Tutorial 3 New Perspectives on JavaScript, Comprehensive 34 The If...Else Statement General structure if (condition) { commands if true } else { commands if false }

35. Tutorial 3 New Perspectives on JavaScript, Comprehensive 35 Using Multiple Else...If Statements General structure if (condition 1) { first command block } else if (condition 2) { second command block } else if (condition 3) { third command block } ... else { default command block }

36. Tutorial 3 New Perspectives on JavaScript, Comprehensive 36 The Switch Statement Syntax switch (expression) { case label1: commands1 break; case label2: commands2 break; case label3: commands3 break; ... default: default commands }

37. Tutorial 3 New Perspectives on JavaScript, Comprehensive 37 Creating the calendar() Function Steps Calculate day of week in which the month starts Precede first day of month with blank table cells Loop through days of the month Writing each date in a different table cell Starting a new table row on each Sunday Ending the table rows after each Saturday Highlight current date in calendar

38. Tutorial 3 New Perspectives on JavaScript, Comprehensive 38 Building the Monthly Calendar

39. Tutorial 3 New Perspectives on JavaScript, Comprehensive 39 Setting the First Day of the Month

40. Tutorial 3 New Perspectives on JavaScript, Comprehensive 40 Placing the First Day of the Month Loop to create blank table cells document.write("<tr>"); for (var i=0; i < weekDay; i++) { document.write("<td></td>"); }

41. Tutorial 3 New Perspectives on JavaScript, Comprehensive 41 The While loop for Adding the Calendar Days

42. Tutorial 3 New Perspectives on JavaScript, Comprehensive 42 The Final calendar() Function

43. Tutorial 3 New Perspectives on JavaScript, Comprehensive 43 Managing Program Loops and Conditional Statements Break command Used to terminate any program loop or conditional statement Often used to exit a program loop Syntax: break;

44. Tutorial 3 New Perspectives on JavaScript, Comprehensive 44 The continue Command Stops processing commands in current iteration of loop and jumps to next iteration Example var total = 0; for (var i=0; i < data.length; i++) { if (data[i]==null) continue; // continue with the next iteration total += data[i]; }

45. Tutorial 3 New Perspectives on JavaScript, Comprehensive 45 Statement Labels Labels Used to identify statements in your code Often used with break and continue commands to direct a program to a particular statement Syntax: label: statement Some programmers Discourage use of break, continue, and label statements

46. Tutorial 3 New Perspectives on JavaScript, Comprehensive 46 Tips for Arrays, Program Loops, andConditional Statements Save space in your program code by Declaring and populating each array in a single new Array() declaration Use array methods like sort() and reverse() to quickly rearrange contents of arrays Use a For loop when Your loop contains a counter variable

47. Tutorial 3 New Perspectives on JavaScript, Comprehensive 47 Tips for Arrays, Program Loops, andConditional Statements Use While loop for More general stopping conditions To simplify your code Avoid nesting too many levels of If statements Use Switch statement for Conditional statements that involve variables with several different possible values

48. Tutorial 3 New Perspectives on JavaScript, Comprehensive 48 Tips for Arrays, Program Loops, andConditional Statements Avoid using break and continue statements to Cut off loops unless necessary Instead Set break conditions in the conditional expression for a loop