Mini-cours de JavaScript

Jour 7

Javascript est un langage de programmation, orienté objet ...

La notion d'objet

En programmation orientée objet, un objet est une boîte noire qui contient du code.
À part celui qui a créé l'objet, personne ne connaît le code contenu à l'intérieur de l'objet !

C'est un peu comme une voiture. Personne ne crée une voiture, mais quasi tout le monde sait la conduire. Une voiture est un objet ! Il n'est pas nécessaire d'ouvrir le capot ou savoir comment fonctionne le moteur, pour conduire une voiture ( utiliser l'objet voiture )

Idem avec les objets mis à votre disposition par JavaScript. Il n'est pas nécessaire de voir le code de l'objet pour l'utiliser.

Tout objet a un nom, des méthodes et des propriétés.

Une méthode est ce qui permet d'utiliser l'objet.
Une propriété est une caractéristique de l'objet.

Il suffit de connaître toutes les méthodes et toutes les propriétés de l'objet pour être capable de l'utiliser complètement.

Pour conduire une voiture, il suffit aussi de connaître les méthodes qui permet de l'utiliser.

En programmation orientée objet, pour utiliser un objet, il faut indiquer à quel objet on veut faire une action ou obtenir / mettre à jour une caractéristique.
nom_de_l_objet.nom_de_la_methode()
nom_de_l_objet.nom_de_la_propriete
Entre les deux noms - celui de l'objet et celui de la méthode/propriété, il y a toujours un point. Par exemple, window.alert()

On distingue facilement une propriété d'une méthode, car le nom d'une méthode est toujours précédé d'un point et suivi d'une parenthèse ouvrante.

Si la voiture était un objet mis à votre disposition par JavaScript, pour faire avancer une voiture, dans le code, on écrirait simplement : voiture.avancer();

Accès vers la liste de tous les objets mis à votre disposition par JavaScript ( en anglais )

L'objet : window

window ( en anglais ) = fenêtre ( en français )

L'objet window est mis à votre disposition par JavaScript. Il représente la fenêtre dans laquelle la page web s'affiche.

Il est facile de confondre fenêtre et page, puisque la page remplit la fenêtre. La fenêtre est comme un cadre avec une vitre transparente. Si on réduit la taille de la fenêtre, le texte de la page va d'adapter aux nouvelles dimensions.

alert()

Sur une fenêtre, pour afficher une boîte de dialogue, on écrit : window.alert();

Cependant, en JavaScript, il existe un seul objet principal : window. Comme c'est le seul objet principal, exceptionnellement, il n'est pas obligatoire d'indiquer le nom d'objet pour utiliser une de ses méthodes.
Ainsi, depuis le début de ce mini-cours, chaque fois que vous avez affiché une boîte de dialogue, vous avez utilisé un objet - l'objet window - sans le savoir.

Pour faire apparaître une boîte de dialogue - une petite fenêtre - sur la fenêtre du navigateur, vous écriviez dans le code : alert();. Maintenant vous savez que, pour faire la même chose, vous auriez pu écrire : window.alert(); 

<button onclick="window.alert('Hello World');">Afficher sur la fenêtre : Hello World !</button>

Liste des méthodes et propriétés de l'objet window ( en anglais )

Coder de A à Z tout ce qu'il faut pour que l'ordinateur affiche une boîte de dialogue dans la fenêtre du navigateur est très complexe. Il faut dessiner un cadre dans la fenêtre du navigateur, dans lequel se trouve votre texte et en-dessous un bouton qui réagira à votre clic pour la faire disparaître et faire réapparaître le texte d'avant le clic.
Bref, il faut jouer avec le contenu de la mémoire située sur la carte vidéo ...

Notez bien que la boîte de dialogue ne s'affiche pas au milieu de l'écran, mais au milieu de la fenêtre du navigateur. Pour vous en convaincre, réduisez la taille du navigateur ( du logiciel ) et cliquez sur le même bouton.

Le rôle des objets est de faciliter la vie du programmeur.

Toutefois, exceptionnellement, comme window est le seul objet principal, il n'est pas nécessaire de l'indiquer.

Les fonctions pré-définies : parseInt(), parseFloat() et isNan() ne sont pas des méthodes de l'objet window.

prompt()

L'objet window possède d'autres méthodes, dont prompt() qui permet à l'utilisateur de fournir une chaîne de caractères via une mini-fenêtre. 

function via_prompt() {

  var longueur = prompt("Indiquez une longueur (en m)");
  var largeur = prompt("Indiquez une largeur (en m)");

  longueur = parseFloat(longueur);
  largeur = parseFloat(largeur);

  var surface = longueur * largeur;
  alert("La surface du rectangle vaut " + surface + " m²");

}

confirm()

L'objet window possède également la méthode confirm() qui permet à l'utilisateur de répondre par oui (OK) ou non (autres cas). 

function via_confirm() {

  var isAdult = confirm("Êtes-vous adulte ?");

  if (isAdult){
    alert("Vous avez déclaré être adulte.");
  }else{
    alert("Vous n'avez pas déclaré être adulte.");
  }

}

La fenêtre affiche deux boutons OK et Annuler. Le clic sur OK retourne true, et false dans tous les autres cas. Il n'est pas possible de remplacer OK/Annuler par Oui/Non (sauf à coder soi-même des fenêtres modales : cfr javascript2)

L'objet : document

Et, un objet peut contenir un objet !
La voiture peut contenir une radio ...
On ne sait pas exactement tout ce qu'il y a "sous le capot" de la radio, mais on sait l'utiliser.

Attention. Tous les objets ont leur propres méthodes et propriétés. Par exemple, l'objet moteur a la méthode accelerer(). L'objet radio n'a pas de méthode accelerer() ...

Dans la fenêtre du navigateur, s'affiche une page web.
La page web fait partie de la fenêtre. Une des caractéristiques de la fenêtre est qu'elle contient une page web.
En JavaScript, la page web est un objet nommé : document

Pour sélectionner un champ nous avons déjà utilisé une méthode de l'objet document :
document.getElementById(). Cette méthode renvoie une référence à un objet element, c'est-à-dire une référence à une balise.

Référence à un objet ou objet ? Une référence représente un objet. On peut mettre une référence dans une variable et utiliser cette variable comme si elle était l'objet lui-même.

Liste des méthodes et propriétés de l'objet : document ( en anglais ) 

var pageWeb = window.document;
/* On aurait pu aussi écrire :
  var pageWeb = document; */

/* pageWeb est le nom d'une variable qui contient une référence à un objet-document qui
   représente la page web */

/* document est un objet de l'objet-window (donc un sous-objet de l'objet-window) */

var baliseNombre1 = pageWeb.getElementById("Nombre1");
/* On aurait pu aussi écrire :
   var baliseNombre1 = window.document.getElementById("Nombre1");
   var baliseNombre1 = document.getElementById("Nombre1");

baliseNombre1 est le nom d'une variable qui contient une référence à un objet-element qui
représente la balise ( identifiée par "Nombre1" ).

Une balise est appelée element en JavaScript
element est un objet de l'objet-document (donc un sous-sous-objet de l'objet-window)
getElementById() est le nom d'une méthode de l'objet-document */

var nombre1 = baliseNombre1.value;
/* On aurait pu aussi écrire :
var nombre1 = window.document.getElementById("Nombre1").value;
var nombre1 = document.getElementById("Nombre1").value;

value est le nom d'une propriété de l'objet-element

nombre1 est donc le nom d'une variable qui contient la valeur de la propriété nommée value
de l'objet-element qui représente la balise, identifiée par "Nombre1".

La valeur de l'attribut nommé value de cette balise est copiée dans la propriété nommée
value de l'objet-element correspondant à cette balise */

Tous les noms de propriété d'un element sont également le nom d'un attribut d'une balise HTML ( hormis quelques exceptions ).

Vous pouvez connaître le nom de tous les attributs d'une balise identifiée via son attribut id. Il suffit de regarder dans le fichier HTML. Vous connaissez donc le nom de quasi toutes les propriétés de l'objet element !

value est le nom d'attribut de la balise input, il est donc le nom de la propriété de l'objet lié à ce type de balise.

On peut utiliser la référence à l'objet comme si c'était l'objet lui-même.
On peut appliquer à une référence à un objet les méthodes et propriétés de l'objet qu'il représente.

Maintenant, vous devriez comprendre cette ligne de code : 

var nombre1 = document.getElementById("Nombre1").value;

Grâce aux objets, on peut "presque" écrire le code comme si on l'écrivait en français !

nombre1 = le nom d'une variable qui contient la valeur de l'attribut value de l'objet-element de l'objet-document identifié par la valeur de l'attribut id qui vaut "nombre1".

L'objet : String

Une String est un objet qui contient une chaîne de caractères.

Pourquoi stocker une chaîne de caractères dans un objet ?

Pour pouvoir utiliser les méthodes et les propriétés de cet objet, bien sûr !

Liste des méthodes et propriétés de l'objet String ( en anglais )

.length

length ( en anglais ) signifie longueur ( en français )

La propriété .length, appliquée à une variable représentant un objet de type String ( = une chaîne de caractères ), permet de connaître le nombre de caractères de cette chaîne de caractères.

Un espace est un caractère, même si on ne le voit pas. 

<form id="form1" onsubmit="afficherLongueur();return false;">
    <p>
        <label>Tapez une chaîne de caractères :
        <input id="maChaine" size="30" required="required" />
        </label>
        <input type="submit" value="Afficher la longueur de la chaîne" />
        <input type="reset" value="Effacer" />
    </p>
</form>

<script>

function afficherLongueur(){

    var maChaine = document.getElementById("maChaine").value;
    var longueur = maChaine.length;
    /* à la variable (qui représente la chaîne de caractères)
    on lui applique la propriété .length */

    alert("Cette phrase contient " + longueur + " caractères.");
}

</script>

maChaine.length
La propriété length est appliquée à une variable ( voir le point )

maChaine
est le nom d'une variable dont le contenu est une chaîne de caractères.
Rappel : Toute valeur d'un attribut d'une balise HTML est une chaîne de caractères.

En pratique, maChaine
est le nom d'une variable qui peut être utilisé comme un objet-string.
Il n'existe pas de variable de type "chaîne de caractères", mais je ne pouvais pas le dire avant que vous sachiez ce qu'est un objet.

.charAt()

char est l'abréviation anglaise de character
character ( en anglais ) signifie caractère ( en français )
at ( en anglais ) signifie à ( en français )
Conformément aux usages en informatique, lorsque le nom d'une fonction, variable, propriété ou méthode est composé de plusieurs mots, chaque première lettre du mot est mise en majuscule, sauf la première. charAt se lit donc caractère à [ la position ... ]

La méthode .charAt(), appliquée à une variable représentant un objet-String, retourne le caractère dont la position est passée en paramètre.

Attention : Le premier caractère de toute chaîne de caractères se trouve à la position 0
Une position est un nombre entier, positif ou nul. 

<form id="form8" onsubmit="afficherCaractere();return false;">
    <p>
        <label>Tapez une chaîne de caractères :
        <input id="maChaine8" size="30" required="required" />
        </label>
    </p>
    <p>
        <label >Tapez la position du caractère voulu :
        <input id="position8" size="2" required="required" type="number" min="0" autocomplete="off" />
        </label>
    </p>
    <p>
        <input type="submit" value="Afficher le caractère" />
        <input type="reset" value="Effacer" />
    </p>
</form>

<script>

function afficherCaractere(){

    var chaine = document.getElementById("maChaine8").value;
    var position = document.getElementById("position8").value;
    /* grâce aux contraintes HTML via les attributs - required, number et min -
       on sait que la valeur de value sera un nombre entier supérieur à 0 */

    /* On vérifie que le nombre dans la variable position
    ne soit pas supérieur au nombre de caractères (contenu dans la chaine) */
    if ( position >= chaine.length ){
            alert("La position indiquée est hors de la chaîne !");
    }
    else{
        var caractere;
        caractere = chaine.charAt(position); /* = chaine[position]; */
        alert("À la position "+ position + " se trouve le caractère : '" + caractere + "'");
    }

}

</script>

Tout ce qui est entre /* et */ est ignoré par le programme. Ceci permet d'écrire des commentaires sur plus d'une ligne.

Une chaîne de caractères est aussi un tableau de caractères. Ainsi, au lieu de passer la position du caractère à .charAt(), on peut aussi mettre cette position comme indice du tableau de caractères. Nous verrons la notion de tableau plus tard.

.indexOf()

index ( en anglais ) signifie position ( en français )
of ( en anglais ) signifie de ( en français)
indexOf se lit position de [ dans la chaîne de caractères ]

La méthode .indexOf(), appliquée à une variable représentant un objet-String, retourne la position de la première occurrence de la chaîne recherchée passée en paramètre.

Cette position correspond à un nombre compris entre -1 et ...
0 = premier caractère; 1 = deuxième caractère; ... -1 = pas trouvé 

<form id="form2" onsubmit="positionCaractere();return false;">
    <p>
        <label>Tapez une chaîne de caractères :
        <input id="chaine" size="30" required="required" />
        </label>
    </p>
    <p>
        <label>Tapez un caractère :
        <input id="caractere" size="1" required="required" maxlength="1" autocomplete="off" />
        </label>
        <input type="submit" value="Afficher la position du caractère" />
        <input type="reset" value="Effacer" />
    </p>
</form>

<script>

function positionCaractere(){
    var maChaine = document.getElementById("chaine").value;
    var caractere = document.getElementById("caractere").value;
    var position = maChaine.indexOf(caractere);

    if (position > -1) {
        alert("Position du caractère '" + caractere +"' = " + position);
    }
    else{
        alert("Le caractère '" + caractere + "' ne se trouve pas dans la chaîne.")
    }
}

</script>

Rappels : Ne pas oublier l'accolade de fermeture de la fonction.
Ne pas oublier que le nom d'une variable ne peut pas contenir de caractères accentués.

La position des caractères est la position du premier de ces caractères. 

<script>

function positionMot(){

    var phrase = document.getElementById("phrase").value;
    var mot = document.getElementById("mot").value;
    var position = phrase.indexOf(mot);

    if (position > -1) {
        alert("Position des caractères = " + position) 
    }
    else{
        alert("Cette suite de caractères ne se trouve pas dans la chaîne de caractères.");
    }
}

</script>

Lorsque l'instruction est unique, on peut ne pas mettre de point-virgule ( non-recommandé )

.lastIndexOf()

La méthode .lastIndexOf(), appliquée à une variable représentant un objet-String, retourne la position de la dernière occurrence de la chaîne recherchée passée en paramètre.

.replace()

La méthode .replace() retourne une nouvelle chaîne où une partie de la chaîne a été remplacée, une seule fois, par une autre chaîne. Si ce remplacement n'est pas possible, la chaîne retournée est la même; puisqu'aucun remplacement n'a été effectué, il n'y a pas eu de modification.

Ici, il faut passer deux paramètres à la méthode.
Le premier paramètre est la chaîne à remplacer.
Le second paramètre est la chaîne de remplacement. 

function remplacerCaractere(){
    var maChaine = document.getElementById("chaine2").value;
    var caractereARemplacer = document.getElementById("caractere2").value;
    var caractereDeRemplacement = document.getElementById("caractere2b").value;
    var nouvelleChaine = maChaine.replace(caractereARemplacer, caractereDeRemplacement);
    document.getElementById("chaine3").value = nouvelleChaine;
}

Convertir un nombre

N'oubliez pas qu'avant de faire des calculs dans le code,
il faut convertir le nombre fourni par l'utilisateur en nombre à l'américaine. 

function remplacerVirgule(){
    var maChaine = document.getElementById("chaine4").value;
    var nouvelleChaine = maChaine.replace(",",".");

    if (isNaN(nouvelleChaine)) {
        alert("Veuillez taper un nombre !");
        document.getElementById("chaine4").value = "";
        document.getElementById("chaine5").value = "";
    }
    else {
        document.getElementById("chaine5").value = nouvelleChaine;
    }
}

Lorsqu'une fonction ou méthode reçoit plusieurs paramètres, ils sont séparés par une virgule.

.substring()

La méthode .substring() retourne une sous-chaîne.

Le premier paramètre (indiceA) est la position du premier caractère à inclure.
Le second paramètre (indiceB), facultatif, est la position du premier caractère à exclure.

La position du premier caractère = 0. Celle du dernier = .length-1

  • Si indiceA est égal à indiceB, substring retournera une chaîne vide.
  • Si indiceB est omis, substring effectuera l'extraction des caractères jusqu'à la fin de la chaîne.
  • Si l'un des deux arguments est négatif ou vaut NaN, il sera traité comme 0.
  • Si l'un des deux arguments est plus grand que str.length, il sera traité comme str.length.
  • Si indiceA est supérieur à indiceB, la fonction substring() intervertira ces deux valeurs afin de les traiter comme si elles avaient été passées dans le bon ordre. Par exemple : str.substring(1, 0) == str.substring(0, 1). 

function extraire2() {

  let maChaine = document.getElementById("chaine21b").value;
  var indiceA = parseInt(document.getElementById("indiceA").value);
  var indiceB = document.getElementById("indiceB").value;
  if (indiceB!=""){
    indiceB=parseInt(indiceB)
    document.getElementById("chaine22b").value = maChaine.substring(indiceA,indiceB);
  }else{
    document.getElementById("chaine22b").value = maChaine.substring(indiceA);
  }

}

.split()

La méthode .split() retourne un tableau contenant des morceaux de la chaîne, séparés par une chaîne.

Il faut passer un paramètre à la méthode, la chaîne séparatrice (qui souvent n'est qu'un seul caractère tel que le point virgule, le trait d'union, ...). 

function split() {

  var maChaine = document.getElementById("chaine23").value;
  var chaineSeparatrice = document.getElementById("chaine24").value;
  var tab=maChaine.split(chaineSeparatrice);
  document.getElementById("chaine25").value = tab;

}

Plus d'informations