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).
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 :
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. 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 :
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 :
Testez ce script !

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

Objet string : exemple 3

Le code de cette page (extraits) :
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 :
Testez ce script !

Objet Math : exemple 2

Le script :
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 :
Testez ce script !

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

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 :

Ou encore plus simplement :

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:

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.

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

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 :
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.
Retour menu