Javascript
JavaScript (souvent abrégé JS) est le langage de programmation du web. Il permet de rendre les pages web interactives, dynamiques et intelligentes.
À propos de Javascript
JavaScript est un langage interprété, orienté objet et basé sur les événements, utilisé à la fois côté client (dans le navigateur) et serveur (avec Node.js). C’est l’un des trois piliers du développement web moderne, avec HTML (structure) et CSS (présentation).
Avec JavaScript, il est possible de :
- manipuler le contenu et la structure HTML ;
- gérer les événements utilisateur (clics, saisies, défilement, etc.) ;
- effectuer des appels réseau asynchrones (AJAX, API REST) ;
- créer des interfaces modernes et réactives ;
- développer des applications web complètes avec des frameworks comme Vue.js, React ou Angular.
Utilisation et intégration
JavaScript peut être ajouté de plusieurs manières :
- En ligne : directement dans une balise HTML via l’attribut
onclickouonchange. - Interne : entre des balises
<script>dans le fichier HTML. - Externe : dans un fichier séparé (
app.js) lié à la page via :
1<script src="app.js"></script>Exemple simple
1<!DOCTYPE html> 2<html lang="fr"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Exemple JavaScript</title> 7</head> 8<body> 9 <h1 id="titre">Bonjour</h1>10 <button onclick="changerTexte()">Changer le texte</button>11 12 <script>13 function changerTexte() {14 document.getElementById("titre").textContent = "Bienvenue sur Larafrique";15 }16 </script>17</body>18</html>Ici, le texte du titre change lorsque l’utilisateur clique sur le bouton.
Variables et fonctions
JavaScript utilise trois mots-clés principaux pour déclarer des variables : var, let, et const.
1let nom = "Aud";2const site = "Larafrique";3var age = 25;4 5function saluer() {6 console.log("Bonjour " + nom + ", bienvenue sur " + site);7}8 9saluer();Manipulation du DOM
Le DOM (Document Object Model) représente la structure HTML d’une page. JavaScript permet d’y accéder et de la modifier dynamiquement :
1const titre = document.querySelector('h1');2titre.style.color = 'blue';3titre.textContent = 'Texte modifié avec JavaScript';Exemple d’interaction dynamique
1<input type="text" id="nom" placeholder="Entrez votre nom">2<button id="btn">Afficher un message</button>3 4<script>5document.getElementById('btn').addEventListener('click', () => {6 const nom = document.getElementById('nom').value;7 alert('Bonjour ' + nom + ' !');8});9</script>Ce script affiche une boîte de dialogue avec le nom saisi par l’utilisateur.
Appel à une API
JavaScript permet de récupérer des données externes sans recharger la page :
1fetch('https://api.example.com/posts')2 .then(response => response.json())3 .then(data => {4 console.log(data);5 })6 .catch(error => {7 console.error('Erreur :', error);8 });Bonnes pratiques et outils modernes
- Utiliser
letetconstplutôt quevarpour éviter les erreurs de portée. - Toujours gérer les erreurs dans les promesses (
.catch()). - Organiser le code en modules (
import/export). - Utiliser un linter (comme ESLint) pour vérifier la qualité du code.
- Outils modernes : frameworks et bibliothèques comme Vue.js, React, Angular, ou Alpine.js pour des interfaces réactives.
- Outils de build : Webpack, Vite ou Parcel pour optimiser le code en production.
Exemple d’utilisation d’un module :
1// fichier utils.js2export function addition(a, b) {3 return a + b;4}5 6// fichier app.js7import { addition } from './utils.js';8 9console.log(addition(5, 3)); // 8JavaScript est aujourd’hui indispensable au développement web moderne. Il permet de créer des sites interactifs, dynamiques et connectés, et s’étend bien au-delà du navigateur jusque dans les serveurs, les applications mobiles et les logiciels de bureau grâce à des environnements comme Node.js et Electron.
