Remerciez-le!

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

4ème SI Le langage JavaScript Le langage JavaScript 1. Limites du langage HTML

4ème SI Le langage JavaScript Le langage JavaScript 1. Limites du langage HTML Le langage HTML présente les limites suivantes : - Absence de structures de contrôles algorithmiques (conditionnelles et itératives) - Langage sans aucune logique de programmation procédurale (notion de sous programmes, variables, opérateurs prédéfinies …) - Absence de possibilité de liaison avec des bases de données. Pour pallier à ces limites on peut utiliser d’autres langages tel que JavaScript, VbScript, ASP, PHP… 2. Formalisme de base de JavaScript Activité 1 : 1 <html> <head> <title> Mon premier code JavaScript</title> </head> <body> texte en HTML Balises HTML 2 <script language= "javascript"> Début du script Script 3 alert (" Bienvenue") ; //alert permet d’afficher une fenêtre message. Contenu du script avec des ; 4 </script> Fin du script 5 un autre texte en HTML </body> </html> Balises HTML 2.1. Délimiteurs du JavaScript <script language= "javascript"> …………. …………. </script> 2.2. Les commentaires // Commentaire sur une seule ligne /* Commentaire sur Plusieurs Lignes */ 2.3. Les différents emplacements du code JavaScript - On peut introduire les scripts entre les balises <head>…</head> ou bien entre les balises <body>…</body>. - Le premier emplacement est réservé à la déclaration des fonctions. - L’appelle d’une fonction se fait soit dans un script dans la partie <body> ou dans une autre fonction. 2.4. Les objets JavaScript - Les objets JavaScript peuvent être répartis en deux catégories :  Les objets d’interface : window, document, button…  Les objets des propriétés et des fonctions prédifinies : string, math, date, navigateur, array et object. M. Amine Ben Slimène Page 1 4ème SI Le langage JavaScript - Les objets d’interface sont organisés d’une façon hiérarchique : - Les objets JavaScript ont des propriétés (variables) et des méthodes (fonctions) : - Pour accéder à une propriété ou appeler une méthode d’un objet on utilise la syntaxe suivante : Nom_de_l’objet.nom_de_la_propriété_ou_de_la_méthode Exemples : window.document.form.radio[0].checked La propriété checked permet de tester si l’objet radio[0] est selectionné (checked=true) ou non (checked=false). Ch.length La propriété length permet retourner la longueur de la chaîne de caractères Ch. Document.write(x) La méthode write() permet d’écrire dans le document la valeur de x. D.getYear() La méthode getYear() permet de retourner l’année de l’objet D. 2. Les Entrées/Sorties en JavaScript 2.1. L’entrée Syntaxe : Nom_variable = prompt("texte de la boite d’invite","valeur par défaut") ; Exemple : N = prompt("Entrer un entier","4") ; Remarque : La méthode prompt() fait entrer des chaînes de caractères. Donc il faut convertir la valeur entrée pour obtenir un nombre. La méthode Number() permet cette conversion. N = Number(prompt("Entrer un entier","4")) ; 2.2. La sortie Syntaxe : Document.write("message" + nom_variable) ; Alert("message" + nom_variable) ; M. Amine Ben Slimène Page 2 window form button checkbox radio document anchor link image window document form Objet radio Objet texte 4ème SI Le langage JavaScript Exemples Type d’affichage Exemple Affichage de texte Document.write("Bonjour") ; Affichage d’une valeur Document.write(N) ; Affichage mixte Document.write("La valeur de N est : " + N) ; Affichage mixte avec mise en forme Document.write("<font color=’red’> La valeur de N est : </font> " + N) ; Activité 2 : 1/ Créer un fichier et y taper le code donné ci-dessous : <html> <head> <title> activité 2</title> </head> <body> <script language="javascript"> var a = Number(window.prompt("Entrer la valeur de a","0")); var b = Number(window.prompt("Entrer la valeur de b","")); s=a+b; document.write(s); </script> </body> </html> 2/ que fait ce code ? ………………………………………………………………………………………………………… 3/ Modifier l’affichage de s pour qu’il soit de cette forme : La somme de a et b donne s. ………………………………………………………………………………………………………… ………………………………………………………………………………………………………… 4/ Remplacer la méthode write() par la méthode alert(). ………………………………………………………………………………………………………… ………………………………………………………………………………………………………… 3. Les variables 3.1. Déclaration de variables - Les variables peuvent être déclarées de deux façons :  D’une façon explicite avec le mot var : var N=1 ; var Prénom="Salah" ;  D’une façon implicite sans le mot var : N=1 ; Prénom="Salah" ; - Contrairement au langage Pascal, il ne faut pas déclarer le type de données d’une variable. - JavaScript utilise 4 types de données : Types Description Des nombres Tout nombre entier ou avec virgule exemple : 22 ou 3.14 Des chaînes de caractères Toute suite de caractères comprise entre guillemets exemple "Bonjour" Des booléens Les mots true (pour vrai) et false (pour faux) Le mot null Mot spécial qui indique l’absence d’une valeur 3.2. Visibilité des variables Activité 3 : Faire l’activité 5 pages 84-85 Remplir le tableau suivant : M. Amine Ben Slimène Page 3 4ème SI Le langage JavaScript Emplacement de déclaration de la variable Avec var/Sans var Variable globale/Variable locale Visibilité Déclaration en d’hors et avant toute fonction Avec var ou sans var Déclaration dans une fonction f Sans var Déclaration dans une fonction f Avec var 4. Les opérateurs prédéfinis Dans les exemples suivants la valeur initiale de X est toujours égale à 11 et la valeur initiale de Y est toujours égale à 5 4.1. Les opérateurs de calcul Signe Nom Signification Exemple Résultat + Plus Addition X+3 14 - Moins Soustraction X-3 8 * Multiplié par Multiplication X*3 33 / Divisé Par division X/2 % Modulo Reste par la division de X%5 = A la valeur Affectation X=5 4.2. Les opérateurs de comparaison Signe Nom Exemple Résultat == Egal X==11 True < Inférieur X<3 False <= Inférieur ou Egal X<=11 True > Supérieur X>11 >= Supérieur ou Egal X>=11 != Différent X !=11 4.3. Les opérateurs associatifs Signe Nom Signification Exemple Résultat += Plus égal X = X +Y X +=Y 16 -= Moins égal X = X – Y X -=Y * Multiplié égal X = X * Y X *=Y / Divisé égal X = X / Y X /=Y 2,2 4.4. Les opérateurs logiques Signe Nom Exemple Résultat && ET (X>3) && (Y<3) || OU (X>3) || (Y<3) ! NON !((X>3)) 4.5. Les opérateurs d’incrémentation Signe Signification Exemple Résultat X++, ++X Incémentation (X++ est le même que X=X+1) Y=X++ ; Z=++X ; Y=11 et X=12 Z=13 et X=13 X--, --X Décrémentation (X—est le même que X=X-1) Y=X-- ; Z=--X ; Y=11 et X=10 Z=9 et X=9 M. Amine Ben Slimène Page 4 4ème SI Le langage JavaScript 5. Les structures de contrôle 5.1. Les structures conditionnelles 5.1.1. La structure IF Syntaxe Forme réduite Forme complète If (condition vraie) { Une ou plusieurs instructions ; } If (condition vraie) { Instructions 1 ; } Else { Instructions 2 ; } Activité 4 : 1/ Ecrire un code en JavaScript permettant de vérifier si la valeur d’une entrée est numérique ou non (utiliser la fonction booléenne isNaN() qui retourne False si la valeur est numérique et True sinon). 2/ Modifier le code pour qu’il affiche en plus, si le nombre saisi au clavier est positif ou négatif. 5.1.1. La structure Switch Syntaxe : Activité 5: 1/ Faire l’activité 9 page 91. 2/ Modifier le code pour qu’il affiche un message d’erreur si le numéro du mois saisi n’est pas valide. M. Amine Ben Slimène Page 5 ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… ……………………………………………………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… Switch(expression) { Case v1 : Bloc1; Break; Case v2 : Bloc2; Break; Default: Bloc_n; Break; } 4ème SI Le langage JavaScript 5.2. Les structures itératives Syntaxe : La structure For La structure do … While La structure While For (initialisation ; condition ; progression) { Instructions ; } Do { Instructions ; } While (conditions) ; While(conditions) { Instructions ; } - Initialisation : les instructions d’initialisations nécessaires. - Condition : la condition de continuité est vraie (bouclage). - Progression : définit la pas du compteur (pas forcément +/-). Equivalent de répéter … Tant que la condition est vraie. Equivalent de Tant que la condition est vraie répéter… Activité 6 : Ce code permet de calculer la factorielle d’un entier saisi au clavier avec la structure For. M. Amine Ben Slimène Page 6 ………………………………………………………………………………………………………… ………………………………………………………………………………………………………… ………………………………………………………………………………………………………… ………………………………………………………………………………………………………… ………………………………………………………………………………………………………… ………………………………………………………………………………………………………… ………………………………………………………………………………………………………… ………………………………………………………………………………………………………… ………………………………………………………………………………………………………… ………………………………………………………………………………………………………… ………………………………………………………………………………………………………… ………………………………………………………………………………………………………… ………………………………………………………………………………………………………… ………………………………………………………………………………………………………… ………………………………………………………………………………………………………… ………………………………………………………………………………………………………… ………………………………………………………………………………………………………… ………………………………………………………………………………………………………… ………………………………………………………………………………………………………… ………………………………………………………………………………………………………… Avec Do…While Avec While <html> <head> <title> activité 6</title> </head> <body> <script language="javascript"> var a = Number(window.prompt("Entrer un entier","")); f=1; for(i=1;i<=a;i++) { f=f*i; } document.write("La factorielle de"+a+"est "+f); </script> </body> </html> 4ème SI Le langage JavaScript 6. Les fonctions en JavaScript - La définition de la fonction est faite dans la partie entête <head>, son appel est fait dans la partie corps <body>. - En JavaScript, il existe deux types de fonctions :  Les fonctions prédéfinies (méthodes).Elles sont associées à un objet bien particulier comme la méthode write() avec l’objet document.  Les fonctions déclarées par le programmeur selon les besoins de l’application. - Pour déclarer ou définir une fonction, on utilise la syntaxe suivante : function nom_de_la_fonction(arguments) { …Code des instructions… [return nom_variable] } - La mention des arguments (paramètres) est facultative mais dans ce cas les parenthèses doivent rester. - Une variable déclarée dans une fonction par le mot clé var aura une porté limitée à cette fonction contrairement à une variable déclarée sans var qui aura uploads/s1/ java-script-1 2 .pdf