Scribd
Importer
92 vues15 pages

JavaScript L2

Transféré par

dihasinamamiarilantorobel
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
92 vues15 pages

JavaScript L2

Transféré par

dihasinamamiarilantorobel
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 15

LE LANGAGE JAVASCRIPT

I. Introduction
Le JavaScript est une extension du langage html qui est incluse dans le code. Ce langage
de programmation apporte des améliorations au langage html en permettant d’exécuter des
commandes.

C'est un langage orienté objet à prototype, c'est-à-dire que les bases du langage et ses
principales interfaces sont fournies par des objets qui ne sont pas des instances de classes, mais
qui sont chacun équipés de constructeurs permettant de créer leurs propriétés

Les prototypes sont un mécanisme au sein de JavaScript qui permet aux objets
JavaScript d'hériter des propriétés d'autres objets. Les prototypes implémentent un héritage
différent de celui rencontré dans les langages de programmation objets habituels.

JavaScript est un langage :


 Dynamique
 Interprété
 Orienté objet
1. Un langage dynamique :
C’est un langage de programmation dans lequel les opérations effectuées au moment de
la compilation peuvent être réalisées au moment de l'exécution. Par exemple, en JavaScript, il
est possible de modifier le type d'une variable ou d'ajouter de nouvelles propriétés ou méthodes
à un objet pendant l'exécution du programme.

Ceci est opposé aux langages de programmation dits statiques, dans lesquels de tels
changements ne sont normalement pas possibles.

2. Langage interprété :
Le langage JavaScript est un langage interprété c.-à-d. qu’il n’y a pas de compilation ni
de la pré-compilation, Le code source reste tel quel. Si on veut l'exécuter, il faut faire appel à
un interpréteur qui se chargera de l'analyser et de réaliser les actions qu'il contient.

3. Un langage de programmation orientée objet :


La programmation orientée objet est un modèle de langage de programmation qui
s'articule autour d'objets et de données, plutôt que d'actions et de logique.
4. La différence Java et JavaScript
Le JavaScript n’est pas Java.

JavaScript Java

Langage interprété Langage compilé

Langage fortement typé (déclaration du


Langage peu typé
type de variable)

Liaisons dynamiques : les références des Liaisons statiques : les objets doivent
objets sont vérifiées au chargement exister au chargement (compilation)

Accessibilité du code Confidentialité du code

Code à part du document html, appelé à


Langage intégré au html
partir de la page.

5. Le script
C’est une portion de code qui vient s’insérer dans une page html. Le code n’est toutefois pas
visible dans la fenêtre du navigateur car il est compris entre des balises (ou tags) spécifiques
qui signalent au navigateur qu’il s’agit d’un script écrit en langage JavaScript.

Les balises annonçant un code JavaScript sont les suivantes :

<script type = ‘’ text / javascript ‘’>

// ici le code JavaScript

</script>

6. Les commentaires
Comme dans tout langage de programmation, il est toujours préférable et conseiller
d’ajouter des commentaires dans le programme qu’on crée pour les raisons suivantes :
 D’une part pour s’y retrouver lorsque l’on voudra revoir le script
 D’autre part pour permettre de comprendre le code
// : Pour mettre en commentaires toute une ligne

/*commentaire*/ : pour mettre un bloc de commentaire


7. Insertion du code JavaScript dans HTML
Pour insérer un code JavaScript dans une page HTML, il y a plusieurs façons de
l’inclure :

 Dans une balise <script></script>


 Dans un fichier externe
 Grâce aux événements

7.1 Dans une balise Script


Le code JavaScript peut être insérer n’importe où dans le code html. Il faut faire attention
quand même lorsqu’on place le script parce que le traitement d’une page web est de haut en bas
or que si l’utilisateur interrompe le chargement ça peut génère une erreur.

Donc il est toujours préférable d’ajouter le maximum de script à l’en-tête de la page c.-
à-d. dans la balise <head></head> et les évènements JavaScript seront placés dans le corps de
la page c.-à-d. dans la balise <body></body>

Syntaxe :

<script type = ‘’ text/JavaScript ‘’>

// ici le code JavaScript

</script>

7.2 Dans un fichier externe


Il est possible de mettre les codes de JavaScript en annexe dans un fichier.

Syntaxe : <script type = ‘’text/javascript’’ src = ‘’url/fichier.js’’> </script>

Où url/fichier correspond au chemin d’accès au fichier contenant le code en JavaScript.

7.3 Grâce aux évènements


On appelle évènement une action de l’utilisateur, comme le clic d’un des boutons de la
souris.

Un événement est un changement d'état significatif dans la gestion d'un élément de


configuration ou d'un service. Les événements sont typiquement reconnus à travers
des alertes ou des notifications détectées par un outil de surveillance.
<balise eventHandler = ‘’Code JavaScript à insérer ‘’>
eventHandler représente le nom de l’évènement
II. Les Variables
1. Définition
Une variable est une zone mémoire dans la mémoire vive qui permet de stocker
temporairement des données.

2. La déclaration de variables
JavaScript étant très souple au niveau de l’écriture (à double-tranchant car il laisse
passer des erreurs), la déclaration des variables peut se faire de deux façons :

De façon explicite, en faisant précéder la variable du mot clé Var qui permet d’indiquer
de façon rigoureuse qu’il s’agit d’une variable.

Exemple : var chaine = ‘’bonjour ‘’

De façon implicite, en écrivant directement le nom de la variable suivie du caractère =


et de la valeur à affecter :

Exemple : chaine = ‘’bonjour ‘’

Le JavaScript est case sensitive (sensible à la casse), c.-à-d. qu’il fait une différence
entre un nom contenant des minuscules ou nom avec des majuscules.

3. Portée des variables


Selon l’endroit où on déclare une variable, celle-ci pourra être accessible de partout dans
le script ou bien qu’une portion déterminée du code

Lorsqu’une variable est déclarée sans le mot clé var (ES5) ou let, const (ES6), c.-à-d. de
façon implicite, elle est accessible de partout dans le script. On parle alors de variables globales.

Lorsque l’on déclare de façon explicite une variable en JavaScript (en précédant sa
déclaration avec le mot clé var [ES5], let et const [ES6]), sa portée dépend de l’endroit où elle
est déclarée

Une variable déclarée au début du script, c.-à-d. avant toute fonction sera globale, on
pourra alors l’utiliser à partir de n’importe quel endroit dans le script.

Une variable déclarée par le mot clé var dans une fonction aura une portée limitée à cette
seule fonction, c.-à-d. qu’elle est inutilisable ailleurs, on parle alors de variable locale
4. Les types de données dans les variables
En JavaScript, il n’a pas besoin de déclarer le type de variables que l’on utilise;
contrairement à C ou Java, il faut préciser s’il s’agit d’entier (int), de nombre à virgule flottante
(float), de caractère (char), …

Le JavaScript n’autorise la manipulation que de 5 types de données :

 Des nombres : entiers ou à virgules


 Des chaine de caractères (string) : une suite de caractères
 Des booléens : des variables à deux états permettant de vérifier une condition
 Des variables de type null : un mot caractéristique pour indiquer qu’il n’y a pas
de données
 Des type undefined : un mot caractéristique pour indiquer qu’il n’est pas definit

5. Les opérateurs
Les opérateurs sont des symboles qui permettent de manipuler des variables c.-à-d.
D’effectuer des opérations, les évaluer….

On distingue plusieurs types d’opérateurs :

 Les opérateurs de calcul


 Les opérateurs d’assignation
 Les opérateurs d’incrémentation
 Les opérateurs de comparaison
 Les opérateurs logiques
 Les opérateurs bit à bit
 Les opérateurs de rotation de bit
5.1. Les opérateurs de calcul
Ils permettent de modifier mathématiquement la valeur d’une variable

Opérateur Dénomination Effet

+ Addition Ajoute deux valeurs

- Soustraction Soustrait deux valeurs

* Multiplication Multiplie deux valeurs

/ Division Divise deux valeurs

% Modulo Reste de la division entière

Affecte une valeur à une


= affectation
variable

5.2. Les opérateurs d’assignation


Ces opérateurs permettent de simplifier des opérations telles qu’ajouter une valeur dans
une variable et stocker le résultat dans la variable. Une telle opération s’écrirait habituellement
de la façon suivante par exemple : x = x+ 2 avec les opérateurs d’assignation il est possible
d’écrire cette opération sous la forme suivante : x += 2 ainsi, si la valeur de x était 7 avant
opération, elle sera de 9 après

Les autres opérateurs du même type sont les suivants :

Opérateur Effet Exemple

Addition deux valeurs et stocke le résultat


+= X += 2 -> x = x +2
dans la variable (à gauche)

Soustrait deux valeurs et stocke le résultat


-= X -= 2 -> x = x -2
dans la variable

Multiplie deux valeurs et stocke le résultat


*= X *= 2 -> x = x *2
dans la variable

Divise deux valeurs et stocke le résultat dans


/= X /= 2 -> x = x /2
la variable
5.3. Les opérateurs d’incrémentation

Opérateur Dénomination Effet

Augmente d’une unité la


++ Incrémentation
variable

Diminue d’une unité la


-- Décrémentation
variable

5.4. Les opérateurs de comparaison


Opérateur Dénomination

== Opérateur d’égalité

< Opérateur d’infériorité stricte

<= Opérateur d’infériorité ou égal

> Opérateur de supériorité stricte

>= Opérateur de supériorité stricte ou égal

!= Opérateur de différence

5.5. Les opérateurs logiques (booléens)


Ce type d’opérateur permet de vérifier si plusieurs conditions sont vraies :
Opérateur Dénomination Effet

|| OU Logique Vérifie qu’une condition est réalisée

&& ET logique Vérifie que toutes les conditions sont réalisées

Inverse l’état d’une variable booléenne (retourne


! NON Logique
la valeur 1 si la variable vaut 0, 0 si elle vaut 1)

5.6. Les opérateurs bit-à-bit


Ce type d’opérateur traite ses opérandes des données binaires. Plutôt que des données
décimales, hexadécimales ou octales. Ces opérateurs traitent ces données selon leur
représentation binaire mais retournent des valeurs numériques standards dans leur format
d’origine.

Les opérateurs suivants effectuent des opérations bit-à-bit, c.-à-d. avec des bits de même
poids :
Opérateur Dénomination Effet

& ET bit-à-bit Retourne 1 si les deux bits de même poids sont à 1

Retourne 1 si l’un ou l’autre des deux bits de même poids est


| OU bit-à-bit
1

OU bit-à-bit Retourne 1 si l’un des deux bits de même poids est 1 (mais
^
exclusif pas le deux)

Exemples :
9 & 12 [1001 & 1100] = 8 [1000]
9 | 12 [1001 | 1100] = 13 [1101]
9 ^ 12 [1001 ^ 1100] = 5 [0101]

5.7. Les opérateurs de rotation de bit


Ce type d’opérateur traite ses opérandes comme des données binaires d’une longueur de
32 bits, plutôt que des données décimales, hexadécimales ou octales. Ces opérateurs traitent ces
données selon leur représentation binaire mais retournent des valeurs numériques standard dans
leur format d’origine.

Les opérateurs suivants effectuent des rotations sur les bits, c.-à-d. qu’il décale chacun
des bits d’un nombre de bits vers la gauche ou vers la droite. Le premier opérande désigne la
donnée sur laquelle on va faire le décalage, le second désigne le nombre de bits duquel elle va
être décalée.

Opérateur Dénomination Effet


<< Rotation à gauche Décale les bits vers la gauche (multiplie par 2 à
chaque décalage). Les zéros qui sortent à gauche sont
perdus, tandis que des zéros sont insérés à droite
>> Rotation à droite Décale les bits vers la droite (divise par 2 à chaque
avec conservation décalage). Les zéros qui sortent à droite sont perdus,
du signe tandis que le bit non-nul de poids plus fort est recopié
à gauche
>>> Rotation droite et Décale les bits vers la droite (divise par 2 à chaque
remplissage de décalage). Les zéros qui sortent à droite sont perdus,
zéros tandis que des zéros sont insérés à gauche
Exemples :
9 << 1 = (00000000000000000000000000001001) >> 1
9 << 1 = 18 (00000000000000000000000000010010)
6 >> 1 = (0000000000000000000000000000110) >> 1
6 >> 1 = 3 (00000000000000000000000000000011)
3 >>> 1 = (0000000000000000000000000000011) >> 1
3 >>> 1 = 1 (00000000000000000000000000000001)
III. Les instructions conditionnelles.
Elles permettent d'exécuter une série d'instructions (un bloc d'instructions) si jamais une
condition est réalisée.
Remarque : la condition doit être entre des parenthèses, il est possible de définir
plusieurs conditions à remplir avec les opérateurs ET et OU (&& et ||)
Le JavaScript support 2 déclarations conditionnelles :
 L’instruction IF … ELSE
 L’instruction SWITCH
1. L’instruction if … else :
La condition if est utilisée dans le but d'exécuter certaines instructions si une condition
logique est vraie (true).
Si cette dernière est fausse (false), l'instruction facultative else exécute d'autres
instructions.
Les commandes if et else peuvent contenir une ou plusieurs instructions délimitées par
des accolades.
D'autre-part, il est autorisé d'utiliser l'imbrication de l'instruction if autant de fois qu'il
est nécessaire dans l’énumération des conditions et instructions associées
Syntaxe :
if (condition)
{
//instruction 1
}
else
{
//instruction 2
}
2. L’instruction Switch… Case
Cette instruction permet de vérifier le contenu d'une variable à partir de nombreuses
valeurs.
L'instruction évalue successivement les différentes valeurs jusqu'à ce qu'il trouve
la bonne contenue
S'il échoue dans sa comparaison, alors, il exécute les instructions contenues dans le label
default:
L’instruction break termine les instructions de case et saute à la fin de switch.
Syntaxe :
switch (Variable)
{
case val1:
instruction 1;
break;
...
case val n:
instruction n;
break;
default:
instruction n + 1;
break;
}
IV. Les instructions répétitives
1. La boucle FOR…
La boucle for exécute une ou plusieurs instructions jusqu'à ce que la condition
spécifiée retourne false.
Syntaxe :
for (Initialisation; Condition; Itération)
{
//Instructions;
}
L'instruction for contient une donnée initiale, une condition et une commande
d'incrémentation ou de décrémentation, le tout séparé par des points-virgules.
Il faut noter que la donnée initiale n'est valable que pour le démarrage de la boucle. Par
la suite cette donnée n'est plus prise en compte.
2. La boucle DO…WHILE
Elle exécute un groupe d'instructions jusqu'à ce que la condition renvoie false.
Syntaxe :
do
{
//Instructions;
}
while (Condition);
La boucle do...while est toujours exécutée au moins une fois malgré l'état de la condition
spécifiée, car cette dernière n'est évaluée qu'après son activation étant donné la position de la
condition.
3. La boucle WHILE
Cette boucle exécute un groupe d'instructions jusqu'à ce que la condition renvoie false.
Syntaxe :
while (Condition)
{
//Instructions;
itération;
}
Contrairement à la boucle do … while , la boucle while est exécutée seulement si la
condition spécifiée est remplie.
Remarque :
L’instruction Continue
Elle permet d'interrompre le déroulement d'une boucle à l'exception qu'elle ne la termine
pas immédiatement mais la court-circuite.
elle permet de sauter un groupe d'instructions pour reprendre, par la suite, le
fonctionnement normal de la boucle.
Par contre, l'instruction break permet d'interrompre le déroulement d'une boucle.
4. L’instruction FOR … IN
L'instruction for... in déplace une variable indiquée dans toutes les propriétés d'un objet.
La variable indiquée dans l'instruction est utilisée pour stocker le nom de la
propriété en cours d'exploitation.
Syntaxe :
for (Variable in Objet)
{
//Instructions;
}
V. Les Fonctions
Les fonctions sont des modules fondamentaux dans JavaScript. Une fonction est une
procédure de JavaScript où un ensemble d'instructions accomplit une tâche spécifique.
Pour utiliser une fonction, il faut d'abord lui définir un nom, puis un ou plusieurs
arguments et évidemment une ou plusieurs instructions.
Le nom de la fonction et ses arguments lui permettront d'être appelée dans un endroit
quelconque d'un programme JavaScript.
Syntaxe :
function nom (param1, param2,…)
{
//instructions;
return valeur;
}
Exemple :
function _somme(a, b)
{
return a+b;
}
L’instruction return permet de retourner le résultat de la fonction.
VI. LE DOM (Document Object Model)
1. Définition
Le DOM est le modèle d’accès aux chapitres composante des documents HTML ou
encore XML.

Par son intermédiaire, nous disposerons d’une description structurée du script HTML
et DOM fournit aussi le mode d’accès aux éléments constitutifs du modèle. DOM va être pour
nous un schéma d’accès pour atteindre les constituants (formulaire, champ, …) d’une page web
balisée.

Ce modèle fournit une hiérarchie de programmation agençant les propriétés, les


méthodes, les événements.

L’étude et la bonne compréhension du modèle DOM sont bien évidemment


indispensables pour pouvoir utiliser au mieux les principales bibliothèques JavaScript
(librairies), comme Prototype, JQuery, MooTools, …

Le modèle DOM est un arbre constitué d’objets Node (Nœuds). Il s’agit d’une
structure arborescence avec un nœud de type racine et des nœuds enfants

2. Définition de l’arborescence
2.1. Notion de nœud
Un langage de marquage comme HTML ou tout autre langage basé sur XML peut être
schématisé comme une arborescence hiérarchisée. Les différentes composantes d’une telle
arborescence sont désignées comme étant des nœuds. L’objet central du modèle DOM est pour
cette raison l’objet Node. Les autres nœuds en dépendent.

2.2. Interface Node


L’interface Node va être notre boite à outils pour parcourir les différents niveaux de
l’arborescence DOM. Elle est constituée de propriétés et de méthodes pour assurer les
déplacements dans l’arbre.
2.3. Les propriétés et méthodes de l’interface Node
- Les propriétés
Propriétés rôle
attributes Liste des attributs du nœud en cours
childNodes Liste des nœuds enfants
firstChild Premier enfant dans la filiation d’un nœud
lastChild Dernier enfant dans la filiation d’un nœud
nextSibling Prochain nœud d’un même type
nodeName Nom du nœud
nodeType Type du nœud
nodeValue Valeur contenue dans le nœud
parentNode Nœud parent
previousSibling Nœud précédent d’un type précisé.

- Les méthodes

Méthodes Rôle
appendChild() Ajout d’un nœud enfant
cloneNode() Duplication d’un nœud
deleteData() Effacement des données en caractères
getAttribute() Recherche de la valeur d’un nœud attribut
getAttributeNode() Recherche d’un nœud
hasChildNodes() Contrôle d’existence de nœuds enfants
insertBefore() Insertion d’un nœud.
removeAttribute() Effacement de la valeur d’un nœud attribut
removeAttributeNode() Effacement d’un nœud attribut
removeChild() Suppression d’un nœud
replaceChild() Remplacement d’un nœud enfant
setAttribute() Définition de la valeur d’un nœud attribut
setAttributeNode() Définition d’un nœud attribut
3. Les interfaces du DOM
Parmi les interfaces du DOM, quelques-unes vont particulièrement nous intéresser :

• L’interface Window qu’on a déjà étudié et qui est liée au DOM;


• L’interface Event qui représente tout événement qui a lieu dans le DOM (nous
allons définir précisément ce qu’est un évènement dans la suite de cette partie);
• L’interface EventTarget qui est une interface que vont implémenter les objets qui
peuvent recevoir des évènements;
• L’interface Node qui est l’interface de base pour une grande partie des objets du
DOM;
• L’interface Document qui représente le document actuel et qui va être l’interface
la plus utilisée;
• L’interface Element qui est l’interface de base pour tous les objets d’un
document ;

L’objet document de l’interface Document est la racine de tous les nœuds d’un script
web. Cet objet particulier a ses propres méthodes s’appliquant au document dans la globalité :

Méthodes Rôle
Création d’un nouvel élément pour
createElement()
l’arborescence
createTextNode() Création d’un nœud de type texte
createAttribut() Création d’un nœud de type attribut
Récupération d’un élément portant l’id
getElementById()
spécifié
Récupération de l’élément portant le nom
getElementByName()
spécifié
Récupération d’un élément ayant le tag
getElementByTagName()
spécifié
querySelector()
querySelectorAll()

Vous aimerez peut-être aussi