Les objets natifs en JavaScript

Digression CSS3 : vous pouvez remarquer que dans ce tutoriel les titres sont numérotés automatiquement !
Pour davantage d'explications sur la numérotation automatique des titres via le CSS voir le "tutoriel CSS3" dans ce site !

JavaScript est un langage orienté objet. C'est à dire que ce langage dispose d'objets.

Un objet est une entité qui possède des propriétés et peut être manipulée avec des méthodes. Une méthode est une fonction associée à un objet.
La POO (Programmation Orientée Objet) est une manière d'écrire des programmes en utilisant des objets avec leurs propriétés et leurs méthodes !

JavaScript est riche en objets prédéfinis (ou natifs).
Il est possible en JS pour le développeur de créer ses propres objets. Mais dans cette page nous ne traiterons que des objets natifs.. La création et manipulation d'objets personnels sera vue dans le chapitre suivant.

L'objet Date

Objet Date : exemple 1

Le script de cette page

var aujourdhui = new Date(); document.write("date d'aujourdhui : " + aujourdhui); var madatenaissance = new Date(1954,2,18) ; document.write ("<br>"); //saut de ligne document.write ("ma date de naissance : " + madatenaissance); document.write("<br>") ; //saut de ligne document.write ("timestamp de aujourdhui : " + aujourdhui.getTime()); document.write("<br>"); // saut de ligne document.write("timestamp de ma date de naissance : " + madatenaissance.getTime()); // retourne un entier négatif car origine est le 1/1/1970 var monagecejour = aujourdhui - madatenaissance ; // différence entre deux timestamp document.write("<br>"); // saut de ligne document.write(" mon âge : " + monagecejour + " en millisecondes"); monagecejour = monagecejour /(365*24*60*60*1000) ; document.write("<br>") ; // saut de ligne document.write("mon âge : " + parseInt(monagecejour) + " ans");
Testez ce script !

Commentaire du script

var aujourdhui = new Date() : On utilise le "constructeur" Date avec le mot réservé new pour créer une nouvelle "instance" de la "classe" Date.

Tous ces termes barbares (constructeur, classe, instance de classe) sont expliqués dans le chapitre suivant !

Ici on n'a pas passé de paramètre au "constructeur" Date donc la variable aujourdhui récupère par défaut la date et l'heure courante c'est à dire le nombre de millisecondes qui se sont écoulées depuis le 1er janvier 1970 et l'instant présent. Ce nombre s'appelle un timestamp.

document.write("date d'aujourdhui : " + aujourdhui) : heureusement cette instruction n'affiche pas le timestamp (un nombre supérieur à 1 billion) et qui ne signifie rien pour le visiteur mais affiche la date et l'heure correspondante selon un format très compréhensible ... pour les anglo-saxons.
Exemple : sun Oct 19 2014 19:22:09 GMT2 (Paris (heure été))
Traduisez : dimanche 19 octobre 2014 à 19h 22mn et 9 secondes ; heure internationale + 2 car heure d'été

var madatenaissance = new Date(1954,2,18) : la variable madatenaissance va contenir le timestamp correspondant au 18 mars 1954 zéro heure. J'ai bien dit 18 mars et non pas 18 février.
En effet le deuxième paramètre (rang du mois) doit être un entier compris entre 0 et 11.
L'indice 0 correspond à janvier et 11 à décembre. Donc 2 correspond à mars !

document.write('timestamp de aujourdhui' + aujourdhui.getTime()) : emploi de la méthode getTime() pour afficher le timestamp de la date (ici 1,4 billion)

document.write('timestamp de ma date de naissance' + madatenaissance.getTime()) : affiche un nombre négatif (-0,5 billion environ) et c'est logique puisque ma date de naissance est antérieure au 1er janvier 1970.

var monagecejour = aujourdhui-madatenaissance : différence entre deux timestamp dans la variable nomagecejour

monagecejour = monagecejour /(365*24*60*60*1000) : on divise mon âge en millisecondes par le nombre de millisecondes durant une année. Donc monagecejour récupère mon âge en années sous forme d'un réel.

document.write("mon âge : " + parseInt(monagecejour) + " ans") : affichage de mon âge sous forme d'un entier.

Les méthodes

Dans ce script nous avons utilisé la méthode getTime(). Une méthode est une fonction associée à un objet.
Ainsi la méthode getTime() ne peut être associée qu'à un objet de type Date (un objet créé à partir du constructeur Date).

Objet Date : exemple 2

Le script de cette page

var aujourdhui = new Date(); var annee = aujourdhui.getFullYear(); // retourne le millésime var mois =aujourdhui.getMonth()+1; // date.getMonth retourne un entier entre 0 et 11 donc il faut ajouter 1 var jour = aujourdhui.getDate(); // retourne le jour (1à 31) document.write('nous sommes le : ' + jour +'/' + mois + '/' + annee) ; var heure = aujourdhui.getHours(); var minutes = aujourdhui.getMinutes(); document.write("<br>"); // saut de ligne document.write('et il est très exactement : ' + heure + ' heures et ' + minutes + ' mn') ; Testez ce script !

Commentaire

L'objet String

Pour créer une chaîne de caractères on utilise la syntaxe suivante :
var machaine = "abcdefghijklmnopqrstuvwxyz"

Attention on ne crée pas ici une instance de l'objet String mais une chaîne de caractères primitive.

Pour instancier un objet String il faut utiliser la syntaxe suivante :
var machaine = new String("abcdefghijklmnopqrstuvwxyz")
Il faut donc utiliser le constructeur String !

Objet string : exemple 1

Le script de la page

var identite = new String('Dupont Louis'); var nomprenom = 'Durand charles' ; document.write ("instance de l'objet string ? " ); document.write(identite instanceof String) ; // identité est une instance de l'objet String document.write("<br>"); // saut de ligne document.write ("instance de l'objet string ? ") ; document.write(nomprenom instanceof String); // nomprenom n'est pas une instance de l'objet String document.write("<br>"); // saut de ligne document.write('nombre de caractères : ' + identite.length); document.write("<br>"); // saut de ligne document.write('nombre de caractères : ' + nomprenom.length) ; document.write("<br>"); // saut de ligne Testez ce script !

Commentaire du code

La première instruction d'affichage retourne true donc la variable identite est bien un objet String !
Nous avons utilisé l'opérateur instanceofString avec la syntaxe objet instanceofString. Cette expression retourne true si l'objet est bien de type string.
La deuxième instruction d'affichage retourne false donc la variable nomprenom n'est qu'une chaîne primitive.

Cette page montre également que la différence dans la pratique est minime. Dès qu'une opération est faite sur une chaîne primitive ; cette dernière est convertie automatiquement en une instance temporaire de String. Donc on peut appliquer à une chaîne primitive les propriétés et méthodes de l'objet String.
Ainsi et à titre d'exemple dans ce script la propriété length fonctionne tant avec un objet String qu'avec une chaîne primitive.

Objet string : exemple 2

Le script de la page

Le script manipule la variable dans laquelle vous avez saisi votre nom (en majuscules) pui votre prénom (en minuscules) avec un espace entre les deux mots.

var identite = prompt('votre nom puis prénom séparés par un espace'); document.write('votre identité: ' + identite.toUpperCase()); document.write("<br>"); // saut de ligne document.write('votre identité : ' + identite.toLowerCase()); document.write("<br>"); // saut de ligne var longueur = identite.length ; document.write('longueur de la chaîne : ' + longueur); document.write("<br>"); // saut de ligne document.write('premier caractère de la chaîne : ' + identite.charAt(0)); document.write("<br>"); // saut de ligne document.write('dernier caractère de la chaîne : ' + identite.charAt(longueur -1)); document.write("<br>"); // saut de ligne document.write('rang de l\'espace dans la chaîne : ' + identite.indexOf(' ')) ; Testez ce script !

Commentaire

Objet string : exemple 3

Le code de cette page (extraits)

... <p>Saisissez une adresse mail avec le caractère @ suivi d'un point</p> <form> <label>votre adresse mail : </label> <input type = 'text'> <label>votre nom et prénom : </label> <input type = 'text'> </form> <script> var mail = document.querySelector('input'); mail.onblur = function() { var vmail = mail.value ; var rang_arobase = vmail.indexOf('@') ; var rang_point = vmail.indexOf('.',rang_arobase); if (rang_arobase >=0 && rang_point >=0) alert('adresse mail correcte') ; else alert('adresse mail incorrecte'); } </script> ... Testez ce script !

Commentaire du code

Cette page montre qu'il est possible de contrôler la validité d'une adresse mail grâce à la méthode indexOf.
Une adresse mail valide comporte obligatoirement le caractère @ et un point après l'arobase.
La méthode indexOf() possède un deuxième argument facultatif qui précise à partir de quelle position doit commencer la recherche de la sous chaîne passée en premier argument.
Je vous rappelle que la méthode indexOf() retourne -1 si elle n'a pas trouvé la sous chaîne dans la chaîne.
Donc si la chaîne saisie comprend un arobase et un point après l'arobase alors les variables rang_arobase et rang_point contiennent un entier supérieur à -1 (supérieur ou égal à zéro).

L'objet Math

Les méthodes de l'objet Math (avec un M majuscule car c'est un constructeur) permettent d'effectuer des calculs.

Objet Math : exemple 1

Le script de cette page

var reel = prompt('saisissez un nombre décimal') ; document.write('réel : ' + reel); document.write("<br>"); // saut de ligne var entier_inf = Math.floor(reel) ; var entier_sup = Math.ceil(reel) ; document.write('entier inférieur correspondant : ' + entier_inf); document.write("<br>"); // saut de ligne document.write('entier supérieur correspondant : ' + entier_sup); document.write("<br>"); // saut de ligne var arrondi = Math.round(reel); document.write('entier le plus proche : ' + arrondi ); Testez ce script !

Commentaire

Objet Math : exemple 2

Le script de la page

var compteur = 0 ; while (compteur < 6) { var lancer = Math.random() // génère un réel entre 0 et 1 exclu var lancer = Math.ceil(lancer * 6) ; // génération d'un entier compris entre 1 et 6 document.write('résultat du lancer de dé : ' + lancer); compteur = compteur + 1 ; document.write("<br>"); // saut de ligne } Testez ce script !

Commentaire du code

Nous avons une boucle qui est exécutée 6 fois et génère 6 entiers compris entre 1 et 6
La méthode random() génère de façon aléatoire un réel compris entre 0 et 1 exclu (maximum : 0.9999....)
En multipliant par 6 ce réel on obtient donc un autre réel compris entre 0 et 6 exclu
En appliquant la méthode ceil() à ce réel on obtient un entier compris entre 1 et 6 et c'est bien ce que nous voulons.

Attention si on avait appliqué la méthode floor() on aurait obtenu un entier compris entre 0 et 5 ce qui ne correspond pas vraiment aux faces d'un dé ...

Objet Math : exemple 3

Le script de la page

document.write('la valeur absolue de -5 est : ' + Math.abs(-5)) ; document.write("<br>"); // saut de ligne document.write('le nombre mini parmi 10, 20, 30 est: ' + Math.min(10,20,30)) ; document.write("<br>"); // saut de ligne document.write('le nombre maxi parmi 10, 20, 30 est: ' + Math.max(10,20,30)) ; document.write("<br>"); // saut de ligne document.write('2^10 : ' + Math.pow(2,10)) ; Testez ce script !

Commentaire

Objet Window

Window est l'objet JavaScript de plus haut niveau dans la hiérarchie des objets.
Il comporte un grand nombre méthodes dont certaines que vous connaissez déjà : alert(), prompt(), confirm()
Il est le seul objet à autoriser une écriture simplifiée. En effet dans le cadre de la notation pointée il n'est pas obligatoire de préciser window. Ainsi au lieu d'écrire window.alert() on se contente d'écrire alert()

Le principal sous objet de l'objet window est l'objet document.

Objet Document

L'objet document est à la base de l'interface DOM.

La méthode write de l'objet document

Grâce à cette méthode vous pouvez afficher des variables, des littéraux dans vos scripts.
Grâce à document.write() vous pouvez produire du balisage HTML au sein d'un script !!!

Exemple

Vous voulez qu'un script affiche la table de multiplication par N (N : entier saisi par l'utilisateur).
Il suffit d'utiliser comme paramètres des instructions document.write les balises relatives aux tableaux (table, tr, td, th).

Le script :

var entier = prompt("tapez un entier compris entre 1 et 9") ; document.write("<h2>la table de multiplication par : " + entier +"</h2>"); document.write("<table>"); document.write("<tr>"); document.write("<th>" + entier + " fois</th><th>donne</th>"); document.write("</tr>"); for (i=1; i<=10; i++) { produit = entier *i ; document.write("<tr>"); document.write("<td>" + i + "</td>"); document.write("<td>" + produit + "</td>"); document.write("</tr>"); } document.write("</table>");
Testez ce script !

Référencer les éléments de la page

C'est grâce à des méthodes de l'objet document que l'on manipule les noeuds du DOM.

Les anciennes méthodes

Les nouvelles méthodes

Oubliez ces anciennes méthodes !
Utilisez les nouvelles méthodes qui ont pour argument un sélecteur CSS valide !

document.querySelector('sélecteur CSS') : retourne le premier noeud (si le sélecteur passé en argument correspond à plusieurs noeuds)

document.querySelectorAll('sélecteur CSS') : retourne tous les éléments HTML correspondant à ce sélecteur sous forme d'un tableau indicé. C'est pour cela qu'on lui préfère la syntaxe : document.querySelectorAll('sélecteur CSS') [indice]

Exemples:
document.querySelector('#debut') : retourne le noeud dont l'attribut id a la valeur debut
document.querySelector('.important') : retourne le premier noeud donc l'attribut class à la valeur important
var titres = document.querySelectorAll('h1') : titres est un tableau indicé

Pour affecter la couleur de fond vert à chaque balise H1 il suffira d'écrire :

	var titres = document.querySelectorAll('h1')
	for (var i = 0; i < titres.length; i++) 
		{ titres[i].style.backgroundColor = 'lime'; } 

L'objet screen

Il s'agit également d'un sous objet de l'objet window.

Il comprend quatre propriétés informant sur les dimensions de l'écran de l'internaute.

Exemple

... <h1>Le sous objet screen de l'objet window</h1> <script> document.write("résolution horizontale de votre écran :" + screen.width + "<br>"); document.write("résolution verticale de votre écran : " + screen.height +"<br>"); document.write("résolution horizontale utile de votre écran :" + screen.availWidth +"<br>"); document.write("résolution verticale utile de votre écran :" + screen.availHeight); </script> ... Testez cette page !

Remarques

Testez cette page avec un ordinateur portable puis avec votre tablette.

Les.propriétés de l'objet screen sont très utilisées pour tester le type de terminal utilisé par le visiteur.
Si la largeur de l'écran est inférieure à 900 pixels il s'agit d'un mobile (tablette ou smartphone).

L'objet location

Il s'agit encore d'un sous objet de l'objet window.

Exemple

... <body> <p>Saisissez votre nom et votre prénom dans le formulaire puis cliquez sur le bouton légendé "actualisez" ! <br>Le contenu du formulaire est effacé car la page a été rechargée <br>C'est exactement comme si vous aviez cliqué sur l'icône "actualiser cette page" du navigateur. <form> <label>Tapez votre nom : </label><input type ='text'> <label>Tapez votre prénom : </label><input type ='text'> <button onclick ="location.reload()">actualiser</button> <label></label> <select onchange ="retour()"> <option value ="tuto">retour menu tuto</option> <option value ="accueil">retour accueil</option> </select> </form> <script> function retour() { var liste = document.querySelector('select'); if (liste.value == "tuto") location.href ="js_menu.htm" ; if (liste.value == "accueil") location.href ="../index.htm" ; } </script> </body> ... Testez cette page !

Commentaire

Grâce à méthode reload() de l'objet location on peut programmer l'actualisation (rechargement) de la page.

Grâce à la propriété href de l'objet location on peut programmer des liens hypertextes.

Objet navigator

Un autre sous objet de window : l'objet navigator.

Exemple

document.write('nom du navigateur utilisé : ' + navigator.appName) ; document.write("<br>"); // saut de ligne document.write('code du navigateur utilisé : ' + navigator.appCodeName) ; document.write("<br>"); // saut de ligne document.write('version utilisée : ' + navigator.appVersion) ; document.write("<br>"); // saut de ligne document.write("système d'exploitation : " + navigator.platform) ; document.write("<br>"); // saut de ligne document.write("mon navigateur peut-il exécuter des applets java ? : " + navigator.javaEnabled() ) ; Testez ce script !

Commentaire du code

Nous avons utilisé 4 propriétés de l'objet navigator et une méthode.
Les résultats des deux premières propriétés sont assez surprenantes ... Ainsi si vous utilisez le navigateur chrome le premier affichage retourne Netscape et le second affichage Mozilla ...
La méthode javaEnabled() retourne true ou false ; en général tous les navigateurs récents autorisent l'exécution d'applets Java.

Le sous objet geolocation

L'objet geolocation est un sous objet de l'objet navigator.
La géolocalisation est aussi une nouvelle API (interface de programmation JavaScript) introduite par HTML5 donc je vous renvoie vers ce tutoriel : objet geolocation
Retour menu