• 
  

  JavaScript DHTML tutorial

  
  

DHTML ( Dynamic Hypertext Markup Language ) kan en enkel webbsida för att bli ett program som körs inne i användarens webbläsare . JavaScript kan motorn för DHTML , svara på användarens -initierade händelser , hitta och manipulera objekt webbsida genom användning av Document Object Model och ändra egenskaperna hos dessa HTML- element med hjälp av CSS attributen

Du behöver : .
textredigerare som Anteckningar .



1 .
Skapa en webbsida som innehåller flera delar . Klistra in följande kod i en textredigerare och spara den som " dhtmlTutorial . html . "








jag element ett .




Jag element två .


<; input type=" knapp " value=" Jag är elementet tre . "/>


Bläddra till den fil från en webbläsare för att kunna se din webbsida .
2 .
Lägg till en JavaScript- funktion för att räkna antalet element i varje tagg typ i dokumentet . Klistra in följande kod mellan manusförfattare taggar i HTML-dokumentet .

funktion elementCount ( ) {

var numDivElements=document. getElementsByTagName (" div " ) . längd
var numInputElements=document. getElementsByTagName ( "input " ) . längd
alert ( " Dokumentet innehåller " + numDivElements + " div element och " + numInputElements + " input element " )
}

document. getElementsByTagName funktion returnerar en samling alla delar av en viss etikett typ .
3 .
Ring elementCount funktionen från en onClick-händelse . Event samtal kan läggas till de flesta HTML-element . En händelse samtal kommer att utlösa en JavaScript -funktion baserat på användarnas input . Den vanligaste händelsen är " onclick ", som kommer eld när användaren klickar på elementet som det tillämpas . Ändra "input " element så att det ser ut så här :



4 .
Öppna sidan och klicka på knappen . En JavaScript dialogruta informerar dig om hur många element av typen " div " och skriv " input " du har på din hemsida .
5 .
Hämta en referens till första div-element . Du kan komma åt det första inslaget från insamlingen genom att ange ordningstal ( den position vi har i samlingen ) . Det första elementet i en JavaScript- samling har ordningstal av 0 . Lägg till följande rad i din funktion .

var firstElement=document. getElementsByTagName (" div " ) [ 0 ]
6 .
Ändra format egenskaper första div-element . Varje HTML- element har en egenskap av " stil " som innehåller alla formategenskaper tillgängliga för JavaScript för ett visst element . Du kan till exempel lägga till en röd kant till ditt inslag genom att lägga till följande rad i din funktion :

firstElement. style. border=" 1px solid röd "
7 <. br >
Nu kan du få en referens till den andra div-element och ändra teckensnitt vikt fet och teckenfärg till grön .

var secondElement=document. getElementsByTagName (" div " ) [ 1 ]
secondElement. style. color=" gröna "
secondElement. style. fontWeight=" fet "
8 .
Mer information finns på forum . JavaScript och DHTML forum svara nybörjare frågor och ger många exempel på vad du kanske vill göra med din dynamiska webbsidor. Några är listade i avsnittet Resurser .

Previous：nothing Next：vad är en null-pekare undantag ?

Relaterade artiklar