Les base du javascript

INTRODUCTION

Le JavaScript est un langage du WEB inventé en 1995 par Brendan Eich. Il a été inventé dans le but de rendre les pages WEB interactive et dynamique. Il s’agit d’un langage interprété côté client. Son interpréteur est donc codé dans tous les navigateurs WEB. Avec l’arrivée du WEB 2.0 (pages riches et interactives), le JavaScript est devenu un langage incontournable dans la conception d’application WEB. Les interpréteurs de ce langage n’ont cessé d’être optimisés afin de rendre son exécution de plus en plus rapide. En 2009, l’arrivée de Node.js permet l’implémentation de code JavaScript côté serveur.

CONTEXTE

Le JavaScript se compose d’une suite d’instructions, issu de sa boite à outils, séparée par des « ; ».
Il peut se retrouver :

dans le fichier HTML dans les balises <script> … </script>,
dans un fichier comportant l’extension .js et appelé à l’aide de l’instruction <script src=’’nom_fichier.js’’></script>,
dans des pseudo-url : <a href=’’javascript :alert(‘Salut’)’’>…</a>,
pour finir, il peut être lié à des évènements : <body onload=’’alert(‘Salut’)’’></body>.

LE DOM

Le Document Objet Model représente l’interface visuelle d’un document afficher par le navigateur. C’est grâce à cette infrastructure et à l’aide du JavaScript que nous allons pouvoir interagir avec l’interface WEB, afficher, masquer, déplacer, ajouter, modifier voire supprimer des éléments (balises encore appelées éléments) de la page WEB. Le DOM se présente comme un arbre ayant pour racine l’élément windows qui représente la fenêtre du navigateur.
Les fonctions de base du JavaScript découlent de cet objet comme la fonction alert qui permet d’afficher une information à l’écran :

windows.alert("Salut")

alert("Salut")

dans le dernier cas il est implicite. L’objet document vient ensuite sous l’objet document et représente la balise <html>. Pour finir, nous avons deux feuilles associées à l’élément document : <head> et <body> et ainsi de suite. L’information textuelle présente dans les balises est considérée comme des nœuds de type #text

LES OUTILS PERMETTANT L’ACCÈS AUX DOM

Nous avons pour accéder aux éléments du DOM un ensemble de fonctions :

getElementById
Cette fonction permet d’accéder à un élément à partir de son id. Ex :
```
var  a=getElementByid("toto") ;
```
récupère l’objet dont l’identifiant est toto (<balise id="toto">…</balise> dans le document HTML)

getElementsByClassName
Cette fonction permet d’accéder à tous les éléments d'une même classe. Ex :

var x = document.getElementsByClassName("titi");

récupère une liste x :

x[0] ; // première balise de la classe : class="titi" du DOM rencontré

x[1] ; // deuxième balise de la classe : class="titi" du DOM rencontré

getElementByTagName
Cette fonction permet de récupérer toutes les fonctions qui sont de la même famille. Ex :
```
var a= getElementsByTagName("p") ;
```
récupère une liste a :
- ```
a[0] ; // première balise <p> du DOM rencontré
```
- ```
a[1] ; // deuxième balise <p> du DOM rencontré
```
- …
getElementsByName
Cette fonction permet de récupérer qui possède un attribut name que l’on a spécifié (depuis HTML5 name n’est disponible que dans les éléments de formulaire). Ex :
```
var a= getElementsByName ("toto") ;
```
récupère l’objet dont l’attribut name est toto (<input name="toto">…</input> dans le document HTML)
querySelector
Cette fonction permet de récupérer le premier élément représentant l’expression CSS passé en argument. Ex :
```
var a= querySelector("#toto") ;
```
récupère l'objet comportant l’identifiant "toto".

querySelectorAll
Cette fonction permet de récupérer la liste des éléments représentant l’expression CSS passée en argument. Ex :

var a= querySelector(".titi") ;

récupère une liste a :

a[0] ; // première balise ayant la classe : class="titi" du DOM rencontré

a[1] ; // deuxième balise ayant la classe : class="titi" du DOM rencontré

LES ATTRIBUTS

Chaque objet du DOM dispose de deux éléments : un attribut (ce que l’on retrouve au sein de la balise <balise attribut>…</balise>) et d’un contenu (ce que l’on retrouve entre les balises, du texte ou d’autres balises). Ces éléments peuvent être modifiés à l’aide des fonctions getAttribute et setAttribute. Ex :

<a href="google.com">Aller chez google</a>

<script>
alert(document.querySelector("a").getAttribute("href")) ; // affiche google.com
document.querySelector("a").setAttribute("href","https://google.fr") ;  //  remplace  le  lien  par google.fr
</script>

Ou plus simplement :

document.querySelector("a").href="https://google.gp" ; // remplace le lien par google.gp

NB : pour modifier la classe d’une balise, il faudra utiliser className. Ex :

document.querySelector("a").className="toto" ; // affecte la classe toto à la première balise de lien rencontrée.

NB : pour modifier l’attribut For d’une balise, il faudra utiliser htmlFor.

LE CONTENU

Pour récupérer le contenu d’une balise, on utilise la fonction innerHTML qui renvoie l’intégralité du contenu d’une balise sous forme de texte. Ex :

<div id="zone">Bonjour</div>

<script>
z=document.querySelector("#zone");
z.innerHTML="Au revoir"  //  remplace  le contenu par "Au revoir"
</script>

Pour récupérer juste de texte du contenu d’une balise, on utilise la fonction textContent.

<div id="zone1">Bonjour</div>
<div id="zone2">Au revoir</div>
<script>
z1=document.querySelector("#zone1");
z2=document.querySelector("#zone2");
z2.innerHTML=z1.textContent //  remplace le contenu de zone2 par le contenu de zone1
</script>

Vous pouvez copier ce code dans un page .html et le tester.

NOTION DE VARIABLE

Les variables en JavaScript sont faiblement typées. La variable est créée dès qu’on lui affecte une valeur. Ex :

variable = 50 ;

Cette variable sera créée alors dans l’objet windows et sera accessible de n’importe où dans le reste de votre code (à éviter pour prévenir tout conflit dans un contexte événementiel). variable = 50 ; est équivalent à windows.variable = 50 ;

Le type d’une variable dépend de la valeur qu’on lui affecte (entiers, réels, booléens (true ou false), chaine de caractères, tableaux, fonctions ou encore objets).

Le mot clé var permet de déclarer une variable de manière explicite. Dans le cadre des fonctions, cela permet de conserver son existence uniquement dans cette dernière.
Ex :

var a=50 ;

Si on souhaite obtenir une déclaration locale à un bloc, il faut utiliser le mot clé let.
Ex :

let a=50 ;

LES NOMBRES ET LES FONCTIONS MATHEMATIQUES

L’ensemble des fonctions mathématiques est disponible dans l’objet Math (Math.min(a,b) ; Math.max(a,b) ; Math.random() ; Math.floor(a) ; etc.). il peut être parfois utile d’obtenir une valeur à partir de chaine de caractères, parseInt() transforme une chaine en entier.
Ex :

<p id="demo"></p>

<script>
  var a = 'parseInt("10")='+parseInt("10") + "<br>";
  var b = 'parseInt("10.00")='+parseInt("10.00") + "<br>";
  var c = 'parseInt("10.33")='+parseInt("10.33") + "<br>";
  var d = 'parseInt("34 45 66")='+parseInt("34 45 66") + "<br>";
  var e = 'parseInt("   60   ")='+parseInt("   60   ") + "<br>";
  var f = 'parseInt("40 years")='+parseInt("40 years") + "<br>";
  var g = 'parseInt("He was 40")='+parseInt("He was 40") + "<br>";

  var h = 'parseInt("10", 10)='+ parseInt("10", 10)+ " en base 10<br>";
  var i = 'parseInt("010")='+parseInt("010")+ "<br>";
  var j = 'parseInt("110", 2)='+parseInt("110", 2)+ " convertit du binaire en décimal<br>";
  var k = 'parseInt("0x10")='+parseInt("0x10")+ " écriture hexadécimal<br>";
  var l = 'parseInt("10", 16)='+parseInt("10", 16)+ " convertit de hexadécimale en décimale<br>";

  var n = a + b + c + d + e + f + g + "<br>" + h + i + j + k +l;
  document.getElementById("demo").innerHTML = n;
</script>

Vous pouvez copier ce code dans un page .html et le tester.

tandis que parseFloat transforme une chaine en nombre cécimal.
Ex :

<p id="demo"></p>

<script>
  var a = 'parseFloat("10")='+parseFloat("10") + "<br>";
  var b = 'parseFloat("10.00")='+parseFloat("10.00") + "<br>";
  var c = 'parseFloat("10.33")='+parseFloat("10.33") + "<br>";
  var d = 'parseFloat("34 45 66")='+parseFloat("34 45 66") + "<br>";
  var e = 'parseFloat("   60   ")='+parseFloat("   60   ") + "<br>";
  var f = 'parseFloat("40 years")='+parseFloat("40 years") + "<br>";
  var g = 'parseFloat("He was 40")='+parseFloat("He was 40") + "<br>";
 
  var n = a + b + c + d + e + f + g
  document.getElementById("demo").innerHTML = n;
</script>

LES CHAINES DE CARACTERES

Les chaines de caractères sont délimitées par les symboles ‘’…’’ ou ‘…’. Une variable qui représente une chaine de caractères devient un objet muni d’un ensemble de propriétés et de fonctions :
Ex :

var a="Salut" ;

a.length ; //Retourne la longueur de la chaine

a.split("l") ; //Rentourne un tableau en découpant la chaine en fonction de la lettre "l"

a.indexOf("a") ; //Renvoie la position du premier "a" rencontré, peut être utilisé à partir d’un rang avec indexOf("element recherché",point de départ).
 
a.substr(debut,longueur) ; //Renvoie la sous-chaine de taille longueur et commençant à la position début.

a.toLowerCase() ; //Retourne la chaine en minuscule 

a.toUpperCase() ; //Retourne la chaine en majuscule 

a.trim() ; //supprime les espaces avant et après le contenu.

La concaténation entre deux chaines de caractère se réalise avec l’opérateur « + ».

LES TABLEAUX

Les tableaux (ou listes) sont des éléments dont le contenu est accessible à partir d’indice. Le contenu peut être de type différent au sein d’un tableau. Il est muni d’un ensemble de propriétés lors de sa création :

tab=new array("A","B","C") ;

tab[0]="A" ; tab[1]="B" ; tab[2]="C" ;

tab=["A","B","C"] ;

Liste de méthodes utiles pour les tableaux :

tab.length ; //Retourne le nombre d’éléments du tableau

tab.shift() ;//Supprime le premier élément du tableau et le retourne

tab.splice(position,nombre,"element1","element2") ;  //position  représente  la  position  où  on souhaite débuter la modification, nombre représente le nombre d’éléments que l’on souhaite supprimer et les autres données désignent ce qui doit être ajouté. Retourne la liste des éléments supprimés.

tab.pop() ; //Supprime le dernier élément du tableau et le retourne

tab.push("D") ; //Ajoute un élément en fin de liste

LES STRUCTURES DE CONTRÔLES

Les structures de contrôles de base sont les mêmes que l’on retrouve généralement dans les autres langages tels que Python.

Test conditionnel

if(condition1) {
	// code block
	}
else if(condition2) {
	// code block
	}
else{
	// code block
	}

Boucle finie

for(let i=debut ;i<fin ;i++) {
	// code block
	}

Boucle conditionnelle
```
while(condition) {
	// code block
	}
```

Disjonction de cas

switch(variable) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}

LES FONCTIONS

Une fonction est une suite d’instruction qui peut comporter en entrée des arguments et fournir en sortie des valeurs.
Ex :

function nom_de_ma_fonction(argument1,argument2,…){
	// code block
	Return resultat ;
	}

Elle est appelée via nom_de_ma_fonction(a,b,...) ;

Il y a d'autres façons de définir les fonctions en javascript. Voir sur w3schools.com.

INTERACTIONS AVEC L’UTILISATEUR

En JavaScript, la fonction prompt permet l’affichage d’un popup permettant de poser une question à l’utilisateur et d’attendre en retour sa réponse :
Ex :

var a=prompt("donner votre nom ?","prénom") ; // le 1er argument représente la demande et le 2nd la valeur par défaut.

Certaines interactions se réalisent par l’intermédiaire des formulaires. Dans ce contexte, un ensemble d’éléments permet cet échange :

code html:
```
<input  type="text"  name="toto"  />
```
fournit un champ de saisie accessible à partir du code javascript :
```
document.getElementsByName("toto")[i].value
```
code html :
```
<input type="password" name="mdp" /> 
```
fournit un champ de saisie dont on ne voit pas le contenu accessible à partir du code javascript :
```
document.getElementsByName("mdp")[i].value
```
code html :
```
<input type="email" name="mail" />
```
fournit un champ de saisie accessible à partir du code javascript :
```
document.getElementsByName("mail")[i].value
```
Les autres types : url, tel, number, range, color, date, week, month, datetime, search.

code html :

<input type="checkbox" name="choix" />

fournit une case à cocher accessible en javascript par

document.getElementsByName("choix")[i].checked // vaut true si coché et false sinon.

code html :

<input type="radio" name="choix" value="valeur1">texte 1<br>
<input type="radio" name="choix" value="valeur2">texte 2<br>

fournit un bouton radio accessible en javascript à partir de

document.getElementsByName("choix")[0].checked //vaut true si coché et false sinon
document.getElementsByName("choix")[1].checked //vaut true si coché et false sinon.

Ces choix ne peuvent pas être sélectionnés en même temps.

code html :

<textarea  name="champmultiligne"  ></textarea>

fournit un champ de saisie multilignes accessible en javascript à partir de

document.getElementsByName("champmultiligne").value

code html :

<select name="maliste">
  <option value="1">texte 1</option>
  <option value="2">texte 2</option>
</select>

fournit une liste dont le choix de l’utilisateur est accessible en javascript à partir de

document.getElementsByName("maliste").value

LES EVENEMENTS

Les événements permettront aux applications de réagir en fonction des diverses captations relevées au cours de sa vie. Appuie sur un bouton avec onclick, changement du contenu d’un champ de saisie avec onchange, ou si l’utilisateur est en train de faire un scroll dans un élément de l’interface onscroll. Dans ce contexte, on peut demander la réalisation d’une action lorsque ces événements sont détectés.

Il est possible de placer un événement dans l’interface de plusieurs manières :

Dans le code HTML de la manière suivante :

<button id="ok" onclick="alert('super')">OK</button>

Dans le code JAVASCRIPT de la manière suivante :

document.getElementById("ok").addEventListener("click", alert('super'));

Quelques évènements utilisables dans les balises html:

onchange : se produit lorsque l’élément spécifier change
onclick : se produit lorsque l’on clique sur l’élément spécifié
onmouseover : se produit au passage de la souris sur l’élément spécifié
onmouseout : se produit lorsque le curseur quitte l’élément spécifié
oninput : se produit lorsque la balise input est utilisée

Pour voir plus d'événements sur w3schools.com.

LES MINUTERIES

Le langage JavaScript dispose de deux types de minuteries :

Retardateur :
```
var retardateur=setTimeout("function()",délai) ;
```
la fonction function se lancera après un temps d'attente délai en millisecondes. Pour interrompre son lancement,on utilisera :
```
clearTimeout(retardateur);
```
Répétition à intervalle régulier :
```
var film=setInterval("function()",t) ;
```
la fonction function se lancera toutes les t millisecondes. Pour arrêter la séquence film on utilisera :
```
clearInterval(film);
```
.