Download
1 / 47
470 likes | 931 Views
Tutorial 3. New Perspectives on JavaScript, Comprehensive. 2. Objectives. Create an arrayPopulate and reference values from an arrayWork with array methods. Tutorial 3. New Perspectives on JavaScript, Comprehensive. 3. Objectives. Work with For loopsWork with While loopsLoop through the conte
E N D
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, 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
47. Tutorial 3
New Perspectives on JavaScript, Comprehensive 47 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
48. Tutorial 3
New Perspectives on JavaScript, Comprehensive 48 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
