JavaScript. DOM Scripting

Storlek: px

Starta visningen från sidan:

Download "JavaScript. DOM Scripting"

Amanda Sundqvist
för 7 år sedan
Visningar:

1 JavaScript DOM Scripting

2 Vad är Document object Model (DOM)? En standardiserad modell där man ser en webbsida och dess innehåll som objekt document.getelementsbytagname( p ); document.getelementbyid( mittid ) Children, Parents, Siblings och Values

3 HTML DOM Med en programmerbar objektmodell, får JavaScript all makt den behöver för att skapa dynamisk HTML HTML-element HTML-attribut CSS Reagera på händelser

4 HTML DOM (Document Object Model) När en webbsida laddas skapar webbläsaren en Document Object Model på sidan. HTML DOM-modellen är konstruerad som ett trädobjekt

5 Children, Parents, Siblings och Values <body> <h1>rubrik</h1> <p>textstycke</p> <h2>underrubrik</h2> <ul id="minlista"> <li>listvärde 1</li> <li>listvärde 1</li> <li><a href=" </ul> </body>

6 Children, Parents, Siblings och Values <script> var minlista = document.getelementbyid('minlista'); var listenheter =minlista.getelementsbytagname('li'); for(var i = 0; i < listenheter.length; i++){ // Gör något smart } document.getelementbytagname('p')[0].firstchild.nodev alue='hej världen'; </script>

7 Läsa och ändra Attribut var firstlink = document.getelementbytagname( a )[0]; if(firstlink.getattribute( href ) == ){ firstlink.setattribute( href, ); }

8 Objektdetektering Kontroll om det finns stöd för DOM <script type=text/javascript> if (document.getelementbyid && document.createtextnode) { return; } else { // Mer kod } </script>

9 Ändra i ett HTML-dokument med DOM JavaScript kan skapa dynamiskt HTML-innehåll: Datum: Mån 30 Nov 15:31:29 UTC document.write () kan användas för att skriva direkt i HTML innerhtml Det enklaste sättet att komma åt innehållet i ett HTML-element

10 Ändra i ett HTML-dokument med DOM <body> <p id="kurs">webbproduktion 2011</p> <script> x=document.getelementbyid("kurs"); document.write("<p>innehållet i id=kurs: " + x.innerhtml + "</p>"); document.getelementbyid("kurs").innerhtml="webbutveckli ng 2012"; x=document.getelementbyid("kurs"); document.write("<p>innehållet i id=kurs efter att den ändrats: " + x.innerhtml + "</p>"); </script> </body>

11 Ändra i ett HTML-dokument med DOM <body> <img id="image" src="us.jpg"> <script> document.getelementbyid("image").src="sbe.jpg"; </script> </body>

12 Skapa dynamiskt innehåll <body> <h1 id="id1">webbutveckling 2012</h1> <input type="button" value="röd text" onclick="document.getelementbyid('id1').style.color='red'" /> <input type="button" value= Svart text" onclick="document.getelementbyid('id1').style.color= black'" /> <input type="button" value="göm text" onclick="document.getelementbyid('id1').style.visibility='hidden'" /> <input type="button" value="visa text" onclick="document.getelementbyid('id1').style.visibility='visible'" /> </body>

13 Reagera på händelser En JavaScript kan köras när en händelse inträffar, som när en användare klickar på ett HTML-element. Att köra kod när en användare klickar på ett element, lägga till JavaScript-kod i ett HTML händelse attribut Exempel på HTML händelser: När en användare klickar med musen, onclick() När en webbsida har laddats, onload() När en bild har laddats, onload() När musen flyttas över ett element, onmouseover() När ett inmatningsfält är aktivt, onfocus()

14 Ändra HTML-element <head> <script> function changetext(id) { id.innerhtml="det är en bra kurs"; } </script> </head> <body> <h1 onclick="changetext(this)">webbutveckling 2012</h1> </body>

15 Visa text <body> <p>klicka på knappen för att köra en funktion</p> <button id="mybtn">klicka</button> <script> document.getelementbyid("mybtn").onclick=function() { displaydate() }; function displaydate() { document.getelementbyid("demo").innerhtml=date(); } </script> <p id="demo"></p> </body>

16 Mushändelser onmouseover(), onmouseout() <head> <script> function mover(obj){ obj.innerhtml="då händer det här } function mout(obj) { obj.innerhtml="nu har du haft musen här } </script> </head> <body> <div onmouseover="mover(this)" onmouseout="mout(this)" style="background-color:#d94a38;width:120px;height:20px;padding:40px;"> Placera musen här </div> </body>

17 Fokus onfocus() och onblur() <head> <script> function myfocus(x) { x.style.background="yellow"; } function myblur(x) { x.style.background="white"; } </script> </head> <body> Vad heter du? <input type="text" onfocus="myfocus(this)" onblur="myblur(this)" > <br/> Hur gammal är du? <input type="text" onfocus="myfocus(this)" onblur="myblur(this)" > <p>färgen byts på fältet när det är aktivt.</p> </body>

18 Skapa nya HTML-element Om du vill lägga till ett nytt element i HTML DOM måste du skapa elementet först, och sedan lägga till den till ett befintligt element <body> <div id="d1"> <p id="p1">text från HTML</p> <p id="p2">mer text från HTML</p> </div> <script> var para=document.createelement("p"); var node=document.createtextnode("text från JavaScript"); para.appendchild(node); var element=document.getelementbyid("d1"); element.appendchild(para); </script> </body>

19 Ta bort element <body> <div id="d1"> <p id="p1">html-text</p> <p id="p2">mer HTML-text</p> </div> <script> var parent=document.getelementbyid("d1"); var child=document.getelementbyid("p1"); parent.removechild(child); </script> </body>

20 Exempel W3schools -

Relevanta dokument

JavaScript. Innehåll. Historia. Document object model DHTML. Varför Javascript?

JavaScript. Innehåll. Historia. Document object model DHTML. Varför Javascript? Innehåll JavaScript En introduktion till skriptspråket JavaScript och till DOM Scripting Introduktion till JavaScript och DOM JavaScript Syntax DOM och DOM Scripting Händelsehantering och CSS Historia