Javascript dins HTML, on?
Afegir codi JavaScript a una pàgina HTML és un pas fonamental per fer que el lloc web sigui dinàmic i interactiu. Hi ha tres maneres principals de fer-ho,
1. JavaScript Intern (Inline)
Aquesta forma implica escriure el codi JavaScript directament dins de les etiquetes HTML o dins de l'etiqueta <script> al mateix fitxer HTML.
A. Dins de l'etiqueta <script>
El codi s'ubica al bloc <script> dins del <head> o, preferiblement, just abans de tancar l'etiqueta </body>.
<!DOCTYPE html>
<html>
<head>
<title>Intern</title>
</head>
<body>
<h1>Exemple Intern</h1>
<script>
console.log("Aquest és codi JavaScript intern.");
</script>
</body>
</html>B. Com a atribut d'un element HTML (Gestors d'esdeveniments)
El codi s'associa a un esdeveniment específic d'un element (p. ex., un clic).
<button onclick="alert('Hola món!');">Clicar</button>Afegir codi JavaScript a una pàgina HTML és un pas fonamental per fer que el lloc web sigui dinàmic i interactiu. Hi ha tres maneres principals de fer-ho, cadascuna amb els seus propis avantatges i inconvenients.
Avantatges i Inconvenients (Intern)
Casos d'Ús (Intern)
-
Scripts molt petits i únics: Per a funcions de depuració, missatges d'alerta o codi que és exclusiu d'una sola pàgina i que no es reutilitzarà.
-
Gestors d'esdeveniments simples: Quan s'activa una funció molt breu directament des d'un element, encara que es prefereix assignar esdeveniments amb JS extern per mantenir el codi net.
Afegir codi JavaScript a una pàgina HTML és un pas fonamental per fer que el lloc web sigui dinàmic i interactiu. Hi ha tres maneres principals de fer-ho, cadascuna amb els seus propis avantatges i inconvenients.
Afegir codi JavaScript a una pàgina HTML és un pas fonamental per fer que el lloc web sigui dinàmic i interactiu. Hi ha tres maneres principals de fer-ho, cadascuna amb els seus propis avantatges i inconvenients.
2. JavaScript Extern (External)
Aquesta és la forma més recomanada per a la majoria d'aplicacions web. El codi JavaScript es guarda en un fitxer separat amb l'extensió .js i es vincula al document HTML mitjançant l'etiqueta <script> amb l'atribut src.
Implementació
Fitxer HTML:
<!DOCTYPE html>
<html>
<head>
<title>Extern</title>
</head>
<body>
<h1>Exemple Extern</h1>
<script src="scripts/el-meu-codi.js"></script>
</body>
</html>Fitxer scripts/el-meu-codi.js:
// Aquest és el contingut del fitxer .js
function saluda() {
console.log("Hola des del fitxer extern!");
}
saluda();Avantatges i Inconvenients (Extern)
Casos d'Ús (Extern)
-
El cas d'ús per defecte: Aquesta és la millor pràctica per a qualsevol projecte que no sigui trivial.
-
Lògica reutilitzable: Per a llibreries, components d'interfície d'usuari (UI) o qualsevol funció que s'utilitzi en múltiples pàgines.
3. Com a Mòdul JavaScript (Module)
Des de ES6, JavaScript té un sistema de mòduls propi. Aquesta és una forma més moderna i estructurada d'usar codi extern.
Implementació
Es fa servir l'atribut type="module" a l'etiqueta <script>.
<body>
<h1>Exemple Mòdul</h1>
<script type="module" src="app.js"></script>
</body>Avantatges i Inconvenients (Mòdul)
Casos d'Ús (Mòdul)
-
Desenvolupament modern: Essencial per a projectes grans i estructurats basats en frameworks o llibreries (React, Vue, Angular) que utilitzen la importació/exportació de components.
-
Evitar contaminació global: Quan es vol assegurar que el codi estigui ben encapsulat.
Exemple (mòdul)
El Mòdul de Funcionalitats (utils.js). Aquest fitxer conté funcions o variables que volem reutilitzar en altres parts del nostre codi.
// utils.js
// 1. Exportació amb nom (Named Export)
export const PI = 3.14159;
export function suma(a, b) {
return a + b;
}
// 2. Exportació per defecte (Default Export)
// La funció principal del mòdul o la més rellevant.
export default function multiplica(a, b) {
return a * b;
}El Mòdul Principal (app.js). Aquest fitxer importa els valors i les funcions del fitxer utils.js per utilitzar-los.
// app.js
// 1. Importació amb nom: S'importa utilitzant els noms exactes.
import { PI, suma } from './utils.js';
// 2. Importació per defecte: Es pot assignar el nom que vulguis (aquí 'mult').
import mult from './utils.js';
console.log("--- Execució del Mòdul ---");
// Ús de la variable exportada
const areaCercle = PI * 5 * 5;
console.log(`L'àrea d'un cercle amb r=5 és: ${areaCercle.toFixed(2)}`);
// Sortida: L'àrea d'un cercle amb r=5 és: 78.54
// Ús de la funció suma
console.log(`La suma de 10 i 5 és: ${suma(10, 5)}`);
// Sortida: La suma de 10 i 5 és: 15
// Ús de la funció per defecte (multiplica)
console.log(`La multiplicació de 10 i 5 és: ${mult(10, 5)}`);
// Sortida: La multiplicació de 10 i 5 és: 50El Fitxer HTML (index.html). La clau aquí és l'atribut type="module" a l'etiqueta <script>. Això indica al navegador que carregui i executi app.js segons les regles dels mòduls d'ECMAScript, habilitant l'ús d'import.
<!DOCTYPE html>
<html>
<head>
<title>Exemple Mòduls JS</title>
</head>
<body>
<h1>Obre la Consola del Navegador (F12) per veure els resultats</h1>
<script type="module" src="app.js"></script>
</body>
</html>Una característica important dels mòduls és que, en lloc de contaminar l'àmbit global, les variables i funcions de utils.js (com PI i suma) són privades per defecte i només són accessibles a app.js mitjançant les declaracions explícites d'import. Si intentessis accedir a PI directament des del <script> de index.html (sense type="module"), rebries un error. Això manté el teu codi organitzat i lliure de conflictes.