JavaScript
Généralité
JavaScript est un langage de programmation polyvalent largement
utilisé dans le développement web pour rendre les pages interactives
et dynamiques.
Contrairement au HTML et au CSS, qui sont des langages de
balisage et de style respectivement, JavaScript est un langage de
script qui permet d'ajouter des fonctionnalités dynamiques aux sites
web.
Objectifs et utilités
Il a plusieurs objectifs et utilités dans le contexte du développement web :
Interactivité et Dynamisme
Manipulation du DOM
Validation de Formulaire
Gestion des Événements
Création d'Effets Visuels
Communication avec le Serveur
Développement d'Applications Web
Points clés sur JavaScript
1- Langage de Script Côté Client 2- Polyvalent et Dynamique
JavaScript est principalement utilisé côté JavaScript est un langage polyvalent qui peut
client, ce qui signifie qu'il est exécuté sur le être utilisé pour une grande variété de tâches,
navigateur web de l'utilisateur. Cela permet de telles que la manipulation du contenu HTML et
créer des interactions en temps réel avec les CSS d'une page web, la validation des
utilisateurs sans avoir besoin de recharger la formulaires, l'animation d'éléments, la gestion
page. des événements utilisateur, et bien plus encore.
3- Syntaxe Similaire à d'Autres Langages 4- Interprété et Dynamique
La syntaxe de JavaScript est influencée par JavaScript est un langage interprété, ce qui
plusieurs langages de programmation, signifie que le code source est exécuté ligne par
notamment Java et C. Cela rend la syntaxe ligne par le navigateur. Il est également
familière à de nombreux développeurs et dynamique, ce qui signifie que les variables
relativement facile à apprendre pour ceux qui peuvent changer de type au cours de
ont déjà des compétences en programmation. l'exécution du programme.
5- Librairies et Frameworks 6- Événement-Driven
Il existe de nombreuses librairies et JavaScript est un langage événement-driven, ce
frameworks JavaScript populaires qui qui signifie qu'il peut détecter et répondre aux
simplifient le développement web, comme actions de l'utilisateur, telles que les clics de
jQuery, [Link], Angular, [Link], etc. Ces souris, les pressions de touches, etc.
outils offrent des fonctionnalités
supplémentaires et facilitent la création
d'applications web plus complexes.
Insertion d’un script dans une page HTML
Pour insérer un script JavaScript dans une page HTML, utiliser la balise <script>.
Exemple
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial Dans cet exemple, le script JavaScript
scale=1.0"> est inclus directement à l'intérieur des
<title>Ma Page avec JavaScript</title>
</head> balises <script>.
<body> On doit inclure des scripts externes en
<h1>Ma Page avec JavaScript</h1> utilisant l'attribut src de la balise
<script>.
<!-- Inclure votre script JavaScript -->
<script> Par exemple :
alert (« SALAMA ABYYYY !"); html
</script>
<script src="[Link]"></script>
</body>
</html>
DIFFERENTS TYPES DES « Variables,
opérateurs, Structure et Fonction, Méthodes »
Les variables
JavaScript utilise différents types de variables pour stocker des données.
Variables avec var (déprécié) Variables avec let
Avant l'introduction de let et const, var était let est utilisé pour déclarer des variables
utilisé pour déclarer des variables. dont la portée est limitée au bloc dans
Les variables déclarées avec var sont lequel elles sont déclarées (block-scoped).
accessibles dans la fonction où elles sont Les variables déclarées avec let peuvent
déclarées, ce qui signifie qu'elles sont fonction- être réaffectées, mais pas réinitialisées.
scoped. Exemple :
Elles peuvent être réaffectées et réinitialisées. javascript
Exemple : let age = 30;
javascript
var x = 10;
var y = "Hello";
Variables avec const Variables non initialisées
const est utilisé pour déclarer des variables Si vous déclarez une variable sans
dont la valeur ne peut pas être réassignée. l'initialiser avec une valeur, elle aura la
Les variables déclarées avec const doivent valeur undefined.
être initialisées lors de leur déclaration. Exemple :
La portée est similaire à let, limitée au bloc Javascript
dans lequel elles sont déclarées.
Exemple : let z;
javascript [Link](z); // Affiche undefined
const PI = 3.14;
Variables globales En JavaScript, les variables peuvent
Si vous déclarez une variable en dehors stocker différents types de données,
de toute fonction, elle devient une notamment des nombres, des chaînes
variable globale, accessible depuis de caractères, des tableaux, des objets,
n'importe où dans votre code des fonctions, des booléens, etc.
JavaScript. JavaScript est un langage de typage
Cependant, l'utilisation de variables dynamique, ce qui signifie qu’on n’a
globales devrait être évitée autant que pas besoin de déclarer explicitement le
possible pour éviter les conflits et les type de données d'une variable ; le type
problèmes de lisibilité. est déterminé automatiquement lors de
l'assignation de la valeur.
Recherche :
Qu’es ce qu’une variable de type primitif et non-primitif ?
Expliquez et donnez des exemples
Pratique
Écrire un script JavaScript qui demande à l'utilisateur de saisir
son nom et affiche un message de bienvenue personnalisé.
<h1>Message de bienvenue</h1>
<script>
// Demander à l'utilisateur de saisir son nom
……………………………………………………………………;
// Vérifier si l'utilisateur a saisi un nom
……………………………………………………………………;
// Afficher un message de bienvenue personnalisé
…………………………………………………………………….;
// Si l'utilisateur n'a pas saisi de nom
…………………………………………………………………….;
</script>
Types de variables primitifs :
Nombre (Number) : Booléen (Boolean) : Indéfini (Undefined) :
représente à la fois les représente une représente une variable qui
nombres entiers et les valeur logique true n'a pas encore été assignée de
nombres à virgule flottante. ou false. valeur.
Exemple : Exemple : Exemple :
javascript javascript javascript
· let age = 30; · let estActif = true; · let variableNonAssignee;
let prix = 19.99; let estConnecte = false;
Chaîne de caractères Null : représente Symbole (Symbol) :
(String) : une valeur nulle représente un identifiant
représente une séquence intentionnelle. unique.
de caractères,
Exemple : Exemple :
généralement entourée de
javascript javascript
guillemets simples ou
· let valeurNulle = null; const symbole1 = Symbol();
doubles.
const symbole2 =
Exemple : Symbol('description');
javascript
· let nom = "Jean";
let message =
'Bonjour, monde !';
Types de variables non primitifs (Objets) :
Objet (Object) : Tableau (Array) : Fonction (Function) :
représente une représente une représente un bloc de
collection de données collection ordonnée code réutilisable qui
et/ou de d'éléments. peut être appelé par
fonctionnalités. son nom
Exemple :
Exemple : let fruits = Exemple :
let personne = { ['pomme', 'orange', · function ajouter(a, b)
nom: 'Jean', 'banane']; {
age: 30, return a + b;
}; }
Date (Date) : RegExp (Expression
représente une date régulière) :
et une heure. représente un modèle
Exemple : de recherche de texte.
let maintenant = Exemple :
new Date(); let regEx = /hello/i;
C'est une règle CSS qui définit un style pour les éléments de classe `error`.
<form>: C'est une balise HTML qui est utilisée pour créer un formulaire interactif dans une
page web
id="contactForm" : Cet attribut "id" spécifie un identifiant unique pour le formulaire.
L'attribut "id" est utilisé pour identifier de manière unique un élément HTML dans une page
web
<label> C'est une balise HTML utilisée pour créer une étiquette associée à un champ de
saisie dans un formulaire
for="name" : Cet attribut "for" spécifie l'ID de l'élément du formulaire auquel l'étiquette est
associée.
"Nom:" : C'est le texte ou le libellé de l'étiquette qui est affiché à côté du champ de saisie.
<input>: C'est une balise HTML utilisée pour créer un élément de formulaire interactif.
type="text" : Cet attribut type spécifie le type de champ de saisie.
Dans ce cas, type="text" indique qu'il s'agit d'un champ de saisie texte où l'utilisateur peut
entrer du texte librement
id="name" : Cet attribut id spécifie un identifiant unique pour l'élément de formulaire
name="name" : Cet attribut name spécifie le nom du champ de saisie.
<span>C'est une balise HTML utilisée pour définir une section en ligne dans un document
HTML
id="nameError" : Cet attribut "id" spécifie un identifiant unique pour l'élément <span>.
class="error" : Cet attribut "class" attribue une classe CSS à l'élément <span>.
. **function** : C'est un mot-clé réservé en JavaScript qui indique que vous allez définir une
fonction.
. **validateForm()** : C'est le nom de la fonction que vous définissez.
Dans ce cas, la fonction est nommée "validateForm". Les parenthèses vides `()` indiquent
qu'il n'y a pas d'arguments passés à cette fonction.
var nom : Cette partie de la ligne de code déclare une variable nommé name en utilisant le
mot-clé var. Cette variable sérum utilisée pour stocker la valeur du champ de saisie.
[Link] («nom») : C'est une expression qui utilise la méthode
getElementById() pour accéder à un élément HTML dans le document en utilisant son
identifiant unique. L'identifiant spécifié est 'name', qui est le même que celui attribué à un
élément du formulaire HTML.
C'est une propriété de l'objet de l'élément DOM qui permet de récupérer la valeur actuelle
d'un champ de saisie HTML. En l'occurrence, il récupère la valeur saisie dans le champ de
saisie avec l'identifiant 'name'.
•si (nom '') ') '... C'est une structure conditionnelle en JavaScript qui évalue une condition.
Si la condition entre parenthèses les métiers de l'instruction ifest vraie, le bloc de code entre
les accolades { ... }est exécuté. Sinon, si la condition est faux, le bloc de code après
l'instruction elseest exécuté.
•Nom de l'appellation '' : C'est la condition vérifiée dans cette structure conditionnelle. Elle
vérifie si la variable name est vide (c'est-à-dire si aucun nom n'a été saisi dans le champ de
saisie). Si la condition est vraie, cela signifie que le champ de saisie est vide.
•[Link] («nameError»).inText «Veuillez entrer votre nom.» : C'est
le code qui est exécuté si la condition name === '' est vraie. Il sélectionne l'élément avec
l'identifiant 'nameError', qui est probablement un élément utilisé pour afficher des messages
d'erreur liés au champ de saisie 'name', et lui assigne le texte 'Veuillez entrer votre nom.'. Cela
affiche un message d'erreur indiquant à l'utilisateur qu'il doit saisir un nom.
•est Valid - faux; : Il semble y avoir une variable isValid qui est utilisée pour suivre si le
formulaire est valide ou non. Si le champ de saisie 'name' est vide, cela signifie que le
formulaire n'est pas valide, donc la variable isValid est définie sur false.
•[Link]('nomError').innerText ''; : C'est le code qui est exécuté si la
condition name === '' est fausse (c'est-à-dire que le champ de saisie n'est pas vide). Il efface
tout message d'erreur précédemment affiché en définissant le texte de l'élément 'nameError'
sur une chaîne vide.
•retour est Valid; : C'est l'instruction returnqui est utilisé pourrer une valeur depuis une
fonction. Dans ce cas, la fonction semble être utilisé pour valideer un formulaire, et la
variable isValidL'état de validation du formulaire (vrai ou faux). La ligne de code return
isValid;Parcourir la valeur de la variable isValid.
•[Link]('contactForm').addEventListener('submit', fonction(event) :
Cette Cette partie du code utilise la méthode addEventListener()pour attacher un écouteur
d'événements à l'événement de soumission (submit) du formulaire identifié par l'ID 'contactForm'. Le
formulaire est soumis, la fonction de rappel (callback) est. Cette fonction définie est
anonymement à l'intérieur de addEventListener().
•: C'est la fonction de rappel (callback) qui est exécutée lorsque l'événement de soumission du
formulaire se produit. La variable event contient des informations sur l'événement, comme le
formulaire soumis et les données associées à cet événement.
•si (-validateForm()) et évé[Link]éventPar défaut(); : À l'intérieur de la fonction de rappel,
il y a une structure conditionnelle qui vérifie si la fonction validateForm() retourne false, ce qui signifie
que le formulaire n'est pas valide. Si le formulaire n'est pas valide, la méthode [Link]()
est appelée. Cette méthode empêche le comportement par défaut de l'événement, qui est
normalement de soumettre le formulaire. En conséquence, le formulaire ne sera pas soumis tant
qu'il n'est pas valide.
affichage Alert() – [Link]() – [Link]() – innerHTML – Prompt()
<body>
<!-- Interface utilisateur -->
<h2>Affichage en JavaScript</h2>
<h3>Dans une page html en cliquant sur bouton</h3>
<button onclick="afficherMessage()">Afficher Message</button>
<div id="messageContainer"></div>
<script>
// Fonction pour afficher un message
function afficherMessage() {
// Sélection de l'élément conteneur du message
var container = [Link]("messageContainer");
// Création d'un élément paragraphe
var paragraph = [Link]("p");
// Ajout du texte au paragraphe
var message = [Link]("Bonjour, monde !");
[Link](message);
// Ajout du paragraphe au conteneur
[Link](paragraph);
}
</script>
<body>: Contient le contenu visible de la page.
<!-- Interface utilisateur -->: Commentaire HTML pour marquer la section de l'interface
utilisateur.
<h2>Affichage en JavaScript</h2>: Titre de la section.
<button onclick="afficherMessage()">Afficher Message</button>: Bouton déclenchant
l'affichage du message lorsqu'il est cliqué.
<div id="messageContainer"></div>: Conteneur où le message sera affiché.
<script>: Balise script pour inclure du code JavaScript dans le document.
function afficherMessage() { ... }: Fonction pour afficher le message.
var container = [Link]("messageContainer");: Sélection de l'élément
conteneur du message.
var paragraph = [Link]("p");: Création d'un élément paragraphe.
var message = [Link]("Bonjour, monde !");: Création d'un nœud texte
contenant le message.
[Link](message);: Ajout du nœud texte au paragraphe.
[Link](paragraph);: Ajout du paragraphe au conteneur.
</script>: Fermeture de la balise script.
Formulaire – ajouter/ supprimer
<body> <script>
<!-- Interface utilisateur --> // Fonction pour ajouter un élément au formulaire
<h2>Gestion de Formulaire</h2> function ajouter() {
<!-- Formulaire --> // Récupération des valeurs saisies dans le formulaire
<form id="myForm"> var name = [Link]("name").value;
<!-- Champ de saisie pour le nom --> var email = [Link]("email").value;
<label for="name">Nom:</label> // Création d'un nouvel élément de liste
<input type="text" id="name" required><br> var newItem = [Link]("li");
<!-- Champ de saisie pour l'email --> [Link] = name + " - " + email;
<label for="email">Email:</label> // Ajout de l'élément à la liste
<input type="email" id="email" required><br>
<!-- Boutons d'action --> [Link]("liste").appendChild(newItem);
<button type="button" }
onclick="ajouter()">Ajouter</button> // Fonction pour modifier un élément du formulaire
<button type="button" function modifier() {
onclick="modifier()">Modifier</button> // TODO: Implémenter la logique de modification
<button type="button" alert("Fonctionnalité de modification à
onclick="supprimer()">Supprimer</button> implémenter.");
</form> }
<!-- Liste des éléments du formulaire --> // Fonction pour supprimer un élément du formulaire
<ul id="liste"></ul> function supprimer() {
// Sélection de la liste des éléments
var liste = [Link]("liste");
// Suppression du dernier élément de la liste
[Link]([Link]);
}
</script>
</body>
<body>: Contient le contenu visible de la page.
<!-- Interface utilisateur -->: Commentaire HTML pour marquer la section de l'interface
utilisateur.
<h2>Ajout/Suppression de Formulaires</h2>: Titre de la section.
<button onclick="ajouterFormulaire()">Ajouter un formulaire</button>: Bouton pour ajouter
un nouveau formulaire.
<div id="formContainer"></div>: Conteneur où les formulaires seront ajoutés dynamiquement.
<script>: Balise script pour inclure du code JavaScript dans le document.
: Initialisation du compteur de formulaire.
function ajouterFormulaire() { ... }: Définition de la fonction pour ajouter un formulaire.
formCount++;: Incrémentation du compteur de formulaire.
var form = [Link]("form");: Création d'un élément de formulaire.
[Link] = "form_" + formCount;: Attribution d'un identifiant unique au formulaire.
[Link] = `...`;: Définition du contenu HTML du formulaire.
[Link]("formContainer").appendChild(form);: Ajout du formulaire au
conteneur.
: Définition de la fonction pour supprimer un formulaire.
var form = [Link](formId);: Récupération de l'élément formulaire à
supprimer.
[Link](form);: Suppression de l'élément formulaire du DOM.
DIFFERENTS TYPES DES « Variables,
opérateurs, Structure et Fonction, Méthodes »
Opérateurs
Les opérateurs permettent de manipuler et de traiter les données de manière efficace
Utilité et importance
Manipulation des valeurs: effectuer des opérations arithmétiques telles que
l'addition, la soustraction, la multiplication et la division. Ils sont également utilisés
pour les opérations de comparaison, les opérations logiques et les opérations sur les
bits
Comparaison de valeurs: Assignation de valeurs: Incarnation de concepts
l'opérateur === est utilisé =, +=, -= etc., sont utilisés mathématiques:
pour vérifier l'égalité stricte pour attribuer des valeurs à l'opérateur de modulo %,
entre deux valeurs. des variables. pour réaliser des
opérations
Logique et contrôle de flux: Manipulation de bits: & mathématiques
&& (ET logique), || (OU (ET binaire), | (OU binaire), spécifiques, comme
logique) et ! (NON logique) << (décalage à gauche), >> trouver le reste d'une
sont utilisés pour créer des (décalage à droite), etc., division.
expressions conditionnelles et sont utilisés pour effectuer
contrôler le flux d'exécution du des opérations sur des
programme. nombres binaires.
Exponentiation (**) Addition (+) :
Exemple : Exemple :
let resultat = 2 ** 3; // 2 élevé à la puissance 3 let a = 5;
[Link](resultat); // Affiche 8 let b = 3;
let somme = a + b; // somme vaut 8
Soustraction (-) :
Multiplication (*) :
Exemple :
Exemple :
let a = 5;
let a = 5;
let b = 3;
let b = 3;
let difference = a - b; // difference vaut 2
let produit = a * b; // produit vaut 15
Division (/) : Modulo (%) :
Exemple : Exemple :
let a = 10; let a = 10;
let b = 2; let b = 3;
let quotient = a / b; // quotient vaut 5 let reste = a % b; // reste vaut 1
Incrémentation (++) et Décrémentation (--) :
Exemple :
let x = 5;
x++; // x vaut maintenant 6 (incrémentation de 1)
let y = 10;
y--; // y vaut maintenant 9 (décrémentation de 1)
Opérateur d'Assignation (=)
L'opérateur d'assignation simple (=) est utilisé pour attribuer une valeur à une variable.
Exemple :
let x;
x = 10; // x reçoit la valeur 10
Assignation avec Opération (+=, -=, *=, /=, %=) :
Exemple :
let x = 5;
x += 3; // équivaut à x = x + 3, donc x vaut 8 maintenant
x -= 2; // équivaut à x = x - 2, donc x vaut 6 maintenant
x *= 2; // équivaut à x = x * 2, donc x vaut 12 maintenant
x /= 3; // équivaut à x = x / 3, donc x vaut 4 maintenant
x %= 2; // équivaut à x = x % 2, donc x vaut 0 maintenant
Montant = p,u * qtte
<body>
<!-- Interface utilisateur -->
<h2>Calcul du Montant</h2>
<label for="pu">Prix unitaire:</label>
<input type="number" id="pu" required><br>
<label for="qtte">Quantité:</label>
<input type="number" id="qtte" required><br>
<button onclick="calculerMontant()">Calculer Montant</button><br>
<p id="result"></p>
<script>
// Fonction pour calculer le montant
function calculerMontant() {
// Récupération des valeurs saisies dans le formulaire
var prixUnitaire = parseFloat([Link]("pu").value);
var quantite = parseInt([Link]("qtte").value);
// Calcul du montant
var montant = prixUnitaire * quantite;
// Affichage du résultat
[Link]("result").innerHTML = "Le montant est : " + [Link](2) + " Ariary";
}
</script>
</body>
<body>: Contient le contenu visible de la page.
<!-- Interface utilisateur -->: Commentaire HTML pour marquer la section de l'interface
utilisateur.
<h2>Calcul du Montant</h2>: Titre de la section.
<label for="pu">Prix unitaire:</label>: Étiquette pour le champ de saisie du prix unitaire.
<input type="number" id="pu" required><br>: Champ de saisie pour le prix unitaire avec la
validation requise.
<label for="qtte">Quantité:</label>: Étiquette pour le champ de saisie de la quantité.
<input type="number" id="qtte" required><br>: Champ de saisie pour la quantité avec la
validation requise.
<button onclick="calculerMontant()">Calculer Montant</button><br>: Bouton pour
déclencher le calcul du montant.
<p id="result"></p>: Paragraphe vide pour afficher le résultat du montant calculé.
<script>: Balise script pour inclure du code JavaScript dans le document.
function calculerMontant() { ... }: Fonction pour calculer le montant.
var prixUnitaire = parseFloat([Link]("pu").value);: Récupération de la
valeur saisie dans le champ du prix unitaire.
var quantite = parseInt([Link]("qtte").value);: Récupération de la valeur
saisie dans le champ de la quantité.
var montant = prixUnitaire * quantite;: Calcul du montant en multipliant le prix unitaire par la
quantité.
[Link]("result").innerHTML = "Le montant est : " + [Link](2) +
" Ariary";: Affichage du montant calculé dans le paragraphe de résultat avec deux décimales.
DIFFERENTS TYPES DES « Variables,
opérateurs, Structure et Fonction, Méthodes »
Fonction
Un ensemble d'instructions effectuant une tâche ou calculant une valeur
Utilité et importance
Les fonctions sont les principales “composantes” du programme. Ils permettent au
code d’être appelé plusieurs fois sans répétition.
Déclaration de fonction
Le mot-clé function commence en premier,
puis le nom de la fonction,
puis une liste de paramètres entre les parenthèses et enfin le code de la fonction,
également appelé “le corps de la fonction”, entre des accolades.
function name(parameter1, parameter2, ...
parameterN) {
// ……………………………..
}
// Définition de la fonction "calculerSomme"
function calculerSomme(a, b) {
// Déclaration d'une variable locale "somme" initialisée à la somme des deux
paramètres "a" et "b"
var somme = a + b;
// Retourne la valeur de la variable "somme" à l'endroit où la fonction est appelée
return somme;
}
// Appel de la fonction avec les arguments 5 et 3, et stockage du résultat dans la
variable "resultat"
var resultat = calculerSomme(5, 3);
// Affichage du résultat dans la console
[Link]("La somme est : " + resultat);
// Définition de la fonction afficherListeAuChoix
function afficherListeAuChoix(liste) {
// Vérifier si la liste est vide
if ([Link] === 0) {
[Link]("La liste est vide."); // Afficher un message si la liste est vide
} else {
[Link]("Liste des éléments :"); // Afficher un titre pour la liste
// Parcourir la liste et afficher chaque élément avec un numéro correspondant
for (var i = 0; i < [Link]; i++) {
[Link]((i + 1) + ". " + liste[i]); // Afficher chaque élément de la liste avec un
numéro incrémenté
}
}
}
// Exemple d'utilisation de la fonction avec une liste d'éléments
var maListe = ["Clavier", "Ecran", "UC", " Souris"];
afficherListeAuChoix(maListe); // Appeler la fonction en passant la liste en argument
affichage Alert() – [Link]() – [Link]() – innerHTML – Prompt()
Alert() : Cette fonction [Link]() : Cette fonction enregistre des
affiche une boîte de messages dans la console du navigateur. Elle
dialogue avec un message. est principalement utilisée pour le débogage et
Elle est souvent utilisée le développement, car elle permet aux
pour alerter l'utilisateur développeurs de voir les valeurs des variables,
d'une information les erreurs, etc. dans la console du navigateur.
importante.
[Link]() est utilisée pour
écrire du contenu directement dans
le document HTML à l'endroit où elle
est appelée.
innerHTML : C'est une propriété qui permet de
modifier le contenu HTML d'un élément. Elle
est souvent utilisée pour modifier
dynamiquement le contenu d'une page web.
prompt() : Cette fonction affiche une boîte
de dialogue avec un champ de texte où
l'utilisateur peut saisir une réponse.
DIFFERENTS TYPES DES « Variables,
opérateurs, Structure et Fonction, Méthodes »
Méthodes
Méthodes pour récupérer des éléments d'un document HTML
getElementById : getElementsByClassName : récupère
récupère un élément une collection d'éléments ayant une
par son identifiant (ID) classe spécifique
getElementsByTagName : querySelector : récupère le
récupère une collection premier élément qui correspond
d'éléments par leur nom de à un sélecteur CSS
balise (tag name)
Astuces :
Shift+Alt+Up/Down : coller
Ctrl+d : sélectionner les
mêmes éléments
Ctrl+p : ouvrir fichier
Ctrl+Alt+Up/Down :
multiple curseur
DIFFERENTS TYPES DES « Variables,
opérateurs, Structure et Fonction, Méthodes »
Conditions
Les structures de contrôle permettent de contrôler l’exécution d’un programme en
faisant des tests sur les valeurs d’une variable.
Les conditions if/ else permettent d’exécuter du code selon une réponse unique à un test ;
Les conditions switch/case permettent d’exécuter du code si notre test peut avoir plusieurs
réponses.
if / else
switch/case
bouton
click : Se produit lorsqu'un utilisateur clique sur un élément
dblclick : Se produit lorsqu'un utilisateur double-clique sur un élément
mousedown : Se produit lorsqu'un utilisateur appuie sur un bouton de la souris sur un élément.
mouseup : Se produit lorsqu'un utilisateur relâche un bouton de la souris sur un élément
mouseover : Se produit lorsqu'un utilisateur déplace le pointeur de la souris sur un élément
mouseout : Se produit lorsqu'un utilisateur déplace le pointeur de la souris hors d'un élément.
mousemove : Se produit lorsqu'un utilisateur déplace le pointeur de la souris à l'intérieur d'un
élément
focus : Se produit lorsqu'un élément (tel qu'un bouton ou un champ de texte) reçoit le focus
blur : Se produit lorsqu'un élément perd le focus.
keydown : Se produit lorsqu'une touche est enfoncée sur le clavier
keyup : Se produit lorsqu'une touche est relâchée sur le clavier.
keypress : Se produit lorsqu'une touche est enfoncée et relâchée sur le clavier.
PRE-EXAM
1/ Modifier le code ci-dessous pour calculer la moyenne des notes.
let note_maths = 11;
let note_francais = 9;
let note_algo = 16;
let ??? = ???;
alert('La moyenne est de ' + ???);
2/ Déclarer une variable budget qui contient le budget de votre choix. Déclarer une variable
achats qui contient le montant de votre choix. Afficher si le budget permet de payer les achats.
3/ A l'aide de la fonction prompt(), demander un prix HT puis un taux de la TVA à l'utilisateur puis insérer
le prix TTC dans la page HTML à l'aide de [Link].
4/ A l'aide de la fonction prompt(), demander un prix HT puis un taux de la TVA à l'utilisateur
puis insérer le prix TTC dans la page HTML à l'aide de [Link]. Si le prix
TTC est strictement supérieur à 100 on affichera le prix en rouge sinon en vert. Pour simplifier
on utilisera les bouts de code suivants sur l'élément HTML de votre choix :
Rouge : style="color: red;"
Vert : style="color: green;"
Par exemple : <h1 style="color: red;">...</h1>
5/ Grâce à la fonction prompt(), demander l'âge de l'utilisateur, puis à l'aide d'une
condition, déterminer et afficher via une boite de dialogue si l'utilisateur est mineur
ou majeur. Pour cet exercice on considère qu'un individu est majeur à partir de 18
ans.
1/
let note_maths = 11;
let note_francais = 9;
let note_algo = 16;
let moyenne = (note_maths + note_francais +
note_algo) / 3;
alert('La moyenne est de ' + moyenne);
2/
let budget = 1553.89;
let achats = 1554.76;
if(budget >= achats) {
alert('Le budget (' + budget + ' Ar)
permet de payer tous les achats (' +
achats + ' Ar)');
} else
{ alert('Le budget ne (' + budget + '
Ar) permet pas de payer tous les
achats (' + achats + ' Ar)'); }
3/
let ht = prompt("Montant HT ?");
let taux_tva = prompt("Taux de TVA ?");
let taux_tva_calcul = (taux_tva / 100) + 1;
let ttc = ht * taux_tva_calcul;[Link] = ttc;
4/
let ht = prompt("Montant HT ?");
let taux_tva = prompt("Taux de TVA ?");
let ttc = ht * (taux_tva / 100) + 1;
if(ttc > 100) {
[Link] = '<h1 style="color: red;">' + ttc + '</h1>';
} else {
[Link] = '<h1 style="color: green;">' + ttc + '</h1>';
}
5/
let age = prompt("Quel est votre âge ?");
if(age >= 18) {
alert('Vous êtes majeur !');
} else {
alert('Vous êtes mineur !');
}
