Bases et concepts JavaScript
Kart yokExplorez les caractéristiques du langage JavaScript, son intégration HTML, les bases de programmation et la manipulation du DOM.
Le Langage JavaScript
Le JavaScript est un langage de programmation dynamique principalementutilisé pour rendre les pages web interactives. Il permet d'ajouter des fonctionnalités côtéclient, comme des interactions utilisateur, des animations et une aide à la navigation.
Caractéristiques Principales
Dynamique : Ajoute de l'interactivité, des animations et aide à la navigation sur les pages HTML.
Côté client (principalement) : Exécuté par le navigateur de l'utilisateur. Depuis 2009, il est également utilisé côté serveur avec Node.js.
Interprété : Le code est exécuté directement par uninterpréteur intégré au navigateur.
Internet Explorer : JScript
Mozilla Firefox : SpiderMonkey
Google Chrome : V8
Langage interprété : Exécution directe sans compilation intermédiaire.
Où Écrire le Code JavaScript ?
Le code JavaScript est délimité par la balise `<script>`. Il peut être inséré dans l'en-tête (`<head>`) ou dans le corps (`<body>`) d'une page HTML.
Emplacement du Code
Dans la page HTML : Inséré directement entre les balises `<script>`et `</script>`.
Dans un fichier externe :
Fichier avec l'extension `.js`.
Chargé via `<script src="unFichier.js" type="text/javascript"></script>`.
Les scripts sont exécutés dans leur ordre d'apparition.
Considérations sur l'Emplacement
Dans l'en-tête (`<head>`) : Lesscripts sont chargés et exécutés avant la construction et l'affichage de la page.
Dans le corps (`<body>`) : Exécutés au fur et à mesure que le DOM est construit. Souvent placés à la fin du `<body>` (justeavant `</body>`) pour améliorer la vitesse de chargement de la page.
Quand l'attribut src est utilisé, il ne faut rien écrire entre les balises `<script src="...">` et `</script>`.
Caractéristiques du JavaScript
Variables : Faiblement typées.
Opérateurs et instructions : Identiques à ceux du C/C++/Java.
Objets (basés sur des prototypes) :
Prédéfinis : `string`, `date`, `math`, etc.
Liés à l'environnement : `window` (navigateur), `global` (Node.js).
Définis par l'utilisateur.
Fonctions/Procédures :
Globales : Méthodes associées à tous les objets (`parseInt()`, `isNaN()`, `setTimeout()`).
Méthodes : Définies dans les prototypes d'objets natifs (`array.push()`, `str.toUpperCase()`).
Définies par l'utilisateur.
Commentaires : `//` pour une ligne ou `/* ... */` pour plusieurs lignes.
Séparateur d'instruction : `;` (facultatif mais recommandé).
Indentation : Non obligatoire mais fortement conseillée pour la lisibilité.
Opérateurs
Les opérateurs sont similaires à ceux du C/C++/Java :
Arithmétiques : `+`, `-`, `*`, `/`, `%`.
In/décrémentation : `nom_var++`, `nom_var--`, `++nom_var`, `--nom_var`.
Logiques : `&&`, `||`,`!`.
Comparaisons : `==`, `!=`, `===`, `!==`, `<=`, `<`, `>=`, `>`.
`==` : Comparaison de valeur (avec conversion de type). Ex: `3 == '3'` est true.
`===` : Comparaison de valeur et de type. Ex: `3 === '3'` est false.
Concaténation de chaîne : `+`.
Affectation : `=`, `+=`, `-=`, `*=`, etc.
Les Bases du Langage JavaScript
Utilisation de Variables
Déclaration : `var nom [= valeur];`.
Depuis ES6 :
`let` : Pour les variables mutables.
`const` : Pour les constantes (valeur fixe).
Si aucune valeur à l'initialisation, la variable vaut `undefined`.
Le JavaScript est un langage à typage dynamique (letype est déterminé à l'affectation), permettant le transtypage.
L'opérateur `typeof` permet de déterminer le type d'une variable.
Distinction entre variables locales (dans une fonction) et globales (endehors d'une fonction).
Le JavaScript est sensible à la casse.
`let` vs `var`
La différence entre `let` et `var` réside dans leur portée (scope), le hoisting (remontée) etleur comportement en cas de redéclaration.
var | let | |
Portée (Scope) |
|
|
Réaffectation et Redéclaration |
|
|
Hoisting (Remontée) |
|
|
Une fonction peut modifier une variable globale si aucune nouvelle variable avec le même nom n'est redéclarée (`let`, `const`, ou `var`) à l'intérieur de cette fonction.
Les Sorties en JavaScript
Plusieurs méthodes pour afficher des informations :
`alert("Hello");` : Affiche un message dans une fenêtre d'alerte.
`document.write("Hi!");` : Affiche du contenu directement dans le document HTML.
`console.log("Good morning");` : Affichedans la console du navigateur.
`console.error("Erreur");` : Affiche un message d'erreur dans la console.
`console.table(['a','b','c'])` : Affiche un tableau dans la console.
`console.log("Hello from %cJS %cCorse", "color:blue; font-size : 40px", "color:red; font-size : 40px");` : Affiche avec mise en forme CSS dans la console.
`document.getElementById("output").innerHTML = "Bonjour, monde!";` : Modifie le contenu HTML d'un élément spécifique.
Boîtes de Dialogue
Le JavaScript offre des boîtes de dialogue "pop-up" pour interagir avec l'utilisateur :
Alerte : `window.alert("Bonjour Macha!");` (affichage d'un message).
Saisie : `reponse = window.prompt("Insérez Votre Prénom", "chaîne par défaut");` (saisie de texte).
Confirmation : `reponse = window.confirm("ConfirmezVotre Prénom");` (question oui/non).
Instructions Conditionnelles
if / else if / else
Une structure de contrôle pour exécuter différents blocs de code en fonction de conditions.
if (condition) {
// instructions si condition est vraie
} [else if (autreCondition) {
// instructions si autreCondition est vraie
}] [else {
// instructions si aucune condition n'est vraie
}]
Opérateur Ternaire (?:)
Une façon concise d'écrire des conditions simples, alternative à `if/else`pour des cas courts.
condition ? valeurSiVrai : valeurSiFaux;
Par exemple : `let message = (age < 18) ? "Mineur" : "Majeur";`
switch
Compare une variable ou une expression avecplusieurs cas possibles, idéal pour des comparaisons multiples de valeurs fixes.
switch (variable) {
case 'valeur1':
// Instructions
break;
/* ... */
default:
// Instructions
break;
}
Boucles
for
Utilisée pour itérer un nombre prédéfini de fois.
for (initialisation; condition; incrément/décrément) {
// Code à exécuter
}
while
Exécute un bloc de code tant qu'une condition reste vraie.
while (condition) {
// Code à exécuter
}
do...while
Similaire à `while`, mais garantit que le bloc de code est exécuté au moins une fois, même si la condition est fausse dès le départ.
do {
// Code à exécuter
} while (condition);
for...of
Itère sur les valeurs d'objets itérables (tableaux, chaînes, objets `Set`/`Map`, etc.).
for (const valeur of iterable) {
// Code à exécuter pour chaque valeur
}
Les Fonctions
Les fonctions sont des blocs de code réutilisables.
1. Fonction Déclarée
Nommées et disponibles dans tout le scope (grâce au hoisting).
function nomDeLaFonction(param1, param2) {
// Corps de la fonction
return result;
}
2. Fonction Anonyme
Une fonction sans nom, souvent utilisée dans des expressions ou comme callback.
const addition = function(a, b) {
return a + b;
};
3. Fonction Fléchée (Arrow Function)
Syntaxe concise (ES6+), souvent utilisée pour des fonctions anonymes.
const nomDeLaFonction = (param1, param2) => {
// Corps de la fonction
return result;
};
Sans parenthèses si un seul paramètre : `const carre =x => x * x;`
Avec des accolades si le corps contient plusieurs instructions :
const calcul = (a, b) => { console.log(a, b); return a + b; };
Les instructions après un `return` dans une fonction ne sont pas exécutées, car `return` termine immédiatement l'exécution de la fonction.
4. Fonction en Paramètre (Callback Function)
Une fonction passée en argument à une autre fonction pour être exécutée ultérieurement.
function saluer(nom, callback) {
console.log(`Bonjour ${nom}`);
callback();
}
saluer("Alice", () => console.log("Callback exécuté !"));
5. Fonction avec Défaut de Paramètres
Les paramètres peuvent avoirdes valeurs par défaut si aucun argument n'est fourni.
function saluer(nom = "Invité") {
console.log(`Bonjour undefined{expression}` sans échapper les guillemets.Interaction avec HTML : le DOM
Le DOM (Document Object Model) est une interface de programmation (API) pour les documents HTML et XML. Il représente la page web comme une arborescence d'objets, permettant d'interagir dynamiquement avec son contenu, sa structure et son style.
Le DOM Manipule
Les éléments HTMLcomme des objets.
Les propriétés de tous les éléments HTML.
Les méthodes pour accéder à tous les éléments HTML.
Les événements pour tous les éléments HTML.
Le DOM permet de changer les éléments HTML, les attributs, les styles CSS, de supprimer/ajouter des éléments/attributs, et de réagir/créer des événements.
Les Objets JavaScript liés au DOM
L'objet `window`
L'objet global de la fenêtre du navigateur, parent de tous les objets de la page. Contient :
L'objet `document` : Représente la page HTML.
L'objet `location` : Gère l'URL de la page.
L'objet `history` : Gère l'historique de navigation.
Méthodes : `alert()`, `confirm()`, `prompt()`, `open()`, `close()`, etc.
L'objet `document`
Sous-objet de `window`, représente la balise `<html>` et permet de manipuler tous les objets inclus dans le document HTML. Méthode : `write()` (écrire directement dans le document).
Navigation dans le DOM
1. Méthodes d'Accès Direct aux Éléments
`getElementById()` : Sélectionne un élément par son ID (`#id`).
`getElementsByTagName()` : Sélectionne des éléments par leur nom de balise (`<p>`).
`getElementsByName()` : Sélectionne des éléments par leur attribut `name` (spécifique aux formulaires).
`getElementsByClassName()` : Sélectionne des éléments parleur classe CSS (`.classe`).
`querySelector()` : Sélectionne le *premier* élément correspondant à un sélecteur CSS.
`querySelectorAll()` : Sélectionne *tous* les éléments correspondant à un sélecteur CSS.
2. Quelques Propriétés des Objets DOM
`nodeValue` : Accède ou modifie le contenu textuel d'un nœud spécifique (non-élément).
`textContent` : Accède ou modifie le texte contenu dans un élément, sans le HTML.
`innerHTML` : Accèdeou modifie le contenu HTML interne d'un élément (inclut les balises).
`value` : Accède ou modifie la valeur des éléments de formulaire (`<input>`, `<textarea>`).
`nodeValue` ne fonctionne pas directement avec les nœuds d'éléments HTML.
Les Méthodes pour Manipuler les Attributs des Éléments HTML
`setAttribute(nomAttribut, valeur)` : Définit la valeur d'un attribut.
`getAttribute(nomAttribut)` : Récupère la valeur d'un attribut.
`removeAttribute(nomAttribut)` : Supprime un attribut.
L'objet `classList`
Fournit des méthodes pour gérer les classes CSS d'un élément :
`add(classe)` : Ajoute une classe.
`remove(classe)` : Supprime une classe.
`contains(classe)` : Vérifie si l'élément possède une classe spécifique.
Les Événements et le DOM
Les événements sontdes actions (utilisateur, navigateur) que JavaScript peut détecter et auxquelles il peut réagir.
Événements Fréquents
`onclick` : Clic sur un élément.
`onmouseover` : Survol d'un élément par la souris.
`onblur` : Perte de focus sur un élément.
`onfocus` : Gain de focus sur un élément.
`onselect` : Sélection de texte.
`onchange` : Modification du contenu d'un élément de formulaire.
`onsubmit` : Soumission d'un formulaire.
`onload` : Fin du chargement d'un élément (page, image).
`onunload` : Fermeture d'une fenêtre ou chargement d'une autre page.
Gestionnaire d'Événement
Une fonction associée à un élément HTML qui est déclenchée en réponse à un événement spécifique.
Comment Attacher un Gestionnaire ?
À l'attribut HTML de l'élément : `<h1 onclick="this.innerHTML = 'Ooops!'">`
`this` représente l'élément courant sur lequel l'événement se produit.
À la propriété événement de l'objet JavaScript :
document.getElementsByTagName('p')[0].onclick = maFonction;
Un seul gestionnaire peut être assigné par événement de cette manière ; les assignations successives écrasent les précédentes.
En utilisant `addEventListener()`(écouteur d'événement) :
element.addEventListener("typeEvenement", fonctionGestionnaire);
Permet d'affecter plusieurs gestionnaires à un même événement sur un élément.
Le type d'événement est sansle préfixe `on` (ex: "click" au lieu de "onclick").
2. Méthodes d'Accès Relatifs aux Éléments du DOM
a) Accès aux nœuds enfants
`childNodes` : Retourne tous les nœuds enfants (éléments HTML, nœuds texte, commentaires, etc.).
`children` : Retourne une `HTMLCollection` d'éléments enfants (balises HTML uniquement).
`firstChild`, `lastChild` : Permettent d'accéderau premier/dernier nœud enfant.
Le DOM interprète les espaces, tabulations et sauts de ligne comme des nœuds texte. Si seules les balises HTML sont souhaitées, utilisez `children` ou `firstElementChild`.
b) Accès aux nœuds ancêtres
`parentNode` : Permet de naviguer vers le nœud parent d'un élément.
c) Accès aux nœuds-frères
`nextSibling` : Accède au nœud suivant demême niveau.
`previousSibling` : Accède au nœud précédent de même niveau.
Modification de la Structure du DOM
1. Créer et Rattacher un Nœud
`document.createElement(tagName)` : Crée un nouvel élémentHTML.
`conteneur.appendChild(node)` : Ajoute un nœud enfant à un nœud parent.
2. Supprimer un Nœud du DOM
`conteneur.removeChild(noeud)` : Supprime un nœud enfant d'unnœud parent.
Objet
Un objet est une collection de variables (appelées propriétés) et de fonctions (appelées méthodes) ayant un lien entre elles.
Les propriétés peuvent contenir des valeurs de différents types (chaîne, nombre, booléen, tableau, fonction, autre objet).
`this` : Mot-clé qui permet de faire référence aux propriétés et méthodes de l'objet courant à l'intérieur de ses propres méthodes.
`sessionStorage` & `localStorage`
Deux objets JavaScript pour stocker des données dansle navigateur. La différence principale est la durée de stockage.
sessionStorage
localStorage
Durée
Temporaire : Données effacées àla fermeture de l'onglet/navigateur.
Persistante : Données disponibles tant que l'utilisateur ne les efface pas manuellement.
Cas d'Usage
État temporaire d'un formulaire.
Données spécifiques à la session de navigation.
Préférences utilisateur (thème, langue).
Données de panier d'achat.
Jetons d'authentification persistant.
Méthodes Communes
`setItem(clé, valeur)` : Sauvegarde une information.
sessionStorage.setItem('username', 'Ali');
`getItem(clé)` :Récupère une information par sa clé.
const localUser = localStorage.getItem('username');
`removeItem(clé)` : Supprime une clé spécifique.
localStorage.removeItem('username');
`clear()`: Efface toutes les informations stockées.
localStorage.clear();
`sessionStorage` et `localStorage` ne sont pas partagés entre différentes applications web ou origines (domaines) ; chaque origine a son propre espace de stockage isolé.
Bir quiz başla
Bilgini etkileşimli sorularla test et