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
- 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.
- 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ó.
- Orientat a Objectes: JavaScript suporta la programació orientada a objectes, permetent la creació d'objectes amb propietats i mètodes.
- Basat en Esdeveniments: JavaScript pot respondre a esdeveniments com clics de ratolí, moviments del ratolí, tecles pressionades, etc.
- 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
- Què és JavaScript?
- Configuració del Teu Entorn de Desenvolupament
- El Teu Primer Programa en JavaScript
- Sintaxi i Conceptes Bàsics de JavaScript
- Variables i Tipus de Dades
- Operadors Bàsics
Mòdul 2: Estructures de Control
- Declaracions Condicionals
- Bucles: for, while, do-while
- Declaracions Switch
- Gestió d'Errors amb try-catch
Mòdul 3: Funcions
- Definició i Crida de Funcions
- Expressions de Funció i Funcions Fletxa
- Paràmetres i Valors de Retorn
- Àmbit i Tancaments
- Funcions d'Ordre Superior
Mòdul 4: Objectes i Arrays
- Introducció als Objectes
- Mètodes d'Objecte i Paraula Clau 'this'
- Arrays: Conceptes Bàsics i Mètodes
- Iteració sobre Arrays
- Desestructuració d'Arrays
Mòdul 5: Objectes i Funcions Avançades
- Prototips i Herència
- Classes i Programació Orientada a Objectes
- Mòduls i Importació/Exportació
- JavaScript Asíncron: Callbacks
- Promeses i Async/Await
Mòdul 6: El Model d'Objectes del Document (DOM)
- Introducció al DOM
- Selecció i Manipulació d'Elements del DOM
- Gestió d'Esdeveniments
- Creació i Eliminació d'Elements del DOM
- Gestió i Validació de Formularis
Mòdul 7: APIs del Navegador i Temes Avançats
- Emmagatzematge Local i de Sessió
- Fetch API i AJAX
- WebSockets
- Service Workers i Aplicacions Web Progressives (PWAs)
- Introducció a WebAssembly
Mòdul 8: Proves i Depuració
- Depuració de JavaScript
- Proves Unitàries amb Jest
- Proves d'Integració
- Proves de Cap a Cap amb Cypress
Mòdul 9: Rendiment i Optimització
- Optimització del Rendiment de JavaScript
- Gestió de Memòria
- Manipulació Eficient del DOM
- Càrrega Per Mandat i Divisió de Codi
Mòdul 10: Frameworks i Llibreries de JavaScript
- Introducció a React
- Gestió d'Estat amb Redux
- Conceptes Bàsics de Vue.js
- Conceptes Bàsics d'Angular
- Triar el Framework Adequat