SlideShare une entreprise Scribd logo
Chapitre 2: Les objets de base du JS
1
L’objet tableau
 Le tableau est défini à travers les mots clés new et Array :
var MonTableau1 = new Array(); //tableau vide
var MonTableau2 = new Array(1,"Salut",3.14,true); //tableau hétérogène
 Le tableau peut aussi être déclaré sans new et Array :
var MonTableau3=résultat_de_type_tableau ;
ex : var MonTableau3 = ['valeur1', 'valeur2', …, 'valeurX'];
 Tout indice de tableau débute en 0.
 La taille d'un tableau n'est pas figée par sa définition ou son initialisation.
Elle est dynamique.
 A chaque instant, la taille d'un tableau peut être connue en invoquant la
propriété length de l'objet correspondant à ce tableau.
ex : MonTableau2.length retourne 4
2
Méthodes de l’objet tableau(1)
 push() : ajoute des éléments à la fin d’un tableau
<script>
var MonTableau = ['Salah', 'Ali'];
MonTableau.push('Ahmed'); // Ajoute « Ahmed » à la fin du tableau
MonTableau.push('Fatma', 'Mariem'); // Ajoute «Fatma» et «Mariem» à la fin
</script>
 unshift() fonctionne comme push(), excepté que les éléments sont
ajoutés au début du tableau.
 shift() et pop() retirent respectivement le premier et le dernier
élément du tableau.
3
<script>
var MonTableau = ['Salah', ‘Ali ', 'Ahmed', 'Fatma', 'Mariem'];
MonTableau.shift(); // Retire «Salah»
MonTableau.pop(); // Retire «Mariem »
alert(MonTableau); // Affiche « Ali Ahmed Fatma »
</script>
<script>
var cousinsString_2 = cousinsArray.join('-');
alert(cousinsString_2); </script>
<script>
var cousinsString = 'Ali Mariem Fatma',
cousinsArray = cousinsString.split(' ');
alert(cousinsString);
alert(cousinsArray);
alert(cousinsArray[1]);
</script>
 split() : découpe une chaîne de caractères en tableau
4
Méthodes de l’objet tableau(2)
 join() : convertit un tableau en chaîne de
caractères composée de tous les éléments
du tableau séparés par la chaîne
Parcourir un tableau
 On peut parcourir un tableau avec for :
<script>
var MonTableau = ['Rafael', 'Mathilde', 'Ahmed', 'Jérôme',
'Guillaume']; // length est de 5
for (var i = 0, c = MonTableau.length; i < c; i++) {
alert(MonTableau[i]);
/* On affiche chaque élément, l'un après
l'autre, jusqu'à la longueur totale du tableau*/
}
</script>
5
Application
Demandez les prénoms aux utilisateurs et stockez-les dans un tableau. Pensez à
la méthode push(). À la fin, il faudra afficher le contenu du tableau, avec alert(),
seulement si le tableau contient des prénoms. Pour l'affichage, séparez chaque
prénom par un espace.
6
<script>
var prenoms = [], prenom;
while (prenom = prompt('Entrez un prénom :'))
{
prenoms.push(prenom); // Ajoute le nouveau prénom ainsi qu'un
espace
}
if (prenoms.length > 0) {
alert(prenoms.join(' '));
} else {
alert('Il n'y a aucun prénom en mémoire');
}
</script>
L’objet String
 Les chaînes de caractères sont représentées par l'objet String.
 Pour créer une chaîne de caractères, on utilise généralement
ces syntaxes :
var maChaine = "Chaîne de caractères";
var maChaine = new String("Chaîne");
 length retourne le nombre de caractères contenus dans une
chaîne. Les espaces, les signes de ponctuation, les chiffre, etc.
sont considérés comme des caractères.
<script>
var ch= 'Ceci est une chaîne de caractères'; // On crée un objet String
alert(ch.length); // On affiche le nombre de caractères
</script>
Méthodes de l’objet String (1)
 toUpperCase() convertit la chaîne en majuscule
<script>
var ch = 'Ceci est une chaîne de caractères'; // On crée un objet String
alert(ch.toUpperCase()); // On récupère la chaîne en majuscules
</script>
 toLowerCase() convertit la chaîne en minuscule
 trim() supprime les espaces d'une chaîne de caractères
 indexOf() retourne la position de la première sous-chaîne trouvée, et s'il n'y en a
pas la valeur -1 est retournée.
<script>
var ch= 'Le JavaScript est plutôt facile';
var result = ch.indexOf('JavaScript');
if (result > -1) {
alert('La chaîne contient le mot "JavaScript" qui débute à la position ' + result);
}
</script>
8
Méthodes de l’objet String (2)
 On extrait une chaîne avec substring(), substr() et slice()
 substring(a, b) permet d'extraire une chaîne à partir de la position a (incluse)
jusqu'à la position b (exclue).
 substr(a, n) accepte deux paramètres : le premier est la position de début, et le
deuxième le nombre de caractères à extraire.
 slice() extrait la chaîne jusqu'à la fin, en décomptant le nombre de caractères
indiqué.
<script>
var sch = 'JavaScript'.slice(0, 6); //retourne JavaSc
var sch = 'JavaScript'.slice(0, -6); //retourne Java
</script>
 charAt() extrait le nième
caractère.
 replace() remplace la première occurrence d’une sous-chaîne par une autre
<script>
var str = "Etudier HTML";
var res = str.replace("HTML", "Javascript");
alert(res) ; // donne Etudier Javascript </script>
9
 split() permet de couper une chaîne de caractères à chaque fois
qu'une sous-chaîne est rencontrée. Les « morceaux » résultant de la
coupe de la chaîne sont placés dans un tableau.
<script>
var Ch = 'Mohamed,Ali,Hédia';
var Tspl= Ch.split(','); // On coupe à chaque fois qu'une virgule est
rencontrée , Tspl est un tableau.
alert(Tspl.length); // 3
</script>
Méthodes de l’objet String (3)
Exemples (1)
var datenais = "15/08/1985";
var journais = datenais.substring(0,2)
/* donne le même résultat avec datenais.substr(0,2)
ou datenais.slice(0,2)*/
alert("Le jour de naissance est : "+journais )
var moisnais = datenais.substring(3,5);
/* donne le même résultat avec datenais.substr(3,2) ou
datenais.slice(3,2);
alert("Le mois de naissance est : " +moisnais )
var anneenais = datenais.slice(6,10);
alert("L’année de naissance est :" + anneenais );
/* donne le même résultat avec datenais.slice(-4),ce qui signifie extraction des 4
derniers caractères
11
Exemples (2)
var chaine="azerty";
document.write(chaine.indexOf("z") ) // donne 1
document.write (chaine.indexOf("z",2) )// donne -1
var Ch="Salut Salut" ;
document.write( Ch.indexOf("S")) ; // donne 0
document.write( Ch.lastIndexof("S")) // donne 6
document.write( Ch.charAt(4)) ; // donne t
document.write(Ch.replace("Salut","Bonjour" ))
12
L’objet Date
 Permet de manipuler la date et l’heure
 La date est stockée dans une variable sous la forme d'une
chaîne
 Contient le jour, le mois, l'année, l'heure, les minutes, et les
secondes
 Les méthodes de l'objet Date permettent d’accéder et de
manipuler les éléments de la date
 Créer un objet date : ObjDate = new Date([paramètres])
 ObjDate = new Date() //donne la date et l’heure courante
 Objet_date = new Date() ("December 25, 2017 13:30:00")
//une chaîne de caractères sous la forme "month day, year
hour:min:sec"
 Objet_date = new Date(2017, 11, 25 , 13, 30 , 00)
//des entiers sous la forme année, mois-1,jour,h,mn,s
13
Méthodes de l’objet date (1)
14
Méthode Description
getDate() rechercher le jour du mois entre 1 et 31
getDay() rechercher le jour de la semaine entre 0 et 6
commençant par dimanche=0
getFullYear() rechercher l'année complète
getHours() rechercher la partie heures entre 0 et 23
getMinutes() rechercher la partie minutes entre 0 et 59
getMonth() rechercher le mois entre 0 et 11
getSeconds() rechercher la partie secondes entre 0 et 59
getTime() rechercher le nbre de millisecondes depuis
01/01/1970
getYear() rechercher le nombre d’année depuis 1900
15
Méthodes de l’objet date (2)
Méthode Description
setDate(X) Permet de fixer la valeur du jour du mois
setDay(X) Permet de fixer la valeur du jour de la semaine
setHours(X) Permet de fixer la valeur de l'heure
setMinutes(X) Permet de fixer la valeur des minutes
setMonth(X) Permet de fixer le numéro du mois
setTime(X) définit une date et une heure en ajoutant ou en
soustrayant un nombre spécifié de millisecondes à / à
partir de minuit le 1er janvier 1970.
setInterval(traitement,
délai)
Lance un traitement répété à intervalle régulier de délai
millisecondes. Ce traitement peut être arrêté avec
clearInterval() ou clearTimeout()
setTimeout(traitement,
délai)
Définit une action à exécuter et un délai avant son
exécution
ClearTimeout Interrompt le délai et l'exécution du code associé à ce
délai. Elle interrompt le décompte de setTimeout
Exemple
var d = new Date('Fri Feb 16 2018 16:01:03 GMT+0100 ');
alert(d.getMonth()); // Affiche : 1
alert(d.getDay()); // Affiche : 5
d.setDate(15);
alert(d) // Affiche : Thu Feb 15 2018 16:01:03 GMT+0100
Application (1)
Ecrire un script java qui permet d’extraire le nombre de
secondes de la date du système chaque 3 secondes
17
<!DOCTYPE html>
<html>
<head><title>Test</title>
<script>
function lancerTimer() {
t = setInterval("affSec()", 3000);
}
function affSec()
{
dt=new Date();
document.write(dt.getSeconds());}
</script>
</head>
<body onLoad="lancerTimer();">
</script> </body> </html>
Application (2)
<button id="myButton">Annuler le compte à rebours</button>
<script>
var button = document.getElementById('myButton');
var timerID = setTimeout(function() {
// la fonction sera exécutée au bout de 3 secondes
alert("Vous n'êtes pas très réactif vous !");}, 3000);
button.onclick = function() {
clearTimeout(timerID); // Le traitement est annulé
alert("Le compte à rebours a bien été annulé.");
} </script>
18
Application (3)
Exemple d'une animation simple
Exemple d'une animation simple (suite)
Exemple d'une animation simple (suite)
L'objet Math
Toutes les fonctions mathématiques sont regroupées dans
l'objet Math
 abs( ), exp( ), log(), sin( ), cos( ), tan( ), asin( ), acos( ), atan( ), max( ),
min( ), sqrt( ),PI sont les opérations mathématiques habituelles;
 ceil( ) : retourne le plus petit entier supérieur à un nombre;
 floor( ) : retourne le plus grand entier inférieur à un nombre;
 pow( ) : retourne le résultat d'un nombre mis à une certaine puissance;
 random( ) : retourne un nombre aléatoire entre 0 et 1;
 round( ) : arrondi un nombre à l'entier le plus proche.
Exemples
var x = Math.PI; // retourne PI
var y = Math.sqrt(16); // retourne la racine carrée de 16
var x = Math.floor((Math.random() * 10) + 1);
// retourne un nombre aléatoire entre 1 et 10.
Math.round(2.49); // retourne 2
Math.ceil(1.4); //retourne 2
24
 L'objet navigator est un objet qui permet de récupérer des
informations sur le navigateur dont le visiteur utilise.
 Navigator possède une méthode intéressante : la méthode
javaEnabled(), qui détermine si Java a été activé sur le navigateur
ou pas.
<script>
var x = "Java Enabled: " + navigator.javaEnabled();
document.write(x); // affiche Java Enabled: false si Java est activé
</script>
L'objet navigator
Propriétés de l’objet navigator
 language : retourne la langue définie dans le navigateur ;
 geolocation : retourne un objet « geolocation » qui peut être utilisé pour
définir la localisation de l’utilisateur ;
 product : retourne le nom du moteur utilisé par le navigateur ;
 cookieEnabled : détermine si les cookies sont autorisés ou non ;
 appName : retourne le nom du navigateur ;
 appCodeName : retourne le nom de code du navigateur ;
 appVersion : retourne la version du navigateur utilisée ;
 online : détermine si le navigateur est en ligne ou pas ;
 platform : détermine pour quelle plateforme le navigateur est compilé ;
 userAgent : retourne l’en-tête du fichier user-agent envoyé par le
navigateur au serveur ; La valeur retournée, contient des informations
relatives au nom, à la version et à la plateforme du navigateur.
Exemple 1
message=
" Nom : " + navigator.appName + " Code : " + navigator.appCodeName;
alert(message);
26
Exemple 2
<script>
// userAgent en minuscule
var userAgent=navigator.userAgent.toLowerCase();
alert(userAgent);
if (userAgent.indexOf("microsoft internet explorer 8.0") > -1)
alert("Votre navigateur est Microsoft Internet Explorer 8.0");
if(userAgent.indexOf("mozilla") > -1)
alert("Votre navigateur est mozilla");
</script>
27
L’objet Window
 L’objet Window représente la fenêtre du navigateur.
 Toutes les fonctions, variables et objets globaux appartiennent
automatiquement à l’objet Window.
 Cependant, l’objet Window est dit implicite. Cela signifie que
nous n’aurons généralement pas besoin de le mentionner pour
utiliser les méthodes (ou fonctions globales) et propriétés (ou
variables globales) lui appartenant.
 Par exemple, la fonction alert() est une méthode de l’objet
Window. Cependant, on ne précise jamais Window lorsqu’on
utilise alert().
Méthodes de l’objet window
 close() : ferme la fenêtre courante.
 alert() : affiche une fenêtre dans le browser.
 confirm() : renvoie 2 valeurs possibles soit true si le bouton "ok"
est activé ou false si le bouton "annuler" est activé.
 prompt() : boîte de dialogue pour la saisie de donnée.
 print() : méthode sert à imprimer le contenu de la page.
 back() : cette méthode produit la même action que si on clique sur
le bouton précédent du navigateur internet.
 forward() : cette méthode produit la même action que si on clique
sur le bouton suivant du navigateur internet.
 open() : ouvre une nouvelle fenêtre Syntaxe(url, nom,
caractéristiques)
30
Exemple 1
nom = prompt("Quel est votre prénom ?", "Saisisser votre prénom")
confNom=confirm("vous validez votre Nom "+nom)
if(confNom)
alert("Vous êtes bien "+nom)
31
Ex : open("", "popup", "width=500, height=500, location=yes")
Argument Rôle Valeurs possible
height, Hauteur de la fenêtre à ouvrir entier
width Largeur de la fenêtre à ouvrir entier
menubar Affichage barre de menu yes, no
toolbar Affichage barre d’outils yes, no
location Affichage barre d’adresse yes, no
resizable Permission de redimensionner la fenêtre yes, no
Les propriétés de l’objet
window
32
open("", "popup", "width=200, height=150, location=yes")
Exemple 3
33
Ecrire un script qui, à travers la méthode prompt saisi un
message qui sera affiché dans une nouvelle fenêtre ayant les
caractéristiques suivantes :
largeur=300, hauteur=300, avec affichage des barres d’adresse,
et de menu. En donnant la possibilité de la redimensionner.
Application
<html>
<head>
<script>
function EcrireFenetre(message) {
fen =open("","Nouvelle_fenetre","width=300, height=300, location=yes, menubar=yes,
resizable=yes");
if (message !="")
fen.document.write(message,"</BR>");
else
alert ("message vide !");
}
mes=prompt("Quel est le message ?"," ");
</script> </head>
<body onLoad="EcrireFenetre(mes);"></body>
</html>
35
L'objet document
 Représente le contenu de la page HTML
 Il existe plusieurs propriétés et méthodes qui permettent de manipuler les éléments
d’un document
Méthode Rôle
write() Ecrire dans la fenêtre du document
open() Ouvrir le document
close() Fermer
getElementById() Accès à l'élément HTML par l'attribut Id (l’identificateur)
d’une balise
getElementsByName() Accès à l'élément HTML par l'attribut name attribué à une
balise
getElementsByTagNa
me ('tag')
Permet de récupérer les éléments par rapport à leur nom de
balise. Elle renvoie tous les éléments dont la balise est tag,
en tant qu'un tableau.
getSelection() Recherche du texte sélectionné par l'utilisateur dans le
document.
getAttribute() Permet de récupérer la valeur de l'attribut passé en
paramètre.
setAttribute() Change dynamiquement la valeur d'un attribut d'une balise.
36
<!DOCTYPE html>
<html>
<head><title>Test</title>
</head><body>
<script>
function change() {
document.open();
document.write("Nous sommes dans le deuxième
document");
}
document.open();
document.write("<a href="javascript:change()">Passer
au deuxième document</a>");
document.close(); // peut être implicite
</script>
</body></html>
Etat initial
Etat final
Exemple 1
Exemple 2
<!DOCTYPE html>
<head><title>Test</title></head>
<body>
<div id="myDiv"><p>Un peu de texte <a>et un lien</a></p></div>
<script>
var div = document.getElementById('myDiv');
alert(div);
</script></body></html>
37
On parcourt le tableau avec une boucle pour récupérer les
éléments.
<script>
var divs = document.getElementsByTagName('div');
for (var i = 0, c = divs.length ; i < c ; i++) {
alert('Element n° ' + (i + 1) + ' : ' + divs[i]);
}
</script>
38
Exemple 3
<!DOCTYPE html>
<html> <head><title>Test</title></head>
<body>
<a id="myLink" href="http://www.un_lien_quelconque.com">Un lien modifié
dynamiquement</a>
<script>
var link = document.getElementById('myLink');
var href = link.getAttribute('href'); // On récupère l'attribut « href »
alert(href);
link.setAttribute('href', 'http://isetsf.rnu.tn');
// on édite modifie la valeur de href
</script></body></html>
39
Exemple 4
40
Propriétés de l'objet document
• title : renvoie le titre de la page courante.
• images[ ] : tableau de toutes les balises <img>.
• forms[ ] : tableau de toutes les balises <form>.
• links[ ] : tableau de toutes les balises <a>.
• linkColor : couleur des liens qui ne sont pas encore visités.
• alinkColor : couleur des liens activés.
• vlinkColor : couleur des liens visités.
41
Exemple 5
<!DOCTYPE html>
<html>
<head><title>Test</title>
</head><body>
<script type="text/javascript">
function change() {
document.open();
document.write("Nous sommes dans le deuxième document");
document.title='doc2';
}
document.open();
document.linkColor="red";
document.alinkColor="yellow";
document.vlinkColor="green";
document.write("<a href="javascript:change()">Passer au deuxième document</a>");
document.close();
</script>
</body></html>
La propriété innerHTML
 La propriété innerHTML permet de récupérer le code
HTML enfant d'un élément sous forme de texte. Ainsi, si des
balises sont présentes, innerHTML les retournera sous forme
de texte.
<div id="myDiv">
<p>Un peu de texte <a>et un lien</a></p>
</div>
<script>
var div = document.getElementById('myDiv');
alert(div.innerHTML);
</script>
43
Exemple 6
 Définir un nouveau contenu :
document.getElementById('myDiv').innerHTML =
'<blockquote>Je mets une citation à la place du
paragraphe</blockquote>';
 Ajouter un contenu à celui qui est en place :
document.getElementById('myDiv').innerHTML +=
'et <strong>une portion mise en emphase</strong>.';
44
Exemple 7

Contenu connexe

PDF
chapitre-2-les-structures-de-donnees-en-c.pdf
PDF
Python avancé : Tuple et objet
PPT
BBBBQSDQSSDF FDFGDQDEDSDSqsdqsdEED FVFFZV.ppt
PDF
Memo java
PDF
ch7_les chaines de caractères.pdf
PDF
Javascript mémo.pdf
PDF
Memojava 100604104941-phpapp02
PPTX
640952377-Formation-AvanceeAvancee-Excel.pptx
chapitre-2-les-structures-de-donnees-en-c.pdf
Python avancé : Tuple et objet
BBBBQSDQSSDF FDFGDQDEDSDSqsdqsdEED FVFFZV.ppt
Memo java
ch7_les chaines de caractères.pdf
Javascript mémo.pdf
Memojava 100604104941-phpapp02
640952377-Formation-AvanceeAvancee-Excel.pptx

Similaire à Ch2. Objets de base du JS.ppt semestre 1 (20)

PDF
Un même algorithme peut être écrit python
DOC
Corrigés exercices langage C
PDF
01 - Introduction à Python chaines de caractères.pdf
PDF
Cours de C++, en français, 2002 - Cours 2.3
DOC
Corrigé langage c
PDF
Support tutoriel : Créer votre jeu en HTML5
PDF
C# dates and times date formats
PPTX
PL LSQL.pptx
PDF
Chap 2--POO avec JAVA.pdf
PDF
50 nouvelles choses que l'on peut faire avec Java 8
PDF
Fork / Join, Parallel Arrays, Lambdas : la programmation parallèle (trop ?) f...
PDF
TP3 Atelier C++/ GL2 INSAT / Tunisie
PPTX
Introduction au Jquery
PDF
Corrige tp java
PDF
Chapitre 2: String en Java
PPT
Chapitre4 cours de java
PPT
Eléments de base du langage JavaScript (1).ppt
PPT
Lect14 dev2
PDF
Chapitre 3 elements de base de java
PPTX
Change mind about JS
Un même algorithme peut être écrit python
Corrigés exercices langage C
01 - Introduction à Python chaines de caractères.pdf
Cours de C++, en français, 2002 - Cours 2.3
Corrigé langage c
Support tutoriel : Créer votre jeu en HTML5
C# dates and times date formats
PL LSQL.pptx
Chap 2--POO avec JAVA.pdf
50 nouvelles choses que l'on peut faire avec Java 8
Fork / Join, Parallel Arrays, Lambdas : la programmation parallèle (trop ?) f...
TP3 Atelier C++/ GL2 INSAT / Tunisie
Introduction au Jquery
Corrige tp java
Chapitre 2: String en Java
Chapitre4 cours de java
Eléments de base du langage JavaScript (1).ppt
Lect14 dev2
Chapitre 3 elements de base de java
Change mind about JS
Publicité

Dernier (20)

PDF
585-developpement-d-une-application-avec-python-fr-en-business.pdf
PDF
rédigés - Spécialité: 📊 Mathématique - Extrait
PDF
Avis Digital Marketing Elite: Mon Retour d'Expérience Après 3 Mois d'Utilisation
PPTX
Copie de Présentation Personal Branding J2025.pptx_20250610_120558_0000.pptx
PDF
Consignes générales sécurité et environnement.pdf
PDF
🎓 Le Secret des Profs Captivants - 💡 2. Hygiène vocale et santé professionnel...
PPTX
le subjonctif présent, Conjugaison français
PPT
Les moyens de transport-2023.ppt french language teaching ppt
PPTX
Leçon inaugurale2.ministere. enseignant.
PPTX
Informatique pour débutants niveau 1.pptx
PPT
le-subjonctif-présent, Grammaire, français
PPT
étude----- droit------ 2005---------.ppt
PPTX
Présentation Personal Branding J2025.pptx_20250218_132749_0000.pptx_20250610_...
PPTX
Bienvenido slides about the first steps in spanish.pptx
PPTX
Conception de documents et d'interfaces numériques.pptx
PDF
Bac 2026 - Livre - 🎤 Le Grand Oral - ✍️Exemples rédigés - Spécialité: 💻 NSI -...
PPTX
Le rendez-vous de l'été.pptx Film français
DOC
Le verbe avoir- Free francais lesson-free
PPTX
plus que ´parfait--.-.-.-..-.--.-..-.-.-.-.
PDF
Bac 2026 - Livre - 🎤 Le Grand Oral - ✍️ Exemples rédigés - 📈 SES - Extrait
585-developpement-d-une-application-avec-python-fr-en-business.pdf
rédigés - Spécialité: 📊 Mathématique - Extrait
Avis Digital Marketing Elite: Mon Retour d'Expérience Après 3 Mois d'Utilisation
Copie de Présentation Personal Branding J2025.pptx_20250610_120558_0000.pptx
Consignes générales sécurité et environnement.pdf
🎓 Le Secret des Profs Captivants - 💡 2. Hygiène vocale et santé professionnel...
le subjonctif présent, Conjugaison français
Les moyens de transport-2023.ppt french language teaching ppt
Leçon inaugurale2.ministere. enseignant.
Informatique pour débutants niveau 1.pptx
le-subjonctif-présent, Grammaire, français
étude----- droit------ 2005---------.ppt
Présentation Personal Branding J2025.pptx_20250218_132749_0000.pptx_20250610_...
Bienvenido slides about the first steps in spanish.pptx
Conception de documents et d'interfaces numériques.pptx
Bac 2026 - Livre - 🎤 Le Grand Oral - ✍️Exemples rédigés - Spécialité: 💻 NSI -...
Le rendez-vous de l'été.pptx Film français
Le verbe avoir- Free francais lesson-free
plus que ´parfait--.-.-.-..-.--.-..-.-.-.-.
Bac 2026 - Livre - 🎤 Le Grand Oral - ✍️ Exemples rédigés - 📈 SES - Extrait
Publicité

Ch2. Objets de base du JS.ppt semestre 1

  • 1. Chapitre 2: Les objets de base du JS 1
  • 2. L’objet tableau  Le tableau est défini à travers les mots clés new et Array : var MonTableau1 = new Array(); //tableau vide var MonTableau2 = new Array(1,"Salut",3.14,true); //tableau hétérogène  Le tableau peut aussi être déclaré sans new et Array : var MonTableau3=résultat_de_type_tableau ; ex : var MonTableau3 = ['valeur1', 'valeur2', …, 'valeurX'];  Tout indice de tableau débute en 0.  La taille d'un tableau n'est pas figée par sa définition ou son initialisation. Elle est dynamique.  A chaque instant, la taille d'un tableau peut être connue en invoquant la propriété length de l'objet correspondant à ce tableau. ex : MonTableau2.length retourne 4 2
  • 3. Méthodes de l’objet tableau(1)  push() : ajoute des éléments à la fin d’un tableau <script> var MonTableau = ['Salah', 'Ali']; MonTableau.push('Ahmed'); // Ajoute « Ahmed » à la fin du tableau MonTableau.push('Fatma', 'Mariem'); // Ajoute «Fatma» et «Mariem» à la fin </script>  unshift() fonctionne comme push(), excepté que les éléments sont ajoutés au début du tableau.  shift() et pop() retirent respectivement le premier et le dernier élément du tableau. 3 <script> var MonTableau = ['Salah', ‘Ali ', 'Ahmed', 'Fatma', 'Mariem']; MonTableau.shift(); // Retire «Salah» MonTableau.pop(); // Retire «Mariem » alert(MonTableau); // Affiche « Ali Ahmed Fatma » </script>
  • 4. <script> var cousinsString_2 = cousinsArray.join('-'); alert(cousinsString_2); </script> <script> var cousinsString = 'Ali Mariem Fatma', cousinsArray = cousinsString.split(' '); alert(cousinsString); alert(cousinsArray); alert(cousinsArray[1]); </script>  split() : découpe une chaîne de caractères en tableau 4 Méthodes de l’objet tableau(2)  join() : convertit un tableau en chaîne de caractères composée de tous les éléments du tableau séparés par la chaîne
  • 5. Parcourir un tableau  On peut parcourir un tableau avec for : <script> var MonTableau = ['Rafael', 'Mathilde', 'Ahmed', 'Jérôme', 'Guillaume']; // length est de 5 for (var i = 0, c = MonTableau.length; i < c; i++) { alert(MonTableau[i]); /* On affiche chaque élément, l'un après l'autre, jusqu'à la longueur totale du tableau*/ } </script> 5
  • 6. Application Demandez les prénoms aux utilisateurs et stockez-les dans un tableau. Pensez à la méthode push(). À la fin, il faudra afficher le contenu du tableau, avec alert(), seulement si le tableau contient des prénoms. Pour l'affichage, séparez chaque prénom par un espace. 6 <script> var prenoms = [], prenom; while (prenom = prompt('Entrez un prénom :')) { prenoms.push(prenom); // Ajoute le nouveau prénom ainsi qu'un espace } if (prenoms.length > 0) { alert(prenoms.join(' ')); } else { alert('Il n'y a aucun prénom en mémoire'); } </script>
  • 7. L’objet String  Les chaînes de caractères sont représentées par l'objet String.  Pour créer une chaîne de caractères, on utilise généralement ces syntaxes : var maChaine = "Chaîne de caractères"; var maChaine = new String("Chaîne");  length retourne le nombre de caractères contenus dans une chaîne. Les espaces, les signes de ponctuation, les chiffre, etc. sont considérés comme des caractères. <script> var ch= 'Ceci est une chaîne de caractères'; // On crée un objet String alert(ch.length); // On affiche le nombre de caractères </script>
  • 8. Méthodes de l’objet String (1)  toUpperCase() convertit la chaîne en majuscule <script> var ch = 'Ceci est une chaîne de caractères'; // On crée un objet String alert(ch.toUpperCase()); // On récupère la chaîne en majuscules </script>  toLowerCase() convertit la chaîne en minuscule  trim() supprime les espaces d'une chaîne de caractères  indexOf() retourne la position de la première sous-chaîne trouvée, et s'il n'y en a pas la valeur -1 est retournée. <script> var ch= 'Le JavaScript est plutôt facile'; var result = ch.indexOf('JavaScript'); if (result > -1) { alert('La chaîne contient le mot "JavaScript" qui débute à la position ' + result); } </script> 8
  • 9. Méthodes de l’objet String (2)  On extrait une chaîne avec substring(), substr() et slice()  substring(a, b) permet d'extraire une chaîne à partir de la position a (incluse) jusqu'à la position b (exclue).  substr(a, n) accepte deux paramètres : le premier est la position de début, et le deuxième le nombre de caractères à extraire.  slice() extrait la chaîne jusqu'à la fin, en décomptant le nombre de caractères indiqué. <script> var sch = 'JavaScript'.slice(0, 6); //retourne JavaSc var sch = 'JavaScript'.slice(0, -6); //retourne Java </script>  charAt() extrait le nième caractère.  replace() remplace la première occurrence d’une sous-chaîne par une autre <script> var str = "Etudier HTML"; var res = str.replace("HTML", "Javascript"); alert(res) ; // donne Etudier Javascript </script> 9
  • 10.  split() permet de couper une chaîne de caractères à chaque fois qu'une sous-chaîne est rencontrée. Les « morceaux » résultant de la coupe de la chaîne sont placés dans un tableau. <script> var Ch = 'Mohamed,Ali,Hédia'; var Tspl= Ch.split(','); // On coupe à chaque fois qu'une virgule est rencontrée , Tspl est un tableau. alert(Tspl.length); // 3 </script> Méthodes de l’objet String (3)
  • 11. Exemples (1) var datenais = "15/08/1985"; var journais = datenais.substring(0,2) /* donne le même résultat avec datenais.substr(0,2) ou datenais.slice(0,2)*/ alert("Le jour de naissance est : "+journais ) var moisnais = datenais.substring(3,5); /* donne le même résultat avec datenais.substr(3,2) ou datenais.slice(3,2); alert("Le mois de naissance est : " +moisnais ) var anneenais = datenais.slice(6,10); alert("L’année de naissance est :" + anneenais ); /* donne le même résultat avec datenais.slice(-4),ce qui signifie extraction des 4 derniers caractères 11
  • 12. Exemples (2) var chaine="azerty"; document.write(chaine.indexOf("z") ) // donne 1 document.write (chaine.indexOf("z",2) )// donne -1 var Ch="Salut Salut" ; document.write( Ch.indexOf("S")) ; // donne 0 document.write( Ch.lastIndexof("S")) // donne 6 document.write( Ch.charAt(4)) ; // donne t document.write(Ch.replace("Salut","Bonjour" )) 12
  • 13. L’objet Date  Permet de manipuler la date et l’heure  La date est stockée dans une variable sous la forme d'une chaîne  Contient le jour, le mois, l'année, l'heure, les minutes, et les secondes  Les méthodes de l'objet Date permettent d’accéder et de manipuler les éléments de la date  Créer un objet date : ObjDate = new Date([paramètres])  ObjDate = new Date() //donne la date et l’heure courante  Objet_date = new Date() ("December 25, 2017 13:30:00") //une chaîne de caractères sous la forme "month day, year hour:min:sec"  Objet_date = new Date(2017, 11, 25 , 13, 30 , 00) //des entiers sous la forme année, mois-1,jour,h,mn,s 13
  • 14. Méthodes de l’objet date (1) 14 Méthode Description getDate() rechercher le jour du mois entre 1 et 31 getDay() rechercher le jour de la semaine entre 0 et 6 commençant par dimanche=0 getFullYear() rechercher l'année complète getHours() rechercher la partie heures entre 0 et 23 getMinutes() rechercher la partie minutes entre 0 et 59 getMonth() rechercher le mois entre 0 et 11 getSeconds() rechercher la partie secondes entre 0 et 59 getTime() rechercher le nbre de millisecondes depuis 01/01/1970 getYear() rechercher le nombre d’année depuis 1900
  • 15. 15 Méthodes de l’objet date (2) Méthode Description setDate(X) Permet de fixer la valeur du jour du mois setDay(X) Permet de fixer la valeur du jour de la semaine setHours(X) Permet de fixer la valeur de l'heure setMinutes(X) Permet de fixer la valeur des minutes setMonth(X) Permet de fixer le numéro du mois setTime(X) définit une date et une heure en ajoutant ou en soustrayant un nombre spécifié de millisecondes à / à partir de minuit le 1er janvier 1970. setInterval(traitement, délai) Lance un traitement répété à intervalle régulier de délai millisecondes. Ce traitement peut être arrêté avec clearInterval() ou clearTimeout() setTimeout(traitement, délai) Définit une action à exécuter et un délai avant son exécution ClearTimeout Interrompt le délai et l'exécution du code associé à ce délai. Elle interrompt le décompte de setTimeout
  • 16. Exemple var d = new Date('Fri Feb 16 2018 16:01:03 GMT+0100 '); alert(d.getMonth()); // Affiche : 1 alert(d.getDay()); // Affiche : 5 d.setDate(15); alert(d) // Affiche : Thu Feb 15 2018 16:01:03 GMT+0100
  • 17. Application (1) Ecrire un script java qui permet d’extraire le nombre de secondes de la date du système chaque 3 secondes 17 <!DOCTYPE html> <html> <head><title>Test</title> <script> function lancerTimer() { t = setInterval("affSec()", 3000); } function affSec() { dt=new Date(); document.write(dt.getSeconds());} </script> </head> <body onLoad="lancerTimer();"> </script> </body> </html>
  • 18. Application (2) <button id="myButton">Annuler le compte à rebours</button> <script> var button = document.getElementById('myButton'); var timerID = setTimeout(function() { // la fonction sera exécutée au bout de 3 secondes alert("Vous n'êtes pas très réactif vous !");}, 3000); button.onclick = function() { clearTimeout(timerID); // Le traitement est annulé alert("Le compte à rebours a bien été annulé."); } </script> 18
  • 19. Application (3) Exemple d'une animation simple
  • 20. Exemple d'une animation simple (suite)
  • 21. Exemple d'une animation simple (suite)
  • 22. L'objet Math Toutes les fonctions mathématiques sont regroupées dans l'objet Math  abs( ), exp( ), log(), sin( ), cos( ), tan( ), asin( ), acos( ), atan( ), max( ), min( ), sqrt( ),PI sont les opérations mathématiques habituelles;  ceil( ) : retourne le plus petit entier supérieur à un nombre;  floor( ) : retourne le plus grand entier inférieur à un nombre;  pow( ) : retourne le résultat d'un nombre mis à une certaine puissance;  random( ) : retourne un nombre aléatoire entre 0 et 1;  round( ) : arrondi un nombre à l'entier le plus proche.
  • 23. Exemples var x = Math.PI; // retourne PI var y = Math.sqrt(16); // retourne la racine carrée de 16 var x = Math.floor((Math.random() * 10) + 1); // retourne un nombre aléatoire entre 1 et 10. Math.round(2.49); // retourne 2 Math.ceil(1.4); //retourne 2
  • 24. 24  L'objet navigator est un objet qui permet de récupérer des informations sur le navigateur dont le visiteur utilise.  Navigator possède une méthode intéressante : la méthode javaEnabled(), qui détermine si Java a été activé sur le navigateur ou pas. <script> var x = "Java Enabled: " + navigator.javaEnabled(); document.write(x); // affiche Java Enabled: false si Java est activé </script> L'objet navigator
  • 25. Propriétés de l’objet navigator  language : retourne la langue définie dans le navigateur ;  geolocation : retourne un objet « geolocation » qui peut être utilisé pour définir la localisation de l’utilisateur ;  product : retourne le nom du moteur utilisé par le navigateur ;  cookieEnabled : détermine si les cookies sont autorisés ou non ;  appName : retourne le nom du navigateur ;  appCodeName : retourne le nom de code du navigateur ;  appVersion : retourne la version du navigateur utilisée ;  online : détermine si le navigateur est en ligne ou pas ;  platform : détermine pour quelle plateforme le navigateur est compilé ;  userAgent : retourne l’en-tête du fichier user-agent envoyé par le navigateur au serveur ; La valeur retournée, contient des informations relatives au nom, à la version et à la plateforme du navigateur.
  • 26. Exemple 1 message= " Nom : " + navigator.appName + " Code : " + navigator.appCodeName; alert(message); 26
  • 27. Exemple 2 <script> // userAgent en minuscule var userAgent=navigator.userAgent.toLowerCase(); alert(userAgent); if (userAgent.indexOf("microsoft internet explorer 8.0") > -1) alert("Votre navigateur est Microsoft Internet Explorer 8.0"); if(userAgent.indexOf("mozilla") > -1) alert("Votre navigateur est mozilla"); </script> 27
  • 28. L’objet Window  L’objet Window représente la fenêtre du navigateur.  Toutes les fonctions, variables et objets globaux appartiennent automatiquement à l’objet Window.  Cependant, l’objet Window est dit implicite. Cela signifie que nous n’aurons généralement pas besoin de le mentionner pour utiliser les méthodes (ou fonctions globales) et propriétés (ou variables globales) lui appartenant.  Par exemple, la fonction alert() est une méthode de l’objet Window. Cependant, on ne précise jamais Window lorsqu’on utilise alert().
  • 29. Méthodes de l’objet window  close() : ferme la fenêtre courante.  alert() : affiche une fenêtre dans le browser.  confirm() : renvoie 2 valeurs possibles soit true si le bouton "ok" est activé ou false si le bouton "annuler" est activé.  prompt() : boîte de dialogue pour la saisie de donnée.  print() : méthode sert à imprimer le contenu de la page.  back() : cette méthode produit la même action que si on clique sur le bouton précédent du navigateur internet.  forward() : cette méthode produit la même action que si on clique sur le bouton suivant du navigateur internet.  open() : ouvre une nouvelle fenêtre Syntaxe(url, nom, caractéristiques)
  • 30. 30 Exemple 1 nom = prompt("Quel est votre prénom ?", "Saisisser votre prénom") confNom=confirm("vous validez votre Nom "+nom) if(confNom) alert("Vous êtes bien "+nom)
  • 31. 31 Ex : open("", "popup", "width=500, height=500, location=yes") Argument Rôle Valeurs possible height, Hauteur de la fenêtre à ouvrir entier width Largeur de la fenêtre à ouvrir entier menubar Affichage barre de menu yes, no toolbar Affichage barre d’outils yes, no location Affichage barre d’adresse yes, no resizable Permission de redimensionner la fenêtre yes, no Les propriétés de l’objet window
  • 32. 32 open("", "popup", "width=200, height=150, location=yes") Exemple 3
  • 33. 33 Ecrire un script qui, à travers la méthode prompt saisi un message qui sera affiché dans une nouvelle fenêtre ayant les caractéristiques suivantes : largeur=300, hauteur=300, avec affichage des barres d’adresse, et de menu. En donnant la possibilité de la redimensionner. Application
  • 34. <html> <head> <script> function EcrireFenetre(message) { fen =open("","Nouvelle_fenetre","width=300, height=300, location=yes, menubar=yes, resizable=yes"); if (message !="") fen.document.write(message,"</BR>"); else alert ("message vide !"); } mes=prompt("Quel est le message ?"," "); </script> </head> <body onLoad="EcrireFenetre(mes);"></body> </html>
  • 35. 35 L'objet document  Représente le contenu de la page HTML  Il existe plusieurs propriétés et méthodes qui permettent de manipuler les éléments d’un document Méthode Rôle write() Ecrire dans la fenêtre du document open() Ouvrir le document close() Fermer getElementById() Accès à l'élément HTML par l'attribut Id (l’identificateur) d’une balise getElementsByName() Accès à l'élément HTML par l'attribut name attribué à une balise getElementsByTagNa me ('tag') Permet de récupérer les éléments par rapport à leur nom de balise. Elle renvoie tous les éléments dont la balise est tag, en tant qu'un tableau. getSelection() Recherche du texte sélectionné par l'utilisateur dans le document. getAttribute() Permet de récupérer la valeur de l'attribut passé en paramètre. setAttribute() Change dynamiquement la valeur d'un attribut d'une balise.
  • 36. 36 <!DOCTYPE html> <html> <head><title>Test</title> </head><body> <script> function change() { document.open(); document.write("Nous sommes dans le deuxième document"); } document.open(); document.write("<a href="javascript:change()">Passer au deuxième document</a>"); document.close(); // peut être implicite </script> </body></html> Etat initial Etat final Exemple 1
  • 37. Exemple 2 <!DOCTYPE html> <head><title>Test</title></head> <body> <div id="myDiv"><p>Un peu de texte <a>et un lien</a></p></div> <script> var div = document.getElementById('myDiv'); alert(div); </script></body></html> 37
  • 38. On parcourt le tableau avec une boucle pour récupérer les éléments. <script> var divs = document.getElementsByTagName('div'); for (var i = 0, c = divs.length ; i < c ; i++) { alert('Element n° ' + (i + 1) + ' : ' + divs[i]); } </script> 38 Exemple 3
  • 39. <!DOCTYPE html> <html> <head><title>Test</title></head> <body> <a id="myLink" href="http://www.un_lien_quelconque.com">Un lien modifié dynamiquement</a> <script> var link = document.getElementById('myLink'); var href = link.getAttribute('href'); // On récupère l'attribut « href » alert(href); link.setAttribute('href', 'http://isetsf.rnu.tn'); // on édite modifie la valeur de href </script></body></html> 39 Exemple 4
  • 40. 40 Propriétés de l'objet document • title : renvoie le titre de la page courante. • images[ ] : tableau de toutes les balises <img>. • forms[ ] : tableau de toutes les balises <form>. • links[ ] : tableau de toutes les balises <a>. • linkColor : couleur des liens qui ne sont pas encore visités. • alinkColor : couleur des liens activés. • vlinkColor : couleur des liens visités.
  • 41. 41 Exemple 5 <!DOCTYPE html> <html> <head><title>Test</title> </head><body> <script type="text/javascript"> function change() { document.open(); document.write("Nous sommes dans le deuxième document"); document.title='doc2'; } document.open(); document.linkColor="red"; document.alinkColor="yellow"; document.vlinkColor="green"; document.write("<a href="javascript:change()">Passer au deuxième document</a>"); document.close(); </script> </body></html>
  • 42. La propriété innerHTML  La propriété innerHTML permet de récupérer le code HTML enfant d'un élément sous forme de texte. Ainsi, si des balises sont présentes, innerHTML les retournera sous forme de texte.
  • 43. <div id="myDiv"> <p>Un peu de texte <a>et un lien</a></p> </div> <script> var div = document.getElementById('myDiv'); alert(div.innerHTML); </script> 43 Exemple 6
  • 44.  Définir un nouveau contenu : document.getElementById('myDiv').innerHTML = '<blockquote>Je mets une citation à la place du paragraphe</blockquote>';  Ajouter un contenu à celui qui est en place : document.getElementById('myDiv').innerHTML += 'et <strong>une portion mise en emphase</strong>.'; 44 Exemple 7

Notes de l'éditeur

  • #2: il est possible de spécifier la longueur du tableau. Cela paraît assez intéressant sur le principe, mais en réalité cela ne sert quasiment à rien vu que le JavaScript redéfinit la taille des tableaux quand on ajoute ou supprime un item du tableau. var myArray = new Array(longueur_du_tableau);
  • #17: <!DOCTYPE html> <html> <head><title>Test</title> <script> function lancerTimer() { timer = setInterval("affSec()", 3000); } function affSec() { dt=new Date(); document.write(dt.getSeconds());} </script> </head> <body onLoad="lancerTimer();"> </script> </body> </html>
  • #19: Conseil : Ajoutez vos commentaires ici.
  • #20: Conseil : Ajoutez vos commentaires ici.
  • #21: Conseil : Ajoutez vos commentaires ici.
  • #33: <script language="JavaScript"> function EcrireFenetre3(message) { fen3 =open("","Nouvelle_fenetre","width=300, height=300, location=yes, menubar=yes, resizable=yes"); if (message !="") fen3.document.write(message+"</BR>"); else alert ("message vide !"); } mes=prompt("Quel est le message ?",""); EcrireFenetre3(mes); </script>