Chapitre 4 Java script
1 j'aime540 vues
Ce document présente une introduction complète à JavaScript, un langage de programmation orienté objet conçu pour dynamiser les sites web. Il couvre les concepts de base tels que les variables, les opérations, les fonctions, ainsi que l'intégration avec HTML et le Document Object Model (DOM). Le document aborde également les difficultés d'utilisation, les frameworks, et les différences entre JavaScript et d'autres langages comme Java et VBScript.
![Objets primitifs
Boolean var estSympa = new Boolean(true) ;
Number (entiers et réels) var annee = new Number(2014) ;
Array I var saveursYop = new Array[2] ;
I saveursYop[0] ="banane" ;
I saveursYop[1] ="kiwi" ;
String var message = new String("2eme IAG") ;
48 / 122](https://image.slidesharecdn.com/javascript-181205211021/85/Chapitre-4-Java-script-48-320.jpg)
![JSON ...
JavaScript Object Notation (JSON)
Définition Format léger et vraiment très simple
Il n’existe que 2 concepts : objets {} et tableaux[]
sont manipulables nativement par JavaScript
Usages I Sert à stocker des données (ex : fichier de configuration)
I Sert à échanger des données à travers le réseau, entre
clients et serveurs (ex : sérialisation / désérialisation)
I Sert à décrire un objet JS mais sous une forme textuelle
dans le code source
61 / 122](https://image.slidesharecdn.com/javascript-181205211021/85/Chapitre-4-Java-script-61-320.jpg)
Chapitre 4 Java script
- 1. Université Jendouba Faculté des Sciences Juridiques Économiques et de Gestion Développement Web: JavaScipt Manel Ben Sassi Université de Jendouba, FSJEG [email protected] 1 / 122
- 2. Sommaire 1 Introduction 2 Le noyau JavaScript Les variables Les opérations et les fonctions prédéfinies L’orienté Objets JSON 3 Le JavaScript côté client Web DOM Les évènements Les cookies 4 Annexes Annexe String Annexe Date Annexe Objet window Annexe Evènement 5 Bibliographie 2 / 122
- 3. On entend parler du JavaScript ... 3 / 122
- 4. JavaScript... C’est quoi ? JavaScript un peu d’histoire ... est un langage de script simplifié orienté objet dont la syntaxe est basée sur celle du Java. Javascript a été initialement élaboré par Netscape en association avec Sun Microsystem. Plus tard, Microsoft développera son propre langage Javascript officiellement connu sous le nom de JScript. C’est un langage script qui permet de : I rendre dynamique un site internet développé en HTML. I développer de véritables applications fonctionnant exclusivement dans le cadre d’Internet. 4 / 122
- 5. JavaScript... Quelques généralités Questions 1. Quelle est la différence entre JavaScript et l’applet ? 5 / 122
- 6. JavaScript... Quelques généralités Questions 1. Quelle est la différence entre JavaScript et l’applet ? 2. Maintenant, quelle est la différence entre Java et JavaScript ? 6 / 122
- 7. JavaScript... Quelques généralités Questions 1. Quelle est la différence entre JavaScript et l’applet ? 2. Maintenant, quelle est la différence entre Java et JavaScript ? I Contrairement à un applet Java qui est un programme compilé, les scripts écrits en Javascript sont interprétés I Le Java, représenté par un ou plusieurs fichiers autonomes dont l’extension sera *.class ou *.jar, est invoqué par une balise HTML spécifique I Le JavaScript est écrit directement au sein du document HTML sous forme d’un script encadré par des balises HTML spéciales. 7 / 122
- 8. JavaScript... Intérêt ? Quel intérêt pour JavaScript 8 / 122
- 9. JavaScript... Intérêt ? Quel intérêt pour JavaScript Supporté (par défaut) par les principaux navigateurs, ne nécessite pas de plug-in particulier. Accès aux objets contenus dans un document HTML ) + possibilité de les manipuler relativement facilement) Animation : Aficher/masquer du texte, défiler des images, créer des info bulles Possibilité de mettre en place des animations sans l’inconvénient des longs temps de chargement nécessités par les données multimédia. Langage relativement sécurisé : il est impossible de lire ou d’écrire sur le disque client (impossibilité de récupérer un virus par ce biais). 9 / 122
- 10. JavaScript... Généralité JS .. Une technologie cliente 10 / 122
- 11. Navigateur ... et JavaScript JS .. Une technologie cliente Chaque navigateur intègre un interpréteur de JS, plus ou moins performant SpiderMonkey (Firefox), V8 (Google Chrome), Chakra (Internet Explorer), SquirrelFish (Safari) Permet un niveau d’interactivité plus riche qu’avec de l’HTML simple Certains traitements simples (ex : contrôle des saisies utilisateur) peuvent être réalisés par le navigateur plutôt que par le serveur Un document HTML/CSS chargé dans le navigateur peut être "remanié" dynamiquement ! 11 / 122
- 12. JavaScript... Difficultés ? Difficultés d’utilisation de JavaScript ... 12 / 122
- 13. JavaScript... Difficultés ? Difficultés d’utilisation de JavaScript ... I Si le script ne fonctionne pas, la page est, le plus souvent, inutilisable. Attention au menu non visible ! I Les utilisateurs peuvent empêcher l’exécution de code JavaScript, souvent en raison des erreurs générées par les scripts, ou encore en raison de la nature de l’interaction (apparition de nouvelles fenêtres, . . . ). I Lenteur d’exécution des scripts, ainsi que pour les scripts complexes, un certain délai avant le démarrage 13 / 122
- 15. Les alternatives à JavaScript Le concurrent déchu : VB Script (Microsoft) Utilisé à l’époque de l’hégémonie d’Internet Explorer. N’est interprété que par ce dernier. Le prétendant sérieux : DART (Google) Actuellement compilé en JavaScript mais vise à terme à supplanter JavaScript Chrome sera logiquement le 1er navigateur à supporter nativement des scripts DART 15 / 122
- 16. Le noyau de JavaScript ... 16 / 122
- 17. HTML et JavaScript La page HTML devra TOUJOURS contenir les deux balises spécifiques et indispensables Le code JavaScript s’intègre de deux manières avec le code HTML 1 Insertion directe dans le code HTML Le code JavaScript s’insère le plus souvent dans la page HTML elle même. C’est la méthode la plus simple et la plus fréquemment utilisée par les développeurs de sites Internet. 2 Insertion indirecte comme un module externe 17 / 122
- 18. HTML et JavaScript 1re méthode : Insertion directe Le code s’exécute automatiquement lors du chargement de la page HTML dans le navigateur en même temps que le contenu de la page HTML s’affiche à l’écran. Le code JavaScript est placé dans le corps même de la page HTML, entre les balises <body> .......... Et ......... </body> 18 / 122
- 19. HTML et JavaScript 2me méthode : Insertion par appel à un module exterme On peut insérer du code JavaScript en faisant appel à un module externe se trouvant à n’importe quelle adresse (URI). Les 2 balises de Javascript doivent être placés entre <body> et </body> dans le cas d’une exécution directe ou entre les Tags <head> et </head> de la page HTML pour une exécution différée. Stocké dans un fichier sur le serveur à son adresse d’appel sous forme de TEXTE SIMPLE portant l’extension .txt ou .js Simplifie la maintenance des sites faisant appel à des modules JavaScript communs à plusieurs pages HTML. Inconvénient : l’appel au code externe génère une requête supplémentaire vers le serveur, et encombre le réseau 19 / 122
- 20. Entrée et sortie de données avec JavaScript 3 types de boites de messages Méthode alert() sert à afficher à l’utilisateur des informations simples de type texte. Une fois que ce dernier a lu le message, il doit cliquer sur OK pour faire disparaître la boîte Méthode confirm() permet à l’utilisateur de choisir entre les boutons OK et Annuler. Méthode prompt() La méthode prompt() permet à l’utilisateur de taper son propre message en réponse à la question posée 20 / 122
- 21. Entrée et sortie de données avec JavaScript Méthode document.write() La méthode document.write permet d’écrire du code HTML dans la page WEB 21 / 122
- 22. Exercice ... Dessinez le rendu de ce code ! 22 / 122
- 23. La structure d’un script en JavaScript La syntaxe du langage Javascript s’appuie sur le modèle de Java et C Règles générales L’insertion des espaces peut s’effectuer n’importe où dans le script Chaque commande doit être terminée par un point-virgule ( ;). Un nombre à virgule est séparé par un point (.) et non par une virgule Le langage Javascript y est sensible à la casse Il existe deux méthodes permettant d’intégrer des commentaires à vos scripts. Placer un double slash (//) devant le texte Encadrer le texte par un slash suivi d’une étoile (/*) et la même séquence inversée (*/) 23 / 122
- 24. Les variables ... 24 / 122
- 25. Déclaration et typage en JavaScript Déclaration et affectation Le mot-clé var permet de déclarer une ou plusieurs variables. Après la déclaration de la variable, il est possible de lui affecter une valeur par l’intermédiaire du signe d’égalité (=). Si une valeur est affectée à une variable sans que cette dernière ne soit déclarée, alors Javascript la déclare automatiquement. 25 / 122
- 26. Déclaration et typage en JavaScript Déclaration et la portée des variables Déclaration et affectation La lecture d’une variable non déclarée provoque une erreur Une variable correctement déclarée mais dont aucune valeur n’est affectée, est indéfinie (undefined). La portée Les variables peuvent être globales ou locales. Une variable globale est déclarée en début de script et est accessible à n’importe quel endroit du programme. Une variable locale est déclarée à l’intérieur d’une fonction et n’est utilisable que dans la fonction elle-même. 26 / 122
- 27. Déclaration et typage en JavaScript Contraintes concernant les noms de variables Les noms de variables ne peuvent contenir que des lettres, chiffres, ou le caractère "" (underscore) MonPrenom est un nom valide Les caractères spéciaux et accentués sont interdits MonPrnom n’est pas un nom valide. Il y a un caractère accentué. Les majuscules et les minuscules ont leur importance. MonPrenom est différent de Monprenom. Un nom de variable ne peut contenir d’espaces. Mon Prenom n’est pas un nom de variable correct. Il y a un espace. Les mots réservés JavaScript ne peuvent être utilisés comme noms de variable. 27 / 122
- 28. Les variables en JavaScript Les types primitifs Entier var annee = 2014 ; Réel var prixttc =122.15 ; Chaîne de caractère var message="Bonjour" ; var message=’IAG’ ; Booléen var estSympa=true ; 28 / 122
- 29. Portée et vies des variables La portée des variable Variable locale Une variable déclarée à l’interieur d’une fonction est seulement accessible dans cette fonction Variable globale Une variable déclarée en dehors de toute fonction est accessible en tout point du script et de la page Cycle de vie d’une variable Une variable locale est supprimée lorsque la fonction se termine Une variable globale est supprimée à la fermeture de la page 29 / 122
- 30. Portée et vies des variables La portée des variable 30 / 122
- 31. Valeurs spéciales des variables JavaScript inclut aussi deux types de données spéciaux Null possède une seule valeur, null, qui signifie l’absence e données dans une variable Undefined possède une seule valeur, undifined. Une variable dont le contenu n’est pas clair car elle n’a jamais stocké de valeur, pas même null est dite non définie (undifined). 31 / 122
- 32. Les opérations et les fonctions prédéfinies ... 32 / 122
- 33. Les opérations sur les chaînes Les opérations sur les chaînes de carcatères Concaténation var chaine = "bonjour" + "FI3/FCD1" ; Déterminer la longueur d’une chaine var ch1 = "bonjour" ; var longueur = ch1.length ; Identifier le nième caractère d’une chaîne var ch1 ="Rebonjour !" ; var carac = ch1.charAt(2) ; Attention ! On compte de zéro Extraction d’une partie de la chaîne var dateDuJour = "04/04/03" ; var mois = dateDuJour.substring(3, 5) ; 3 : est l’indice du premier caractère de la sous-chaîne à extraire 5 : indice du dernier caractère à prendre en considération ; ce caractère ne fera pas partie de la sous-chaîne à extraire 33 / 122
- 34. Les structures de contrôle et d’itération Structures de contrôles Condition if (expr) {... } else {... } 34 / 122
- 35. Les structures de contrôle et d’itération Structures de contrôle Sélection switch(expr){ case n : .. } L’opérateur ternaire ? : permet de remplacer une instruction if . . . else simple. Sa syntaxe utilisée pour donner une valeur à une variable est Question Réecrivez l’instruction switch avec l’opérateur ternaire 35 / 122
- 36. Les structures de contrôle et d’itération Structures de contrôles Boucle while (expr) {... } do {... } while (expr) ; Itération for (expr1 ;expr2 ;expr3) {... } for(value in object) {... } foreach (key in object) {... } 36 / 122
- 37. Les structures de contrôle et d’itération Certaines instructions permettent un contrôle supplémentaire sur les boucles : break permet de quitter la boucle courante continue permet de terminer l’itération en cours de la boucle courante 37 / 122
- 38. Exercices 1 Utiliser les méthodes JavaScript prompt() et alert() pour demander à l’utilisateur deux nombres puis afficher leur somme. 2 Ecrire un script demandant de l’utilisateur d’entrer son âge et de contrôler la validité de l’âge entré (si l’âge est erroné afficher un message d’erreur et redemander de saisir l’âge). 3 Ecrire le code Javascript qui détermine si un nombre entier x est parfait. Définition Un nombre est parfait ssi il est égal à la somme de ses diviseurs stricts. 6 est parfait car 6 = 1 + 2 + 3. 38 / 122
- 39. Les opérations Structures de contrôles JavaScript permet d’assigner des (pointeurs sur) fonctions à des variables Fonctions anonymes dont l’appel se fait au travers des variables qui les référencent 39 / 122
- 40. Les Fonctions par déclaration La déclaration se fait à l’aide du mot clé function function name(param1, param2) { ... ; return value ;} Peut retourner une valeur (return) ou non L’appel se fait de manière classique Liaison des arguments avec les paramètres, s’il y en a. Le noyau JavaScript possède déjà une bibliothèque de fonctions prédéfinies eval(), isNaN(), parseInt(), encodeURI(), ... 40 / 122
- 41. Les fonctions prédéfinies eval Cette fonction exécute un code Javascript à partir d’une chaîne de caractères. 41 / 122
- 42. Les fonctions prédéfinies isFinite Détermine si le paramètre est un nombre fini. Renvoie false si ce n’est pas un nombre ou l’infini positif ou infini négatif isNaN détermine si le paramètre n’est pas un nombre (NaN : Not a Number). 42 / 122
- 43. Les fonctions prédéfinies parseFloat analyse une chaîne de caractères et retourne un nombre décimal. ) Si l’argument évalué n’est pas un nombre, renvoie NaN (Not a Number). parseInt analyse une chaîne de caractères et retourne un nombre entier de la base spécifiée. La base peut prendre les valeurs 16 (hexadécimal) 10 (décimal), 8 (octal), 2 (binaire). 43 / 122
- 44. Les fonctions prédéfinies Number Convertit l’objet spécifié en valeur numérique String Convertit l’objet spécifié en chaîne de caractères 44 / 122
- 45. L’orienté Objet ... 45 / 122
- 46. La programmation orientée Objet Paradigme Objet Un objet est décrit par ses propriétés et ses méthodes I Accès aux propriétés et méthodes par un point ’.’ I Auto-référence avec this I Visibilité des propriétés et méthodes : public/privé Absence du concept de classe On ne peut pas définir de classes d’objets 46 / 122
- 47. La programmation orientée Objet Exemple 47 / 122
- 48. Objets primitifs Boolean var estSympa = new Boolean(true) ; Number (entiers et réels) var annee = new Number(2014) ; Array I var saveursYop = new Array[2] ; I saveursYop[0] ="banane" ; I saveursYop[1] ="kiwi" ; String var message = new String("2eme IAG") ; 48 / 122
- 49. Objets primitifs Manipulation des tableaux ... ) Un exemple La suite .. 49 / 122
- 50. Exemples Objets Les objets de JavaScript, sont soit des entités pré définies du langage, soit créés par le programmeur Par exemple, le navigateur est un objet qui s’appelle "navigator". La fenêtre du navigateur se nomme "window" La page HTML est un autre objet, que l’on appelle "document". Un formulaire à l’intérieur d’un "document", est aussi un objet. Un lien hypertexte dans une page HTML, est encore un autre objet. Il s’appelle "link". etc... Les objets javascript peuvent réagir à des "Evénements". Tous les navigateurs ne supportent pas les mêmes objets 50 / 122
- 51. Les objets Comment créer les Objets ? 51 / 122
- 52. Les objets Comment créer les Objets ? L’opérateur New est utilisé pour créer une nouvelle instance ou un nouveau type d’objet défini par l’utilisateur ou de l’un des types d’objets prédéfinis, Array, Boolean, Date, Function, Image, Number, Object, ou String. 52 / 122
- 53. 2 façons de créer ses objets Création directe d’objet Utilisation d’un constructeur d’objet 53 / 122
- 54. Les objets ... L’opérateur Typeof renvoie une chaîne de caractères indiquant quel est le type de l’opérande. 54 / 122
- 55. Les objets ... String Quelques méthodes String anchor( ) : formate la chaîne avec la balise <A> nommée ; b( ) : formate la chaîne avec la balise <B> ; charAt( ) : renvoie le caractère se trouvant à une certaine position ; concat( ) : permet de concaténer 2 chaînes de caractères ; toLowerCase( ) : permet de passer toute la chaîne en minuscule ; toUpperCase( ) : permet de passer toute la chaîne en majuscules ; Voir annexe pour la suite 55 / 122
- 56. Les objets ... Array Quelques méthodes Array concat( ) : permet de concaténer 2 tableaux ; join( ) : convertit un tableau en chaîne de caractères ; reverse( ) : inverse le classement des éléménts du tableau ; slice( ) : retourne une section du tableau ; sort( ) : permet le classement des éléments du tableau ; Propriété Array I length : retourne le nombre d’éléments du tableau ; 56 / 122
- 57. Les objets ... Date Quelques méthodes pour l’objet Date I getFullYear( ), getYear( ), getMonth( ), getDay( ), getDate(), getHours( ), getMinutes( ), getSeconds( ), getMilliseconds( ) : retournent respectivement l’année complète, l’année (2chiffres), le mois, le jour de la semaine, le jour du mois, l’heure, les minutes, les secondes et les millisecondes stockés dans l’objet Date ; Voir annexe pour la suite 57 / 122
- 58. Les objets ... Math Quelques méthodes Mathématiques abs( ), exp( ), log(), sin( ), cos( ), tan( ), asin( ), acos( ), atan( ), max( ), min( ), sqrt( ) sont les opérations mathématiques habituelles ; atan2( ) : retourne la valeur radian de l’angle entre l’axe des abscisses et un point ; ceil( ) : retourne le plus petit entier supérieur à un nombre ; floor( ) : retourne le plus grand entier inférieur à un nombre ; pow( ) : retourne le résultat d’un nombre mis à une certaine puissance ; random( ) : retourne un nombre aléatoire entre 0 et 1 ; round( ) : arrondi un nombre à l’entier le plus proche. 58 / 122
- 59. Exercice Exercices Ecrire un script qui calcule la factorielle d’un nombre entier positif n Ecrire une fonction Javascript qui affiche la table de multiplication d’une valeur donnée en paramètre. Avant l’appel à la fonction la valeur doit etre saisie par l’intermédiaire d’une fenetre de dialogue. 59 / 122
- 60. Exercice Que fais ce programme ? 60 / 122
- 61. JSON ... JavaScript Object Notation (JSON) Définition Format léger et vraiment très simple Il n’existe que 2 concepts : objets {} et tableaux[] sont manipulables nativement par JavaScript Usages I Sert à stocker des données (ex : fichier de configuration) I Sert à échanger des données à travers le réseau, entre clients et serveurs (ex : sérialisation / désérialisation) I Sert à décrire un objet JS mais sous une forme textuelle dans le code source 61 / 122
- 62. Exemple de définition JSON 62 / 122
- 63. Exemple d’utilisation JSON 63 / 122
- 64. Le JavaScript côté client Web ... 64 / 122
- 65. Sous-programmes JS ... Le code des sous-programmes se situe au niveau de l’entête d’un document HTML Soit directement Soit par inclusion d’un fichier externe 65 / 122
- 66. Sous-programmes JS ... Le code du programme principal se situe dans le corps d’un document Html ) les portions de code qui ont vocation à appeler les sous-programmes Soit dans une balise spéciale <script></script> Soit via des évènements 66 / 122
- 67. Sous-programmes JS ...Exemple 67 / 122
- 68. Sous-programmes JS ...Exemple 68 / 122
- 69. Les objets du JS... Objets de type BOMBrowser Object Model, permet la manipulation du navigateur Les navigateurs sont des logiciels qui offrent les mêmes fonctionnalités de base : ouvrir / fermer des onglets, aller à un URL, mémoriser la liste des url, etc Objets de type DOM Document Object Model qui permet la représentation d’un document sous la forme d’un objet Les balises sont des noeuds et leurs imbrications forment une arborescence Cette structure d’arbre est ensuite facile à manipuler Cet arbre est chargé dans le navigateur et est parcouru par le parseur du navigateur afin de produire l’affichage graphique Chaque modification ultérieure de cet arbre force le rafraîchissement de l’affichage graphique. Objets de type HTML Comme par exemple <a>, <area>, <canvas>, <button>, <form>, <image>, <input>, <link>, <table>, etc . 69 / 122
- 70. Les objets du navigateur ... Pour comprendre les évènements ) Objet Window Le plus haut dans la hiérarchie qui correspond à la fenêtre même du navigateur. L’objet document fait référence au contenu de la fenêtre. document regroupe au sein de propriétés l’ensemble des éléments HTML présents sur la page. Pour atteindre ces différents éléments, nous utiliserons : 1. Soit des méthodes propres à l’objet document, comme la méthode getElementById( ), qui permet de trouver l’élément en fonction de son identifiant (ID) ; 2. Soit des collections d’objets qui regroupent sous forme de tableaux Javascript tous les éléments de type déterminé. 70 / 122
- 71. Les objets du navigateur ... BOM 71 / 122
- 72. L’objet window ... L’objet window représente la fenêtre du navigateur 72 / 122
- 73. L’objet window ... Il est possible de programmer l’exécution d’une méthode à un instant donné ou à des temes réguliers grâce à setTimeout etsetInterval NB : Il est possible d’annuler avec clearnTimeout et clearInterval Voir Annexe pour le reste des propriétés et des méthodes propres à l’objet window 73 / 122
- 74. L’objet BOM ... Browser Object Model En plus de window, il est possible d’utiliser les objets location, navigator, screen et history. 74 / 122
- 75. L’objet BOM ... Exemple D’autres exemples ... 75 / 122
- 76. Du l’objet BOM ... DOM Figure – BOM et DOM 76 / 122
- 77. DOM par un exemple HTML Figure – Exemple HTML comme un objet 77 / 122
- 78. DOM par un exemple HTML La navigation arborescente dans un document HTML 78 / 122
- 79. DOM... Document Objet Model Méthode getElementById : Cette méthode prend comme argument l’id d’un élement. 79 / 122
- 80. DOM... Document Objet Model Méthode getElementsByTagName : Cette méthode prend comme argument le nom de balise des éléments à récupérer. 80 / 122
- 81. DOM... Document Objet Model Propriété innerHTML : En utilisant cette propriété, il est possible de modifier le contenu d’un élément. Remarque La propriété innerText (textContent pour Firefox) est similaire à innerHTML, mais ne traite que du texte simple. 81 / 122
- 82. DOM... Document Objet Model Création dynamiquement des éléments HTML : Ceci peut se faire suivant ces étapes : 1 createElement : création de l’élément (noeud) 2 createTextNode : attribuer un élément textuel au noeud créé. 3 appendChild : fixer le noeud à sa bonne position dans l’arbre du document 82 / 122
- 83. DOM... Document Objet Model Modifier le style d’une manière dynamique :Tout élément HTML dispose d’un attribut style en JS. Les noms des propriétés CSS doivent être convertis en camel case. Par exemple : Propriété CSS Propriété JS background-image style.backgroundImage color style.color Font-family style.fontFamily 83 / 122
- 84. DOM... Document Objet Model Accès direct aux noeuds Par la valeur de l’attribut name (s’il existe) var result = document.getElementsByName ("newEmails") ; Renverra 0 ou n résultats. 84 / 122
- 85. Evènement Evènement Un évènement est provoqué par une action de l’utilisateur ou du navigateur lui-même. Les évènements ont des noms tels que click, load et mouseover. Une fonction appelée en réponse à un évènement se nomme un écouteur (event handler ou event listener). Souvent, leur nom commence par on comme par exemple onclik ou onload. 85 / 122
- 86. Evènement Les évènements les plus importants Evènement Elément(s) HTML concerné(s) onLoad Body, frameset, Object onUnload Body, frameset, OnError Img, Objetc, body, et frameset onAbort Body et frameset onSelect Input et textarea onChange Input, select, textarea onSubmit, onReset Form onFocus, onBlur Label, input, select, textarea et button onResize, onScroll Body onClick, onMouseOver, onContextMenu Quasiment tout 86 / 122
- 87. Evènement Nommage des objets-élémments I Pour pouvoir manipuler un objet en javaScript, il doit posséder un nom I Pour pouvoir distinguer les différents objets-éléments d’une page web, il suffit de leur donner un nom à travers de l’attribut NAME <Table Name="tableau1">. . . <Table Name="tableau2">. . . <Form Name = "formulaire1">. . . <Form Name ="formulaire2">. . . <Textarea Name ="texte1">. . . I Dans le cas où l’objet serait unique alors pas besoin de nom pour désigner cet objet 87 / 122
- 88. HTML Event Handlers On utilise des attributs HTML pour déclarer les écouteurs. La valeur de ces attributs est le code JavaScript à exécuter lorsque l’évènement est produit. 88 / 122
- 89. HTML Event Handlers onClick Se produit lorsque l’utilisateur clique sur un élément spécifique dans une page, comme un lien hypertexte, une image, un bouton, du texte, etc. Ces éléments sont capables de répondre séparément à cet événement Il peut également être déclenché lorsque l’utilisateur clique n’importe où sur la page s’il a été associé non pas à un élément spécifique, mais à l’élément body tout entier 89 / 122
- 90. HTML Event Handlers onLoad Se produit lorsque une page web est chargée dans la fenêtre du navigateur Toute la page (y compris les images qu’elle contient si leur chargement est prévu) doit avoir été chargée pour qu’il ait lieu Cet événement peut être associé à une image seulement ; auquel cas, il se produit une fois son chargement terminé 90 / 122
- 91. HTML Event Handlers onMouseover Analogue à onClick sauf qu’il suffit que l’utilisateur place le pointeur de sa souris sur l’un des éléments précités (lien hypertexte, image, bouton, texte, etc.) pour qu’il ait lieu onMouseout A l’inverse de onMouseover, cet événement se produit lorsque le pointeur de la souris quitte la zone de sélection d’un élément. 91 / 122
- 92. HTML Event Handlers onMouseover Analogue à onClick sauf qu’il suffit que l’utilisateur place le pointeur de sa souris sur l’un des éléments précités (lien hypertexte, image, bouton, texte, etc.) pour qu’il ait lieu onMouseout A l’inverse de onMouseover, cet événement se produit lorsque le pointeur de la souris quitte la zone de sélection d’un élément. 92 / 122
- 93. Manipulation des objets Pour adresser un objet, il ne suffit pas de donner son nom : il faut aussi préciser son "chemin d’accès" dans l’arborescence de la structure Si le nom de la fenêtre est omis, le navigateur utilisera par défaut la fenêtre courante Dans le cas de cadres (frames), il est pertinent de donner le nom de la fenêtre Il est possible aussi d’omettre window.document : l’adressage réussi puisqu’il n’y a qu’un seul objet "document" dans la fenêtre. 93 / 122
- 94. Les évènements... Retenez Ainsi ... Deux stratégies possibles ... Pour la gestion des évènements La première Directement à l’aide d’attributs dédiés (inline) 94 / 122
- 95. Les évènements... Retenez Ainsi ... Deux stratégies possibles ... Pour la gestion des évènements La deuxième Mise en place d’écouteurs d’évènement 95 / 122
- 96. Les évènements... Retenez Question : Ré-écrivez le code précédemment proposé avec les événements. 96 / 122
- 97. Les évènements... Retenez Question : Ré-écrivez le code précédemment proposé avec les événements. Figure – Solution 97 / 122
- 98. Les évènements... Exercice Exercice : Ecrivez le script permettant de changer (en + ou -) la valeur de la progression. Figure – Solution 98 / 122
- 99. Les évènements... Objet event Quand un événement se produit, toutes les informations le concernant sont enregistrées dans un objet appelé event. Il est possible de récupérer cet objet sous forme de paramètre d’une fonction écouteur. Figure – Solution 99 / 122
- 100. Les évènements... souris Ce sont : Click double click mousedown mouseup mouseover mouseout mousemove • Les propriétés utiles et accessibles à partir de l’objet event sont : clientX clientY screenX screenY shiftkey ctrlKey altKey metaKey 100 / 122
- 101. Les évènements... clavier Ce sont : keydown keyup keypress Les propriétés utiles et accessibles à partir de l’objet event sont : shiftkey ctrlKey altKey metaKey keyCode 101 / 122
- 102. Les évènements... HTML Ce sont : load unload abort error select change submit reset reseize scroll focus blur Remarque La plupart de ces évènements sont liés aux formulaires ou l’objet window. 102 / 122
- 103. Les cookies ... Un "Cookie" ... est une chaîne de caractères qu’une page HTML (contenant du code JavaScript) peut écrire à un emplacement UNIQUE et bien défini sur le disque dur du client. Cette chaîne de caractères ne peut être lue que par le seul serveur qui l’a générée. Que faire avec un cookie ? 103 / 122
- 104. Les cookies ... Un "Cookie" ... est une chaîne de caractères qu’une page HTML (contenant du code JavaScript) peut écrire à un emplacement UNIQUE et bien défini sur le disque dur du client. Cette chaîne de caractères ne peut être lue que par le seul serveur qui l’a générée. Que faire avec un cookie ? I Transmettre des valeurs (contenu de variables) d’une page HTML à une autre. Par exemple, créer un site marchand et constituer un "caddie" pour le client. Caddie qui restera sur son poste et vous permettra d’évaluer la facture finale au bout de la commande. Sans faire appel à quelque serveur que ce soit. I Personnaliser les pages présentées à l’utilisateur en reprenant par exemple son nom en haut de chaque page. 104 / 122
- 105. Les cookies ... Les "Cookies" ... des limites On ne peut pas écrire autant de cookies que l’on veut sur le poste de l’utilisateur (client d’une page). Il y a des limites : I Limites en nombre : Un seul serveur (ou domaine) ne peut pas être autorisé à écrire plus de 20 cookies. I Limites en taille : un cookie ne peut excéder 4 Ko. I Limites du poste client : Un poste client ne peut stocker plus de 300 cookies en tout. Où sont stockés les cookies ? 105 / 122
- 106. Les cookies ... Les "Cookies" ... des limites On ne peut pas écrire autant de cookies que l’on veut sur le poste de l’utilisateur (client d’une page). Il y a des limites : I Limites en nombre : Un seul serveur (ou domaine) ne peut pas être autorisé à écrire plus de 20 cookies. I Limites en taille : un cookie ne peut excéder 4 Ko. I Limites du poste client : Un poste client ne peut stocker plus de 300 cookies en tout. Où sont stockés les cookies ? En général, ils sont pour Netscape, dans le répertoire de l’utilisateur (si il y a des profils différents) sous le nom de "cookie.txt". Microsoft Internet Explorer stocke les cookies dans des répertoires tels que "C :WINDOWSCookies" ou encore "C :WINDOWSTEMCookies". 106 / 122
- 107. Les cookies ... Structure d’un cookie Nom=Contenu ; expires=expdate ; path=Chemin ; domain=NomDeDomaine ; secure La variable Nom contient le nom à donner au cookie. La variable Contenu contient le contenu du cookie Exemple macookie="oui :visite" Le mot réservé expires suivi du signe "=". Derrière ce signe, une date d’expiration représentant la date sous la forme (Wdy, DD-Mon-YYYY HH :MM :SS GMT) à laquelle le cookie sera supprimé du disque dur du client. Utiliser les fonctions de l’objet Date path représente le chemin de la page qui a créé le cookie. 107 / 122
- 108. Les cookies ... Structure d’un cookie Nom=Contenu ; expires=expdate ; path=Chemin ; domain=NomDeDomaine ; secure domain représente le nom du domaine de cette même page secure prend les valeurs "true" ou "false" permet de spécifier que le cookie sera envoyé uniquement si la connexion est sécurisée selon que le cookie doit utiliser des protocoles HTTP ou HTTPS. Les arguments path, domain et secure sont facultatifs. Lorsque ces arguments sont omis, les valeurs par défaut sont prises. Pour secure, la valeur est "False" par défaut. 108 / 122
- 109. Gestion des cookies ... Ecrire un un cookie Un cookie est une propriété de l’objet document (la page HTML chargée dans le navigateur) alors l’intruction d’écriture de cookie est : document.cookie = Nom + "=" + Contenu + " ; expires=" + expdate.toGMTString() ; 109 / 122
- 110. Gestion des cookies ... Lecture d’un cookie Accéder à la propriété cookie de l’objet document. Modification d’un cookie Modifier le contenu de la variable Contenu puis réécrire le cookie sur le disque dur du client 110 / 122
- 111. Gestion des cookies ... Suppression d’un cookie Positionner la date de péremption du cookie à une valeur inférieure à celle du moment où on l’écrit sur le disque. 111 / 122
- 112. Annexe 112 / 122
- 113. Les objets ... String ... Annexe Quelques méthodes italics( ) : formate la chaîne avec la balise <I> ; lastIndexOf( ) : permet de trouver le dernier indice d’occurrence d’un caractère ; link( ) : formate la chaîne avec la balise <A> pour permettre de faire un lien ; slice( ) : retourne une portion de la chaîne ; substr( ) : retourne une portion de la chaîne ; substring( ) : retourne une portion de la chaîne ; indexOf( ) : permet de trouver l’indice d’occurrence d’un caractère dans une chaîne ; charCodeAt( ) : renvoie le code du caractère se trouvant à une certaine position ; 113 / 122
- 114. Les objets ...date ... Annexe Quelques méthodes date getUTCFullYear( ), getUTCYear( ), . . . retournent respectivement l’année complète, l’année (2chiffres), . . . stockés dans l’objet Date en temps universel ; setFullYear( ), setYear( ), . . . remplacent respectivement l’année complète, l’année (2chiffres), . . . dans l’objet Date ; setUTCFullYear( ), setUTCYear( ), . . . remplacent l’année complète, l’année (2chiffres), . . . dans l’objet Date en temps universel ; getTime( ) : retourne le temps stocké dans l’objet Date ; getTimezoneOffset( ) : retourne la différence entre l’heure du client et le temps universel ; toGMTString( ), toLocaleString( ), toUTCString( ) : convertissent la date en chaîne de caractère selon la convention GMT, selon la convention locale ou en temps universel ; 114 / 122
- 115. Les objets ...Window ... Annexe Quelques propriétés (1) closed : indique que la fenêtre a été fermée ; defaultStatus : indique le message par défaut dans la barre de status ; document : retourne l’objet document de la fenêtre ; frames : retourne la collection de cadres dans la fenêtre ; history : retourne l’historique de la session de navigation ; location : retourne l’adresse actuellement visitée ; name : indique le nom de la fenêtre ; 115 / 122
- 116. Les objets ...Window ... Annexe Quelques propriétés (2) navigator : retourne le navigateur utilisé ; opener : retourne l’objet window qui a créé la fenêtre en cours ; parent : retourne l’objet window immédiatemment supérieur dans la hiérarchie ; self : retourne l’objet window correspondant à la fenêtre en cours ; status : indique le message affiché dans la barre de status ; top : retourne l’objet window le plus haut dans la hiérarchie. 116 / 122
- 117. Les objets ...Window ... Annexe Quelques méthodes blur( ) : enlève le focus de la fenêtre ; close( ) : ferme la fenêtre ; focus( ) : place le focus sur la fenêtre ; moveBy( ) : déplace d’une distance ; moveTo( ) : déplace la fenêtre vers un point spécifié ; open( ) : ouvre une nouvelle fenêtre ; print( ) : imprime le contenu de la fenêtre ; resizeBy( ) : redimensionne d’un certain rapport ; resizeTo( ) : redimensionne la fenêtre ; setTimeout( ) : évalue une chaîne de caractère après un certain laps de temps. 117 / 122
- 118. Annexe Evènement Evènement load et unload Pour l’objet window, l’évènement load se produit lorsque la page complète est chargée, incluant les ressources externes telles que les images, les fichiers JavaScript et CSS. Il est possible d’associer cet évènement à des éléments img. L’évènement unload se produit typiquement lorsqu’on change de page. Cela permet par exemple de libérer proprement certaines ressources. 118 / 122
- 119. Annexe Evènement Evènement submit et reset Ils sont associés à un formulaire. Pour valider la soumission ou la ré-initialisation, la fonction écouteur doit retourner true. this.name1.value représente la valeur du champ name1 de l’objet this qui est le formulaire auquel est associé l’écouteur. 119 / 122
- 120. Annexe Evènement Utiles par exemple pour contrôler les champs de saisie. 120 / 122
- 121. Références Bibliographiques 121 / 122
- 122. Références Bibliographiques 1 Javascript : The Good Parts, Crockford Douglas, Edition O’Reilly, 16 Mai 2008, 170 pages 2 JavaScript : The Definitive Guide, David Flanagan, Edition O’Reilly, Mai 2011, 1096 Pages 3 High Performance JavaScript, Nicholas C. Zakas, Edition O’Reilly, Mars 2010, Pages 231 122 / 122