Le Javascript
Comme je vous l’ai dit, cet article n’a pas pour but de vous apprendre le javascript, il y a de très bons sites pour ça. Je vais essayer de vous accompagner dans vos premiers pas.
D’abord un peu d’histoire !
Pour cela, je vais citer le très bon site Comment Ca marche ?
Javascript a été mis au point par Netscape en 1995. A l’origine, il se nommait LiveScript et était destiné à fournir un langage de script simple au navigateur Netscape Navigator 2. Il a à l’époque longtemps été critiqué pour son manque de sécurité, son développement peu poussé et l’absence de messages d’erreur explicites rendant dure son utilisation.
Le 4 décembre 1995, suite à une association avec le constructeur Sun, Netscape rebaptise son langage Javascript (un clin d’oeil au langage Java développé par Sun).
Donc, comme vous le voyez, Java et Javascript n’ont rien à voir. Juste pour votre culture générale, sachez que Java, c’est l’argot américain de “café” (Kawa en argot français). Ce nom lui vient du fait qu’il a été développé à la base pour une puce de domotique capable de contrôler entre autres une cafetière. Mais c’est pas le sujet de cet article…
Comme je l’ai dit, le javascript est interprété par le navigateur et il s’intègre très facilement à votre code HTML.
Mais pour cela, il faut indiquer au navigateur où commence le code Javascript et où il se termine. Il existe pour cela la balise <SCRIPT>.
| Exemple : |
<SCRIPT language=”Javascript”> votre code javascript </SCRIPT> |
Le passage en paramètre du langage de script (language=”Javascript”) est facultatif mais fortement conseillé, vous êtes donc priés de le mettre, ça mange pas de pain.
Ainsi, votre navigateur devrait reconnaître sans problème le script. Le problème, c’est que le Javascript étant interprété par le navigateur, tout dépend de l’équipement de vos visiteurs qui ont peut-être des navigateurs anciens qui ne supportent pas le Javascript ou alors une ancienne version. Il est donc recommandé d’adapter votre script à tous les cas de figures.
D’abord, on cache le script aux navigateurs qui ne connaissent pas le Javascript :
| Exemple : |
<SCRIPT language=”Javascript”> <!– votre code javascript //–> </SCRIPT> |
Ensuite, on indique quelle version de Javascript on utilise :
| Exemple : |
| <SCRIPT language=”Javascript1.2″> <!– votre code javascript //–> </SCRIPT> |
Dans ce cas, on indique qu’on utilise la version 1.2 de Javascript. Voici le tableau des compatibilités :
| Version de Javascript | Navigateurs |
| JavaScript 1.0 | Netscape Navigator 2.0, Internet Explorer 3.0 |
| JavaScript 1.1 | Netscape Navigator 3.0 |
| Javascript 1.2 | Netscape Navigator 4.0/4.05, Internet Explorer 4.0 |
| Javascript 1.3 | Netscape Navigator 4.06, Internet Explorer 5.0 |
| Javascript 1.4 | Netscape Navigator 6.0, Internet Explorer 5.5 |
| Javascript 1.5 | Netscape Navigator 6.0 |
Une autre chose à savoir à propos du Javascript, c’est qu’il est pseudo-orienté objet. Je ne vais pas expliquer ce terme un peu barbare pour les non programmeurs mais vous devez savoir que le Javascript utilise les événements (clic sur un lien, passage de la souris sur un lien, ect..) qu’il gère en temps réel et qu’il faut lui indiquer sur quelle partie de la page il doit travailler.
En pratique, ça veut dire que pour un même script, une portion de code peut se retrouver dans la partie HEAD de votre page, une autre portion dans la balise <BODY> et une troisième portion dans la partie BODY.
Comme un exemple vaut toutes les explications, je vais prendre le cas très concret d’une horloge en temps réel sur votre page. Pour cela, je vous invite à vous rendre sur cette page du site L’Editeur Javascript. Comme vous pouvez le voir, ce script requière l’insertion de code dans les 3 parties dont je vous est parlé de votre document HTML.
| Exemple : |
| <html> <head> <title>Horloge Javascript</title> <!– DEBUT DU SCRIPT –> <SCRIPT LANGUAGE=”JavaScript”> /* SCRIPT EDITE SUR L’EDITEUR JAVASCRIPT http://www.editeurjavascript.com */ function HeureCheck() { krucial = new Date; heure = krucial.getHours(); min = krucial.getMinutes(); sec = krucial.getSeconds(); jour = krucial.getDate(); mois = krucial.getMonth()+1; annee = krucial.getFullYear(); if (sec < 10) { sec0 = “0”; } else { sec0 = “”; } if (min < 10) { min0 = “0”; } else { min0 = “”; } if (heure < 10) { heure0 = “0”; } else { heure0 = “”; } DinaHeure = heure0 + heure + “:” + min0 + min + “:” + sec0 + sec; total = DinaHeure document.time.timebox.value = total; tempo = setTimeout(“HeureCheck()”, 1000) } </SCRIPT> <!– FIN DU SCRIPT –> </head> <body UnLoadOff=”clearTimeout(tempo)” onLoad=”HeureCheck()”> <!– DEBUT DU SCRIPT –> <!– SCRIPT EDITE SUR L’EDITEUR JAVASCRIPT http://www.editeurjavascript.com –> <FORM NAME=”time”><INPUT TYPE=”text” NAME=”timebox” SIZE=8></FORM> <!– FIN DU SCRIPT –> </body> </html> |
Voilà ce que ça donne avec en rouge les parties du script rajoutées à la page HTML (J’ai pris l’option avec juste l’heure pour avoir un script plus court ;o).
Et voilà, vous avez inséré un Javascript dans votre page en ne connaissant absolument rien à la programmation.
Une dernière petite chose. Sachez que lorsqu’un script est long, il est parfois possible de stocker votre code dans un fichier distinct de votre page HTML. Il s’agit de faire un fichier texte tout bête avec l’extention .js et que l’on appelle de la manière suivante :
| Exemple : |
| <SCRIPT language=’Javascript’ SRC=’http://site.com/javascript.js’></SCRIPT> |
Voilà ! Je n’irais pas plus loin en ce qui concerne le Javascript, je vous invite à visiter le site L’Editeur Javascript et la page concernant le Javascript sur Comment ça marche ? pour de plus amples informations et si la programmation vous tente.
Passons maintenant au PHP.
très bon article neuromancer, cela donne une bonne vue globale pour pourvoir entamer une page internet =o)
Vraiment super Neuromancer !
On en redemande… ;o)
très,très bon article ;o)… y a plus qu'a !
Juste pour dire que c'est un excellent tutorial!
LoooL, ct simple pourtant ! Ca fait chépa combien de temps que j'essaie de comprendre ce truc et j'ai jamais trouvé un site qui l'explik simplement. Sauf celui la ! Merki beau cou !! 😉
Félicitations pour tout (en particulier la partie php) !