Présentation de javascript

Un point d'entrée pour démarrer en javascript :
http://www.juggling.ch/gisin/
javascript/javascript.html

Le javascript permet de créer des pages web dynamiques et d'ajouter de l'interactivité entre l'utilisateur et la page web.

Voici quelques petits exemples :


Changement d'une image

Passez sur l'image suivante avec la souris :



Voici le code HTML qui permet l'effet de changer d'image quand on passe dessus avec la souris. Ce n'est pas encore du javascript, mais cela est utile en javascript.

<img name=cafewall  src="images/CafeWall0.gif"
   WIDTH=505  HEIGHT=332  BORDER=0  ALIGN=bottom
   onmouseover= "document.cafewall.src='images/CafeWall.gif'"
   onmouseout= "document.cafewall.src='images/CafeWall0.gif'">


Information concernant une image

Passez sur l'image suivante avec la souris :

    

Voici le code HTML qui permet d'afficher une autre image quand on passe sur une première image avec la souris.


<img src="images/bird.gif"
   WIDTH=224 HEIGHT=219 BORDER=0 ALIGN=bottom
   onmouseover="document.birdInfo.src = 'images/ShowBirdInfo.gif'"
   onmouseout= "document.birdInfo.src = 'images/HideBirdInfo.gif'">

<img name=birdInfo SRC="images/HideBirdInfo.gif"
   WIDTH=243 HEIGHT=50 BORDER=0 ALIGN=bottom >


Un petit gag

    
Voici le code HTML de ce gag.
<img name=Img1  src="images/ShowImg.gif"
   WIDTH=300 HEIGHT=47 BORDER=0 ALIGN=bottom
   onmouseover="document.Img1.src = 'images/HideImg.gif';
                              document.Img2.src = 'images/ShowImg.gif'">

<img name=Img2  src="images/HideImg.gif"
   WIDTH=300 HEIGHT=47 BORDER=0 ALIGN=bottom
   onmouseover="document.Img1.src = 'images/ShowImg.gif';
                              document.Img2.src = 'images/HideImg.gif'">

Autre codage de ce petit gag

    

Voici l'autre codage HTML de ce gag.
<img name=Img01  src="images/ShowImg.gif"
   WIDTH=300 HEIGHT=47 BORDER=0 ALIGN=bottom
   style="visibility:visible"
   onmouseover="document.Img01.style.visibility='hidden';
                              document.Img02.style.visibility='visible'">

<img name=Img02  src="images/HideImg.gif"
   WIDTH=300 HEIGHT=47 BORDER=0 ALIGN=bottom
   style="visibility:hidden"
   onmouseover="document.Img01.style.visibility='visible';
                              document.Img02.style.visibility='hidden'">


Pour finir, voici un vrai exemple de javascript


Ecrivez du texte ci-dessous :
Puis cliquez sur OK
Texte :       ou    OK 


Le code de cet exemple étant assez long (environ 70 lignes), il n'est pas mis ici. Vous pouvez le voir en allant dans le menu sous 'affichage', puis sous 'code source de la page' ou sous 'source'.


Si cela vous a intéressé, je vous rappelle un point d'entrée pour démarrer en javascript :
http://www.juggling.ch/gisin/
javascript/javascript.html



Plan du Site : index.html     presentation.html ( = http://www.juggling.ch/gisin/javascript/presentation.html )

Page mise à jour le 13 février 2010 par Bernard Gisin.     ( Envoyer un e-mail )
Hébergement par :
www.Infomaniak.ch