Accueil

Traduction

Tutoriel JavaScript & jQuery - sommaire

Sommaire partiellement masqué - faites défiler !

Tutoriel JavaScript & jQuery - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

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 ; à ne pas confondre avec une propriété ...

JavaScript est riche en objets prédéfinis (ou natifs).

L'objet Date

Récupérer et manipuler l'instant présent

Utilisons la console pour nous familiariser avec la syntaxe.

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 une date & heure.
N'oubliez pas le "D" majuscule à "Date" pour bien préciser qu'il s'agit d'un constructeur.

Ici on n'a pas passé d'argument au "constructeur" Date donc la variable cejour récupère par défaut l'instant présent (date et heure de l'appel sur le terminal de l'utilisateur).

Notez quelques bizarreries ...
getMonth() retourne 5 pour le mois de juin ...
getDay() retourne 6 pour un samedi (dernier jour de la semaine pour JS) ...

Calcul de l'âge d'un individu

Le script :

Testez ce script !

Ce script retourne mon âge en millisecondes et en années entières !
Remarquez comment j'ai créé une instance de Date contenant ma date de naissance.
Faire la différence entre deux dates c'est faire la différence entre leur timestamp respectifs et donne donc 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 * 60 * 60 * 1000).
Ici l'âge est arrondi à l'entier le plus proche via la fonction parseInt().

Script pour afficher l'instant présent de façon lisible pour un francophone

Le script :

Testez ce script !

Les méthodes set

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

Testez ce script !

Grâce à la méthode setFullYear() on modifie le millésime dans la variable "datecourante".
Je modifie aussi le rang du mois et le rang du jour dans le mois via setMonth() & setDate()
Il existe aussi les méthodes : setDay(), setHours(), setMinutes(), setSeconds(), etc.

Les "strings"

Création de chaines

Pour créer un objet String (une chaine) vous pouvez utiliser le constructeur String mais en général on préfère créer une chaine de façon littérale comme dans les exemples ci-dessous.

Exemples :
voyelles ='aeiouy'
consonnes = "bcdfghjklmnpqrstvwxz"
surnom = "l'emmerdeur"
pseudo = 'l\'emmerdeur'

Une chaine délimitée par des guillemets simples peut contenir l'apostrophe si ce caractère est échappé.
Maintenant c'est plus simple de délimiter alors par des guillemets doubles.

Méthodes et propriétés applicables

Pour vous familiariser avec les propriétés et méthodes applicable à une chaine de caractère utilisez la console !

La chaine contenue dans "chaine" a une longueur de 17 donc les caractères ont pour valeur d'indice de 0 à 16.
La chaine contenue dans "chaine_propre" a une longueur de 12 caractères donc les * finales ont pour position 10 et 11.

length n'est pas une méthode mais une propriété ; donc pas de parenthèses.

Un programme pour vérifier la validité d'une adresse mail

Le code de la 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.

Méthodes de l'objet Math

Commandes à saisir dans la console :

Il existe aussi des fonctions trigonométriques au nombre de 6.

Les constantes de Math

A saisir dans la console :

Surtout respectez la casse : PI en majuscule, E en majuscule !

Un programme qui simule le lancer d'un dé

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

L'objet Array

"Array" veut dire tableau en anglais.
J'ai déjà consacré tout un chapitre sur les tableaux mais c'est un "gros morceau" et je n'ai pas encore tout dit ...

Convertir un tableau en chaine

A saisir dans la console !

Quelques méthodes de manipulation des tableaux

Commandes à taper dans la console :

Attention les méthodes reverse(), unshift(),sort(), pop(), shift() modifient le tableau et les impacts sont respectivement : inversion, ajout en fin de tableau, tri, suppression dernier item et suppression premier item.

Notez aussi que la méthode sort() trie de façon bizarre des nombres ...

Encore des méthodes pour un objet array

A saisir dans la console :

J'ai créé avec le constructeur Array un tableau avec 6 éléments (mois du premier semestre).
Je rajoute en fin de tableau un doublon : 'janvier' avec push()
Je recherche l'élément 'janvier' en début de tableau avec indexOf() puis en fin de tableau avec lastIndexOf()
Je supprime 'janvier' en fin de tableau avec pop()
Je fais une bêtise; je rajoute des items non pas en fin de tableau mais en début avec unshift()
J'ai donc une liste de mois non ordonnés.
Je corrige ma maladresse en créant une copie partielle de "mois" dans "mois_bis". "mois_bis" comprend les éléments de "mois' indicés de 6 à 12 exclu donc les mois du premier semestre. J'ai utlisé la méthode slice()
Il suffit de rajouter en fin de liste dans "mois_bis" les mois du deuxième semestre avec la méthode push(). Le tableau comprend alors les 12 mois ordonnés.

Plutôt que de faire une copie partielle du tableau d'origine, j'aurais pu supprimer plusieurs items avec la méthode splice().

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

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 !

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

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

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.