Remerciez-le!

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

©A. Belaïd 1 Éléments du langage JavaScript Ce cours s’est inspiré librement du

©A. Belaïd 1 Éléments du langage JavaScript Ce cours s’est inspiré librement du cours de CHENU Guy © A. Belaïd 2 Introduction JavaScript – Langage de script incorporé dans le HTML – Historiquement, premier langage de script pour le Web – Apporte des améliorations au HTML • HTML permet d'écrire • JavaScript permet de programmer, c'est-à-dire de gérer l'information Qualités : – Disponible sur les navigateurs actuels et gratuit Défauts : – Interprété et donc très lent, pas de débogueur © A. Belaïd 3 Introduction A quoi ressemble un script ? – C’est une portion de code qui vient s'insérer dans une page HTML – Le code du script n'est toutefois pas visible dans la fenêtre du navigateur car il est compris entre des balises (ou tags) spécifiques qui signalent au navigateur qu'il s'agit d'un script écrit en langage JavaScript – Balises annonçant le code Javascript : <SCRIPT language="Javascript"> Placez ici le code de votre script </SCRIPT> © A. Belaïd 4 Introduction Code interprété ou compilé ? – Dès que le navigateur rencontre la balise <script> il passe la main à l'interprète du langage appelé – Votre navigateur interprétera votre script, puis l'exécutera Que mettre dans le script ? – Des variables et instructions, organisées selon votre algorithme, c'est-à-dire selon le résultat que vous souhaitez obtenir Où placer les scripts ? – Au début, dans le conteneur <body>...</body> • Dès que vous serez capables de comprendre les fonctions, nous les placerons le plus souvent dans le conteneur <head>...</head> © A. Belaïd 5 Introduction Masquage du script pour les anciens navigateurs – Attention : • Comme Javascript a été inventé après l’arrivée des navigateurs, ceux-ci peuvent ne pas le reconnaître • On place alors le code dans le body en commentaire <SCRIPT language="Javascript">  </SCRIPT> © A. Belaïd 6 Éléments du langage Les commentaires – Pour mettre en commentaires toute une ligne, on utilise le double slash: // Tous les caractères derrière le // sont ignorés – Pour mettre en commentaire une partie du texte (éventuellement sur plusieurs lignes) on utilise le /* et le */: /* Toutes les lignes comprises entre ces repères sont ignorées par l'interpréteur de code */ © A. Belaïd 7 Lire/Écrire prompt() – ouvre une boîte de dialogue avec une zone de saisie et 2 bouton : OK et Annuler, rend l’information lue alert () – permet d’écrire un message dans une fenêtre – Exemple : lire-ecrire.html <html> <head><title>Programme In1</title></head> <body> <script language="JavaScript">  </script> </body> </html> © A. Belaïd 8 Lire/Ecrire Résultat © A. Belaïd 9 Lire/Écrire  document.write : – Permet d’écrire directement dans la fenêtre HTML – Exemple : lire-ecrire2.html <html> <head> <title>Programme Out1</title> </head> <body> <script language="JavaScript">  </script> </body> </html> © A. Belaïd 10 Lire/Écrire  document.write pour écrire le contenu de variable Exemple : lire-ecrire-var.html <html> <head><title>Programme Out2</title></head> <body> <script language="JavaScript">  </script> </body> </html> © A. Belaïd 11 Lire/Écrire  Confirm () – Cette méthode ouvre une boîte de dialogue avec 2 boutons : OK et Annuler. Elle permet : • d'envoyer une information, de recevoir un booléen – Exemple : lire-ecrire-confirm.html <script language="JavaScript"> if (confirm('Je vais dire sur quel bouton vous avez appuyé : ')) {alert(' Sur OK \n Continuez avec :') } else {alert(' Sur Annuler \n Sortez avec Ok !') }; </script> © A. Belaïd 12 Lire/Écrire Écriture dans une fenêtre : open() + document.write – Permet d’ouvrir une fenêtre et d’écrire dedans – Exemple : lire-ecrire-open.html <script> fille=open('', '', 'height=50, width=300, status=yes'); fille.document.write('<title>' + 'Titre fenetre fille' + '</title>'); fille.document.write('Texte dans la fenêtre fille'); </script> © A. Belaïd 13 Variables Déclaration <script language="JavaScript"> var date; // Déclaration sans affectation var compteur=0; // Déclaration avec affectation toto='coucou'; // Déclaration implicite par affectation var prem, second; // variables séparées par des virgules </script> © A. Belaïd 14 Types Déclaration <script language="JavaScript"> monNombre = new Number(); // Déclaration typée sans affectation e = new Number(2.71828); // Déclaration typée avec affectation var maChaine = new String(); //Déclaration de chaîne var toto = new Boolean(true); //Déclaration de booléen </script> © A. Belaïd 15 Types  Visibilité des variables : – Bien que de même nom, les variables "x" sont indépendantes – Exemple : variable-visibilite.html <script language="JavaScript"> var x = new String('abc'); function commencer() { var x = new Number(123); x++; alert(x); }; function suivre() { var x = new Boolean(true); alert(x); }; x='ABC'; commencer(); suivre(); </script> © A. Belaïd 16 Tableau  Array – Le type des éléments : nombres, chaînes, booléens, ... – La dimension 1, 2, ou 3, ... : tab(7) ; tab(x,y) ; tab(A,B,C) ; ... – Les indices : souvent des nombres entiers – Exemple : tableau.html <script language=JavaScript> // Tableau de chaînes, de dimension 1, indicé de 0 à 6 : Jour=new Array(7); Jour[0]='Dimanche' ; Jour[1]='Lundi' ; Jour[2]='Mardi' ; //... Jour[6]='Samedi' ; // En énumérant les éléments : jour=new Array('dimanche','lundi','mardi', ... ,'vendredi','samedi'); document.write(Jour[1], ' ' , Jour[0]); //affiche : Lundi dimanche </script> © A. Belaïd 17 Tableau  Array – Autre exemple : tableau2.html <script language="JavaScript"> temp=new Array(30); function relever() { for (i=1;i<=30;i++); // i commence à 1 { temp[i-1]=17+Math.floor(5*Math.random()); }; // i-1=0, donne le premier indice }; function moyenner() { som=0; for (i=1;i<=30;i++) { som+=temp[i-1]; }; return Math.round(10*som/30)/10; }; relever(); alert('la moyenne du tableau est ='+ moyenner()); </script>  Autre exemple (suite) – Si on obtient NaN • Cela veut dire que la valeur n’est pas numérique – Dans ce cas, utiliser : • parseInt(moyenner()) – Exemple : affich-entier.html <html> <head> <title>Programme Out2</title> </head> <body> <script language="JavaScript"> <!– function calcul() { var x=20; return x; }; alert('la valeur de x ='+ parseInt(calcul())); --> </script> </body> </html> © A. Belaïd 19 Opérateurs Arithmétiques © A. Belaïd 20 Opérateurs  De comparaison – La comparaison se fait entre deux objets de même type • renvoie un booléen : true ou false © A. Belaïd 21 Opérateurs  Logique – Opèrent sur des booléens et renvoient un booléen © A. Belaïd 22 Opérateurs  d’affectation © A. Belaïd 23 Conditionnelles  Syntaxe if (condition booléenne) {Instructions à exécuter si "oui"} else {Instructions à exécuter si "non"}; © A. Belaïd 24 Conditionnelles  Exemple : conditionnelle.html <script language="JavaScript"> a = prompt('a=',2); b = prompt('b=',6); if (a==0) {if (b==0) {alert(a+'x='+b+ '\n' +'tout nombre est solution')} else {alert(a+'x='+b+ '\n'+'0x est différent de '+b + '\n'+'Pas de solution') } } else {alert(a+'x='+b+ '\n' +'Une seule solution \n'+'x='+b/a) } </script> © A. Belaïd 25 Choix  Choix multiple switch(x) { case 1 : instructions 1; break; case 2 : instructions 2; break; ... case n : instructions 3; break; default : instructions 4; break; }; © A. Belaïd 26 Choix  Exemple : choix.html function preferer(k) { switch(k) { case 1 : alert(1); break; case 2 : alert(2); break; }; }; preferer(2); © A. Belaïd 27 Itération  For for (valeur de départ ; contrôle pour sortie ; progression ) { Instructions à itérer }  Exemple for (i=1;i<=5;i++) { Instructions à répéter } © A. Belaïd 28 Itération  Table de multiplication – Exemple : iteration.html <html> <head><title>Programme iterer1</title></head> <body> <script language="JavaScript">  </script> </body> </html> © A. Belaïd 29 Itération sous contrôle while – Syntaxe : while(condition) { suite d’instructions; } – Exemple : i=0; while(i<=10) { suite d’instructions; i++; } © A. Belaïd 30 Fonctions – Syntaxe function maFonction(x, toto) { ... instructions; ... return valeur du résultat; } – Exemple <script language="JavaScript"> function VolCylindre(r,h) { pi=3.14159; return pi*r*r*h; } document.write(VolCylindre(1,2)); </script> © A. Belaïd 31 Fonctions – Autre exemple <script language="JavaScript"> var volume; function VolCylindre(r,h) { pi=3.14159; volume = pi*r*r*h; } VolCylindre(1,2); document.write(volume); </script> © A. Belaïd 32 Fonctions prédéfinies  Dates – Javascript peut gérer le temps : – Aujourd'hui : mardi 16 août 2005, l'horloge de votre ordinateur donne 13h 24min – Il vous propose plusieurs fonctions prédéfinies © A. Belaïd 33 Fonctions prédéfinies  Exemple : date.html <html> <head> <title>Aujourd'hui</title> </head> <body> Date de votre machine : <script language="JavaScript"> var aujourd_hui = new Date(); document.write(aujourd_hui.getDate()+' / '); document.write(aujourd_hui.getMonth()+1+' / '); document.write(aujourd_hui.getFullYear()); </script> </body> </html> © A. Belaïd 34 Fonctions prédéfinies  Mathématiques : © A. Belaïd 35 Fonctions prédéfinies  mathématiques : utilisation © A. Belaïd 36 Association avec un formulaire  Utilisation dans un formulaire – Schéma d’utilisation • Body :  Contient la définition du formulaire  Il fait appel aux variables et fonctions définies dans le head • Head :  Contient les fonctions © A. Belaïd 37 Association avec un formulaire Lire/Écrire : lire-ecrire-form0.html  Exemple 1 : appel à une fonction de lecture en cliquant sur un bouton du formulaire <html> <head> <title>Programme In2</title> <script language="JavaScript"> function lireAnnee() { annee=prompt('En quelle année sommes-nous ? uploads/S4/ cours3-javascript.pdf