Les objets natifs en JavaScript

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 spécifique à 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 aussi possible pour le développeur de créer ses propres objets. La création et la manipulation d'objets personnels sera vue dans le chapitre suivant.

L'objet Date

Objet Date : exemple 1

Via cet exemple nous allons voir la création de dates et la notion de Timestamp.

Le script correspondant

var aujourdhui = new Date(); document.write("Date d'aujourdhui : " + aujourdhui); document.write ("<br>"); //saut de ligne var autredate =new Date(24*60*60*1000); document.write("Autre date : " + autredate); var madatenaissance = new Date(1954,2,18) ; document.write ("<br>"); //saut de ligne document.write ("Ma date de naissance : " + madatenaissance); document.write("<br>" + "timestamp de l'instant présent :" + aujourdhui.getTime()); document.write("<br>" + "timestamp de ma date de naissance :" + madatenaissance.getTime());
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. On peut dire plus simplement "créer un nouvel objet de type Date".
N'oubliez pas le "D" majuscule à "Date" pour bien préciser qu'il s'agit d'un constructeur.

Ici on n'a pas passé de paramètre au "constructeur" Date. Donc la variable aujourdhui récupère par défaut l'instant présent (date et heure courantes).

document.write("date d'aujourdhui : " + aujourdhui) : Cette instruction affiche la date selon un format très compréhensible ... pour les anglo-saxons.
Exemple : Fri Dec 28 2018 16:53:00 GMT+0100
Traduisez : vendredi 28 décembre 2018 à 16h53 GMT +1

var autredate =new Date(24*60*60*1000): pour créer une date on peut aussi argumenter le constructeur Date() avec un Timpestamp.
Timestamp : nombre de millisecondes écoulé depuis le 1er janvier 1970 à zéro heure GMT.
Ici le paramètre est nombre de millisecondes écoulé en une journée !
Donc c'est logique que lorsqu'on demande d'afficher cette date on obtient "Fri Jan 02 1970 01:00:00 GMT+0100" c'est à dire le lendemain de la date de référence.

var madatenaissance = new Date(1954,2,18) : on va encore pouvoir créer un nouvel objet de type date en passant au maximum sept nombres en arguments (minimum 3).
Ces nombres vont correspondre respectivement à l’année, le mois, le jour, l’heure, les minutes, les secondes et les millisecondes
Ici la variable madatenaissance fait référence au 18 mars 1954 zéro heure UTC. J'ai bien écrit 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 au mois de mars !

document.write('timestamp de aujourdhui' + aujourdhui.getTime()) : emploi de la méthode getTime() pour afficher une date sous la forme de son Timestamp. date courante.

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 donc le Timestamp correspondant est un nombre négatif !

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.

Objet Date : exemple 2

Dans cet exemple je vais vous montrer comment calculer l'âge d'un individu.

Le script correspondant

var aujourdhui = new Date(); var madatenaissance = new Date(1954,2,18) ; var monagecejour = aujourdhui - madatenaissance ; // différence entre deux timestamp document.write("<br>" + "Mon âge : " + monagecejour + " en millisecondes"); monagecejour = monagecejour /(365*24*60*60*1000) ; document.write("<br>" + "Mon âge : " + parseInt(monagecejour) + " ans");
Testez ce script !

Commentaire du script

Ce script retourne mon âge en millisecondes et en années entières !

La différence entre deux dates retourne directement le nombre de millisecondes écoulé entre ces deux dates.
Une année c'est : 365 * 24 * 60 * 60 * 1000 millisecondes. Donc pour obtenir mon âge en années il suffit de diviser cet âge en millisecondes par (365 * 24 ...). Ici l'âge est arrondi à l'entier le plus proche via la fonction parseInt().

Objet Date : exemple 3

Avec cet exemple je vous indique comment afficher la date courante et l'heure courante de façon lisible pour un francophone.

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

Il s'agit d'une liste non exhaustive des méthodes de type "get" que l'on peut associer à une date.
Sachez qu'il existe aussi des méthodes de type "set" qui sont utiles pour produire une nouvelle date à partir d'une ancienne.
Voir exemple suivant !

Emploi des méthodes set

Dans l'exemple ci-dessous une nouvelle date en 2020 est produite à partir de la date courante.

Le script

// nouvelle date en 2020 à partir de la date courante var datecourante =new Date(); document.write("Date courante : " + datecourante.getDate() + "-" + (datecourante.getMonth() +1) + " -" + datecourante.getFullYear() ); datecourante.setFullYear(2020); // changement de millesime document.write("<br> Nouvelle date en 2020 à partir de la date courante : "); document.write(datecourante.getDate()+"/"+(datecourante.getMonth()+1)+"/"+datecourante.getFullYear())
Testez ce script !

Commentaire

Grâce à la méthode setFullYear() on modifie le millésime "2020" à la variable objet datecourante
Il existe aussi les méthodes : setDate(), setMonth(), setDay(), setHours(), setMinutes(), setSeconds(), etc.

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 un objet de type 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 de 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 qui comprend à son tour des objets ...

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 écrire dans la page web.

Attention l'exécution d'une première instruction write provoque l'effacement des éléments de la page déjà chargés.

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 code de la page :

Tout le code de la page est généré par des "document.write()" !

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 !

Cibler les éléments de la page

C'est grâce à des méthodes de l'objet document que l'on peut référencer dans un script des éléments de la page.

Les anciennes méthodes

Les nouvelles méthodes

Préférez les nouvelles méthodes qui ont pour argument un sélecteur CSS valide !

document.querySelector('sélecteur CSS') : retourne le premier élément correspondant au sélecteur CSS

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 souvent la syntaxe document.querySelectorAll('sélecteur CSS') [indice] pour référencer un seul élément.

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 retourne un tableau indicé qui référence la collection de balises H1.

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'; }

Ou encore plus simplement :

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

Emploi de la structure for ... in pour manipuler les éléments d'un tableau.

L'objet images

Il s'agit d'un sous-objet de document qui référence toutes les images de la page.

Exemple : un clic sur un bouton de commande permet d'agrandir toutes les images de la page.

Le code de la page:

... <style> img {display : inline-block ; width : 10%; vertical-align : top ; margin :1%; } ... <img src ="../images/bikini.jpg" alt ="bikini"> <img src ="../images/trikini.jpg" alt ="trikini"> <img src ="../images/burkini.jpg" alt ="burkini" > <img src ="../images/seins_nus.jpg" alt ="monokini"> <br> <button onclick ="agrandir()">Agrandir images !</button> ... function agrandir() { for (var i in document.images) { document.images[i].style.width ="30%" ; } } // fin fonction ...

Vous manipulez la collection d'images tel un tableau avec la structure for ... in !
Testez cette page !

Si vous ignoriez l'existence de l'objet natif document.images il suffit de créer un objet référençant les images de la page avec la méthode querySelectorAll.

... var images_page =document.querySelectorAll('img'); for (var i in images_page) {images_page[i].style.width ="30%" ;} ...

L'objet screen

Il s'agit également d'un sous objet de l'objet window.
Il comprend neuf propriétés informant sur les dimensions de l'écran de l'internaute.

Exemple : connaitre toutes les propriétés et méthodes de l'objet screen.

Le script

for (var i in screen) { document.write(i + " : " + screen[i] + "<br>"); }
Testez ce script !

Remarques

Inutile d'écrire window.scren puisque window est implicite !

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

Saisissez votre nom et votre prénom dans le formulaire puis cliquez sur le bouton légendé "actualisez" !
Le contenu du formulaire est effacé car la page a été rechargée.
C'est exactement comme si vous aviez cliqué sur l'icône "actualiser cette page" du navigateur.

Le code correspondant

... <body> <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> ...
Essayez ce code !

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

L'objet navigator va donner des infos sur le navigateur utilisé.

Exemple

Dans l'exemple toutes les propriétés et méthodes de l'objet navigator sont affichées.

Le script

for (var i in navigator) { document.write(i + " : " + navigator[i] + "<br>"); }
Testez ce code !

Commentaire

La liste des propriétés est impressionnante.

Autre exemple sur l'objet navigator

Une "piqure de rappel" pour indiquer comment compléter avec JS le contenu d'une balise.

Le code :

... <h2>Principales propriétés de l'objet navigator avec leur valeur : </h2> <h4>Quatre propriétés : </h4> <script> var v1 = "<br>Langage : " + navigator.language; var v2 = "<br>nom navigateur : " + navigator.appName; var v3 = "<br>code navigateur : " + navigator.appCodeName; var v4 = "<br>version navigateur :" + navigator.version; var chaine = v1 + v2 + v3 + v4 var titre = document.querySelector('h4'); titre.innerHTML += chaine ; ..
Essayez ce code !

Remarque

L'objet navigateur contient un sous objet : geolocation.
Voir le tutoriel "HTML" qui traite de l'API geolocation.
Retour menu