Scribd
Importer
9 vues29 pages

Cours 3 Java Script

Le document présente les bases du JavaScript, y compris l'utilisation des fonctions comme alert() et prompt(), la syntaxe des scripts, et la gestion des variables et des opérateurs. Il explique également comment exécuter des scripts dans un navigateur ou avec Node.js, ainsi que les structures conditionnelles comme if, else, et switch. Enfin, des exercices pratiques sont proposés pour renforcer l'apprentissage des concepts abordés.

Transféré par

Hanen ghazouani
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PPTX, PDF, TXT ou lisez en ligne sur Scribd
9 vues29 pages

Cours 3 Java Script

Le document présente les bases du JavaScript, y compris l'utilisation des fonctions comme alert() et prompt(), la syntaxe des scripts, et la gestion des variables et des opérateurs. Il explique également comment exécuter des scripts dans un navigateur ou avec Node.js, ainsi que les structures conditionnelles comme if, else, et switch. Enfin, des exercices pratiques sont proposés pour renforcer l'apprentissage des concepts abordés.

Transféré par

Hanen ghazouani
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PPTX, PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 29

Les bases du Javascript

Assuré par : Mme Hanene Ghazoauni


La boîte de dialogue alert()
alert() : est une instruction simple, appelée fonction, qui permet
d'afficher une boîte de dialogue contenant un message. Ce message est
placé entre apostrophes, elles-mêmes placées entre les parenthèses de
la fonction alert().

Suptech 2
La syntaxe Javascript
• La syntaxe du Javascript n'est pas compliquée. De manière générale, les instructions
doivent être séparées par un point-virgule que l'on place à la fin de chaque instruction :
<script>
instruction_1;
instruction_2;
instruction_3;
</script>
• La syntaxe d'une fonction se compose de deux choses : son nom, suivi d'un couple de
parenthèses (une ouvrante et une fermante). Entre les parenthèses se trouvent les
arguments, que l'on appelle aussi paramètres.
<script>
myFunction();
</script>
Par exemple :
<script>
alert('Bonjour');
// la fonction affiche une boîte de dialogue avec "Bonjour"
</script>

Suptech 3
Fichier.js
Il est possible, et même conseillé, d'écrire le code Javascript dans un fichier
externe,
portant l'extension .js. Ce fichier est ensuite appelé depuis la page Web au
moyen de l'élément <script> et de son attribut src qui contient l'URL du
fichier .js
Par exemple dans le fichier hello.js, on écrit :
alert('Hello world!');
Et dans le body de la page html, on trouve :
<script src="hello.js"></script>
Pour éviter des problèmes de chargement sur les pages, il est conseillé de
placer les éléments <script> juste avant la fermeture de l’élément <body>.
Suptech 4
Si votre script utilise des fonctionnalités du navigateur comme prompt() ou alert(), il doit être exécuté dans un navigateur.
Voici comment procéder :
Étapes
Créez un fichier HTML dans VS Code, par exemple index.html.
Ajoutez le code HTML et JavaScript à ce fichierOuvrez le fichier HTML dans le navigateur :
Faites un clic droit sur le fichier dans VS Code, puis sélectionnez "Open with Live Server" si l’extension Live Server est installée.
Ou ouvrez le fichier manuellement dans un navigateur (double-cliquez sur le fichier ou faites glisser le fichier dans la fenêtre du
navigateur).
Le script s'exécutera, et les boîtes de dialogue prompt et alert s'afficheront dans le navigateur.
2. Exécuter un Script JavaScript avec Node.js
Si votre code JavaScript ne dépend pas du navigateur (par exemple, il n'utilise pas prompt ou alert), vous pouvez l'exécuter
avec Node.js.
Étapes
Installez Node.js sur votre ordinateur si ce n’est pas encore fait (téléchargeable depuis nodejs.org).
Créez un fichier JavaScript dans VS Code, par exemple script.js.
Écrivez votre code JavaScript dans ce fichier.
// Exemple de script simple en JavaScript (Node.js) console.log("Bonjour, ceci est un script Node.js !");
Ouvrez le terminal dans VS Code :
Allez dans "View" > "Terminal" ou utilisez le raccourci `Ctrl + Shift + `` (backtick).
Exécutez le script avec Node.js en tapant la commande suivante dans le terminal :
node script.js
Voir le résultat dans le terminal. La sortie console.log sera affichée dans le terminal.

Suptech 5
Les variables
Une variable peut être de type numérique, mais aussi une chaîne de
caractères :
<script>
var text = 'J\'écris mon texte ici'; /* Avec des apostrophes, le \ sert à
échapper une apostrophe intégrée dans le texte, pour ne pas que
Javascript pense que le texte s'arrête là.*/
</script>
Une variable peut enfin être de type booléen (boolean), avec deux états
possibles :
vrai ou faux (true ou false).

Suptech 6
Les opérateurs arithmétiques

• On peut utiliser 5 opérateurs arithmétiques : l'addition (+), la


soustraction (-), la
• multiplication (*), la division (/) et le modulo (%). Le modulo est le
reste d'une division.
• Par exemple :

Suptech 7
. La concaténation
• Une concaténation consiste à ajouter une chaîne de caractères à la fin
d'une autre, comme dans cet exemple :

Suptech 8
. La concaténation
• On peut convertir un nombre en chaîne de caractères avec l'astuce
suivante :

Suptech 9
La fonction prompt()
Voici la base de cette fonction :
<script>
var userName = prompt('Entrez votre prénom :');
alert(userName); // Affiche le prénom entré par l'utilisateur
</script>
On peut demander le prénom et afficher un message avec concaténation :
<script>
var start = 'Bonjour ', name, end = ' !', result;
name = prompt('Quel est votre prénom ?');
result = start + name + end;
alert(result);
</script>
Suptech 10
La fonction prompt()
On peut aussi se servir de la fonction prompt() pour un calcul :
<script>
var first, second, result;
first = prompt('Entrez le premier chiffre :');
second = prompt('Entrez le second chiffre :');
result = parseInt(first) + parseInt(second); /* la fonction parseInt()
transforme la chaîne de caractères en nombre */
alert(result);
</script>
parseInt() est utilisé pour convertir une chaîne en entier.

Suptech 11
Les opérateurs de comparaison

• Une condition (true ou false) est un test qui permet de vérifier qu'une
variable contient bien une certaine valeur. Il y en a 8 :
• == : égal à
• != : différent de
• === : contenu et type de variable égal à
• !== : contenu ou type de variable différent de
• > supérieur à
• >= supérieur ou égal à
• < : inférieur à
• <= : inférieur ou égal à

Suptech 12
Les opérateurs de comparaison
Il suffit d'écrire deux valeurs avec l'opérateur de comparaison souhaité entre les deux et un
booléen est retourné. Si celui-ci est true alors la condition est vérifiée, si c'est false alors elle
ne l'est pas :
• <script>
var number1 = 2, number2 = 2, number3 = 4, result;
result = number1 == number2; // Au lieu d'une seule valeur, on en écrit
deux avec l'opérateur de comparaison entre elles
alert(result); // la condition est donc vérifiée car les deux variables
contiennent bien la même valeur
result = number1 == number3;
alert(result); // la condition n'est pas vérifiée car 2 est différent de 4
result = number1 < number3;
alert(result); // la condition est vérifiée car 2 est bien inférieur à 4
• </script>
Suptech 13
Incrémentation et décrémentation

L'incrémentation permet d'ajouter une unité à un nombre au moyen


d'une syntaxe courte. À l'inverse, la décrémentation permet de
soustraire une unité.
• <script>
var number = 0;
number++;
alert(number); // Affiche : « 1 »
number--;
alert(number); // Affiche : « 0 »
• </script>

Suptech 14
Les opérateurs logiques
Il y en a 3 :
• && qui signifie ET avec par exemple : valeur1 && valeur2
Cet opérateur vérifie la condition lorsque toutes les valeurs qui lui sont passées
valent true.
• || qui signifie OU avec par exemple : valeur1 || valeur2
Cet opérateur est plus souple car il renvoie true si une des valeurs qui lui est
soumise contient true, qu'importent les autres valeurs.
• ! qui signifie NON avec par exemple : !valeur
Cet opérateur se différencie des deux autres car il ne prend qu'une seule valeur
à la fois. S'il se nomme « NON » c'est parce que sa fonction est d'inverser la
valeur qui lui est passée, ainsi true deviendra false et inversement.

Suptech 15
La condition if else
La condition est composé :
- de la structure conditionnelle if ;
- de parenthèses qui contiennent la condition à analyser, ou plus
précisément le booléen retourné par les opérateurs conditionnels ;
– d'accolades qui permettent de définir la portion de code qui sera
exécutée si la condition se vérifie.

Suptech 16
La condition if else
La fonction confirm() permet une interaction de l'utilisateur à
l'exécution du code
(true si OK, false si Annuler) :
<script>
if (confirm('Voulez-vous exécuter le code Javascript de cette page ?')) {
alert('Le code a bien été exécuté !');
}
</script>

Suptech 17
La condition if else
La structure else permet de simplifier l'alternative :
<script>
if (confirm('Pour accéder à ce site vous devez être une fille, cliquez sur
"OK" si c\'est le cas.')) {
alert('Vous allez être redirigé vers le site.');
}
else {
alert("Désolé, vous n'avez pas accès à ce site.");
}
</script>

Suptech 18
let userResponse = confirm(« voulez vous continuer ?");
// verifie la réponse
if (userResponse) {
console.log("User clicked OK.");
} else {
console.log("User clicked Cancel.");
}

Suptech 19
La condition if else
On peut ajouter des conditions intermédiaires avec la structure else if :
<script>
var floor = parseInt(prompt("Entrez l'étage où l'ascenseur doit se rendre (de
-2 à 30) :"));
if (floor == 0) {
alert('Vous vous trouvez déjà au rez-de-chaussée.');
}
else if (-2 <= floor && floor <= 30) {
alert("Direction l'étage n°" + floor + ' !');
}
Else
{
alert("L'étage spécifié n'existe pas.");
}
</script>
Suptech 20
La condition switch
case 2:
Cette structure permet de gérer une
alert('Contient du matériel informatique : des
courte liste de possibilités : câbles, des composants, etc.');
<script> break;
var drawer = case 3:
parseInt(prompt('Choisissez le tiroir à alert('Ah ? Ce tiroir est fermé à clé !
ouvrir (1 à 4) :')); //on Dommage !');
break;

Suptech
précise bien le type de la valeur, ici un case 4:
nombre avec la fonction parseInt() alert('Contient des vêtements : des chemises, des
switch (drawer) { pantalons, etc.');
case 1: // on pose chaque cas l'un après break;
l'autre ; on met des apostrophes si default: // on pose une autre possibilité, pour
gérer une erreur de
l'on vérifie des chaînes de caractères au l'utilisateur
lieu de nombres alert("Info du jour : le meuble ne contient que 4
alert('Contient divers outils pour tiroirs et, jusqu'à preuve
dessiner : du papier, des crayons, etc.'); du contraire, les tiroirs négatifs n'existent pas.");
break; // on arrête la fonction pour }
</script> 21
passer à un autre cas
Les ternaires
En JavaScript, l'opérateur ternaire est une manière concise d'écrire des
instructions conditionnelles, équivalente à un if...else mais en une seule
ligne.
Syntaxe du ternaire :
• condition ? valeurSiVrai : valeurSiFaux;
• condition : Une expression booléenne qui retourne true ou false.
• valeurSiVrai : Ce qui est retourné si la condition est vraie.
• valeurSiFaux : Ce qui est retourné si la condition est fausse.

Suptech 22
Les ternaires
Cette structure permet de simplifier certaines conditions :
• <script>
• var startMessage = 'Votre genre : ',
• endMessage,
• adult = confirm('Êtes-vous une fille ?');
• endMessage = adult ? 'Fille' : 'Garçon';
• alert(startMessage + endMessage);
• </script>

Suptech 23
Exercice 1
Développer une page web qui :
• Demande à l’utilisateur de saisir un nombre.
• Vérifie si ce nombre est pair ou impair.
• Affiche le résultat sur la page après avoir cliqué sur un bouton.

Suptech 24
Solution
• <!DOCTYPE html> <html • <body> <h1>Pair ou Impair ?</h1>
lang="fr"> <head> <meta <input type="number" id="nombre"
placeholder="Entrez un nombre">
charset="UTF-8"> <meta
<button
name="viewport" onclick="verifierPairImpair()">Vérifier<
content="width=device-width, /button> <div id="result"></div>
initial-scale=1.0"> <script> function verifierPairImpair()

Suptech
<title>Vérification Pair ou { // Récupérer la valeur saisie par
Impair</title> l'utilisateur let nombre =
parseInt(document.getElementById("n
• <style> body { font-family: Arial,
ombre").value); // Vérifier que l'entrée
sans-serif; text-align: center; est un nombre valide if
margin-top: 50px; } input (isNaN(nombre))
{ padding: 10px; width: 200px; } { document.getElementById("result").i
button { padding: 10px 20px; nnerText = "Veuillez entrer un nombre
margin-top: 10px; } #result valide."; return; }
{ margin-top: 20px; font-size: • // Vérifier si le nombre est pair ou
impair let resultat = (nombre % 2 ===
18px; font-weight: bold; } 25
0) ? "Pair" : "Impair"; // Afficher le
</style> </head> résultat
document.getElementById("result").in
nerText = `Le nombre ${nombre} est $
Explication du code
• HTML :
• Un champ de texte <input> permet à l’utilisateur d’entrer un nombre.
• Un bouton avec un événement onclick appelle la fonction verifierPairImpair().
• Un <div> avec l’ID result affiche le résultat.
• JavaScript :
• La fonction verifierPairImpair() récupère la valeur de l’input avec
document.getElementById().value.
• Elle utilise parseInt() pour convertir la valeur en un entier.
• Si la valeur n’est pas un nombre, un message d’erreur s’affiche.
• Sinon, le programme utilise un opérateur modulo % pour déterminer si le nombre
est pair ou impair.
• CSS :
• Quelques styles simples pour rendre la page plus agréable.
Suptech 26
Explication du code
• <!DOCTYPE html> : Indique que le document est en HTML5.
• <html lang="fr"> : L'élément racine de l'HTML, avec l'attribut lang spécifiant que le contenu est en français.
• <head> : Contient des métadonnées, comme le titre de la page, le lien vers les feuilles de style, et l'encodage
des caractères.
• <meta charset="UTF-8"> : Assure que tous les caractères spéciaux et accents sont affichés correctement.
• <meta name="viewport" content="width=device-width, initial-scale=1.0"> : Rends la page responsive
pour tous les appareils.
• <title> : Définit le titre de la page visible dans l'onglet du navigateur.
• <link> : Lien vers une feuille de style CSS pour styliser le contenu.
• <body> : Contient tout le contenu visible de la page.
• <header> : En-tête de la page, souvent utilisé pour le titre et la navigation.
• <nav> : Section de navigation avec des liens vers différentes sections de la page.
• <main> : Contenu principal de la page.
• <section> : Utilisée pour diviser le contenu en sections distinctes, chacune avec un titre (<h2>) et du texte (<p>).
• <footer> : Pied de page contenant des informations supplémentaires, comme le copyright.

Suptech 27
Exercice 2
Fournir un commentaire selon l'âge de la personne.
Vous devez fournir un commentaire sur 4 tranches d'âge qui sont les
suivantes :
• Tranche d'âge Exemple de commentaire
• 1 à 6 ans « Vous êtes un jeune enfant. »
• 7 à 11 ans « Vous êtes un enfant qui a atteint l'âge de raison. »
• 12 à 17 ans « Vous êtes un adolescent. »
• 18 à 120 ans « Vous êtes un adulte. »

Suptech 28
Correction
<script>
var age = parseInt(prompt('Quel est votre âge ?'));
if (1 <= age && age <= 6) {
alert('Vous êtes un jeune enfant.');
} else if (7 <= age && age <= 11) {
alert ('Vous êtes un enfant qui a atteint l\'âge de raison.');
} else if (12 <= age && age <= 17) {
alert ('Vous êtes un adolescent.');
} else if (18 <= age && age <= 120) {
alert ('Vous êtes un adulte.');
} else {
alert ('Erreur !!');
}
</script>
Suptech 29

Vous aimerez peut-être aussi