Programmation JavaScript cours inspiré du cours de R. Vivian

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

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS I. Présentation JavaScript est un langage de programmation complètement lié au langage HTML. 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 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. Le visiteur, par l'intermédiaire de son navigateur, charge le code des pages.

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS I. Présentation C'est le navigateur qui interprète le code HTML et JavaScript 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 L'interprétation dépend naturellement du type de navigateur utilisé et de sa version JavaScript est un langage objet et événementiel JavaScript est un langage objet et événementiel

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS I. Présentation Le développeur crée et utilise des objets ayant des propriétés et des méthodes. 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 L'interprète gérant votre page détecte automatiquement tous les événements déclenchés par le visiteur passage de souris passage de souris clic clic saisie clavier... saisie clavier... À ces événements sont associées des actions À 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é Par exemple onClick permet de spécifier des actions lors d'un clic de souris sur un objet donné

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS I.1 HTML et JavaScript Il y a plusieurs endroits dans une page web où il est possible d'intégrer du code 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, dans le corps de la page, en entête de page, en entête de page, dans un événement d'un objet de la page. dans un événement d'un objet de la page.

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS I.1 HTML et JavaScript Titre de page <!-- // Cache ce qui suit aux navigateurs ne supportant pas JavaScript //--> // Fin de la partie cachée <!-- // Cache ce qui suit aux navigateurs ne supportant pas JavaScript //--> // Fin de la partie cachée

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS I.2 Variables JavaScript utilise l'instruction var pour la déclaration. 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. 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. Par contre toute nouvelle variable doit être initialisée.

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS I.2 Variables : Exemple On remarque la présence du point virgule (;) à la fin de chaque instruction. 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. Il est possible de placer sur une même ligne plusieurs instructions séparées par des points virgules. var prenom_visiteur="Marcel"; var nom_visiteur="Dupond"; var age_visiteur=29;

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS I.2 Variables : Exemple Une variable déjà déclarée s'utilise ensuite normalement Une variable déjà déclarée s'utilise ensuite normalement var accueil="Bonjour " + prenom + " " + nom;

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS Exemple 1 var bonjour = "Bonjour !"; var question = "Comment allez vous "; var phrase = bonjour + " " + question; window.document.write( phrase, "aujourd'hui ?" ); I.2 Variables : Exemple

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS function saluer() { alert("Bonjour tout le monde !"); } Exécution immédiate alert("Bonjour tout le monde !"); Exécution sur événement onClick <INPUT type="button" name="Bouton1" value="Salut" onClick="saluer()"> Exécution sur protocole javascript: pour saluer I.2 Variables : Exemple

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS I.3 Objets Les éléments manipulés par JavaScript et affichés dans votre navigateur sont des objets Les éléments manipulés par JavaScript et affichés dans votre navigateur sont des objets Càd des éléments Càd des éléments Classés selon une hiérarchie pour pouvoir les désigner précisément 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 Auxquels on associe des propriétés et des méthodes

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS I.3 Objets Cette notion est importante mais nous allons en aborder que le strict nécessaire pour ce cours! Cette notion est importante mais nous allons en aborder que le strict nécessaire pour ce cours! Voyons cela sur un exemple concret Voyons cela sur un exemple concret Imaginez un un jardin dans lequel on trouve Imaginez un un jardin dans lequel on trouve une branche sur laquelle se trouve un nid une branche sur laquelle se trouve un nid une balançoire avec un trapèze, une corde et un autre nid une balançoire avec un trapèze, une corde et un autre nid Une salade (ce sont des maraîchers d'occaz) Une salade (ce sont des maraîchers d'occaz)

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS arbre branche feuille nid tronc racine Largeur 20 Color jaune Hauteur 4 salade balançoire jardin trapèze corde nid Largeur 15 Color maron Hauteur 6

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS I.3 Objets Le nid sur l'arbre est donc désigné par Le nid sur l'arbre est donc désigné par Contrairement au nid situé sur la balançoire 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 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 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... 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... jardin.arbre.branche.nid.couleur= vert; jardin.balançoire.nid jardin.arbre.branche.nid

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS I.3 Objets JavaScript intègre d'origine plusieurs type d'objets. JavaScript intègre d'origine plusieurs type d'objets. L'objet le plus grand est la fenêtre window L'objet le plus grand est la fenêtre window Dans la fenêtre s'affiche une page document Dans la fenêtre s'affiche une page document ATTENTION, le respect des majuscules/minuscules est indispensable et source de nombreuses erreurs. ATTENTION, le respect des majuscules/minuscules est indispensable et source de nombreuses erreurs.

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS Pour accéder à cet élément, on utilise la notation pointée window.document.form.textarea

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS I.3 Objets : Exemple Voyons en détail l'objet Date, très utile dans un environnement Internet. Voyons en détail l'objet Date, très utile dans un environnement Internet. La déclaration se fait toujours avec var. 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. Pour créer un objet, il faut utiliser le mot clé new suivi du type d'objet; ici date. // crée un objet date contenant la date du jour. var date_jour=new date(); // crée un objet date avec une date paramétrable. var une_date=new date(annee,mois- 1,jour,heure,min) ;

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS var date_jour = new Date(); window.document.write( date_jour ); I.3 Objets Affichage de la date

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS 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. 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.

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS I.5 Fonctions Pour déclarer une fonction on utilise le mot-clé function, suivi de son nom et des éventuels paramètres. Pour déclarer une fonction on utilise le mot-clé function, suivi de son nom et des éventuels paramètres. function ma_fonction(param1, param2) {... } function mon_autre_fonction() {... }

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS 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. 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 Remarque non précédée de var, une variable a une visibilité globale. 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. Précédée de var, une variable a une visibilité limitée à la fonction ou elle a été définie.

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS 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 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. Une fonction sans instruction return est une procédure.

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS I.5 Fonctions : Exemple function bonjour(prenom) { // déclaration de la procédure document.write ("Bonjour, comment vas-tu ",prenom,"? " ); } function volumeSphere(rayon) { // déclaration de fonctions return 4/3*Math.PI*Math.pow(rayon,3); } function calculerPrix(PrixUnitaire, NbArticles) { // Facturation return PrixUnitaire* NbArticles; } L’entête

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS I.5 Fonctions : Exemple // appel de la procédure bonjour("Toto") ; //appels des fonctions var montant=calculerPrix( 150, 4) ; document.write(“Tu dois “,montant,”F. ”); document.write( "Tu dois ", calculerPrix( 150, 4), "F. "); document.write( "Volume de la sphère unité : ", volumeSphere(1)," ? " );

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS II Structure d'un Script Le JavaScript a une structure de programmation proche du langage C; moins riche naturellement Le JavaScript a une structure de programmation proche du langage C; moins riche naturellement

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS II.1 Écrire un commentaire Indispensable les commentaires en programmation. Indispensable les commentaires en programmation. Pour mettre en commentaire une partie de code, jusqu'au prochain retour à la ligne Pour mettre en commentaire une partie de code, jusqu'au prochain retour à la ligne var age=25; // Ceci est en commentaire

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS II.1 Écrire un commentaire Pour mettre en commentaire plusieurs lignes de code Pour mettre en commentaire plusieurs lignes de code /* Ceci est en commentaire Ligne 1 Ligne 2 Dernière ligne */

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS II.2 Grouper les instructions Les instructions sont regroupées par les accolades { et }. Les instructions sont regroupées par les accolades { et }. Il doit y avoir autant d'accolades ouvertes que d'accolades fermées. Il doit y avoir autant d'accolades ouvertes que d'accolades fermées. Le groupement d'instructions est utile. Le groupement d'instructions est utile.

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS II.2 Grouper les instructions Il permet par exemple de regrouper les instructions d'une fonction Il permet par exemple de regrouper les instructions d'une fonction function somme(a,b) { var sum=a+b; return sum; }

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS 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) L'instruction if permet d'effectuer certaines actions uniquement quand un test donné a pour valeur true (  vrai : valeur booléenne)

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS II.3 Test Conditionnel Il y a 2 moyens d'utiliser if Il y a 2 moyens d'utiliser if Action à réaliser = une instruction Action à réaliser = une instruction Action = plusieurs instructions Action = plusieurs instructions // si l'âge est inf à 18 ans, un message est affiché et // le visiteur est redirigé vers la page mineur.php3. if (age<18) { alert("Vous devez être majeur"); window.location="mineur.php3"; } // Si l'âge est inf à 18 ans, un message est affiché if ( age < 18 ) alert( "Vous devez être majeur" );

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS 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 L'instruction if peut être complétée par l'instruction else pour gérer les actions à associer à la valeur false du test

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS II.3 Test Conditionnel Exemple var age=15; var wl = "mineur.php3"; if (age < 18) alert(" encore un peu jeune petit"); else { alert( "c'est bon tu peux entrer"); wl = "majeur.php3"; } window.location = wl ;

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS II.4 Boucle for Une boucle for répète un groupe d'instructions tant que la partie condition est vraie. 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 Une ou plusieurs variables définissent le nombre d'itérations for ( initialisation; condition; incrément ) { // Vos instructions }

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS II.4 Boucle for Ces variables sont initialisées au 1 er passage puis la condition est évaluée Ces variables sont initialisées au 1 er 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 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 En générale elles modifient les variables d'itération Après la partie incrément faite, la condition est réévaluée Après la partie incrément faite, la condition est réévaluée

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS 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 0 à 100 inclus par pas de 1 Faire une boucle pour i variant de 10 à 0 inclus par pas de -1 Faire une boucle pour i variant de 10 à 0 inclus par pas de -1 for (var i=0;i<=100;i=i+1) for (var i=10;i>0;i=i-1)

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS II.4 Boucle for : Exemple Voici une application mathématique. Voici une application mathématique. Il s'agit de calculer la somme des nombres de 1 à N. Il s'agit de calculer la somme des nombres de 1 à N. function somme(N) { var sum=0; for (var i=1;i<=N;i=i+1) { sum=sum+i; } alert("Somme de 1 à "+N+" = "+sum); }

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS II.4 Boucle for : Astuces Écrire a++ est équivalent à a=a+1 Écrire a++ est équivalent à a=a+1 Et 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 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 Vous trouverez donc souvent les boucles for avec cette syntaxe for(var i=0;i<100;i++)

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS II.4 Boucle for : Exemple for(var i=0;i<10;i++) { alert(" message " + i); }

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS III Chaînes de caractères Tous les langages de programmation prévoient une gestion des 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 JavaScript est particulièrement bien adapté pour le traitement des chaînes

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS III.1 Déclaration Pour déclarer une chaîne de caractères, vous pouvez utiliser les guillemets " ou l'apostrophe ' Pour déclarer une chaîne de caractères, vous pouvez utiliser les guillemets " ou l'apostrophe ' var chaine1="Bonjour"; var chaine2='Bonjour'; // Ces deux lignes ont le même effet

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS III.1 Déclaration Cela se corse quand il s'agit d'initialiser une chaîne avec un de ces caractères 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 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 Il faut veillez à ne pas fermer la chaîne de caractères avant sa fin normale pour éviter les erreurs JavaScript var chaine1="Bonjour l'ami"; var chaine2='Je vous dis "Bonjour " ';

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS Exemple de déclaration incorrecte Exemple de déclaration incorrecte Il existe aussi une autre solution Il existe aussi une autre solution La variable chaine1 contient Je lui dis "Bonjour l'ami". La variable chaine1 contient Je lui dis "Bonjour l'ami". Javascript a interprété \" comme un guillemet. Javascript a interprété \" comme un guillemet. III.1 Déclaration var chaine1="Je vous dis "Bonjour""; // ici, le " indique la fin de chaîne var chaine1="Je lui dis \"Bonjour l'ami\" ";

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS Une variable peut être transformée en une chaîne de caractères à tout moment 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 Il est possible de modifier dynamiquement le type de la variable A la fin de ce script, chaine est un nombre qui vaut ; pi est une chaîne qui contient " ". A la fin de ce script, chaine est un nombre qui vaut ; pi est une chaîne qui contient " ". III.1 Déclaration var chaine="azerty"; var pi= ; chaine=pi; pi=pi+"2654";

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS III.1 Déclaration La différence peut sembler sans importance. Il n'en est rien! 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 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 Quand une variable est de type chaîne de caractères, on peut lui appliquer les méthodes propres aux objets chaînes

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS III.2 Opérations L'opération de base est la concaténation de chaînes L'opération de base est la concaténation de chaînes Elle consiste à assembler deux chaînes en une 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 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 La variable chaine contient après ce script "Vive le JavaScript". La concaténation est une opération simple et très utile var chaine1="Vive le "; var chaine2="JavaScript"; var chaine=chaine1+chaine2;

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS 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. 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 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 chaine.length retourne le nombre de caractères, ici 6 caractères var chaine="azerty";

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS III.2 Opérations La méthode charAt(n) récupère le nième caractère La méthode charAt(n) récupère le nième caractère Attention, le premier caractère a comme indice 0 Attention, le premier caractère a comme indice 0 chaine.charAt(1) retourne "z" chaine.charAt(1) retourne "z" var chaine="azerty"

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS III.2 Opérations Il est utile de pouvoir extraire un morceau d'une chaîne 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 La question est de récupérer le jour, le mois et l'année dans 3 variables différentes var date="15/08/2000"; var jour = date.substring(0,2); var mois = date.substring(3,5); var annee = date.substring(6,10);

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS III.2 Opérations substring attend 2 paramètres substring attend 2 paramètres l'indice du premier caractère (inclus), l'indice du premier caractère (inclus), l'indice du dernier caractère (exclus). l'indice du dernier caractère (exclus). Si les deux paramètres sont inversés, javascript rétablit l'ordre logique 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 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. 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.

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS III.2 Opérations Deux méthodes permettent de retrouver une sous-chaîne d'une chaîne 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 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 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 Si la sous-chaîne n'est pas trouvé, lastindexof retourne -1 var dom = " var ext = domaine.substring(domaine.lastindexof("."));

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS 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 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 A la fin de ce script, maj contient CECI EST UN TEXTE et min contient ceci est un texte var chaine="Ceci est un texte"; var maj=chaine.toUpperCase(); var min=chaine.toLowerCase();

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS IV Formulaires Les formulaires sont la base des échanges entre le site et le visiteur. 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. JavaScript ne peut pas échanger d'information à partir de fichier texte ou de base de données.

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS IV Formulaires JavaScript associé aux formulaires permet JavaScript associé aux formulaires permet d'assister et de guider le visiteur, d'assister et de guider le visiteur, de contrôler la saisie, de contrôler la saisie, de faire des traitements ( calcul, manipulation de chaînes de caractères ), de faire des traitements ( calcul, manipulation de chaînes de caractères ), d'envoyer les résultats au serveur. d'envoyer les résultats au serveur.

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS IV Formulaires Pour intégrer des éléments de formulaire, il faut encadrer les balises par et. Pour intégrer des éléments de formulaire, il faut encadrer les balises par et. 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. 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.

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS IV Formulaires Création de formulaire Case à cocher Radio-bouton Text Password Textarea Bouton Bouton Reset Bouton Submit Valeur cachée

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS nameNom du formulaire actionAdresse du script de serveur à exécuter methodMéthode d'appel du script (get ou post) enctypeType d'encodage du formulaire targetDestination du retour du formulaire IV.1 La balise propriétés, méthodes, événements submit Déclenche l'action du formulaire reset Réinitialise avec les valeurs par défaut onSubmitDétecte la soumission du formulaire onResetDétecte la réinitialisation

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS 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 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 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 utilise le clavier pour fournir des infos Il sélectionne l'objet avec la souris Il sélectionne l'objet avec la souris Il spécifie des valeurs de 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 Cette notion d'événement est cruciale car elle est la base du fonctionnement des pgms InterNet

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS IV.2 L'élément input L'objet input est le plus utilisé de tous. L'objet input est le plus utilisé de tous. Il permet d'afficher Il permet d'afficher des champs texte, des champs texte, des boutons, des boutons, des radio-boutons, des radio-boutons, des cases à cocher, des cases à cocher, le champ caché, le champ caché, les boutons spéciaux reset et submit. les boutons spéciaux reset et submit.

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS nameNom du champ typetype du champ text, button, radio, checkbox, submit, reset valueLibellé texte defaultvalueValeur par défaut du champ (utile avec reset) sizeTaille du champ maxlengthTaille maximale du champ de type texte checkedCase à cocher ou radio bouton coché ou non disabledGrisé (modification impossible par le visiteur) readOnlyLecture seule classNom de la classe de style styleChaîne de caractères pour le style IV.2 L'élément input propriétés

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS focusDonne le focus (ou le curseur ou la main) blurEnlève le focus clickSimule un clic (sur un bouton) onFocusDétecte la prise de focus onBlurDétecte la perte de focus onClickDétecte le clic souris (sur un bouton) onChangeDétecte les changements IV.2 L'élément input méthodes et événements

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS IV.2.1 Les Zones de Textes Une zone de texte est définie par la balise input avec un type text Une zone de texte est définie par la balise input avec un type text Propriétés acceptées Propriétés acceptées name | value | defaultvalue | size | maxlength | disabled | readOnly | class | style name | value | defaultvalue | size | maxlength | disabled | readOnly | class | style Méthodes acceptées Méthodes acceptées focus, blur focus, blur Evénements acceptés Evénements acceptés onFocus, onBlur, onChange onFocus, onBlur, onChange

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS IV.2.2 Les Boutons Un bouton est défini par la balise input avec un type button Un bouton est défini par la balise input avec un type button Propriétés acceptées Propriétés acceptées name | value | defaultvalue | size | maxlength | disabled | readOnly | class | style name | value | defaultvalue | size | maxlength | disabled | readOnly | class | style Méthodes acceptées Méthodes acceptées focus | blur | click focus | blur | click Événements acceptés Événements acceptés onFocus | onBlur | onClick onFocus | onBlur | onClick L'événement le plus utilisé est onClick car il détecte le clic utilisateur. L'événement le plus utilisé est onClick car il détecte le clic utilisateur.

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS IV.2.3 Les Radio-Boutons Un radio-boutons est défini par la balise INPUT avec un type "radio" 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. 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. Ainsi, la sélection sera unique pour l'ensemble du groupe. Homme Femme

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS IV.2.3 Les Radio-Boutons Propriétés acceptées Propriétés acceptées name | value | checked | disabled | readOnly | class | style name | value | checked | disabled | readOnly | class | style Méthodes acceptées Méthodes acceptées focus | blur | click focus | blur | click Evénements acceptés Evénements acceptés onFocus | onBlur | onClick onFocus | onBlur | onClick

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS IV.2.4 les Cases à Cocher Une case à cocher est définie par la balise INPUT avec un type checkbox. 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. Contrairement aux cases à cocher, il n'y a pas d'exclusion entre les propositions.

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS IV.2.4 les Cases à Cocher Ici, Majeur et Etudiant sont décochés à l'origine. 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. Mais il est possible de n'être ni l'un, ni l'autre, ou l'un des deux. Majeur Etudiant

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS IV.2.4 les Cases à Cocher Propriétés acceptées Propriétés acceptées name | checked | disabled | readOnly | class | style name | checked | disabled | readOnly | class | style Méthodes acceptées Méthodes acceptées focus | blur | click focus | blur | click Événements acceptés Événements acceptés onFocus | onBlur | onClick onFocus | onBlur | onClick

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS IV.2.5 Le password Password se présente comme une zone de texte. Password se présente comme une zone de texte. Mais il affiche des * pour cacher le contenu du champ. Mais il affiche des * pour cacher le contenu du champ. Il est aussi impossible de copier le contenu (CTRL+C). Il est aussi impossible de copier le contenu (CTRL+C). Il est donc adapté à la saisie de mot de passe. Il est donc adapté à la saisie de mot de passe.

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS 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. 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. 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! Naturellement, le champ n'apparaît pas!

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS IV.2.6 La valeur cachée Propriétés acceptées Propriétés acceptées name | value | defaultvalue name | value | defaultvalue Naturellement, toutes les propriétés et les événements concernant son affichage et son apparence sont sans effet. 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. Remarque : Même s'il n'apparaît pas à l'écran, son contenu reste manipulable en JavaScript.

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS IV.2.7 Les boutons spéciaux Les boutons reset et submit existent bien! Les boutons reset et submit existent bien! Il faut les décrire (Je préconise de les éviter)??? Il faut les décrire (Je préconise de les éviter)??? Cochez moi !

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS IV.3 Les menus de sélection Les listes sont définies par les balises Les listes sont définies par les balises Cette balise définie la zone de la liste. Les lignes de contenu de la liste sont alimentées par les balises Cette balise définie la zone de la liste. Les lignes de contenu de la liste sont alimentées par les balises ligne 1 ligne 2 ligne 3 ligne 4

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS IV.3 Les menus de sélection Les listes peuvent se présenter de plusieurs manières, selon leur propriété. Les listes peuvent se présenter de plusieurs manières, selon leur propriété. Sur une ligne : size=1 Sur une ligne : size=1 Sur plusieurs lignes mono- sélection : size=4 Sur plusieurs lignes mono- sélection : size=4 Sur plusieurs lignes multi- sélection multiple size=4 Sur plusieurs lignes multi- sélection multiple size=4

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS IV.3 L'élément option L'objet option est assez simple L'objet option est assez simple Il peut avoir comme attributs Il peut avoir comme attributs name, value, selected name, value, selected selected force la sélection de cette occurrence dans la liste selected force la sélection de cette occurrence dans la liste

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS nameNom de la liste sizeNombre de lignes à afficher multipleSélection multiple autorisée disabledGrisage de la liste classClasse de feuille de style styleStyle de la liste IV.3 L'élément option propriétés, méthodes, événements addAjoute un ligne (objet OPTION) removeSupprime une ligne focusDonne le focus à la liste blurReprend le focus onChangeDétecte la sélection d'une nouvelle ligne onFocusDétecte la prise de focus onBlurDétecte la perte de focus

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS 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...) L'objet textarea est essentiellement utilisé pour permettre au visiteur de saisir un texte assez long (message, descriptif...) Ligne 1 Ligne 2...

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS IV.4 L'élément textarea propriétés, méthodes, événements nameNom de la zone rowsNombre de lignes colsNombre de colonnes disabledGrisage de la zone readOnlyLecture seule classClasse de feuille de style styleStyle de la liste focusDonne le focus à la zone blurReprend le focus onChangeDétecte le changement de contenu onScrollDétecte le défilement de la zone onFocusDétecte la prise de focus onFocusDétecte la perte de focus

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS IV.4 L'élément textarea proprié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 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 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 Un retour à la ligne dans le code source crée une nouvelle ligne dans la zone

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS V L'accès aux éléments Les éléments de formulaire sont des objets JavaScript Les éléments de formulaire sont des objets JavaScript Voyons comment accéder via JavaScript aux objets d'un formulaire Voyons comment accéder via JavaScript aux objets d'un formulaire Supposons le formulaire suivant Supposons le formulaire suivant <input type="text" name="champ1" value="Valeur initiale">

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS V L'accès aux éléments general champ1 Value = "valeur initiale" Name = "champ1" Type = text Pour accéder à un objet il faut suivre sa hiérarchie. On peut comparer cela à un jeu de poupées russes.

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS V.1 Accéder au formulaire Le formulaire est un élément de l'objet document Le formulaire est un élément de l'objet document Pour accéder au formulaire général, il faut écrire Pour accéder au formulaire général, il faut écrire forms est le tableau des formulaires de document forms est le tableau des formulaires de document On peut accéder à un formulaire par On peut accéder à un formulaire par son nom comme indice dans forms ou son nom comme indice dans forms ou son entier comme indice dans forms ou son entier comme indice dans forms ou Les indices des tableaux commence à 0 Les indices des tableaux commence à 0 son nom tout simplement son nom tout simplement document.forms[0] ou document.general

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS V.2 Accéder à un élément Pour accéder maintenant à la zone de texte, on écrit Pour accéder maintenant à la zone de texte, on écrit elements est le tableau de tous les éléments du formulaire elements est le tableau de tous les éléments du formulaire On peut accéder à un élément par On peut accéder à un élément par son nom comme indice dans elements ou son nom comme indice dans elements ou son entier comme indice dans elements ou son entier comme indice dans elements ou son nom tout simplement son nom tout simplement document.general.elements[0] ou document.general.champ1

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS 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 Par exemple, pour placer dans la zone de texte le mot "NOUVEAU", il faut écrire document.general.champ1.value="NOUVEAU";

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS 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 Pour donner le focus au champ texte du haut de cette page, il faut appeler la méthode focus() sur cet élément document.general. champ1.focus()

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS 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é 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 L'événement le plus classique, appelé onClick, est… le clic sur un bouton

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS 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 Reprenons l'exemple précédent, et plaçons "NOUVEAU" dans la zone de texte du formulaire à l'aide d'un bouton <input type="button" value="Changer la zone de texte“ onClick='document. CHG.ZT.value = “new" '>

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS 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 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 ' Le code javascript doit se mettre entre " ou entre ' Il faut faire très attention à alterner les " et ' Il faut faire très attention à alterner les " et ' On peut écrire onClick='alert("Bonjour")' ou onClick="alert('Bonjour')" On peut écrire onClick='alert("Bonjour")' ou onClick="alert('Bonjour')" onClick=' document. CHG. ZT.value = “Still new" '

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS V.6 L'objet this Il est fastidieux d'accéder aux éléments de formulaire par toute la chaîne document.forms.elemen ts Il est fastidieux d'accéder aux éléments de formulaire par toute la chaîne document.forms.elemen ts Un objet JavaScript this permet de raccourcir ce chemin d'accès Un objet JavaScript this permet de raccourcir ce chemin d'accès this représente l'objet JavaScript en cours d'utilisation this représente l'objet JavaScript en cours d'utilisation

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS 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 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 <input type="text" name="champtexte" value="contenu" onFocus="window.status=this.name" onBlur="window.status=''"> La variable window.status contient le message avec le nom du champ obtenu par this.name équivalent ici à document.formfocus.champtexte.name

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS 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 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 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 Le chemin pour accéder à zonedetexte est ensuite classique <input type="text" name="zonedetexte" value="Valeur initiale"> <input type="button" value="Changer le contenu" onClick=' this.form.zonedetexte.value="NOUVEAU" '>

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS V.6 L'objet this exemple Un bouton sert principalement à déclencher une action JavaScript. 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 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. La propriété value contient le libellé du bouton. Comme pour une zone de texte, ce libellé est accessible Comme pour une zone de texte, ce libellé est accessible checked est de type booléen checked est de type booléen – Il contient true si l'objet est coché et false sinon. Majeur Etudiant Majeur Etudiant <input type="button" value="Tester" onClick="alert('Majeur : ' + onClick="alert('Majeur : ' + this.form.majeur.checked + this.form.majeur.checked + '\nEtudiant : ' + '\nEtudiant : ' + this.form.etudiant.checked);" > this.form.etudiant.checked);" >

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS V.7 Accéder aux zones de texte La principale action en JavaScript sur une zone de texte est de manipuler son contenu 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 Imaginons un formulaire appelé myform qui possède un champ texte appelé myfield On accède au contenu du champ par On accède au contenu du champ par Il faut bien penser à ajouter la propriété value pour accéder au contenu Il faut bien penser à ajouter la propriété value pour accéder au contenu document. myform. myfield.value

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS V.8 Accéder aux radio-boutons WindXP Linux Autre // le bouton défini précédemment < input type="button" value="Tester“ onClick="testerRadio(this.form.os)"> // une fct de consultation du groupe 'radio' de radio-boutons function testerRadio(radio) { for (var i=0; i<radio.length;i++) { if (radio[i].checked) { alert("Système = "+radio[i].value) }

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS V.9 Accéder aux menus de sélection Libellé ligne 1 Libellé ligne 2 Libellé ligne 3 Libellé ligne 4 nameNom de la liste selectedIndexIndice de la ligne sélectionnée (ligne 1 : indice=0) optionsTableau des lignes lengthNombre de lignes valueValeur d'une ligne textLibellé d'une ligne

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS V.9 Accéder aux menus de sélection Pour récupérer l'indice la ligne sélectionnée this.form. liste.selectedIndex 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 le nombre de lignes this.form.liste.options.length Pour récupérer la valeur de la ligne sélectionnée Pour récupérer la valeur de la ligne sélectionnée this.form.liste.options[this.form.liste.selectedIndex].value

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS V.10 Accéder aux textarea Une zone de texte multi-lignes a comme propriété principale value qui contient le texte de la zone 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 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 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 escape(car) retourne le code correspondant à car La fonction unescape(code) retourne le caractère correspondant La fonction unescape(code) retourne le caractère correspondant Par exemple escape("#") retourne "%23" et unescape("%23") retourne "#" Par exemple escape("#") retourne "%23" et unescape("%23") retourne "#"

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS VII.1 Conversion chaîne de caractères en nombres Les variables ne sont pas typées 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) Mais il est utile de savoir transformer une chaîne en un entier ou un réel (nombre à virgule) Imaginons ce script Imaginons ce script var chaine="3.14"; var entier=parseInt(chaine); var reel=parseFloat(chaine);

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS VII.2 L'objet Math La plupart des fonctions mathématiques sont des méthodes de l'objet Math La plupart des fonctions mathématiques sont des méthodes de l'objet Math Retourne une valeur entre 0 et 1 Retourne une valeur entre 0 et 1 var nb=Math.random();

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS Math.abs(a)Retourne la valeur absolue de a Math.round(a)Retourne l'entier arrondi le plus proche de a Math.ceil(a)Retourne l'entier immédiatement supérieur (ou égal) à a Math.floor(a)Retourne l'entier immédiatement inférieur (ou égal) à a Math.sqrt(a)Retourne la racine carrée de a Math.log(a)Retourne le logarithme de a Math.ln(a)Retourne le logarithme népérien de a Math.exp(a)Retourne l'exponentielle de a Math.pow(a,b)Retourne a à la puissance b Math.min(a,b)Retourne le plus petit des paramètres a ou b Math.max(a,b)Retourne le plus grand des paramètres a ou b VII.3 L'objet Math et ses méthodes

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS VII.3 L'objet Math et ses méthodes Math.cos()Retourne le cosinus d'un angle en radians Math.sin()Retourne le sinus d'un angle en radians Math.tan()Retourne la tangente d'un angle en radians Math.acos()Retourne l'arc cosinus en radians Math.asin()Retourne l'arc sinus en radians Math.atan()Retourne l'arc tangente en radians

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS 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 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. Il est nécessaire de bien connaître le principe des formulaires HTML pour tirer partie de ces astuces.

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS A.2 Donner le focus à un élément Le premier champ texte a le focus au chargement de la page Le premier champ texte a le focus au chargement de la page Cliquez sur les boutons pour donner le focus aux autres éléments Cliquez sur les boutons pour donner le focus aux autres éléments La prise de focus est possible pour tous les types d'objets La prise de focus est possible pour tous les types d'objets

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS A.2 Donner le focus à un élément <INPUT type="button" value="suivant" onClick="this.form.champ2.focus()"> Ceci est la ligne n° 1 Ceci est la ligne n° 2 <INPUT type="button" value="suivant“ onClick="this.form.champ3.focus()">

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS A.3 Changer le libellé <INPUT type="button" name="bouton" value='Cliquez-moi !‘ onClick="this.value='Touché !'">

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS A.4 Autoriser un seul clic Accepte le premier clic sur le bouton et empêche les suivants 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" ! Utile pour éviter de recevoir 3 fois le même message quand un visiteur bégaie sur le bouton "Envoyer" !

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS A.4 Autoriser un seul clic var nbclic=0 // Initialisation à 0 du nombre de clic function CompteClic(formulaire) { // Fonction appelée par le bouton nbclic++; // nbclic+1 if (nbclic>1) { // Plus de 1 clic alert("Vous avez déjà cliqué"); } else { alert("Premier Clic."); }// 1 seul clic }

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS A.5 Valider un formulaire Il est souvent utile de vérifier la saisie d'un formulaire avant de le valider 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 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

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS A.5 Valider un formulaire Voyons un exple de saisie d'un Voyons un exple de saisie d'un function ValiderMail(formulaire) { if( formulaire.mail.value.indexOf( 0 ) < 0 ) { alert("Adresse mail saisie invalide.\nLe formulaire ne sera pas validé.") ; } else { alert("Formulaire validé.\nPour valider un formulaire : formulaire.submit()"); formulaire.submit(); // Pour valider le formulaire en javascript } <INPUT type="button" name="bouton" value="Valider" onClick="ValiderMail(this.form)">

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS A.6 Vider un champ à la prise de focus <INPUT type="texte" name="login" value='Votre login' onFocus='this.value=""; ' >

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS A.7 Détecter la 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" 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 L'appui sur [Entrée] déclenche la soumission du formulaire qu'il est possible de détecter avec l'événement onSubmit

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS A.8 Empêcher la saisie d'un champ Dès que la curseur souris arrive sur ce champ, il est enlevé Dès que la curseur souris arrive sur ce champ, il est enlevé Cela rend impossible la saisie ou la modification de son contenu 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 L'astuce est d'utiliser l'événement onFocus qui détecte l'arrivée du curseur dans le champ <INPUT type="text" value="Non modifiable" name="champ" onFocus="this.blur()"> <INPUT type="text" value="Non modifiable" name="champ" onFocus="this.form.champ2.focus()">

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS I.4 Tableaux En JavaScript, les tableaux sont des objets. En JavaScript, les tableaux sont des objets. Leurs déclarations sont identiques à celles vues précédemment. Leurs déclarations sont identiques à celles vues précédemment. // tableau de 10 éléments de type basique //(réel, entier, chaîne de caractères). var un_tableau = new Array( 10) ;

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS I.4 Tableaux En JavaScript, le premier élément d'un tableau est indexé à 0 En JavaScript, le premier élément d'un tableau est indexé à 0 Il est possible de déclarer un tableau sans fixer sa dimension 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 Alors la taille du tableau s'adapte au fur et à mesure à son contenu var un_autre_tableau=new Array;

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS I.4 Tableaux Pour accéder aux éléments du tableau, on utilise les crochets [ et ] Pour accéder aux éléments du tableau, on utilise les crochets [ et ] un_tableau[0]=10; un_tableau[9]=5; un_tableau[9]=un_tableau[0]-5 ;

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS I.4 Tableaux Des méthodes associées à l'objet permettent d'effectuer des traitements ou d'accéder à des propriétés. 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é. On utilise la notation pointée pour appliquer une méthode sur un objet ou pour accéder à une propriété. // Le nbre d'éléments de l'objet Array un_tableau var dimension = un_tableau.length ;

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS I.4 Tableaux : Exemple var un_tableau=new Array(10) ; var dimension=un_tableau.length; document.write(dimension);

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS I.4 Tableaux : Exemple Tableau des 4 saisons var Les4saisons = new Array( "printemps", "été", "automne", "hiver" ); document.write(" ", "Voici les 4 saisons : "); for (i=0 ; i<4 ; i++) { document.write(" ", Les4saisons[i] ); } document.write(" ");

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS JavaScript a une gestion particulière des tableaux. Un tableau est un objet Array. 3 Les tableaux Javascript 3.1 La déclaration de tableaux C'est quoi un tableau ? Les tableaux sont des éléments indispensables de la programmation. Un tableau est une structure ordonnée permettant de recevoir des informations. Les jours de la semaine peuvent être stockés en mémoire dans un tableau. Le tableau en mémoire peut être comparé au tableau réel: Indice ContenuLundiMardiMercrediJeudiVendrediSamediDimanche L'intérêt premier du tableau est de permettre un accès à une information par son indice. Par exemple, le premier élément de ce tableau contient "Lundi". Le paragraphe suivant montre comment remplir un tableau.

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS Déclaration de base Un tableau est un objet Array. Pour déclarer un tableau, il faut utiliser l'instruction new : (Var) tab=new Array; La variable tab a maintenant la structure d'un tableau. Elle possède les propriétés et les méthodes des tableaux et est prête à recevoir le contenu du tableau. En javascript, comme dans la plupart des langages de programmation, le premier élément du tableau commence à l'indice 0 (comme en C). C'est un peu gênant, mais on commence a avoir l’habitude. Pour alimenter le tableau avec les jours de la semaine, on écrit le code suivant : tab=new Array; tab[0]="Lundi"; tab[1]="Mardi"; tab[2]="Mercredi"; tab[3]="Jeudi"; tab[4]="Vendredi"; tab[5]="Samedi"; tab[6]="Dimanche"; var longueur = tab.length;

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS Maintenant, le tableau est initialisé avec les jours de la semaine. La variable longueur contient 7 : il y a 7 éléments dans le tableau de l'indice 0 à l'indice 6 (soit 7-1). Si on accède à un élément dont l'indice n'existe pas, javascript retourne undefined. Par exemple, tab[10] n'existe pas, cet élément vaut undefined. Exercice : Écrire un programme qui trie un tableau contenant des noms d’animaux. Il est possible de comparer les contenus de cellule par un simple test de supériorité comme sur des valeurs numériques.

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS Tri d'un tableau par une méthode peu astucieuse animaux= new Array(7) animaux[0] = "chien" animaux[1] = "autruche "; animaux[2] = "wapiti" animaux[3] = "dromadaire "; animaux[4] = "lynx" animaux[5] = "belette" ; animaux[6] = "lapin" document.write(" Tri d'un tableau ") for (i=0; i<6; i++) for (j=i+1; j<7; j++) if (animaux[j] < animaux[i]) { provisoire = animaux[i] animaux[i] = animaux[j] animaux[j] = provisoire } for (i=0; i<7;) document.write(animaux[i++] + " ")

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS 3.2 Les tableaux spéciaux Nous avons vu comment créer un tableau simple à une seule dimension. C'est la base de tous les tableaux possibles en javascript. D Dans certains cas, un indice numérique est moins pratique ou moins explicite qu'un indice sous forme de texte. Par exemple, imaginons que pour chaque jour de la semaine on ait une page spéciale à charger : - samedi et dimanche = weekend.html - mercredi = enfant.html - les autres jours = travail.html I l pourrait être intéressant d'avoir un tableau de ce type :

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS IndiceLundiMardiMercrediJeudiVendrediSamediDimanche Contenu travail enfant travail weekend Qui serait déclaré ainsi en javascript : var tab=new Array; tab["Lundi"]=" travail "; tab["Mardi"]=" travail "; tab["Mercredi"]="enfant"; tab["Jeudi"]=" travail "; tab["Vendredi"]=" travail "; tab["Samedi"]="weekend"; tab["Dimanche"]="weekend"; Grâce à cette déclaration un peu spéciale, on accède aux éléments du tableau par le jour de la semaine.

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS Les tableaux d'objets Pour l'instant, les tableaux que nous avons vus contenaient des valeurs basiques (chaînes de caractères ou nombres). Il est possible d'associer à un élément de tableau un objet javascript complexe. Imaginons un tableau contenant tous vos animaux domestiques. Un animal domestique est décrit par : - son nom - son espèce - son âge Voici la fonction qui construit un animal en mémoire : function Animal(un_nom,une_espece,un_age) { this.nom=un_nom; this.espece=une_espece; this.age=un_age; }

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS On peut créer les animaux en appelant la fonction Animal : var milou=new Animal("Milou","Chien","4") var titi=new Animal("Titi","Canari","1") var rominet=new Animal("Rominet","Chat","2") On a maintenant en mémoire 3 variables correspondant à nos 3 animaux: milou, titi et rominet Attention : il ne faut pas confondre les variables en minuscules avec le nom de l'animal qui est une chaîne de caractères et qui comporte une majuscule ! Il ne reste qu'à créer le tableau animaux : var animaux=new Array; animaux[0]=milou; animaux[1]=titi; animaux[2]=rominet;

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS Ici, le premier élément du tableau animaux contient un objet, la variable milou. Il ne faut pas mettre de guillemet autour de milou : ce n'est pas une chaîne de caractères, mais un nom de variable. Pour accéder à l'objet premier animal (indice 0), on écrit : animaux[0] Pour accéder à ses propriétés, on utilise la notion pointée : animaux[0].nom animaux[0].espece animaux[0].age

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS Petite zoologie portative function ANIMAL(genre, ordre, famille) { this.genre = genre; this.ordre = ordre; this.famille = famille } animal = new Array() animal["rat"] = new ANIMAL("Mammifères", "Rongeurs", "Omnivores") animal["porc"] = new ANIMAL("Mammifères", "Pachydermes", "Suidés") animal["chat"] = new ANIMAL("Mammifères", "Carnassiers", "Carnivores") animal["aigle"] = new ANIMAL("Oiseaux", "Rapaces", "Faucons") animal["carpe"] = new ANIMAL("Cyprins", "Malacoptérygiens", "Cyprinoïdes") animal["canard"]= new ANIMAL("Oiseaux", "Palmipèdes", "Lamellirostres") animal["ours"] = new ANIMAL("Mammifères", "Carnassiers", "Carnivores") animal["grenouille"] = new ANIMAL("Batraciens", "Anoures", "Rainettes") Gros exemple

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS function recherche(bete) { bete = bete.toLowerCase() // Pour mettre les caractères en minuscule if (typeof animal[bete] == "undefined") // On vérifie que l'on est bien dans le tableau { alert(" Animal non trouvé "); } // Affichage des caractéristiques document.forms[0].elements[2].value = animal[bete].genre document.forms[0].elements[3].value = animal[bete].ordre document.forms[0].elements[4].value = animal[bete].famille }

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS Petite zoologie portative Nom de l'animal : <INPUT type="button" VALUE="Afficher" onClick="recherche(document.forms[0].elements[0].value)"> Genre : Ordre : Famille :

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS Les tableaux à plusieurs dimensions On vient de voir qu'il est possible de créer des tableaux d'objets. Or un tableau est aussi un objet javascript Array. Il est donc possible de créer des tableaux de tableaux, ce qui correspond à des tableaux à plusieurs dimensions. Le nombre de dimensions d'un tableau n'est pas limité; mais nous allons traiter un exemple simple et concret à deux dimensions. Imaginons un jeu de morpion. La zone de jeu est un plateau de 3 par 3. Supposons cette grille à un moment donné de la partie : 210 2XO 1OX 0X Cette grille est bien un tableau à 2 dimensions. Décidons, par convention, d'indicer d'abord la colonne puis la ligne. Ainsi, la case[0,0] coin supérieur gauche est vide, la case [0,2] coin inférieur gauche contient "O", la case[2,0] coin supérieur droit contient "X".

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS Comment faire pour créer un tableau javascript de ce type ? On va créer un tableau de 3 colonnes ; une colonne étant un tableau de 3 cases. D'abord on crée les 3 colonnes : var col0=new Array; col0[0]=" "; col0[1]="X"; col0[2]="O"; var col1=new Array; col1[0]=" "; col1[1]="O"; col1[2]="X"; var col2=new Array; col2[0]="X"; col2[1]=" "; col2[2]=" "; Ensuite le tableau morpion : var morpion=new Array; morpion[0]=col0; morpion[1]=col1; morpion[2]=col2; Pour accéder à l'élément [0,2], on écrit simplement : morpion[0][2] Afficher l’exemple (très modeste) du morpion (v=vide)morpion

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS Un exemple utile Les tableaux sont utilisés dans la plupart des scripts du site. Voici quelques scripts simples qui montrent bien l'emploi des tableaux. Formatage de date Le formatage de dates est un bon exemple d'utilisation des tableaux. Le navigateur peut retourner le numéro du jour et du mois en cours. Avec ces indices, on peut aller rechercher le libellé en français du jour et du mois. var dt=new Date; var jour=dt.getDay( ); var nu=dt.getDate( ); var mois=dt.getMonth( ); Var tabjr=new Array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi"); var tabmois=new Array("Janvier","Février","Mars","Avril","Mai","Juin","Juillet", "Août","Septembre","Novembre","Décembre"); document.write("Nous sommes le "+tabjr[jour]+" "+nu+" "+tabmois[mois]); Voici le résultat de ce script : Nous sommes le date.date La méthode getDay() retourne le numéro du jour de la semaine, 0 pour le dimanche à 6 pour samedi. La méthode getMonth() retourne le numéro du mois, 0 pour Janvier à 11 pour Décembre. Ici, on affiche le jour et le mois correspondant aux indices retournés.

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS VI.1 Introduction JavaScript est un langage Objet JavaScript est un langage Objet Cette approche permet de développer des scritps réutilisables évolutifs et paramétrables 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 Ce chapitre présente les principes généraux de la programmation objet

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS VI.2 Déclaration On utilise l'instruction new à laquelle on adjoint On utilise l'instruction new à laquelle on adjoint soit un type d'objet prédéfini (Date, Array,...) 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 soit une instruction qui permet de créer les propriétés de cet objet

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS // l'objet Date est prédéfine au sein de l'interprète var fetnat=new Date(14;07;2003); // Chein est un type créé de toute pièce var mon_chien=new Chien("Milou","Fox Terrier"); function Chien(le_nom,la_race) { this.nom=le_nom; this.race=la_race; } VI.2 Déclaration : Exemple L'instruction Chien fait appel au mot this qui représente l'objet en cours (ici, mon_chien) L'instruction Chien fait appel au mot this qui représente l'objet en cours (ici, mon_chien)

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS 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 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 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

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS woua woua function Chien(le_nom,la_race) { this.nom=le_nom; this.race=la_race; } var mon_chien = new Chien("Milou","Fox Terrier"); document.write(mon_chien.nom + " est un "+mon_chien.race); VI.2 Déclaration : Exemple

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS 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 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 La déclaration des méthodes se fait pendant la création de l'objet function Chien(le_nom,la_race) { this.nom=le_nom; this.race=la_race; this.Afficher=AfficherChien; } function AfficherChien() { alert("Ce chien s'appelle " + this.nom + ".\n C'est un "+this.race+"."); }

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS VI.3 le with On remarque encore l'utilisation de this qui représente l'objet sur lequel est appliquée la méthode 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 Il est possible aussi de déclarer la fonction avec le mot with function AfficherChien() { with( this ) alert("Ce chien s'appelle " + this.nom + ".\nC'est un "+this.race+"."); }

JavaScript et les cookies Chapitre VIII

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS 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 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 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 Voyons quelques unes des principales informations stockées dans les cookies Le nombre de visites, la date de la dernière visite, Le nombre de visites, la date de la dernière visite, Un identifiant et un mot de passe pour une reconnaissance automatique du visiteur. 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 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 !) 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. Des informations à transférer d'une page à l'autre du site.

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS VIII.2 Comment stocker les informations ? Le type d'informations à stocker n'a aucune influence sur le code 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 Un cookie est un fichier de texte qui contient une chaîne de caractères représentant les informations

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS VIII.2 Comment stocker les informations ? function SetCookie (name, value) { // récupérer les paramètres var argv=SetCookie.arguments; var argc=SetCookie.arguments.length; var expires=(argc > 2) ? argv[2] : null; // date d'expir. var path=(argc > 3) ? argv[3] : null; // le chemin var domain=(argc > 4) ? argv[4] : null; // domain name var secure=(argc > 5) ? argv[5] : false; // protection du cookies document.cookie=name+"="+escape(value)+ ((expires==null) ? "" : ("&expires="+expires.toGMTString()))+ ((path==null) ? "" : ("&path="+path))+ ((domain==null) ? "" : ("&domain="+domain))+ ((secure==true) ? "&secure" : ""); }

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS VIII.2 Comment stocker les informations ? var MyPathname=location.pathname; var MyDomain=MyPathname.substring(0,pathname.lastIndexOf('/')) +'/'; var date_exp = new Date(); date_exp.setTime(date_exp.getTime()+(365*24*3600*1000)); // Ici on définit une durée de vie de 365 jours SetCookie("prenom","Arthur",date_exp,MyPatname,MyDomain);

JavaScript et les PopUp Chapitre IX

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS La valeur à stocker est associée à un nom de cookie. La date d'expiration permet de définir la longévité du cookie. Si elle est omise, le cookie est détruit à la fermeture du navigateur. Le path indique simplement d'où vient le cookie. Le nom de domaine permet d'identifier le cookie parmi tous ceux stockés sur la machine. La variable secure indique si l'accès au cookie est protégé. Donc pour stocker la valeur Arthur dans la variable prenom il suffit d'appeler la fonction comme ceci :

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS 8.3 Comment RECUPERER les informations ? Voyons un cookie qui contiendrait les informations suivantes : · prenom = Arthur · nb_visite = 3 Pour récupérer l'information prenom, il faut extraire, de la chaîne de caractères composant le cookie, le nom de la variable soit prenom. La valeur de prenom est la chaine de caractères située immédiatement après et séparée par ';' et par ' '. Voici le code des fonctions nécessaires à la récupération d'une information : function getCookieVal(offset) { var endstr=document.cookie.indexOf (";", offset); if (endstr==-1)endstr=document.cookie.length; return unescape(document.cookie.substring(offset, endstr)); }

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS function GetCookie (name) { var arg=name+"="; var alen=arg.length; var clen=document.cookie.length; var i=0; while (i<clen) { var j=i+alen; if (document.cookie.substring(i, j)==arg) return getCookieVal (j); i=document.cookie.indexOf(" ",i)+1; if (i==0) break;} return null; } Si la variable demandée n'est pas contenue dans le cookie, elle est considérée comme valant null. Pour récupérer la variable prenom, il suffit d'appeler la fonction : le_prenom=GetCookie("prenom");

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS 10.1 C'est quoi une popup ? Le mot popup peut être traduit par fenêtre surgissante. L'ouverture de cette fenêtre est déclenchée par un événement utilisateur (clic, ouverture de site, minuterie,...) via une seule ligne de code javascript. Un popup est ouvert grâce à la méthode (ou fonction) appelée sur l'objet window. Cette fonction attend 3 paramètres : window.open( page [,nom] [,options] ) 10 Les POPUP Les trois paramètres sont des chaînes de caractères. - page contient l'adresse de la page à afficher. - nom contient le nom du popup qui va être ouvert. Non obligatoire. - options est une chaîne de caractères contenant les options de paramétrage du popup. Non obligatoire. Les 2 derniers paramètres ne sont pas indispensables.

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS Pour ouvrir un popup sur un lien, voici la syntaxe HTML : Ouverture popup basique avec comme déclaration la fonction popup() : function popup(page) { window.open(page); } 10.2 Les options d'affichage Il est possible grâce au second paramètre d'affecter un nom au popup ouvert. Ainsi les autres popups seront ouverts dans le même popup. Cela évite d'envahir l'écran du visiteur avec de multiples fenêtres. Pour remettre le popup en premier plan, voir la page "Aller plus loin". Sans le paramètre nom, un nouveau popup est ouvert à chaque fois. Le dernier paramètre contient une chaîne d'options d'affichage. Chaque option est séparée par une virgule (à ne pas confondre avec la syntaxe des feuilles de style qui demande un point-virgule).

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS Voici la liste des options : PropriétésEffetsValeurs possibles directoriesAffichage de la barre de liensyes | no menubarAffichage de la barre de menuyes | no statusAffichage de la barre de statutyes | no locationAffichage de la zone d'adresseyes | no scrollbarsAffichage des barres de scrollingyes | no | auto resizableAutorise le redimensionnement du popupyes | no heightHauteur en pixelsnombre entier widthLargeur en pixelsnombre entier leftPosition horizontale en pixels sur l'écrannombre entier topPosition verticale en pixels sur l'écrannombre entier fullscreenPopup en plein écran (version 5 et +)yes | no

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS Quelques exemples de combinaisons d'options : Position fixe en haut à gauche OuvrirPopup('popup.html','','top=10,left=10') Popup minimaliste Aucune barre de menu, non redimensionnable, taille fixe OuvrirPopup('popup.html', '', 'resizable=no, location=no, width=200, height=100, menubar=no, status=no, scrollbars=no, menubar=no') Popup fullscreen Page en plein ecran (version 5 et +). Faire un ALT F4 pour s'en sortir OuvrirPopup('popup.html','','fullscreen=yes') Voici la fonction javascript qui ouvre un popup pour tous ces exemples : function OuvrirPopup(page,nom,option) { window.open(page,nom,option); }

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS 10.3 Utilisation des popups Popup à l'ouverture/Fermeture d'une page Pour ouvrir un popup à l'ouverture d'une page, ajoutez dans la balise l'événement : De la même manière, pour ouvrir un popup à la fermeture de la page, remplacer l'événement onload par onunload. Créer un popup tout en javascript Il est possible de créer un popup sans utiliser une page pré-existante mais simplement en la générant depuis la page appelante, via du javascript.

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS Fermer une popup Il peut être utile de pouvoir fermer une popup depuis la page qui l'a généré. Pour cela, il est nécessaire de conserver dans une variable globale le resultat de l'ouverture du popup par window.open. Le code javascript est ici : var w; function Ouvrir() { w=window.open("popup.html","pop1","width=200,height=200"); } function Fermer() { if (w.document) { w.close(); } } La première ligne var w déclare la variable globale. Dans la fonction Ouvrir, w reçoit le résultat de window.open. Dans la fonction Fermer, on teste si w est bien un objet de type window; si oui, on ferme le popup avec la méthode close().

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS Popups multiples ayant le même nom Vous avez peut être remarqué qu'une popup qui s'ouvre dans un popup de même nom déjà ouvert reste caché. Voici la solution pour replacer la popup en premier plan. Voici le code source : function OuvrirVisible() { var w=window.open("popup.html","pop1","width=200,height=200"); w.document.close(); w.focus(); } Le principe est donc de rendre le focus à la fenêtre après son ouverture.

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS Centrer une popup Voici comment centrer un popup : javascript:PopupCentrer('popup.html',300,150,'menubar=no,status=no') Popup toujours visible Pour forcer le popup a rester toujours visible, il suffit d'ajouter ce code dans la balise de la page du popup : onblur="window.focus()" La seule solution pour s'en débarrasser est de le fermer complètement. javascript:OuvrirPopup('popup2.html','','width=200,height=200,menubar=no,status=no')

Intro à JS Intro à JS Structure d’un script Structure d’un script Les chaînes de caractères Les chaînes de caractères Les formulaires Les formulaires Accéder aux éléments Accéder aux éléments JS et les maths JS et les maths Annexes Annexes Trucs et astuces des formulaires Trucs et astuces des formulaires Les tableaux Les tableaux Le modèle objet JS Le modèle objet JS Communiquer avec la fenêtre appelante Depuis une popup il est possible d'atteindre l'objet window de la fenêtre appelante grâce à window.opener. On peut ainsi modifier le contenu de la fenêtre appelante ou récupérer des informations de la popup pour les replacer dans un formulaire de la fenêtre appelante. Cet exemple permet de placer dans le champ choix du formulaire origine : OuvrirPopup('popchoix.html','popupchoix','width=300,height=150,menubar=no,status=no') Avec dans la page popchoix : function Reporter(l) { var choix=l.options[l.options.selectedIndex].value; window.opener.document.forms["origine"].elements["choix"].value=choix; }