Liste des fonctions Javascript

Dans ce chapitre, vous allez trouver les fonctions Javascript utiles à la réalisation du projet de création d'une messagerie instantanée.

Afficher le résultats de vos tests dans la console du navigateur

Pour afficher des informations de développement dans votre console de développement il faut utiliser l'objet Console.log().
Ainsi, vous allez éviter d'utiliser l'instruction alert('message').
Pour cela, il faut utiliser la console de développement de votre navigateur pour consulter les messages et informations envoyés, sans les voir apparaitre à l'écran.

<script type="text/javascript">
    console.log('votre texte ici');
</script>

Lancer l’exécution des scripts JS quand la page html est chargée à 100%

Pour pouvoir modifier et consulter le DOM de votre page web, il faut être sûr que l'ensemble de votre code html soit disponible et donc chargé dans votre navigateur.
Nous allons donc utiliser une fonction Javascript qui va encadrer les commandes Javascript qui ne seront executées qu'une fois la page entièrement chargée dans le navigateur.

// Fonction qui execute du code javascript quand l'ensemble du DOM de la page est chargée dans le navigateur.
document.addEventListener('DOMContentLoaded', function(){ 
    //Ecrire ici vos commandes javascript
    //Les methodes (fonctions) peuvent être écrites à l'extérieur de cette fonction pour plus de lisibilité
    console.log('le document est chargé');
}, false);

Atteindre un élémenent du DOM

Pour atteindre un ou des élements du DOM et pouvoir le(s) manipuler, Javascript met à disposition des methodes.
Chaque élément du DOM correspond à un objet que Javascript va pouvoir récupérer pour parcourir et appliquer des methodes.

Il faut comprendre que chaque page web chargée dans un navigateur est contenue dans une interface Document.
Cette interface Document est le point d'entrée de l'arborescence du DOM de la page web et vous fournira de nombreuses méthodes et propriétés pour manipuler et tester le DOM. Pour invoquer une methode ou une propriété du DOM vous devez donc toujours appeler l'interface Document.

getElementById()

<div id="idBalise"> lorem ipsum </div>

document.getElementById("idBalise");

getElementsByClassName()

<div class="onglet"> menu 1 </div>
<div class="onglet"> menu 2 </div>
<div class="onglet"> menu 3 </div>

//recupération d'un tableau d'objet HtmlElement
var tabElements = document.getElementsByClassName("onglet");
//Parcours du tableau d'éléments
for(var i = 0; i < tabElements.length; i++){
tabElements[i].addEventListener('click',myAction); //Pour chaque élément on ajoute un écouteur d'évenement
}

getElementsByName()

<input type="text" name="prenom" value="Bruno">

document.getElementsByName("prenom");

getElementsByTagName()

<ul>
<li>lorem ipsum</li> 
<li>lorem ipsum</li>
</ul>

document.getElementsByTagName("li");

Lancer une commande Javascript lors d'un clique ou événement sur un élément html

Il peut être très pratique de détecter un clique sur un bouton, une sourie qui passe sur un élément ou une touche de clavier qui s'active pour ensuite executer une action.
Il faut pour cela utiliser la methode HTMLElement.addEventListener().

document.getElementById("idTag").addEventListener("click", myAction);
function myAction() {
 //ecrire votre action ici
}

Modifier le style et classe CSS d'un élément html.

Modifier un style avec l'objet style

Si vous souhaitez modifier le style d'un élément du DOM alors vous pouvez le faire à l'aide de l'objet style accessible depuis votre objet Element.

document.getElementById('text1').style.color='red'

Toutes les proprietés CSS sont accessibles en lecture et en ecriture via les proprietés de l'objet Style. Il faut juste savoir qu'en Javascript le nom des variables ne peuvent avoir de tiret '-'. Alors les proprietés CSS qui comportent un tiret '-' sont écrites en Lower Camel Case. Les tirets sont supprimés et chaque mot commence par une majuscule sauf pour le premier mot qui commence par une minuscule (font-weight devient fontWeight).

Supprimer et ajouter une classe CSS avec classList

add()

Ajoute les classes spécifiées. Si une classe est déjà assignée en attribut de cet élément, elle est ignorée.

var myElement = document.getElementById('idElement');
myElement.classList.add("anotherclass");

remove()

Supprime les classes spécifiées.

var myElement = document.getElementById('idElement');
myElement.classList.remove("foo");

toggle()

Si un seul argument est présent : change la présence d'une classe. Si la classe existe, on la supprime, sinon on ajoute la classe.
Si un second argument est présent : Si l'argument est à true (ex : 'i < 10'), on ajoute cette classe, si l'argument est à false, on la supprime.

var myElement = document.getElementById('idElement');
// si "visible" est défini, le supprimer, sinon, l'ajouter
myElement.classList.toggle("visible");
// ajouter/supprimer "visible", en fonction d'un test conditionnel, pour i inférieur à 10
myElement.classList.toggle("visible", i < 10 );

contains()

Vérifie si la classe spécifiée est présente dans la liste des classes attribuées à cet élément.

var myElement = document.getElementById('idElement');
var isContain = myElement.classList.contains("foo");

replace()

Remplace une classe par une autre.

var myElement = document.getElementById('idElement');
// remplacer la classe "foo" par la classe "bar"
myElement.classList.replace("foo", "bar");

Modifier le contenu d'un élément html.

Dans le projet, vous allez devoir modifier certains textes de la page que ce soit pour indiquer des erreurs de connexion, changer l'entête si on est connecté ou pas et surtout mettre à jour la zone qui contient les messages entre membres.

Plusieurs propriétés sont proposées par Javascript pour accéder au contenu d'un élément du DOM.

<div id='text1'> Modifier le <b>contenu</b> d'un <strong>élément html</strong></div>

HTMLElement.innerHTML

console.log(document.getElementById('text1').innerHTML);//Affiche le contenu de l'élément
document.getElementById('text1').innerHTML = '<b>mon nouveau texte</b>';//Remplace le texte avec balises html

HTMLElement.outerHTML

console.log(document.getElementById('text1').outerHTML);
document.getElementById('text1').outerHTML = '<div>nouvelle balise html</div>';

HTMLElement.textContent

console.log(document.getElementById('text1').textContent);//Affiche le contenu de l'élément
document.getElementById('text1').textContent = 'mon nouveau texte';//Remplace le texte sans balises html

HTMLElement.innerText

console.log(document.getElementById('text1').innerText);
document.getElementById('text1').innerText = 'mon nouveau texte';//Nouveau texte sans balises html

Ajouter le contenue d'une variable dans une chaine de caractères

let nom = "Alice";
let message = `Bonjour, ${nom} ! Comment vas-tu ?`;
console.log(message); // Affiche : Bonjour, Alice ! Comment vas-tu ?

Exécuter en boucle une fonction javascript

Dans votre projet de messagerie instantannée, il faudra vérifier régulièrement votre base de données pour récupérer les derniers messages. Comme on ne va pas demander à l'utilisateur d'appuyer sur un bouton toutes les 5 secondes pour vérifier si il y a de nouveaux messages, nous allons utiliser une méthode Javascript très pratique qui lance l'execution d'une fonction à intervalle régulier.

setInterval()

Cette methode à besoin de deux paramètres minimum.

• Le nom de la fonction à executer
• L'intervale de temps en milliseconde entre chaque execution (en option car par defaut c'est 10ms)
• Un liste de paramètres optionnel à passer à la fonction
• Syntaxe : setInterval(func, [delay,arg1,arg2...])

La methode va retourner un identifiant unique que vous pourrez utiliser pour stopper l'execution de l'interval en invoquant la methode clearInterval().

var intervalId = setInterval(maFonction, 1000); //appel de fonction sans paramètre
var intervalId2 = setInterval(maFonction2, 1000, 'param1','param2' );//appel de fonction avec paramètres

function maFonction()
{
 // Votre code ici
console.log('dans ma fonction');
}

function maFonction2(a, b)
{
 // Votre code ici
 // Parameters de la fonction.
 console.log(a);
 console.log(b);
}

setTimeout(stopFonction,5000);
setTimeout(stopFonction2,5000);

function stopFonction(){
    clearInterval(intervalId);
    console.log('arret de la fonction');
}
function stopFonction2(){
    clearInterval(intervalId2);
    console.log('arret de la fonction2');
}

Faire apparaître et disparaitre un élément html à l'écran

Créer un nouvel élément html dans le DOM

Il peut être interessant de pouvoir afficher de nouvelles balises html dans le DOM de la page. Pour faire apparaitre une popin par exemple ou d'autres messages d'informations et de notifications qui n'ont pas d'interet au chargement de la page.
Pour cela nous allons étudier la méthode createElement de l'objet document

document.createElement()

var newDiv = document.createElement("div"); //Création d'un nouvel élement
    newDiv.setAttribute("id", "divId"); //on peut y ajouter un identifiant
    newDiv.setAttribute("title", "Ajouter un titre à la balise si besoin"); //on peut y ajouter un 'title' ou 'name'...
    newDiv.classList.add('cssClassName');//On va lui affecter une classe CSS
    newDiv.innerHTML = 'Texte à mettre dans ma balise';//On ajoute un texte ou d'autres informations plus complexes
    document.body.appendChild(newDiv); //On affiche la nouvelle balise dans le DOM de la page
  

Supprimer un élément html dans le DOM

document.removeChild() & document.remove()

var newDiv = document.createElement("div"); //Création d'un nouvel élement
document.body.appendChild(newDiv); //On affiche la nouvelle balise dans le DOM de la page
document.body.removeChild(document.getElementById('divId')); //On supprime l'élément du DOM Html
ou
newDiv.remove();//On supprime aussi l'élément du DOM Html
newDiv.nextElementSibling.remove();//On supprime l'élément du même niveau juste après celui ciblé