ÿþ<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40"> <head> <meta http-equiv=Content-Type content="text/html; charset=unicode"> <meta name=ProgId content=Word.Document> <meta name=Generator content="Microsoft Word 14"> <meta name=Originator content="Microsoft Word 14"> <link rel=File-List href="Lab07_files/filelist.xml"> <link rel=Edit-Time-Data href="Lab07_files/editdata.mso"> <!--[if !mso]> <style> v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VML);} .shape {behavior:url(#default#VML);} </style> <![endif]--> <title>IT350 Lab</title> <!--[if gte mso 9]><xml> <o:DocumentProperties> <o:Author>mjlenn</o:Author> <o:Template>Normal</o:Template> <o:LastAuthor>Admiral</o:LastAuthor> <o:Revision>10</o:Revision> <o:TotalTime>149</o:TotalTime> <o:Created>2008-10-08T19:43:00Z</o:Created> <o:LastSaved>2011-10-18T13:48:00Z</o:LastSaved> <o:Pages>3</o:Pages> <o:Words>1401</o:Words> <o:Characters>7989</o:Characters> <o:Company>US Naval Academy</o:Company> <o:Lines>66</o:Lines> <o:Paragraphs>18</o:Paragraphs> <o:CharactersWithSpaces>9372</o:CharactersWithSpaces> <o:Version>14.00</o:Version> </o:DocumentProperties> <o:OfficeDocumentSettings> <o:AllowPNG/> </o:OfficeDocumentSettings> </xml><![endif]--> <link rel=themeData href="Lab07_files/themedata.thmx"> <link rel=colorSchemeMapping href="Lab07_files/colorschememapping.xml"> <!--[if gte mso 9]><xml> <w:WordDocument> <w:Zoom>90</w:Zoom> <w:SpellingState>Clean</w:SpellingState> <w:GrammarState>Clean</w:GrammarState> <w:TrackMoves>false</w:TrackMoves> <w:TrackFormatting/> <w:ValidateAgainstSchemas/> <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid> <w:IgnoreMixedContent>false</w:IgnoreMixedContent> <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText> <w:DoNotPromoteQF/> <w:LidThemeOther>EN-US</w:LidThemeOther> <w:LidThemeAsian>X-NONE</w:LidThemeAsian> <w:LidThemeComplexScript>X-NONE</w:LidThemeComplexScript> <w:Compatibility> <w:BreakWrappedTables/> <w:SnapToGridInCell/> <w:WrapTextWithPunct/> <w:UseAsianBreakRules/> <w:DontGrowAutofit/> <w:SplitPgBreakAndParaMark/> <w:DontVertAlignCellWithSp/> <w:DontBreakConstrainedForcedTables/> <w:DontVertAlignInTxbx/> <w:Word11KerningPairs/> <w:CachedColBalance/> </w:Compatibility> <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel> <m:mathPr> <m:mathFont m:val="Cambria Math"/> <m:brkBin m:val="before"/> <m:brkBinSub m:val="&#45;-"/> <m:smallFrac m:val="off"/> <m:dispDef/> <m:lMargin m:val="0"/> <m:rMargin m:val="0"/> <m:defJc m:val="centerGroup"/> <m:wrapIndent m:val="1440"/> <m:intLim m:val="subSup"/> <m:naryLim m:val="undOvr"/> </m:mathPr> <u1:mathPr> <u1:mathFont u1:val="Cambria Math"/> <u1:brkBin u1:val="before"/> <u1:brkBinSub u1:val="--"/> <u1:smallFrac u1:val="off"/> <u1:dispDef/> <u1:lMargin u1:val="0"/> <u1:rMargin u1:val="0"/> <u1:defJc u1:val="centerGroup"/> <u1:wrapIndent u1:val="1440"/> <u1:intLim u1:val="subSup"/> <u1:naryLim u1:val="undOvr"/> </u1:mathPr> </w:WordDocument> </xml><![endif]--><!--[if gte mso 9]><xml> <w:LatentStyles DefLockedState="false" DefUnhideWhenUsed="false" DefSemiHidden="false" DefQFormat="false" LatentStyleCount="267"> <w:LsdException Locked="false" Priority="1" Name="Default Paragraph Font"/> <w:LsdException Locked="false" Priority="99" Name="No List"/> <w:LsdException Locked="false" Priority="99" SemiHidden="true" Name="Placeholder Text"/> <w:LsdException Locked="false" Priority="1" QFormat="true" Name="No Spacing"/> <w:LsdException Locked="false" Priority="60" Name="Light Shading"/> <w:LsdException Locked="false" Priority="61" Name="Light List"/> <w:LsdException Locked="false" Priority="62" Name="Light Grid"/> <w:LsdException Locked="false" Priority="63" Name="Medium Shading 1"/> <w:LsdException Locked="false" Priority="64" Name="Medium Shading 2"/> <w:LsdException Locked="false" Priority="65" Name="Medium List 1"/> <w:LsdException Locked="false" Priority="66" Name="Medium List 2"/> <w:LsdException Locked="false" Priority="67" Name="Medium Grid 1"/> <w:LsdException Locked="false" Priority="68" Name="Medium Grid 2"/> <w:LsdException Locked="false" Priority="69" Name="Medium Grid 3"/> <w:LsdException Locked="false" Priority="70" Name="Dark List"/> <w:LsdException Locked="false" Priority="71" Name="Colorful Shading"/> <w:LsdException Locked="false" Priority="72" Name="Colorful List"/> <w:LsdException Locked="false" Priority="73" Name="Colorful Grid"/> <w:LsdException Locked="false" Priority="60" Name="Light Shading Accent 1"/> <w:LsdException Locked="false" Priority="61" Name="Light List Accent 1"/> <w:LsdException Locked="false" Priority="62" Name="Light Grid Accent 1"/> <w:LsdException Locked="false" Priority="63" Name="Medium Shading 1 Accent 1"/> <w:LsdException Locked="false" Priority="64" Name="Medium Shading 2 Accent 1"/> <w:LsdException Locked="false" Priority="65" Name="Medium List 1 Accent 1"/> <w:LsdException Locked="false" Priority="99" SemiHidden="true" Name="Revision"/> <w:LsdException Locked="false" Priority="34" QFormat="true" Name="List Paragraph"/> <w:LsdException Locked="false" Priority="29" QFormat="true" Name="Quote"/> <w:LsdException Locked="false" Priority="30" QFormat="true" Name="Intense Quote"/> <w:LsdException Locked="false" Priority="66" Name="Medium List 2 Accent 1"/> <w:LsdException Locked="false" Priority="67" Name="Medium Grid 1 Accent 1"/> <w:LsdException Locked="false" Priority="68" Name="Medium Grid 2 Accent 1"/> <w:LsdException Locked="false" Priority="69" Name="Medium Grid 3 Accent 1"/> <w:LsdException Locked="false" Priority="70" Name="Dark List Accent 1"/> <w:LsdException Locked="false" Priority="71" Name="Colorful Shading Accent 1"/> <w:LsdException Locked="false" Priority="72" Name="Colorful List Accent 1"/> <w:LsdException Locked="false" Priority="73" Name="Colorful Grid Accent 1"/> <w:LsdException Locked="false" Priority="60" Name="Light Shading Accent 2"/> <w:LsdException Locked="false" Priority="61" Name="Light List Accent 2"/> <w:LsdException Locked="false" Priority="62" Name="Light Grid Accent 2"/> <w:LsdException Locked="false" Priority="63" Name="Medium Shading 1 Accent 2"/> <w:LsdException Locked="false" Priority="64" Name="Medium Shading 2 Accent 2"/> <w:LsdException Locked="false" Priority="65" Name="Medium List 1 Accent 2"/> <w:LsdException Locked="false" Priority="66" Name="Medium List 2 Accent 2"/> <w:LsdException Locked="false" Priority="67" Name="Medium Grid 1 Accent 2"/> <w:LsdException Locked="false" Priority="68" Name="Medium Grid 2 Accent 2"/> <w:LsdException Locked="false" Priority="69" Name="Medium Grid 3 Accent 2"/> <w:LsdException Locked="false" Priority="70" Name="Dark List Accent 2"/> <w:LsdException Locked="false" Priority="71" Name="Colorful Shading Accent 2"/> <w:LsdException Locked="false" Priority="72" Name="Colorful List Accent 2"/> <w:LsdException Locked="false" Priority="73" Name="Colorful Grid Accent 2"/> <w:LsdException Locked="false" Priority="60" Name="Light Shading Accent 3"/> <w:LsdException Locked="false" Priority="61" Name="Light List Accent 3"/> <w:LsdException Locked="false" Priority="62" Name="Light Grid Accent 3"/> <w:LsdException Locked="false" Priority="63" Name="Medium Shading 1 Accent 3"/> <w:LsdException Locked="false" Priority="64" Name="Medium Shading 2 Accent 3"/> <w:LsdException Locked="false" Priority="65" Name="Medium List 1 Accent 3"/> <w:LsdException Locked="false" Priority="66" Name="Medium List 2 Accent 3"/> <w:LsdException Locked="false" Priority="67" Name="Medium Grid 1 Accent 3"/> <w:LsdException Locked="false" Priority="68" Name="Medium Grid 2 Accent 3"/> <w:LsdException Locked="false" Priority="69" Name="Medium Grid 3 Accent 3"/> <w:LsdException Locked="false" Priority="70" Name="Dark List Accent 3"/> <w:LsdException Locked="false" Priority="71" Name="Colorful Shading Accent 3"/> <w:LsdException Locked="false" Priority="72" Name="Colorful List Accent 3"/> <w:LsdException Locked="false" Priority="73" Name="Colorful Grid Accent 3"/> <w:LsdException Locked="false" Priority="60" Name="Light Shading Accent 4"/> <w:LsdException Locked="false" Priority="61" Name="Light List Accent 4"/> <w:LsdException Locked="false" Priority="62" Name="Light Grid Accent 4"/> <w:LsdException Locked="false" Priority="63" Name="Medium Shading 1 Accent 4"/> <w:LsdException Locked="false" Priority="64" Name="Medium Shading 2 Accent 4"/> <w:LsdException Locked="false" Priority="65" Name="Medium List 1 Accent 4"/> <w:LsdException Locked="false" Priority="66" Name="Medium List 2 Accent 4"/> <w:LsdException Locked="false" Priority="67" Name="Medium Grid 1 Accent 4"/> <w:LsdException Locked="false" Priority="68" Name="Medium Grid 2 Accent 4"/> <w:LsdException Locked="false" Priority="69" Name="Medium Grid 3 Accent 4"/> <w:LsdException Locked="false" Priority="70" Name="Dark List Accent 4"/> <w:LsdException Locked="false" Priority="71" Name="Colorful Shading Accent 4"/> <w:LsdException Locked="false" Priority="72" Name="Colorful List Accent 4"/> <w:LsdException Locked="false" Priority="73" Name="Colorful Grid Accent 4"/> <w:LsdException Locked="false" Priority="60" Name="Light Shading Accent 5"/> <w:LsdException Locked="false" Priority="61" Name="Light List Accent 5"/> <w:LsdException Locked="false" Priority="62" Name="Light Grid Accent 5"/> <w:LsdException Locked="false" Priority="63" Name="Medium Shading 1 Accent 5"/> <w:LsdException Locked="false" Priority="64" Name="Medium Shading 2 Accent 5"/> <w:LsdException Locked="false" Priority="65" Name="Medium List 1 Accent 5"/> <w:LsdException Locked="false" Priority="66" Name="Medium List 2 Accent 5"/> <w:LsdException Locked="false" Priority="67" Name="Medium Grid 1 Accent 5"/> <w:LsdException Locked="false" Priority="68" Name="Medium Grid 2 Accent 5"/> <w:LsdException Locked="false" Priority="69" Name="Medium Grid 3 Accent 5"/> <w:LsdException Locked="false" Priority="70" Name="Dark List Accent 5"/> <w:LsdException Locked="false" Priority="71" Name="Colorful Shading Accent 5"/> <w:LsdException Locked="false" Priority="72" Name="Colorful List Accent 5"/> <w:LsdException Locked="false" Priority="73" Name="Colorful Grid Accent 5"/> <w:LsdException Locked="false" Priority="60" Name="Light Shading Accent 6"/> <w:LsdException Locked="false" Priority="61" Name="Light List Accent 6"/> <w:LsdException Locked="false" Priority="62" Name="Light Grid Accent 6"/> <w:LsdException Locked="false" Priority="63" Name="Medium Shading 1 Accent 6"/> <w:LsdException Locked="false" Priority="64" Name="Medium Shading 2 Accent 6"/> <w:LsdException Locked="false" Priority="65" Name="Medium List 1 Accent 6"/> <w:LsdException Locked="false" Priority="66" Name="Medium List 2 Accent 6"/> <w:LsdException Locked="false" Priority="67" Name="Medium Grid 1 Accent 6"/> <w:LsdException Locked="false" Priority="68" Name="Medium Grid 2 Accent 6"/> <w:LsdException Locked="false" Priority="69" Name="Medium Grid 3 Accent 6"/> <w:LsdException Locked="false" Priority="70" Name="Dark List Accent 6"/> <w:LsdException Locked="false" Priority="71" Name="Colorful Shading Accent 6"/> <w:LsdException Locked="false" Priority="72" Name="Colorful List Accent 6"/> <w:LsdException Locked="false" Priority="73" Name="Colorful Grid Accent 6"/> <w:LsdException Locked="false" Priority="19" QFormat="true" Name="Subtle Emphasis"/> <w:LsdException Locked="false" Priority="21" QFormat="true" Name="Intense Emphasis"/> <w:LsdException Locked="false" Priority="31" QFormat="true" Name="Subtle Reference"/> <w:LsdException Locked="false" Priority="32" QFormat="true" Name="Intense Reference"/> <w:LsdException Locked="false" Priority="33" QFormat="true" Name="Book Title"/> <w:LsdException Locked="false" Priority="37" SemiHidden="true" UnhideWhenUsed="true" Name="Bibliography"/> <w:LsdException Locked="false" Priority="39" SemiHidden="true" UnhideWhenUsed="true" QFormat="true" Name="TOC Heading"/> </w:LatentStyles> </xml><![endif]--> <style> <!-- /* Font Definitions */ @font-face {font-family:Batang; panose-1:2 3 6 0 0 1 1 1 1 1; mso-font-alt:¼ÕÐ; mso-font-charset:129; mso-generic-font-family:roman; mso-font-pitch:variable; mso-font-signature:-1342176593 1775729915 48 0 524447 0;} @font-face {font-family:Batang; panose-1:2 3 6 0 0 1 1 1 1 1; mso-font-alt:¼ÕÐ; mso-font-charset:129; mso-generic-font-family:roman; mso-font-pitch:variable; mso-font-signature:-1342176593 1775729915 48 0 524447 0;} @font-face {font-family:Cambria; panose-1:2 4 5 3 5 4 6 3 2 4; mso-font-charset:0; mso-generic-font-family:roman; mso-font-pitch:variable; mso-font-signature:-536870145 1073743103 0 0 415 0;} @font-face {font-family:Tahoma; panose-1:2 11 6 4 3 5 4 4 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:-520081665 -1073717157 41 0 66047 0;} @font-face {font-family:"\@Batang"; panose-1:2 3 6 0 0 1 1 1 1 1; mso-font-charset:129; mso-generic-font-family:roman; mso-font-pitch:variable; mso-font-signature:-1342176593 1775729915 48 0 524447 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-unhide:no; mso-style-qformat:yes; mso-style-parent:""; margin:0in; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:"Times New Roman","serif"; mso-fareast-font-family:Batang;} h1 {mso-style-unhide:no; mso-style-qformat:yes; mso-style-link:"Heading 1 Char"; mso-margin-top-alt:auto; margin-right:0in; mso-margin-bottom-alt:auto; margin-left:0in; mso-pagination:widow-orphan; mso-outline-level:1; font-size:24.0pt; font-family:"Times New Roman","serif"; mso-fareast-font-family:"Times New Roman"; mso-fareast-theme-font:minor-fareast;} h2 {mso-style-unhide:no; mso-style-qformat:yes; mso-style-link:"Heading 2 Char"; mso-margin-top-alt:auto; margin-right:0in; mso-margin-bottom-alt:auto; margin-left:0in; mso-pagination:widow-orphan; mso-outline-level:2; font-size:18.0pt; font-family:"Times New Roman","serif"; mso-fareast-font-family:"Times New Roman"; mso-fareast-theme-font:minor-fareast;} h3 {mso-style-unhide:no; mso-style-qformat:yes; mso-style-link:"Heading 3 Char"; mso-margin-top-alt:auto; margin-right:0in; mso-margin-bottom-alt:auto; margin-left:0in; mso-pagination:widow-orphan; mso-outline-level:3; font-size:13.5pt; font-family:"Times New Roman","serif"; mso-fareast-font-family:"Times New Roman"; mso-fareast-theme-font:minor-fareast;} a:link, span.MsoHyperlink {mso-style-unhide:no; color:blue; text-decoration:underline; text-underline:single;} a:visited, span.MsoHyperlinkFollowed {mso-style-unhide:no; color:blue; text-decoration:underline; text-underline:single;} p.MsoAcetate, li.MsoAcetate, div.MsoAcetate {mso-style-unhide:no; mso-style-link:"Balloon Text Char"; margin:0in; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:8.0pt; font-family:"Tahoma","sans-serif"; mso-fareast-font-family:Batang;} span.Heading1Char {mso-style-name:"Heading 1 Char"; mso-style-unhide:no; mso-style-locked:yes; mso-style-link:"Heading 1"; mso-ansi-font-size:14.0pt; mso-bidi-font-size:14.0pt; font-family:"Cambria","serif"; mso-ascii-font-family:Cambria; mso-fareast-font-family:"Times New Roman"; mso-hansi-font-family:Cambria; mso-bidi-font-family:"Times New Roman"; color:#365F91; font-weight:bold;} span.Heading2Char {mso-style-name:"Heading 2 Char"; mso-style-unhide:no; mso-style-locked:yes; mso-style-link:"Heading 2"; mso-ansi-font-size:13.0pt; mso-bidi-font-size:13.0pt; font-family:"Cambria","serif"; mso-ascii-font-family:Cambria; mso-fareast-font-family:"Times New Roman"; mso-hansi-font-family:Cambria; mso-bidi-font-family:"Times New Roman"; color:#4F81BD; font-weight:bold;} span.Heading3Char {mso-style-name:"Heading 3 Char"; mso-style-unhide:no; mso-style-locked:yes; mso-style-link:"Heading 3"; mso-ansi-font-size:12.0pt; mso-bidi-font-size:12.0pt; font-family:"Cambria","serif"; mso-ascii-font-family:Cambria; mso-fareast-font-family:"Times New Roman"; mso-hansi-font-family:Cambria; mso-bidi-font-family:"Times New Roman"; color:#4F81BD; font-weight:bold;} span.BalloonTextChar {mso-style-name:"Balloon Text Char"; mso-style-unhide:no; mso-style-locked:yes; mso-style-link:"Balloon Text"; mso-ansi-font-size:8.0pt; mso-bidi-font-size:8.0pt; font-family:"Tahoma","sans-serif"; mso-ascii-font-family:Tahoma; mso-fareast-font-family:Batang; mso-hansi-font-family:Tahoma; mso-bidi-font-family:Tahoma;} span.SpellE {mso-style-name:""; mso-spl-e:yes;} span.GramE {mso-style-name:""; mso-gram-e:yes;} .MsoChpDefault {mso-style-type:export-only; mso-default-props:yes; font-size:10.0pt; mso-ansi-font-size:10.0pt; mso-bidi-font-size:10.0pt;} @page WordSection1 {size:8.5in 11.0in; margin:1.0in 1.25in 1.0in 1.25in; mso-header-margin:.5in; mso-footer-margin:.5in; mso-paper-source:0;} div.WordSection1 {page:WordSection1;} /* List Definitions */ @list l0 {mso-list-id:135757118; mso-list-type:hybrid; mso-list-template-ids:25069756 67698703 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;} @list l0:level1 {mso-level-tab-stop:.5in; mso-level-number-position:left; text-indent:-.25in;} @list l0:level2 {mso-level-tab-stop:1.0in; mso-level-number-position:left; text-indent:-.25in;} @list l0:level3 {mso-level-tab-stop:1.5in; mso-level-number-position:left; text-indent:-.25in;} @list l0:level4 {mso-level-tab-stop:2.0in; mso-level-number-position:left; text-indent:-.25in;} @list l0:level5 {mso-level-tab-stop:2.5in; mso-level-number-position:left; text-indent:-.25in;} @list l0:level6 {mso-level-tab-stop:3.0in; mso-level-number-position:left; text-indent:-.25in;} @list l0:level7 {mso-level-tab-stop:3.5in; mso-level-number-position:left; text-indent:-.25in;} @list l0:level8 {mso-level-tab-stop:4.0in; mso-level-number-position:left; text-indent:-.25in;} @list l0:level9 {mso-level-tab-stop:4.5in; mso-level-number-position:left; text-indent:-.25in;} @list l1 {mso-list-id:1005401065; mso-list-template-ids:1754405232;} @list l1:level1 {mso-level-tab-stop:.5in; mso-level-number-position:left; text-indent:-.25in;} @list l1:level2 {mso-level-tab-stop:1.0in; mso-level-number-position:left; text-indent:-.25in;} @list l1:level3 {mso-level-tab-stop:1.5in; mso-level-number-position:left; text-indent:-.25in;} @list l1:level4 {mso-level-tab-stop:2.0in; mso-level-number-position:left; text-indent:-.25in;} @list l1:level5 {mso-level-tab-stop:2.5in; mso-level-number-position:left; text-indent:-.25in;} @list l1:level6 {mso-level-tab-stop:3.0in; mso-level-number-position:left; text-indent:-.25in;} @list l1:level7 {mso-level-tab-stop:3.5in; mso-level-number-position:left; text-indent:-.25in;} @list l1:level8 {mso-level-tab-stop:4.0in; mso-level-number-position:left; text-indent:-.25in;} @list l1:level9 {mso-level-tab-stop:4.5in; mso-level-number-position:left; text-indent:-.25in;} @list l2 {mso-list-id:1116213196; mso-list-template-ids:1681171340;} @list l2:level1 {mso-level-number-format:bullet; mso-level-text:·ð; mso-level-tab-stop:.5in; mso-level-number-position:left; text-indent:-.25in; mso-ansi-font-size:10.0pt; mso-bidi-font-size:10.0pt; font-family:Symbol;} @list l2:level2 {mso-level-number-format:bullet; mso-level-text:·ð; mso-level-tab-stop:1.0in; mso-level-number-position:left; text-indent:-.25in; mso-ansi-font-size:10.0pt; mso-bidi-font-size:10.0pt; font-family:Symbol;} @list l2:level3 {mso-level-tab-stop:1.5in; mso-level-number-position:left; text-indent:-.25in;} @list l2:level4 {mso-level-tab-stop:2.0in; mso-level-number-position:left; text-indent:-.25in;} @list l2:level5 {mso-level-tab-stop:2.5in; mso-level-number-position:left; text-indent:-.25in;} @list l2:level6 {mso-level-tab-stop:3.0in; mso-level-number-position:left; text-indent:-.25in;} @list l2:level7 {mso-level-tab-stop:3.5in; mso-level-number-position:left; text-indent:-.25in;} @list l2:level8 {mso-level-tab-stop:4.0in; mso-level-number-position:left; text-indent:-.25in;} @list l2:level9 {mso-level-tab-stop:4.5in; mso-level-number-position:left; text-indent:-.25in;} @list l3 {mso-list-id:1503204175; mso-list-template-ids:1681171340;} @list l3:level1 {mso-level-number-format:bullet; mso-level-text:·ð; mso-level-tab-stop:.25in; mso-level-number-position:left; margin-left:.25in; text-indent:-.25in; mso-ansi-font-size:10.0pt; mso-bidi-font-size:10.0pt; font-family:Symbol;} @list l3:level2 {mso-level-number-format:bullet; mso-level-text:·ð; mso-level-tab-stop:.75in; mso-level-number-position:left; margin-left:.75in; text-indent:-.25in; mso-ansi-font-size:10.0pt; mso-bidi-font-size:10.0pt; font-family:Symbol;} @list l3:level3 {mso-level-tab-stop:1.25in; mso-level-number-position:left; margin-left:1.25in; text-indent:-.25in;} @list l3:level4 {mso-level-tab-stop:1.75in; mso-level-number-position:left; margin-left:1.75in; text-indent:-.25in;} @list l3:level5 {mso-level-tab-stop:2.25in; mso-level-number-position:left; margin-left:2.25in; text-indent:-.25in;} @list l3:level6 {mso-level-tab-stop:2.75in; mso-level-number-position:left; margin-left:2.75in; text-indent:-.25in;} @list l3:level7 {mso-level-tab-stop:3.25in; mso-level-number-position:left; margin-left:3.25in; text-indent:-.25in;} @list l3:level8 {mso-level-tab-stop:3.75in; mso-level-number-position:left; margin-left:3.75in; text-indent:-.25in;} @list l3:level9 {mso-level-tab-stop:4.25in; mso-level-number-position:left; margin-left:4.25in; text-indent:-.25in;} @list l4 {mso-list-id:2101875085; mso-list-type:hybrid; mso-list-template-ids:502028034 67698703 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;} @list l4:level1 {mso-level-tab-stop:.5in; mso-level-number-position:left; text-indent:-.25in;} @list l4:level2 {mso-level-number-format:alpha-lower; mso-level-tab-stop:1.0in; mso-level-number-position:left; text-indent:-.25in;} @list l4:level3 {mso-level-tab-stop:1.5in; mso-level-number-position:left; text-indent:-.25in;} @list l4:level4 {mso-level-tab-stop:2.0in; mso-level-number-position:left; text-indent:-.25in;} @list l4:level5 {mso-level-tab-stop:2.5in; mso-level-number-position:left; text-indent:-.25in;} @list l4:level6 {mso-level-tab-stop:3.0in; mso-level-number-position:left; text-indent:-.25in;} @list l4:level7 {mso-level-tab-stop:3.5in; mso-level-number-position:left; text-indent:-.25in;} @list l4:level8 {mso-level-tab-stop:4.0in; mso-level-number-position:left; text-indent:-.25in;} @list l4:level9 {mso-level-tab-stop:4.5in; mso-level-number-position:left; text-indent:-.25in;} ol {margin-bottom:0in;} ul {margin-bottom:0in;} --> </style> <!--[if gte mso 10]> <style> /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-parent:""; mso-padding-alt:0in 5.4pt 0in 5.4pt; mso-para-margin:0in; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:10.0pt; font-family:"Times New Roman","serif";} </style> <![endif]--> <meta name=Title content="IT350 Fall 2005 - Lab 07"> <meta name=Keywords content=""> <!--[if gte mso 9]><xml> <o:shapedefaults v:ext="edit" spidmax="1026"/> </xml><![endif]--><!--[if gte mso 9]><xml> <o:shapelayout v:ext="edit"> <o:idmap v:ext="edit" data="1"/> </o:shapelayout></xml><![endif]--> </head> <body bgcolor=white lang=EN-US link=blue vlink=blue style='tab-interval:.5in'> <div class=WordSection1> <p class=MsoNormal align=right style='text-align:right'>IT350 - Web and Internet Programming<br style='mso-special-character:line-break'> <![if !supportLineBreakNewLine]><br style='mso-special-character:line-break'> <![endif]></p> <h1 align=center style='text-align:center'>Lab 07  Game Time!</h1> <h2>Introduction</h2> <p class=MsoNormal style='margin-bottom:12.0pt'>You ve come a long way with JavaScript, and last week we learned about how to truly make our pages come alive by changing the content dynamically.<span style='mso-spacerun:yes'>  </span>For our JavaScript finale, you ll practice your knowledge by creating a web page to play the  8-puzzle. </p> <p class=MsoNormal style='margin-bottom:12.0pt'>The 8-puzzle consists of a 3x3 grid with 8 tiles.<span style='mso-spacerun:yes'>  </span>The one missing tile enables other tiles to move around.<span style='mso-spacerun:yes'>  </span>After shuffling the puzzle, the goal is to reconstruct the original picture or configuration.<span style='mso-spacerun:yes'>  </span>This game has been very often used for research into artificial intelligence, and its properties are well studied.</p> <h2>Requirements</h2> <p class=MsoNormal>You must create a folder on you Web drive called &quot;Lab07&quot; (without the quotes) and store your work in that directory. <b><span style='color:red'>This lab does NOT draw on the previous labs, so there is no need to copy your old web pages into this directory.</span></b><br> <br> This week you will make a single web page, <span class=GramE>game.html, that</span> plays the 8-puzzle.<span style='mso-spacerun:yes'>  </span>We are giving you some <a href="game.html">starter code</a>, which you must improve upon.<span style='mso-spacerun:yes'>  </span>Here is how the game should operate:</p> <ol style='margin-top:0in' start=1 type=1> <li class=MsoNormal style='mso-list:l4 level1 lfo1;tab-stops:list .5in'>This is a list of requirements  be sure to read the  Suggested Approach below!</li> <li class=MsoNormal style='mso-list:l4 level1 lfo1;tab-stops:list .5in'>When the page is first loaded, it should look like the following.<span style='mso-spacerun:yes'>  </span>The starter code already does this for you:<br> <span style='mso-no-proof:yes'><!--[if gte vml 1]><v:shapetype id="_x0000_t75" coordsize="21600,21600" o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f" stroked="f"> <v:stroke joinstyle="miter"/> <v:formulas> <v:f eqn="if lineDrawn pixelLineWidth 0"/> <v:f eqn="sum @0 1 0"/> <v:f eqn="sum 0 0 @1"/> <v:f eqn="prod @2 1 2"/> <v:f eqn="prod @3 21600 pixelWidth"/> <v:f eqn="prod @3 21600 pixelHeight"/> <v:f eqn="sum @0 0 1"/> <v:f eqn="prod @6 1 2"/> <v:f eqn="prod @7 21600 pixelWidth"/> <v:f eqn="sum @8 21600 0"/> <v:f eqn="prod @7 21600 pixelHeight"/> <v:f eqn="sum @10 21600 0"/> </v:formulas> <v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"/> <o:lock v:ext="edit" aspectratio="t"/> </v:shapetype><v:shape id="Picture_x0020_1" o:spid="_x0000_i1028" type="#_x0000_t75" style='width:712.5pt;height:405.75pt;visibility:visible;mso-wrap-style:square'> <v:imagedata src="Lab07_files/image005.png" o:title=""/> </v:shape><![endif]--><![if !vml]><img border=0 width=950 height=541 src="Lab07_files/image005.png" v:shapes="Picture_x0020_1"><![endif]></span></li> <li class=MsoNormal style='mso-list:l4 level1 lfo1;tab-stops:list .5in'>When the user clicks  Load Puzzle , it should replace the monkeys with appropriate images to fill in the picture as shown below.<span style='mso-spacerun:yes'>  </span>You must copy the appropriate image filenames from the  <span class=SpellE>TileArray</span> that is given in the starter code.<span style='mso-spacerun:yes'>  </span>Once the game starts, your  Load Puzzle button is not required to do anything, though resetting the game would be a nice touch.<br> <span style='mso-no-proof:yes'><!--[if gte vml 1]><v:shape id="Picture_x0020_2" o:spid="_x0000_i1027" type="#_x0000_t75" style='width:712.5pt;height:405.75pt; visibility:visible;mso-wrap-style:square'> <v:imagedata src="Lab07_files/image006.png" o:title=""/> </v:shape><![endif]--><![if !vml]><img border=0 width=950 height=541 src="Lab07_files/image006.png" v:shapes="Picture_x0020_2"><![endif]></span></li> <li class=MsoNormal style='mso-list:l4 level1 lfo1;tab-stops:list .5in'>When the user clicks on a tile, you should shift that tile into the  hole in the puzzle, if the hole is directly adjacent to that tile (not diagonally).<span style='mso-spacerun:yes'>  </span>If the tile is not adjacent, you should popup an error message.<span style='mso-spacerun:yes'>  </span>You <u>must keep track of the new tile layout in the given  <span class=SpellE>TileArray</span>  don t just change the images.</u> <br> For instance, here is the result after clicking on the middle tile in the last row.<br> <span style='mso-no-proof:yes'><!--[if gte vml 1]><v:shape id="Picture_x0020_3" o:spid="_x0000_i1026" type="#_x0000_t75" style='width:712.5pt;height:405.75pt; visibility:visible;mso-wrap-style:square'> <v:imagedata src="Lab07_files/image007.png" o:title=""/> </v:shape><![endif]--><![if !vml]><img border=0 width=950 height=541 src="Lab07_files/image007.png" v:shapes="Picture_x0020_3"><![endif]></span></li> <li class=MsoNormal style='mso-list:l4 level1 lfo1;tab-stops:list .5in'>When the user clicks on the  Shuffle button, you should do three things<span class=GramE>:</span><br> a.) Check that the  Number of steps to shuffle is between 1 and 20.<span style='mso-spacerun:yes'>  </span>If not, warn the user and do nothing.<br> b.) Otherwise, set the background color for the whole table to the value given in the  Background color input box.<span style='mso-spacerun:yes'>  </span><br> c.) Shuffle the tiles, based on the number given in the  Number of steps to shuffle input box.<span style='mso-spacerun:yes'>  </span>So if that number is 5, you would do the following 5 times:<span style='mso-spacerun:yes'>  </span><u>randomly</u> pick a tile that is able to move, and move it into the  <span class=GramE>hole</span> spot.<span style='mso-spacerun:yes'>  </span>You must make only <u>legal</u> moves  always moving some tile that is adjacent to the hole, but randomly choosing among those so eligible.<span style='mso-spacerun:yes'>  </span>(If you just randomly shuffle pieces around, there is a 50% chance that you end up with a puzzle that can t be solved). However, you are <u>not</u> required to slowly animate the results of the shuffle like the demo version of the puzzle does (see extra credit).<span style='mso-spacerun:yes'>  </span>Instead, you can just show the results after making all the moves.<br> It s not required, but a nice touch is insisting that the random move doesn t move the hole back to where it just came from.<span style='mso-spacerun:yes'>  </span>So 2 random moves never leaves the hole where it started.<br> So after shuffling 2 more tiles and setting the background color to red your page might look like this:<br> <span style='mso-no-proof:yes'><!--[if gte vml 1]><v:shape id="Picture_x0020_4" o:spid="_x0000_i1025" type="#_x0000_t75" style='width:712.5pt;height:405.75pt; visibility:visible;mso-wrap-style:square'> <v:imagedata src="Lab07_files/image008.png" o:title=""/> </v:shape><![endif]--><![if !vml]><img border=0 width=950 height=541 src="Lab07_files/image008.png" v:shapes="Picture_x0020_4"><![endif]></span></li> <li class=MsoNormal style='mso-list:l4 level1 lfo1;tab-stops:list .5in'>You must use JavaScript and Dynamic HTML to accomplish this.<span style='mso-spacerun:yes'>  </span></li> <li class=MsoNormal style='mso-list:l4 level1 lfo1;tab-stops:list .5in'>You must make appropriate use of functions to break up your code.</li> <li class=MsoNormal style='mso-list:l4 level1 lfo1;tab-stops:list .5in'>As always, you should have appropriate comments.<span style='mso-spacerun:yes'>  </span>As a start, each function should have a brief summary of its purpose.</li> <li class=MsoNormal style='mso-list:l4 level1 lfo1;tab-stops:list .5in'>Your default.htm page should have a link to your new game.html<br style='mso-special-character:line-break'> <![if !supportLineBreakNewLine]><br style='mso-special-character:line-break'> <![endif]></li> </ol> <p class=MsoNormal>Your web page must be constructed using Notepad or a similar <u>text-only </u>editor. The use of programs such as Microsoft Word, Microsoft <span class=SpellE>Frontpage</span>, <span class=SpellE>DreamWeaver</span>, ColdFusion, Mozilla Composer, etc. will be considered an honor offense.</p> <h2>Suggested Approach</h2> <p class=MsoNormal>You can create your puzzle to meet the above requirements in any way you like, provided of course you write your own code and follow all course policies. </p> <p class=MsoNormal><o:p>&nbsp;</o:p></p> <p class=MsoNormal>However, you may find this lab more challenging.<span style='mso-spacerun:yes'>  </span>Unless you feel very confident, we suggest that you approach this lab by following this sequence of steps:</p> <p class=MsoNormal><o:p>&nbsp;</o:p></p> <ol style='margin-top:0in' start=1 type=1> <li class=MsoNormal style='mso-list:l0 level1 lfo2;tab-stops:list .5in'><b style='mso-bidi-font-weight:normal'>Follow this step precisely: </b>Download the <a href="game.html">starter code</a> by right-clicking on the link, pick  Save As , <span class=GramE>then</span> choose  Web Page HTML only .<span style='mso-spacerun:yes'>  </span>Save it as game.html in your new Lab07 directory. Using  View Source and saving the results is <u>not</u> recommended.</li> <li class=MsoNormal style='mso-list:l0 level1 lfo2;tab-stops:list .5in'>Before you proceed, make sure you understand how everything works in the starter code.<span style='mso-spacerun:yes'>  </span>Look carefully at the given <span class=SpellE><span class=GramE>testFunction</span></span><span class=GramE>(</span>) as a refresher on how to use 2-dimensional arrays.</li> <li class=MsoNormal style='mso-list:l0 level1 lfo2;tab-stops:list .5in'>Write a function <span class=SpellE><span class=GramE>loadImagesFromArray</span></span><span class=GramE>(</span>) to copy the image filenames from <span class=SpellE>TileArray</span> to the images in the table (replacing the monkey images).<span style='mso-spacerun:yes'>  </span>As a test, add a call to <span class=SpellE><span class=GramE>loadImagesFromArray</span></span><span class=GramE>(</span>) at the very end of the file (where <span class=SpellE>testFunction</span>() was called).<span style='mso-spacerun:yes'>   </span>When this works, leave the test call to <span class=SpellE><span class=GramE>loadImagesFromArray</span></span><span class=GramE>(</span>) in place for now.<br> (You <u>should not</u> copy the image files to your own directory  just leave them on the usna.edu server).</li> <li class=MsoNormal style='mso-list:l0 level1 lfo2;tab-stops:list .5in'>Write a function <span class=SpellE><span class=GramE>moveImage</span></span><span class=GramE>(</span>row, col) that moves the tile in location (row, col) to the current location of the hole (this implies you ll need to keep track of where the hole is).<span style='mso-spacerun:yes'>  </span>Perform the move first in the <span class=SpellE>TileArray</span>, then call <span class=SpellE><span class=GramE>loadImagesFromArray</span></span><span class=GramE>(</span>) to copy the result to the images.<span style='mso-spacerun:yes'>  </span>Test this by adding a call to <span class=SpellE><span class=GramE>moveImage</span></span><span class=GramE>(</span>1,1) to the end of your HTML file.</li> <li class=MsoNormal style='mso-list:l0 level1 lfo2;tab-stops:list .5in'>Once that works, delete the test calls to <span class=SpellE><span class=GramE>loadImagesFromArray</span></span><span class=GramE>(</span>) and <span class=SpellE>moveImage</span>(1,1) from the end of your HTML file.</li> <li class=MsoNormal style='mso-list:l0 level1 lfo2;tab-stops:list .5in'>Add the appropriate HTML to call <span class=SpellE><span class=GramE>loadImagesFromArray</span></span><span class=GramE>(</span>) when the user clicks on  Load Puzzle. </li> <li class=MsoNormal style='mso-list:l0 level1 lfo2;tab-stops:list .5in'>Add the appropriate HTML to call <span class=SpellE><span class=GramE>moveImage</span></span><span class=GramE>(</span>) appropriately when the user clicks on one of the images.</li> <li class=MsoNormal style='mso-list:l0 level1 lfo2;tab-stops:list .5in'>Modify <span class=SpellE><span class=GramE>moveImage</span></span><span class=GramE>(</span>) so that it checks appropriately for an illegal move (if the user clicks on a tile that can t move). Think carefully on paper how to compute this mathematically  if you do it right this should be a small function.</li> <li class=MsoNormal style='mso-list:l0 level1 lfo2;tab-stops:list .5in'>Write appropriate code to make a bunch of random, <u>legal</u> moves when the user clicks on  Shuffle. </li> <li class=MsoNormal style='mso-list:l0 level1 lfo2;tab-stops:list .5in'>Write appropriate code so that the script also sets the table background appropriately when the user clicks on  Shuffle. </li> <li class=MsoNormal style='mso-list:l0 level1 lfo2;tab-stops:list .5in'>Check that you have good documentation and make appropriate use of functions.</li> <li class=MsoNormal style='mso-list:l0 level1 lfo2;tab-stops:list .5in'>Check that you have met all the Requirements given above.</li> </ol> <p class=MsoNormal><o:p>&nbsp;</o:p></p> <h2>Extra Credit</h2> <p class=MsoNormal>For a nominal amount of extra credit do some/all of the following: <br> (NOTE: saving a backup copy of your working lab is recommended before starting on this)<b style='mso-bidi-font-weight:normal'><o:p></o:p></b></p> <p class=MsoNormal style='margin-left:27.0pt;text-indent:-.25in;mso-list:l2 level3 lfo3; tab-stops:list 27.0pt 1.5in'><![if !supportLists]><span style='mso-fareast-font-family: "Times New Roman"'><span style='mso-list:Ignore'>1.<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span></span><![endif]>Make your shuffle operation move slowly, showing the results briefly after each move, like the demo version that was shown in the lab.</p> <p class=MsoNormal style='margin-left:27.0pt;text-indent:-.25in;mso-list:l2 level3 lfo3; tab-stops:list 27.0pt 1.5in'><![if !supportLists]><span style='mso-fareast-font-family: "Times New Roman"'><span style='mso-list:Ignore'>2.<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span></span><![endif]>Make your shuffle operation move <u>very smoothly</u> from one location to another (not jumping from (1<span class=GramE>,1</span>) directly to (1.2).<span style='mso-spacerun:yes'>  </span><br> HINT: you ll need to ditch the table and just use absolute CSS positioning to make this work.</p> <p class=MsoNormal style='margin-left:27.0pt;text-indent:-.25in;mso-list:l2 level3 lfo3; tab-stops:list 27.0pt 1.5in'><![if !supportLists]><span style='mso-fareast-font-family: "Times New Roman"'><span style='mso-list:Ignore'>3.<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span></span><![endif]>Make your program work with more than one  <span class=GramE>hole</span> (e.g. two missing tiles).<span style='mso-spacerun:yes'>  </span>Create some natural user interface for this to deal with the ambiguity that arises when the user clicks on a tile that could move into either of the holes.</p> <p class=MsoNormal style='margin-left:27.0pt;text-indent:-.25in;mso-list:l2 level3 lfo3; tab-stops:list 27.0pt 1.5in'><![if !supportLists]><span style='mso-fareast-font-family: "Times New Roman"'><span style='mso-list:Ignore'>4.<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span></span><![endif]><b style='mso-bidi-font-weight:normal'>Super bonus points</b>: make your program work on any image, given just a single JPG file for that image.<span style='mso-spacerun:yes'>  </span>Suggestion: use multiple copies of your image on the page, CSS relative positioning, and layers.</p> <h2>Deliverables</h2> <ol start=1 type=1> <li class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto; mso-list:l1 level1 lfo4;tab-stops:list .5in'>Your main web page should be called &quot;game.html&quot; (without the quotes).</li> <li class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto; mso-list:l1 level1 lfo4;tab-stops:list .5in'>You must meet all the Requirements given above.</li> <li class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto; mso-list:l1 level1 lfo4;tab-stops:list .5in'>All of your files should be in a folder called &quot;Lab07&quot; (without the quotes) on the W drive. <b>Your instructor will assume that your web pages are viewable at </b><b><span style='font-family:"Courier New"'>http://intranet.cs.usna.edu/~mXXXXXX/Lab07/game.html</span></b> where XXXXXX is your alpha number. You may want to check that this URL is viewable and that everything works correctly <i>from a computer where somebody else is logged in</i>. If you've goofed and linked to a file on your X drive, this will help you catch it!</li> <li class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto; mso-list:l1 level1 lfo4;tab-stops:list .5in'>Turn in the following hardcopy at the beginning of class on the due date, stapled together in the following order (coversheet on top):</li> <ol start=1 type=1> <li class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt: auto;mso-list:l1 level2 lfo4;tab-stops:list 1.0in'>A completed assignment <a href="../it350_CoverSheet.pdf">coversheet</a>. Your comments will help us improve the course.</li> <li class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt: auto;mso-list:l1 level2 lfo4;tab-stops:list 1.0in'>A printout of <b style='mso-bidi-font-weight:normal'>the source </b>to your Lab07/game.html file. </li> <li class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt: auto;mso-list:l1 level2 lfo4;tab-stops:list 1.0in'>If you use any external script files, include a printout of those too.</li> </ol> </ol> <h2>Hints</h2> <p class=MsoNormal style='margin-left:.25in;text-indent:-.25in;mso-list:l3 level1 lfo5; tab-stops:list .25in'><![if !supportLists]><span style='font-size:10.0pt; font-family:Symbol;mso-fareast-font-family:Symbol;mso-bidi-font-family:Symbol'><span style='mso-list:Ignore'>·<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span></span><![endif]>You do <u>not</u> need to (and should not) reload the page to make any of this work  use DHTML to make changes happen on the fly.</p> <p class=MsoNormal style='margin-left:.25in;text-indent:-.25in;mso-list:l3 level1 lfo5; tab-stops:list .25in'><![if !supportLists]><span style='font-size:10.0pt; font-family:Symbol;mso-fareast-font-family:Symbol;mso-bidi-font-family:Symbol'><span style='mso-list:Ignore'>·<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span></span><![endif]>You can set the  <span class=SpellE>src</span> attribute of an image to change what image it is displaying.<span style='mso-spacerun:yes'>  </span>However, trying to read this attribute is not recommended because the results you get back will vary.</p> <p class=MsoNormal style='margin-left:.25in;text-indent:-.25in;mso-list:l3 level1 lfo5; tab-stops:list .25in'><![if !supportLists]><span style='font-size:10.0pt; font-family:Symbol;mso-fareast-font-family:Symbol;mso-bidi-font-family:Symbol'><span style='mso-list:Ignore'>·<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span></span><![endif]>If your code doesn't work on Internet Explorer, look to see if your script tag has an extra space before &quot;text/<span class=SpellE>javascript</span>&quot; like this:<span style='mso-spacerun:yes'>  </span><br> <span style='font-family:"Courier New"'>&lt;script type =&quot; text/<span class=SpellE>javascript</span>&quot; <span class=SpellE>src</span> = &quot;script.js&quot;&gt;</span><br> If so, change it to like this:<br> <span style='font-family:"Courier New"'>&lt;script type =&quot;text/<span class=SpellE>javascript</span>&quot; <span class=SpellE>src</span> = &quot;script.js&quot;&gt;<br> </span>This matters whether or not you use an external JavaScript file. This space is inserted by Firefox when you do  View Source. <span style='font-family: "Courier New"'><o:p></o:p></span></p> <p class=MsoNormal style='margin-left:.25in;text-indent:-.25in;mso-list:l3 level1 lfo5; tab-stops:list .25in'><![if !supportLists]><span style='font-size:10.0pt; font-family:Symbol;mso-fareast-font-family:Symbol;mso-bidi-font-family:Symbol'><span style='mso-list:Ignore'>·<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span></span><![endif]>If you want to use an external script file, we suggest the following syntax (modified from the lecture).<span style='mso-spacerun:yes'>  </span>Otherwise, the browser may ignore later &lt;script&gt; tag if you try to include JavaScript inline in your document.<span style='mso-spacerun:yes'>  </span>Use this:<br> <span style='mso-spacerun:yes'>      </span><span style='font-family:"Courier New"'>&lt;script type = &quot;text/<span class=SpellE>javascript</span>&quot; <span class=SpellE>src</span>=&quot;calc.js&quot;<span style='mso-spacerun:yes'>  </span>&gt;<span style='mso-spacerun:yes'>  </span>&lt;/script&gt;<span style='mso-spacerun:yes'>  </span><br> </span>Instead of using:<br> <span style='mso-spacerun:yes'> </span><span style='mso-spacerun:yes'>     </span>&lt;<span style='font-family:"Courier New"'>script type = &quot;text/<span class=SpellE>javascript</span>&quot; <span class=SpellE>src</span>=&quot;calc.js&quot;<span style='mso-spacerun:yes'>  </span>/&gt;</span></p> <p class=MsoNormal><span style='font-family:"Courier New"'><o:p>&nbsp;</o:p></span></p> </div> </body> </html>