chap9-javascript 与DHTML在网页设计中的应用(英文版)

1/33Chapter9JavaScriptandDHTML2/33Objectives•Explainthe3layersofaWebdocument.•InsertJavaScriptcodeonaWebpage.•ExplainbasicJavaScriptsyntax.•ExplainobjectsandJavaScriptobjects.•ExplainDOM.•Usecommonobjectssuchasdocument,window,form.•Describetheeventhandlingmechanism.•ExplainDHTML.•ApplysimpleDHTMLonyourpages.3/33WhyJavaScript?•AWebpagethatissemanticallymarkedupandbeautifullydesignediswonderful,buttoreallymakeitanexperience,itneedssomeinteractivity.•The3-layer:structural,presentationandbehavioral.4/33WhatisJavaScript?•JavaScriptisaprogramminglanguagemainlyusedontheWeb.•JavaScriptisnotJava.•JavaScriptcanbeusedtotestbrowsers,respondtouseractivities,validateformdata,anddisplaycustomizedcontent(suchasfloatinganimation).5/33JavaScriptDosandDon’ts•Likemanytools,JavaScriptcanbeusedforgoodorevil.•TheevilusesofJavaScriptareallaround:rapid-firepop-upsthatopenfasterthanyoucanclosethem,sitesthatautomaticallysetthemselvesasyourhomepage,thelistgoesonandon.•AsWebprofessionals,wehaveadutytomaketheuserexperienceaspositiveaspossibleandmakeoursitesbothusableandaccessible.•JavaScriptshouldbeusedinsuchaswaythatapageorsitecanbeusedwithoutit.6/33UsingJavaScript•JavaScriptcanbeimplementedonasinglepageoronanentiresite.•AswithCSS,itcanbeembeddedinadocument,orexternalizedfromthatdocument.Seepage161.–embeddedintheheadelement–embeddedintags–linkedfromanexternalfile7/33SkillsNeededinProgramming•Thefirsthardthingaboutprogrammingistolearn,becomecomfortablewith,andacceptsomeartificialmechanisms,whethertheymake“sense”toyouornot.•Attentiontodetail•Stupidity•Goodmemory•Abilitytoabstract,thinkonseverallevels8/33Attentiontodetail•Inprogramming,thedetailsmatter.•Youcan'tbevague;youcan'tdescribeyourprogram3/4ofthewayandthensay“YouknowwhatImean?”andhavethecompilerfigureouttherest.•Youhavetodotyouri'sandcrossyourt's.•Ifthelanguagesaysyouhavetodeclarevariablesbeforeusingthem,youhaveto.9/33Stupidity•Computersareincrediblystupid.•Theydoexactlywhatyoutellthemtodo:nomore,noless.•Whenyou'reprogramming,ithelpstobeableto“think”asstupidlyasthecomputerdoes,sothatyou'reintherightframeofmindforspecifyingeverythinginminutedetail,andnotassumingthattherightthingwillhappenunlessyoutellitto.10/33Goodmemory•Thingstorememberwhileprogramming:–thesyntaxofthelanguage–thesetofprewrittenfunctionsandtheirparameters–whatvariablesandfunctionsyou'vedefinedinyourprogramandhowyou'reusingthem–techniquesyou'veusedorseeninthepast–bugsyou'vehadinthepast.11/33Abilitytoabstract•Oneofthemostpowerfultechniquesformanagingthecomplexityofasoftwaresystem(oranycomplexsystem)istocompartmentalizeitintolittle''blackbox''processeswhichperformusefultasksbutwhichhidesomedetailssoyoudon'thavetothinkaboutthemallthetime.•Thinkaboutthemechanicsofadesignhierarchy,whilealsousethathierarchytoavoidhavingtothinkabouteverydetailofitateverylevel.12/33JavaScriptSyntax--Statements•Eachscriptwewriteconsistsofaseriesofstatements.•Statementscanbeterminatedwithalinebreakorwithasemicolon(;).–firststatement–secondstatement–firststatement;secondstatement;•Forreadability,andtoavoidpotentialstatementterminationproblems,itisrecommendedthatyouuseboth.13/33JavaScriptSyntax--Comments•Sometimesitishelpfultomakenotesforyourselftokeeptrackofwhatisgoingoninascript.•TherearetwostylesofcommentinJavaScript:–//thisisacomment–/*thisisamulti-line–orblockcomment*/14/33JavaScriptSyntax--Variables•Variablesaretheplaceyouusetoholdthepiecesofdatathataprogramisworkingon.•Variablesmustbedeclaredbeforeyouusethem.–varMYVAR;//uppercase–varmyvar;//lowercase–varmyVar;//camelcase–varMyVar;//initialcaps–varMyVaR;//mixedcase•JavaScriptiscase-sensitive.15/33JavaScriptSyntax–DataTypes•JavaScriptvariablescanbeoneofseveraldifferentdatatypes.•Thosedatatypesfallinto2differentcategories:scalarsandarrays.–Scalarvariableshaveonevalueatatime.Thatvaluecanbeastring,anumber,oraBoolean.–Arrayscancontainmultiplevalues.16/33JavaScriptSyntax–DataTypes•Strings–Stringsareenclosedbyeithersingle(‘)ordouble(“)quotesandcancontainzeroormorecharacters:–varempty=‘’;–vargirl_cat=“Sabine”;–varzip_code=‘100081’;•Numbers–varmy_age=18;•Booleans–Booleansaretrue/falsevalues.Theycanberepresentedbythekeywordstrueorfalseorthenumbers1and0,respectively:–varbald=false;//Iamnotbald(yet)–varbearded=1;//Idohaveabeard17/33JavaScriptSyntax–DataTypes•Arraysallowyoutogroupmultiplevalues(calledmembers)inasinglevariable.•Standardarrayvaluesarenumericallyindexedbeginningwith0andcountingupward.•Theycanbedeclaredinafewdifferentways:–vararray_1=newArray();//emptyarray–vararray_2=newArray(2);//with2undefinedmembers•Aswithscalars,anarray’svaluescanbesetwhenitisdeclaredorafterward:–varcats=newArray(‘Sabine’,‘Dakota’);–varcats=newArray();–cats[0]=‘Sabine’;–cats[1]=‘Dakota’;18/33JavaScriptSyntax--Operators•Thereare2basiccategoriesofoperatorsinJavaScript,arithmetic(ormathematical)andcomparison.•Arithmeticoperatorsareusedtoperformmathematicalfunctions:–varmy_num=1+1;–varnew_num=my_num*5;•Comparisonoperatorsareusedtomakeassertionsabouttheequalityof2values.–varbool=true;varnum=1;–bool==num;bool!==num;•Seepag