Accueil du site > Langages > JavaScript

Cours sur Javascript

vendredi 12 juin 2009 par Webman

SOMMAIRE

I. Généralités
II. Le langage
III. Quelques scripts pratiques
IV. Versions, compatibilité,...
V. Sécurité
VI. JavaScript et...
VII. Ressources : url’s

I. Généralités

I.1. Qu’est-ce-que JavaScript ?

C’est un langage de scripts orienté-objet qui permet d’écrire des scripts au sein de vos pages html. Un script "vit" dans un document html. L’interaction html<->JavaScript se fait via une série d’objets : documents, formes, champs d’édition, boutons,... Ces objets sont organisés en hiérarchie et on leur attribue une liste de propriétés, méthodes & évènements. Le JavaScript est développé par Netscape Communications Corp.

I.2. Que faut-il pour débuter ? Rien de plus que votre browser compatible (confer 4.) et un éditeur texte (le même que celui que vous utilisez pour écrire vos pages html). En effet, les JavaScripts s’exécutent au sein de la fenêtre de votre navigateur web. Il n’est donc pas possible de développer, comme cela est possible en java, des applications indépendantes.

I.3. Existe-t’il des outils/programmes pour écrire des JavaScripts ?

Bien que cela ne soit pas indispensable, il existe des outils permettant d’écrire des scripts qui seront intégrés à vos pages ; par exemple Netscape Visual JavaScript 1.0. WebExpert, éditeur de pages html en français, intègre une série de JavaScripts "prêts-à-l’emploi".

II. Le langage

II.1. Où dois-je insérer mes JavaScripts ?

Ils peuvent être inclus au sein de votre page html ou stockés dans un fichier texte séparé (extension .js en général).

Il existe 2 moyens pour insérer vos scripts dans la page HTML :
A- les balises :
<SCRIPT></SCRIPT>
B- les événements :

On place généralement les balises

Mais vous pouvez également les inclure dans le corps (entre les balises et , à condition de veiller à ce que le script définissant les fonctions soit placé avant les appels à ces fonctions.

Pour placer un Javascript dans un fichier stocké sur le serveur, placez les balises : <SCRIPT language="JavaScript" src="fichier.js"></SCRIPT> dans l’en-tête de la page HTML.

L’utilisation des événements est traitée un peu plus loin.

II.2. Quelles sont les caractéristiques syntaxique de base ?

La syntaxe s’apparente à celle du Java, et donc du C & C++. Le JavaScript intègre : - les instructions de répétitions : while, for ; - les instructions de choix : if, else. On dispose des fonctions mathématiques, de chaînes de caractères et de manipulation de dates. Il est possible de construire ses propres fonctions.

Les commandes sont séparées par un point-virgule ;
Attention au respect de la casse. Effectivement, document.robert est différent de document.ROBERT
La structure des fonctions est une structure de block ; on utilise en début de fonction et à la fin
Le premier élément d’un tableau déclaré est l’élément 0 ; ie. tab[0]
Pour comparer deux éléments, on utilise ==
Pour affecter une valeur à un élément, on utilise =
Les opérateurs logiques : && (AND) ; || (OR) ; ! (NOT)
Une chaîne de caractères (string) se met entre ’ ou "
// début d’un commentaire se terminant à la fin de la ligne
Le nom d’une variable doit commencer par une lettre, mais peut contenir des chiffres et _
Une variable déclarée avec var est une variable locale à la fonction dans laquelle elle est déclarée. Par défaut, les variables sont globales.

II.3. Quelle est la structure d’une fonction ?

function nom (paramètre)

{

        instructions;

}

La fonction est appelée via nom(paramètre)
Si une fonction contient plusieurs paramètres, ils sont séparés par une virgule dans la déclaration et dans l’appel de la fonction.
Si on veut retourner une valeur qui a été "calculée" par cette fonction, inscrire return var ; Et pour appeler la fonction qui donnera une valeur à var : var = nom(paramètre)

II.4. Quelles sont les instructions de choix & de répétitions ?

instruction de choix :

if (expression1) 

{

        instructions1;

} else

{

        instructions2;

}

"Si l’expression1 est vérifiée effectuer instructions1, sinon effectuer instructions2"

instructions de répétition :

while (expression1) 

{

        instructions;

}

"Tant que l’expression1 est vraie effectuer instructions"

for (expression1;expression2;expression3) 

{

        instructions;

}

"Pour l’expression1 initialisée, mise à jour à chaque itération par l’expression3 et vérifiant l’expression2, effectuer instructions"

interruption & saut d’itération :

break ; "Interrompt la boucle"

continue ; "Passe à l’itération suivante de la boucle"

II.5. Quels sont les évènements JavaScript ?

On peut attribuer à un objet (élément de formulaire, image, fenêtre...) les évènements suivants. Leur intitulé est assez explicite, toutefois, pour plus d’informations : http://w3c.org/TR/WD-html40/interact/scripts.html (19.1.4 intrinsic events)

onchange="x;" onclick="x;" onblur="x;"

onfocus="x;" ondblclick="x;" onkeydown="x;"

onkeypress="x;" onkeyup="x;" onmousedown="x;"

onmousemove="x;" onmouseover="x;" onmouseout="x;"

onmouseup="x;" onreset="x;" onselect="x;"

onSubmit="x;" onload="x;" onunload="x;"

où x est un code JavaScript ou un appel à une fonction JavaScript.

II.6. Comment modifier la valeur d’un objet de la page ?

La syntaxe est similaire à celle des langages de programmation orienté-objet (Delphi,...) Ainsi, soit le formulaire nommé formulaire1 et la textarea nommée champtexte dans laquelle vous voulez écrire Robert :

document.formulaire1.champtexte.value='Robert';

III. Quelques scripts pratiques

III.1. Comment détecter le browser utilisé ?

<SCRIPT type="text/javascript">

<!--        

        browserName = navigator.appName;

        browserVer = navigator.appVersion;

//-->

</SCRIPT>

navigator.appName est une chaîne dont la valeur sera "Netscape" ou "Microsoft Internet Explorer".

La chaîne navigator.appVersion donne la version de browser ainsi que le système d’exploitation. Pour obtenir la version du browser uniquement :

parseFloat(navigator.appVersion)

III.2. Comment détecter la résolution d’écran ?

<SCRIPT type="text/javascript">

<!--

if (navigator.javaEnabled())

{

        var toolkit= java.awt.Toolkit.getDefaultToolkit();

        var screen_size = toolkit.getScreenSize(); 

        width = screen_size.width; 

        height = screen_size.height;

}

//-->

</SCRIPT>

Dans le code html on peut utiliser les variables width et height : Ici la taille horizontale de l’image est diminuée de 50 pixels par rapport à la résolution de l’écran.

III.3. Comment détecter la date, l’heure et le fuseau horaire ?

<SCRIPT type="text/javascript">

<!--

        today = new Date(); /* date heure fuseau horaire */

        var heure = today.getHours();

        var minute = today.getMinutes();

        var seconde = today.getSeconds();

        var mois = today.getMonth(); /* janvier=0 ,... décembre=11 */

        var journum = today.getDate();

        var jour = today.getDay(); /* dim=0 , lun=1, mar=2, mer=3, jeu=4,ven=5,sam=6 */

//-->

</SCRIPT>

III.4. Comment ouvrir et fermer une fenêtre du browser ?

<SCRIPT type="text/javascript">

<!--

        function wopen(page)

        {

            window.open(page+'.htm','nom','scrollbars=1,location=1,toolbar=1,

            directories=1,menubar=1,status=1,scrollbars=1,resizable=1,

            width=800,height=600');

        }

//-->

</SCRIPT>

Dans le texte html :

<a href="nomdelapage.htm" OnClick="wopen('nomdelapage')">

Dans ce cas, si le browser utilisé par le visiteur ne supporte pas le javascript, la page sera affichée dans la fenêtre courante. Les valeurs des "attributs" sont 0 (false) et 1 (true) ; height est la hauteur en pixels de la fenêtre, et width la largeur.

<SCRIPT type="text/javascript">

<!--

function wclose()

{

        window.close();

}

//-->

</SCRIPT>

Dans le texte html de la page de la fenêtre à fermer :

<a href="javascript:wclose()">

III.5. Comment réaliser un Rollover ? (JavaScript 1.1)

<SCRIPT type="text/javascript">

<!--

if (version == "ok") 

{

image1on = new Image;

image1on.src = "image2.gif";



 function on(imgName)

 {

         if (version == "ok") 

         {

                 imgOn = eval(imgName + "on.src");

                 document [imgName].src = imgOn;

         }

 }

}

//-->

</SCRIPT>

La condition version == "ok" vérifie que le browser supporte les objets images. Pour ce faire, il faut faire une détection du browser, qui doit être compatible JavaScript1.1 (voir 4. Versions, compatibilité).

Dans le texte de la page html, si l’image1.gif doit être remplaçée par l’image2.gif lorsque le curseur passe sur l’image :

<A HREF="page.htm" OnMouseover="on('image1')"><IMG SRC="image1.gif" NAME="image1"></A>

III.6. Comment empêcher l’envoi d’un formulaire si celui-ci n’est pas correctement validé ?

Chaque formulaire possède l’événement onSubmit. Si on lui retourne true, le formulaire est envoyé comme d’habitude, par contre si on lui retourne false, il annule la demande d’envoi et attends une nouvelle validation.

<FORM onSubmit="return (document.forms[0].txt.value!='')>

 <INPUT TYPE="text NAME="txt">

 <INPUT TYPE="submit">

</FORM>

III.7. Comment empêcher un lien d’être activé ?

Chaque lien possède l’événement onClick. Si on lui retourne true, le lien est suivi comme d’habitude, par contre si on lui retourne false, il redonne la main sans charger le nouveau document.

<A HREF="page1.htm" onClick="return true">On y va</A>

<A HREF="page1.htm" onClick="return false">On y va pas</A>

III.8. Puis-je tout le temps utiliser cette technique ?

Oui, pour tous les événements existants, le return true est considéré par défaut et vous pouvez lui retourné false pour qu’il annule la demande d’ordre sauf pour la barre de status et onMouseOver où return false ou l’absence de return implique que le browser fait comme d’habitude et return true implique que le browser ignore la barre de status et laisse mettre le texte.

IV. Versions, compatibilité

IV.1. Quels sont les browsers qui interprètent le JavaScript ?

JavaScript 1.0 : Navigator 2.x, Internet explorer 3.x
JavaScript 1.1 : Navigator 3.x, Internet explorer 4.x et 5.x, Internet Explorer 3.01 MacOs, Opera 3.x,
JavaScript 1.2 : Navigator [4.0,4.05]
Javascript 1.3 : Navigator 4.06 et ulterieur
Support partiel : KFM (Unix)

Il est important de ne pas générer vos pages *exclusivement* en JavaScript dans la mesure ou un certain nombre de visiteurs ne pourront pas voir correctement votre page. Par exemple, les utilisateurs de Lynx ou NCSA Mosaic ou UdiWWW ; ainsi que ceux qui ont désactivé le JavaScript.

Pour plus de détails concernant le support des fonctionalités JavaScript par les browsers IE et Navigator et des bugs d’implémentation : http://webcoder.com/reference/2/index.html

IV.2. Comment éviter les redondances avec les browsers non-JavaScript ?

Les browsers qui ne reconnaissent pas le JavaScript considèrent vos scripts comme du simple texte et l’affiche donc sur la page sans l’exécuter. Pour éviter cela, rajouter au début et à la fin de votre script les "sigles" de remarque :

<SCRIPT type="text/javascript">

<!--



//-->

</SCRIPT>

IV.3. Comment éviter des erreurs de compatibilité ?

Une solution consiste à détecter le browser qu’utilise le visiteur (confer 3.) et exécuter/ne pas exécuter les commandes qui poseraient problème à l’aide de commandes de choix (if).

Également, il est possible d’empêcher l’ouverture des boites de dialogues d’erreur JavaScript en écrivant ceci dans votre page html entre et :

<SCRIPT type="text/javascript">

<!--

function stopError() 

{

return true;

}

window.onerror = stopError;

//-->

</SCRIPT>

Il est possible de détecter les objets que vous pourriez utiliser ; et effectuer des opérations avec/sur ceux-ci uniquement si ils existent :

if (document.images) 

{

xxx

}

if (document.layers) 

{

xxx

}

V. Sécurité

V.1. Un site peut-il voler le numéro de carte bancaire du visiteur à son insu, sans que celui-ci l’ait tapé dans un formulaire de ce site ?

C’est peu probable, mais des trous de sécurité dans l’implémentation du Javascript et de la mémorisation dans le cache d’un numéro de carte bancaire (tapé lors de la visite d’un autre site) ont existé. Lorsqu’un trou de sécurité est découvert, il est rapidement corrigé et une nouvelle version du navigateur est distribuée. Il est donc conseillé d’utiliser les dernières versions des navigateurs, ou du moins la dernière version d’une génération.

V.2. Que NE peut-on PAS faire via JavaScript ?

En théorie :
Accéder (lire, écrire, exécuter) aux fichiers du disque dur du visiteur ou du serveur.
Accéder (lire, modifier) aux informations personnelles du visiteur (paramètres de configuration, adresse e-mail, adresse ip)

En pratique : des trous de sécurité permettent d’y accéder. Par exemple :
Le <TITLE> security bug permettait à un site d’accéder aux informations contenues dans about:config et about:cache. Démonstration : http://www.nat.bg/ joro/titlecache.html (Netscape Communicator 4.6 Win95, 4.07 Linux)

Le Window spoofing security bug permettait de faire croire à l’utilisateur qu’il visitait un site digne de confiance alors que la page affichée était générée par le site malintentionné précédemment visité.

L’envoi d’un fichier se trouvant sur votre disque dur au serveur peut être réalisé.

L’exécution d’un programme se trouvant sur votre disque dur à votre insu.

VI. JavaScript et...

VI.1. JavaScript et JAVA

Javascript peut opérer avec le JAVA, mais ils sont différents ; de par leur syntaxe et leur domaine d’application. Il est possible d’utiliser des données Java dans vos scripts ; par exemple pour détecter la résolution d’écran du visiteur (via l’AWT) et afficher tel ou tel image en conséquence. Java est un langage de programmation, JavaScript un langage de scripts. Reportez-vous à la FAQ Java du groupe fr.comp.lang.java : FTP-Archive-Name : ftp://ftp.asynchrone.net/pub/faq/by-name/fr/faq-java

VI.2. JavaScript et JScript

Microsoft essaye de rendre son browser compatible avec le JavaScript de Netscape. Le langage est renommé JScript et contient quelques fonctionnalités supplémentaires, tout en étant pas 100% compatible avec le JavaScript. Plus d’infos : http://microsoft.com/france/jscript/techinfo/jsdocs.htm

VI.3. JavaScript et VBScript

Microsoft développe un autre langage de scripts : VBScript. C’est une sorte de langage d’extension (macro) à l’instar du VBA (Visual Basic). Il y a quelques ressemblances avec le JavaScript, notamment au niveau de la syntaxe. Ce langage est opérationnel uniquement sous Internet Explorer versions Windows.

VI.4. JavaScript et EcmaScript

L’EcmaScript est un standard de langage de scripts principalement dédié au web et influencé par le JavaScript (et le JScript). Pour en savoir plus sur ce langage, le standard : http://www.ecma.ch/stand/ecma-262.htm

VII. Ressources : url’s

VII.1. Où trouver des tutorials, didacticiels JavaScript en français ?

http://www.mygale.org/02/dliard/Sciences/Informatique/Langages/Scripts/Javascript/javascript.html

http://www.imaginet.fr/ime/javascri.htm

http://www.ac-grenoble.fr/jmoulin/WWildW/ENCYCLO/JSCRIPT/DIDACT/fscript.htm

VII.2. Et en anglais ?

http://sunset.usc.edu:80/ horowitz/Homework/sanhoyinX/hw2.html

http://www.geocities.com/SiliconValley/9000/

http://www.geocities.com/SiliconValley/Park/3091/main.htm

VII.3. Existe-t-il des banques de données et exemples de JavaScripts ?

http://javascript.developer.com/

http://webreference.com/js/