webmaster
Le langage JavaScript
Les Bases Du JavascriptJavaScript est un langage essentiellement utilisé avec le HTML. Nous allons apprendre comment intégrer ce langage dans du HTML. Pour cela nous allons reprendre notre éditeur de texte Notepad++ utilisé dans le chapitre précédent afin.
Dans cours, lorsque vous verrez l’abréviation JS cela signifie JavaScript.
- Création de notre premier script JS
Ouvre votre éditeur de texte et copier le code ci-dessous. On va afficher le fameux ‘Hello world’ c’est un message d’accueil utiliser lorsqu’on débute nouvellement dans l’apprentissage d’un langage de programmation.
code HTML :
aperçu:
vous venez de créer votre premier script JS.
- Ou placer le code JavaScript dans la page HTML
Les codes Javascript sont insérés au moyen de l'élément <script>. Cet élément possède un attribut type qui sert à indiquer le type de langage que l'on va utiliser. Dans notre cas, il s'agit de Javascript, mais ça pourrait être autre chose, comme du VBScript, bien que ce soit extrêmement rare.
En HTML 4 et XHTML 1.x, l'attribut type est obligatoire. En revanche, en HTML5, il ne l'est pas. C'est pourquoi les exemples de ce cours, en HTML5, ne comporteront pas cet attribut.
le JavaScript peut s'insérer de deux manières dans la page HTML soit:
- Dans la page
- Soit dans un fichier externe
2.1. Le JavaScript dans la page
Pour placer du code Javascript directement dans votre page Web, rien de plus simple, on fait comme dans l'exemple du Hello world! : on place le code au sein de l'élément <script> :
2.2. Le JavaScript externe
il est possible et même conseillé, d'écrire le code Javascript dans un fichier externe pourtant l'extension .js. Ce fichier n'est appelé que depuis la page web au moyen de l'élément <script> et son attribut src contient URL du fichier .js.
l'élément <script> se positionne de préférence juste avant la fermeture de l'élément <body>. En effet, une page Web est lue par le navigateur de façon linéaire, c'est-à-dire qu'il lit d'abord le <head>, puis les éléments de <body> les uns à la suite des autres. Si vous appelez un fichier Javascript dès le début du chargement de la page, le navigateur va donc charger ce fichier, et si ce dernier est volumineux, le chargement de la page s'en trouvera ralenti. C'est normal puisque le navigateur va charger le fichier avant de commencer à afficher le contenu de la page.
ainsi pour pailler à ce problème, il est conseillé de mettre l'élément <script> plus tôt à la fin.
code html:
- Les variables
3.1. déclarer une variable
Une variable est un espace de stockage permettant de d'enregistrer tout type de données (les nombre, les charactères, les chaine de caractère, les booléens , les objets etc.
pour déclarer une variable, il suffit de faire:
code html:
N.B: en JavaScript il est impératif de terminer une instruction par un ";" (point-virgule).
le mot clé var permet d'indiquer au navigateur que vous déclarez une variable. après déclaration il faudra affecter une valeur à votre variable:
code html:
quelque règle pour déclarer une variable:
- une variable doit contenir uniquement les caractères alphanumériques (0...9;a..z;A..Z).
- Elle ne doit pas contenir de caractères spéciaux ou caractères accentués. le seul caractère spécial accepté est le caractère underscore (_)
- Elle doit commencer obligatoirement par une lettre.
exemple:
- bonne syntaxe: ma_varible; maVariable1; Ma5VariaBLe, etc.
- mauvaise syntaxe: 2variable; élève, etc.
3.2. Les types de variables
Contrairement à de nombreux langages, le Javascript est un langage typé dynamiquement. Cela veut dire, généralement, que toute déclaration de variable se fait avec le mot-clé var sans distinction du contenu, tandis que dans d'autres langages, comme le C, il est nécessaire de préciser quel type de contenu la variable va devoir contenir.
En Javascript, nos variables sont typées dynamiquement, ce qui veut dire que l'on peut y mettre du texte en premier lieu puis l'effacer et y mettre un nombre quel qu'il soit, et ce, sans contraintes.
On distingue trois principaux types de variable en JavaScript :
- Le type numérique (alias number) : il représente tout nombre, que ce soit un entier, un négatif, un nombre scientifique, etc. Bref, c'est le type pour les nombres. Pour assigner un type numérique à une variable, il vous suffit juste d'écrire le nombre seul : var number = 5; Tout comme de nombreux langages, le Javascript reconnaît plusieurs écritures pour les nombres comme :
Bref, il existe pas mal de façons d'écrire les valeurs numériques
- Le type booléen (alias boolean) : qui est un type bien particulier. Il n’accepte que deux valeurs soit true soit false. Il est généralment utilisé pour faire les tests conditionnels
- Les chaines de caractères (alias String) : : ce type représente n'importe quel texte. On peut l'assigner de deux façons différentes :
- Les opérateurs
En JavaScript comme dans tout autre langage, on retrouve plusieurs types d'opérateur regroupés en fonction de leur utilisation. On distingue:
- Les opérateurs arithmétiques
- Les opérateurs de comparaison
- Les opérateurs de concaténation
- Les opérateurs logiques
Le tableau ci-dessous présente ces différents opérateurs.
Type d'opérateur |
Opérateur |
Description |
|
Opérateur arithmétique |
* |
Utilisé pour multiplier deux nombres |
|
/ |
Utilisé pour diviser deux nombres - retourne un résultat en virgule flottante |
|
|
% |
Utilisé pour diviser deux nombres - retourne uniquement le reste de la division |
|
|
+ |
Utilisé pour additionner deux numéros |
|
|
- |
Utilisé pour trouver la différence entre deux nombres ou pour indiquer la valeur négative d'une expression numérique |
|
|
Opérateur de comparaison |
< |
Inférieur à |
|
<= |
Inférieur ou égal à |
|
|
> |
Supérieur à |
|
|
>= |
Supérieur ou égale à |
|
|
!== |
Contenu et type différent de |
|
|
=== |
Contenu et type égale à |
|
|
== |
Égal à |
|
|
!> |
Non égal à (différent de) |
|
|
Opérateur de concaténation |
+ |
Si utilisé avec des chaînes de caractères, il fait la concaténation de ces chaînes |
|
Opérateur logique |
&& |
Utilisé pour effectuer une conjonction logique sur deux expressions |
|
| |
Utilisé pour effectuer une équivalence logique sur deux expressions |
|
|
! |
Utilisé pour effectuer une implication logique sur deux expressions |
Exemple
- Les conditions
Une condition est un test booléen (soit vrai soit faux) qui détermine si une partie du programme doit être ou pas exécuté. En JavaScript, il existe trois structures conditionnelles à savoir:
- La structure conditionnelle if else
Syntaxe:
Exemple:
- La condition "switch"
Nous venons d'étudier le fonctionnement de la condition if else qui est très utile dans de nombreux cas, toutefois elle n'est pas très pratique pour faire du cas par cas ; c'est là qu'intervient switch ! Prenons un exemple : nous avons un meuble avec quatre tiroirs contenants chacun des objets différents, et il faut que l'utilisateur puisse connaître le contenu du tiroir dont il entre le chiffre. Si nous voulions le faire avec if else ce serait assez long et fastidieux:
Syntaxe:
- On écrit le mot-clé switch suivi de la variable à analyser entre parenthèses et d'une paire d'accolades ;
- Dans les accolades se trouvent tous les cas de figure pour notre variable, définis par le mot-clé case suivi de la valeur qu'il doit prendre en compte (cela peut être un nombre mais aussi du texte) et de deux points ;
- Tout ce qui suit les deux points de case sera exécuté si la variable analysée par le switch contient la valeur de case ;
- À chaque fin de case on écrit l'instruction break pour « casser » le switch et ainsi éviter d'exécuter le reste du code qu'il contient ;
- Et enfin on écrit le mot-clé default suivi de deux points. Le code qui suit cette instruction sera exécuté si aucun des cas précédents n'a été exécuté. Attention, cette partie est optionnelle, vous n'êtes pas obligés de l'intégrer à votre code.
- les ternaires
C'est le dernier type de condition. Elles sont rapides à écrire mais peu utilisée.
syntaxe:
Ceci se lit : si la condition est vraie alors la variable prend la valeur valeur1 si la condition est fausse alors la variable prend la valeur valeur2.
exemple:
- les boucles
Les programmeurs sont réputés pour être des gens fainéants, ce qui n'est pas totalement faux puisque le but de la programmation est de faire exécuter des choses à un ordinateur, pour ne pas les faire nous-mêmes. Ce chapitre va mettre en lumière ce comportement intéressant : nous allons en effet voire comment répéter des actions, pour ne pas écrire plusieurs fois les mêmes instructions.
avant d'entrer dans le vif du sujet, il est nécessaire de savoir ce que c'est qu'une incrémentation.
une incrémentation est le fait d'augmenter ou de diminuer une variable d'une certaine valeur. Généralement cette valeur est 1
syntaxe:
6.1. la boucle while
Une boucle est une structure itérative permettant de répéter un certain nombre d'instructions tant qu'une condition est vraie.
Syntaxe:
code JavaScript:
6.2. la boucle do while
La boucle do while ressemble très fortement à la boucle while, sauf que dans ce cas la boucle est toujours exécutée au moins une fois. Dans le cas d'une boucle while, si la condition n'est pas valide, la boucle n'est pas exécutée. Avec do while, la boucle est exécutée une première fois, puis la condition est testée pour savoir si la boucle doit continuer.
syntaxe:
6.3. la boucle for
La boucle for possède donc trois blocs qui la définissent. Le troisième est le bloc d'incrémentation qu'on va utiliser pour incrémenter une variable à chaque itération de la boucle. De ce fait, la boucle for est très pratique pour compter ainsi que pour répéter la boucle un nombre défini de fois.
syntaxe:
- dans le bloc 1, on déclare et on instancie la variable qui joue le rôle de compteur.
- dans le bloc 2, on insère une condition qui sera testée au fur et à mesure que les itérations vont s'effectuer
- dans le bloc 3 on incrémente le compteur.
code Java Script:
- les fonctions
une fonction est un bloc d'instruction qui s'exécute indépendamment du reste du programme.
syntaxe:
Décortiquons un peu tout ça et analysons un peu ce que nous pouvons lire dans ce code :
- Le mot-clé function est présent à chaque déclaration de fonction. C'est lui qui permet de dire « Voilà, j'écris ici une fonction ! » ;
- Vient ensuite le nom de votre fonction, ici myFunction ;
- S'ensuit un couple de parenthèses contenant ce que l'on appelle des arguments. Ces arguments servent à fournir des informations à la fonction lors de son exécution. Par exemple, avec la fonction alert() quand vous lui passez en paramètre ce que vous voulez afficher à l'écran ;
- Et vient enfin un couple d'accolades contenant le code que votre fonction devra exécuter
code JavaScript:
- les objets et les tableaux
il a été dit plus tôt que le JavaScript est un langage orienté objet. qu'est ce qu'un objet?
un objet est un concept, une idée ou une chose matérielle ou immatérielle. Un objet possède une structure qui lui permet de pouvoir fonctionner et d'interagir avec d'autres objets. Le Javascript met à notre disposition des objets natifs, c'est-à-dire des objets directement utilisables. Vous avez déjà manipulé de tels objets sans le savoir : un nombre, une chaîne de caractères ou même un booléen.
Soit le code suivant:
la variable myString contient un objet, et cet objet représente une chaîne de caractères. C'est la raison pour laquelle on dit que le Javascript n'est pas un langage typé, car les variables contiennent toujours la même chose : un objet. Mais cet objet peut être de nature différente (un nombre, un booléen…).
Outre les objets natifs, le Javascript nous permet de fabriquer nos propres objets. nous verrons comment créer nos propres variables plus loin.
un objet possède :
- Un constructeur: Le constructeur est un code qui est exécuté quand on utilise un nouvel objet. Il permet d’effectuer des actions comme définir
diverses variables au sein même de l'objet (comme le nombre de caractères d'une chaîne de caractères). Tout cela est fait automatiquement pour les objets natifs, nous en reparlerons quand nous aborderons l'orienter objet - les propriétés: ce sont des variables qui caractérise l'objet.
- les méthodes: ce sont des fonctions contenues dans un objet. Elles servent à décrire le comportement d'un objet.
les objets natifs déjà rencontré sont :
- Number : l'objet qui gère les nombres
- String: l'objet qui gère les chaines de caractère
- Boolean : l'objet qui gère les booléen.
Nous allons maintenant parler d'un nouvel objet : Array lui il gère les tableaux (array signifie tableau en anglais).
8.1. les tableaux
Un tableau est une variable qui contient plusieurs valeurs appelées Items. Chaque item est appelé au moyen d'un indice. les indice d'un tableau commence à partir de 0. un tableau ressemble à ceci:
indice |
0 |
1 |
2 |
3 |
4 |
5 |
|
données |
valeur1 |
valeur2 |
valeur3 |
valeur4 |
valeur5 |
valeur6 |
syntaxe: déclaration d'un tableau
Le contenu du tableau se définit entre crochets, et chaque valeur est séparée par une virgule. Les valeurs sont introduites comme pour des variables simples, c'est-à-dire qu'il faut des guillemets ou des apostrophes pour définir les chaînes de caractères
pour récupérer la valeur d'une donnée dans un tableau, il suffit de faire:
exemple:
pour changer la valeur d'une donnée dans un tableau comme procède comme suite:
pour parcourir un tableau, il est plus pratique d'utiliser la boucle for puisqu'on connait à l'avance le nombre d'indice que possède le tableau qu'on souhaite parcourir.
syntaxe:
N.B: l'instruction i < nom.length du deuxième bloc dans la boucle for permet de déterminer le nombre d'items que contient le tableau.
Parcourir un objet avec for in
Il n'est pas possible de parcourir un objet littéral avec une boucle for. Normal, puisqu'une boucle for est surtout capable d'incrémenter une variable numérique, ce qui ne nous est d'aucune utilité dans le cas d'un objet littéral puisque nous devons posséder un identifiant. En revanche, la boucle for in se révèle très intéressante !
Le fonctionnement est quasiment le même que pour un tableau, excepté qu'ici il suffit de fournir une « variable clé » qui reçoit un identifiant (au lieu d'un index) et de spécifier l'objet à parcourir :
