Hvordan koble JavaScript til HTML
JavaScript er et veldig populært skriptspråk som brukes både på klientsiden og på serversiden. JavaScript er nødvendig for websidene våre, da det gjør vår webside interaktiv.
Det er tre grunnleggende krav for å bli en front-end-utvikler:
- Html,
- CSS,
- JavaScript
HTML er forkortet for Hyper Text Markup Language som gir struktur til vår webside og CSS gir stil til sidene våre. Til slutt gjør JavaScript som nevnt tidligere vår webside interaktiv. JavaScript hjelper også med å endre HTML og CSS.
Nå oppstår det at hvordan kan vi koble/koble JavaScript med HTML. I dag i denne artikkelen vil vi utforske nesten alle måtene vi kan koble JavaScript til HTML.
Hva er en skriptet merke?
Før vi går inn på løsningen på hvordan du kobler JavaScript til HTML, la oss se på skriptetoden.
De Tag brukes til å legge inn klientsiden som er JavaScript. Denne taggen har enten skriptelementer eller referanser til en annen skriptfil ved hjelp av SRC -attributtet.
Syntaks
Dette er et skriptetag med en SRC -attributt der vi kan oppgi et filnavn vi vil referere til.
Bruke JavaScript i HTML -filen
Vi kan koble JavaScript til HTML ved å legge til all JavaScript -koden i HTML -filen. Vi oppnår dette ved hjelp av skriptetoden som ble forklart tidligere. Vi kan legge taggen enten inne i hodet på HTML eller på slutten av kroppen. Det er helt opp til oss hvor vi vil si det, og når vi vil at JavaScript skal laste. Programmerere kaller vanligvis skriptetoden når de vil generere innhold eller bruke litt handling. Så ved å se på følgende kode, er det en god praksis å laste JavaScript etter HTML -kroppen.
La oss se på et eksempel:
Eksempel
I dette eksemplet opprettet vi først en knapp i HTML. Vi setter en hendelse til å klikke. Hver gang en bruker klikker på denne knappen myfunc () Funksjonen vil bli aktivert. Etter det satte vi en stikkord. All JavaScript -koden gikk hit. Vi satte en funksjon med navnet på myfunc () der vi viste et varsel.
Gratulerer! Vi har koblet JavaScript med HTML ved å legge til JavaScript -kode inne i skriptetoden.
Denne metoden er bra for små websider eller en webside. Imidlertid, når webappen din blir større, vil skriptkoden også bli større og det vil bli veldig vanskelig å håndtere, så vel som å lese. Løsningen er å skrive JavaScript i en dedikert separat JavaScript -fil og gi referansen til JavaScript -filen i HTML -filen.
Bruker JavaScript i en ekstern fil
Å bruke en ekstern fil for større skript er gunstig, da vi kan dele koden vår i forskjellige JavaScript -sider så vel som i forskjellige filer. Det oppnås ved å henvise til JavaScript -filnavnet i "SRC" -attributtet til skriptetoden i HTML -filen.
La oss endre det forrige eksemplet litt. Koden vil forbli den samme. Vi vil lage en annen JavaScript -fil med navnet “Code.JS ”. Vi vil legge all JavaScript -kode i “Koden.JS ”-filen og oppgi“ koden.JS ”-referanse i HTML -filen.
For eksempel
Vi refererte til “kode.JS”Fil ved å bruke SRC -attributtet til stikkord.
Nå kode.JS fil:
funksjon myfunc ()Varsel ("Du klikket meg");
Resultatet vil være det samme som forrige eksempel i-e.
Ekstern JavaScript -filfordeler
La oss formelt oppgi noen av fordelene etter å ha diskutert den eksterne JavaScript -filen:
- Det skiller vår HTML -kode og JavaScript -kode
- JavaScript -kode blir lesbar så vel som vedlikeholdbar.
- En annen fordel er at hurtigbufrede JavaScript -filer handler med å få fart på sidelasting.
JavaScript Selectors
I de forrige eksemplene tok vi hjelp av en begivenhet. Anta at vi ikke vil legge til en hendelse, og vi vil velge et element fra HTML -filen. JavaScript hjelper oss ved å tilby forskjellige alternativer for dette som kalles JavaScript Selectors.
JavaScript Selectors Hovedfunksjonen er å velge et HTML -element og utføre forskjellige handlinger på det i henhold til våre behov. JavaScript gir forskjellige alternativer for dette, en av dem er IDen.
Vi kan gi et element et ID -attributt i HTML og deretter få tilgang til det i JavaScript. Vi får tilgang til i JavaScript av:
dokument.getElementById ("Idname");ID er unik og brukes til bare ett element.
JavaScript gir oss også muligheten til å velge et element ved hjelp av en klasseattributt. Vi kan bruke klassenavnet til forskjellige elementer. Syntaksen er:
dokument.QuerySelector (".klassenavn");Et annet alternativ JavaScript gir oss er å få tilgang til JavaScript -elementer ved hjelp av tagnavn. Syntaks for tilgang til tagnavn:
dokument.getElementsByTagName ("P");
Eksempel:
Html
JavaScript
const btn = dokument.getElementById ("BTN");btn.AddEventListener ("Klikk", funksjon ()
Varsel ("Du klikket meg");
)
I dette eksemplet fikk vi tilgang til knappelementet ved hjelp av getElementById (). Etter det setter vi en hendelse som når en bruker klikker på knappen, skal det vises et varsel.
Vi kan oppnå den samme utgangen hvis vi bruker:
const btn = dokument.QuerySelector ("BTN");Det må huskes at vi må angi klasseattributtet i knappelementet.
Konklusjon
Kobling av JS med HTML gjør nettstedet ditt dynamisk og interaktiv. I dette innlegget lærte vi deg hvordan du kobler JavaScript til HTML. Vi diskuterte de to viktigste måtene å oppnå denne oppgaven.
Den første brukte JavaScript i HTML -filen. Den andre brukte JavaScript utenfor HTML -filen ved hjelp av en JavaScript -fil. For å være en front-end-utvikler er det nødvendig å jobbe i både HTML og JavaScript, og denne artikkelen viste deg hvordan du kan koble begge disse.