Come collegare JavaScript a HTML
JavaScript è un linguaggio di scripting molto popolare che viene utilizzato sia sul lato client che sul lato server. JavaScript è necessario per le nostre pagine Web in quanto rende la nostra pagina web interattiva.
Esistono tre requisiti di base per diventare uno sviluppatore front-end:
- Html,
- CSS,
- JavaScript
HTML è abbreviato per il linguaggio di markup iper testo che fornisce struttura alla nostra pagina web e CSS offre stile alle nostre pagine. Infine, JavaScript come menzionato in precedenza rende la nostra pagina web interattiva. JavaScript aiuta anche a modificare HTML e CSS.
Ora si pone una domanda che come possiamo collegare/collegare JavaScript con HTML. Oggi in questo articolo esploreremo quasi tutti i modi in cui possiamo collegare JavaScript a HTML.
Cos'è un tag di script?
Prima di entrare nella soluzione di come collegare JavaScript a HTML, diamo un'occhiata al tag script.
IL Il tag viene utilizzato per incorporare script sul lato client che sono JavaScript. Questo tag ha elementi di scripting o riferimenti a un altro file di script usando l'attributo SRC.
Sintassi
Questo è un tag di script con un attributo SRC in cui possiamo fornire un nome file a cui vogliamo fare riferimento.
Utilizzando JavaScript all'interno del file HTML
Possiamo collegare JavaScript a HTML aggiungendo tutto il codice JavaScript all'interno del file HTML. Otteniamo questo usando il tag script che è stato spiegato in precedenza. Possiamo mettere il tag all'interno della testa dell'HTML o alla fine del corpo. Spetta a noi dove vogliamo metterlo e quando vogliamo che JavaScript lo carichi. I programmatori di solito chiamano il tag di script ogni volta che vogliono generare contenuti o applicare qualche azione. Quindi, guardando il seguente codice, è una buona pratica caricare JavaScript dopo il corpo HTML.
Diamo un'occhiata a un esempio:
Esempio
In questo esempio, in primo luogo, abbiamo creato un pulsante in HTML. Abbiamo impostato un evento per fare clic. Ogni volta che un utente fa clic su questo pulsante il myfunc () La funzione verrà attivata. Dopodiché abbiamo messo un etichetta. Tutto il codice JavaScript è andato qui. Mettiamo una funzione con il nome di myfunc () dove abbiamo mostrato un avviso.
Congratulazioni! Abbiamo collegato correttamente JavaScript con HTML aggiungendo il codice JavaScript all'interno del tag script.
Questo metodo è buono per piccole pagine Web o una pagina Web. Tuttavia, man mano che la tua app web diventa più grande, anche il codice dello script diventerà più grande e diventerà davvero difficile da gestire e leggere. La soluzione è scrivere JavaScript in un file JavaScript separato dedicato e fornire il riferimento del file JavaScript nel file HTML.
Utilizzo di JavaScript in un file esterno
L'uso di un file esterno per script più grandi è utile in quanto possiamo dividere il nostro codice in diverse pagine JavaScript e in file diversi. Si ottiene facendo riferimento al nome del file JavaScript nell'attributo "SRC" del tag script nel file HTML.
Cambiamo un po 'l'esempio precedente. Il codice rimarrà lo stesso. Faremo un altro file JavaScript con il nome di "Codice.JS ". Metteremo tutto il codice JavaScript nel "codice.File JS "e fornire il" codice.RIFERIMENTO JS "nel file HTML.
Per esempio
Abbiamo fatto riferimento a "codice.js"File usando l'attributo SRC di etichetta.
Ora il codice.js file:
funzione myfunc ()Avviso ("Mi hai fatto clic");
Il risultato sarà lo stesso dell'esempio precedente I-e.
Vantaggi del file JavaScript esterno
Dichiariamo formalmente alcuni dei vantaggi dopo aver discusso del file JavaScript esterno:
- Separa il nostro codice HTML e il codice JavaScript
- Il codice JavaScript diventa leggibile e mantenibile.
- Un altro vantaggio è che i file JavaScript memorizzati nella cache agiscono per accelerare il caricamento della pagina.
Selettori JavaScript
Negli esempi precedenti, abbiamo preso l'aiuto di un evento. Supponiamo che non vogliamo aggiungere un evento e vogliamo selezionare un elemento dal file HTML. JavaScript ci aiuta a fornire diverse opzioni per questo che sono chiamati selettori JavaScript.
Selettori JavaScript La funzione principale è selezionare un elemento HTML ed eseguire azioni diverse in base alle nostre esigenze. JavaScript offre diverse opzioni per questo, una di queste è l'ID.
Possiamo dare a un elemento un attributo ID in HTML e quindi accedervi in JavaScript. Accediamo a JavaScript di:
documento.getElementById ("idname");ID è univoco e utilizzato per un solo elemento.
JavaScript ci dà anche l'opzione di selezionare un elemento utilizzando un attributo di classe. Possiamo usare il nome di classe per elementi diversi. La sintassi è:
documento.QuerySelector (".nome della classe");Un'altra opzione che JavaScript ci dà è accedere agli elementi JavaScript usando i nomi dei tag. Sintassi per l'accesso ai nomi dei tag:
documento.getElementsByTagName ("P");
Esempio:
Html
JavaScript
const btn = documento.getElementById ("BTN");btn.addEventListener ("click", function ()
Avviso ("Mi hai fatto clic");
)
In questo esempio abbiamo acceduto all'elemento pulsante usando getElementById (). Successivamente abbiamo fatto un evento che ogni volta che un utente fa clic sul pulsante, è necessario mostrare un avviso.
Possiamo ottenere lo stesso output se usiamo:
const btn = documento.QuerySelector ("BTN");Si dovrebbe tenere presente che dobbiamo impostare l'attributo della classe nell'elemento pulsante.
Conclusione
Il collegamento di JS con HTML rende il tuo sito Web dinamico e interattivo. In questo post, ti abbiamo insegnato come collegare JavaScript a HTML. Abbiamo discusso dei due modi principali per raggiungere questo compito.
Il primo era usare JavaScript all'interno del file HTML. Il secondo era usare JavaScript al di fuori del file HTML utilizzando un file JavaScript. Per essere uno sviluppatore front-end è necessario lavorare sia in HTML che in JavaScript e questo articolo ti ha mostrato come collegare entrambi questi.