Avant Propos - Cours Javascript
Avant de commencer
Info
Le Javascript est un langage relativement facile à apprendre, mais il demande avant tout une bonne maîtrise du HTML ou XHTML.
Le Javascript va dynamiser votre document HTML ou XHTML, le rendre plus intéractif (comme par exemple l'affichage de certains éléments, prévenir l'internaute qu'il a fait une erreur), votre document HTML ou XHTML sera moins statique et donc plus attractif.
Le Javascript va vous permettre de traiter des événements provoqués par l'internaute; par exemple l'action de cliquer, le survole d'un d'élément,...
Le Javascript est soumis au standard ECMA-262 (European Computer Manufactures Associations) et le standard ISO est ISO-16262. (c'est juste une info).
Notez bien que Microsoft a introduit un autre type de Javascript dans Internet Explorer sous le nom de JScript.
Sachez aussi que Netscape, Firefox, Mozilla et Internet Explorer ne gèrent pas tout à fait de la même façon le Javascript. Je pense notamment aux calques.
Les exemples que je propose, ne sont pas forcement la manière la plus simple d'arriver au résultat, il s'agit simplement d'exercices.
Il existe plusieurs manières de coder une instruction, qui sont propres aux développeurs, mais qui dépendent aussi de la connaissance du langage JAVASCRIPT et de la programmation en général.
Le Javascript va dynamiser votre document HTML ou XHTML, le rendre plus intéractif (comme par exemple l'affichage de certains éléments, prévenir l'internaute qu'il a fait une erreur), votre document HTML ou XHTML sera moins statique et donc plus attractif.
Le Javascript va vous permettre de traiter des événements provoqués par l'internaute; par exemple l'action de cliquer, le survole d'un d'élément,...
Le Javascript est soumis au standard ECMA-262 (European Computer Manufactures Associations) et le standard ISO est ISO-16262. (c'est juste une info).
Notez bien que Microsoft a introduit un autre type de Javascript dans Internet Explorer sous le nom de JScript.
Sachez aussi que Netscape, Firefox, Mozilla et Internet Explorer ne gèrent pas tout à fait de la même façon le Javascript. Je pense notamment aux calques.
Les exemples que je propose, ne sont pas forcement la manière la plus simple d'arriver au résultat, il s'agit simplement d'exercices.
Il existe plusieurs manières de coder une instruction, qui sont propres aux développeurs, mais qui dépendent aussi de la connaissance du langage JAVASCRIPT et de la programmation en général.
Déclaration interne
Pour insérer un script Javascript dans une page dont la DTD est de type HTML, il suffit d'insérer votre script Javascript entre les balises :
<!--
//Votre script.
//-->
</SCRIPT>< !-- et //-- > cache votre script, pour les navigateurs qui ne comprennent pas le langage Javascript; je vous conseille de les mettre.
Si votre page a une DTD est de type XHTML :
//<![CDATA[
//Votre script.
//]]>
</script>
La balise <SCRIPT> peut être écrite n'importe quel endroit dans votre page HTML ou XHTML.
Exemple de code :
<SCRIPT LANGUAGE="JAVASCRIPT"><!--
//Votre script.
//-->
</SCRIPT>
Si votre page a une DTD est de type XHTML :
Exemple de code :
<script type="text/javascript"> //<![CDATA[
//Votre script.
//]]>
</script>
La balise <SCRIPT> peut être écrite n'importe quel endroit dans votre page HTML ou XHTML.
Déclaration externe
Mais, il est possible de lier un script Javascript externe au document HTML ou XHTML.
Pour cela, il faut que votre script soit enregistré sous le format ".js".
Pour créer un script externe, il vous suffit de prendre le bloc note et d'enregistrer votre fichier en ".js".
Le contenu de votre document ".js" doit être sous cette forme :
<!--
// votre script
//-->
pour le XHTML :
//<![CDATA[
// votre script
//]]>
Pour lier votre fichier script Javascript externe, il faut écrire dans votre page HTML ou XHTML :
</SCRIPT>Il est préférable de la déclarer dans le header c'est à dire entre <HEAD> et </HEAD>.
Pour cela, il faut que votre script soit enregistré sous le format ".js".
Pour créer un script externe, il vous suffit de prendre le bloc note et d'enregistrer votre fichier en ".js".
Le contenu de votre document ".js" doit être sous cette forme :
Exemple de code :
pour le HTML :<!--
// votre script
//-->
pour le XHTML :
//<![CDATA[
// votre script
//]]>
Pour lier votre fichier script Javascript externe, il faut écrire dans votre page HTML ou XHTML :
Exemple de code :
<SCRIPT type="text/javascript" src="MonDocument.js"></SCRIPT>
Détection version javascript
Info
Pour détecter la version javascript du navigateur rien de plus facile si votre page a uns DTD HTML ou XHTML Transitional :
il vous suffit de mettre plusieurs balises javascript avec les différentes versions, comme ci-dessous :
<!--
ver=1.1;
//-->
< /SCRIPT>
<SCRIPT language="JAVASCRIPT1.2" type="text/javascript">
<!--
ver=1.2;
//-->
< /SCRIPT>
<SCRIPT language="JAVASCRIPT1.3" type="text/javascript">
<!--
ver=1.3;
//-->
</SCRIPT>La valeur de ver détermine la version du javascript du navigateur.
il vous suffit de mettre plusieurs balises javascript avec les différentes versions, comme ci-dessous :
Exemple de code :
<SCRIPT language="JAVASCRIPT1.1" type="text/javascript"><!--
ver=1.1;
//-->
< /SCRIPT>
<SCRIPT language="JAVASCRIPT1.2" type="text/javascript">
<!--
ver=1.2;
//-->
< /SCRIPT>
<SCRIPT language="JAVASCRIPT1.3" type="text/javascript">
<!--
ver=1.3;
//-->
</SCRIPT>
Insérer un commentaire
Info
Il est très important de laisser des commentaires dans votre script.
D'une part, il devient plus lisible et d'autre part, lorsque plus tard vous y retravaillez, vous savez où vous en êtes.
Il existe deux types de commentaire pour un script Javascript.
- Le commentaire sur une ligne :
Il est introduit par //. Tout ce qui est après // et sur la même ligne est considéré comme un commentaire et n'est pas interprété.
- Le commentaire sur plusieures lignes :
Il est introduit par /* votre commentaire */. Tout ce qui est entre /* et */ même sur plusieures lignes est considéré comme un commentaire et n'est pas interprété.
D'une part, il devient plus lisible et d'autre part, lorsque plus tard vous y retravaillez, vous savez où vous en êtes.
Il existe deux types de commentaire pour un script Javascript.
- Le commentaire sur une ligne :
Il est introduit par //. Tout ce qui est après // et sur la même ligne est considéré comme un commentaire et n'est pas interprété.
- Le commentaire sur plusieures lignes :
Il est introduit par /* votre commentaire */. Tout ce qui est entre /* et */ même sur plusieures lignes est considéré comme un commentaire et n'est pas interprété.
Exercice
Premier exercice :
Etape 1 :
Ouvrez le générateur de code HTML (Voir le menu à droite de la page).
Etape 2 :
Tapez entre la balise <SCRIPT> et </SCRIPT> un texte, mais sur une seule ligne et visualisez. Maintenant mettez // devant votre texte et visualisez à nouveau.
Tapez entre la balise <SCRIPT> et </SCRIPT> un texte, mais sur plusieurs lignes et visualisez. Maintenant mettez /* devant votre texte et */ à la fin de votre texte et visualisez à nouveau.
Etape 1 :
Ouvrez le générateur de code HTML (Voir le menu à droite de la page).
Etape 2 :
Tapez entre la balise <SCRIPT> et </SCRIPT> un texte, mais sur une seule ligne et visualisez. Maintenant mettez // devant votre texte et visualisez à nouveau.
Tapez entre la balise <SCRIPT> et </SCRIPT> un texte, mais sur plusieurs lignes et visualisez. Maintenant mettez /* devant votre texte et */ à la fin de votre texte et visualisez à nouveau.
L'écriture du javascript
Info
Contrairement au code HTML, le Javascript fait une différence entre minuscule et majuscule.
Pour lui, NOM est différent de nom qui est différent de NoM. Alors faites attention quand vous écrivez du langage Javascript.
Par principe, les instructions sont écrites en minuscule
Chaque instruction est finie par un ";".
Le langage Javascript utilise l'alphabet ASCII donc attention aux accents dans les valeurs de variables. (voir Glossaire Termes).
Les nombres à virgule ne s'écrivent pas 12,5623 mais comme cela 12.5623.
Pour lui, NOM est différent de nom qui est différent de NoM. Alors faites attention quand vous écrivez du langage Javascript.
Par principe, les instructions sont écrites en minuscule
Chaque instruction est finie par un ";".
Le langage Javascript utilise l'alphabet ASCII donc attention aux accents dans les valeurs de variables. (voir Glossaire Termes).
Les nombres à virgule ne s'écrivent pas 12,5623 mais comme cela 12.5623.
Les mots défendus
Info
Lorsque vous nommez une variable en javascript, vous devez faire attention de ne pas utilisez les mots suivant comme nom de variable javascript :
| abstract | boolean | break |
| byte | char | continue |
| default | delete | do |
| double | else | export |
| false | final | float |
| for | function | goto |
| if | implements | import |
| instanceof | in | int |
| interface | long | native |
| new | null | package |
| private | protected | public |
| return | short | static |
| switch | synchronised | this |
| throws | transient | true |
| typeof | var | void |
| while | with |