Développement Web:

Javascript & PHP

CHAPITRE 5

OBJETS ET ÉVÈNEMENTS
  Les objets prédéfinis: Array, String, Math

PLAN 


Les objets personnalisés
BOM & DOM
 Les évènements
“
LES OBJETS

”
 Types primitif / type objet

 Type primitif: Une variable de type primitif ne stocke qu’une simple valeur (chaîne de
caractères, nombre, booléen…)
 Type objet: Un objet permet de définir des entités plus complexes en regroupant un ensemble
de valeurs pouvant être soit des valeurs primitives soit d’autres objets.
 Les objets ne sont pas qu'un regroupement de valeurs, il possèdent des fonctions, qu’on
appelle méthodes (les objets peuvent aussi avoir un comportement).
 Deux types d’objets
 Objets natifs
 types prédéfinis : Array, String, Date …
 objets liés à l'environnement d'exécution: window , document …
 Objets personnalisés
 types définis par l'application
4
 L’objet String

 Un objet string est une chaîne de caractères.

 Il possède une seule propriété length et plusieurs méthodes

let s = "hello world";

alert(s.length); // 11

 L’objet String offre des méthodes de formatage du texte:

 toUpperCase(), toLowerCase()
 Ainsi que d’autre méthodes pour manipuler les chaines de caractères
 slice(), substring(), String trim()
 Voir: https://www.w3schools.com/js/js_string_methods.asp

5
 L’objet String
let s = "hello world";
CharAt () : Cette méthode renvoie le caractère situé à la position x fournie en
paramètre. Le numéro de la position est compris entre 0 et la longueur de la chaîne –1.
alert(s.charAt(1)); // "e"
Substring (start, end).: Cette méthode renvoie la sous-chaîne comprise entre les
positions x et y indiquées en paramètres, dans la chaîne principale
alert(s.substring(3,7)); // "lo w"
Slice () : Equivalent à substring()
alert(s.slice(3)); // "lo world"
alert(s.slice(-3)); // "rld "

6
 L’objet String

Substr(start, n) : Cette méthode renvoie le texte une sous-chaîne de la String, à

partir du début et sur n caractères.
alert(s.substr(6,2));//wo
IndexOf () : Cette méthode renvoie la première position d’une chaîne partielle dans une
autre chaîne en partant de gauche, à partir de la position x indiquée en paramètre. Si
elle n’est pas présente, la méthode renvoie –1.
alert(s.indexOf("o"));// 4
Concat () : Cette méthode renvoie la concaténation de la chaîne passée en paramètre
avec celle de la méthode.
x = "exemple " ;
alert(x.concat(s)) ;// exemple hello world
7
 L’objet Math

 L'objet Math vous permet d'effectuer des opérations mathématiques.

 Math n'est pas un constructeur. Toutes les propriétés/méthodes de Math peuvent être appelées
en utilisant Math comme objet, sans le créer :

let x = Math.PI;
let y = Math.sqrt(16);

 Pour la liste des méthodes par l’objet Math,

 Voir: https://www.w3schools.com/jsref/jsref_obj_math.asp

8
 L’objet Array

 Un objet Array représente un tableau.

 Il possède une seule propriété length et plusieurs méthodes

var colors = new Array("red","blue","green");

alert(colors); // red,blue,green
join (séparateur) : regroupe tous les éléments du tableau en une seule chaîne. Chaque
élément est séparé par un séparateur
alert(colors.join(";")); // red;blue;green
colors.push("black"); //Ajouter un élément à la fin du tableau
alert(colors); // red,blue,green,black
let item = colors.pop(); // Enlever le dernier élément du tableau
alert(item + " " + colors); // black red,blue,green 9
 L’objet Array

let item = colors.pop(); // Enlever le dernier élément du tableau

alert(item + " " + colors); // black red,blue,green
let values = [0, 1, 2, 3, 4];
alert(values.reverse()); // 4,3,2,1,0
alert(colors.sort()); // blue,green,red

 Voir: https://www.w3schools.com/js/js_array_methods.asp

10
 L’objet Date

 L’objet Date permet de manipuler les dates et les heures

 Les objets Date sont créés avec new Date().
 Il a les plusieurs propriétés: year, month, day, hours, minutes, seconds, milliseconds

let d= new Date();//la date courante

let d1= new Date(year, month, day[, hours, minutes, seconds, millis
econds]);//Les valeurs entre [] sont optionnelles

 L’objet Date offre plusieurs méthodes pour manipuler les dates:

 getDate(), getDay(), getMonth(), getSeconds(), getTime(), parse(), UTC(), etc.

 Voir: https://www.w3schools.com/jsref/jsref_obj_date.asp
11
“
LES OBJETS PERSONNALISÉS

”
 Objets et propriétés

 Créer un objet personnalisé

let personne = new Object();
personne.nom = "Wissam";
personne.age = 23;
//ou bien
let personne = { nom : "Wissam", age : 23 }

 L’accès aux propriétés et méthodes de l’objet se fait par le .

 Le mot clé this fait référence à l’objet en cours: this.propriete

13
 Objets et propriétés

 Les objets peuvent avoir des fonctions, qu'on appelle méthodes

personne.prez = function(){
alert('Bonjour, je suis ' + this.nom+
', j\'ai ' + this.age + ' ans ‘ );
}
personne.prez();

14
“
LES OBJETS PRÉDÉFINIS
DOM & BOM
”
 Modèle objet

 Quand une page web est chargée, le navigateur crée plusieurs objets pour représenter les
informations y figurant.

 Ces objets sont classés de manière hiérarchique, l'objet le plus haut dans la hiérarchie (appelé
aussi racine car la hiérarchie est arborescente) étant un objet de la classe window

 Ces objets sont accessibles par une syntaxe hiérarchique « à point »:

 window.document.form.resultat.value

16
 Modèle objet

 Chaque page web s'affiche dans une fenêtre → C'est l'objet fenêtre (window).

 Dans chaque fenêtre, il y a un document HTML →C'est l'objet document.

 L’objet fenêtre contient l'objet document, qui lui-même peut contenir d’autres objets.

Objet window
(1 par onglet)

Objet document

17
 BOM

 Le BOM: Browser Object Model est un ensemble d'objets accessibles en JavaScript qui
comprennent divers éléments d'un navigateur

Représente des informations sur le navigateur et le système d'exploitation sous-jacent

Informations sur les capacités d'affichage du PC client exécutant le navigateur

Informations sur les sites récemment visités

Informations sur l'URL actuelle

Représente la page Web actuelle - le DOM

18
 L’objet window

 L’objet window représente la fenêtre du navigateur actuellement ouverte.

 Pour les navigateurs qui supportent les onglets, chaque onglet va posséder son propre objet
window.
 Quelques propriétés de cet objet:
 fullScreen, innerHeight, innerWidth , opener,
 Quelques méthodes de cet objet:
 alert() , confirm(), prompt, open(), close(), back(), etc.

Vous pouvez vous référer à : https://developer.mozilla.org/fr/docs/Web/API/Window pour plus

détails sur l’objet window.

19
 L’objet Window
 L’objet window est un objet dit « implicite » : nous n’aurons généralement pas besoin de le
mentionner de manière explicite pour utiliser les méthodes et propriétés lui appartenant.

 Exemple 1 : Pour lancer une alert (qui est déjà une fonction de l’objet window) :

window.alert("Html"); ou bien alert("Html");

 Exemple 2 : Pour rediriger la page courante vers le site de « google.com » :

location.href ="https://www.google.com/"

 Ou bien
window.location.href ="https://www.google.com/"

20
 DOM

 Le DOM: Document Object Model est un ensemble d'objets accessibles en JavaScript qui
permettent de manipuler tous les objets qui sont inclus dans le documents HTML (images, textes,
formulaires...).

 L'objet document est hiérarchiquement placé sous l'objet window.

21
DOM

22
 L’objet document

 L’objet document représente le « contenu de la fenêtre » ou le document HTML

 Quelques propriétés de cet objet:
 head, links, stylsheets, characterset, documentURI, etc
 Quelques méthodes de cet objet:
 append(), createElement(), getElementById(), write(), etc.

Vous pouvez vous référer à : https://developer.mozilla.org/fr/docs/Web/API/Document pour plus

détails sur l’objet document.

23
 L’objet document

 Document possède plusieurs collections d’objets:

Collection Description
anchors[] Returns an array of all the anchors in the document
forms[] Returns an array of all the forms in the document
images[] Returns an array of all the images in the document
links[] Returns an array of all the links in the document

24
 Les fonctions de recherche d’éléments dans le DOM

 Document représente le contenu de la page HTML, et offre plusieurs méthodes

pour récupérer les éléments HTML:
Méthode Rôle
getElementsByTagName("balise") Retourne un tableau d'éléments HTML à partir du nom de leur balise
getElementById("id") Retourne un élément (HTMLElement) du DOM à partir de son
identifiant
getElementsByClassName("classe") Renvoie une collection d’objets de tous les éléments qui ont tous les
noms de classe donnés
getElementsByName("nom") Retourne une collection d'éléments HTML ayant l'attribut name qui
vaut nom
querySelector(sélecteurs) retourne le premier Element dans le document correspondant au
sélecteur - ou groupe de sélecteurs - spécifié(s), ou null si aucune
correspondance n'est trouvée
querySelectorAll(sélecteurs) Renvoie une liste d'éléments avec l'élément courant comme racine
et qui correspondent au groupe de sélecteurs spécifiés. 25
Les fonctions de recherche d’éléments dans le DOM

 Exemple : Soit le code Html suivant

<body>
<h1 id="titre">HTML5!</h1>
<p> Paragraphe N 1
<b> texte gras </b> et <b> un autre texte gras </b>
</p>
<h2> <b>Titre</b> </h2>
<p> Paragraphe N 2</p>
</body>
26
Les fonctions de recherche d’éléments dans le DOM

1) Accéder à l’élément ayant id='titre' let element1 = document.getElementById("titre");

2) Accéder à tout les pagragraphes

// elements : un tableau contenant des références vers tous les paragraphes
let elements = document.getElementsByTagName("p");
//elements[0] : accès au premier paragraphe

3) Accéder au premier texte gras <b> dans un paragraphe

let element2 = document.querySelector("p b");

4) Accéder à tous les textes gras dans un paragraphe

let elements = document.querySelectorAll("p b");

27
Propriétés et méthodes des éléments du DOM

 HTMLElement : Il s’agit d’une interface basique regroupant les propriétés reflétant des
caractéristiques intrinsèques aux éléments HTML présents dans le document, ou plutôt des
nœuds du DOM au travers desquels ils sont représentés.

28
 Propriétés et méthodes des éléments du DOM
 Exemples des attributs et de méthodes de HTMLElement

Attribut ou fonction Rôle

innerText ou contentText Accéder au contenu texte d'un élément HTML
innerHtml Accéder au contenu Html d’un élément Html
style Accéder à tous les styles CSS de l’élément Html
style.* Accéder à des propriétés CSS individuelles de la forme style.width,
style.fontSize, style.color, style.listStyleType, etc.
getAttribute(attr) Renvoie la valeur de l’attribut attr
setAttribute('attribute’, ' new value') Pour modifier la valeur d'un attribut HTML

value Accéder à la valeur d’un champ de type input. Peut être modifié (avec
= ) pour changer la valeur de l’input
checked Retourne true si un input (radio ou checkbox) coché, ou false si
décoché.
selected Retourne true si une option d’un select est sélectionnée ou false sinon.
29
Propriétés et méthodes des éléments du DOM

 Exemple 1 : modifier la source (attribut src) d’une image

<body>
<img id='img' src=''>

<script>
//sélectionner l’image par son id
let element = document.getElementById("img")
//modifier la source de l’image
element.setAttribute('src','monteau.jfif')
</script>
</body>
30
Propriétés et méthodes des éléments du DOM

 Exemple 2 : input de type text

Nom <input type="text" name="nom" value="ali" i

d='nom'>

 Un script qui manipule l’input

//récupérer l'élément Html du input nom

let elementNom = document.getElementById('nom')
//afficher le nom dans alert
alert(elementNom.value) //affiche ahmed
//modifions le contenu de l’input
elementNom.value = 'ali’

31
Propriétés et méthodes des éléments du DOM

 Exemple : checkbox

Connaissances:
<input type="checkbox" name="c1" value="CSS"> CSS
<input type="checkbox" name="c1" value="Html">Html
<input type="checkbox" name="c1" value="JS" checked>JavaScript

 Un script qui permet d’afficher dans une alert les contenus des cases cochées
//récupérer les éléments Html du input checkbox
let elementsConnaissances = document.getElementsByName("c1");
/* afficher dans une alert la value cochée du input radio
en parcourant le tableau elementsNiveau
*/
for(let i=0; i<elementsConnaissances.length; i++)
{
if(elementsConnaissances[i].checked==true)
alert(elementsConnaissances[i].value);
} 32
“
LES ÉVÈNEMENTS

”
 Evènement

 Un évènement est provoqué par une action de l'utilisateur ou du navigateur lui-même.

 Les évènements ont des noms tels que click, load et mouseover.

 Une fonction appelée en réponse a un événement se nomme un écouteur (event handler ou

event listener). Souvent, leur nom commence par on comme par exemple onclik ou onload.

 Plusieurs gestionnaires d’évènements peuvent être associés au même élément Html

 https://www.w3schools.com/tags/ref_eventattributes.asp

34
 Gestion des évènements

 Syntaxe:

 Exemple:

35
 Gestion des évènements
 Exemple:

36
 Gestion des évènements
 Exemple:

37
 Liste des évènements

 Quelques évènements de formulaire:

Attribute Description
onblur Fires the moment that the element loses focus
onchange Fires the moment when the value of the element is changed

onfocus Fires the moment when the element gets focus

oninput Script to be run when an element gets user input
oninvalid Script to be run when an element is invalid
onreset Fires when the Reset button in a form is clicked
onselect Fires after some text has been selected in an element
onsubmit Fires when a form is submitted
38
 Liste des évènements

 Quelques évènements de souris:

Attribute Description
onclick Fires on a mouse click on the element
ondblclick Fires on a mouse double-click on the element
onmousedown Fires when a mouse button is pressed down on an element
onmousemove Fires when the mouse pointer is moving while it is over an element
onmouseout Fires when the mouse pointer moves out of an element
onmouseover Fires when the mouse pointer moves over an element
onmouseup Fires when a mouse button is released over an element
onwheel Fires when the mouse wheel rolls up or down over an element

39
Questions?