Hvor du skal sette javascript i et HTML -dokument?

JavaScript kan legges til to forskjellige steder i et HTML -dokument. Det kan enten plasseres inne i seksjon eller i seksjon. Taggen der du plasserer JavaScript, påvirker utdataene til websiden din.

JavaScript i taggen

Hver gang en HTML -side åpnes, er det første innholdskoden som lastes inn, noe som betyr at alle dataene inne i dette er lastet inn før taggen. Hvis JavaScript legges til hodemerket, vil den ikke vente på full lasting av nettsiden og vil bli lastet inn i nettleserens minne. For å demonstrere dette, oppretter du en grunnleggende HTML -side som vil be brukeren så snart den er lastet inn i nettleserens minne.

Ta følgende HTML -fil:

Som du ser blir skriptet lagt til i stikkord. Imidlertid lastes et 8K -bilde i Body -taggen på nettsiden, noe som vil ta noen få øyeblikk å laste. Last inn HTML -siden og utdataene:

Fra denne utgangen er det klart at å sette skriptet i årsakene til det å laste allerede før DOM er klar.

JavaScript i taggen

Som nevnt ovenfor, kan man plassere JavaScript i stikkord. Dette vil tillate DOM å laste fullt ut og deretter laste JavaScript i henhold til sin posisjon i taggen.

For å demonstrere dette, skal vi opprette en knapp på HTML -siden med følgende linjer og i funksjonaliteten til den knappen med følgende linjer:

Klikk for å varsle!

I ovennevnte kodebit blir en hendelseslytter lagt til på knappen som varsler brukeren på knappen trykk alt med skript inne i . Utfør denne HTML -filen og observer følgende utdata:

Det fremgår av output output at skriptet fungerer bra i taggen

Javascript i tag eller tag

For å svare på dette spørsmålet, ta det siste eksemplet og bare flytt skriptetoden for å varsle brukeren på knappetrykk inne i taggen som:

Klikk for å varsle!

Ved utførelse av dette programmet er forskjellen ikke synlig ettersom utgangen ser ut som følgende:

Åpning av nettleserens konsoll viser imidlertid forskjellen, for i konsollen er det denne feilen:

Denne feilen er forårsaket av JavaScript som prøver å få referansen til et element fra kroppskoden, som ennå ikke er initialisert av DOM fordi JavaScript i hodemerket ble utført allerede før DOM var fullastet.

Så avslutningsvis å plassere skriptet i hodemerket eller kroppskoden kommer ned på websidenes arbeid.

Innpakning

JavaScript kan plasseres på to forskjellige steder i en HTML -dokumentfil i tag eller inn stikkord. Å plassere JavaScript i hodemerket får nettleseren til å laste inn skriptet før DOM er helt klar. Mens inkludert javascriptet inne i Laster inn skriptet etter at DOM er klar. På grunn av dette er det ikke noe optimalt sted å inkludere JavaScript i HTML -dokumentet ditt, og det avhenger av oppgaven man vil utføre.