Cette méthode renvoie true (si on clique sur oui) ou false (si on clique sur non, qu'on appuie sur la touche Echap ou qu'on ferme la fenêtre avec la croix en haut à droite).
Cette méthode renvoie la réponse de l'utilisateur, ou null (si on efface la réponse par défaut, qu'on appuie sur la touche Echap ou qu'on ferme la fenêtre avec la croix en haut à droite).
Vous remarquez la structure conditionnelle if .. else qui permet de vérifier la réponse et d'agir en conséquence.
Vous remarquez également le document.write("...") dont vous comprendrez le fonctionnement en le testant.
Travail à faire : testez chacune de ces trois méthodes.
Impossible de s'en sortir sans débogueur. Rien ne se passe à l'écran mais vous ne savez pas où est votre erreur ! De quoi perdre un temps fou.
Pour activer le débogueur Javascript sous FireFox, faites Outils -> Console d'erreurs (raccourci Ctrl-Shift-j).
Pour afficher les erreurs sous Internet Explorer, cochez : Options Internet -> Avancées -> rubrique Navigation -> Afficher une notification de chaque erreur de script.
document.write() : écrire directement dans le document. C'est peu utilisé car cela remplace souvent tout le contenu de la page par le nouveau contenu. On s'en servira surtout pour écrire le contenu d'une fenêtre pop-up.
.innerHTML : la méthode la plus couramment utilisé sera de modifier le contenu HTML d'une balise quelconque. Essayez l'exemple suivant :
Changer directement l'attribut d'une balise : en Javascript, on peut accéder en lecture et en écriture aux attributs des balises HTML. Par exemple, l'attribut src de la balise img va permettre de changer dynamiquement une image !
Remarquez le this, très utilisé dans les événements Javascript : puisque l'événement est dans une balise image, this désigne cette image. this.src désigne donc le chemin de l'image, qu'on modifie ici pour afficher une nouvelle image.
Mettre des guillemets à l'intérieur d'autres guillemets est quelque chose de délicat dans tous les langages de programmation. Par exemple, ceci ne marche pas :
"window.status = "a";" est incorrect.
Vous devez utiliser des apostrophes à la place des guillemets imbriqués :
"window.status='a';" est correct, ainsi que 'window.status="a";'
Vous pouvez également utiliser le caractère d'échappement "anti-slashe" pour "protéger" les guillemets imbriqués :
"window.status=\"a\";" est correct.
On a vu qu'en Javascript, on peut agir sur les balises HTML. Encore faut-il savoir les nommer ! Voici les différentes façons.
this : comme on l'a vu à l'étape précédente, dans toute gestion d'événement, this désignera la balise déclencheur de l'événement (en général body, img ou a, mais ce n'est pas exhaustif).
document.name (où name désigne le nom d'une balise HTML). Attention, ça ne marche pas avec toutes les balises (ça marche avec : a, applet, form, frame, img, input, iframe, map, meta, object, param, select, textarea). Par exemple :
document.getElementById("id") (où id désigne l'ID d'une balise HTML). Par exemple :
document.getElementByTagName("balise") : permet de parcourir toutes les balises identiques d'un document. Voici un exemple un peu complexe (il utilise beaucoup de choses nouvelles) qui permet de parcourir toutes les images :
window.onload = function () : on crée le traitement (function () ...) qui ne s'exécutera que lorsque le document aura fini de se charger (événement window.onload). Commencer trop tôt les traitements Javascript pose des problèmes car on manipule des objets que le navigateur ne connait pas encore (puisqu'il n'a pas forcément fini de les charger). Voici la technique qui permet de commencer le traitement au bon moment. C'est très proche de <body onload="traitement javascript;">, mais ça permet de faire des traitements plus longs.
document.getElementsByTagName("img").length : cela représente le nombre de balises img dans notre document (ici : 3).
for (i=0; i < document.getElementsByTagName("img").length ; i++) : c'est une boucle qui va faire varier un compteur i de 0 à 2.
document.getElementsByTagName("img")[i] : représente l'image n°i (0, puis 1, puis 2) dans le document HTML
source = document.getElementsByTagName("img")[i].src; : on récupère donc l'attribut src de la balise n°i, puis on l'affiche à la ligne suivante.
document.images.length, document.images[0] : permet d'accéder successivement au nombre d'images, et à la première image. C'est très proche de l'écriture précédente. De la même façon que images, il existe : forms (pour les formulaires), elements (pour toutes les balises), etc.
Aux étapes précédentes, on a déjà vu deux événements :
Voici d'autres événements disponibles en Javascript :
onload : lorsque le document (la page Web) a fini de se charger.onunload : lorsqu'on quitte la page Web (par exemple, en cliquant sur un lien hypertexte)onabort : annulation du chargement de la page Web (par exemple avec Echap).onerror : en cas d'erreur JavaScript.onblur : lorsqu'on quitte un contrôle de formulaire.onchange : lorsqu'on quitte un contrôle de formulaire après avoir changé sa valeur (input, select, textarea)onmousedown : au moment où on commence à cliquer (donc, bien avant onclick qui s'exécute au relâchement du bouton).onmouseup : Lorsqu'on relâche le bouton. .onclick : lorsqu'on clique sur quelque chose (bloc, image, lien, contrôle de formulaire, etc.). plus précisément, lorsqu'on relâche le clic, parce que c'est là que Windows sait qu'on a fait un clic et non pas un drag-and-drop. Lorsqu'on fait un clic, la séquence d'événement suivants se produit : onmousedown, onmouseup, onclick.ondblclick : lorsqu'on double-clique sur quelque chose. La séquence d'événement suivants se produit : onmousedown, onmouseup, onclick, onmousedown, onmouseup, onclick, ondblclick.onmousemove : dès qu'on déplace le curseur de la souris.onmouseover : lorsque le curseur de la souris atteint un élément (texte ou image).onmouseout : lorsque la souris arrête de survoler un élément (texte ou image).onfocus : lorsque on arrive sur un contrôle de formulaire (par clic ou par la touche tabulation).onkeydown, onkeypress, onkeyup : événements clavier.onselect : lorsqu'on sélectionne du texte dans un contrôle de formulaire (balises input, textarea).onsubmit : lorsqu'on valide un formulaire (avant l'envoi au serveur, on peut même interrompre l'envoi avec Javascript, par exemple si le formulaire est mal rempli).onreset : lorsqu'on clique sur le bouton pour réinitialiser un formulaire (<input type='reset'>).Dans cette liste d'événement, quels sont les deux qui vont permettre de faire des "images survolées" ?
Tapez un code HTML + Javascript qui permette de constater l'ordre d'exécution des événements onClick et onMouseUp
Avec tout ce qu'on a vu jusqu'à présent, et avec un peu de persévérance, vous êtes en mesure de réaliser tout seul une image survolée. Il faut prendre en charge les deux bons événements, directement dans la balise img. Sur ces événements, vous changez d'image (donc vous modifiez l'attribut src de l'image).
Pour ça, utilisez les deux images suivantes :
Donnez votre réponse ici :
Le but est d'afficher un message dans la barre d'état lorsque l'utilisateur survole une image avec la souris. On va donc mettre en oeuvre :
onmouseover et onmouseout, appliqués à la balise <img>,Vous devez :
Collez ici le code qui réalise cela :
Voici une des principales applications de Javascript dans les pages Web : vérifier si un formulaire est bien rempli avant de l'envoyer au serveur Internet. C'est ce que vous allez essayer maintenant.
Voici un exemple de formulaire, qui lance une recherche dans Google (tapez-le et testez-le) :
De façon à pouvoir vérifier que le formulaire ai bien été rempli, grâce à une fonction Javascript, nous devons :
onsubmit.Il faut maintenant écrire (dans la section <head>...</head> du document HTML) la fonction Javascript qui réalise cette vérification :
Vous remarquez que :
document.monformulaire représente le formulaire.document.monformulaire.q représente la zone de texte contenue dans le formulaire.document.monformulaire.q.value représente la valeur saisie dans cette zone de texte.document.monformulaire.q.value.length renvoie le nombre de caractères de cette valeur.if (document.monformulaire.q.value.length == 0) teste si le nombre de caractère saisis est égal à zéro, c'est à dire si on n'a rien saisi.window.alert("...") : dans ce cas, on affiche un message d'avertissement à l'utilisateur.return false : cette fonction renvoie une valeur booléenne (true pour dire que le formulaire est bien rempli, false sinon).
Le formulaire ne sera envoyé au serveur Internet que si le résultat de cette fonction est true (c'est le fonctionnement propre à <form onsubmit=...>, mais aussi aux lien hypertexte <a href=...>) ;Travail à faire : testez l'exemple ci-dessus, vérifiez bien que vous arrivez à le faire marcher. Copiez ici le code complet et fonctionnel de l'exemple :
Travail à faire : Faites un formulaire avec trois zones de texte (nom, prénom, login). Le formulaire ne doit être envoyé au serveur que si les trois champs sont bien remplis. Basez-vous sur l'algorithme suivant :
Copiez ici le code HTML et Javascript qui réalise tout cela :
Cette fonction permet d'exécuter une fonction au bout d'un certain temps. Voici un premier exemple : on ouvre une fenêtre et on la ferme au bout de 5 secondes :
Au contraire, arrivé sur la page, on va ouvrir une nouvelle fenêtre au bout de 10 secondes :
Autre exemple, très utilisé (notamment pour les animations) : exécuter une fonction à intervalle régulier. Essayez la fonction suivante, qui s'appelle elle-même chaque seconde (tout ceci est à taper dans l'en-tête de la page HTML, entre les balises <HEAD>...</HEAD>) :
Explications :
var compteur=10; : on initialise une variable à 10. Elle sera décrémenté chaque seconde.Decompte(); : au démarrage de la page, on appelle une première fois la fonction Decompte().if (compteur==0) window.close(); : lorsque le compteur arrive à zéro, on ferme la fenêtre.window.status = "Ca va fermer dans " + compteur + " secondes."; : dans la barre d'état (attention, c'est assez discret), on affiche le compteur.compteur = compteur - 1; : on décrémente le compteur.window.setTimeout("Decompte();", 1000); : on indique que la fonction Decompte va se réexécuter à nouveau dans une seconde (1000 millisecondes).Travail à faire : faites fonctionner l'exemple ci-dessus.
Travail à faire : faites une page HTML dans laquelle la date (Date()) s'affiche chaque seconde. Utilisez ... .innerHTML = Date();
Pour demander confirmation quand l'internaute doit suivre un lien (utile lorsque ce lien doit supprimer une information, par exemple quand vous cliquez sur une croix rouge pour supprimer un commentaire en bas de cette page) :
Pour ouvrir une nouvelle fenêtre à partir de Javascript. Dans l'exemple suivant, la fenêtre affichera le contenu du fichier page.html, n'est pas redimensionnable, a une taille de 350x260 pixels. Vous remarquez le deuxième lien, pour refermer la fenêtre.
Paramétrage d'une fonction : regardez le code suivant qui déclare une fonction paramétrée (function AfficheBonjour(a_qui);), et qui appelle deux fois cette fonction :
Pour se rediriger vers une nouvelle page :