XP Tutorial 3 New Perspectives on JavaScript, Comprehensive1 Working with Arrays, Loops, and Conditional Statements Creating a Monthly Calendar

XP Tutorial 3New Perspectives on JavaScript, Comprehensive2 Objectives Create an array Populate and reference values from an array Work with array methods

XP Tutorial 3New Perspectives on JavaScript, Comprehensive3 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

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

XP Tutorial 3New Perspectives on JavaScript, Comprehensive5 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

XP Tutorial 3New Perspectives on JavaScript, Comprehensive6 Creating and Formatting the Monthly Calendar

XP Tutorial 3New Perspectives on JavaScript, Comprehensive7 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

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

XP Tutorial 3New Perspectives on JavaScript, Comprehensive9 The calendar() Function Initial code for the calendar() function function calendar() { document.write(" "); }

XP Tutorial 3New Perspectives on JavaScript, Comprehensive10 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

XP Tutorial 3New Perspectives on JavaScript, Comprehensive11 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]

XP Tutorial 3New Perspectives on JavaScript, Comprehensive12 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];

XP Tutorial 3New Perspectives on JavaScript, Comprehensive13 Creating the monthName Array

XP Tutorial 3New Perspectives on JavaScript, Comprehensive14 The Completed writeCalTitle() Function

XP Tutorial 3New Perspectives on JavaScript, Comprehensive15 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

XP Tutorial 3New Perspectives on JavaScript, Comprehensive16 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()

XP Tutorial 3New Perspectives on JavaScript, Comprehensive17 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)

XP Tutorial 3New Perspectives on JavaScript, Comprehensive18 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)

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

XP Tutorial 3New Perspectives on JavaScript, Comprehensive20 Array Methods

XP Tutorial 3New Perspectives on JavaScript, Comprehensive21 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 }

XP Tutorial 3New Perspectives on JavaScript, Comprehensive22 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 { }

XP Tutorial 3New Perspectives on JavaScript, Comprehensive23 Counter Values in the For loop

XP Tutorial 3New Perspectives on JavaScript, Comprehensive24 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] }

XP Tutorial 3New Perspectives on JavaScript, Comprehensive25 Creating the writeDayNames() Function

XP Tutorial 3New Perspectives on JavaScript, Comprehensive26 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 }

XP Tutorial 3New Perspectives on JavaScript, Comprehensive27 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);

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

XP Tutorial 3New Perspectives on JavaScript, Comprehensive29 The Initial daysInMonth()

XP Tutorial 3New Perspectives on JavaScript, Comprehensive30 Calculating Leap Years

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

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

XP Tutorial 3New Perspectives on JavaScript, Comprehensive33 The Complete daysInMonth() Function

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

XP Tutorial 3New Perspectives on JavaScript, Comprehensive35 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 }

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

XP Tutorial 3New Perspectives on JavaScript, Comprehensive37 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

XP Tutorial 3New Perspectives on JavaScript, Comprehensive38 Building the Monthly Calendar

XP Tutorial 3New Perspectives on JavaScript, Comprehensive39 Setting the First Day of the Month

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

XP Tutorial 3New Perspectives on JavaScript, Comprehensive41 The While loop for Adding the Calendar Days

XP Tutorial 3New Perspectives on JavaScript, Comprehensive42 The Final calendar() Function

XP Tutorial 3New Perspectives on JavaScript, Comprehensive43 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;

XP Tutorial 3New Perspectives on JavaScript, Comprehensive44 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]; }

XP Tutorial 3New Perspectives on JavaScript, Comprehensive45 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

XP Tutorial 3New Perspectives on JavaScript, Comprehensive46 Tips for Arrays, Program Loops, and Conditional 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

XP Tutorial 3New Perspectives on JavaScript, Comprehensive47 Tips for Arrays, Program Loops, and Conditional 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

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