Les bases du Javascript
Assuré par : Mme Hanene Ghazoauni
Let vs var
• En JavaScript, let et var sont deux mots-clés utilisés pour déclarer des variables, mais ils ont des
différences importantes, notamment en ce qui concerne leur portée et leur comportement.
• 1. Portée (Scope)
• var : La portée de var est fonctionnelle, c'est-à-dire qu'elle est limitée à la fonction dans laquelle elle
est définie. Si var est défini en dehors d'une fonction, il a une portée globale.
• let : La portée de let est bloc (ou locale), c'est-à-dire qu'elle est limitée au bloc de code entre accolades
{ } dans lequel elle est définie (comme une boucle for, une condition if, etc.).
• Exemple
• function testVarLet()
{ if (true) { var x = 10; // variable avec "var«
let y = 20; // variable avec "let" }
[Link](x); // 10 : x est accessible car sa portée est la fonction
[Link](y); // Erreur : y n'est pas accessible car sa portée est le bloc }
testVarLet();
• Dans cet exemple, x est accessible en dehors du bloc if car il est déclaré avec var, qui a une portée de
fonction. En revanche, y, déclaré avec let, est limité au bloc if et provoquera une erreur si on essaie de
l’accéder en dehors de ce bloc.
Suptech 2
Let vs var
• Hoisting (Élévation)
• var : Les variables déclarées avec var sont "hoistées" (élevées) en haut de leur portée. Cela
signifie qu'elles sont "déclarées" en haut de la fonction ou de la portée globale avant que le
code ne soit exécuté, mais sans leur valeur.
• let : Les variables déclarées avec let sont aussi hoistées, mais elles ne sont pas initialisées.
Cela signifie qu’elles ne peuvent pas être utilisées avant leur déclaration dans le code (zone
appelée "temporal dead zone").
• Exemple
[Link](a); // undefined (élevé, mais pas encore initialisé)
var a = 5;
[Link](b); // Erreur : impossible d'accéder avant l'initialisation
let b = 10;
Dans cet exemple, la déclaration de a est hoistée, donc a est défini (mais avec une valeur
undefined). En revanche, b provoque une erreur si on y accède avant sa déclaration.
Suptech 3
Let vs var
• Réassignation et Redeclaration
• var : Peut être redéclaré et réassigné dans la même portée sans
erreur.
• let : Peut être réassigné mais ne peut pas être redéclaré dans la
même portée.
• Exemple
• var a = 1;
• var a = 2; // Pas d'erreur, `a` est redéclaré
• let b = 1;
• let b = 2; // Erreur, `b` ne peut pas être redéclaré
Suptech 4
Let vs var
• En général, let est préféré car il offre une portée plus contrôlée et
limite les erreurs potentielles dues à l'élévation. var est souvent
réservé aux cas où l'on doit maintenir une compatibilité avec du code
JavaScript plus ancien.
N.B
• undefined est attribué automatiquement par JavaScript quand une
variable est déclarée mais non initialisée.
• null est attribué explicitement par le programmeur pour indiquer
l'absence de valeur.
Suptech 5
Browser Object Model (BOM
• Le Browser Object Model (BOM) est un ensemble d'objets fournis
par le navigateur qui permet aux développeurs de manipuler et
d'interagir avec le navigateur lui-même. Contrairement au Document
Object Model (DOM), qui traite de la structure du document HTML,
le BOM se concentre sur les objets liés au navigateur et à
l'environnement d'exécution de la page Web.
Suptech 6
Composants principaux du BOM
• Voici quelques-uns des objets et fonctionnalités clés du BOM :
• Objet window :
• L'objet principal du BOM. Il représente la fenêtre du navigateur et contient des
propriétés et des méthodes pour gérer l'affichage, les alertes, le stockage, et plus encore.
• Exemple de propriétés : [Link], [Link] (dimensions de la
fenêtre).
• Exemple de méthodes : [Link](), [Link](), [Link]() (pour
afficher des boîtes de dialogue).
• Objet navigator :
• Contient des informations sur le navigateur de l'utilisateur, comme son nom, sa version,
et le système d'exploitation.
• Exemple : [Link], qui renvoie une chaîne contenant des informations sur
le navigateur et le système.
Suptech 7
Composants principaux du BOM
• Objet screen :
• Fournit des informations sur la taille et la résolution de l'écran de l'utilisateur.
• Propriétés : [Link], [Link], [Link], [Link]
(dimensions de l'écran total et disponible).
• Objet location :
• Représente l'URL de la page actuelle et permet de manipuler l'URL, comme changer de
page ou recharger la page.
• Méthodes : [Link] (pour obtenir ou définir l'URL), [Link]() (pour recharger
la page), [Link]() (pour remplacer l'URL actuelle).
• Objet history :
• Permet de naviguer dans l'historique de navigation de l'utilisateur.
• Méthodes : [Link]() (pour revenir à la page précédente), [Link]() (pour
avancer dans l'historique), [Link]() (pour naviguer à une position spécifique dans
l'historique).
Suptech 8
Utilisation du BOM
• Le BOM est largement utilisé pour :
• Interagir avec le navigateur (afficher des alertes, des confirmations).
• Obtenir des informations sur l'environnement utilisateur (taille de
l'écran, informations sur le navigateur).
• Gérer la navigation (modifier l'URL, manipuler l'historique).
Suptech 9
Exemples d'utilisation du BOM
Voici quelques exemples d'utilisation des objets du BOM :
• 1. Afficher une alerte
[Link]("Ceci est une alerte !");
• 2. Obtenir des informations sur le navigateur
[Link]("User Agent:", [Link]);
• 3. Changer l'URL de la page
[Link] = "[Link]
Suptech 10
Exemples d'utilisation du BOM
• 4. Naviguer dans l'historique
[Link](); // Retourne à la page précédente
• Conclusion
• Le BOM est un aspect essentiel du développement web en
JavaScript, permettant d'interagir avec le navigateur et d'améliorer
l'expérience utilisateur. Bien qu'il soit moins structuré que le DOM, il
offre une puissante interface pour accéder et manipuler divers
aspects du navigateur.
Suptech 11
Les bonnes pratiques en JavaScript
• Les bonnes pratiques en JavaScript sont essentielles pour écrire du
code propre, lisible et maintenable. Elles facilitent également la
collaboration entre développeurs et le débogage. Voici un aperçu des
bonnes pratiques à suivre concernant les commentaires, l'indentation,
les conventions de nommage, l'utilisation des constantes, des mots
clés réservés, des techniques de débogage et l'utilisation de
[Link].
Suptech 12
Commentaires
• Utilisez des commentaires pour expliquer le code : Les
commentaires aident à clarifier l'intention du code pour d'autres
développeurs (ou vous-même dans le futur). Utilisez des
commentaires simples pour expliquer des sections de code ou des
algorithmes complexes.
• // Calcule la somme de deux nombres function add(a, b) { return a +
b; }
• Évitez les commentaires évidents : Ne commentez pas ce qui est
déjà clair. Par exemple, ne mettez pas un commentaire pour
expliquer une simple affectation.
Suptech 13
Indentation
• Utilisez une indentation cohérente : Une bonne indentation
améliore la lisibilité du code. Utilisez des espaces ou des tabulations
de manière cohérente (généralement 2 ou 4 espaces par niveau
d'indentation).
Suptech 14
Conventions de nommage
• 3. Utilisez des noms significatifs : Choisissez des noms de variables,
de fonctions et de classes qui décrivent clairement leur but.
• let totalPrice = 100; // Bon exemple let x = 100; // Mauvais exemple
• Utilisez le camelCase pour les variables et les fonctions : En
JavaScript, il est courant d'utiliser la notation camelCase (par
exemple, calculateTotal) pour nommer les variables et les fonctions.
• Utilisez PascalCase pour les classes : Les classes sont souvent
nommées en utilisant la notation PascalCase (par exemple,
UserAccount).
Suptech 15
4. No Script
• Prévoir le cas où JavaScript est désactivé : Utilisez des balises
<noscript> pour afficher un message ou du contenu alternatif aux
utilisateurs dont le JavaScript est désactivé.
<noscript>
<p>JavaScript est désactivé dans votre navigateur.
Veuillez l'activer pour utiliser toutes les fonctionnalités de ce site.
</p>
</noscript>
Suptech 16
5. Constantes
• Utilisez const pour les variables qui ne changent pas : Lorsque
vous déclarez des variables dont la valeur ne doit pas changer,
utilisez const. Cela permet d'indiquer clairement que la variable est
immuable.
• const PI = 3.14;
Suptech 17
.Mots clés réservés
Évitez d'utiliser des mots clés réservés comme noms de variables :
Certains mots ont des significations spéciales en JavaScript et ne
doivent pas être utilisés comme noms de variables (par exemple, let,
var, function, if, etc.).
Suptech 18
Mot clé du débogueur
• Utilisez debugger; pour des points d'arrêt : Le mot clé debugger
peut être utilisé pour interrompre l'exécution du code au moment où
vous souhaitez examiner les valeurs des variables et l'état de
l'application.
• function testDebug()
• { let x = 10;
• debugger; // L'exécution s'arrête ici si le débogueur est actif
[Link](x);
• }
Suptech 19
8. Définition des points d’arrêt
• Utilisez les outils de développement du navigateur pour définir
des points d'arrêt : Dans la plupart des navigateurs, vous pouvez
ouvrir les outils de développement (généralement avec F12) et
définir des points d'arrêt dans votre code JavaScript. Cela vous
permettra de vérifier l'état de votre application à un moment donné.
Suptech 20
9. [Link]
• Utilisez [Link]() pour le débogage : [Link]() est un outil
précieux pour afficher des informations dans la console du
navigateur, ce qui peut vous aider à comprendre ce qui se passe dans
votre code.
[Link]("Le total est :", totalPrice);
• Évitez d’utiliser [Link] dans le code de production : Une fois
que vous avez terminé le débogage, supprimez ou commentez les
appels à [Link]() pour éviter de polluer la console lors de
l'utilisation de l'application.
Suptech 21
Conclusion
• En suivant ces bonnes pratiques en JavaScript, vous pouvez écrire un
code plus propre, plus lisible et plus maintenable. Cela facilite la
collaboration avec d'autres développeurs et simplifie le débogage.
N'oubliez pas que la clarté et la cohérence sont des clés essentielles
pour un code de qualité.
Suptech 22
Scripts Internes vs Externes :
Définition
• Scripts internes : Le code JavaScript est inclus directement dans la balise <script>
de la page HTML, souvent dans le <head> ou le <body>.
• <!DOCTYPE html> <html lang="fr"> <head> <title>Script interne</title>
<script> [Link]("Ceci est un script interne."); </script> </head> <body> <!--
Contenu --> </body> </html>
• Scripts externes : Le code JavaScript est placé dans un fichier séparé
(généralement .js) et inclus dans la page HTML avec une balise <script
src="[Link]"></script>.
• <!DOCTYPE html> <html lang="fr"> <head> <title>Script externe</title> <script
src="[Link]"></script> </head> <body> <!-- Contenu --> </body> </html>
• Dans le fichier [Link] :
[Link]("Ceci est un script externe.");
Suptech 23
Quand utiliser des scripts internes ou
externes
Utilisation de scripts internes :
• Pour des pages de petite taille ou de simples tests : Un code minimal et sans réutilisation qui n’a pas
besoin d’être maintenu séparément.
• Lorsqu’il faut inclure un petit script spécifique à la page sans le besoin de le partager entre
différentes pages.
• Pour des performances immédiates dans de petits projets où le temps de chargement n’est pas une
grande préoccupation.
Utilisation de scripts externes :
• Pour réutilisabilité et maintenance : Le même fichier .js peut être inclus sur plusieurs pages, facilitant
les mises à jour et la maintenance.
• Pour optimiser le chargement : Les fichiers JavaScript externes peuvent être mis en cache par le
navigateur, ce qui réduit les temps de chargement pour les pages suivantes.
• Pour séparer la logique du design : Gérer le code JavaScript en dehors de l’HTML rend le code HTML
plus lisible et mieux structuré.
• Pour le travail collaboratif : Les scripts externes simplifient le partage et la gestion du code en équipe,
car ils facilitent les mises à jour sans modifier la structure HTML.
Suptech 24
Impact de l’utilisation de scripts à
plusieurs niveaux
Quand des scripts internes et externes sont utilisés simultanément ou à plusieurs
niveaux (par exemple dans le <head>, le <body>, ou à différents moments de
chargement de la page), certains effets et bonnes pratiques doivent être pris en compte
• Ordre d’exécution :
• Les scripts sont exécutés dans l’ordre où ils apparaissent. Si un script interne dépend d’une
bibliothèque externe (comme jQuery), le fichier externe doit être chargé avant le script
interne.
• Placer <script> dans le <head> ou dans le <body> peut impacter la vitesse de rendu. Les
scripts en <head> bloquent le chargement des éléments suivants jusqu’à ce qu’ils soient
complètement exécutés.
• Déclaration des dépendances :
• Lorsque plusieurs scripts utilisent des fonctionnalités ou des bibliothèques communes, il
est essentiel de les déclarer dans un ordre logique pour éviter des erreurs comme
ReferenceError.
Suptech 25
Impact de l’utilisation de scripts à
plusieurs niveaux
• Performances :
• Les scripts internes au <head> peuvent ralentir le chargement de la page car ils bloquent l’affichage jusqu’à ce que
le script soit exécuté. Une bonne pratique consiste à placer les scripts en bas du <body> pour éviter de bloquer le
chargement initial de la page.
• Les scripts externes sont généralement préférables pour des sites complexes car ils bénéficient du cache du
navigateur, mais l’utilisation de plusieurs fichiers .js externes peut aussi entraîner des temps de chargement
supplémentaires.
• Chargement asynchrone et différé :
• async : Charge le script en parallèle avec d’autres ressources et l'exécute dès qu'il est disponible. Idéal pour les
scripts externes qui n’ont pas besoin d’interagir directement avec le contenu HTML.
• defer : Charge le script en parallèle mais diffère l'exécution jusqu’à ce que l’ensemble du HTML soit analysé.
Utilisé principalement pour les scripts externes qui dépendent de l’arborescence DOM complète.
• Exemple :
<script src="[Link]" async></script> <script src="[Link]" defer></script>
• Conflits de noms et variables globales :
• L’utilisation de plusieurs scripts à plusieurs niveaux peut entraîner des conflits de noms de variables ou de
fonctions. Les modules JavaScript (en utilisant type="module") et les portées locales permettent de réduire ce
risque.
Suptech 26
Bonnes Pratiques pour Utiliser Scripts
Internes et Externes
• Utilisez les scripts externes pour le code réutilisable et les
bibliothèques.
• Réservez les scripts internes aux ajustements spécifiques de la page.
• Placez les scripts externes en bas du <body> ou utilisez defer pour
éviter de bloquer le rendu.
• Organisez et commentez le code pour une maintenance aisée, surtout
si vous utilisez plusieurs scripts avec des dépendances.
• En suivant ces pratiques, vous pouvez optimiser le chargement, la
performance et la maintenance de votre application.
Suptech 27
Exercice 1 : Boîte de dialogue de
bienvenue
Créez une page web qui affiche une boîte de dialogue de bienvenue
utilisant prompt(), et affichez le nom de l'utilisateur dans une boîte
d'alerte.
Objectifs :
• Utiliser prompt() pour demander le nom de l'utilisateur.
• Utiliser alert() pour afficher un message de bienvenue.
• Suivre les bonnes pratiques en matière de commentaires,
d'indentation, et de conventions de nommage.
Suptech 28
Solution
Suptech 29
Exercice 2 :Taille de l'écran
Créez un script qui affiche la taille de l'écran de l'utilisateur en utilisant
[Link] et [Link] / [Link].
Objectifs :
• Afficher les dimensions de l'écran et de la fenêtre dans des boîtes
d'alerte.
• Utiliser [Link]() pour imprimer les dimensions dans la console.
Suptech 30
Solution
Suptech 31
Exercice 3 : Gestion des erreurs
Créez une fonction qui effectue une division et gérez les erreurs
potentielles (par exemple, division par zéro) en utilisant try...catch.
Objectifs :
• Créer une fonction de division.
• Utiliser try...catch pour gérer les erreurs.
• Afficher les résultats ou les messages d'erreur via alert().
Suptech 32
Suptech 33
Exercice 4 : Débogage avec [Link] et
points d'arrêt
Créez un script qui calcule la somme de tous les nombres d'un tableau
et utilisez [Link]() pour imprimer chaque étape.
Objectifs :
• Créer un tableau de nombres.
• Utiliser une boucle pour calculer la somme tout en affichant chaque
valeur dans la console.
• Inclure un point d'arrêt avec debugger; pour examiner le code.
Suptech 34
Suptech 35
• Voici une explication détaillée :
• Initialisation de la boucle : for (let i = 0; i < [Link]; i++)
• La boucle commence à i = 0 et parcourt tout le tableau numbers (en supposant que numbers soit déjà défini
comme un tableau).
• [Link] garantit que la boucle s'exécute pour toute la longueur du tableau, traitant chaque élément.
• Calcul de la somme : sum += numbers[i];
• À chaque itération, l'élément actuel (numbers[i]) est ajouté à la variable sum, qui doit être initialisée avant
la boucle.
• Affichage : [Link]("Ajout de " + numbers[i] + ", somme actuelle : " + sum);
• Après avoir ajouté l'élément à sum, cette ligne affiche dans la console l'élément ajouté ainsi que la valeur
actuelle de sum.
• Instruction debugger : debugger;
• Lorsque le code atteint cette ligne, il déclenche l'ouverture des outils de développement du navigateur et
arrête l'exécution.
• Cela permet d'inspecter les variables et de parcourir le code pas à pas pour mieux comprendre son
comportement.
Suptech 36