Remerciez-le!

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

Langages côté Client JavaScript - jQuery 1 © A. Belaïd Introduction JavaScript

Langages côté Client JavaScript - jQuery 1 © A. Belaïd 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 2 © A. Belaïd 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> 3 © A. Belaïd 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 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> 4 © A. Belaïd 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 <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'); </script> 5 Exemple temp=new Array(30); function relever() { for (i=1;i<=30;i++) { temp[i-1]=17+Math.floor(5*Math.random()); // Math.floor donne l'entier le plus proche }; }; function moyenner() { som=0; for (i=1;i<=30;i++) { som+=temp[i-1]; }; return Math.round(som/30); }; relever(); alert('la moyenne du tableau est ='+ moyenner()); © A. Belaïd 6 © A. Belaïd 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 7 © A. Belaïd Association avec un formulaire Lire/Écrire  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 ? ', 2000); alert('Vous avez répondu : ' + annee) } </script> </head> <body> <form> <input type="button" value="En quelle annee ? " onClick="lireAnnee()"> </form> </body> </html> 8 © A. Belaïd Association avec un formulaire Lire/Écrire : lire-ecrire-form0.html  Exemple 1 : 9 © A. Belaïd DOM Notion d’objet en Javascript – Le Javascript traite les éléments qui s'affichent dans votre navigateur comme des objets, c'est-à-dire des éléments : • classés selon une hiérarchie pour pouvoir les désigner précisément • auxquels sont associées des propriétés et des actions (méthodes) 10 © A. Belaïd Les objets Comment JavaScript définit les objets ? – Javascript divise la page du navigateur en éléments (objets), afin de permettre d'accéder à n'importe lequel d'entre eux et de pouvoir les manipuler par l'intermédiaire de leurs propriétés – On commence généralement par l'objet le plus grand (celui contenant tous les autres) puis on descend dans la hiérarchie jusqu'à arriver à l'objet voulu • L'objet le plus grand est l'objet fenêtre : window • Dans la fenêtre s'affiche une page, c'est l'objet document • Cette page peut contenir plusieurs objets, comme des formulaires, des images, etc. 11 © A. Belaïd Les objets L’objet Navigator – a plusieurs propriétés concernant votre navigateur • appName : connaître le nom : Netscape, IE, Mozilla • appVersion : connaître la version • language : FR, AN • platform : windows, Linux… – Pour le savoir : exécuter : <script language="Javascript"> document.write(navigator.propriété); //où propriété = //platform… </script> 12 © A. Belaïd L’objet Navigator Exemple d’utilisation de Navigator Nom = navigator.appName; if (Nom == 'Netscape') { placer ici les instructions à exécuter s'il s'agit de Netscape Navigator 4 ou supérieur } if (Nom == 'Microsoft Internet Explorer') { placer ici les instructions à exécuter s'il s'agit de Microsoft Internet Explorer 4 ou supérieur } 13 © A. Belaïd Les objets L’objet Window – est l'objet par excellence dans Javascript, car il est le parent de chaque objet qui compose la page web – il contient donc : • l'objet document : la page elle-même • l'objet location : le lieu de stockage de la page • l'objet history : les pages visitées précédemment • l'objet frames : les cadres (division de la fenêtre en sous- fenêtres) 14 © A. Belaïd L’objet Window L’objet Window – Propriétés : • Frames[] : tableau de cadres contenus • Length : nombre de cadres (nombre d'éléments du tableau frames • Name : nom de la fenêtre dans laquelle on se trouve • Parent : fenêtre qui englobe celle dans laquelle on se trouve – Méthodes : • alert(), confirm() et prompt() : font apparaître une boîte de dialogue • open(), et close() : permettent l'ouverture et la fermeture de fenêtres – Plusieurs exemples sous : http://fr.selfhtml.org/javascript/objets/window.htm 15 © A. Belaïd L’objet Window Propriété defaultStatus – affiche dans la barre d'état de la fenêtre d'affichage la valeur "Ma page d'accueil" – Exemple <html> <head> <title>Test</title> <script type="text/javascript"> window.defaultStatus = "Ma page d'accueil"; </script> </head> <body> </body> </html> http://fr.selfhtml.org/javascript/objets/window.htm#closed 16 © A. Belaïd L’objet Window Propriétés innerHeight, innerwidth – permettent de fixer au cours de l’exécution la hauteur et la largeur de la fenêtre <html> <head><title>Test</title> <script type="text/javascript"> window.innerHeight = 300; </script> </head> <body> </body> </html> 17 © A. Belaïd L’objet Window La méthode open () – Cette fonction ouvre une nouvelle fenêtre • window.open(" test.html","nom_de_la_fenetre","options_de_la_fenetre") Ouvre « secondefenetre » et y affiche le fichier test.html. Secondefenetre peut être utilisé comme target pour l’affichage de l’extérieur – Exemple <html> <head> <title>Test</title> <script type="text/javascript"> function nouvellefenetre() { mafenetre = window.open("window0.html", "secondefenetre", "width=300, height=200, scrollbars"); } </script> </head> <body> <a href="javascript:nouvellefenetre()"> nouvelle fenêtre </a><br> </body> </html> – Pour ouvrir une fenêtre à une position donnée : ajouter les attributs: top=px, et left=px 18 © A. Belaïd L’objet Window la méthode close () : <a href="javascript:mafenetre.close()">fermer la fenêtre</a> – En cliquant sur ce lien, cela ferme la fenêtre précédemment ouverte avec le nom « mafenetre » 19 © A. Belaïd L’objet Window Vérification de l’état de la fenêtre – Exemple <html><head><title>Test</title> <script type="text/javascript">  </script> </head> <body> <a href="javascript:CheckOpen()">La fenêtre est-elle fermée?</a> </body> </html> 20 © A. Belaïd L’objet Window Fermeture automatique d’une fenêtre, après 2’ <html> <head> <title>Test</title> <script type="text/javascript"> var InfoWin = window.open("exercice1.html", "secondefenetre"); InfoWin.setTimeout("top.close()",2000); </script> </head> <body> </body> </html> 21 © A. Belaïd Les objets L’objet document – élément majeur, permet de récupérer des informations d'un formulaire, créer des calques et les déplacer, écrire du texte... – Propriétés : • document.fgColor, permet de récupérer et de changer la couleur du texte de votre page HTML document.fgColor = "#993333"; • document.bgColor, permet de récupérer et de changer la couleur de fond de votre page HTML • document.lastModified, permet de savoir quand la page html a été modifiée document.lastModified; Internet explorer renvoie : 11/07/2000 19:41:00 Netscape renvoie : Tuesday, November, 7 /2000 19:41:00 22 © A. Belaïd L’objet document – document.linkColor • permet de récupérer et de changer la couleur des liens de votre page HTML – document.location • permet de récupérer et changer l'url de votre page HTML, ce qui revient à charger une autre page HTML document.location = "URL/monDoc.HTML"; – document.write() • permet d'écrire dans votre page HTML – document.images[ ] • permet de récupérer et changer les images de votre page HTML – document.forms[ ] • permet de récupérer et changer les informations de votre formulaire 23 © A. Belaïd L’objet document Dernière date de modification – Donne la date de la dernière modification du document <html> <head><title>Test</title></head> <body> <script type="text/javascript"> document.write("dernière mise à jour: " + document.lastModified); </script> </body> </html> 24 © A. Belaïd L’objet document Contenu d’une balise – Permet de récupérer le contenu de la balise <title> <html> <head> <title>Test</title> </head> <body> <h1> <script type="text/javascript">  </script> </h1> </body> </html> 25 © A. Belaïd L’objet document Récupération de l’URL où se trouve le document <html> <head> <title>Test</title> </head> <body> <script type="text/javascript">  </script> </body> </html> 26 © A. Belaïd Le formulaire L’objet : forms – Avec l'objet forms, qui se trouve sous l'objet document dans la hiérarchie JavaScript, vous avez accès aux formulaires définis dans un fichier HTML – Syntaxe : • document.forms["nom_formulaire"].propriété • document.forms["nom_formulaire"].méthode – Plusieurs exemples sous : • http://fr.selfhtml.org/javascript/objets/forms.htm 27 © A. Belaïd Le formulaire Exemple – Il s’agit d’accéder à la case à cocher pour modifier le contenu de la zone uploads/S4/ cours2-js-jquery.pdf