Scribd
Importer
32 vues36 pages

Javascript

Le document décrit les bases du langage JavaScript, notamment la déclaration de variables, les types de données, les opérateurs, les objets, les fonctions et le modèle objet du document. Il présente également des méthodes pour manipuler le DOM.

Transféré par

DA- MAN
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
32 vues36 pages

Javascript

Le document décrit les bases du langage JavaScript, notamment la déclaration de variables, les types de données, les opérateurs, les objets, les fonctions et le modèle objet du document. Il présente également des méthodes pour manipuler le DOM.

Transféré par

DA- MAN
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/ 36

JavaScript

Filière : Ingénierie Informatique et Réseaux


ECOLE MAROCAINE DES SCIENCES DE L'INGÉNIEUR – EMSI
Honoris United Universities

Niveau : 3°IIR

Pr. NAZIH Marouane


Les variables
Pour déclarer des variables, nous utilisons les instructions let et const.

Utilisons l’instruction let suivie du nom de la variable :

Une fois la variable déclarée une première fois grâce à let, on peut l’utiliser directement.

const signifie “constante”. Donc, une fois déclaré, monPrénom ne pourra plus changer.

Javascript EMSI RABAT 2


2
Les variables
L’instruction var peut également être utilisée pour déclarer une variable, mais elle est
considérée comme obsolète:

Pour vérifier le contenu d’une variable, il est possible d’utiliser l’instruction console.log(), avec
entre les parenthèses, le nom de la variable:

Javascript EMSI RABAT 3


3
Introduction
On peut écrire du code Javascript à l’intérieur de la balise HTML <script></script>, ou bien l’
écrire à l’intérieur d’un fichier ayant l’extension .js:

Javascript EMSI RABAT 4


4
Les types de données
Les types primitifs sont les éléments de base avec lesquels nous travaillons au quotidien. Ils
comprennent :
string : pour les chaînes de caractères.

number : pour les nombres, entiers ou à virgule.

boolean : pour les valeurs booléennes (true/false).

null : pour représenter l'absence de valeur.

undefined : pour représenter use variable qui n’a pas été déclarée, ou n’a pas été initialisée.

Javascript EMSI RABAT 5


5
Les types de données
Les types non primitifs, également appelés types de référence, sont plus complexes et
comprennent:
objet : pour créer des structures de données complexes.

array : pour stocker des collections ordonnées d'éléments.

Javascript EMSI RABAT 6


6
Les opérateurs et les instructions
Les opérations de base :

Javascript EMSI RABAT 7


7
Les opérateurs et les instructions
Exemple:

Pour les chaines de caractères:

Javascript EMSI RABAT 8


8
Les objets JavaScript
Pour déclarer un objet en JavaScript, nous devons utiliser les accolades { } . Les propriétés d’un
objet ont un nom et une valeur qui sont assignées avec deux points (:) Les propriétés sont
séparées entre elles par des virgules (,)

Javascript EMSI RABAT 9


9
Les objets JavaScript
Un objet JavaScript peut être mis à jour au fur et à mesure de son évolution dans le code. Pour
ajouter une propriété, nous devons écrire le nom de l’objet, séparé par un point (.) avec le nom
de votre nouvelle propriété :

Javascript EMSI RABAT 10


10
Les objets JavaScript
Pour accéder à la valeur d’une propriété, nous utilisons le point (.) et nous pouvons par
exemple, la stocker dans une variable:

Javascript EMSI RABAT 11


11
Les fonctions
Comment on peut écrire une fonction avec Javascript:

Javascript EMSI RABAT 12


12
Les objets standards du navigateur
L'objet window est ce qu'on appelle un objet global qui représente la fenêtre du navigateur.
C'est à partir de cet objet que le Javascript est exécuté.

Javascript EMSI RABAT 13


13
Les objets standards du navigateur
alert() est une méthode appartenant à l'objet window. Mais l'objet window est dit implicite,
c'est-à-dire qu'il n'y a généralement pas besoin de le spécifier. Ainsi, ces deux instructions
produisent le même effet:

L'objet document est un sous-objet de window, l'un des plus utilisés. Et pour cause, il
représente la page Web et plus précisément la balise <html>. C'est grâce à cet élément-là que
nous allons pouvoir accéder aux éléments HTML et les modifier.

Javascript EMSI RABAT 14


14
DOM (Document Object Model)
Ce code HTML est simple. Il est constitué d’un header avec un titre, d’un corps (main) et d’un
footer:

Javascript EMSI RABAT 15


15
DOM (Document Object Model)
Ce code est un peu structuré comme un arbre, c’est pourquoi on appelle cette structure
l’arbre DOM :

Javascript EMSI RABAT 16


16
DOM (Document Object Model)
Chaque nœud de cet arbre DOM (header, main, div…) est un objet HTMLElement. Pour le
dire autrement, JavaScript a regroupé dans un même objet deux choses :

les informations sur cet objet (son nom, son id, sa position, etc.) : ce sont les propriétés
de l’objet ;

ce que cet objet est capable de faire (réagir au clic, par exemple) : ce sont les méthodes.

Javascript EMSI RABAT 17


17
DHTML
JavaScript propose tout un éventail de méthodes pour récupérer les éléments du DOM:
getElementById

querySelector

querySelectorAll

Javascript EMSI RABAT 18


18
DHTML
getElementById permet de récupérer un élément en fournissant son id en paramètre:

Pour accéder à cette balise, nous allons donc écrire :

Javascript EMSI RABAT 19


19
DHTML
Dans l’exemple précédent, nous avons demandé à JavaScript, depuis document, donc toute la
page : “Trouve-moi un élément HTML qui a pour id zoneProposition”. Puis nous avons mis le
résultat dans la variable baliseZoneProposition.

Quand nous faisons un console.log de cette variable, nous constatons bien le contenu de
notre variable baliseZoneProposition, et nous retrouvons bien notre div :

Javascript EMSI RABAT 20


20
DHTML
querySelector nous permet de trouver le premier élément qui correspond au sélecteur CSS
proposé :

Javascript EMSI RABAT 21


21
DHTML
Avec querySelectorAll, le principe est le même que pour tous les éléments dans une liste de
type NodeList (ou liste de nœuds, en français):

Javascript EMSI RABAT 22


22
DHTML
Dans ce code, nos avons ajouté une nouvelle div avec la classe zoneChoix. Cette div contient
deux inputs de type radio.

Pour récupérer tous les inputs de type radio d’un seul coup, je peux donc écrire :

Et voici le résultat : nous obtenons une NodeList:

Javascript EMSI RABAT 23


23
DHTML
La balise img possède ici 4 attributs qui permettent de la configurer :
id : l’identifiant de la div ;

src : l’emplacement de l’image ;

alt : le texte alternatif pour l’image ;

class : la liste des classes appliquées sur la balise image.

Javascript EMSI RABAT 24


24
DHTML
Si nous voulons modifier l’attribut alt de notre balise image, nous pouvons écrire :

Dans ce code :
Nous avons commencé par récupérer mon image grâce à getElementById ;

directement sur la balise, nous avons appliqué la méthode setAttribute ;

le premier paramètre représente le nom de l’attribut que nous souhaitons modifier, ici, l’attribut alt ;

le second paramètre est la nouvelle valeur que nous souhaitons lui attribuer.

Ou on peut tous simplement écrire

Javascript EMSI RABAT 25


25
DHTML
classList est une propriété spécifique qui permet de modifier des classes.

Reprenons cette balise :

Puis, appliquons ce code JS :

Javascript EMSI RABAT 26


26
DHTML
Enfin, vérifions le résultat final grâce à l’inspecteur :

Javascript EMSI RABAT 27


27
DHTML
CreateElement est une méthode fournie par JavaScript, accessible depuis document. Elle
permet de créer n’importe quelle balise :

Dans nouvelElement, nous aurons un objet HTMLElement qui représente la balise que nous
avons créée.

Javascript EMSI RABAT 28


28
DHTML
Une fois l’élément créé, il n'apparaît pas encore dans la page. Pour que cette nouvelle balise
apparaisse, nous devons l’insérer dans l’arbre DOM afin que JavaScript sache exactement à
quel endroit il faudra mettre l’élément. Pour cela, nous devons :
déterminer quel sera l’élément parent ;

utiliser appendChild (littéralement en anglais : “ajouter un enfant”).

Javascript EMSI RABAT 29


29
DHTML
Tous les éléments DOM possèdent la propriété innerHTML qui donne accès au contenu de l’
élément (sous la forme d’un string), on peut aussi modifier son contenu:

Javascript EMSI RABAT 30


30
La gestion des évènements
Un événement correspond à une action spécifique, comme par exemple le clic sur un bouton,
ou la frappe d’un clavier. Ainsi, la programmation événementielle consiste à réagir à ces
événements et exécuter du code au moment où ces événements se produisent.

Pour implémenter cela, nous devons d’abord dire à JavaScript de les écouter grâce à un
eventListener, littéralement un “écouteur d’évènement”, en français. Puis, nous devons lier l’
événement à un bloc de code.

Javascript EMSI RABAT 31


31
La gestion des évènements
Commençons par l'événement click sur un simple <span> :

Il suffit de cliquer sur le texte pour que la boîte de dialogue s'affiche. Afin d'obtenir ce
résultat nous avons ajouté à notre <span> un attribut contenant les deux lettres « on » et le
nom de notre événement « click »; nous obtenons donc « onclick ».

Cet attribut possède une valeur qui est un code Javascript, vous pouvez y écrire quasiment
tout ce que vous souhaitez, mais tout doit tenir entre les guillemets de l'attribut.

Javascript EMSI RABAT 32


32
La gestion des évènements
AddEventListener est une méthode fournie par JavaScript, qui peut être appelée directement
depuis les éléments HTML. Cette méthode prend deux paramètres :
le nom de l’événement, comme click, par exemple ;

une fonction.

Prenons un exemple très simple pour illustrer ceci. Créons un bouton dans un fichier HTML :

Dans le fichier JavaScript, nous allons récupérer ce bouton et ajouter un écouteur :

Javascript EMSI RABAT 33


33
La gestion des évènements

Si nous exécutons ce code, le console.log ne s’affichera pas, car nous avons simplement
ajouté un écouteur d’événement. Nous avons dit à ce dernier : “Lorsque l’événement click se
produit sur monBouton, alors vous allez exécuter la fonction en paramètre”. Par conséquent,
tant qu’il n’y pas de clique sur le bouton, il ne se passe rien. En revanche, le console.log
apparaîtra à l’instant où on cliquera dessus.

Javascript EMSI RABAT 34


34
La gestion des évènements
Lorsque l’on appuie sur une touche, l’événement appelé keypress se déclenche. Nous
pouvons écouter cet événement grâce à addEventListener :

Entre les parenthèses est apparue une nouvelle variable appelée event. Cette variable est
fournie directement par JavaScript. C’est un objet qui contient toutes les informations liées à
l’événement. Ici, ce code affiche dans la console toutes les touches sur lesquelles nous
pressons:
event.target : renvoie l’élément HTML qui a déclenché l’événement ;

event.key : la touche appuyée quand l’événement écouté est lié au clavier ;

Javascript EMSI RABAT 35


35
Liste des événements

Javascript EMSI RABAT 36


36

Vous aimerez peut-être aussi