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
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
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
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);