Incloure codi JavaScript

Podem incloure codi Javascript en una pàgina web de 3 formes diferents:

En el mateix document
En un fitxer extern
En els elements HTML

En el mateix document

El codi Javascript es troba tancat entre les etiquetes <script> en qualsevol part del document.

Es recomana la definició del codi en la capçalera del document <head>.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Exemple de codi JavaScript en el propi document</title>
    <script>
      alert("Hola mòn!!");
    </script>
  </head>

  <body>
    <p>Benvinguts al mòn Javascript</p>
  </body>
</html>

Demo

Inconvenients:

Una modificació del codi requereix modificar totes les pàgines que inclouen el bloc de codi.

En els elements HMTL

<!DOCTYPE html>
<html>
  <body>
    <h1>A Web Page</h1>
    <p id="demo">A Paragraph</p>
    <button type="button" onclick="myFunction()">Try it</button>

    <script>
      function myFunction() {
        document.getElementById("demo").innerHTML = "Paragraph changed.";
      }
    </script>
  </body>
</html>

Demo

Inconvenients:

Embruta innecessàriament el codi HTML de la pàgina i dificulta molt el manteniment del codi Javascript.

En un fitxer extern

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Exemple de codi JavaScript en un document extern</title>
    <script src="/js/myScript.js"></script>
  </head>
  <body>
    <h2>External JavaScript</h2>

    <p id="demo">A Paragraph.</p>

    <button type="button" onclick="myFunction()">Try it</button>

    <p>(myFunction is stored in an external file called "myScript.js")</p>
  </body>
</html>

myScript.js

function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}

Demo

Cada etiqueta <script> només pot enllaçar un únic arxiu.
En una mateixa pàgina es poden incloure tantes etiquetes <script> com siguin necessàries.
Els arxius de tipus JavaScript són documents de text amb extensió .js.

Avantatges

Separa HTML i del codi Javascript.
Fa que l’HTML i el JavaScript siguin més fàcil de llegir i mantenir
Qualsevol modificació que es realitza en l'arxiu Javascript es veu reflectida immediatament en totes les pàgines enllaçades.

Exercicis

Exercici 1: Creació d'un arxiu HTML + JavaScript:

Crea una carpeta al teu ordinador per al projecte (exemple: curs-javascript).
A VS Code, obre aquesta carpeta (File > Open Folder).

Afegeix un nou fitxer index.html amb el següent contingut bàsic:

<!DOCTYPE html>
<html lang="ca">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Primera prova amb JavaScript</title>
  </head>
  <body>
    <h1>Hola, món!</h1>
    <script src="script.js"></script>
  </body>
</html>

Crea un altre fitxer anomenat script.js i afegeix-hi el següent codi:
```
console.log("El JavaScript funciona!");
```

Com executar el codi:

Obre el fitxer index.html en el navegador (fes doble clic sobre ell).
Obre DevTools i vés a la Consola per veure el missatge de "El JavaScript funciona!".

AnteriorQuè es pot fer amb Javascript?SiguienteSintaxi del llenguatge

Última actualización hace 1 día

¿Te fue útil?