Introduction - Pourquoi JavaScript ?

JavaScript apporte une fonctionnalité dynamique à vos sites web. Comment ? Chaque fois que vous voyez quelque chose apparaître lorsque vous passez la souris sur un élément du navigateur, des couleurs ou des images qui apparaissent sur la page, des effets de style, tout cela provient probablement de code JavaScript.

Il offre des effets qui ne sont pas possibles à produire autrement, car il s’exécute dans le navigateur et a un accès direct à tous les éléments d’un document web.

JavaScript a gagné en puissance lorsque les éléments HTML de la page web ont obtenu une définition plus formelle et structurée dans ce qu’on appelle le Document Object Model, ou DOM. Le DOM constitue l’ensemble des éléments de votre page, tout élément est accessible.

Ce langage est incontournable aujourd’hui et a donné vie à de nombreux frameworks (tout comme le langage PHP), comme jQuery par exemple, MooTools, AngularJS, etc.

À l’inverse de PHP, qui s’exécute côté serveur, le JavaScript est exécuté côté client directement dans le navigateur, et ils sont parfaitement complémentaires, c’est ce que vous allez découvrir dans les chapitres qui suivent.

JavaScript, un langage balisé

JavaScript est un langage de script côté client qui s’exécute entièrement dans le navigateur web.

Pour l’appeler, vous le placez à l’intérieur de vos pages HTML entre deux balises distinctes script, comme ceci :


<script>  
  //votre code javascript 
</script>

Vous pourrez rencontrer d’autres formes de balises, obsolètes aujourd’hui, telles que :


<script language = "javascript">  
  //votre code javascript 
</script>

Ou bien :


<script type = "text / javascript">  
  //votre code javascript 
</script>

Un premier exemple

Votre premier exemple en PHP consistait à afficher une chaîne de caractères à l’aide de l’instruction echo, on peut bien sûr réaliser la même chose en JavaScript en utilisant la fonction document.write :


<html>   
    <head> 
         <title>Premier exemple javascript</title> 
    </head> 
 
    <body>  
         <script> 
                document.write("Hello");  
         </script>  
 
         <noscript>  
                Votre navigateur ne supporte pas Javascript, ou  
Javascript a été désactivé  
         </noscript>  
    </body>  
</html>

Ce qui affiche :

Vous voyez une seule instruction dans la balise <script>, qui permet simplement d’afficher un texte dans le DOM ou Document Object Model (retenez bien ce terme, vous le rencontrerez très souvent dans les langages qui manipulent les éléments HTML d’une page).

À noter également que JavaScript peut être désactivé dans les navigateurs, les instructions ne seront alors...

Les commentaires

Vous utiliserez le double slash // pour notifier un commentaire dans le code JavaScript, tout comme en PHP :


<script> 
    //document.write("Hello");  
</script>

Pour commenter plusieurs lignes à la fois, l’utilisation des caractères /* et */ est nécessaire :


<script> 
    /* 
    document.write("Hello"); 
    alert("Hello"); 
    */  
</script>

Les inclusions de pages JS

Les scripts JS peuvent être écrits directement dans le code HTML comme vous l’avez vu dans l’exemple des paragraphes précédents.

Il est préférable cependant de gérer le code JS dans des fichiers séparés et de les injecter dans le code, ainsi vous gagnez en lisibilité et la maintenance de votre code en est simplifiée.

La syntaxe pour appeler un fichier JS externe est la suivante :


<script type = "texte/javascript" src = "mon_script.js"> 
</script>

Ou plus sobrement :


<script src = "mon_script.js"></script>

Vous pouvez préciser une URL particulière pour spécifier l’emplacement de votre script :


<script src = "https://www.mon_site/js/mon_script.js"></script>

Attention, vos fichiers JavaScript ne doivent pas contenir les balises <script> et </script>, sous peine d’erreur.

Débogage du code JS

PHP affiche les erreurs dans les pages HTML générées directement dans le navigateur, ce n’est pas le cas de JavaScript.

Mais heureusement, les navigateurs offrent aujourd’hui des outils de débogage puissants et fiables.

Par exemple, dans Google Chrome ou Firefox, appuyez sur la touche [F12] ou [Ctrl] + [Maj] + I pour déclencher l’affichage des outils pour les développeurs, en général l’outil s’ouvre sur la partie droite du navigateur :

Positionnez-vous sur l’onglet Console, c’est ici que l’on va voir les erreurs de syntaxes, etc. Testez le code suivant :


<html>   
    <head> 
           <title>Premier exemple javascript</title> 
    </head>   
 
    <body>     
           <script> 
                  document.writ("Hello")  
           </script>  
 
           <noscript>  
                   Votre navigateur ne supporte pas Javascript, ou 
Javascript a été désactivé  
           </noscript>  
    </body>...

Point-virgule en fin d’instruction

Contrairement à PHP, JavaScript ne nécessite généralement pas de point-virgule si vous n’avez qu’une seule instruction sur une ligne.

L’instruction document.write(’Hello’) est donc valide. En effet, le saut de ligne termine l’instruction.

Lorsque vous souhaitez placer plus d’une instruction sur une ligne, vous devez les séparer par des points-virgules, mais pour une meilleure lisibilité du code, cette pratique est plutôt déconseillée.

Les variables

Comme en PHP, une variable est une information qui est stockée temporairement en mémoire (un nombre, un objet, une chaîne de caractères, etc.). En revanche, il n’y a pas le symbole $ pour déclarer une variable en JS.

Les règles de nommage des variables en JavaScript sont assez strictes, elles appliquent les principes de dénomination suivants :

Une variable peut inclure uniquement les lettres a-z, A-Z, 0-9, le symbole $ et le trait de soulignement (_) ou underscore.
Aucun autre caractère, tel qu’un espace ou une ponctuation, n’est autorisé dans un nom de variable.
Le premier caractère d’un nom de variable ne peut pas être un nombre.
Les noms de variable sont sensibles à la casse, par exemple maVariable, mavariable et MaVariable sont trois variables distinctes.
Il n’y a pas de limite définie pour les longueurs de noms de variables.

Les variables peuvent être déclarées explicitement à l’aide du mot-clé var, par exemple :


var tva=20 
var premom="Robert"

ou de manière implicite, sans mot-clé :


couleur="jaune" 
total=0

1. Les variables de chaînes

Les variables de chaîne JavaScript doivent être placées entre guillemets simples ou doubles, par exemple :


monNom= "Granier"  
etablissement = "Ecole de l'or"...

Les opérateurs

Les opérateurs en JavaScript sont très similaires à ceux de PHP.

1. Les opérateurs arithmétiques

Les opérateurs arithmétiques sont utilisés pour effectuer des calculs mathématiques.

Vous pouvez les utiliser pour les quatre opérations principales (addition, soustraction, multiplication et division), ainsi que pour trouver le reste de la division (appelé aussi modulo), pour incrémenter ou décrémenter une valeur.

Comme en PHP, pour incrémenter de 1 ou pour décrémenter de 1, on utilisera les signes ++ ou --, quelques exemples :


Total = i + 4    // addition 
Jours = j - 6    // soustraction 
ttc = prix_ht * tva     // multiplication 
fraction = numerateur   / 5    // division 
nombre++   // augmente nombre de 1 
nombre--   // décrémente nombre de 1 
reste = 10 % 6    // retourne 4

2. Les opérateurs d’affectation

Ces opérateurs sont utilisés pour affecter une valeur à une variable. Il faut utiliser l’opérateur = (égal) pour assigner une valeur à une variable :


texte = 'bonjour' 
i = 10

Les autres opérateurs (+=, -=, *=, /= et %=) permettent d’effectuer une opération mathématique juste avant l’affectation de la valeur calculée...

Les types de données

JavaScript est un langage très faiblement typé. En effet, le type d’une variable est déterminé uniquement lorsqu’une valeur lui est affectée et peut changer lorsque la variable apparaît dans différents contextes.

Habituellement, vous n’avez pas à vous soucier du type, JavaScript détermine ce que vous voulez et le fait tout simplement.

On trouve bien entendu les types de données suivants :

String (chaîne de caractères)
number (entier, décimal)
boolean (vrai ou faux)
null (null)
undefined (indéfini)
array (tableau)
object (objet)

Pour connaître le type d’une variable, vous pouvez utiliser la fonction typeof :


<html>   
    <head> 
           <title>Premier exemple javascript</title> 
    </head>  
 
    <body>  
           <script>  
                 mavar = '100'  
                 document.write('mavar = ' + mavar + '  et son  
type est: ' + typeof mavar + '<br>') 
   
        ...

Les fonctions

Comme en PHP, les fonctions JavaScript sont utilisées pour réutiliser des suites d’instructions qui effectuent une tâche particulière.

Vous pouvez nommer vos fonctions comme bon vous semble et elles peuvent prendre autant de paramètres que vous le souhaitez.

Pour créer une fonction, procédez comme ceci :


<script>   
    function calcul_tva(prix,taux) { 
           return prix * (taux/100); 
    }  
    document.write(calcul_tva(100,20)) 
</script>

Eh oui, c’est très proche de ce qu’on pourrait écrire en PHP, il n’y a que les noms des variables qui ne sont pas préfixées par le signe $.

Les variables globales

En JavaScript, les variables globales sont celles déclarées en dehors des fonctions, mais aussi celles déclarées dans les fonctions sans le mot-clé var.

La portée d’une variable globale signifie qu’elle peut être utilisée dans l’ensemble de votre code.

Les variables locales

Les paramètres passés à une fonction ont automatiquement une portée locale, c’est-à-dire qu’ils peuvent être référencés uniquement à l’intérieur de cette fonction.

Cependant, il y a une exception. Les tableaux sont passés à une fonction par référence, donc si vous modifiez des éléments dans un paramètre tableau, les éléments du tableau original seront modifiés.

D’autre part, pour définir une variable locale qui n’a de portée que dans la fonction en cours et qui n’a pas été passée en paramètre, vous utiliserez le mot-clé var.

L’exemple suivant montre une fonction avec les deux types de portée des variables :


<html>   
    <head> 
           <title>Premier exemple javascript</title> 
    </head>   
 
    <body>     
           <script>   
                  function ma_fonction() { 
                a = 10        //portée globale 
                var b = 20    //portée...

Le DOM (Document Object Model)

Le Document Object Model, ou DOM, représente toutes les parties d’un document HTML en objets distincts, chacun avec ses propres propriétés et méthodes et chacun étant soumis au contrôle de JavaScript.

JavaScript sépare les objets, propriétés et méthodes en utilisant un point (.).

Prenez l’exemple d’une carte de visite comme un objet que l’on appellera card. Cet objet contient des propriétés telles qu’un nom, une adresse, un numéro de téléphone, etc. Dans la syntaxe de JavaScript, ces propriétés pourraient ressembler à ceci :

card.name
card.phone
card.address

Ces méthodes sont des fonctions qui récupèrent, modifient et agissent sur les propriétés.

Pour appeler une méthode (fonction) qui afficherait les propriétés de la carte, vous pourriez utiliser une syntaxe comme celle-ci :

card.display()

Souvenez-vous de la fonction write() que vous avez vue dans les paragraphes précédents, pour afficher des informations à l’écran (dans le DOM) :


document.write('Hello');

document est un objet représentant votre page web - JavaScript est basé autour des objets - write() étant une méthode de cet objet.

La hiérarchie d’objets parents et enfants, connue...

Document.write() et autres fonctionnalités

On a vu précédemment la fonction write qui permet d’afficher des informations sur la page, il existe deux autres moyens d’afficher des informations rapidement pour déboguer du code :

la fonction alert()
la fonction console.log

La fonction alert agit presque comme un echo en PHP, elle permet d’afficher dans une pop-up le contenu d’une variable, d’une chaîne ou tout autre élément passé en paramètre :


<html>   
    <head> 
           <title>Premier exemple javascript</title> 
    </head>  
 
    <body>  
           <script>  
                  a = 10 
                  var b = 20 
                  c = 'hello' 
 
                  document.write(a) 
                  alert(b) 
                  console.log(c) 
           </script>  
         
           <noscript>  
      ...

Les bases du langage JavaScript