Hvordan ringe JavaScript -funksjonen i HTML

JavaScript dukker opp dag for dag og brukes effektivt på websider. Hver gang JavaScript blir kalt til en HTML -side, samhandler den dynamisk på websider. JavaScript gjør websider mer intuitiv og forbedrer brukeropplevelsen sammenlignet med statiske sider. Å ringe funksjoner av JavaScript til en HTML -side er ikke en kompleks oppgave. I denne artikkelen demonstrerer vi forskjellige måter å ringe JavaScript -funksjoner i HTML.

Inline JavaScript -funksjon

Den første metoden er å kalle JavaScript -funksjonen i HTML. For dette må du opprette en funksjon og deretter definere denne funksjonen enten i hodeseksjonen eller kroppsdelen i HTML -dokumentet. Du kan enten opprette en lenke eller en knapp og deretter en OnClick () -hendelse er tilknyttet dem for å kalle denne funksjonen.

Nå skal vi demonstrere et enkelt eksempel. Dette eksemplet inneholder en enkel HTML -fil der vi har definert en metodefunksjonsnavn () i skriptetagger i hodet til HTML som vist nedenfor.

Videre opprettet vi en knapp og tilknyttet OnClick () -hendelsen med den som vist nedenfor. Deretter, når brukeren klikker på knappen, blir funksjonen påkalt:

Hei, klikk på knappen nedenfor for å påkalle funksjonen

Eksempel

Hei, klikk på knappen nedenfor for å påkalle funksjonen

Produksjon

Ring JavaScript -funksjonen gjennom eksterne filer

Den andre metoden er å kalle en JavaScript -funksjon i HTML gjennom ekstern .JS -filer. Eksterne filer av JavaScript er vedlagt i hodeseksjonen i HTML -filen. Først av alt må du opprette to filer i.e… html -fil der html -kode er skrevet og den andre er .JS der funksjoner er definert.

Vi må lage et HTML -dokument når vi er ferdige med opprettelsen av JavaScript. Etter å ha integrert JavaScript -filen, må vi enten opprette en lenke eller en knapp, og deretter påkalle funksjonen som er definert i JavaScript -filen.

Eksempel

Dette eksemplet inneholder en enkel HTML -fil "Articl.html”Der vi kobler den eksterne JavaScript -filen”Jsarticle.JS”.

Articl.html

Hei, klikk på knappen nedenfor for å påkalle funksjonen

Jsarticle.JS

funksjonsfunksjonsnavn ()
dokument.Skriv ("Du lærer hvordan du kaller JavaScript -funksjonen i HTML");

HTML- og JavaScript -filer skal enten lagres i samme mappe, og hvis ikke, må vi gi en full bane i skriptetappene som er til stede i hodeseksjonen. I vårt oppgitte eksempel har vi lagret HTML- og JavaScript -filene i samme mappe, og det er grunnen til at vi har gitt navnet på JavaScript -filen i stedet for å gi hele banen.

Vi har opprettet en knapp i kroppsdelen, og i tillegg til den knappen, har vi også brukt OnClick -hendelsen for å ringe en funksjon. Nå, når brukeren klikker på den knappen, blir funksjonen påberopt som er definert i JavaScript-filen som vist i det nedenfor-nevnte bildet.

Hei, klikk på knappen nedenfor for å påkalle funksjonen

Produksjon

Konklusjon

I denne artikkelen demonstrerer vi hvordan du kaller JavaScript -funksjoner innen HTML. Vi har også diskutert to metoder. I den første metoden inkluderer vi en JavaScript -fil i et HTML -dokument. I den andre metoden ringer vi JavaScript gjennom eksterne filer. Begge disse metodene er kort blitt forklart sammen med eksempler på hvordan JavaScript -funksjoner kan påberopes i HTML.