23/05/2011

Après le html : le JavaScript | Nek’

BY NEK’ COURS DE JAVASCRIPT

1

Table des matières Introduction ...................................................................................................................................................................... 4

I. Les premiers pas ....................................................................................................................................................... 5

A. Insérer du JavaScript dans une page web ............................................................................................................. 5

B. Les commentaires ................................................................................................................................................. 6

C. Premier code JavaScript ! ...................................................................................................................................... 6

II. Les variables .............................................................................................................................................................. 7

A. Une variable, un nom ............................................................................................................................................ 7

B. Les types et les valeurs ......................................................................................................................................... 8

C. Les opérations sur les variables ............................................................................................................................ 8

Opérations sur des variables de type nombre .......................................................................................................... 9

Opérations sur des variables de type chaîne de caractères ..................................................................................... 9

Un petit opérateur un peu différent ....................................................................................................................... 10

D. Trouver le type d’une variable ............................................................................................................................ 10

E. Des boîtes de dialogues, encore des boîtes de dialogue, toujours des boîtes… ................................................ 11

Alert, la boîte de base ............................................................................................................................................. 11

Confirm, la boîte de confirmation ........................................................................................................................... 11

Prompt, la boite de saisie ........................................................................................................................................ 11

Un point sur les boîtes de dialogue ........................................................................................................................ 12

F. Attention à vos noms de variable ! ..................................................................................................................... 12

Un nom pour être reconnu ..................................................................................................................................... 12

III. Les conditions et la notion d’expression ............................................................................................................. 12

A. L’expression ........................................................................................................................................................ 12

La variable expression ............................................................................................................................................. 12

Les expressions opératives ..................................................................................................................................... 13

Les expressions d’assignation ................................................................................................................................. 13

Les expressions de comparaison ............................................................................................................................. 13

Les expressions d’associations ................................................................................................................................ 14

B. Les conditions...................................................................................................................................................... 15

Les conditions classiques ........................................................................................................................................ 15

Supprimer les accolades ......................................................................................................................................... 16

Les conditions ternaires .......................................................................................................................................... 16

Le switch.................................................................................................................................................................. 16

Des conditions avec autre chose que des expressions booléennes ? .................................................................... 17

L’exercice................................................................................................................................................................. 18

C. Les boucles .......................................................................................................................................................... 18

2

Les boucles « tant que » (while) ............................................................................................................................. 18

Les boucles « faire … tant que » (do { }while) ......................................................................................................... 19

Les boucles « pour » (for) ....................................................................................................................................... 19

Le break c’est mal, mais ça existe ........................................................................................................................... 20

L’exercice................................................................................................................................................................. 20

IV. Les fonctions ....................................................................................................................................................... 20

A. La syntaxe d’une fonction ................................................................................................................................... 20

La base de la fonction ............................................................................................................................................. 20

Les paramètres (ou arguments) .............................................................................................................................. 21

B. La portée des variables ....................................................................................................................................... 21

C. Variables et fonctions… C’est ambigu !............................................................................................................... 22

V. La notion d’objet, de classe, exemple avec la classe String .................................................................................... 22

A. Un objet c’est quoi ? ........................................................................................................................................... 22

Une boîte ................................................................................................................................................................. 22

Parcourir un objet ................................................................................................................................................... 23

Un peu de vocabulaire ............................................................................................................................................ 23

B. Une classe c’est quoi ? ........................................................................................................................................ 23

C. La classe String .................................................................................................................................................... 24

Les attributs de la classe String ............................................................................................................................... 24

Les principales méthodes de la classe String .......................................................................................................... 25

Faire attention à faire la différence entre une classe et un type primitif ............................................................... 25

D. Allons un peu plus loin ........................................................................................................................................ 26

VI. Les tableaux ........................................................................................................................................................ 26

1. Qu’est-ce qu’un tableau ? ................................................................................................................................... 26

La base des tableaux ............................................................................................................................................... 26

Accéder aux cases d’un tableau .............................................................................................................................. 26

Assigner une nouvelle valeur à une case ................................................................................................................ 27

Du texte dans les clés .............................................................................................................................................. 27

2. Parcourir un tableau ........................................................................................................................................... 27

La méthode « classique » ........................................................................................................................................ 27

Le forEach ................................................................................................................................................................ 27

Le for each ............................................................................................................................................................... 27

3. Quelques méthodes et attributs de la classe Array ............................................................................................ 28

L’attribut length ...................................................................................................................................................... 28

Les méthodes pop et push ...................................................................................................................................... 28

La méthode concat .................................................................................................................................................. 28

3

La méthode join ...................................................................................................................................................... 28

4

Introduction Bonjour à tous, Pour ceux qui ne me connaissent pas, je me présente. Je suis Nek’, un développeur amateur depuis 2003, simple opérateur du canal #siteduzero sur irc.epiknet.org et étudiant en école d’ingénieur. Ce cours est le premier que j’écris, soyez indulgent mais n’hésitez pas à me donner votre avis dessus à nek.dev@gmail.com ! Pour toute aide je vous recommande le canal IRC #siteduzero du réseau irc.epiknet .org. J’ai fait un constat : il n’existe pas réellement de bon cours de JavaScript pour les débutants dans le domaine, et pourtant le JavaScript séduit de plus en plus ! Pour répondre à une demande qui risque très probablement d’arriver, je me suis mis à écrire ce petit cours de JavaScript, qui vous plaira, je l’espère. Ce cours est destiné aux débutants, si vous n’êtes pas débutant ne vous étonnez donc pas si vous vous ennuyez dans les premiers chapitres. Cependant une bonne connaissance du (x)HTML, du CSS et du PHP (pour les chapitres relatifs à l’ajax) est nécessaire ! Ici pas de JQuery ou de Mootools ! Vous serez les acteurs complets de vos scripts ! Notez que ce cours est sous licence Common Creative. Pour plus d’informations sur cette licence, je vous renvoie à ce site : http://fr.creativecommons.org/ . Bonne lecture ! Rentrons dans le vif du sujet : JavaScript, que j’abrègerais souvent JS. Qu’est-ce que JavaScript ? JavaScript (à ne pas confondre avec Java) est un langage de programmation permettant (entre autre) de développer des applications web, plus précisément d’animer une page html classique. À la base JavaScript est un langage créé par un certain Brendan Eich pour Netscape (un des premiers navigateurs web). Je ne m’étale pas sur l’histoire de JavaScript, wikipedia le fait très bien. Aujourd’hui le web pullule de flash, silverlight et autres technologies ayant pour but de rendre les sites web plus fonctionnels, plus attractifs. Le problème est que ces applications sont lourdes pour le navigateur, et bien souvent incompatible avec tous les systèmes d’exploitations existants. (Par exemple flash passe relativement mal sous les systèmes basés sur linux !) De son côté, JS fait son chemin, il est de mieux en mieux supporté par les navigateurs, il devient une norme. Les sites sont de plus en plus dynamiques, tellement dynamiques que la futur version de html5 sera complètement intégrée avec JavaScript ! En effet le support des vidéos et de l’audio est au programme, le tout gérable à l’aide de JavaScript, ce n’est pas tout mais une fois encore ce n’est pas le sujet de ce cours. Je vous renvoie cette fois à mon blog, j’en parlerais peut être en annexe. Le JavaScript est donc un langage qui s’exécute après le php, en même temps que le HTML, il est compilé par le navigateur qui s’occupe de gérer les effets que nous préparons (le client a donc accès à la totalité du code JS que vous produirez). Quelques petits conseils : Pour développer en JavaScript, vous pouvez utiliser l’éditeur de texte que vous souhaitez, cependant je vous recommande Notepad++. C’est un petit éditeur de code très sympathique et libre (donc gratuit) pour Windows. Pour les OS basés sur linux, je recommande l’éditeur par défaut, c'est-à-dire gedit ou kate. Pour les utilisateurs de MAC OSX, désolé je n’ai pas de suggestion, si vous m’offrez un MAC je vous ferais des suggestions sans aucun problème ;-) . Une autre petite chose très importante : lisez les commentaires que je laisse dans le code, ils sont très importants !

C’est Parti !

5

I. Les premiers pas

A. Insérer du JavaScript dans une page web A l’instar du css, nous possédons 3 façons d’inclure du JS dans une page web.

L’inclusion : On peut inclure un script JS dans la balise <head> à l’aide de la balise <script>.

Voici un exemple :

<!DOCTYPE html>

<html lang="fr">

<head>

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

</head>

<body>

</body>

</html>

Le code JS sera contenu dans le fichier script.js (ici dans le même dossier que la page html).

Le code directement dans le header : On peut également inclure du code directement dans le header, cette

méthode est plus rarement utilisée pour les gros scripts pour deux raison, tout d’abord parce qu’elle

« encombre » la page HTML mais aussi par compatibilité pour les ancien navigateurs qui ne gèrent pas le JS,

en effet le code écrit directement dans le HTML s’affiche dans la page ! Aujourd’hui ce problème n’est plus

vraiment d’actualité mais une méthode simple permet cependant de le résoudre : ajouter des commentaires

html pour marquer le code. Notez tout de même qu’aujourd’hui on essaie d’avoir du code JavaScript épuré

et que par conséquent on déconseille fortement l’utilisation des commentaires html (que je n’utiliserais plus

dans la suite du cours).

Cette méthode possède tout de même un avantage notable : ne pas faire envoyer une requête

supplémentaire par le serveur. En effet aller chercher un fichier sur un serveur prend du temps, n’avoir

qu’un seul fichier au lieu de deux permet de raccourcir le temps d’exécution d’une page.

Voici un exemple, ici avec les commentaires html en début et fin mais n’oubliez pas qu’ils sont maintenant

fortement déconseillés:

<!DOCTYPE html>

<html lang="fr">

<head>

<script type="text/javascript">

<!--

alert("Hello World !");

//-->

</script>

</head>

<body>

</body>

</html>

Le code JavaScript dans la balise <body> : Cette méthode est similaire à la précédente mais au lieu de

charger le code en début de page, on le charge où on veut. L’avantage de cette méthode est encore un gain

de vitesse, en effet JS met du temps à s’exécuter (temps qui tend à s’affaiblir largement avec les nouveaux

navigateurs). Ainsi on peut exécuter du code après l’affichage de la page.

Voici un exemple de code :

<!DOCTYPE html>

6

<html lang="fr">

<head>

<title>Page de test JS</title>

</head>

<body>

<p>Du code HTML.</p>

<script type="text/javascript">

alert("Hello World !");

</script>

<p>On peut ajouter du code en plus à la suite.</p>

</body>

</html>

B. Les commentaires En JavaScript, comme dans tout autre langage qui se respecte, on peut commenter le code source. Les

commentaires sont importants pour la compréhension du code.

En JavaScript les commentaires sont similaires à ceux utilisés en PHP ou en C/C++, voici un exemple illustratif :

// Voici du code JavaScript

// Ce type de commentaire n'est valable que pour une ligne et ne se ferme pas

/* En revanche ce type de commentaire

Est valable sur plusieurs lignes, et a besoin d'une balise fermante !

*/

On utilise donc les mots-clés //, /* et */. Ces commentaires ne seront pas exécutés, en revanche ils seront visible dans le code puisque celui-ci n’est pas compilé par le serveur. Attention : ne prenez pas les commentaires à la légère ! Ils sont très important, comme dirait un développeur de chez IMB, un code est propre uniquement si il y a autant de commentaires que de code ! « Si après avoir lu les commentaires vous ne comprenez pas le code, jetez le tout. »

C. Premier code JavaScript ! Nous allons donc produire notre premier code en JS, nous utiliserons dès lors la première méthode d’insertion de

code, notre page html sera donc ceci :

<!DOCTYPE html>

<html lang=fr>

<head>

<title>Test de javascript</title>

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

</head>

<body>

</body>

</html>

Voici donc le fichier que nous pouvons appeler index.html, le code JS sera écrit dans un fichier que nous appellerons

test.js.

Pour débuter nous allons utiliser une fonction. Une fonction est une instruction donnée, elle est caractérisée par des paramètres (ou arguments) et une valeur de retour. Nous utiliserons une des fonctions les plu basiques de JavaScript : alert() .

7

Cette fonction permet d’afficher un message dans une boîte de dialogue qui invite l’utilisateur uniquement à valider (seul le bouton OK sera disponible). Voici donc notre premier code JavaScript :

// Nous allons demander d'afficher "Hello World"

alert("Hello World");

Testez vous-même ! Ce code affiche bien « Hello World » !

Qu’est-ce qu’il s’est passé ?

J’ai utilisé le mot clé alert, il indique que nous utilisons la fonction alert qui va générer une boîte de dialogue ;

Les parenthèses sont là pour signaler que le mot clé est une fonction contiennent les paramètres ;

J’envoie à ma fonction un paramètre, la chaîne de caractères « Hello World », notez que j’ai mis des guillemets mais des apostrophes auraient suffit !

Enfin je clôture par un point virgule, il faut savoir qu’en JS le point virgule n’est pas obligatoire : aller à la ligne suffit. Cependant je vous recommande fortement d’utiliser le point virgule, c’est vraiment plus propre et on se repèrera mieux dans le programme par la suite !

Remarque : nous verrons plus tard que cette fonction a beau être basique, elle est très utile, notamment pour débuguer des scripts.

II. Les variables Qu’est-ce qu’une variable ? Comment les utilise-t-on en JS ? Voici les questions auxquelles nous essaierons de répondre ici ! Une variable est un moyen de stocker temporairement quelque chose, elle peut être comparée à une boîte. Elle possède un nom, un type, et une valeur. Je ne vous fais pas un dessin, qui dit temporairement dit mémoire vive. Donc notre variable va utiliser la mémoire vive de l’ordinateur pour se « stocker ». Heureusement avec JavaScript nous ne nous embête pas avec la gestion de la mémoire de l’ordinateur et s’en occupe tout seul !

A. Une variable, un nom Comme je l’ai souligné précédemment, une variable est une sorte de boîte, une boîte oui mais pas n’importe quelle boîte ! Une boîte qui a un nom ! Oui, pour pouvoir repérer les données il nous faut un nom, il faut déclarer la variable. Voici un exemple de déclaration de variable :

var nom_de_la_variable;

Deux étapes pour créer cette variable ou plutôt « cette boîte » si vous préférez :

8

Tout d’abord on commence par placer le mot clé « var », c’est lui qui indique la création d’une nouvelle variable ;

On donne un nom à la variable, ce nom doit obéir à certaines conditions : o Commencer par une lettre (majuscule ou minuscule) ; o Ne contenir que des lettres (hors caractères spéciaux comme les accents), des nombres ou des

underscore (touche _ ).

Et enfin, on fini par un point virgule, comme n’importe quelle instruction.

B. Les types et les valeurs Stocker, oui, mais stocker quoi ? Dans une variable on stocke une valeur, cette valeur possède un type. Par exemple on ne peut pas faire les mêmes opérations sur des nombres que sur des phrases, ça semble logique, il faut donc faire une différence. Par exemple du texte placé entre guillemets donne un type « string » (en français chaîne de caractère). Voici les principaux types :

var booleen = true; // Type "boolean"

var nombre = 10; // Type "number"

var phrase = "Salut tout le monde !"; // Type "string"

Notez que nous verrons d’autres types dans la suite du cours. Nous avons donc ici trois types de variable, détaillons-les :

Les booléens : en fait ces variables ne peuvent prendre que deux valeurs : true (= vrai) ou false (= faux). C’est une sorte de tout ou rien, « oui ou non ». Vous n’en voyez peut être pas l’intérêt tout de suite, mais notez quand même, c’est un type important ;

Les nombres : je ne vous fais pas un dessin, ces variables contiennent des nombres, on verra plus précisément comment faire des opérations avec dans la suite ;

Les phrases (ou plutôt chaînes de caractères) : ces variables contiennent des caractères, on délimite ici les caractères par des guillemets (double quote) mais sachez que les apostrophes (simple quote) fonctionnent tout aussi bien (d’ailleurs j’aurais surement plus tendance à les utiliser). Remarque : si vous devez écrire un guillemet dans une chaîne de caractère délimitée par des guillemets vous devrez utiliser un antislashe ( \ ) que vous placerez devant le guillemet pour l’échapper. Voici un exemple :

var a = "Je suis une chaîne de caractères, j'ai envie de dire... \"Ce cours est

génial\" Mais ce cours n'est pas terminé !";

En JS ces types ne sont pas fixe, vous pouvez très bien mettre une chaîne de caractère dans une variable de nombre, le type sera changé automatiquement par JavaScript.

C. Les opérations sur les variables Je parlais d’opération dans la partie précédente, qui dit opération dit opérateur. Qu’est-ce qu’un opérateur ? Un opérateur est un caractère spécial qui permet de faire des opérations justement, rien ne sert d’en parler plus vous comprendrez mieux avec des exemples :

Le plus +

Le moins -

L’étoile (pour multiplier) *

La barre de fraction (pour diviser) /

9

Voici quelques exemples d’opérateur, nous en verrons d’autres dans la suite.

Opérations sur des variables de type nombre

Les variables nombre ont les mêmes règles de calculs que les nombres classiques, vous pouvez donc parfaitement faire un code comme ceci :

var a = 12;

var b = 3;

var c = 2;

var resultat = (a + b) * c;

alert(resultat);

Vous pouvez tester ! Ce code devrait afficher ceci :

On constate donc que notre calcul a été effectué dans les règles, on affiche le résultat à l’aide d’alert comme précédemment. Ajoutons deux opérateurs assez courants :

++ --

Voici comment s’utilisent ces deux opérateurs en JS :

var a = 2;

a++;

alert(a);

// Le code précédent équivaut totalement à écrire ceci:

var a = 2;

a = a + 1;

alert(a);

Je vous laisse deviner que c’est l’inverse pour le – (il retire 1 à la variable).

Opérations sur des variables de type chaîne de caractères

Si si ! C’est possible ! Oui, des opérations sur des chaînes de caractères ! En fait il n’y a plus qu’un seul opérateur disponible pour les chaînes de caractères, donc une seule opération que je nommerais comme ceci : concaténation. Le principe est simple, nous allons utiliser l’opérateur + pour assembler des chaînes de caractères, voici des exemples :

var a = 'Je suis un programme';

var b = ' programmé en JS !';

var c = a + b;

alert(c); // Notez que j'aurais pu écrire directement alert(a + b);

Miracle ! Nos deux chaînes sont assemblées ! Toujours plus fort ! On peut concaténer des nombres à des chaînes de caractères ! JavaScript s’occupe de tout pour nous !

var a = 12;

10

alert("J'ai "+a+" bonbons");

Je viens de vous présenter la première opération réelle sur des chaînes de caractères mais je vais vous présenter quelques propriétés sur les chaînes de caractères. Une chaîne de caractère est en réalité un objet, nous verrons cela plus tard, et comme tout objet, elle a des propriétés, les voici :

Chaine. length Retourne le nombre de caractères de la chaîne.

Chaine.toUpperCase Met en majuscule toutes les lettres.

Voici deux exemples à tester :

var a = 'Coucou';

alert(a.length); // Affiche 6

var b = 'Coucou';

b.toUpperCase();

alert(b); // Affiche COUCOU

Pour plus de propriétés je vous renvoie à la documentation Mozilla Developer Center : https://developer.mozilla.org/fr/Guide_JavaScript_1.5/Objets_prédéfinis/L'objet_String Notez que certaines propriétés génèrent du HTML, ceci peut être pratique mais n’en abusez pas tout de même, elles sont plus lente à l’exécution.

Un petit opérateur un peu différent

L’opérateur que je vais vous présenter ici est plus un raccourcis qu’une utilité réelle, mais je pense qu’il est bon d’apprendre à tout programmeur d’avoir la flemme ! (ou pas, mais bon je vais le faire) L’opérateur est += , à l’instar du = simple, c’est un opérateur d’assignation. La particularité est que notre += ajoute ce qui suit à la variable ! Il peut donc fonctionner avec les deux types que nous venons de voir, voici un petit exemple :

var a = 'Je ne suis qu\'un test';

a += ' pour le cours de Nek\''

On ne fait pas d’opérations sur les booléens ( si vous avez des idées d’opérations je suis ouvert ;-) ).

D. Trouver le type d’une variable Il peut être intéressant de trouver le type d’une variable pour savoir si on peut faire telle ou telle opération avec celle-ci. Pour trouver un type nous possédons une fonction assez sympathique : typeof. Vous allez comprendre pourquoi je vous ai donné des termes en anglais lors de la définition des types. Testez ce code :

var a = 30;

var b = 'Du texte';

var c = true;

var d;

alert('Le type de a est ' + typeof(a) + ', le type de b est ' + typeof(b) + ', le type

de c est ' + typeof(c) + ' et enfin le type de d est ' + typeof(d));

La fonction typeof nous affiche le type de chacune des variables, en toutes logique nous avons donc les types suivants en fonction de la variable :

Variable a number

Variable b string

Variable c boolean

Variable d undefined

« Pardon ?! En toute logique ? Nan nan je ne suis pas d’accord ! Le undefined il vient d’où ? » La variable d est déclarée mais ne contient rien, elle a un type indéfini ! Et son contenu aura la même valeur puisqu’il n’est pas défini non plus (remarquez qu’en JavaScript l’un va avec l’autre !).

11

Notez tout de même au passage que vous pouvez déclarer plusieurs variables sur la même ligne sans rajouter le mot clé « var » et en les séparant par des virgules (n’oubliez tout de même pas le point virgule à la fin !).

Encore une dernière chose : l’erreur NaN. Vous la rencontrerez peut être, cette erreur est pourtant simple à expliquer : NotANumber. C’est que vous avez du faire une erreur dans les types… A vous de débuguer le script à l’aide de typeof et alert !

E. Des boîtes de dialogues, encore des boîtes de dialogue, toujours des boîtes… Jusqu’ici nous avons travaillé avec une boîte de dialogue : alert() et toujours la même. Mais alert n’est pas la seule boîte de dialogue qu’il existe ! En fait, en JS nous avons trois types de boîtes de dialogue que je vais vous présenter avec des exemples clairs.

Alert, la boîte de base

Je ne m’attarde pas longtemps sur alert(), nous avons déjà appris à nous en servir, je donne juste un exemple

rapide :

alert('Je suis une boîte de dialogue classique.');

Si vous souhaitez utiliser une console JavaScript avec chrome, safari, ou sous firefox avec firebug, je vous conseille fortement de remplacer alert(‘message’) par console.log(‘message’) dans la suite du cours, ça vous évitera de devoir cliquer tout le temps sur ok, nous en reparleront en annexe.

Confirm, la boîte de confirmation

Comme son nom l’indique, cette boite de dialogue permet par exemple de confirmer une action. On utilise la fonction confirm pour récupérer une confirmation d’un utilisateur.

var confirmation = confirm('Êtes vous sûr de vouloir continuer ?');

alert(confirmation); // Testons le contenu de notre variable

La variable confirmation sera en fait de type booléen et contiendra la valeur « true » ou « false » en fonction de

l’action de l’utilisateur (clic sur « ok » ou « annuler »).

Prompt, la boite de saisie

Cette boîte de dialogue fait également intervenir l’utilisateur mais ici l’utilisateur est bien plus libre que précédemment, il peut saisir l’information qu’il souhaite. On utilise la fonction prompt pour récupérer une entrée utilisateur dans une boîte de dialogue.

var saisie = prompt('Saisissez un texte !');

12

alert(saisie); // Testons le contenu de la variable

On peut donc constater que la valeur saisie par l’utilisateur a été récupérée dans la variable saisie.

Un point sur les boîtes de dialogue

Certes les boîtes de dialogue sont sympathique pour débuter en JS, en pratique il faut faire très attention, ces boîtes

de dialogues détériorent énormément l’expérience utilisateur, ça peut tout simplement faire fuir vos visiteurs ! Alors

attention…

Notez tout de même que la boîte de dialogue alert() est un cas un peu particulier puisqu’elle permet de débuguer facilement le code JavaScript ! Par conséquent son utilisation est encouragée lors des développement, mais n’oubliez pas de supprimer les lignes alert() pour la mise en production de votre site ! Nous ferons un point sur le débugage de scripts plus tard ;-) .

F. Attention à vos noms de variable ! Les noms de variables sont très importants à la compréhension d’un programme ou d’un script

Un nom pour être reconnu

Un script sera beaucoup plus clair si les variables ont des noms clairs. Voici un exemple simple :

var pseudo = prompt('Comment t\'appelles-tu ?');

// Le code précédent est beaucoup plus clair que le suivant

var a = prompt('Comment t\'appelles-tu ?');

// Vous ne trouvez pas ?

III. Les conditions et la notion d’expression Une des opérations les plus importantes en programmation sont les conditions : en fonction d’une condition, faire telle chose, sinon faire autre chose. Une condition prend en paramètre une expression. Et c’est ici que nous retrouvons un type que nous connaissons déjà… J’ai nommé le booléen ! Hé oui, ce type qui ne peut avoir que deux valeurs, à savoir « vrai » ou « faux », et bien nous y voilà, c’est les deux seules valeurs que peuvent prendre en compte une condition ! (logique, une condition est vrai OU fausse, pas autre chose)

A. L’expression Une expression est une chaine de variable(s) (et opérateur(s)) qui renvoie quelque chose. Vous ne remarquez rien ? Nous avons déjà vu des expressions ! Avant de commencer, je tiens à signaler que nous utiliserons systématiquement alert() pour afficher le résultat de nos expressions.

La variable expression

Notez qu’une variable seule convient à la définition, c’est donc une expression à elle seule ! En effet si on place une variable dans un alert(), nous allons avoir une boîte de dialogue où est affiché le nom de la variable !

13

Les expressions opératives

Nous avons déjà parlé de faire des opérations sur des nombres ou même des chaines de caractères, ces opérations

renvoyaient bien quelque chose puisqu’on les utilisait pour assigner une valeur à nos variables. Ces expressions

renvoient un nombre, il n’y a qu’à faire le test :

var nombre = 3;

alert(nombre+7*2);

Le résultat du calcul est affiché rien de formidable ;-).

Les expressions d’assignation

Nous en avons déjà vu également, d’ailleurs il y en a une dans l’exemple précédent. Ça ne paraît pas forcément

évident aux premiers abords mais une expression qui contient le signe = est renvoie bien quelque chose ! Mais ça

reste très simple, cette expression renvoie la valeur assignée ! Testons :

var nombre = 5;

alert(nombre = 3);

alert(nombre);

Nous obtenons deux fois le résultat « 3 », l’assignation a renvoyé 3 mais a bel et bien fonctionnée !

Les expressions de comparaison

Nous arrivons à la notion la plus importante du chapitre ! Les expressions de comparaison sont des expressions qui

renvoient « vrai » ou « faux » (ou en anglais « true » ou « false »), souvenez vous des fameux booléens !

On utilisera ici les opérateurs de comparaison suivants :

== Représente l’égalité, on double le signe = pour bien marquer la différence avec l’assignation. Attention à ne pas confondre !

=== Représente l’égalité, mais prend en compte le type ! Par exemple 3 en nombre n’est pas égale à "3" en chaine de caractères !

!= Représente l’inégalité

> Supérieur à …

< Inférieur à…

>= Supérieur ou égal à…

<= Inférieur ou égal à…

Faisons quelques tests :

alert(2 == 2);

alert(4 > 10);

var a = 10, b = 15;

alert(a != b);

14

Voici ce que donne le code précédent, dans cet ordre.

Je ne vous fais pas un dessin, le code affiche ce qu’on lui demande d’afficher ! À savoir si c’est vrai ou faux, mais en

anglais, et il va falloir vous y habituer par ce que ça va être tout le temps comme ça à partir de maintenant on

parlera sans arrêt de booléen true ou false.

Les expressions d’associations

Ces expressions sont également essentiels à la programmation, c’est grâce à elles qu’on peut comparer deux

expressions. Pour ce faire on utilise des opérateurs d’association. En français on les traduira par « ou », « et » et

enfin « non ». Je ne vous cache rien, ces opérateurs se servent de la valeur booléenne des expressions pour les

comparer !

|| Représente « ou » Il faut qu’au moins une des deux expressions (gauche/droite) soit vraie pour que l’expression finale renvoie true.

&& Représente « et » Il faut que les deux expressions (gauche/droite) soient vraies pour que l’expression finale renvoie true.

! Représente « non », on l’utilise pour prendre la valeur inverse du booléen qui suit.

Je vous vois déjà très sceptique. Ne perdons pas de temps, passons aux exemples, ils vous aideront à comprendre. Je

traduirais chaque bout de code en français pour que vous compreniez bien.

var a = 3, b = 15;

alert( 3 != 2 && a < b);

3 est différent de 2 (ce qui est vrai) OU la valeur de a est inférieur à la valeur de b (qui est vrai aussi). On a donc « vrai ou vrai » évidemment, la réponse est vrai.

var a = 3, b = 15;

alert( 3 == 2 && a != b);

3 est égal à 2 (ce qui est faux) ET la valeur de a n’est pas égale à la valeur de b (ce qui est vrai). On a donc « faux et vrai », malheureusement l’opérateur « et » renvoie faux tant qu’il n’a pas deux « vrai ». La réponse est donc faux.

var a = 3, b = 15;

alert( !( 3 == 2 && a != 15) );

Ce cas est très simple, le point d’exclamation inverse la valeur de l’expression booléenne. Ainsi cette réponse qui était fausse dans l’exemple précédent devient vrai ici !

15

On utilise des parenthèses autour de l’expression pour signaler à laquelle le point d’exclamation se réfère, elles ne sont cependant pas obligatoire. Ici elles sont obligatoires puisque nous avons 7 expressions (rappelez vous, chaque variable est une expression, chaque nombre en est également une ! JavaScript est arrangeant, il s’occupe de les transformer en expressions booléennes, vous pouvez tester !).

Vous avez peut être des difficultés à comprendre comment fonctionnent ces opérateurs et ce type d’expressions mais ne vous en faites pas, vous comprendrez dans le chapitre suivant ! Beaucoup de cours ne passent pas par cette étape jugée inutile mais je pense qu’il est important que vous sachiez que ce type d’écriture est une expression comme une autre (quoi qu’un peu spéciale). Si vous voulez aller plus loin vous pouvez vous renseigner sur l’algèbre de Boole !

B. Les conditions Les conditions sont le cœur de l’informatique, c’est grâce à cela qu’un programme peut « réfléchir ». C’est en fait

une instruction qui permet, en fonction d’une expression d’exécuter ou non un ensemble d’autres instructions. On

délimitera ce sous ensemble d’instructions par des crochets ( { } ).

Les conditions classiques

Une condition est en fait la traduction en anglais des mots clés suivants : si ( quelque chose ) alors faire { autre chose

}, donc en anglais if ( expression ) { instructions }. Vous pouvez remarquer qu’on ne traduit pas le « alors faire », c’est

tout simplement parce que dans tous les cas, si on a « si » on a « alors », ce qui est inutile se traduit rarement en

programmation.

Ouais, sympa ton truc mais comment on sait si c’est oui ou non ? Vous ne remarquez pas ? « oui ou non » « vrai ou faux », ça ne sonne pas de la même façon ? Ce n’est pas un hasard,

c’est bien une expression booléenne qu’il faudra donner à notre condition pour quelle puisse exécuter ou non du

code en fonction de l’expression.

Testons !

if(3 < 2) {

alert('L nombre 3 est inférieur à 10 !');

}

Avec ce code on aura une boîte de dialogue qui nous affichera le message voulu puisque 3 est effectivement

inférieur à 10. Cela ne choque personne ? Continuons !

if(prompt('Entrez un nombre') < 10){

alert('Le nombre est inférieur à 10');

}

Nous avons vu que prompt renvoie un nombre, pourquoi ne pas utiliser ce nombre directement pour le tester ? C’est

de ce que fait ce code, qui nous affiche la boite de dialogues à la seule condition que l’utilisateur tape un nombre

inférieur à 10 !

Encore plus fort, on peut utiliser des booléens et toutes sortes d’opérateurs !

var a = 5;

if(true ||a * 2 == 10){

alert("Hello");

}

16

Ici on a « vrai OU a*2 vaut 10 », qui est vrai ici, mais sera également toujours vrai ! En effet « vrai OU n’importe quoi

d’autre » sera toujours vrai. Donc si a ne vaut pas 5 la condition sera vérifiée et on verra apparaitre à l’écran

« hello ! ».

Supprimer les accolades

Nous avons vu la base des conditions, nous pouvons à présent nous permettre de voir des structures un peu plus…

Exotiques.

On peut en effet supprimer les accolades à une condition, qu’il n’y ai qu’une seule instruction dans la condition.

Rappelez-vous, une instruction est une ligne qui se termine par un point virgule.

Ça veut dire que si on met un point virgule à la fin de la condition il ne se passe plus rien ? En effet, si on fait quelque chose du genre if(condition) ; il ne se passera strictement rien !

Voyons un exemple de conditions sans les accolades :

if(3 < 2)

alert('L nombre 3 est inférieur à 10 !');

Les conditions ternaires

Les conditions ternaires sont des conditions un peu spéciales qu’on utilise sur une seule ligne et en général pour

assigner des valeurs. C’est la syntaxe de la condition qui change beaucoup, en effet le if n’existe plus, le else non

plus : ils sont remplacés respectivement par « ? » et « : ».

Voici une condition classique qu’on pourra remplacer par une condition ternaire :

var test = true;

var a = '';

if(test)

a = 'vrai';

else

a = 'faux';

Et voici son remplacement en conditions ternaires: var test = true;

var a = (test) ? 'vrai' : 'faux';

Qu’est-ce qui a changé ? 1. L’expression booléenne est placée avant le ? alors que je vous avais spécifié que le ? remplaçait le if ; 2. On utilise une seule fois le = d’assignation, le reste est géré par la condition ; 3. Le : correspond au else et sa position n’a pas changé.

Comme vous pouvez le constater cette syntaxe un peu particulière permet de gagner en nombre de lignes. Cependant n’en abusez pas si vous décidez de l’utiliser, elle peut très rapidement devenir illisible et au moment de la relecture de votre code vous vous en mordrez les doigts !

Le switch

Switch est tout simplement une syntaxe permettant d’écrire un tas de conditions plus simplement. Voici deux exemples qui vous convaincrons !

var nombre = parseInt(prompt('Choisissez un nombre entre 0 et 10'));

if(nombre === 1) {

alert('Je suis le premier message, le meilleur !');

} else if(nombre === 2) {

alert('Je suis le second message, le véritable meilleur !');

} else if(nombre === 3) {

alert('Je suis le message qui créé la panique');

} else if(nombre === 4) {

alert('Moi j\'aime mon métier, j\'ai la classe');

} else if(nombre === 5) {

17

alert('Je suis pratique à compter moi au moins !');

} else if(nombre === 6) {

alert('Je suis le 5 de près...');

} else if(nombre === 7) {

alert('Je suis lacé de toutes ces phrases');

} else if(nombre === 8) {

alert('Moi je suis symétrique !');

} else if(nombre === 9) {

alert('Je suis le petit dernier ;');

} else {

alert('C\'était un nombre entre 1 et 10 ! Pas ' + nombre + ' !');

}

var nombre = prompt('Choisissez un nombre entre 0 et 10');

switch(parseInt(nombre)){

case 1:

alert('Je suis le premier message, le meilleur !');

break;

case 2:

alert('Je suis le second message, le véritable meilleur !');

break;

case 3:

alert('Je suis le message qui créé la panique');

break;

case 4:

alert('Moi j\'aime mon métier, j\'ai la classe');

break;

case 5:

alert('Je suis pratique à compter moi au moins !');

break;

case 6:

alert('Je suis le 5 de près...');

break;

case 7:

alert('Je suis lacé de toutes ces phrases');

break;

case 8:

alert('Moi je suis symétrique !');

break;

case 9:

alert('Je suis le petit dernier ;)');

break;

default:

alert('C\'était un nombre entre 1 et 10 ! Pas '+nombre+' !');

}

Attention, le switch vérifie le type, comme prompt() renvoie une chaîne de caractères, nous devons transformer en nombre à l’aide de parseInt (on aurait aussi pu mettre chaque nombre entre guillemets). Vous pouvez constater que le switch est tout de même beaucoup plus clair ! Analysons tout cela :

Switch prend entre parenthèse une variable ;

Entre les accolades qui suivent, on place une suite de « case » qui remplacent en fait les if ;

Les « case » sont suivis directement de la valeur qu’ils représentent puis de deux points ;

Après les deux points nous avons une ou plusieurs instructions ;

Le break, il permet de dire que la case est terminée ;

Default est le nom de la case qui s’exécutera si aucune des autres ne s’est exécutée. Il ne vous reste plus qu’à tester ce code !

Des conditions avec autre chose que des expressions booléennes ?

Les expressions booléennes sont reconnues dans tous les langages de programmation. Cependant en JavaScript vous

avez tout à fait le droit d’utiliser une chaine de caractère ou un entier comme condition ! Voici un petit récapitulatif

de comment réagira votre condition :

18

Chaine de caractères vide FALSE

Chaine de caractères non vide TRUE

0 FALSE

Nombre différent de 0 TRUE

Exemple :

if(1) alert('Vrai !') else alert('Faux !');

L’exercice

Voici un petit exercice tout simple qui vous permettra de voir si vous avez compris les conditions.

Vérifiez que l’utilisateur a l’âge requis (à savoir 18ans ici) pour voir le site, lui afficher une erreur puis utiliser la

fonction window.location.replace(‘http://google.com’) ;

Solution de l’exercice en annexe ;-) .

C. Les boucles Ne nous arrêtons pas aux simples conditions en si bon chemin ! Il existe une structure très pratique permettant de

répéter un groupe d’instructions qui s’apparente fortement aux conditions. J’ai nommé les boucles. Il existe

différents types de boucles que nous allons regarder de près en détail ici =) .

Les boucles « tant que » (while)

La boucle while est la boucle « de base » elle existe dans la plupart des langages et permet de reproduire n’importe

quel autre type de boucle. Pour l’utiliser nous utiliserons le mot clé while accompagné de parenthèses (comme le if)

contenant… Une condition ! Suite à cela nous placerons des accolades qui délimiteront le bloc d’instruction à

répéter. La répétition se fera tant que la condition est vraie. Attention aux boucles infinies qui feront planter le

navigateur, ne tentez pas un while(true) !

Faisons donc un petit test !

var nbTomates = 0; // Nombre de tomates cueillies

var tomatesPotagerTotal = 5;

while(nbTomates <= tomatesPotagerTotal){ // Tant que nbTomates est inférieur ou égal à

tomatesPotagerTotal

tomates++;

alert('On a cueilli '+tomates+' tomates');

}

On répète les deux instructions contenues entre les accolades tant que le nombre de tomates n’est pas égale au

nombres de tomates du potager (oui c’est imagé, oui j’ai de l’inspiration :D) .

Mais pourquoi tu utilises « <= » et pas « != » alors que tu dis « tant que ce n’est pas égal » ? Un ordinateur n’est pas forcément parfait et peu provoquer des légères erreurs dans ses calculs, ça arrive particulièrement souvent en JavaScript ! (beaucoup moins dans les autres langages, voir jamais en fait) Si vous vous retrouvez avec 5.000000000001 dans votre variable nbTomates, celle-ci ne sera pas égale à tomatesPotagerTotal ! Votre boucle continuera à l’infini… Il vaut donc mieux prévoir que guérir. C’est une habitude de programmeur, et une bonne habitude que je vous conseille de prendre ! Remarquez qu’ici utiliser « != » ne poserait pas de problème (normalement… Je vous invite à aller voir l’annexe

wtfJs).

Remarquez qu’on peut tout à fait utiliser une seule instruction pour une boucle, on oubliera les accolades de la même façon que les conditions. On peut également supprimer purement et simplement les instructions quand ce qui nous intéresse se fait directement dans la boucle. Voici un petit exemple :

19

while( confirm('Pour continuer cliquez sur ok') );

On n’oublie pas de terminer par un point virgule. Confirm() renvoie « true » ou « false » et n’a besoin de rien d’autre

que d’une action de l’utilisateur pour modifier sa valeur. Le programme restera bloqué à cette boucle tant que

l’utilisateur n’aura pas cliqué sur « ok ».

Les boucles « faire … tant que » (do { }while)

Les boucles do…while() permettent en fait d’exécuter le bloc d’instruction au moins une fois avant de tester la condition, je vous l’avais dit, tout va ressembler à la boucle while ;-). Voici donc un exemple :

var bonbons = prompt('Stock de bonbons ?');

var enfants = 0;

do {

alert('On veut des bonbons !');

enfants++;

} while(enfants <= bonbons); // Tant qu’on a encore des bonbons (quels rapias les

enfants !)

En fait le while représente une condition qui revient à do si elle est vraie. J’attire votre attention sur le point virgule

à la fin du while, ne l’oubliez pas !

Les boucles « pour » (for)

Voici une boucle qui change un peu, elle est intéressante et va beaucoup nous servir par la suite. Cette boucle utilise un compteur ! Elle s’utilise grossièrement comme la boucle while mais à la place de la condition nous avons 3 instructions :

1. Initialisation du compteur ;

2. Condition ;

3. Incrémentation du compteur.

Le tout séparé de points virgules.

Ok, t’es gentil toi, c’est quoi une incrémentation ? Une incrémentation c’est le fait d’augmenter ou de réduire la valeur d’une variable. En général on utilise – ou ++.

Nous voilà arrivé à l’exemple :

for(var i = 0; i <= 10; i++){

alert('La variable i vaut: '+i);

}

« Pour i de 0 à 10 avec un pas de 1 », voici la traduction en français de ce que fait cette boucle, à chaque passage la valeur de i est modifiée. Voyons d’un peu plus près ce qui se passe :

1. Initialisation de la variable i à 0 ; 2. Notre condition : tant que i est inférieur ou égal à 10 ; 3. Exécution du bloc d’instructions ; 4. L’incrémentation : i++ signifie qu’on augmente la valeur de i de 1, on aurait pu écrire i = i+1.

Cette boucle correspond à la boucle while suivante :

var i = 0;

while(i<=10){

alert('La variable i vaut: '+i);

i++;

}

Il y a un gain de lettres, donc de touches à taper, et comme nous les programmeurs on est des flemmards, c’est plutôt cool !

20

Le break c’est mal, mais ça existe

L’instruction break ne permet pas que de terminer des cases, elle permet aussi de casser une boucle à n’importe

quel moment de celle-ci. Cette instruction existe et est tout à fait possible mais déconseillée. En effet, bien souvent

on a tendance à utiliser le break lorsqu’on a une condition de boucle mal faite !

Je vous dis que ça existe mais ne vous donne pas d’exemple : c’est mal. En revanche si vous tenez à l’utiliser,

n’oubliez pas le point virgule après votre break ;-).

L’exercice

Je vous propose un exercice simple, un plus ou moins !

Le script va générer un nombre (on utilisera Math.floor(Math.random() * 1000)+1 pour générer un nombre aléatoire

entre 0 et 1000) et l’utilisateur devra le trouver (utiliser prompt).

Correction de l’exercice en annexe.

IV. Les fonctions En JavaScript nous pouvons utiliser des fonctions, ce sont des blocs de code qui permettent d’automatiser certaines

opérations, nous en avons déjà vues quelques unes : alert(), prompt(), confirm(). Nous allons maintenant voir

comment créer des fonctions.

A. La syntaxe d’une fonction

La base de la fonction

Une fonction est définie par un nom. On utilise le mot clé function devant ce nom et des parenthèses après celui-ci

et enfin un bloc de code délimité par des accolades qui sera exécuté à l’appel de la fonction.

Créons une fonction dédiée à ce cours :

function coursJavascript(){

// Nous placerons nos instructions ici

}

Nous avons bien : 1. Le mot clé function ; 2. Le nom de la fonction « coursJavascript » ; 3. Les parenthèses ; 4. Les accolades contenant d’éventuelles instructions.

Notre fonction est créée, malheureusement dans son état actuel elle ne va pas nous servir à grand-chose ! Il ne nous reste plus qu’à donner des instructions à notre fonction, puis à l’appeler !

function coursJavascript(){

alert('Il est trop bien ce cours !'); // Utilisation d'alert pour afficher une

boîte de dialogue

}

// Appel de la fonction

coursJavascript();

Vous pouvez tester chez vous, ça nous affichera bien une boîte de dialogue !

21

Remarquez qu’ici j’ai utilisé une fonction dans notre fonction ! Vous pouvez utiliser n’importe quelle instruction. Variables, conditions, boucles, rien n’est interdit dans les fonctions !

Les paramètres (ou arguments)

Une fonction peut prendre en paramètre des variables ou d’autres éléments comme des chaines de caractères ou

des nombres, en fonction de ces paramètres notre fonction pourra agir différemment ! Il suffit de mettre entre

parenthèse des noms de variables qu’on pourra réutiliser par la suite (n’utilisez pas var !). Chaque variable sera

espacée par une virgule.

Ne perdons pas de temps, voici un exemple concret :

// On défini la fonction

fonction coursJavascript(nom, question){

alert('Salut '+ nom + ' !');

if(question) alert('Tu vas bien ?');

}

// On appelle la fonction

coursJavascript('Pierre', true);

Cette fonction prend en paramètre deux variables :

« nom » : une variable qui sera une chaîne de caractère, ici elle représentera le nom de l’utilisateur ;

« question » : une variable booléenne qui définira si la fonction demandera des nouvelles de notre utilisateur ou pas.

Mais ici on ne demande pas vraiment le nom à l’utilisateur… Hum. Prompt pourrait nous aider, prompt renvoie bien une chaîne de caractère entrée par l’utilisateur… Parfait ! Gardons la même fonction mais modifions un peu le code :

coursJavascript(prompt('Quel est ton nom ?'), true);

Formidable ! En une ligne nous avons posé une question et utilisé une fonction =).

B. La portée des variables Comme je l’ai dit précédemment, vous pouvez créer des variables dans les fonctions. Mais vous ne pouvez pas les

utiliser comme vous le voulez. Une variable déclarée dans une fonction est locale à celle-ci, c'est-à-dire que vous ne

pouvez pas l’utiliser en dehors de la fonction, ça peut paraître déroutant au début mais ça semble tout à fait logique

par la suite.

En revanche une variable déclarée hors d’une fonction peut parfaitement être réutilisée par la fonction, dans ce cas

on ne la déclarera pas dans la fonction (on n’utilisera pas le mot clé « var »).

Voici un petit test pour vous en convaincre :

var a = 1;

function fonctionDeTest(){

alert('La variable a contient: '+a);

alert('La variable b contient: '+b);

var c = 3;

}

var b = 2;

fonctionDeTest();

alert('La variable c contient: '+c);

Vous pouvez constater que l’endroit de déclaration des variables globales importe peu, l’essentiel est que cette déclaration soit faite avant l’appel à la fonction ! Si on test ce code on peut également voir que la variable c contient « undefined », autrement dit elle n’existe pas (nous l’avons vu dans le chapitre des variables !). Undefined, en français « non définie », on ne peut pas faire plus clair.

22

C. Variables et fonctions… C’est ambigu ! Je vous déconseille de définir une variable du même type qu’une fonction… Parce qu’en JS une fonction, c’est juste

une variable particulière. Plus précisément, une fonction est une variable contenant une fonction… Je vois déjà de la

brume arrivé dans votre esprit qui s’éloigne. Ne partez pas, restez encore un peu !

Voici une illustration qui devrait vous aider à comprendre le principe :

var maFonction = function(){

alert('J\'ai bien utilisé ma fonction !');

}

alert(typeof(maFonction));

maFonction();

On assigne une fonction qui n’a pas de nom dans une variable, ça revient au même que déclarer une fonction qui a un nom directement. J’attire votre attention sur le point virgule à la fin de l’instruction, c’est bel et bien une déclaration de variable, il ne faut donc pas l’oublier ! Notez qu’une fonction sans nom est appelé une fonction anonyme. Grâce à typeof on se rend compte d’une chose absolument effroyable : je vous ai caché un type de variable ! Le alert() que j’ai discrètement placé dans ce bout de code nous affiche effectivement le type « function », autrement dit une variable peut être de type fonction. Un peu difficile à avaler, je veux bien le comprendre. Mais allons tout de même un peu plus loin en passant… Une fonction en paramètre à une autre fonction !

function maFonction(F){

F();

}

maFonction( function() { alert('Je suis une fonction anonyme !'); });

On peut bidouiller les fonctions comme des variables ! On se permet d’envoyer des nombres ou des chaines de caractères à des fonctions, alors après tout pourquoi ne pas envoyer une fonction à une fonction ?

V. La notion d’objet, de classe, exemple avec la classe String JavaScript est un langage Orienté Objet, pour l’instant nous n’avons exploré que la face structurelle (fonctionnelle

pour les puristes) du JavaScript, voyons un peu comment se comporte JavaScript avec des objets.

A. Un objet c’est quoi ?

Une boîte

Juste comme ça, tu ne nous avais pas dit qu’une variable était une boite ?... Oui, c’est vrai, une variable est en quelques sortes une boîte. Mais une variable peut contenir un objet ! Pour des raisons de compréhension, je ne vais pas utiliser le bon vocabulaire, ne vous inquiétez pas ceci sera corrigé par la suite ! Pour être précis, un objet est en quelques sortes un ensemble de variables, remarquez que nous avons vu qu’une fonction est aussi une variable ! Donc un objet peut aussi contenir des fonctions ! Etudions la syntaxe d’un objet :

On déclare un objet entre crochets « { } » ;

On liste ensuite les variables en les séparant de leur contenu par deux points « : » ;

On sépare chaque variable avec une virgule « , » ;

Pour utiliser une variable d’objet dans une fonction d’objet, on peut utiliser le mot clé « this » qui réfère à l’objet lui-même, on peut donc utiliser « this.variable », remarquez qu’on peut tout a fait appeler une fonction de la sorte.

Pour l’utiliser :

On relie la variable qui contient l’objet et la variable contenue dans l’objet par un point.

Quand c’est une fonction d’un objet on n’oublie pas les parenthèses ! Illustrons tout cela dans un petit exemple :

23

var monObjet = {

a: 12,

b: "patates",

c: function(){

alert('J\'ai ' + this.a + ' ' + this.b);

}

};

monObjet.c();

Le code précédent affichera « J’ai 12 patates ».

Remarquez que si nous utilisons « alert(monObjet.a) » nous verrons bien 12 dans notre alert !

Parcourir un objet

Pour parcourir un objet on utilise une boucle for ainsi qu’une variable qui nous indiquera le nom de la propriété

qu’on parcourt. On utilise donc for(clef in monObjet). Pour récupérer la valeur de la propriété on utilisera des

crochets.

Voici un petit exemple : for(clef in monObjet){

alert(monObjet[clef]);

}

Le code précédent affiche toutes les valeurs contenues dans l’objet.

Un peu de vocabulaire

Une variable contenue dans un objet est appelée une méthode. Une fonction contenue dans un objet est une

méthode.

Retenez bien les deux termes précédents, nous les utiliserons régulièrement par la suite !

Nous allons par la suite apprendre à créer des classes, sachez qu’en JS pour utiliser la Programmation Orientée

Objet, on a tendance à « tricher » car le langage est un peu particulier de ce point de vue. Nous avons

précédemment créé un objet, c’est une variable qui a un contenu précis qu’on ne pourra pas réutiliser,

habituellement en programmation on appelle ceci une classe static.

Ne vous affolez pas ! Nous allons voir de suite ce qu’est une classe.

B. Une classe c’est quoi ? Un objet est généralement une instance de classe. C’est bel et bien quelque chose qui contient des attributs et des

méthodes. Mais au contraire de l’objet qu’on envoie directement dans une variable, c’est défini comme une

fonction. On doit ensuite l’instancier pour l’envoyer dans une variable, variable qui contiendra donc un objet : un

objet est une instance de classe.

Comme je l’ai dit précédemment, en JS on « triche ». On utilise beaucoup de classes, énormément la notion objet,

mais définir soit même une classe ressemble à un bidouillage ! On utilisera donc des fonctions dans des fonctions

pour créer une classe.

24

Pour instancier une classe, nous utiliserons le mot-clé new. Pour déclarer les attributs nous utiliserons le mot-clé

this.

Reprenons l’exemple précédent et adaptons-le en classe :

function maClasse() {

this.a = 12;

this.b = 'patates';

this.c = function(){

alert('J\'ai ' + this.a + ' ' + this.b);

};

}

var monObjet = new maClasse();

monObjet.c();

var autreObjet = new maClasse();

autreObjet.a = 10;

autreObjet.b = 'fruits';

autreObjet.c();

C. La classe String Je vous avais prévenu, nous y voilà, on revient sur la classe String. Cette classe fait parti des classes de JavaScript

prédéfinies, nous en verrons d’autres par la suite. Elle est aussi très particulière car il est impossible de l’instancier

comme une classe normale. Et pourtant nous l’avons déjà instanciée de nombreuses fois !

Pour instancier la classe String il suffit en fait de placer du texte entre guillemets, une fois que vous avez ce texte

vous pourrez sans aucun problème utiliser la classe String.

C’est donc cette classe particulière que je vais vous présenter. Nous allons parler des attributs et méthodes les plus

utiles, si vous voulez en savoir plus je vous renvoie à la doc :

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String

Les attributs de la classe String

La classe string ne possède en réalité qu’un seul attribut, mais il est des plus utiles !

Il s’agit de l’attribut « length » qui permet de connaître le nombre total de caractères dans une chaîne de caractères. Testons !

alert('youpi'.length);

Attention cependant, cet attribut contient le nombre de caractères, pas la position du dernier caractère. En effet les

positions des caractères commencent à 0. Mais nous verrons cela plus tard.

25

Les principales méthodes de la classe String

charAt(position)

Cette méthode permet de retrouver un caractère d’une chaîne en fonction de sa place dans celle-ci. On lui passe en

paramètre une position, on commence à compter les positions à partir de 0.

Voici par exemple comment afficher le dernier caractère de « youpi » :

var chaine = 'youpi';

alert(chaine.charAt(chaine.length-1));

On n’oublie pas de soustraire 1 au nombre total de caractères : on commence les positions à 0, alors qu’on compte le nombre de caractères à partir de 1. On obtient bien la lettre i !

substr(début, taille)

Cette méthode permet de récupérer un morceau d’une chaîne de caractères, par exemple « ba » dans « babar », le

début de ce qu’on veut est 0, comme vu précédemment, les chaînes commencent à 0. La longueur est 2 (on veut

deux lettres).

Voici notre exemple en pratique :

var a = "babar";

alert(a.substr(0,2)); // Affiche "ba"

Attention à ne pas confondre substr avec substring qui fonctionne différemment, elle retourne la chaine entre A et B : substring(A,B).

toUpperCase() et toLowerCase()

Ces méthodes permettent respectivement de transformer en majuscule ou en minuscule la chaîne concernée, elles

ne prennent pas de paramètres, c’est la magie de la programmation orientée objet ;-) .

Voici donc comme d’habitude un exemple pour illustrer tout cela :

var a = "Minecraft Est Un Jeu Addictif.";

alert(a.toUpperCase()); // Affiche "MINECRAFT EST UN JEU ADDICTIF."

alert(a.toLowerCase()); // Affiche "minecraft est un jeu addictif."

trim()

Cette méthode permet de supprimer les espaces et retours à la ligne qu’on peut rencontrer en début ou fin de chaîne de caractères, ça peut s’avérer très pratique.

Je vous fais encore un exemple mais sachez que vous ne verrez rien avec alert, un espace étant invisible à l’œil…

var a = "\nHello ";

alert(a); // afiche Hello une ligne plus bas que la normale

alert(a.trim()); // affiche Hello sans l'espace et le retour à la ligne.

Vous ne voyez pas à quoi ça sert ? Imaginez qu’un utilisateur veuille vous piéger, il entre un espace à la place d’une donnée, vous vérifiez que la saisie contienne bien quelque chose, oui, ça contient quelque chose… Mais vous ne voulez certainement pas d’un espace seul ! Un petit trim au préalable vous évitera ce désagrément ;-).

Faire attention à faire la différence entre une classe et un type primitif

En JS on peut utiliser la classe String pour instancier une chaîne de caractères, mais on peut également simplement utiliser le dit type primitif, à savoir assigner avec votre texte entre guillemets. Voici un bout de code illustratif :

var assignViaClass = new String("Cette chaîne est assignée via une classe.");

var assignViaPrimitif = "Cette chaîne est assignée via des guillemets, elle est donc

26

de type \"primitif\".";

Notez qu’il en va de même pour les autres types. Jusqu’ici tout va bien, mais sur certaines opérations, JS vous fournira des mauvais résultats, faites donc attention. Vous trouverez une liste des comportements étranges de JavaScript sur ce site : http://wtfjs.com

D. Allons un peu plus loin JavaScript est – comme vous l’avez surement remarqué – un langage très orienté objet. Il comporte donc un grand

ensemble de classes prédéfinies. Nous verrons certaines mais ne parleront surement pas de toutes.

Voici une liste non exhaustive des classes que vous pourrez utiliser :

« Math » : elle nous permettra d’effectuer beaucoup d’opérations, exemple : Math.random() ; renverra un

chiffre aléatoire entre 0 et 1.

« Date » : elle nous permet de travailler avec les dates.

« Array » : elle permet d’utiliser des tableaux, elle a aussi son équivalence en type primitif, nous en

reparlerons.

« RegExp » : elle permet d’utiliser des expressions régulières, c’est un point un peu particulier. Nous en

reparlerons également.

« Object » : c’est la classe « basique », celle dont toutes les classes héritent que vous le veuillez ou pas. Si

vous ne comprenez pas ce que veut dire hériter, ne vous inquiétez pas, cette classe ne sert pas à grand-

chose dans l’immédiat, sachez juste qu’elle est lié à tout.

VI. Les tableaux Les tableaux sont une manière d’organiser nos variables, ou plutôt la structure même de la variable.

1. Qu’est-ce qu’un tableau ?

La base des tableaux

Un tableau est en quelques sortes une composition de variables. On les appelle comme cela (array en anglais) car ils

sont facilement représentables sous forme de tableaux.

0 Valeur1

1 Valeur2

2 Valeur3

… …

En pratique on représente ceci de deux façons différentes, l’une par type primitif, l’autre par la classe Array. Voici un exemple :

var primitif = ["Lundi", "Mardi", "Mercredi"];

var classeArray = new Array("Lundi", "Mardi", "Mercredi");

Ces deux lignes ont le même effet, elles créent toutes les deux un tableau de 3 cases contenant respectivement « Lundi », « Mardi » et « Mercredi ». Notez que ces cases commencent systématiquement par 0. Les nombres 0, 1 et 2 sont les clés (keys) de notre tableau.

Accéder aux cases d’un tableau

L’accès aux cases d’un tableau se fait en utilisant simplement des crochets après le nom de la variable :

alert(primitif[0]);

27

Cette ligne de code nous affichera « Lundi » dans une boîte de dialogue, en effet c’est bien ce qui est enregistré dans notre case 0.

Assigner une nouvelle valeur à une case

Une assignation se fait de la même façon qu’un accès à la variable :

primitif[0] = "Nouvelle valeur";

Du texte dans les clés

Tous les langages ne le permettent pas mais JavaScript le permet, ne nous en privons donc pas. On peut utiliser à défaut de nombres dans les indexes de cases, des chaînes de caractères.

primitif['clef'] = 'Nouvelle valeur';

Jusqu’ici rien de bien compliqué. Vous ne verrez peut être pas l’utilité des tableaux de suite mais sachez qu’ils peuvent se révéler très pratique pour contenir des données similaires ou en rapport pour apporter une organisation à votre code.

2. Parcourir un tableau

La méthode « classique »

C’est un air de déjà vu par ici ! Nous avons vu comment parcourir les objets, et bien c’est exactement la même chose

pour parcourir un tableau !

Voici un exemple simple et efficace :

var myArray = new Array("Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi",

"Dimanche");

for(var key in myArray){

alert(myArray[key]);

}

Le code précédent nous affichera tous les jours de la semaine un par un dans des boîtes de dialogue. Notez que si je ne les avais pas rentrés dans l’ordre, ils n’auraient pas été rangés !

Le forEach

Ce n’est pas vraiment une structure du langage, c’est en fait une méthode de la classe Array. Le code suivant qui la présente aura le même effet que le code ci-dessus. var myArray = new Array("Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi",

"Dimanche");

function maFonction (element, index, array) {

alert(element);

}

myArray.forEach(maFonction);

Cette méthode ne fonctionne que sur les navigateurs récents utilisez la donc en connaissance de cause et n’oubliez pas de testé vos scripts sur plusieurs navigateurs.

Le for each

Comme son nom l’indique, cette boucle – comme la précédente en fin de compte – s’exécute pour chaque élément du tableau.

var myArray = new Array("Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi",

"Dimanche");

for each (var value in myArray) {

28

alert(value);

}

Je vous présente cette façon de faire mais sachez que cela ne fonctionne que sous Firefox. Je vous recommande donc grandement de ne pas l’utiliser.

3. Quelques méthodes et attributs de la classe Array Vous pouvez effectuer un tas d’opérations sur les tableaux grâce à la classe Array.

L’attribut length

Il est simple mais extrêmement utile : l’attribut length permet de connaître le nombre de cases d’un tableau, vous le verrez surement utilisé pour parcourir des tableaux grâce à la boucle for :

for(var i = 0; i < myArray.length; i++){

alert(myArray[i]);

}

Ce code aura le même effet que les bouts de codes précédents que nous avons étudiés pour parcourir un tableau.

Les méthodes pop et push

Ces méthodes permettent d’ajouter ou de supprimer un élément à la fin du tableau.

var myArray = new Array('Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi',

'Dimanche');

myArray.pop(); // Supprime "Dimanche"

myArray.push('Dimanche'); // Ajoute "Dimanche" à la fin

La méthode concat

Cette méthode permet de concaténer deux tableaux, c'est-à-dire de les assembler pour n’en faire qu’un seul.

var jours1 = new Array('Lundi', 'Mardi', 'Mercredi', 'Jeudi');

var jours2 = new Array('Vendredi', 'Samedi', 'Dimanche');

var jours1.concat(jours2); // jours1 contient tous les jours de la semaine.

La méthode join

Cette méthode permet de transformer un tableau en une chaîne de caractères en plaçant entre chaque valeur du

tableau un caractère de notre choix.

var myArray = new Array('Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi',

'Dimanche');

var superChaine = myArray.join(", "); // superChaine contiendra "Lundi, Mardi,

Mercredi, Jeudi, Vendredi, Samedi, Dimanche"

Cette liste est loin d’être exhaustive. Vous pourrez trouver une liste des méthodes de la classe sur le site de mozilla :

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array

29

Vous avez à présent des bases correctes en JavaScript, vous êtes capable de lire les grandes lignes de n’importe quel

script. Vous êtes mêmes capables de créer de petites applications. Mais ne vous inquiétez pas, ce cours ne s’arrête

pas là. Il proposera bientôt des grandes parties dédiées à la gestion DOM d’une page web. Nous étudierons aussi

comment faire interagir le client et le serveur via JavaScript, comment fonctionne un framework et pour finir sur les

nouveautés qu’apporte le HTML5 au développement JavaScript.

Voici la fin du tutoriel (jusqu’à la prochaine mise à jour). J’espère avoir pu vous aider à adopter des bonnes méthodes

de développement JS, bonne continuation à tous les lecteurs !

30

Remerciements

Je remercie tout d’abord tous ceux qui m’ont soutenu à la création de ce cours. Je remercie également tous ceux qui m’ont relus, à ce jour principalement Disease, Cykelero, Tiffany, Damien et Shine-neko. A venir dans des mises à jour :

Une partie sur la manipulation DOM ;

L’interaction entre le serveur, le client, et JavaScript ;

Se servir du HTML5 et du CSS3 ;

Les exercices en annexes ;