Introducció

En aquesta secció, aprendrem a escriure el nostre primer programa en JavaScript. Ens centrarem en la creació d'un simple programa que mostrarà un missatge a la consola del navegador. Aquest exercici ens ajudarà a familiaritzar-nos amb l'entorn de desenvolupament i amb la sintaxi bàsica de JavaScript.

Pas 1: Configuració de l'Entorn

Abans de començar a programar, necessitem configurar el nostre entorn de desenvolupament. Si encara no ho has fet, segueix les instruccions de la secció anterior sobre la configuració del teu entorn de desenvolupament.

Eines Necessàries

Editor de Text: Recomanem utilitzar Visual Studio Code, però qualsevol editor de text servirà.
Navegador Web: Utilitzarem la consola del navegador per veure els resultats del nostre programa. Google Chrome és una bona opció.

Pas 2: Crear un Fitxer HTML

Per executar JavaScript, necessitem un fitxer HTML que contindrà el nostre codi JavaScript. Crearem un fitxer anomenat index.html.

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>El Meu Primer Programa en JavaScript</title>
</head>
<body>
    <h1>Hola, JavaScript!</h1>
    <script src="script.js"></script>
</body>
</html>

Explicació del Codi

<!DOCTYPE html>: Declara el tipus de document com HTML5.
<html lang="ca">: Defineix l'idioma del document com a català.
<head>: Conté metadades sobre el document.
<meta charset="UTF-8">: Defineix la codificació de caràcters com UTF-8.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Assegura que la pàgina es mostri correctament en dispositius mòbils.
<title>: Defineix el títol de la pàgina.
<body>: Conté el contingut visible de la pàgina.
<h1>: Un encapçalament de nivell 1 que mostra "Hola, JavaScript!".
<script src="script.js"></script>: Inclou el fitxer JavaScript anomenat script.js.

Pas 3: Crear un Fitxer JavaScript

Ara crearem un fitxer JavaScript anomenat script.js en el mateix directori que el fitxer HTML.

// script.js
console.log("Hola, món!");

Explicació del Codi

console.log("Hola, món!");: Aquesta línia de codi envia el missatge "Hola, món!" a la consola del navegador.

Pas 4: Executar el Programa

Obre el fitxer index.html en el teu navegador web.
Obre la consola del navegador. En Google Chrome, pots fer-ho prement Ctrl + Shift + J (Windows/Linux) o Cmd + Option + J (Mac).
Hauries de veure el missatge "Hola, món!" a la consola.

Exercici Pràctic

Objectiu

Modifica el fitxer script.js per mostrar un altre missatge a la consola.

Instruccions

Obre el fitxer script.js.
Canvia el missatge dins de console.log per qualsevol altre missatge que vulguis.
Guarda el fitxer i refresca la pàgina index.html en el navegador.
Verifica que el nou missatge apareix a la consola.

Solució

// script.js
console.log("Benvingut al món de JavaScript!");

Resum

En aquesta secció, hem après a configurar el nostre entorn de desenvolupament, crear un fitxer HTML i un fitxer JavaScript, i executar el nostre primer programa en JavaScript. Ara que ja tens una base, estàs preparat per aprofundir en la sintaxi i els conceptes bàsics de JavaScript en les següents seccions.

El Teu Primer Programa en JavaScript

Introducció

Pas 1: Configuració de l'Entorn

Eines Necessàries

Pas 2: Crear un Fitxer HTML

Explicació del Codi

Pas 3: Crear un Fitxer JavaScript

Explicació del Codi

Pas 4: Executar el Programa

Exercici Pràctic

Objectiu

Instruccions

Solució

Resum

JavaScript: De Principiant a Avançat

Mòdul 1: Introducció a JavaScript

Mòdul 2: Estructures de Control

Mòdul 3: Funcions

Mòdul 4: Objectes i Arrays

Mòdul 5: Objectes i Funcions Avançades

Mòdul 6: El Model d'Objectes del Document (DOM)

Mòdul 7: APIs del Navegador i Temes Avançats

Mòdul 8: Proves i Depuració

Mòdul 9: Rendiment i Optimització

Mòdul 10: Frameworks i Llibreries de JavaScript

Mòdul 11: Projecte Final