2022/2023
Plan
Introduction
Éléments de base de JavaScript
Objets prédéfinis
Les événements
A.BENGAG 2
Introduction
présentation
JavaScript
Un langage de programmation interprété, c'est-à-dire qu'il a besoin
d'un interpréteur pour pouvoir être exécuté.
Permet de rendre dynamique un site internet développé en HTML.
Basé sur les objet, pas de classes ni d’héritage,...
Déclaration optionnelle des variables (typage faible).
Une syntaxe proche des langages de programmation comme le C.
A.BENGAG 3
Introduction
Le Script JavaScript
Un script est une portion de code qui vient s'insérer dans une page HTML.
Le code JavaScript doit être placé toujours à l’intérieur de script.
<SCRIPT>
Placez ici le code de votre script.
</SCRIPT>
A.BENGAG 4
Introduction
Exemple
Un petit script contenant la fonction alert() qui permet d'afficher une boîte
de dialogue contenant le message passé en paramètre.
A.BENGAG 5
Éléments de base de JavaScript
Variables
Les variables contiennent des données qui peuvent être modifiées lors de
l'exécution d'un programme.
Chaque variable possède un nom et une valeur, et doit être déclarée
soit de façon explicite au moyen du mot réservé var.
soit de façon implicite : nom_de_la_variable = valeur ;
Les types de valeurs JavaScript
Nombres : N’importe quel nombre sans guillemet,
Chaînes de caractères: Une série de caractères à l’intérieur des guillemets
Booléens : true ou false,
Null : exempt de toute valeur,
Objets : sont définis par leurs propriétés et méthodes,
Fonctions.
A.BENGAG 6
Éléments de base de JavaScript
Variables
Exemple
A.BENGAG 7
Éléments de base de JavaScript
les conditions
Condition simple :
if (expression_booléenne) {
// Instructions
}
Condition avec la variante else :
if (expression_booléenne) {
// Instructions
}
else {
// Instructions
}
A.BENGAG 8
Éléments de base de JavaScript
les conditions
Exemple
A.BENGAG 9
Éléments de base de JavaScript
les conditions
Switch
switch (expression) {
case etiquette_1 : // Instructions
break;
case etiquette_2 : // Instructions
break;
.......
case etiquette_n : // Instructions
break;
default : // Instructions
}
A.BENGAG 10
Éléments de base de JavaScript
les boucles
La boucle while :
while (expression_booléenne)
{
// Instructions
}
La boucle do . . . while :
do
{
// Instructions
} while (expression_booléenne)
A.BENGAG 11
Éléments de base de JavaScript
les boucles
La boucle for:
for (initialisation; condition; incrémentation) {
instruction_1;
instruction_2;
instruction_3;
}
A.BENGAG 12
Éléments de base de JavaScript
les boucles
Exemple (while)
A.BENGAG 13
Éléments de base de JavaScript
les fonctions
En JavaScript, une fonction aura la forme suivante :
function nom_de_la_fonction(para_1, …, para_n)
{
// corps de la fonction
}
Une fonction peut retourner une valeur ou non (une simple procédure).
L’instruction return permet d’interrompre une fonction en envoyant la
valeur de celle-ci au système.
Si return est omise, la valeur retournée est par défaut « undefined ».
A.BENGAG 14
Éléments de base de JavaScript
les fonctions
Exemple
A.BENGAG 15
Éléments de base de JavaScript
Orienté Objet
un style de POO qui n'utilise pas les classes.
Ce langage ne dispose pas d'une instruction pour déclarer une classe (à la
différence de C++ ou Java).
Il utilise des fonctions comme constructeurs pour définir un objet. On définit les
propriétés et méthodes d'un objet en définissant une fonction qui sera utilisée
par la suite pour construire l'objet souhaité.
Pour définir une méthode, on peut l’ajouter à l’intérieur du constructeur. Le nom
auquel est assigné la fonction est le nom de la méthode.
Syntaxe :
this.method_name = function(parametre){
// contenu...
};
A.BENGAG 16
Éléments de base de JavaScript
Orienté Objet
Exemple : constructeur CompteBancaire.
A.BENGAG 17
Éléments de base de JavaScript
Orienté Objet
Exemple : constructeur CompteBancaire
Ajouter une méthode
A.BENGAG 18
Objets prédéfinis
Date
Cet objet permet de travailler avec des dates.
Quelques méthodes de l’objet Date :
getDate() : Retourne le jour du mois.
getDay() : Retourne le jour de la semaine.
getMonth() : Retourne le numéro du mois.
getFullYear() : Retourne l’année.
Pour créer un objet de type Date il faut écrire :
var nom_objet = new Date()
Une fois un objet Date construit, on peut l'utiliser par les nombreuses
méthodes qu'il possède.
A.BENGAG 19
Objets prédéfinis
Date
Exemple
A.BENGAG 20
Objets prédéfinis
String
Cet objet permet de travailler avec des chaînes de texte et de les manipuler.
Pour créer un objet de type String il faut écrire :
var nom_objet = new String("chaine");
Une écriture du style suivant est tolérée :
var nom_objet = "chaine";
La propriété length : la longueur d’une chaîne.
La méthode toLowerCase() : convertit une chaîne en minuscule.
La méthode toUpperCase() : convertit une chaîne en majuscule.
La méthode CharAt() : extrait un caractère simple à une position connue
à l’intérieur d’une chaîne.
…
A.BENGAG 21
Objets prédéfinis
String
Exemple
A.BENGAG 22
Objets prédéfinis
Math
L’objet Math permet de manipuler les nombres et d’accéder aux fonctions
mathématiques classiques.
Fonctions classiques : Math.abs(), Math.cos(), Math.sin(), Math.tan(),
Math.exp(), Math.log(), Math.sqrt().
Math.max() : retourne le maximum parmi deux nombres.
Math.min() : retourne le minimum parmi deux nombres.
Math.pow(x,y) : retourne x à la puissance y.
Math.random() : retourne un nombre aléatoire entre 0 et 1.
A.BENGAG 23
Les événements
Les événements sont des structures de code qui « écoutent » ce qui se
passent dans le navigateur et qui permettent de déclencher des actions
lorsque quelque chose de particulier se passe. Ils sont utilisés pour
permettre l’interactivité d’une page web.
Grâce au JavaScript, il est possible d'associer des fonctions et des méthodes
à des événements tels que le passage de la souris au-dessus d'une zone, le
changement d'une valeur, ...
Généralement, les événements JavaScript peuvent être appliqué sur
n’importe quel type d’éléments html. Pour cibler un élément on peut
utilise la méthode getElementById() de l’objet document. Cette méthode
retourne une référence à l'objet correspondant à l'identifiant donné.
A.BENGAG 24
Les événements
Objet document
L’objet document sert de point d'entrée au contenu d’une page web et
apporte des fonctions générales au document.
L’objet document de JavaScript utilise le Document Object Model (DOM),
pour accéder à la page Web et ses éléments.
Le DOM est une interface pour les documents HTML et XML. Il fournit
une représentation structurelle du document, permettant de modifier son
contenu et sa présentation visuelle. Fondamentalement, il relie les pages
Web aux scripts et langages de programmation.
A.BENGAG 25
Le DOM HTML
Lorsqu'une page Web est chargée, le navigateur crée un DOM (Document
Object Model) pour cette page.
Avec le DOM, JavaScript obtient toute la puissance dont il a besoin pour créer
du HTML dynamique :
Modifier tous les éléments et attributs HTML
Modifier tous les styles CSS de la page
Supprimer des éléments HTML existants
Ajouter de nouveaux éléments et attributs HTML
Réagir à tous les événements HTML existants dans la page
Créer de nouveaux événements HTML dans la page
A.BENGAG 26
Le DOM HTML
Le code HTML Le DOM HTML
A.BENGAG 27
Les événements
Objet document
Méthodes :
document.getElementById(): renvoie une référence à l'objet correspondant à
l'identifiant donné.
document.createElement: crée un nouvel élément du type spécifié
document.createTextNode: crée un nœud de texte.
document.write: écrit du texte dans le document.
Propriétés :
document.images: renvoie une liste des images du document.
document.location: renvoie l'URI du document courant.
…
A.BENGAG 28
Les événements
Objet document
Accéder aux éléments HTML par l’attribut ID
getElementById() Cette méthode permet d'accéder à un élément en
connaissant son ID qui est simplement l'attribut id de l'élément.
Exemple
A.BENGAG 29
Les événements
Objet document
La propriété innerHTML : permet de récupérer ou de définir le code HTML
présent à l'intérieur d'un élément
Exemple
A.BENGAG 30
Les événements
Objet document
La propriété innerText: récupérer du texte brut, sans aucunes balises HTML
Exemple
A.BENGAG 31
Les événements
appliquer un événement
Pour appliquer un événement à un élément html:
1ère méthode: associer le type d’événement (onclick, onload, …) à l’élément en le
spécifiant comme attribut.
Exemple : <p onclick="alert('Hello !');"> Cliquez-moi ! </p>
2ème méthode: cibler l’élément grâce à la méthode getElementById('id_element')):
1ère solution: appliquer la méthode événement directement sur l’élément HTML.
element.onEvenement()="Fonction();"
2ème solution: appliquer un évènement sur un élément HTML en utilisant la méthode
'setAttribute()'.
element.setAttribute('onEvenement','nom_fonction('args',event));
3ème solution: utiliser la méthode 'addEventListener'
element.addEventListener('Event_type', function(){ };)
A.BENGAG 32
Les événements
appliquer un événement
La méthode ‘addEventListener’ elle prend trois paramètres (on a spécifié que deux)
Le nom de l'événement;
La fonction à exécuter ;
Exemple
A.BENGAG 33
Les événements
appliquer un événement
La méthode ‘addEventListener’:
Liste d’événements
A.BENGAG 34
