Introduction au langage Javascript

par lena · 7 avril 2007

Au cours de cette introduction à Javascript. Sans devoir entrer dans un cours sur Javascript nous allons quand même en retracer les bases afin de s’assurer d’une bonne utilisation ECMAScript et prendre en main de bonnes habitudes ECMAScript.

Ou placer le code ? Diverses méthodes

Où placer du Javascript dans une page HTML ? Bien que pour AJAX, nous utiliserons exclusivement ce que l’on appelle du Javascript discret (), nous allons voir qu’il existe quand même plusieurs manières d’intégrer du code Javascript dans une page HTML.

Dans l’entête

Il est possible de placer du contenu Javascript dans l’entête <head> du fichier HTML. On le placera directement entre des balises <script>. En fonction du DOCTYPE utilisé, il faudra alors renseigner ou non des attributs de type type et language. Ces informations ne sont plus obligatoire en html 5. L’intégralité du code placé à cet endroit sera exécuté avant le chargement du contenu de la page, il faudra donc en tenir compte en fonction de son utilisation. Enfin et en contre partie la balise <noscript> sera alors sollicité dès lors qu’un navigateur n’interprétera pas le Javascript.

<script type="text/javascript" language="javascript">
  // contenu
</script>
<noscript><h1>Javascript est désactivé</h1></noscript>

Dans un fichier externe

La balise <script> propose un attribut src= » » qui permet de pointer vers un fichier Javascript externe. Cela est idéal pour séparer les diverses natures de contenus de la page HTML, CSS et Javascript. En dehors du fait que le contenu sera alors externalisé, l’utilisation de la balise reste identique.

<script type="text/javascript" language="javascript" src="fichier_externe.js"></script>

Au sein du fichier HTML

Nous avons vu qu’il était possible d’utiliser un jeu de balise <script> dans l’entête du document, en fait, il est également possible d’user ce ce jeu de balise partout dans le document, y compris dans la balise <body>. L’utilisation de large script juste avant la fermeture de la balise </body> peut être même une stratégie d’optimisation. Du fait que le script sera généralement nécessaire une fois la page chargée, et que celui bloque constamment le chargement, cela permet alors d’accélérer le chargement de la page et surtout de son contenu avant le chargement des scripts.

   <script type="text/javascript" language="javascript">
    // contenu
   </script>
</body>

Dans l’attribut event d’une balise

Bien que cela soit réservé à certaines utilisations bien particulières et qu’il soit recommandé, si possible, de procéder différemment, il nous est possible de placer du code javascript à l’intérieur de l’attribut evenement= » » d’une balise.

<p onclick="alert('coucou');">En cliquant sur cette phrase, afficher un message d'alerte</p>

Pour l’ensemble des tutoriels

Comme dit précédemment, nous allons exclusivement utiliser un fichier Javascript externe tout au long de ce tutoriel, de ce fait nous explorerons continuellement l’utilisation d’un code discret qui devrait permettre à tout internaute ayant désactivé Javascript, d’accéder au contenu du site, certes moins riche, mais au contenu quand même. Créez une page web javascriptInit.htm et pour y lier le fichier javascriptInit.js utilisez le code suivant :

<head>
  //...
  <script type="text/ecmascript" src="javascriptInit.js"></script>
</head>

Les variables (HTML + JavascriptVariable.js)

Déclarations

Pour déclarer une variable, il suffit de l’initialiser et de définir sa portée par l’usage du mot clé var. Aucun typage n’est possible, mais prenez l’habitude de ne pas échanger le type de contenu des variables. Lorsque vous nommez les variables n’utilisez pas de mot clé réservé au Javascript, de caractères accentués, de caractères de ponctuations ou autres signes particuliers, d’espace, ne commencez pas non plus le nom de la variable par un chiffre, et évitez l’utilisation de mot trop abstrait que vous aurez du mal à interpréter dans quelques mois…. De même Javascript est sensible à la casse, de ce fait maVar est différent de mavar. Vous pouvez définir plusieurs variables sur une même ligne en les séparant simplement par une virgule.

var essai_texte = "coucou";
var reference=4, nom="bob";

Portée

Nous venons de voir qu’une variable s’initialisait en usant du mot clé var, var maVar= » ». Cela permet de définir la portée de la variable en limitant sa visibilité au bloc conteneur. Sans le mot clé var la variable est globale de manière implicite. L’exemple ci dessous le démontre :

var a = "coucou"
b = " bob"
var c
function ditBonjour(){
  var a = "hello"
  var c = a + b
  b = " rita"
  return(c)
}
ditBonjour() // hello bob
a + b // coucou rita
c // undefined

Type de données

Il n’existe pas en Javascript d’attribut de typage, donc vous pouvez stocker dans une variable tout ou presque et ce de manière non définie. Évitez cependant de modifier le type d’un contenu donné pour éviter les confusions et faciliter le débogage et la lisibilité du code.

Chaîne de caractères

Les chaînes de caractères définies entre guillemets simples ou doubles : quote. Si vous prévoyez l’utilisation de l’un ou l’autre au sein d’une chaîne, pensez à en tenir compte au moment de l’initialisation, sinon vous pourrez toujours utiliser le caractère d’échappement « \ ».

var essai_texte = "coucou";
var essai_texte_quote = 'pensez au "quote"';
var essai_texte_apostrophe = "pensez à l'apostrophe";
var essai_texte_echappement = "pensez à l'apostrophe et au \"quote\"";

Les caractères d’échappement

Les caractères d’échappement permettent l’utilisation de caractères invisibles (white space) qui sont difficiles à placer dans une chaine comme les retours chariots ou les tabulations par exemple, ou alors d’utiliser des caractères qui pourraient être interprétés comme faisant partie du code… par exemple, comme nous l’avons vu précédemment, lors de la déclaration d’une variable, la valeur d’initialisation est placée soit entre QUOTE, soit en utilisant des guillemets soit une apostrophe, de ce fait, si on souhaite utiliser une apostrophe au sein d’une chaîne déclarée entre apostrophes, il faut utiliser un caractère d’échappement. Voici la liste des caractères d’échappement disponibles :

\b : touche de suppression
\f : formulaire plein
\n : retour à la ligne
\r : retour à la ligne
\t : tabulation
\ » : utilisation de guillemets dans la chaine
\’ : utilisation d’une apostrophe dans la chaine
\\ : utilisation de l’antislash

Nombre et valeur numéraires

Les nombres sont directement identifiés en utilisant le point comme séparateur décimal, et le signe – apposé devant s’il s’agit d’une valeur négative.

var essai_nombre = 34;
var essai_nombre_flottant = 2.1;
var essai_nombre_negatif = -2.1;

Valeurs booléennes

Les valeurs booléennes peuvent être exprimées en utilisant soit les expressions true et false, ou bien en utilisant les valeurs 1 et 0 équivalentes. Attention, une valeur comme 23 peut donc être true, aussi bien que -23, alors que seule la valeur 0 est false.

var essai_booleen = true;
var essai_booleen_numeraire = 0;
var essai_booleen_numeraire_inverse = !essai_booleen_numeraire;
var essai_booleen_numeraire_autre = !-23;

Les tableaux et tableaux associatifs

Les tableaux et les tableaux associatifs sont utilisés en JavaScript. Les tableaux sont définis par la classe Array() et peuvent soit utiliser des index, en partant de 0, soit utiliser des valeurs de propriétés associatives. Par exemple :

var essai_array = new Array("un","deux");
essai_array[2] = "trois";
essai_array["nom"] = "bob";

Les opérateurs (HTML + JavascriptOperateur.js)

Les opérateurs arithmétiques

L’ensemble de opérateurs arithmétiques sont utilisables directement en Javascript, c’est à dire + – / * pour les opérations classiques, le modulo %, et le signe d’affectation =

Pour les opérations d’affectations classiques sur une même valeur par exemple

valeur = valeur + nombre
valeur = valeur + chaine

devient

valeur += nombre
valeur += chaine

Pour des valeurs numéraires, il est possible d’utiliser les formes contractées comme += -= *= /= et %=, pour les chaînes de caractères uniquement +=. Dans le cas d’une incrémentation ou d’une décrémentation sur une valeur de 1, il est également possible d’utiliser la forme contractée ++ ou –, comme :

valeur ++

valeur --

Attention, le fait d’écrire les opérateurs avant ou après la variable, comme valeur ++ ou ++ valeur, peut avoir une incidence sur la suite du code à exécuter. L’exemple ci-dessous peut le démontrer :

var a = 1, b = 1
function affiche(arg){
  document.write(arg)
}
affiche(a++) // 1
affiche(++b) // 2

Et le modulo dans tout cela ?

Un opérateur parfois méconnu ou sous utilisé, reste le modulo. Le modulo renvoie le résultat d’une division. C’est-à-dire ? Prenons par exemple la division de 4 par 3, Je pose 1 à droite, et 1 * 3 = 3, allé à 4 reste 1… donc le modulo de 4 / 3 est 1… on l’écrit de la manière suivante :

alert (4%3);

Les opérateurs booléens

Les trois principaux opérateurs booléens OU, ET et NON sont accessibles en Javascript sur les syntaxes respectives qui suivent :

valeur1 || valeur2 , valeur1 && valeur , !valeur

Dans le premier cas l’opérateur renvoie true si une des deux valeurs est true, dans le second l’opérateur renvoie true uniquement si les deux valeurs sont true, et le troisième opérateur renvoie l’inverse de la valeur.

Les opérateurs de comparaison

Les opérateurs de comparaison disponibles en Javascript sont les opérateurs classiques comme >=, <= , > et <, qui vérifient respectivement supérieur ou égal, inférieur ou égal, supérieur et inférieur, il sont complétés par les opérateurs d’égalité et de stricte égalité == et ===, l’égalité s’assure que les valeurs soient identiques alors que la stricte égalité s’assure également que le type de la valeur soit identique… par exemple

"4" == 4 est vérifié alors que "4" === 4 ne l'est pas

Enfin, pour compléter la liste des opérateurs de comparaison, nous trouvons également les opérateurs de différence et de stricte différence != et !== qui fonctionnent inversement des opérateurs d’égalité et égalité stricte. De même, les opérateurs d’infériorité et de stricte infériorité, ou supériorité :

4 <= "4" , 3 < "8" et "rita" > "bob" sont vérifiés

Les tests de conditions

Deux principales manières de tester les vérifications de conditions, soit le traditionnel if, soit l’incontournable switch… lequel des deux choisir ? Disons que dans le cas d’un simple test et de quelques vérifications la structure if else, ou if else if est très souple à utiliser, par contre dans le cas de multiple if else if imbriqués, il est préférable et beaucoup plus lisible d’utiliser le montage switch case.

Utilisation de if

if (condition){
  code de la condition 1
} else if (autre condition){
  code de la condition 2
} else {
  code par défaut
}

Mode raccourci qui peut être utile

Il est fréquent que lors de certains tests nous devons initialiser une variable en fonction du résultat, il existe une syntaxe abrégée qui permet d’écrire simplement le résultat d’un if else dans une variable :

valeur = (condition) ? si vrai : si faux ;

Utilisation de switch

Lors de l’utilisation de l’imbrication switch case, il ne faut pas oublier que si l’on utilise pas de break au sein d’un case, le programme continu de s’exécuter comme si le case suivant était vérifié, même si cela n’est pas le cas. Dans le cas où aucun case ne serait vérifié , il est possible d’user d’une prise en charge par défaut.

switch (variable) {
  case valeur :
  break;
  case valeur :
  break;
  default :
  break;
}

Les boucles

Ici encore, deux possibilités, for et while…. la différence majeure entre les deux est que la seconde même si la condition n’est pas vérifiée s’exécutera au moins une fois :

for (initialisation ; limite ; incrémentation) {
  code à exécuter
}
while (condition) {
  code à exécuter
}