JavaScript - moodle2.tfe.umu.se€¦ · JavaScript-kod i ett HTML händelse attribut •Exempel på...
20
JavaScript DOM Scripting
Transcript of JavaScript - moodle2.tfe.umu.se€¦ · JavaScript-kod i ett HTML händelse attribut •Exempel på...
JavaScript DOM Scripting
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
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
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
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="http://www.di.se">di.se</a></li>
• </ul>
• </body>
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.nodeValue='Hej världen';
• </script>
Läsa och ändra Attribut
• var firstLink = document.getElementByTagName(’a’)[0];
• if(firstLink.getAttribute(’href’) == ”http://www.di.se”){
• firstLink.setAttribute(”href”, ” http://www.va.se”);
• }
Objektdetektering
• Kontroll om det finns stöd för DOM
• <script type=text/javascript>
• if (document.getElementById && document.createTextNode) {
• return;
• }
• else {
• // Mer kod… }
• </script>
Ändra i ett HTML-dokument med DOM • JavaScript kan skapa dynamiskt HTML-innehåll:
• Datum: Mån 30 Nov 15:31:29 UTC 0100 2012
• 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
Ä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>
Ändra i ett HTML-dokument med DOM • <body>
• <img id="image" src="us.jpg">
•
• <script>
• document.getElementById("image").src="sbe.jpg";
• </script>
• </body>
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>
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()
Ä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>
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>
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>
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>
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>
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>
Exempel
• W3schools - http://www.w3schools.com/js/js_ex_dom.asp
