var width 3

1
Slide 1

• var width 3
• var browserType Netscape
• var Shakespeare \To be or not to be, that is
  the question! \ Hamlet.

2
Slide 2
3
Slide 3

• Average totalValue/Count
• var Count 0

4
Slide 4
5
Slide 5
6
Slide 6
7
Slide 7
8
Slide 8

• var Message1 You can only put so many letters
  in a string
• var Message2 before you run out of space.
• var completeMsgMessage1 Message2

9
Slide 9
10
Slide 10

• var todaysDate newDate()var numHours
  todaysDate.getHours()if (numHours gt 12)
  document.write(Good Afternoon) else
  document.write(Good Morning)

11
Slide 11

• While (condition) the JavaScript code to be
  executed while the condition is True the
  JavaScript code to be executed while the loop is
  finished

12
Slide 12

• Function Greetings() alert(Hello, this is a
  message.)
• messageStr This is a custom message.function
  Greetings(messageStr) alert(messageStr)

13
Slide 13

• document.write(ltCENTERgtltBgtPlease read the
  followinglt/Bgtlt/CENTERgt)

14
Slide 14
15
Slide 15

• ltINPUT TYPE Button Value White onClick
  document.bgColor Whitegt
• ltBODY bgColor White onLoad timeline()gt
• ltINPUT TYPE Button NAME SubmitText Value
  Submit onClick Transmit()gt

16
Slide 16

• Var currMonth newArray(13)currMonth1
  JanuarycurrMonth2 February..currMonth
  12 December

17
Slide 17

• Start Notepad
• Click the Start Button on the Taskbar, and then
  point to Programs on the Start Menu
• Point to Accessories on the Programs Submenu,
  then point to Notepad
• Click Notepad
• When Notepad displays, click the maximize button

18
Slide 18

• Click File, Open in Notepad
• Select the letter of the drive where your
  information is stored
• Change the Files of Type Selection List to All
  Files
• Find the Fun.htm file and open it

19
Slide 19

• ltSCRIPT LANGUAGE JavaScriptgtlt!-- Hide from
  old browsers

20
Slide 20

• Click the blank line (line 10) above the body tag
• Type ltSCRIPT LANGUAGE JavaScriptgt and press
  ENTER
• Type the hide comment text and press ENTER

21
Slide 21

• document.bgColorred
• document.bgColorred document.bgColorwhite
  document.bgColorblue document.bgColorwhite
  document.bgColorgreen document.bgColorwhite
  

22
Slide 22

• Position the insertion point on line 12
• Type the syntax from SLIDE 21, or the syntax that
  is circled to the right

23
Slide 23

• With the insertion point on line 18,
  typedocument.bgColorblanchedalmond
• Press ENTER

24
Slide 24

• //--gt
• lt/SCRIPTgt

25
Slide 25

• Position your insertion point to line 19
• Press ENTER
• On line 20 type //--gt and press ENTER
• On line 20 typelt/SCRIPTgt

26
Slide 26
27
Slide 27

• var LastName Simon
• var pageCnt 1
• var Done false

28
Slide 28

• var variable new object
• var birthDay Date(Jul, 13, 1975)
• var curDate new Date()

29
Slide 29
30
Slide 30

• var tNow new Date()var tlocDate
  tNow.toLocaleString()var tDate
  tLocDate.substring(0,10)
• Your example that is next may require that you
  substitute 21 for the 10

31
Slide 31

• Position the insertion point beneath the
  document.bgColorblanchedalmond statement
• Type var tNow new Date() and press ENTER
• Type var tlocDate tNow.toLocaleString() and
  press ENTER
• Type var tDate tlocDate.substring(0,10) and
  press ENTER

32
Slide 32

• Position the insertion point on line 22
• Type document.write(ltH2gtltCENTERgtWelcome. Today
  is tDatelt/CENTERgtlt/H2gt)
• Press the ENTER Key

33
Slide 33

• Position the insertion point on line 23. Type var
  intro1 Hi, thanks for visiting our site, but
  we have moved. Please make a note gt Press
  ENTER
• Type var intro2 of our new URL
  (www.funphonics.com) and notify the Webmaster
  about our new gt Press ENTER
• Type var intro3 location. ClickltA
  HREFhttp//www.scsite.com/gt here lt/Agt or wait
  15 seconds gt Press ENTER

34
Slide 34

• Type var intro4 to be moved automatically to
  our new site. gtPress ENTER
• Type var introMsg intro1intro2intro3intro4
  and press the ENTER key

35
Slide 35

• Position the insesrtion point on line 28
• Type document.write(ltH4gtltFONT COLORfirebrickgt
  introMsglt/H4gtlt/FONTgt)

36
Slide 36

• Place the insertion point on line 29
• Type setTimeout(chngSite(), 15000)
• Press the ENTER key

37
Slide 37

• Position the insertion point after the setTimeout
  method
• Type document.write(ltBRgtltH4gtltCENTERgtThis
  document was last modified document.lastModified
  lt/CENTERgtlt/H4gt)
• Press ENTER

38
Slide 38
39
Slide 39
40
Slide 40
41
Slide 41

• Position the insertion point on the blank line
  after the ltTITLEgt tags
• Type ltSCRIPT LANGUAGEJAVASCRIPTgt and press
  ENTER
• Type lt! Hide from old browsers and press ENTER

42
Slide 42

• Type function chngSite() and press ENTER
• Type alert(You are about to be transported to
  the new site location!) and press ENTER
• Type locationhttp//www.scsite.com/ and press
  ENTER
• Type and press ENTER

43
Slide 43

• Type //--gt and press ENTER
• Type lt/SCRIPTgt and press ENTER
• Your code should match what is to the right
• Save Your File
• Test it in Your Browser

44
Slide 44

• If your page is working properly, you wont have
  to worry about errors
• If there is one on the page, it will rear its
  ugly head in a message here
• To find out what the error is, double-click the
  message

45
Slide 45

• Open Notepad
• Open the home.htm document

46
Slide 46

• ltFORM NAMEmsgFormgt ltINPUT Typetext
  NamescrollingMsg Size23gtlt/FORMgt

47
Slide 47

• Place the insertion point on line 25 (beneath the
  lt/Pgt tag
• Type ltFORM NAMEmsgFormgt and press ENTER
• Type ltINPUT Typetext NamescrollingMsg
  Size23gt and press ENTER
• Type lt/FORMgt and press ENTER

48
Slide 48

• var scrollMsg Mortgage rates are at their
  lowest var msgSpace --- --- var beginPos
  0
• Document.msgForm.scrollingMsg.value
  scrollMsg.substring(beginPos, scrollMsg.length)ms
  gSpacescrollMsg.substring(0,beginPos)

49
Slide 49

• document.msgForm.scrollingMsg.value

Form name msgForm becomes property of document
object
value property
Text box name scrollingMsg becomes property of
document.msgForm object
50
Slide 50

• Position the insertion point on line 4
• Type ltSCRIPT LANGUAGEJavaScriptgt Press ENTER
• Type lt! Hide from old browsers and press ENTER
• Type var scrollMsg Mortgage rates are at their
  LOWEST! and press ENTER

51
Slide 51

• Type var msgSpace --- --- and press ENTER
• Type var beginPos 0 and press ENTER
• Type function scrollingMsg() and press ENTER
• Type document.msgForm.scrollingMsg.value
  scrollMsg.substring(beginPos,scrollMsg.length)msg
  SpacescrollMsg.substring(0,beginPos) and press
  ENTER
• Type and press ENTER

52
Slide 52
53
Slide 53
54
Slide 54
55
Slide 55

• Place the insertion point on line 11
• Type beginPos beginPos 1 and press ENTER
• Type if (beginPos gt scrollMsg.length) and press
  ENTER
• Type beginPos 0 and press ENTER
• Type and press ENTER
• You should now have the following code

56
(No Transcript)
57
Slide 57

• Position the insertion point on line 15
• Type window.setTimeout(scrollingMsg(),200) and
  press ENTER
• Type and press the ENTER key three times
• Type //--gt and press ENTER
• Type lt/SCRIPTgt and press ENTER

58
Slide 58
59
Slide 59

• Place the insertion point directly before the gt
  in the ltBODYgt tag and press the spacebar once
• Type onloadscrollingMsg()
• Save your file as homefinders.htm
• Open it in your browser to test it

60
Slide 60
61
Slide 61
62
Slide 62

• Position the insertion point on line 41 right
  before the gt and press the SPACEBAR
• Type onclickdoMort() but do not press ENTER

63
Slide 63

• function doMort() document.MortCalc.Amount.valu
  e document.MortCalc.Rate.value
  document.MortCalc.Years.value
  document.MortCalc.Payment.value
  document.MortCalc.Amount.focus()

64
Slide 64
65
Slide 65

• Position the insertion point in the HEAD section
  on line 18
• Enter the JavaScript code from SLIDE 63
• Save and Test your page

66
Slide 66
Statements executed if condition is true
Statements executed if condition is false
Condition
False
True
JavaScript Statements Set 1
JavaScript Statements Set 2
67
Slide 67
68
Slide 68

• function Calc(myform) var mortAmountdocument.M
  ortCalc.Amount.value var mortAmountparseInt(mort
  Amount,10) if (isNaN(mortAmount)) alert(The
  loan amount is not a number!) document.MortCalc
  .Amount.value document.MortCalc.Amount.focu
  s()

69
Slide 69

• else var mortRatedocument.MortCalc.Rate.value
  var mortRateparseFloat(mortRate) if
  (isNaN(mortRate)) alert(The interest rate is
  not a number!) document.MortCalc.Rate.value
  document.MortCalc.Rate.focus()

70
Slide 70

• else var mortYearsdocument.MortCalc.Years.valu
  e var mortYearsparseFloat(mortYears,10) if
  (isNaN(mortYears)) alert(The number of years
  is not a number!) document.MortCalc.Years.value
  document.MortCalc.Years.focus()

71
Slide 71

• Position the insertion point in line 26
• Enter the JavaScript code from SLIDE 68
• Position the insertion point on line 34
• Enter the JavaScript from SLIDES 69 70

72
Slide 72

• Place the insertion point on line 120 directly
  before the rightmost gt bracket
• Type onclickCalc(MortCalc) but do not press
  ENTER
• Save and test the page using the examples on
  SLIDE 73

73
Slide 73
74
Slide 74

• Place the insertion point on line 52 and press
  ENTER
• Type document.MortCalc.Payment.valuemonthly(mortA
  mount,mortRate,mortYears) and press ENTER

75
Slide 75

• function monthly(mortAmount,mortRate,mortYears)
  var IratemortRate/1200 var
  PmtsmortYears12 var LoanmortAmount return
  Loan(Irate/(1-(1/Math.pow(1Irate,Pmts))))

76
Slide 76

• General form
• Math.pow(number, exponent)
• Comment
• Where number is the value raised to the power of
  the exponent value. The pow() method accepts
  variables (X,n), constants(2,3) or both (X,2)
• Examples
• Math.pow(2,3)
• Math.pow(X,n)
• Math.pow(Sidelength,2)

77
Slide 77

• Position the insertion point on line 56, directly
  above the //--gt tag
• Enter the JavaScript code from SLIDE 75
• Save and test your page using the numbers from
  slide 78

78
Slide 78
79
Slide 79

• General form
• Var positionstringname.indexOf(c)
• Comment
• Where position is a variable stringname is any
  string object and c is the value for which the
  function searches
• Example
• Var decipos valuein.indexof(.)

80
Slide 80

• function dollarFormat(valuein) var
  formatStr var Outdollars var
  deciposvaluein.indexOf(.) if
  (decipos-1) deciposvaluein.length

81
Slide 81

• Position the insertion point on line 63
• Enter the JavaScript code from SLIDE 80

82
Slide 82

• General form
• for (startstopcounter-control) JavaScript
  statements
• Comment
• Where start is a variable initialized to a
  beginning value stop is an expression indicating
  the condition at which the loop should end and
  the counter-control is an expression indicating
  how to increment or decrement the counter.
  Semicolons separate the three variables
• Example
• for (j1 jlt5 j) for (ctr6 ctrgt0 ctr--)
  for (itemx1 itemxlt10 itemxitemx2)

83
Slide 83

• General form
• while(condition) JavaScript Statements
• Comment
• Where condition is either numeric value or a
  string and the JavaScript statements execute
  while the condition is true
• Example
• while (ctr lt 6) while (isNaN(temp)) while
  (Response ! Done)

84
Slide 84

• var dollarsvaluein.substring(0,decipos)var
  dollendollars.lengthif (dollengt3 while
  (dollengt0) tDollarsdollars.substring(dollen-3
  ,dollen) if tDollars.length3
  Outdollars,tDollarsOutdollars dollen
  dollen-3 else OutdollarstDollarsOutdoll
  ars dollen0 if (Outdollars.substring(0,
  1),) dollarsOutdollars.substring(1,Outdollar
  s.length)else dollarsOutdollars

85
Slide 85

• Position the insertion point on line 69
• Enter the JavaScript code as it appears on SLIDE
  84 and then press ENTER

86
Slide 86

• var centsvaluein.substring(decipos1,
  decipos3)if (cents) cents00

87
Slide 87

• Position the insertion point on line 87
• Enter the JavaScript from SLIDE 86 and press ENTER

88
Slide 88

• var formatStrdollars.centsreturn
  formatStr

89
Slide 89

• Position the insertion point on line 90
• Enter the JavaScript code from SLIDE 88 then
  press ENTER

90
Slide 90

• Position the insertion point on line 53
• Type document.MortCalc.Payment.valuedollarFormat(
  document.MortCalc.Payment.value) as the statement
• Save your page and test it using the data on
  SLIDE 91

91
Slide 91
92
Slide 92

• General form
• var windownameopen(window file name(URL),
  object name,window features)
• Comment
• Where windowname is an optional name of a window
  object (required only if you need to refer to the
  pop-up window in any other Web page) window file
  name is the name of the HTML file and window
  features describe how the window should display.
• Example
• open(Adwindow.htm, Adwin, resizeoff,titleba
  rfalse

93
Slide 93
94
Slide 94

• Position the insertion point on line 94, (right
  above the //--gt tag
• Type open(notice.htm,noticeWin,width400,heig
  ht220) and then press ENTER

95
Slide 95

• Position the insertion point directly above the
  lt/BODYgt tag
• Type ltSCRIPT LANGUAGEJavaScriptgt and press
  ENTER
• Type lt! Hide from old browsers and press ENTER

96
Slide 96

• Type document.write(ltCENTERgtltFONT
  COLORmaroongtltH5gtThis document was last
  modified document.lastModifiedlt/H5gtlt/FONTgtlt/CE
  NTERgt) and press ENTER
• Type //--gt and press ENTER
• Type lt/SCRIPTgt and press ENTER
• Save and Test your page

97
Slide 97

• Start Notepad
• Open the file, cater.htm

98
Slide 98

• General form
• ltIMG SRCImage_file_name.Type
  NameObject_Name Widthpixels Heightpixelsgt
• Comment
• Where an initial image displays at the location
  where the tag appears. The name identifies the
  object for JavaScript. The Width and Height
  attributes define the image size
• Example
• ltIMG SRCbanner1.jpg NameBanner Width350
  Height65gt

99
Slide 99

• General form
• document.objectname.srcnew image file name
• Comment
• Where the new graphic image displays in the same
  location as the original by assigning a new file
  name to the image object source (SRC) property.
  The object name in the JavaScript code must match
  the object name in the IMAGE tag
• Example
• document.Banner.src banner2.jpg

100
Slide 100

• Place the insertion point on line 10
• Type ltCENTERgtltIMG SRCbanner1.jpg NameBanner
  Width320 Height65gtlt/CENTERgt and press enter

101
Slide 101

• General form
• var myarraynamenew Array()
• Comment
• Where Array is a built-in object and the new
  command creates a new object instance of the
  array. Assign data items to the array by either
  placing data in the array or by assigning the
  items separately
• Example
• var baners new Array(graphic1.jpg,
  graphic2,jpg, graphic3.jpg, graphic4.jpg)
  or-
• var banners new Array()banners0
  graphic1.jpgbanners1 graphic2.jpgbanners
  2 graphic3.jpg

102
Slide 102

• ltSCRIPT LANGUAGEJavaScriptgtlt! Hide from old
  browsers var bannersnew Array(banner1.jpg,ban
  ner2.jpg,banner3.jpg,banner4.jpg) var
  bnrCntr 0 function bancycle() bnrCntr
  bnrCntr 1 if (bnrCntr 4) bnrCntr
  0 document.Banner.src bannersbnrCntr s
  etTimeout(bancycle(),3000) //--gtlt/SCRIPTgt

103
Slide 103

• Place the insertion point on line 4
• Enter the JavaScript from SLIDE 102

104
Slide 104

• Place the insertion point to the right of the y
  in the ltBODYgt tag and press the spacebar
• Type onloadsetTimeout(bancycle(),3000) but
  do not press ENTER

105
Slide 105
Case Condition
Action related to the last array element
Case
Action related to first array element
Action 4
Action 1
Action 2
Action 3
106
Slide 106
107
Slide 107
108
Slide 108

• var holidayCntMsg Leave the party to Midwest
  Cateringvar curDay new Date()var tMonth
  curDay.getMonth()function HolidayDays() switch
  (tMonth) case 2 var tHoliday
  newDate(March 17, 2001) var curHoliday
  tHoliday.getTime()-curDay.getTime() if
  (curHoliday gt 0) curHoliday
  Math.ceil(curHoliday/(1000606024))
  holidayCntMsg Only curHoliday days until
  St. Patricks Day! break

109
Slide 109

• Place the insertion point on line 17
• Enter the JavaScript code from SLIDE 108

110
Slide 110

• case 5 case 6 var tHoliday new Date(July
  4, 2001) var curHoliday tHoliday.getTime()-cur
  Day.getTime() if (curHoliday gt 0)
  curHoliday Math.ceil(curHoliday/(1000606024))
  holidayCntMsg Only curHoliday days
  until the 4ltSUPgtthlt/SUPgt of July! break

111
Slide 111

• case 9 var tHoliday new Date(October 31,
  2001) var curHoliday tHoliday.getTime()-curDay
  .getTime() if (curHoliday gt 0)
  curHoliday Math.ceil(curHoliday/(1000606024))
  holidayCntMsg Only curHoliday days
  until Halloween! break

112
Slide 112

• case 11 var tHoliday new Date(December 25,
  2001) var curHoliday tHoliday.getTime()-curDay
  .getTime() if (curHoliday gt 0)
  curHoliday Math.ceil(curHoliday/(1000606024))
  holidayCntMsg Only curHoliday days
  until Christmas! break return
  holidayCntMsg

113
Slide 113

• ltSCRIPT LANGUAGEJavaScriptgtlt!-- Hide from old
  browsers var holidayMsg HolidayDays() document
  .write(ltH2gtltCENTERgtholidayMsglt/CENTERgtlt/H2gt)
  //--gtlt/SCRIPTgt

114
Slide 114

• Position the insertion point on line 67
• Enter the JavaScript Code from SLIDE 113
• Save and test your file

115
Slide 115
116
Slide 116

• Place the insertion point immediately before the
  gt on line 81
• Press the spacebar and type onmouseoveronPicinic
  ()

117
Slide 117

• Place the insertion point immediately before the
  gt on line 82
• Press the spacebar and type onmouseoveronDinnerP
  arty()

118
Slide 118

• Place the insertion point immediately before the
  gt on line 83
• Press the spacebar and type onmouseoveronWedding
  ()

119
Slide 119

• function onPicinic() document.Image1.src
  catering2.jpg document.Image2.src
  catering3.jpg

120
Slide 120

• function onDinnerParty() document.Image1.src
  catering4.jpg document.Image2.src
  catering5.jpg

121
Slide 121

• function onWedding() document.Image1.src
  catering6.jpg document.Image2.src
  catering7.jpg

122
Slide 122

• Place the insertion point on line 68
• Enter the JavaScript from SLIDES 119 122
• Save and Test your page

123
Slide 123

• Place the insertion point on line 116, right
  before the gt
• Press the Spacebar and then type
  onchangesetPicinicPrice(PicinicMenu)

124
Slide 124

• Place the insertion point on line 162, right
  before the gt
• Press the Spacebar and then type
  onchangesetDinnerPrice(DinnerMenu)

125
Slide 125

• Place the insertion point on line 216, right
  before the gt
• Press the Spacebar and then type
  onchangesetWeddingrPrice(WeddingMenu)

126
Slide 126

• picPrices newArray(None Selected, Please
  Call, 10.95 per person, 10.95 per person,
  11.95 per person, 13.95 per
  person) function setPicnicPrice(myForm)
  document.PicnicQuantity.Price.value
  document.PicnicQuantity.PicExtPrice.value
  document.PicnicQuantity.PicQty.value
  var itemSelect myForm.PicnicItem.selectedIn
  dex document.PicnicPrice.Price.value
  picPricesitemSelect document.PicnicQuantity.Pi
  cQty.focus()

127
Slide 127

• Place the insertion point on line 73
• Enter the JavaScript function from SLIDE 126

128
Slide 128

• dinnerPrices newArray("None Selected", "13.95
  per person", "16.95 per person", "18.95 per
  person", "12.95 per person", "12.95 per
  person")
• function setDinnerPrice(myForm)
• document.DinnerQuantity.Price.value ""
• document.DinnerQuantity.DinExtPrice.value ""
• document.DinnerQuantity.DinQty.value ""
• var itemSelect myForm.DinnerItem.selectedInde
  x
• document.DinnerPrice.Price.value
  dinnerPricesitemSelect
• document.DinnerQuantity.DinQty.focus()

129
Slide 129

• weddingPrices newArray("None Selected", "13.95
  per person", "16.95 per person", "18.95 per
  person", "28.95 per person")
• function setWedingPrice(myForm)
• document.WeddingQuantity.Price.value ""
• document.WeddingQuantity.WedExtPrice.value
  ""
• document.WeddingQuantity.WedQty.value ""
• var itemSelect myForm.PicnicItem.selectedInde
  x
• document.WeddingPrice.Price.value
  weddingPricesitemSelect
• document.WeddingQuantity.WedQty.focus()

130
SLIDE 130

• Place the insertion point on line 93
• Enter the syntax from SLIDES 128 129
• Your syntax should now look like this ?

131
Slide 131

• Place the insertion point on line 169 immediately
  before the gt
• Press the spacebar and type onchange"picPrice(Pic
  nicQuantity) but do not press ENTER

132
Slide 132

• Place the insertion point on line 211 immediately
  before the gt
• Press the spacebar and type onchange"dinPrice(Din
  nerQuantity)"but do not press ENTER

133
Slide 133

• Place the insertion point on line 211 immediately
  before the gt
• Press the spacebar and type onchange"wedPrice(Wed
  dingQuantity) but do not press ENTER

134
SLIDE 134

• function picPrice(myForm)
• var picnicQty myForm.picQty.value
• var EstPrice picnicQty document.PicnicPrice.
  Price.value.substring(1,6)
• var EstPrice new String(EstPrice)
• document.PicnicQuantity.PicExtPrice.value
  dollarFormat(EstPrice)

135
Slide 135

• function dinPrice(myForm)
• var dinnerQty myForm.dinQty.value
• var EstPrice picnicQty document.DinnerPrice.
  Price.value.substring(1,6)
• var EstPrice new String(EstPrice)
• document.DinnerQuantity.DinExtPrice.value
  dollarFormat(EstPrice)

136
Slide 136

• function wedPrice(myForm)
• var weddingcQty myForm.picQty.value
• var EstPrice weddingQty document.WeddingPric
  e.Price.value.substring(1,6)
• var EstPrice new String(EstPrice)
• document.WeddingQuantity.WedExtPrice.value
  dollarFormat(EstPrice)

137
Slide 137

• Position the insertion point on line 103
• Enter the JavaScript Functions from SLIDES 134 -
  136

138
Slide 138
139
Slide 139
140
Slide 140

• Place the insertion point on line 124
• Enter the code from SLIDE 138
• Save the Web Page
• Test it using the data from SILDE 139

141
Slide 141
142
Slide 142
143
Slide 143

• document.cookie StudentNameJoe Student

144
Slide 144

• ltSCRIPT LANGUAGEJavaScriptgtlt!Hide from old
  browsers function addCookie(tag,value) var
  expireDate new Date() var expireString
  expireDate.setTime(expireDate.getTime()(1000
  606024365)) expireString expires
  expireDate.toGMTString() document.cookie tag
  escape(value) expireString
  //--gtlt/SCRIPTgt

145
Slide 145

• Position the insertion point on line 4
• Enter the JavaScript code from SLIDE 144

146
Slide 146

• function updateValues()
• if (document.StudentInformation.StudentName.value
  ! null
• document.StudentInformation.StudentName.value !
  "")
• addCookie("StudentName", document.StudentInformat
  ion.StudentName.value)

147
Slide 147

• Position the insertion point on line 14
• Enter the JavaScript code from SLIDE 146

148
Slide 148

• var numElements document.StudentInformation.ele
  ments.length
• for (var i1 iltnumElements - 2 i)
• if (document.StudentInformation.elementsi.valu
  e ! null
• document.StudentInformation.elementsi.valu
  e ! "")
• addCookie(document.StudentInformation.elementsi
  .name,
• document.StudentInformation.elementsi.check
  ed)

149
Slide 149

• Place the insertion point at the end of line 17
  and press the ENTER key twice
• Enter the JavaScript code from SLIDE 148

150
Slide 150

• Place the insertion point at the end of line 40
  directly before the gt bracket and press the
  spacebar
• Type onSubmit"return updateValues() but do not
  press ENTER

151
Slide 151

• function getCookie(tag)
• var value null
• var myCookie document.cookie ""
• var findTag tag ""
• var endPos
• if (myCookie.length gt 0)
• var beginPos myCookie.indexOf(findTag)
• if (beginPos ! -1)
• beginPos beginPOs findTag.length
• endPos myCookie.indexOf("",beginPos)
• if (endPos -1)
• endPos myCookie.length
• value unescape(myCookie.substring(beginPos,
  endPos))
• return value

152
Slide 152

• Place the insertion point on line 29
• Enter the code from SLIDE 151

153
Slide 153

• var checkCookie ""
• checkCookie getCookie("StudentName")
• if (checkCookie !null)
• // location "frames.htm"

154
Slide 154

• Place the insertion point on line 6
• Enter the code from SLIDE 153

155
Slide 155

• function deleteCookies()
• var Yesterday 2460601000
• var expireDate new Date()
• expireDate.setTime (expireDate.getTime() -
  Yesterday)
• document.cookie "StudentNamenothing
  expires" expireDate.toGMTString()
• document.StudentInformation.StudentName.value
  ""

156
Slide 156

• Place the insertion point on line 54
• Enter the code from SLIDE 155 and press ENTER
  twice

157
Slide 157

• Place the insertion point at the end of line 75
  directly before the gt bracket and press the
  spacebar
• Type onReset"return deleteCookies() but do not
  press ENTER

158
Slide 158
159
Slide 159

• Position the insertion point on line 8
• Type alert("The value of checkCookie is
  "checkCookie)
• Press ENTER, then press TAB

160
Slide 160

• Open the file in your browser
• Click the OK button to remove the alert() message
• Type your name into the Student Name Field
• Click the check boxes for the following
  organizations
• Alumni Association, Astronomy Club, Student
  Government, Intramural Sports, Scuba Club
• Click the Continue button

161
Slide 161

• Position the insertion point on line 8
• Remove alert("The value of checkCookie is
  "checkCookie)
• Position the insertion point on line 9 before the
  //
• Press the delete key twice

162
Slide 162

• ltSCRIPT LANGUAGE"JavaScript"gt
• lt!--Hide from old browsers
• function ClubArray(length)
• var i 0
• this.length2 length
• for (i0 iltlength i)
• thisi 0
• return this
• //--gt
• lt/SCRIPTgt

163
Slide 163

• Position the insertion point on line 2
• Type the JavaScript as it appears on SLIDE 162

164
Slide 164

• function AddClub(ClubName, URL, Cookie)
• this.ClubName ClubName
• this.URL URL
• this.Cookie Cookie
• return this

165
Slide 165

• Position the insertion point on line 12
• Type the JavaScript as it appears on SLIDE 164

166
Slide 166

• var totClubs 6
• var Clubs ClubArray(totClubs)
• Clubs0 new AddClub("Alumni Association",
  "alumni.htm", "interest1")
• Clubs1 new AddClub("Astronomy Club",
  "astronomy.htm", "interest2")
• Clubs2 new AddClub("Student Government",
  "stugovt.htm", "interest3")
• Clubs3 new AddClub("Radio and Television
  Club", "radio.htm", "interest4")
• Clubs4 new AddClub("Intramural Sports",
  "intramurals.htm", "interest5")
• Clubs5 new AddClub("Scuba Club",
  "scuba.htm", "interest6")

167
Slide 167

• Position the insertion point on line 19
• Type the JavaScript as it appears on SLIDE 166

168
Slide 168

• function getCookie(tag)
• var value null
• var myCookie document.cookie ""
• var findTag tag ""
• var endPos
• if (myCookie.length gt 0)
• var beginPos myCookie.indexOf(findTag)
• if (beginPos ! -1)
• beginPos beginPos findTag.length
• endPos myCookie.indexOf("", beginPos)
• if (endPos -1)
• endPos myCookie.length
• value unescape(myCookie.substring(beginPos,
  endPos))
• return value

169
Slide 169

• Position the insertion point on line 19
• Type the JavaScript as it appears on SLIDE 168

170
Slide 170

• ltSCRIPT LANGUAGE"JavaScript"gt
• lt!--Hide from old browsers
• var CookieValue ""
• CookieValue getCookie("StudentName")
• if (CookieValue ! null)
• document.write("ltTABLE BORDER0 CELLPADDING0
  CELLSPACING0 WIDTH100gt")
• document.write("ltTR ALIGNCENTERgtltTDgtltBgtClubs
  of Interestlt/Bgtlt/TDgtlt/TRgt")
• document.write("ltTR ALIGNCENTERgtltTDgtltBgtforlt/Bgtlt
  /TDgtlt/TRgt")
• document.write("ltTR ALIGNCENTERgtltTDgtltBgt"
  CookieValue "lt/Bgtlt/TDgtlt/TRgt")
• document.write("lt/TABLEgt")
• document.write("ltBRgt")

171
Slide 171

• Position the insertion point on line 52
• Type the JavaScript as it appears on SLIDE 170

172
Slide 172

• document.write("ltTABLE BORDER0 CELLPADDING0
  CELLSPACING12 WIDTH100gt")
• for (vari0 ilttotClubs i)
• CookieValue ""
• CookieValue getCookie(Clubsi.Cookie)
• if(CookieValue ! null)
• if(CookieValue "true")
• document.write("ltTR ALIGNCENTERgtltTDgt"
  Clubsi.ClubName "lt/TDgtlt/TRgt")
• document.write("lt/TABLEgt")

173
Slide 173

• Position the insertion point on line 65
• Type the JavaScript as it appears on SLIDE 172
• Save your page as side.htm and test it to make
  sure it works

174
Slide 174

• function setEditMode()
• var expireDate new Date()
• expireDate.setTime(expireDate.getTime()
  (1000606024365))
• document.cookie "EditMode" escape("true")
  " expires" expireDate.toGmtString() ""
• top.location.href "studentcouncil.htm"

175
Slide 175

• Position the insertion point on line 38
• Type the JavaScript as it appears on SLIDE 174

176
Slide 176

• Position the insertion point on line 88 Directly
  before the C in Change
• Type ltA href"JavaScriptsetEditMode()"gt
• Position the insertion point on line 88 Directly
  after the s in Preferences
• Type lt/Agt

177
Slide 177

• var checkEditMode ""
• checkEditMode getCookie("EditMode")
• if (checkEditMode ! "true")
• var checkCookie ""
• checkCookie getCookie("StudentName")
• alert("The value of checkCookie is "
  checkCookie)
• if (checkCookie ! null)
• // location "frames.htm"

178
Slide 178

• Position the insertion point on line 5 and press
  ENTER
• Enter the code from SLIDE 177

179
Slide 179

• function InitializeValues()
• var CookieValue ""
• CookieValue getCookie("StudentName")
• if (CookieValue ! null)
• document.StudentInformation.StudentName.
  value CookieValue

180
Slide 180

• Position the insertion point on line 68 and press
  ENTER
• Enter the code from SLIDE 179

181
Slide 181

• var numElements document.StudentInformati
  on.elements.length
• for (var i1 iltnumElements - 2 i)
• CookieValue ""
• CookieValue getCookie(document.Studen
  tInformation.elementsi.name)
• if (CookieValue ! null)
• if (CookieValue "true")
  document.StudentInformation.elementsi.checked
  true
• if (CookieValue "false")
  document.StudentInformation.elementsi.checked
  
• false
• addCookie("EditMode", "false")

182
Slide 182

• Position the insertion point on line 74 and press
  ENTER
• Enter the code from SLIDE 181

183
Slide 183

• Position the insertion point on line 91 directly
  before the gt
• Type onLoad"InitializeValues() but do not press
  ENTER

184
Slide 184

• Position the insertion point on line 78 directly
  after the ltTDgt tag
• Type ltA HREF" Clubsi.URL
  "TARGETLOWERRIGHTgt
• Position the insertion point on line 78 directly
  before the lt/TDgt tag
• Type lt/Agt but do not press ENTER

185
Slide 185

• Save your page and test it by not only opening
  it, but by editing the preferences and clicking
  page links

186
Slide 186

• ltHTMLgt
• ltTITLEgtVal-U Conputers Shopping Pagelt/TITLEgt
• ltFRAMESET ROWS"0,", FRAMEBORDERNO BORDER0
  FRAMESPACING0gt
• ltFRAME NAME"HIDDEN" SRC"javascript.htm"gt
• ltFRAME NAME"MAIN" SRC"order.htm"
  MARGINHEIGHT0 MARGINWIDTH0gt
• lt/FRAMESETgt
• lt/HTMLgt

187
Slide 187

• In a new Notepad file, position the insertion
  point in line 1
• Enter the syntax from SLIDE 186
• Save the file as valucomp.htm

188
Slide 188
189
Slide 189

• ltHTMLgt
• ltSCRIPT LANGUAGE"JAVASCRIPT"gt
• lt!-- Hide from old browsers
• var numItems 0
• var ShoppingCart new Object
• function addItem(Description, Price, ItemNum)
• this.Description Description
• this.Price Price
• this.ItemNum ItemNum
• this.display printItem
• return this
• //--gt
• lt/SCRIPTgt
• lt/HTMLgt

190
Slide 190

• On a new notepad file, position the insertion
  point on line 1
• Enter the code from SLIDE 189

191
Slide 191

• function addtoCart(Description, Price)
• ShoppingCartnumItems new addItem(Description
  , Price, numItems)
• numItems numItems 1
• alert(Description " has been added to your
  shopping cart.")

192
Slide 192

• Place the insertion point on line 14 and press
  the ENTER key
• Insert the text from SLIDE 191 and press the
  ENTER key

193
Slide 193

• function deleteItem(ItemNum)
• delete ShoppingCartItemNum
• viewCart()

194
Slide 194

• Place the insertion point on line 20 and press
  the ENTER key
• Insert the text from SLIDE 193 and press the
  ENTER key

195
Slide 195

• function printItem(deleteFlag, TargetDocument)
• with(TargetDocument)
• write(ltTRgtltTDgt" this.Description "lt/TDgt")
• write("ltTD ALIGNRIGHTgt" this.Price
  "lt/TDgt")
• if (deleteFlag true)
• write("ltTDgtltA HREF'JavaScripttop.HIDDEN.dele
  teItem(" this.ItemNum ")'gtRemove from
  cartlt/Agtlt/TDgt")
• write("lt/TRgt")

196
Slide 196
197
Slide 197

• Position the insertion point on line 25 and press
  ENTER
• Enter the JavaScript from SLIDE 195 and then
  press ENTER

198
Slide 198

• function viewCart()
• var cartTotal 0
• with (top.MAIN.document)
• write()
• close()
• write("ltHTMLgtltTITLEgtVal-u Computers Shopping
  Cartlt/TITLEgt")
• write("ltBODY BGCOLORA0D0E0gtltCENTERgt")
• write(ltTABLE BORDER0gtltTRgt")
• write("ltTDgtltIMG SRCcomp2.jpggtlt/TDgt")
• write(ltTD ALIGNCENTER VALIGNBOTTOMgt")
• write("ltH2gtVal-u Computers Shopping
  Cartlt/H2gtlt/TDgt")
• write("ltTDgtltIMG SRCcomp3.jpggtlt/TDgtlt/TRgt")
• write("lt/TABLEgt")
• write("ltBRgtltHRgtltBRgt")
• write(ltTABLE BORDER1 CELLPADDING3
  CELLSPACING1 WIDTH500
• BGCOLORLIGHTYELLOWgt")

199
Slide 199

• Position the insertion point on line 35 and press
  the ENTER key twice
• Enter the syntax from SLIDE 198 and then press
  the ENTER key

200
Slide 200

• for (i in ShoppingCart)
• cartTotal cartTotal ShoppingCarti.Price
• if (ShoppingCarti.ItemNum ! null)
• ShoppingCarti.display(true,
  top.MAIN.document)

201
Slide 201
202
Slide 202

• Position the insertion point on line 52 and press
  the ENTER key
• Enter the syntax from SLIDE 200 and then press
  the ENTER key

203
Slide 203

• write("ltTRgtltTDgtTotallt/TDgtltTD ALIGNRIGHTgt"
  cartTotal "lt/TDgt")
• write("ltTDgtnbsplt/TDgtlt/TRgtlt/TABLEgtltBRgt")
• write("ltBRgtlt/CENTERgtlt/BODYgtlt/HTMLgt")

204
Slide 204

• Position the insertion point on line 58 and press
  the ENTER key
• Enter the syntax from SLIDE 203 and then press
  the ENTER key
• Save your Web page as javascript.htm, if you
  havent already done so

205
Slide 205

• Position the insertion point on line 52, press
  the ENTER key, and press the SPACEBAR twice
• Type Press V to view the shopping cart or click
  ltA HREFJavaScripttop.HIDDEN.viewCart()gt
  herelt/Agt but do not press the ENTER key

206
Slide 206

• Position the insertion point on the end of line
  15 and press the ENTER key
• Type ltA HREF"JavaScripttop.HIDDEN.addtoCart('Pen
  tiumreg III 650 MHz', 950)"gtAdd to Shopping
  Cartlt/Agt but do not press ENTER

207
Slide 207

• Position the insertion point on the end of line
  21 and press the ENTER key
• Type ltA HREF"JavaScripttop.HIDDEN.addtoCart('Pen
  tiumreg III 600 MHz', 850)"gtAdd to Shopping
  Cartlt/Agt but do not press ENTER
• Position the insertion point on the end of line
  27 and press the ENTER key
• Type ltA HREF"JavaScripttop.HIDDEN.addtoCart('Pen
  tiumreg III 550 MHz', 800)"gtAdd to Shopping
  Cartlt/Agtbut do not press ENTER

208
Slide 208

• Position the insertion point on the end of line
  33 and press the ENTER key
• Type ltA HREF"JavaScripttop.HIDDEN.addtoCart('AMD
  Athlon153 650 MHz', 875)"gtAdd to Shopping
  Cartlt/Agt but do not press ENTER
• Position the insertion point on the end of line39
  and press the ENTER key
• Type ltA HREF"JavaScripttop.HIDDEN.addtoCart('AMD
  Athlon153 600 MHz', 825)"gtAdd to Shopping
  Cartlt/Agtbut do not press ENTER

209
Slide 209

• Position the insertion point on the end of line
  45 and press the ENTER key
• Type ltA HREF"JavaScripttop.HIDDEN.addtoCart('Pen
  tiumreg II 500 MHz', 650)"gtAdd to Shopping
  Cartlt/Agtbut do not press ENTER
• Position the insertion point on the end of line
  51 and press the ENTER key
• Type ltA HREF"JavaScripttop.HIDDEN.addtoCart('AMD
  -K6reg 500 MHz/Modem', 550)"gtAdd to Shopping
  Cartlt/Agt but do not press ENTER

210
Slide 210

• Position the insertion point on the end of line
  57 and press the ENTER key
• Type ltA HREF"JavaScripttop.HIDDEN.addtoCart('AMD
  -K6reg 500 MHz/Network', 575)"gtAdd to Shopping
  Cartlt/Agtbut do not press ENTER
• Save and test your Web page using the Steps on
  SLIDE 211

211
Slide 211

• Open the valucomp.htm file in your browser
• Click the Add to Shopping Cart link next to the
  Pentium III 650 MHz system
• Click the Add to Shopping Cart link next to the
  Pentium III 600 MHz system, the AMD Athalon 650
  MHz system, and the AMD Athlon 600 MHz system
• Click the link on the underlined word, here,
  above the list of items to be added to the
  shopping cart
• Click the Remove from cart link in the row that
  contains the AMD Athalon 650 MHz system
• Close your browser and open the javascript.htm
  file in Notepad

212
Slide 212
213
Slide 213

• function goBack()
• top.MAIN.history.go(-2)

214
Slide 214

• Position the insertion point on line 64 and press
  ENTER
• Enter the code from SLIDE 213

215
Slide 215

• write("ltA HREF'JavaScripttop.HIDDEN.goBack()'
  gtReturn to Order Pagelt/AgtltBRgtltBRgt")
• write("ltA HREF'JavaScripttop.HIDDEN.printOrder
  ()'gtDisplay Printable Order Formlt/Agt")

216
Slide 216

• Position the insertion point on line 62 and press
  ENTER
• Enter the code from SLIDE 215

217
Slide 217
218
Slide 218

• Position the insertion point on line 71 and press
  ENTER
• Enter the code from SLIDE 217

219
Slide 219

• for (i in ShoppingCart)
• CartTotal CartTotal
  ShoppingCarti.Price
• if (ShoppingCarti.ItemNum ! null)
• ShoppingCarti.display(false,
  order.document)

220
Slide 220

• Position the insertion point on line 90 and press
  ENTER
• Enter the code from SLIDE 219

221
Slide 221

• write("ltTRgtltTDgtlt/TDgtltTD ALIGNRIGHTgt"
  CartTotal "lt/TDgtlt/TRgt")
• write("lt/TABLEgt")
• write("lt/CENTERgtlt/BODYgtlt/HTMLgt")

222
Slide 222

• Position the insertion point on line 96 and press
  ENTER
• Enter the code from SLIDE 221

223
Slide 223

• function keyPressed(key)
• var sentString ""
• if (navigator.appName "Netscape")
• var KeyChar new Number(key.which)
• sentString sentString unescape(""
  KeyChar.toString(16))
• if (sentString "v" sentString
  "V")
• viewCart()
• if (navigator.appName "Microsoft
  Internet Explorer")
• sentString sentString
  String.fromCharCode(top.MAIN.window.event.keyCode)
  
• if (sentString "v" sentString
  "V")
• viewCart()

224
Slide 224
225
Slide 225

• function keyPressed(key)
• var sentString ""
• if (navigator.appName "Netscape")
• var KeyChar new Number(key.which)
• sentString sentString unescape(""
  KeyChar.toString(16))
• if (sentString "v" sentString
  "V")
• viewCart()

226
Slide 226

• Position the insertion point on line 103 and
  press ENTER
• Enter the code from SLIDE 225

227
Slide 227

• if (navigator.appName "Microsoft Internet
  Explorer")
• sentString sentString
  String.fromCharCode(top.MAIN.window.event.keyCode)
  
• if (sentString "v" sentString
  "V")
• viewCart()

228
Slide 228

• Position the insertion point on line 112 and
  press ENTER
• Enter the code from SLIDE 227

229
Slide 229

• top.MAIN.document.onKeyPress
  top.HIDDEN.keyPressed
• top.MAIN.focus()

230
Slide 230

• Position the insertion point on line 6 and press
  ENTER
• Enter the code from SLIDE 229

231
Slide 231

• ltBODY BGCOLORA0D0E0 onKeyPress"JavaScripttop.H
  IDDEN.keyPressed()"gt

232
Slide 232

• Open the order.htm notepad file
• Position the insertion point on line 2 just
  before the gt character then press the spacebar
  once
• Edit the code to match what is on SLIDE 231

233
Slide 233

• function printOrder()
• var CartTotal 0
• var Name ""
• var CustomerID ""
• var PhoneNumber ""
• Name prompt("Enter your name", "")
• CustomerID prompt("Enter your customer
  ID", "")
• PhoneNumber prompt("Enter your phone
  number", "")

234
Slide 234

• Open the javascript.htm file
• Position the insertion point on line 75 and press
  ENTER
• Enter the code from SLIDE 233

235
Slide 235

• write("ltTRgtltTDgtlt/TDgtltTD ALIGNRIGHTgt"
  CartTotal "lt/TDgtlt/TRgt")
• write("lt/TABLEgt")
• write("lt/CENTERgtlt/BODYgtlt/HTMLgt")

236
Slide 236

• Position the insertion point on line 97 and press
  ENTER
• Enter the code from SLIDE 235

237
Slide 237

• Open the valucomp.htm page in your browser
• Add 4 systems to your shopping cart
• Press the v key to view the order form
• Click the Display Printable Order Form to display
  the form
• Enter the information as requested
• Click the OK button in the dialog box
• The form is ready to be printed