Ajouter le code dans une page html

Présentation au sujet: "Ajouter le code dans une page html"— Transcription de la présentation:

1 Ajouter le code dans une page html
1. Introduction Ajouter le code dans une page html Le code s’exécute sur le client (directement dans le navigateur) Directement dans le fichier html (créer un fichier html qui contient toutes les balises) en liant depuis la page HTML un fichier externe, dans lequel sont placées les instructions JavaScript : il est recommandé de le liens des instructions en fin de document juste avant </body> pour éviter que le chargement de la page soit trop lourd <script type="text/javascript"> // Mon code Javascript ... </script> <script type="text/javascript" src="monscript.js"></script>

2 Afficher dans le console
1. Introduction Afficher dans le console console.log() permet d’afficher le texte saisi dans la console. Pour afficher la console suivant le navigateur il faut faire F12 Passer en mode débogage console.log("Bonjour en JavaScript !"); console.log("Bonjour en JavaScript !"); console.log("Faisons quelques calculs."); console.log(4 + 7); console.log(12 / 0); console.log("Au revoir !");

3 Les variables 1. Introduction var b = 0; // b contient la valeur 0
Une variable possède trois grandes propriétés : Son nom (ex: mavaribale), qui permet de l'identifier. Un nom de variable ne de doit pas comporter de caractères spéciaux Sa valeur (ex: 1), qui est la donnée actuellement mémorisée dans cette variable Son type (numérique ? Chaîne de caractère ? Booléen ?), qui détermine le rôle et les opérations applicables à cette variable. JavaScript est un langage à typage dynamique (n'impose pas de définir le type d'une variable) Dans javascript, pas besoin de typer, le typage se fait automatiquement Déclarer une variable var b = 0; // b contient la valeur 0 b += 1; // b contient la valeur 1 b++; // b contient la valeur 2 console.log(b); // Affiche 2

4 Interactions avec l'utilisateur
1. Introduction Interactions avec l'utilisateur Saisie et affichage d'informations var prenom = prompt("Entrez votre prénom :"); alert("Bonjour, " + prenom);

5 Ajoutez des conditions
1. Introduction Ajoutez des conditions L'instruction if var nombre = Number(prompt("Entrez un nombre :")); if (nombre > 0) { console.log(nombre + " est positif"); }else{ console.log(nombre + " est négatif ou nul"); }

6 Ajoutez des conditions
1. Introduction Ajoutez des conditions L'opérateur logique ET L'opérateur logique OU L'opérateur logique NON if ((nombre >= 0) && (nombre <= 100)) { console.log(nombre + " est compris entre 0 et 100"); } if ((nombre < 0) || (nombre > 100)) { console.log(nombre + " est en dehors de l'intervalle [0, 100]"); } if (!(nombre > 100)) { console.log(nombre + " est inférieur ou égal à 100"); }

7 Exprimer un choix 1. Introduction
L'opérateur logique ET var meteo = prompt("Quel temps fait-il dehors ?"); switch (meteo) { case "soleil": console.log("Sortez en t-shirt."); break; case "vent": console.log("Sortez en pull."); case "pluie": console.log("Sortez en blouson."); default: console.log("Je n'ai pas compris !"); }

8 Répétez des instructions
1. Introduction Répétez des instructions La boucle while La boucle for console.log("Début du programme"); Var nombre = 1; while (nombre <= 5) { console.log(nombre); nombre++; } console.log("Fin du programme"); var compteur; for (compteur = 1; compteur <= 5; compteur++) { console.log(compteur); }

9 Les fonctions 1. Introduction function direBonjour() {
Une fonction est un regroupement d'instructions qui réalise une tâche donnée. Passage de paramètres function direBonjour() { var message = "Bonjour !"; return message; } console.log("Début du programme"); console.log(direBonjour()); console.log("Fin du programme"); function direBonjour(prenom) { var message = "Bonjour, " + prenom + " !"; return message; } console.log(direBonjour("Baptiste"));

10 Les fonctions 1. Introduction // TODO : écrire la fonction calculer()
TP calculatrice // TODO : écrire la fonction calculer() console.log(calculer(4, "+", 6)); // Doit afficher 10 console.log(calculer(4, "-", 6)); // Doit afficher -2 console.log(calculer(2, "*", 0)); // Doit afficher 0 console.log(calculer(12, "/", 0)); // Doit afficher Infinity

11 Manipulez les chaînes de caractères
1. Introduction Manipulez les chaînes de caractères Obtenir la longueur d'une chaîne Convertir une chaîne en minuscules ou en majuscules console.log("ABC".length); // Affiche 3 console.log("Je suis une chaîne".length); // Affiche 18 var motInitial = "Bora-Bora"; var motEnMinuscules = motInitial.toLowerCase(); console.log(motEnMinuscules); // Affiche "bora-bora" var motEnMajuscules = motInitial.toUpperCase(); console.log(motEnMajuscules); // Affiche "BORA-BORA"

12 Manipulez les chaînes de caractères
1. Introduction Manipulez les chaînes de caractères Accéder à un caractère d'une chaîne var sport = "Tennis-ballon"; // 13 caractères console.log(sport.charAt(0)); // Affiche "T" console.log(sport[0]); // Affiche "T" console.log(sport.charAt(6)); // Affiche "-" console.log(sport[6]); // Affiche "-"

13 Manipulez les chaînes de caractères
1. Introduction Manipulez les chaînes de caractères TP Informations sur le mot Créez un programme mot.js qui fait saisir un mot à l'utilisateur, puis affiche le nombre de lettre Comptage du nombre de voyelles Complétez le programme mot.js en y ajoutant une fonction compterNbVoyelles() qui prend un mot en paramètre et renvoie son nombre de voyelles. Utilisez cette fonction pour afficher le nombre de voyelles et de consonnes du mot. Inversion du mot Complétez le programmemot.js avec une fonctioninverser() qui prend en paramètre un mot et renvoie ce mot écrit à l'envers. Utilisez cette fonction pour afficher le mot inversé.

14 Stockez vos données dans des tableaux
1. Introduction Stockez vos données dans des tableaux Créer un tableau Obtenir la taille d'un tableau Accéder à un élément d'un tableau . var tab = ["Bonjour", 7, true]; console.log(tab.length); // Affiche 3 console.log(tab[0]); // Affiche "Bonjour" console.log(tab[[1]); // Affiche 7 console.log(tab[[2]); // Affiche true

15 Stockez vos données dans des tableaux
1. Introduction Stockez vos données dans des tableaux Parcourir un tableau Ajouter un élément dans un tableau . for (var i = 0; i < tab.length; i++) { console.log(tab[i]); } tab.forEach(function (data) { console.log(data); }); tab.push("SAlUT");

16 Stockez vos données dans des tableaux
1. Introduction Stockez vos données dans des tableaux TP Ecrivez un programme max.js qui déclare un tableau contenant des nombres. Le programme calcule et affiche ensuite la plus grande valeur présente dans le tableau. Saisie d'une liste de mots Ecrivez un programme listmots.js qui fait saisir à l'utilisateur des mots jusqu'à ce qu'il saisisse "stop". Le programme affiche alors la liste des mots saisis.