Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Le langage JavaScript 3ème Sciences de l’informatique Systèmes &Technologies In

Le langage JavaScript 3ème Sciences de l’informatique Systèmes &Technologies Informatiques Lycée Habib Thamer Bizerte I- Introduction I- Introduction • Le JavaScript est un langage de programmation pour le web • C’est un langage front-end (coté client) : il est interprété et exécuté par le navigateur. • Utilisé pour créer de l’interaction entre l’utilisateur et la page web: Animation, mobilité d’un élément sur la page, résultat instantané d’un calcul, rafraichissement instantanée du contenu ... Dans le cas d’un formulaire, de faire vérifier si les informations sont correctement saisies. Le navigateur rempli la page web avec le HTML, la met en forme avec le CSS et rend la page interactive avec les manipulations de l’utilisateur avec le code JS La balise <script> En HTML, le code JavaScript est inséré entre les balises <script>et </script>. Les scripts peuvent être placés dans <body>, ou dans <head>, ou dans les deux. Fichier externe Les fichiers JavaScript ont l'extension de fichier .js . Pour utiliser un script externe, placez le nom du fichier de script dans l' src attribut (source) d'une <script>balise : <script src="myScript.js"></script> II- Les différents emplacements du code JavaScript II- Les différents emplacements du code JavaScript TP1 : Activité 1 JavaScript peut "afficher" les données de différentes manières:  Écriture dans la sortie HTML en utilisant document.write().  Ecrire dans une boîte d'alerte, en utilisant window.alert().  Ecriture dans la console du navigateur, en utilisant console.log(). (f12) JavaScript peut "saisir" les données de différentes manières:  Prompt  Formulaire III- Les entrées/sortie en Javascript III- Les entrées/sortie en Javascript TP1 : Activité 2 • Remarque : La console est un outil très important pour tester et afficher les erreurs du script. Le code JS doit être exécuté après le chargement complet de la page c'est pourquoi : S'il est inséré dans le Head, ajouter l'attribut defer : <script src="Monscript.js" defer> </script> Soit le placer à la fin du Body. • Remarque : La console est un outil très important pour tester et afficher les erreurs du script. Le code JS doit être exécuté après le chargement complet de la page c'est pourquoi : S'il est inséré dans le Head, ajouter l'attribut defer : <script src="Monscript.js" defer> </script> Soit le placer à la fin du Body. Pour déclarer une variable en JS, on utilise les mots clés : var, let et const,  var : déconseillé depuis la version JS(ES6 2015). Il faut privilégier let et const.  let : permet de déclarer une variable qui peut être réaffectée en cours d’exécution.  const : permet de déclarer une constante ou une variable qui ne doit pas être réaffectée. Exemple : IV- Les Variables IV- Les Variables TP1 : Activité 2 Remarque : les variables ou les constantes déclarées avec let ou const ont une portée locale au bloc. Typage dynamique : on ne précise pas le type lors de la déclaration. le type d'une variable peut changer en cours d'exécution Remarque : les variables ou les constantes déclarées avec let ou const ont une portée locale au bloc. Typage dynamique : on ne précise pas le type lors de la déclaration. le type d'une variable peut changer en cours d'exécution Les types primitifs String : chaine Number: pas de distinction entre réel ou entier Boolean Undefined : variable déclarée mais pas initialisée. Exp : let y; // y vaut undefined Les types structurels Array : tableau [] : const tab = ['a','b','c’]; le premier élément est d'indice 0. Object : {} tel que les enregistrement. const personne = { nom: "ben foulen" , age:18 , adresse:"bizerte" } Date function V- Les Types V- Les Types TP1 : Activité 3 L'opérateur typeof Retourne une chaine indiquant le type de la variable : x = 4; console.log (typeof x) ; //return number Conversion automatique de types JavaScript applique « automatiquement » certaines conversions de type sur les valeurs lorsque le contexte le nécessite. Par exemple : Les opérateurs mathématiques convertissent les valeurs en nombre  le "+" convertit en string et fait une concaténation Les Types Les Types Exemple : "6" / "2" // retourne le nombre 3 "5" + 4 + 3 // retourne la chaine "543" Exemple : "6" / "2" // retourne le nombre 3 "5" + 4 + 3 // retourne la chaine "543" Conversions numériques 4 fonctions : ▪isNaN : détermine si une valeur donnée n’est pas un nombre (NAN : not a number) ▪Number: effectue une conversion en nombre ▪parseInt : effectue une conversion en valeur entière ▪parseFloat : effectue une conversion en valeur réelle Les Types Les Types alert(isNaN(10)); // false alert(isNaN("10")); // false - peut être convertie alert(isNaN("blue")); // true - ne peut être convertie let num1 = Number("hello world"); // NaN let num2 = Number("00001"); // 1 let num3 = Number(true); // 1 let num3 = parseInt(""); // NaN let num4 = parseInt(22.5); // 22 let num5 = parseInt("70"); // 70 let num6 = parseFloat("22.5"); // 22.5 alert(isNaN(10)); // false alert(isNaN("10")); // false - peut être convertie alert(isNaN("blue")); // true - ne peut être convertie let num1 = Number("hello world"); // NaN let num2 = Number("00001"); // 1 let num3 = Number(true); // 1 let num3 = parseInt(""); // NaN let num4 = parseInt(22.5); // 22 let num5 = parseInt("70"); // 70 let num6 = parseFloat("22.5"); // 22.5 Exemples Exemples Conversion en chaine La fonction String(valeur). Les Types Les Types String (12 ) // retourne "12" String (true ) // retourne "true" String (false) // retourne "false" String (12 ) // retourne "12" String (true ) // retourne "true" String (false) // retourne "false" Exemples Exemples Conversion en booléen La fonction Boolean(valeur). les valeurs "vide" comme une chaine vide, 0, null, undefined et NaN est convertit en false, les autres valeurs en true. Les Types Les Types Boolean(1) ; // true Boolean(0) ; // false Boolean("hello") ; // true Boolean("") ; // false Boolean("0") ; // true Boolean(1) ; // true Boolean(0) ; // false Boolean("hello") ; // true Boolean("") ; // false Boolean("0") ; // true Exemples Exemples Les opérateurs arithmétiques VI- Les opérateurs VI- Les opérateurs Opérateur Description + Addition - Soustraction * Multiplication ** Puissance / Division % Modulo ++ Incrémentation - - Décrémentation Les opérateurs de comparaison Les opérateurs Les opérateurs Opérateur Description == Égalité === Égalité de valeur et de type != Différence !== Différence de valeur et de type < > <= >= Les opérateurs logique Les opérateurs d'affectation : =,+=,−=,*=,/=,%= Les opérateurs Les opérateurs Opérateur Description && ET (and) || Ou (or) ! Non (not) X = y; X += y // l'équivalent de x = x + y X = y; X += y // l'équivalent de x = x + y Exemples Exemples Les structures conditionnelles L'instruction if est utilisée pour spécifier un bloc de code à exécuter si une condition est vraie. Syntaxe : La structure conditionnelle -- if -- La structure conditionnelle -- if -- if ( condition ) { // bloc d'instructions à exécuter si la condition est vraie } if ( condition ) { // bloc d'instructions à exécuter si la condition est vraie } L'instruction else est utilisée pour spécifier un bloc de code à exécuter si la condition est fausse. Syntaxe : La structure conditionnelle -- if – else -- La structure conditionnelle -- if – else -- If ( condition ) { // bloc d'instructions à exécuter si la condition est vraie } else { // bloc d'instructions à exécuter si la condition est fausse } If ( condition ) { // bloc d'instructions à exécuter si la condition est vraie } else { // bloc d'instructions à exécuter si la condition est fausse } L'instruction else if est utilisée pour spécifier une nouvelle condition si la première condition est fausse. Syntaxe : La structure conditionnelle -- if – else if -- La structure conditionnelle -- if – else if -- If ( condition 1) { // bloc d'instructions à exécuter si la condition 1 est vraie } else if (condition 2) { // bloc d'instructions à exécuter si la condition1 est fausse et la condition 2 est vraie } else { // bloc d'instructions à exécuter si la condition1 et la condition 2 sont fausses } If ( condition 1) { // bloc d'instructions à exécuter si la condition 1 est vraie } else if (condition 2) { // bloc d'instructions à exécuter si la condition1 est fausse et la condition 2 est vraie } else { // bloc d'instructions à exécuter si la condition1 et la condition 2 sont fausses } L'instruction switch est utilisée pour sélectionner l'un des nombreux blocs d'instructions à exécuter en fonction de différentes valeurs de l'expression. Syntaxe : Remarque : Le branchement par défaut n’est pas obligatoire. La structure conditionnelle -- switch-- La structure conditionnelle -- switch-- switch ( expression ) { case valeur_1 : instruction_cas_1; break; case valeur_2 : instruction_cas_2; break; case valeur_3 : instruction_cas_3; break; default : // Si aucune valeur n'a été trouvée instruction_default; } switch ( expression ) { uploads/S4/ le-langage-javascript-lycee-habib-thamer-bizerte.pdf