Web-Sites-Design-and-Programming-7计算机科学与技术-网站设计与编程-双语教学课件

WebSitesDesignandProgrammingLecturer:LijieGuoRoom:XNA508Phone:23678517Email:2024/5/311DynamicDocumentswithJavaScriptWDP[CN]第九章,

客户端脚本：JavaScript,250－285

第十章,文档对象模型与动态HTML,285－327WDP[EN]Chapter9,Client-SideScripting,312－335Chapter10,DocumentObjectModel,353－404P3W[CN]第六章,174－2022024/5/312OverviewDynamicXHTMLElementpositioningandmovingChangingColoursandFontsDynamicContentReactingtoaMouseClick2024/5/313DynamicXHTMLAdynamicXHTMLdocumentisonewhosetagattributes,tagcontents,orelementstylepropertiescanbechangedafterthedocumenthasbeendisplayedandisstillbeingdisplayedbyabrowserSuchchangesaremadewithanembeddedscript(JavaScript)thataccessestheelementsofthedocumentasobjectsintheassociatedDOMstructureNotanewlanguageorstandard;usesexistingstandards(CSSandJavaScript)topermitinteractionwithWebpages.2024/5/314ElementPositioningCSS-P:CascadingStyleSheetswithPositioningwasreleasedbyW3Cin1997,CompletelysupportedbyIE6andNS7Thepositionofanyelementisdictatedbythethreestyleproperties:position,left,andtopThethreepossiblevaluesofpositionareabsolute,relative,andstatic

2024/5/315AbsolutePositioning<pstyle="position:absolute;left:50px;top:100px;">E.G.WDP-7/absPos.htmlIfanelementisnestedinsideanotherelementandisabsolutelypositioned,thetopandleft

propertiesarerelativetotheenclosingelementNegativevaluesof“top”displaceupward.Negativevaluesof“left”displaceleft.E.G.WDP-7/absPos2.html2024/5/316RelativePositioningIfnotopandleftpropertiesarespecified,theelementisplacedexactlywhereitwouldhavebeenplacedifnopositionpropertyweregivenButitcanbemovedlaterIftopandleftpropertiesaregiven,theyareoffsetsfromwhereitwouldhaveplacedwithoutthepositionpropertybeingspecifiedE.G.WDP-7/relPos.html2024/5/317StaticPositioningThedefaultvalueifpositionisnotspecifiedisasforrelative.Thedifferenceisthatitcannotbedynamicallychangedlater2024/5/318MovingElements(self-study)Ifpositionissettoeitherabsoluteorrelative,theelementcanbemovedafteritisdisplayed.JustchangethetopandleftpropertyvalueswithascriptE.G.WDP-7/mover.html

、Moving.html2024/5/319ElementVisibilityThevisibilitypropertyofanelementcontrolswhetheritisdisplayedThevaluesarevisibleandhiddenif(dom.visibility=="visible"dom.visibility="hidden";elsedom.visibility="visible";E.G.WDP-7/showHide.html2024/5/3110ChangingColorsBackgroundcoloriscontrolledbythebackgroundColorproperty=newBgColor;Foregroundcoloriscontrolledbythecolorproperty=newFgColor;Backgroundcolor:

<inputtype="text"size="10"name="background"onchange="setColor('background',this.value)">Theactualparameterthis.valueworksbecauseatthetimeofthecall,thisisareferencetothetextbox(theelementinwhichthecallismade)So,this.valueisthenameofthenewcolor2024/5/3111MoreAbout"this"InJavaScript,“this”representstheelementinwhichitisreferenced.Forconstructors,theobjectbeingcreated.Forevents,thedocumentelementthattriggeredtheevent.<input...onchange="=this.value;“E.G.WDP-7/dynColors.html2024/5/3112ChangingFontsColor:Changethe“color”propertyofstyleOther:Changethe“font-”propertiesWecanchangethefontpropertiesofalinkbyusingthemouseoverandmouseouteventstotriggerascriptthatmakesthechangesonmouseover="='blue';

='italic16ptTimes';"onmouseout="='black';

='normal16ptTimes';”E.G.WDP-7/dynLink.html2024/5/3113DynamicContent--"HelpBoxes"Thecontentoftheboxatthebottomchangesdependinguponwhichfieldhasthemouseoverit.(Couldalsouse“focus”.)“helpers”isanarrayofmessages.helpers[4]isageneralinstruction.the\isusedforlinecontinuation.ThecontentofanXHTMLelementisaddressedwiththevaluepropertyofitsassociatedJavaScriptobjectE.G.WDP-7/dynValue.html2024/5/3114StackingElementsThez-indexattributedetermineswhichelementisinfrontandwhicharecoveredbythefrontelementTheJavaScriptpropertyassociatedwiththez-indexattributeiszIndexz-indexcanbechangeddynamically(bychangingzIndex2024/5/3115StackingElements(con.)Animageelementcanhaveanonclickattribute,soimagescanbeclickedtotriggereventhandlersAnchorscanalsotriggereventhandlerswhentheyareclicked2024/5/3116StackingElements(con.)Tochangestackingorder,thehandlerfunctionmustchangethezIndexpropertyvalueoftheelementAcalltothefunctionfromanelementsetsthezIndexvalueofthenewtopelementto10andthezIndexvalueoftheoldtopelementto0Italsosetsthecurrenttoptothenewtop

E.G.WDP-7/stacking.html2024/5/3117LocatingtheMouseCursorThecoordinatesoftheelementthatcausedaneventareavailableintheclientXandclientYpropertiesoftheeventobjectThesearerelativetoupperleftcornerofthebrowserdisplaywindowscreenXandscreenYarerelativetotheupperleftcornerofthewholeclientscreenIfwewanttolocatethemousecursorwhenthemousebuttonisclicked,wecanusetheclickevent

E.G.WDP-7/where.html2024/5/3118ReactingtoaMouseClickAmouseclickcanbeusedtotriggeranaction,nomatterwherethemousecursorisinthedisplayUseeventhandlersforonmousedownandonmouseupthatchangethevisibilityattributeofthemessageE.G.WDP-7/anywhere.html2024/5/3119SlowMovementofElements

(self-study)Toanimateanelement,itmustbemovedbysmallamounts,manytimes,inrapidsuccessionJavaScripthastwowaystodothis,butwecoverjustone:setTimeout("fun()",n)2024/5/3120SlowMovementofElements(con.)(self-study)Example:moveatextelementfromitsinitialposition(100,100)toanewposition(300,300)UsetheonloadattributeofthebodyelementtoinitializethepositionoftheelementUseamovefunctiontochangethetopandleftattributesbyonepixelinthedirectionofthedestinationAproblem:coordinatepropertiesarestoredasstrings,whichincludetheunits("150px")Anotherproblem:WeneedtousesomeHTMLspecialcharacters(‘<‘and‘--’)1.XMLparsersmayremoveallcomments2.PutthescriptinaCDATAsection3.PutJavaScriptinseparatefile2024/5/3121SlowMovementofElements(con.)(self-study)TheseareproblemsofvalidationonlyBothIE6andNS7dealcorrectlywithcomments

E.G.WDP-7/moveText.html2024/5/3122DraggingandDroppingan

Element(self-study)Wecanusemousedown,mousemove,andmouseupeventstograb,drag,anddropWeknowhowtomoveanelement-justchangeitsleftandtoppropertiesExample:magneticpoetryTheDOM2eventmodelisrequired(theEventobjectanditsproperty,currentTarget)WeusebothDOM0andDOM2models(DOM0tocallthemousedownhandler,grabber)2024/5/3123Dra