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