_ 3.1.3 DOM-objekt
Uppgiften introducerar till DOM-objekt som ofta används som stöd i JavaScript-program.
__ Uppgift
Gör ett eller flera JavaScript-program som använder DOM-objektet för att:
- Välja ut ett HTML-element
- Göra något med ett HTML-element:
-- Ändra en egenskap för ett HTML-elementet
-- Lägga till nytt innehåll till ett HTML-elementet
-- Ta bort ett HTML-element
-- Utvinna information från ett HTML-element
-- Lägga till och ta bort ett klass-attribut från ett HTML-element
Gör även (eller ihop med ovanstående) ett eller flera JavaScript-program som använder DOM-objektet för att reagera på följande händelser:
- Mushändelser (någon av §click§, §dblclick§, §mousedown§, §mouseup§, §mouseover§, §mouseout§ eller §mousemove§)
- Dokument och fönsterhändelser (någon av §load§, §resize§, §scroll§ eller §unload§)
- Formulärhändelser (någon av §submit§, §reset§, §change§, §focus§ eller §blur§)
- Tangentbordshändelser (någon av §keypress§, §keydown§ eller §keyup§)
Gör även ett program som använder den kombinerade händelsen §hover§ (= §mouseover§ + §mouseout§).
Använd även händelse-objektet §event§ och någon av dess egenskaper (§pageX§, §pageY§, §screenX§, §screenY§, §shiftKey§, §which§, §target§ eller §data§) för att exempelvis få fram koordinaterna för var en användare är med muspekaren.
Gör till sist ett program som:
- Stoppar en händelses normala beteende (§evt.preventDefault§ eller §return false§)
- Tar bort en händelse (§removeEventListener§)
Alla JavaScript-program ska följa kraven under sidan [Krav, 05_ass/requirements/ip3.txt].
__ Exempel
Inget exempel ges.
__ Tips
HTML-dokumentet måste ofta vara färdigladdat i webbläsaren innan JavaScript-programmet körs igång eftersom programmet ofta använder element i HTML-sidan. Man kan kontrollera att det är gjort med §window.onload§ och §document.onload§.
Ett snyggt sätt att knyta en händelse till en tagg är följande exempel:
Filen §Test.html§:
§
Test
§
Filen §Test.js§:
§
function x() {
window.alert('Du klarade det!');
}
document.getElementById("b").addEventListener("click", x);
§
__ Hjälp
~ 05_ass/help/01.txt
>
[Klicka här för hjälp, helper.dsv@gmail.com, Webbutv I: 3.1.3 DOM-objekt: http://people.dsv.su.se/~pierre/i/i.cgi?href=05_ass/ip3/3.1.3.txt] ½===system_tutoring_message===½
<
~ 05_ass/help/02.txt