Introducció

JavaScript és un dels llenguatges de programació més populars i àmpliament utilitzats en el desenvolupament web. Va ser creat originalment per Brendan Eich mentre treballava a Netscape Communications Corporation i es va llançar el 1995. JavaScript és un llenguatge de programació interpretat, de tipus dinàmic, i orientat a objectes, que permet als desenvolupadors crear pàgines web interactives i dinàmiques.

Característiques Clau de JavaScript

  1. Interpretat: JavaScript és un llenguatge interpretat, el que significa que el codi és executat directament pel navegador web sense necessitat de ser compilat prèviament.
  2. Tipus Dinàmic: No cal declarar el tipus de dades d'una variable abans d'utilitzar-la. El tipus de dades es determina automàticament en temps d'execució.
  3. Orientat a Objectes: JavaScript suporta la programació orientada a objectes, permetent la creació d'objectes amb propietats i mètodes.
  4. Basat en Esdeveniments: JavaScript pot respondre a esdeveniments com clics de ratolí, moviments del ratolí, tecles pressionades, etc.
  5. Multiplataforma: JavaScript es pot executar en qualsevol navegador web modern, independentment del sistema operatiu.

Usos de JavaScript

JavaScript s'utilitza principalment per a:

  • Desenvolupament Frontend: Crear interfícies d'usuari interactives i dinàmiques en aplicacions web.
  • Desenvolupament Backend: Amb l'arribada de Node.js, JavaScript també es pot utilitzar per desenvolupar aplicacions del costat del servidor.
  • Aplicacions Mòbils: Frameworks com React Native permeten desenvolupar aplicacions mòbils utilitzant JavaScript.
  • Aplicacions d'Escriptori: Frameworks com Electron permeten crear aplicacions d'escriptori multiplataforma amb JavaScript.

Exemple de Codi

A continuació, es mostra un exemple senzill de codi JavaScript que mostra un missatge d'alerta quan es carrega la pàgina:

// Mostra un missatge d'alerta quan es carrega la pàgina
window.onload = function() {
    alert("Benvingut al curs de JavaScript!");
};

Explicació del Codi

  • window.onload: Aquest esdeveniment s'activa quan tota la pàgina, incloent tots els recursos (imatges, scripts, etc.), ha estat carregada.
  • function() { ... }: Defineix una funció anònima que s'executarà quan es carregui la pàgina.
  • alert("Benvingut al curs de JavaScript!");: Mostra un missatge d'alerta amb el text especificat.

Exercici Pràctic

Objectiu: Crear un fitxer HTML que inclogui un script JavaScript que mostri un missatge d'alerta quan es faci clic en un botó.

Pas 1: Crear el Fitxer HTML

Crea un fitxer anomenat index.html amb el següent contingut:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple JavaScript</title>
</head>
<body>
    <button id="alertButton">Fes clic aquí</button>
    <script src="script.js"></script>
</body>
</html>

Pas 2: Crear el Fitxer JavaScript

Crea un fitxer anomenat script.js amb el següent contingut:

// Selecciona el botó per ID
const button = document.getElementById('alertButton');

// Afegeix un esdeveniment de clic al botó
button.onclick = function() {
    alert("Has fet clic al botó!");
};

Explicació del Codi

  • document.getElementById('alertButton'): Selecciona l'element del botó per l'ID especificat.
  • button.onclick = function() { ... }: Afegeix un esdeveniment de clic al botó que executa la funció especificada quan es fa clic.

Conclusió

En aquesta secció, hem après què és JavaScript, les seves característiques clau i alguns dels seus usos més comuns. També hem vist un exemple pràctic de codi JavaScript i hem realitzat un exercici per reforçar els conceptes apresos. En la següent secció, configurarem el nostre entorn de desenvolupament per començar a escriure codi JavaScript de manera eficient.

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

© Copyright 2024. Tots els drets reservats