Remerciez-le!

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

Premier script à faire soi‐même Il faut bien débuter un jour, alors allons‐y !

Premier script à faire soi‐même Il faut bien débuter un jour, alors allons‐y ! Avec un script simplissime : alert("C'est mon 1er script"); Ce qui a pour effet d’afficher un message d’alerte : Votre éditeur HTML Pour écrire des scripts Javascript, vous devez utiliser votre éditeur HTML en mode Source ou HTML et non en mode Normal. Vous pouvez copier‐coller directement les codes de cette page dans votre éditeur HTML en mode HTML. Le script 1. Créez une page HTML vide. 2. Avant la balise </HEAD>, écrivez les balises d’ouverture et de fermeture d’un script Javascript : <script language="JavaScript"> <! Debut script // Fin script > </script> Les commentaires <! et // > sont indispensables afin que les navigateurs ne supportant pas Javascript ne retournent pas une erreur ("Debut script" et "Fin script" sont optionnels). 3. Intégrer votre instruction dans le script : <script language="JavaScript"> <! Debut script alert("C'est mon 1er script"); // Fin script > </script> Voici à quoi doit ressembler votre page HTML : <html> <head> <title>mon 1er script</title> <script language="JavaScript"> <! Debut script alert("C'est mon 1er script"); // Fin script > </script> </head> <body> </body> </html> 4. Afficher votre page dans un navigateur Voilà, vous voilà un de plus dans le monde de Javascript ! Ecrire dans la page HTML On va continuer dans la même veine, mais avec quelques difficultés. document.write("C'est mon 2ème script"); Ce qui a pour effet d’écrire dans la page Web : « C’est mon 2ème script » document.write simple Voici votre page Web avec le script : <html> <head> <title>mon 2ème script</title> <script language="JavaScript"> <! Debut script document.write("C'est mon 2ème script"); // Fin script > </script> </head> <body> </body> </html> Afficher‐la dans un navigateur et vous aurez une ligne simple qui affiche « C’est mon 2ème script » Intégrer des balises HTML Vous pouvez intégrer des balises HTML dans votre texte, ce qui vous permet de choisir la police, la couleur, de centrer... 1er essai Choisissons la police Arial en gras, une couleur bleue et de centrer le tout. Notre instruction document.write devient : document.write("<center><font face="Arial" color="#0000ff"><b>C'est mon 2ème script</b></font></center>"); (tout est sur la même ligne, mais pour des raisons d’affichage la ligne est coupée) Essayez d’intégrer cette instruction à la place de la précédente, ça donne une erreur :‐( Pourquoi ? document.write (comme alert, d’ailleurs) a comme argument une chaîne de caractères délimitée par des guillemets ("). Si vous rajoutez d’autres guillemets ("), Javascript ne comprend plus où commence et où finit la chaîne. Comment faire ? Remplacer les guillemets (") à l’intérieur de la chaîne par des apostrophes (’) : document.write("<center><font face='Arial' color='#0000ff'><b>C'est mon 2ème script</b></font></center>"); Et là, ça marche ! Ca donne la même chose que l’image en haut. Guillemets et apostrophes sont interchangeables document.write('<center><font face="Arial" color="#0000ff"><b>C'est mon 2ème script</b></font></center>'); On a interverti guillemets (") et apostrophes (’) et ‐ en théorie ‐ le résultat devrait être le même. En théorie, seulement, car il y a un problème avec l’apostrophe de "C’est". Pour remédier à ça on doit remplacer ’ par \’ : document.write('<center><font face="Arial" color="#0000ff"><b>C\'est mon 2ème script</b></font></center>'); Et là, on obtient le résultat précédent. De même, on aurait pu écrire : document.write("<center><font face=\"Arial\" color=\"#0000ff\"><b>C'est mon 2ème script</b></font></center>"); Règle usuelle pour les chaînes de caractères On utilise en général la 1ère forme : document.write("<center><font face='Arial' color='#0000ff'><b>C'est mon 2ème script</b></font></center>"); Soit des guillemets (") pour délimiter la chaîne et des apostrophes (’) à l’intérieur, surtout à cause des nombreuses apostrophes (’) du français. Mais sachez que les deux sont interchangeables. Aperçu de la page définitive : <html> <head> <title>mon 2ème script</title> <script language="JavaScript"> <! Debut script document.write("<center><font face='Arial' color='#0000ff'><b>C'est mon 1er script</b></font></center>"); // Fin script > </script> </head> <body> </body> </html> Comment modifier une image au passage de la souris On va continuer par quelque chose de très demandé, le survol d’image (ou rollover en anglais) ou comment modifier l’aspect d’une image au passage de la souris. C’est très simple ! Mais on va quand même y consacrer 2 leçons. Les images d’origine On va commencer par placer les 3 images par défaut dans notre page. C’est du HTML pur et vous pouvez faire ça en mode normal dans votre éditeur HTML : <img border="0" src="images/bleu_p.gif" width="38" height="20"> <img border="0" src="images/rouge_p.gif" width="38" height="20"> <img border="0" src="images/vert_p.gif" width="38" height="20"> Ce qui donne l’aspect des 3 boutons ci‐dessus (sans le survol) Avant de continuer ; vous devez avoir créé les autres images, celles qui seront visibles lorsque la souris passera dessus. Voici l’ensemble des images que vous pouvez copier‐coller si vous n’en avez pas d’autres sous la main... Copiez ces images ou celles de votre choix dans un sous‐répertoire "images". (images par défaut) (images de survol) Les objets‐images Une page HTML est constituée d’objets (voir la page "Objets d’une page HTML"). Chaque fois que vous ajoutez une image à votre page, il se crée un objet‐image supplémentaire. Ainsi lorsque vous écrivez en HTML : <img border="0" src="images/bleu_p.gif" width="38" height="20"> vous créez un objet image ayant les propriétés suivantes : bordure = 0 (border="0") source = "images/bleu_p.gif" (le fichier image) largeur = 38 (width="38") hauteur = 20 (height="20") Il existe encore d’autres propriétés qui n’ont pas été initialisées, mais on verra ça plus loin. Changer le fichier source de l’image Comme vous l’avez écrit, le fichier‐image associé à l’image "image1" est "images/bleu_p.gif", c’est ce que veut dire : <img name="image1" src="images/bleu_p.gif"> Si on change le src (le source) : <img name="image1" src="images/bleu_a.gif"> on aura la même image, mais en creux : C’est le principe du survol. Mais pour que ça fonctionne en passant la souris, il faut indiquer quel événement déclenchera ce survol. Les événements onMouseOver et onMouseOut [1] Il existe 2 événements : onMouseOver (réagit au passage de la souris sur un objet) et onMouseOut (réagit lorsque la souris quitte un objet). Lorsqu’on écrit onMouseOver="this.src = 'images/bleu_a.gif'" cela a pour effet d’afficher l’image "bleu_a.gif" lorsque la souris passe sur l’image Et : onMouseOut="this.src = 'images/bleu_p.gif'" a pour effet de réafficher l’image "bleu_p.gif" lorsque la souris quitte l’image. this Ca signifie « ceci » en anglais, et désigne l’objet en cours. Si vous écrivez l’instruction précédente telle quelle, le navigateur pensera que « this » représente la page, et ne fera rien, car l’objet « document » (la page) n’a pas d’attribut « src ». Par contre, ici « this » est dans l’objet image, et « this.src » désigne le fichier source de cet objet image : <img src="images/bleu_p.gif" border="0" width="38" height="20" onMouseover="this.src='images/bleu_a.gif'" onMouseout="this.src='images/bleu_p.gif'"> donnera ceci : Le code complet pour les 3 boutons Ce code est à écrire en l’état dans votre page HTML (donc pas dans un script Javascript) : <img src="images/bleu_p.gif" border="0" width="38" height="20" onMouseover="this.src='images/bleu_a.gif'" onMouseout="this.src='images/bleu_p.gif'"> <img src="images/rouge_p.gif" border="0" width="38" height="20" onMouseover="this.src='images/rouge_a.gif'" onMouseout="this.src='images/rouge_p.gif'"> <img src="images/vert_p.gif" border="0" width="38" height="20" onMouseover="this.src='images/vert_a.gif'" onMouseout="this.src='images/vert_p.gif'"> ce qui donne : Ca ne fonctionne pas avec Netscape 4 Ce code fonctionne sous Internet Explorer 4/5/6+, sous Netscape 6/7+, sous Mozilla 1+, mais pas sous Netscape 4 ou Internet explorer 3. On verra comment faire, dans le prochain article. Netscape 4 n’accepte pas d’événement onMouseOver ou onMouseOut dans les images. Donc on va faire autrement. Et les versions 3 de Netscape et d’Internet Explorer n’acceptent pas d’objets image, donc de toute façon, le survol ne fonctionnera jamais avec ces navigateurs, qui se font de plus en plus rares. Notes : [1] Ces événements font partie non de Javascript, mais du DOM (Document Object Model), qui, contrairement à Javascript, n’est pas sensible à la casse. Ce qui veut dire que vous pouvez écrire « onmouseover » ou « OnMouseOver » ou « ONMOUSEOVER », vous obtiendrez le même résultat. Comment réaliser un survol d’image avec la compatibilité Netscape 4 Netscape 4 n’accepte pas les événements onMouseOver et onMouseOut dans les objets image. Par contre, ils fonctionnent dans un lien. On va créer une fonction Javascript, qui marchera pour toutes les images à survol, quelque soit la version du navigateur (les versions 3 de IE et Netscape ne verront pas ce survol, et les images seront fixes). Toujours nos 3 boutons : onMouseOver et onMouseOut dans un lien Ces événements seront intégrés dans le lien <a href=...>...</a>, au lieu de les mettre dans l’image. Mais le code this.src = ... ne fonctionnera plus, puisque ici « this » représente le lien et un lien n’a pas d’attribut « src ». Il faut indiquer à la page quel objet va avoir son source modifier. Pour ça il faut donner un nom aux images. Nommer les images Pour nommer les images, on utilise l’attribut « name », attribut qu’on verra aussi dans toutes sortes d’objets. <img name="image1" src="images/bleu_p.gif" border="0" width="38" height="20"> Et pour modifier son source, on écrira : document.images["image1"].src = "images/bleu_p.gif"; où document.images est la collection des images de la page, et document.images["image1"] représente l’objet image du bouton bleu. Fonction de survol On va créer une fonction Javascript spéciale, qui modifiera le source de tout objet image : <script language="JavaScript"> <! var rep = "images/"; function survol(Objet, Fichier) { if (!document.images) {} document.images[Objet].src = rep + Fichier; } //> uploads/s1/ java-script.pdf