Javascript
Chapitre 2
Objets JavaScript
Objets
• JS est orienté objet
– Encapsulation
• Données/Propriétés
– [Link]
• Méthodes
– [Link]()
– Héritage
• Se baser sur une ou plusieurs classes
Objets
• Comment créer un objet
– Opérateur new
var employer = new Object();
var livres = new Array("C++", "Python", "Java");
var jour = new Date( "Aout 15, 1947");
Objets
• Comment associer une propriété à un objet
– [Link] = propertyValue;
<html>
<head>
<script>
var livre = new Object();
[Link] = "JS";
[Link] = "IUT";
</script>
</head>
<body>
<script>
[Link]("Titre du livre : " + [Link] + "<br>");
[Link]("Son auteur : " + [Link] + "<br>");
</script>
</body>
</html>
Objets
• Création d'objet avec un constructeur
<html>
<head>
<script>
function livre (titre,auteur) {
[Link] = titre;
[Link] = auteur;
}
</script>
</head>
<body>
<script>
var monlivre = new livre("JS","IUT RC");
[Link]("Titre du livre : " + [Link] + "<br>");
[Link]("Son auteur : " + [Link] + "<br>");
</script>
</body>
</html>
Objets
• Création d'objet avec initializer
<html>
<head>
<script>
// Créer un objet:
var personne = {
prenom : "John",
nom : "Doe",
id : 5566,
complet: function() {
return [Link] + " " + [Link];
}
};
</script>
</head>
<body>
<script>
[Link]("Nom complet: " + [Link]() + "<br>");
</script>
</body>
</html>
Objets
• Numérique
– Syntaxe de création d’objet numérique
• var val = new Number(nombre);
– Si nombre n’est pas un nombre, cela renvoie NaN (Not a Number)
Objets
• Numérique
– Propriétés
Nom Description
Number.MAX_VALUE 1.7976931348623157E+308
Number.MIN_VALUE 5E-324
[Link] Not a Number
Number.NEGATIVE_INFINITY < Number.MIN_VALUE
Number.POSITIVE_INFINITY > Number.MAX_VALUE
prototype Est une propriété qui permet
d’associer de nouvelles
propriétés et méthodes à un
objet (Number, Boolean,
String, etc.)
Objets
• Numérique
– Méthodes
Nom Description Exemple
toFixed(n) Formate la valeur
[Link]()= 77
numérique avec un nombre
[Link](2)= 77.12
spécifique de chiffres après
la virgule
toLocaleString() Convertit la valeur
numérique en chaine (selon
le format dépendant des ,
[Link]()=77 123
paramètres du navigateur)
toPrecision(n) Définit le nombre de
chiffres à utiliser pour [Link]()=77.1234
afficher la totalité de la [Link](3)=77.1
valeur numérique
valueOf() Renvoie la valeur [Link]()=77.1234
Objets
• Booléen
– Syntaxe de création d’objet booléen
• var val = new Boolean(valeur);
– Si valeur est vide ou contient (0, -0, NaN, undefined, ""), val est false
Objets
• Booléen
– Méthodes
Nom Description
toString() Renvoie la chaine "true" ou "false"
valueOf() Renvoie la valeur
Objets
• Chaine
– Syntaxe de création d’objet chaine
• var val = new String(chaine);
– Si valeur est vide, val est une chaine vide.
Objets
• Chaine
– Propriétés
Nom Description
[Link] Retourne le nombre de caractères composant la
chaine
prototype Est une propriété qui permet d’associer de
nouvelles propriétés et méthodes à un objet
(Number, Boolean, String, etc.)
Objets
• Chaine
– Méthodes classiques de manipulation
Nom Description Exemple
charAt(n) Retourne le caractère situé à l'index n
"ABCDEFGH".charAt(1)=B;
spécifié qui commence à 0
charCodeAt(n) Retourne l'encodage Unicode du
"ABCDEFGH".charCodeAt(1) = 66
caractère spécifié
concat(str1, str2…) Retourne une chaîne contenant la "ABCD".concat("EF","GH")="ABCDEFGH"
concaténation d’au moins deux Equiv: "ABCD"+"EF"+"GH"
chaînes fournies
endsWith(str) Retourne "true" si une chaîne ou
sous-chaîne se termine par une autre "ABCDEFGH".endsWith("GH")=true
chaîne spécifiée
includes(str) Retourne "true" si la chaîne passée
est contenue dans l'objet String "ABCDEFGH".includes ("BC")=true
indexOf(str, debut) Retourne la position de la première "ABCDEFGH".indexOf("DE")=3
occurrence d'une sous-chaîne, sinon "ABCDEFGH".indexOf( "DG")=-1
-1
Objets
• Chaine
– Méthodes classiques de manipulation
Nom Description Exemple
match(exp) Correspond à une chaîne avec "ABCDBFGH".match(/B/)=["B"]
une expression régulière et "ABCDBFGH".match(/B/gi)=["B", "B"]
retourne un tableau contenant "ABCDBFGH".match(/[b-d]/gi)=["B", "C", "D", "B"]
les résultats de cette recherche
replace(exp, chaine) Remplace du texte dans une
chaîne, à l'aide d'une expression "ABCDBFGH".replace(/B/gi, "b")="AbCDbFGH"
régulière ou d'une chaîne de
recherche
search(exp) Recherche la première
correspondance de sous-chaîne
dans une recherche d'expression "ABCDbFGH".search(/b/)=4
régulière. Elle renvoie -1 si aucun "ABCDbFGH".search(/b/i)=1
match
slice(début, fin) Retourne une section de la "ABCDbFGH".slice(4)="bFGH"
chaîne. FIN est optionnel "ABCDbFGH".slice(4,6)="bF"
"ABCDbFGH".slice(4,-1)="bFG"
split(sep, limit) Fractionne une chaîne en sous-
chaînes à l'aide du séparateur "AB-CD-bF-GH".split ("-")=["AB", "CD", "bF", "GH"]
spécifié et les retourner sous la "AB-CD-bF-GH".split ("-",2)=["AB", "CD"]
forme d'un tableau
Objets
• Chaine
– Méthodes classiques de manipulation
Nom Description Exemple
substr(début, long) Obtient une sous-chaîne
débutant à la position "ABCDbFGH".substr(4)="bFGH"
spécifiée et ayant la "ABCDbFGH".substr(4,6)="bF"
longueur déterminée
toLowerCase() Convertit tous les caractères
alphabétiques d'une chaîne "ABCDbFGH".toLowerCase()="abcdbfgh"
en minuscules
toUpperCase() Convertit tous les caractères
alphabétiques d'une chaîne "aBCDbFGH".toUpperCase()="ABCDBFGH"
en majuscules
trim() Supprime les espaces blancs
de début et de fin ainsi que " aBCDb FGH ".trim()="aBCDb FGH"
les marques de fin de ligne
d'une chaîne.
valueOf(), toString() Retourne la chaîne "aBCDbFGH".valueOf()="aBCDbFGH".toString()="aBCDbFGH"
Objets
• Chaine
– Méthodes dédiées à HTML
Nom Description Exemple
anchor(nom) Place un point d'ancrage HTML comprenant "Mon ancre".anchor("Anchor1")
un attribut NOM autour du texte = <A NAME="Anchor1">Mon ancre</A>
link() Place un point d'ancrage HTML comprenant "Cliquer ici".link("[Link]
un attribut HREF autour du texte = <A HREF="[Link]
ici</A>
big() Place des balises HTML <BIG> autour du "Texte".big()
texte = <BIG>Texte</BIG>
small() Place des balises HTML <SMALL> autour du "Texte".small()
texte = <SMALL>Texte</SMALL>
fontsize(taille) Place des balises HTML <FONT> avec un "Texte".fontsize(14)
attribut TAILLE autour du texte = <FONT SIZE=14>Texte</FONT>
bold() Place des balises HTML <B> autour du texte "Texte".bold()
= <B>Texte</B>
italics() Place des balises HTML <I> autour du texte "Texte".italics()
= <I>Texte</I>
fontcolor(couleur) Place des balises HTML <FONT> avec un "Texte".fontcolor("red")
attribut COULEUR autour du texte = <FONT COLOR="red">Texte</FONT>
strike() Place des balises HTML <STRIKE> autour du "Texte".strike());
texte =<STRIKE>Texte</STRIKE>
Objets
• Chaine
– Complétez et corrigez le code suivant afin d’alerter
l’utilisateur s’il y a des espaces et @ dans la saisie
<html>
<head>
<script>
function verifier(email) {
if (!(verifieremail(email)))
{
return "ok";;
}
else
{
return "La saisie ne correspond pas"
}
}
function verifieremail(car, email) {
return ([Link](" ")) ;
}
</script>
</head>
<body>
<form name="monform" action="">
Enter name: <input type="text" name="monemail"/>
<input type="button" value=Valider onclick="alert(verifier())"/>
</form>
</body>
</html>
Objets
• Chaine
– Complétez et corrigez le code suivant afin d’alerter
l’utilisateur s’il y a des espaces et @ dans la saisie
<html>
<head>
<script>
function verifier(email) {
if (!(verifieremail(" ", email)) && verifieremail("@", email))
{
return "ok";;
}
else
{
return "La saisie ne correspond pas"
}
}
function verifieremail(car, email) {
return ([Link](car)) ;
}
</script>
</head>
<body>
<form name="monform" action="">
Enter name: <input type="text" name="monemail"/>
<input type="button" value=Valider onclick="alert(verifier([Link]))"/>
</form>
</body>
</html>
Objets
• Array
– Utilisé pour créer des tableaux
– Syntaxe
[element0, element1, ..., elementN]
new Array(element0, element1[, ...[, elementN]])
new Array(arrayLength)
– Exemple
• var tab = ["1er élément", "2eme élément", "dernier élément"];
– Ni la taille d'un tableau ni les types de ses
éléments n'est fixé var tableau = [];
tableau[0] = ’Salut';
tableau[99] = 200;
Objets
• Array
– On peut aussi utiliser
• var tab = [Link]('foo')); // tab = ["f", "o", "o"]
• var tab = [Link](1, 2, 3); // tab=[1, 2, 3]
– Accès aux éléments
• tableau[i]
– i=0 -> length-1
tab = ["f", "o", "u"]
tab(0) tab(3-1)= tab(-1)
Objets
• Array/propriétés
Nom Description
length Indique la propriété de longueur
prototype Permet d'ajouter des propriétés à tous les tableaux
Objets
• Array/méthodes
Nom Description
concat() fusionne un ou plusieurs tableaux en les concaténant. Cette méthode ne modifie pas les
tableaux existants, mais elle renvoie un nouveau tableau qui est le résultat de l'opération
var new_tableau = old_tableau.concat(valeur1[, valeur2[, ...[, valeurN]]])
every() Teste si TOUS les éléments d'un tableau vérifient une condition donnée par une fonction
var filtre = [12, 5, 8, 130, 44].every(elem => elem >=10); // filtre vaut false
filter() Crée et retourne un nouveau tableau contenant tous les éléments du tableau d'origine qui
remplissent une condition déterminée
function suffisammentGrand(element) {
return element >= 10; }
var filtrage = [12, 5, 8, 130, 44].filter(suffisammentGrand); // filtrage vaut [12, 130, 44]
var filtrage = [12, 5, 8, 130, 44].filter(elem => elem >=10);
['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'].filter(word => [Link] > 6);
// Array ["exuberant", "destruction", "present"]
Objets
• Array/méthodes
Nom Description
indexOf() Renvoie le premier indice pour lequel on trouve un élément donné dans un tableau. Si
l'élément cherché n'est pas présent dans le tableau, la méthode renverra -1
var aa=['a', 'b', 'c', 'd', 'b'].indexOf('b’); // aa = 1
lastIndexOf() Renvoie le dernier indice pour lequel une valeur donnée est présente dans un tableau.
Si la valeur recherchée n'est pas présente, le résultat sera -1.
var a=['Dodo', ‘Tigre', 'Penguin', 'Dodo'].lastIndexOf('Dodo'); // a = 3
join() Réunit tous les éléments d'un tableau dans une chaine de caractères et renvoie cette
nouvelle chaîne de caractères
var a=[‘Feu', ‘Vent', ‘Pluie'].join(); // a = Feu,Vent,Pluie
var a=['Fire', 'Wind', 'Rain'].join(‘-’); // a = Feu-Vent-Pluie
map() Crée un nouveau tableau composé des images des éléments du tableau courant par
une fonction donnée en argument
var a= [1, 4, 9, 16].map(x => x * 2); // a = [2, 8, 18, 32]
var a= [1, 4, 9, 16].map([Link]); // a = [1, 2, 3, 4]
pop() Supprime le dernier élément d'un tableau et retourne cet élément. Cette méthode
modifie la longueur du tableau.
var a= ['bro', 'cauli', 'cab', 'ka', 'tomate'].pop(); / // a = ‘tomate’
Objets
• Array/méthodes
Nom Description
push() Ajoute un ou plusieurs éléments à la fin d'un tableau (et retourne la nouvelle taille du
tableau)
var sports = ["plongée", "baseball"].push("football", "tennis");
// sports =["plongée", "baseball", "football", "tennis"]
reverse() Inverse les éléments d'un tableau. Le premier élément du tableau typé devient le dernier,
le dernier élément devient le premier et ainsi de suite
[1, 2, 3].reverse(); // [3, 2, 1]
shift() Permet de retirer le premier élément d'un tableau et de renvoyer cet élément. Cette
méthode modifie la longueur du tableau.
[1, 2, 3].shift(); // 1
slice(debut, fin) Renvoie un objet tableau, contenant une copie superficielle d'une portion du tableau
d'origine, la portion est définie par un indice de début et un indice de fin (exclus). Le
tableau original ne sera pas modifié.
["a", "b", "c", 'd", "e'].slice(2); // ["c", "d", "e"]
["a", "b", "c", 'd", "e"].slice(2,4); // ["c", "d"]
["a", "b", "c", 'd", "e"].slice(); // ["a", "b", "c", 'd", "e"]
some() Teste si au moins un élément du tableau passe le test implémenté par la fonction fournie.
[2, 5, 8, 1, 4].some(elem => elem > 10); // false
[12, 5, 8, 1, 4].some(elem => elem > 10); // true
Objets
• Array/méthodes
Nom Description
sort() Trie les éléments d'un tableau, dans ce même tableau, et renvoie le tableau.
['Mars', 'Jan', 'Fev', 'Dec'].sort(); // [‘Dec’, ‘Fev’, ‘Jan’, ‘Mars’]
[1, 30, 4, 21].sort(); // [1, 4, 21, 30]
splice(début, modifie le contenu d'un tableau en retirant des éléments et/ou en ajoutant
[nbr_ele_A_Suppri de nouveaux éléments à même le tableau. La valeur de retour est un tableau
mer, [elems] ]) contenant les éléments supprimés
var montab = ["s", "c", "m", "cm"];
// montab=["s", "c"] et tab=["m", "cm"]
var tab=[Link](2);
// ["s", "c", "t", "m", "cm"] et tab=[]
var tab=["s", "c", "m", "cm"].splice(2, 0, "t");
// ["s", "c", "m"] et tab=["cm"]
var tab=["s", "c", "m", "cm"].splice(3, 1); //
var tab=["s", "c", "m", "cm"].splice(2, 1, "t", "tt"); // ["s", "c", "t", "tt", "cm"] et tab=["m"]
var tab=["s", "c", "m", "cm"].splice(0, 2, "t", "tt"); // ["t", "tt", "m","cm"] et tab=["s","c"]
unshift() ajoute un ou plusieurs éléments au début d'un tableau et renvoie la nouvelle
longueur du tableau
var tab = [1, 30, 4, 21].unshift(-5, 0); // [Link]=6 et tab=[-5, 0, 1, 30, 4, 21]
Objets
Browser Object Model
Objets
• Browser Object Model ou BOM
– Window est un objet compatible avec tous les
navigateurs
– L’objet document (de DOM) est une propriété
de window
Objets
• BOM
– Window/propriétés
Nom Description
defaultStatus Texte par défaut de la barre d’état
frameElement Donne l’objet IFRAME qui contient la fenêtre. Si aucun iframe, renvoie null
history Donne l’objet HISTORY de la fenêtre
length Indique le nombre d’élèments iframe dans la fenêtre
name Nom de la fenêtre
status Texte de la barre d’état (plus supporté)
location Donne l’objet LOCATION de la fenêtre
innerHeight/innerWidth Donne la longueur et la largeur de la fenêtre
document Contient les caractéristiques et tous les objets de la fenêtre
Objets
• BOM
– Window/Méthodes
Nom Description
alert() Affiche un message d’alerte (avec un bouton OK)
Alert("Salut\n comment vas tu?")
confirm(message) Affiche un message de confirmation et attend le retour de l’utilisateur:
Variable = confirm( "Message à afficher");
OK => Variable=true; Cancel => Variable=false
prompt(Etiquette, Affiche un boite de saisie et attend le retour de l’utilisateur:
valeur_par_defaut) Variable = prompt( "Saisie", "Votre nom");
OK => Variable=chaine saisie; Cancel => Variable=null
print() Permet d’imprimer la fenêtre
close() Ferme la fenêtre courante
open(URI, name, Permet d’ouvrir une nouvelle fenêtre.
specs) Mafen=[Link]("", "", "width=100, height=100");
resizeTo(larg, long) Permet de modifier la taille d’une fenêtre.
[Link](250, 250)
focus()/blur() Permet de rendre la fenêtre active/inactive
[Link]()
Objets
• Browser Object Model ou BOM
– Navigator est un objet qui contient des
informations sur le navigateur
Objets
• BOM
– Navigator/propriétés
Nom Description
[Link] Donne le nom du navigateur
[Link] Donne la version du navigateur
[Link] Donne la langue du navigateur
[Link] Indique le système d’exploitation
[Link] Indique si les cookies sont activés ou pas
[Link] Indique si le navigateur est en ligne ou pas
Objets
• BOM
– Navigator/Méthodes
Nom Description
[Link]() Renvoie true si Java est activé
Objets
• Browser Object Model ou BOM
– History est un objet qui permet de manipuler
l’historique du navigateur
Objets
• BOM
– History/propriétés
Nom Description
[Link] Est le nombre d’URI dans la liste
Objets
• BOM
– History/Méthodes
Nom Description
back() Retourne à l’URI précédente dans la liste
[Link]();
forward() Va à l’URI suivante dans la liste
[Link]();
go(nombre/URI) Affiche l’URI choisie dans la liste
[Link](-2); //retourne 2 pages
[Link](0); //recharge le document courant
Objets
• Browser Object Model ou BOM
– Location est un objet qui contient des
informations sur l’URI de la fenêtre
Objets
• BOM
– Location/propriétés
Nom Description
hash Indique l’ancre d’une URI
[Link]=#debut; // si l’URI actuelle est: http//[Link]-
[Link]#debut
host Donne le nom du serveur et port d’une URI
[Link]
hostname Donne le nom du serveur d’une URI
[Link]
href Contient l’adresse complète de l’URI en cours / permet de
charger une nouvelle page
[Link]
Objets
• BOM
– Location/Méthodes
Nom Description
assign() Permet de charger une nouvelle page
[Link]("[Link]
reload() Permet de recharger la page
replace() Remplace la page actuelle par une nouvelle page (en la
supprimant également de l’historique)
[Link]("[Link]
Objets
• Document Object Model ou DOM (Modèle
d'Objet du Document en fr)
– Est une convention multiplateforme,
indépendante du langage utilisée pour
représenter et interagir avec les objets d’un
document HTML, XHTML et XML
– Définit les interfaces offertes par les documents
HTML et XML sans cibler un langage de
manipulation précis
Objets
• Document Object
Model ou DOM
– Permet de structurer le
document (en-têtes,
tableaux, en-têtes de
colonnes, texte contenu
dans les cellules, etc.)
comme un arbre
– Chaque objet du
document est identifié
par un ID ou nom
Objets
• DOM
– document/propriétés
Nom Description
title Indique le titre
fgColor Indique la couleur du texte
bgColor Indique la couleur du fond
linkColor Indique la couleur des liens
vlinkColor Indique la couleur des liens visités
lastModified Indique la date de la dernière modification
URI Indique l’adresse du document
Objets
• DOM
– document/propriétés
Nom Description
body Est une référence à l’élément <body>
documentElement Est une référence à l’élément <html>
cookie Indique la liste des cookies
domain Indique le nom du domaine internet du document
Objets
• DOM
– document/propriétés
Nom Description
anchor[] Indique la liste des liens internes (<A Name=...>)
forms[] Indique la liste des formulaires
Indique la liste des élèments du formulaire
elements[]
images[] Indique la liste des images
links[] Indique la liste des liens HREF
Objets
• DOM
– document/propriétés
• Pour accéder aux éléments d’un formulaire
[Link]["f"].elements["a"]
[Link][0].elements["a"]
[Link]["f"].elements[0]
[Link]["f"].a
document.f.a
Objets
• DOM
– document/propriétés
• Pour accéder aux valeurs/propriétés/méthodes des
éléments d’un formulaire
Valeur: [Link]["f"].elements["a"].value
Objets
• DOM
– document/propriétés
• this permet de représenter l’objet en cours
d’utilisation
<html>
<head>
</head>
<body>
<form name="monform" action="">
Entrez nom:
<input type="text" name="etudiant" value="test"/>
<input type="button" name="a" value="Modifier Cookies"
onclick="[Link]=[Link]"/> </form>
</body>
</html>
L’objet button
Objets
• DOM
– document/méthodes
Nom Description
write(exp1, exp2…) Permet d’afficher les expressions passées en paramètres
selon leur ordre
writeln(exp1, exp2…) Permet d’afficher les expressions, suivie d’un saut de ligne,
passées en paramètres selon leur ordre
open(MIME,replace) Permet d’ouvrir un document avec un type optionel MIME
(e.g., "text/html"). Le paramètre optionnel replace permet
d’hériter toute l’historique du document parent
[Link]("text/html");
[Link]("<html><body><p>Hello
World!</p></body></html>");
Objets
• DOM
– document/méthodes
Nom Description
getElementById(a) Retourne l’élément dont l’attribut id=a (une chaine). La
valeur de a doit être unique
<p id="demo">….</p>
…
<script>
var x = [Link]("demo");
[Link] = "red";
</script>
Objets
• DOM
– document/méthodes
Nom Description
getElementsByName(a) Retourne le tableau des éléments dont l’attribut name vaut a
Prénom: <input name="prenom" type="text" value="Michael"><br>
Nom: <input name="nom" type="text" value="Doug">
…
<script>
var x = [Link]("nom")[0].value= x;
</script>
Objets
• DOM
– document/méthodes
Nom Description
getElementsByTagName(tag) Retourne le tableau des éléments de type tag ("P",
"LI", "INPUT"…. ou "*" pour récupérer tous les éléments)
<p>paragraph1</p>
<p>paragraph2</p>
<script>
[Link]("P")[0].innerHTML = "Hello World!";
</script>
<html>
Corrigez ce <body>
script
<p>Javascript</p>
<p>Java</p>
<p>VB Script</p>
<button onclick="test()">Testez</button>
<script>
function test() {
var x = [Link]("p");
for (i = 0; i < [Link]; i++) {
x(i).[Link] = "red";
}
}
</script>
</body>
</html>
Quel est le <html>
résultat de ce <body>
script ?
<p>Javascript</p>
<p>Java</p>
<p>VB Script</p>
<button onclick="test()">Testez</button>
<script>
function test() {
var x = [Link]("P");
for (i = 0; i < [Link]; i++) {
x[i].[Link] = "red";
}
}
</script>
</body>
</html>
<html>
Complétez le <body>
script suivant <p>Ma liste</p>
<ul>
<li>Java</li>
<li>Javascript</li>
<li>Script</li>
</ul>
<p>Cliquez ici pour afficher le 2ème élément de la liste </p>
<button id="demo" onclick="test()">Validez</button>
<script>
function myFunction() {
var x = [Link]("LI");
[Link]("demo").innerHTML =
x[1].innerHTML;
}
</script>
</body>
</html>
<html>
Complétez le <body>
script suivant <p>Ma liste</p>
<ul>
<li>Java</li>
<li>Javascript</li>
<li>Script</li>
</ul>
<p> Cliquez ici pour afficher le 2ème élément de la liste </p>
<button id="demo" onclick="test()">Validez</button>
<script>
function test() {
var x = [Link]("LI");
[Link]("demo").innerHTML =
x[1].innerHTML;
}
</script>
</body>
</html>
