JavaScript : les objets natifs

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

L'objet Date

un constructeur
des propriétés
des méthodes (fonctions spécifiques à l'objet)

Objet Date : exemple 1

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

Le script :

	var aujourdhui = new Date(); 
	document.write("Date d'aujourdhui : " + aujourdhui); 
	document.write ("
"); //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 ("
"); //saut de ligne
	document.write ("Ma date de naissance : " + madatenaissance); 
	document.write("
" + "timestamp de l'instant présent :" + aujourdhui.getTime());
	document.write("
" + "timestamp de ma date de naissance :" + madatenaissance.getTime());

Testez ce 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.

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 :

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

	document.write("
" +  "Mon âge : " + parseInt(monagecejour) + " ans");

Testez ce 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 :

	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("
"); // saut de ligne
	document.write('et il est très exactement : ' + heure + ' heures et ' + minutes + ' mn') ;

Testez ce script !

getFullYear() : retourne le millésime sur 4 chiffres
getYear() : retourne le millésime sur 2 chiffres
getMonth() : retourne le rang du mois sous forme d'un entier compris entre 0 et 11
getDate() : retourne le rang du jour dans le mois sous forme d'un entier compris entre 1 et 31
getHours() : retourne l'heure
getMinutes() : retourne le nombre de minutes
getDay() : retourne le jour de la semaine sous forme d'un indice allant de 1 à 6 (0 pour dimanche)

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("
 Nouvelle date en 2020 à partir de la date courante : ");
	document.write(datecourante.getDate()+"/"+(datecourante.getMonth()+1)+"/"+datecourante.getFullYear())

Testez ce script !

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 :

	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("
"); // 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("
"); // saut de ligne
	document.write('nombre de caractères : ' + identite.length); 
	document.write("
"); // saut de ligne
	document.write('nombre de caractères : ' + nomprenom.length) ; 
	document.write("
"); // saut de ligne

Testez ce script !

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 :

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

Testez ce script !

chaine.toUpperCase() : convertir en majuscules
chaine.toLowerCase() : convertir en minuscules
chaine.charAt(rang) : récupère le caractère du rang indiqué
chaine.indexOf(souschaine) : retourne le rang de la première sous chaîne ou -1 si la sous chaîne n'est pas trouvée

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 !

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 :

		var reel = prompt('saisissez un nombre décimal') ; 
		document.write('réel : ' + reel); 
		document.write("
"); // 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("
"); // saut de ligne
		document.write('entier supérieur correspondant : ' + entier_sup); 
		document.write("
"); // saut de ligne
		var arrondi = Math.round(reel); 
		document.write('entier le plus proche : ' + arrondi );

Testez ce script !

Math.floor(réel): arrondit un réel à l'entier inférieur
Math.ceil(réel): arrondit un réel à l'entier supérieur
Math.round(réel): arrondit un réel à l'entier le plus proche

Objet Math : exemple 2

Le script :

	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("
"); // saut de ligne
	}

Testez ce script !

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 : exemple3

Le script :

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

Testez ce script !

Math.abs() : retourne la valeur absolue d'un nombre
Math.min() : retourne le plus petit des arguments
Math.max() : retourne le plus grand des paramètres
Math.pow(a, n) : retourne a élevé à la puissance n

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

méthode open() pour ouvrir un nouvel onglet
méthode close() pour fermer un onglet

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 instructions basées sur document.write avec en arguments des balises HTML.
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 !

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.

document.getElementById()
document.getElementsByTagName()
document.getElementsByName()

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] + "
");
		}

Testez ce script !

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 !

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 1

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] + "
");
		}

Testez ce code !

La liste des propriétés est impressionnante.

language : retourne la langue définie dans le navigateur
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

Autre exemple sur l'objet navigator

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

Le script :

			var v1 = "
Langage : " + navigator.language;
			var v2 = "
nom navigateur : " + navigator.appName;
			var v3 = "
code navigateur : " + navigator.appCodeName;
			var v4 = "
version navigateur :" + navigator.version;
			var chaine = v1 + v2 + v3 + v4
			var titre = document.querySelector('h4'); 
			titre.innerHTML += chaine ; 
		..

Essayez ce code !

Géolocalisation

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

Tutoriel JavaScript & jQuery - sommaire

JavaScript

jQuery - célèbre bibliothèque JavaScript

JavaScript : les objets natifs

L'objet Date

Objet Date : exemple 1

Les méthodes

Objet Date : exemple 2

Objet Date : exemple 3

Emploi des méthodes set

L'objet String

Objet string : exemple 1

Objet string : exemple 2

Objet string : exemple 3

L'objet Math

Objet Math : exemple 1

Objet Math : exemple 2

Objet Math : exemple3

Objet Window

Objet Document

La méthode write de l'objet document

Cibler les éléments de la page

L'objet images

L'objet screen

L'objet location

Objet navigator

Exemple 1

Autre exemple sur l'objet navigator

Géolocalisation