Programmation JavaScript

1. Programmation JavaScript cours inspiré du cours de R. Vivian

2. Plan Introduction à JS Structure d’un script Les chaînes de caractères Les formulaires Accéder aux éléments Le langage objet JS JS et les maths JS et les cookies JS et les popup Annexes Trucs et astuces des formulaires Les tableaux Le modèle objet JS

3. I. Présentation JavaScript est un langage de programmation complètement lié au langage HTML. Le développeur Internet code ses pages HTML en y intégrant des sources JavaScript. Le visiteur, par l'intermédiaire de son navigateur, charge le code des pages.

4. I. Présentation C'est le navigateur qui interprète le code HTML et JavaScript L'interprétation dépend naturellement du type de navigateur utilisé et de sa version JavaScript est un langage objet et événementiel

5. I. Présentation Le développeur crée et utilise des objets ayant des propriétés et des méthodes. L'interprète gérant votre page détecte automatiquement tous les événements déclenchés par le visiteur passage de souris clic saisie clavier... À ces événements sont associées des actions Par exemple onClick permet de spécifier des actions lors d'un clic de souris sur un objet donné

6. I.1 HTML et JavaScript Il y a plusieurs endroits dans une page web où il est possible d'intégrer du code JavaScript dans le corps de la page, en entête de page, dans un événement d'un objet de la page.

7. I.1 HTML et JavaScript

8. I.2 Variables JavaScript utilise l'instruction var pour la déclaration. Pour déclarer une variable basique (càd de type entier, numérique, chaîne de caractères), il ne faut pas déclarer le type. Le navigateur le détecte tout seul. Par contre toute nouvelle variable doit être initialisée.

9. I.2 Variables : Exemple On remarque la présence du point virgule (;) à la fin de chaque instruction. Il est possible de placer sur une même ligne plusieurs instructions séparées par des points virgules.

10. I.2 Variables : Exemple Une variable déjà déclarée s'utilise ensuite normalement

11. I.2 Variables : Exemple

12. I.2 Variables : Exemple

13. I.3 Objets Les éléments manipulés par JavaScript et affichés dans votre navigateur sont des objets Càd des éléments Classés selon une hiérarchie pour pouvoir les désigner précisément Auxquels on associe des propriétés et des méthodes

14. I.3 Objets Cette notion est importante mais nous allons en aborder que le strict nécessaire pour ce cours! Voyons cela sur un exemple concret Imaginez un un jardin dans lequel on trouve une branche sur laquelle se trouve un nid une balançoire avec un trapèze, une corde et un autre nid Une salade (ce sont des maraîchers d'occaz)

16. I.3 Objets Le nid sur l'arbre est donc désigné par  Contrairement au nid situé sur la balançoire  Imaginez maintenant que l'on veuille changer la couleur du nid (dans l'arbre) pour le peindre en vert il suffirait de taper une commande du genre C'est donc ainsi que l'on représente les objets en JavaScript, à la seule différence que ce n'est pas un jardin qui est représenté sous forme d'objets mais la fenêtre de votre navigateur...

17. I.3 Objets JavaScript intègre d'origine plusieurs type d'objets. L'objet le plus grand est la fenêtre window Dans la fenêtre s'affiche une page document ATTENTION, le respect des majuscules/minuscules est indispensable et source de nombreuses erreurs.

19. I.3 Objets : Exemple Voyons en détail l'objet Date, très utile dans un environnement Internet. La déclaration se fait toujours avec var. Pour créer un objet, il faut utiliser le mot clé new suivi du type d'objet; ici date. Au moment du select il faudra revenir sur la notion de newAu moment du select il faudra revenir sur la notion de new

20. I.3 ObjetsAffichage de la date

21. I.5 Fonctions Les fonctions sont déclarées et codées dans l'entête de la page et peuvent être appelées ensuite à n'importe quel endroit de la page.

22. I.5 Fonctions Pour déclarer une fonction on utilise le mot-clé function, suivi de son nom et des éventuels paramètres.

23. I.5 Fonctions Le corps des fonctions est délimité par { et } dans lequel on place la déclaration des variables locales, propres à la fonction, ainsi que l'ensemble des traitements. Remarque non précédée de var, une variable a une visibilité globale. Précédée de var, une variable a une visibilité limitée à la fonction ou elle a été définie.

24. I.5 Fonctions Une fonction aura dans son corps une ou plusieurs instructions return qui permet(tent) de renvoyer une valeur ou un objet. Une fonction sans instruction return est une procédure.

25. I.5 Fonctions : Exemple

26. I.5 Fonctions : Exemple

27. II Structure d'un Script Le JavaScript a une structure de programmation proche du langage C; moins riche naturellement

28. II.1 Écrire un commentaire Indispensable les commentaires en programmation. Pour mettre en commentaire une partie de code, jusqu'au prochain retour à la ligne

29. II.1 Écrire un commentaire Pour mettre en commentaire plusieurs lignes de code

30. II.2 Grouper les instructions Les instructions sont regroupées par les accolades { et }. Il doit y avoir autant d'accolades ouvertes que d'accolades fermées. Le groupement d'instructions est utile.

31. II.2 Grouper les instructions Il permet par exemple de regrouper les instructions d'une fonction

32. II.3 Test Conditionnel L'instruction if permet d'effectuer certaines actions uniquement quand un test donné a pour valeur true(? vrai : valeur booléenne)

33. II.3 Test Conditionnel Il y a 2 moyens d'utiliser if Action à réaliser = une instruction Action = plusieurs instructions En TDs faires les exercices classique sur les ifEn TDs faires les exercices classique sur les if

34. II.3 Test Conditionnel L'instruction if peut être complétée par l'instruction else pour gérer les actions à associer à la valeur false du test

35. II.3 Test Conditionnel Exemple En TDs faire les exos classiques sur les if-elseEn TDs faire les exos classiques sur les if-else

36. II.4 Boucle for Une boucle for répète un groupe d'instructions tant que la partie condition est vraie. Une ou plusieurs variables définissent le nombre d'itérations

37. II.4 Boucle for Ces variables sont initialisées au 1er passage puis la condition est évaluée Ensuite, à chaque début d'itération les instructions de la partie incrément sont exécutées En générale elles modifient les variables d'itération Après la partie incrément faite, la condition est réévaluée

38. II.4 Boucle for : Exemples Faire une boucle pour i variant de 0 à 100 inclus par pas de 1 Faire une boucle pour i variant de 10 à 0 inclus par pas de -1

39. II.4 Boucle for : Exemple Voici une application mathématique. Il s'agit de calculer la somme des nombres de 1 à N.

40. II.4 Boucle for : Astuces Écrire a++ est équivalent à a=a+1 Et a-- est équivalent à a=a-1 Dans la même idée, on peut aussi remplacer a=a+5 par a+=5 Vous trouverez donc souvent les boucles for avec cette syntaxe

41. II.4 Boucle for : Exemple En tds faire les tds classiques sur les boucles forEn tds faire les tds classiques sur les boucles for

42. III Chaînes de caractères Tous les langages de programmation prévoient une gestion des chaînes de caractères JavaScript est particulièrement bien adapté pour le traitement des chaînes

43. III.1 Déclaration Pour déclarer une chaîne de caractères, vous pouvez utiliser les guillemets " ou l'apostrophe '

44. III.1 Déclaration Cela se corse quand il s'agit d'initialiser une chaîne avec un de ces caractères Le secret est d'alterner les guillemets et les apostrophes selon les caractères spéciaux à afficher Il faut veillez à ne pas fermer la chaîne de caractères avant sa fin normale pour éviter les erreurs JavaScript

45. Exemple de déclaration incorrecte Il existe aussi une autre solution La variable chaine1 contient Je lui dis "Bonjour l'ami". Javascript a interprété \" comme un guillemet. III.1 Déclaration

46. Une variable peut être transformée en une chaîne de caractères à tout moment Il est possible de modifier dynamiquement le type de la variable A la fin de ce script, chaine est un nombre qui vaut 3.14159 ; pi est une chaîne qui contient "3.14152654". III.1 Déclaration

47. III.1 Déclaration La différence peut sembler sans importance. Il n'en est rien! Quand une variable est un nombre, il est possible de lui appliquer des opérations (addition, multiplication, ...) Quand une variable est de type chaîne de caractères, on peut lui appliquer les méthodes propres aux objets chaînes

48. III.2 Opérations L'opération de base est la concaténation de chaînes Elle consiste à assembler deux chaînes en une L'opérateur est le +, à ne pas confondre avec l'opérateur addition qui s'applique aux nombres La variable chaine contient après ce script "Vive le JavaScript". La concaténation est une opération simple et très utile

49. III.2 Opérations Une chaîne de caractères en JavaScript est un objet string sur lequel s'appliquent des propriétés et des méthodes. La propriété length indique le nombre de caractères de la chaîne chaine.length retourne le nombre de caractères, ici 6 caractères

50. III.2 Opérations La méthode charAt(n) récupère le nième caractère Attention, le premier caractère a comme indice 0 chaine.charAt(1) retourne "z"

51. III.2 Opérations Il est utile de pouvoir extraire un morceau d'une chaîne La question est de récupérer le jour, le mois et l'année dans 3 variables différentes

52. III.2 Opérations substring attend 2 paramètres l'indice du premier caractère (inclus), l'indice du dernier caractère (exclus). Si les deux paramètres sont inversés, javascript rétablit l'ordre logique chaine.substring(6,10) et chaine.substring(10,6) sont identiques Si le deuxième paramètre est omis, la chaîne retournée commence à l'indice indiqué et se termine à la fin de la chaîne.

53. III.2 Opérations Deux méthodes permettent de retrouver une sous-chaîne d'une chaîne Ces méthodes retrouvent la position d'une chaîne et retourne son indice La méthode lastindexof(souschaine) retourne l'indice de la dernière occurrence de souschaine Si la sous-chaîne n'est pas trouvé, lastindexof retourne -1

54. III.2 Opérations JavaScript offre deux méthodes pour transformer les lettres (et des lettres uniquement) d'un mot en majuscules ou en minuscules A la fin de ce script, maj contient CECI EST UN TEXTE et min contient ceci est un texte

55. IV Formulaires Les formulaires sont la base des échanges entre le site et le visiteur. JavaScript ne peut pas échanger d'information à partir de fichier texte ou de base de données.

56. IV Formulaires JavaScript associé aux formulaires permet d'assister et de guider le visiteur, de contrôler la saisie, de faire des traitements(calcul, manipulation de chaînes de caractères), d'envoyer les résultats au serveur.

57. IV Formulaires Pour intégrer des éléments de formulaire, il faut encadrer les balises par <form> et </form>. Dans la suite de ce document, sont présentés tous les éléments de formulaire avec les propriétés, les méthodes et les événements associés.

58. IV Formulaires

59. IV.1 La balise <form>propriétés, méthodes, événements

60. IV.1 définitions des méthodes et événements Une méthode est une fonction (ou procédure) de traitement de données associée à un objet Un événement est une fonction (pas une procédure!) toujours associée à un objet mais qui réagit en fonction des interventions de l'utilisateur Il utilise le clavier pour fournir des infos Il sélectionne l'objet avec la souris Il spécifie des valeurs de l'objet avec la souris Cette notion d'événement est cruciale car elle est la base du fonctionnement des pgms InterNet Nous les étudierons tout au long de ce coursNous les étudierons tout au long de ce cours

61. IV.2 L'élément input L'objet input est le plus utilisé de tous. Il permet d'afficher des champs texte, des boutons, des radio-boutons, des cases à cocher, le champ caché, les boutons spéciaux reset et submit.

62. IV.2 L'élément input propriétés

63. IV.2 L'élément input méthodes et événements

64. IV.2.1 Les Zones de Textes Une zone de texte est définie par la balise input avec un type text Propriétés acceptées name | value | defaultvalue | size | maxlength | disabled | readOnly | class | style Méthodes acceptées focus, blur Evénements acceptés onFocus, onBlur, onChange

65. IV.2.2 Les Boutons Un bouton est défini par la balise input avec un type button Propriétés acceptées name | value | defaultvalue | size | maxlength | disabled | readOnly | class | style Méthodes acceptées focus | blur | click Événements acceptés onFocus | onBlur | onClick L'événement le plus utilisé est onClick car il détecte le clic utilisateur.

66. IV.2.3 Les Radio-Boutons Un radio-boutons est défini par la balise INPUT avec un type "radio" Pour définir un groupe, il faut donner le même nom (champs name) à tous les radios. Ainsi, la sélection sera unique pour l'ensemble du groupe.

67. IV.2.3 Les Radio-Boutons Propriétés acceptées name | value | checked | disabled | readOnly | class | style Méthodes acceptées focus | blur | click Evénements acceptés onFocus | onBlur | onClick

68. IV.2.4 les Cases à Cocher Une case à cocher est définie par la balise INPUT avec un type checkbox. Contrairement aux cases à cocher, il n'y a pas d'exclusion entre les propositions.

69. IV.2.4 les Cases à Cocher Ici, Majeur et Etudiant sont décochés à l'origine. Mais il est possible de n'être ni l'un, ni l'autre, ou l'un des deux.

70. IV.2.4 les Cases à Cocher Propriétés acceptées name | checked | disabled | readOnly | class | style Méthodes acceptées focus | blur | click Événements acceptés onFocus | onBlur | onClick

71. IV.2.5 Le password Password se présente comme une zone de texte. Mais il affiche des * pour cacher le contenu du champ. Il est aussi impossible de copier le contenu (CTRL+C). Il est donc adapté à la saisie de mot de passe.

72. IV.2.6 La valeur cachée Un champ caché est destiné à transmettre des informations dans le formulaire, sans que le visiteur ne s'en aperçoivent. Cela peut être une adresse mail, un résultat de traitement, l'heure, un cookie ou toute autre information. Naturellement, le champ n'apparaît pas!

73. IV.2.6 La valeur cachée Propriétés acceptées name | value | defaultvalue Naturellement, toutes les propriétés et les événements concernant son affichage et son apparence sont sans effet. Remarque : Même s'il n'apparaît pas à l'écran, son contenu reste manipulable en JavaScript.

74. IV.2.7 Les boutons spéciaux Les boutons reset et submit existent bien! Il faut les décrire (Je préconise de les éviter)???

75. IV.3 Les menus de sélection Les listes sont définies par les balises <select></select> Cette balise définie la zone de la liste. Les lignes de contenu de la liste sont alimentées par les balises <option></option >

76. IV.3 Les menus de sélection Les listes peuvent se présenter de plusieurs manières, selon leur propriété. Sur une ligne : size=1 Sur plusieurs lignes mono-sélection : size=4 Sur plusieurs lignes multi-sélection multiple size=4

77. IV.3 L'élément option L'objet option est assez simple Il peut avoir comme attributs name, value, selected selected force la sélection de cette occurrence dans la liste

78. IV.3 L'élément optionpropriétés, méthodes, événements

79. IV.4 les zones de textes multi lignes textarea L'objet textarea est essentiellement utilisé pour permettre au visiteur de saisir un texte assez long (message, descriptif...)

80. IV.4 L'élément textareapropriétés, méthodes, événements

81. IV.4 L'élément textareapropriétés, méthodes, événements Les 2 propriétés rows et cols qui indiquent respectivement le nombre de lignes et de colonnes de la zone Le texte contenu dans l'élément textarea apparaît tel que dans le code source Un retour à la ligne dans le code source crée une nouvelle ligne dans la zone

82. V L'accès aux éléments Les éléments de formulaire sont des objets JavaScript Voyons comment accéder via JavaScript aux objets d'un formulaire Supposons le formulaire suivant

83. V L'accès aux éléments

84. V.1 Accéder au formulaire Le formulaire est un élément de l'objet document Pour accéder au formulaire général, il faut écrire forms est le tableau des formulaires de document On peut accéder à un formulaire par son nom comme indice dans forms ou son entier comme indice dans forms ou Les indices des tableaux commence à 0 son nom tout simplement

85. V.2 Accéder à un élément Pour accéder maintenant à la zone de texte, on écrit elements est le tableau de tous les éléments du formulaire On peut accéder à un élément par son nom comme indice dans elements ou son entier comme indice dans elements ou son nom tout simplement

86. V.3 Manipuler les propriétés d'un élément Par exemple, pour placer dans la zone de texte le mot "NOUVEAU", il faut écrire

87. V.4 Appeler une méthode d'un élément Pour donner le focus au champ texte du haut de cette page, il faut appeler la méthode focus() sur cet élément

88. V.5 Intégrer du JavaScript dans un événement Un événement est déclenché par le navigateur en réaction à une action de l'utilisateur ou d'un changement quelconque détecté L'événement le plus classique, appelé onClick, est… le clic sur un bouton

89. V.5 Intégrer du JavaScript dans un événement Reprenons l'exemple précédent, et plaçons "NOUVEAU" dans la zone de texte du formulaire à l'aide d'un bouton

90. V.5 Intégrer du JavaScript dans un événement Dans le bouton, on a rajouté l'événement onClick qui reçoit le code JavaScript à exécuter lors du clic sur le bouton Le code javascript doit se mettre entre " ou entre ' Il faut faire très attention à alterner les " et ' On peut écrire onClick='alert("Bonjour")' ou onClick="alert('Bonjour')"

91. V.6 L'objet this Il est fastidieux d'accéder aux éléments de formulaire par toute la chaîne document.forms.elements Un objet JavaScript this permet de raccourcir ce chemin d'accès this représente l'objet JavaScript en cours d'utilisation

92. V.6 L'objet this exemple Quand un zone de texte reçoit l'attention (le focus), un message apparaît dans la barre de statut pour indiquer son nom; le message disparaît quand le champ perd le focus

93. V.6 L'objet this exemple Reprenons encore une fois notre champ texte qui peut voir son contenu changer lors du clic sur un bouton Grâce à this.form, on peut accéder au formulaire de l'élément en cours Le chemin pour accéder à zonedetexte est ensuite classique

94. V.6 L'objet this exemple Un bouton sert principalement à déclencher une action JavaScript. Nous avons déjà vu dans le paragraphe Intégrer du JavaScript dans un événement comment détecter le click sur un bouton La propriété value contient le libellé du bouton. Comme pour une zone de texte, ce libellé est accessible checked est de type booléen Il contient true si l'objet est coché et false sinon.

95. V.7 Accéder auxzones de texte La principale action en JavaScript sur une zone de texte est de manipuler son contenu Imaginons un formulaire appelé myform qui possède un champ texte appelé myfield On accède au contenu du champ par Il faut bien penser à ajouter la propriété value pour accéder au contenu

96. V.8 Accéder auxradio-boutons

97. V.9 Accéder aux menus de sélection

98. V.9 Accéder auxmenus de sélection Pour récupérer l'indice la ligne sélectionnée this.form. liste.selectedIndex Pour récupérer le nombre de lignes this.form.liste.options.length Pour récupérer la valeur de la ligne sélectionnée

99. V.10 Accéder auxtextarea Une zone de texte multi-lignes a comme propriété principale value qui contient le texte de la zone Pour récupérer le contenu de la zone, on utilise document.nom. zone.value Afin de pouvoir traiter la chaîne résultante, il faut traduire l'ensemble de scaractères spéciaux (RC, #, LF, …) en un code compréhensible La fonction escape(car) retourne le code correspondant à car La fonction unescape(code) retourne le caractère correspondant Par exemple escape("#") retourne "%23" et unescape("%23") retourne "#"

100. VII.1 Conversion chaîne de caractères en nombres Les variables ne sont pas typées Mais il est utile de savoir transformer une chaîne en un entier ou un réel (nombre à virgule) Imaginons ce script

101. VII.2 L'objet Math La plupart des fonctions mathématiques sont des méthodes de l'objet Math Retourne une valeur entre 0 et 1

102. VII.3 L'objet Math et ses méthodes

103. VII.3 L'objet Math et ses méthodes

104. A.1 Introduction Nous allons voir de nombreuses astuces pour rendre un formulaire dynamique et attractif, en réaction aux événements générés par l'utilisateur Il est nécessaire de bien connaître le principe des formulaires HTML pour tirer partie de ces astuces.

105. A.2 Donner le focusà un élément Le premier champ texte a le focus au chargement de la page Cliquez sur les boutons pour donner le focus aux autres éléments La prise de focus est possible pour tous les types d'objets

106. A.2 Donner le focusà un élément

107. A.3 Changer le libellé

108. A.4 Autoriser un seul clic Accepte le premier clic sur le bouton et empêche les suivants Utile pour éviter de recevoir 3 fois le même message quand un visiteur bégaie sur le bouton "Envoyer" !

109. A.4 Autoriser un seul clic

110. A.5 Valider un formulaire Il est souvent utile de vérifier la saisie d'un formulaire avant de le valider L'idéal est de créer un bouton (de type "button" et pas "submit") qui appelle une fonction javascript qui contrôle la saisie et soumet ou non le formulaire

111. A.5 Valider un formulaire Voyons un exple de saisie d'un email

112. A.6 Vider un champà la prise de focus

113. A.7 Détecterla touche Entrée Utile dans les formulaires de recherche, où la plupart des utilisateurs tapent [Entrée] pour valider la recherche, sans cliquer sur le bouton "Rechercher" L'appui sur [Entrée] déclenche la soumission du formulaire qu'il est possible de détecter avec l'événement onSubmit

114. A.8 Empêcher la saisied'un champ Dès que la curseur souris arrive sur ce champ, il est enlevé Cela rend impossible la saisie ou la modification de son contenu L'astuce est d'utiliser l'événement onFocus qui détecte l'arrivée du curseur dans le champ

115. I.4 Tableaux En JavaScript, les tableaux sont des objets. Leurs déclarations sont identiques à celles vues précédemment.

116. I.4 Tableaux En JavaScript, le premier élément d'un tableau est indexé à 0 Il est possible de déclarer un tableau sans fixer sa dimension Alors la taille du tableau s'adapte au fur et à mesure à son contenu

117. I.4 Tableaux Pour accéder aux éléments du tableau, on utilise les crochets [ et ]

118. I.4 Tableaux Des méthodes associées à l'objet permettent d'effectuer des traitements ou d'accéder à des propriétés. On utilise la notation pointée pour appliquer une méthode sur un objet ou pour accéder à une propriété.

119. I.4 Tableaux : Exemple

120. I.4 Tableaux : Exemple

136. VI.1 Introduction JavaScript est un langage Objet Cette approche permet de développer des scritps réutilisables évolutifs et paramétrables Ce chapitre présente les principes généraux de la programmation objet

137. VI.2 Déclaration On utilise l'instruction new à laquelle on adjoint soit un type d'objet prédéfini (Date, Array, ...) soit une instruction qui permet de créer les propriétés de cet objet

138. VI.2 Déclaration : Exemple L'instruction Chien fait appel au mot this qui représente l'objet en cours (ici, mon_chien)

139. VI.2 Déclaration : Exemple La variable mon_chien est maintenant un objet de type chien qui contient les propriétés nom et race Naturellement, il est possible de rajouter des propriétés très facilement, sans se soucier des questions d'indices qu'imposerait un tableau du type

140. VI.2 Déclaration : Exemple

141. VI.3 L'utilisation des méthodes Lors de la création d'un objet, Il est également possible d'associer des méthodes à celui-ci La déclaration des méthodes se fait pendant la création de l'objet

142. VI.3 le with On remarque encore l'utilisation de this qui représente l'objet sur lequel est appliquée la méthode Il est possible aussi de déclarer la fonction avec le mot with

143. JavaScript et les cookies Chapitre VIII

144. VIII.1 À quoi servent-ils ? Les cookies sont très utilisés, par tous les sites commerciaux et par de plus en plus de sites personnels La raison est simple. Un cookie permet de stocker de manière permanente des informations sur le poste du visiteur, qui pourront être récupérées lors des futures visites Voyons quelques unes des principales informations stockées dans les cookies Le nombre de visites, la date de la dernière visite, Un identifiant et un mot de passe pour une reconnaissance automatique du visiteur. Une liste de mots-clés utilisés dans les moteurs de recherche pour cibler les publicités à afficher (Exemple : beaucoup de moteurs de recherche) Une liste de paramètres de préférences de navigation pour personnaliser la page présentée (Exemple : Mon Yahoo !) Des informations à transférer d'une page à l'autre du site.

145. VIII.2 Comment stockerles informations ? Le type d'informations à stocker n'a aucune influence sur le code Un cookie est un fichier de texte qui contient une chaîne de caractères représentant les informations

146. VIII.2 Comment stockerles informations ?

147. VIII.2 Comment stockerles informations ?

148. JavaScript et les PopUp Chapitre IX