Révisions partiel #1

JavaScript

Cibler un élément

getElementById()

Sélection par attribut HTML ID.

La méthode javascript getElementById() de l’objet Document permet de sélectionner une balise ayant un attribut id (je précise que la valeur de l’id doit être unique dans votre page HTML).

Exemple de code Javascript de getElementById() :

document.getElementById('monId')

La méthode javascript document.getElementById() retourne :

  • null, si pas de résultat.
  • Element, objet de type Element qui est l’objet récupéré. Si vous avez plusieurs id de même valeur, c’est le dernier trouvé qui est sélectionné, mais cela peut varier selon les navigateurs.

getElementsByName()

Sélection par attribut HTML NAME.

La méthode javascript getElementsByTagName() de l’objet Document ou Element permet de sélectionner une balise par son nom (tagName).
Exemple de code Javascript de getElementsByTagName() :

document.getElementsByTagName('SPAN');
elementOl.getElementsByTagName('LI');

Si vous utilisez la méthode javascript getElementsByTagName() de l’objet Document, alors la recherche se fera sur l’ensemble du document.
Si vous utilisez la méthode javascript getElementsByTagName() de l’objet Element, alors la recherche se fera sur l’ensemble des enfants de cet élément.

La méthode Javascript *.getElementsByTagName() retourne :

  • NodeList, liste des objets récupérés de type ElementNodeList.length renvoie le nombre d’éléments présents.

getElementsByTagName()

Sélection par nom de balise HTML

La méthode Javascript getElementsByName() de l’objet Document permet de sélectionner une balise par sa valeur d’attribut name.
Exemple de code Javascript de getElementsByName() :

document.getElementsByName('attribut-name');

Si vous utilisez la méthode javascript getElementsByName() de l’objet Document, alors la recherche se fera sur l’ensemble du document.

La méthode Javascript *.getElementsByName() retourne :

  • NodeList, liste des objets récupérés de type ElementNodeList.length renvoie le nombre d’éléments présents.

getElementsByClassName()

Sélecteur par identifiant présent dans attribut HTML CLASS.

La méthode Javascript getElementsByClassName() de l’objet Document ou Element permet de sélectionner une balise par un identifiant de class CSS contenu dans l’attribut HTML (class).
Exemple de code Javascript de getElementsByClassName() :

document.getElementsByClassName('MaClass')
elementUl.getElementsByClassName('item');

Si vous utilisez la méthode javascript getElementsByClassName() de l’objet Document, alors la recherche se fera sur l’ensemble du document.
Si vous utilisez la méthode javascript getElementsByClassName() de l’objet Element, alors la recherche se fera sur l’ensemble des enfants de cet élément.

La méthode Javascript *.getElementsByClassName() retourne :

  • NodeList, liste des objets récupérés de type ElementNodeList.length renvoie le nombre d’éléments présents.

querySelector() et querySelectorAll()

Sélecteurs par sélecteurs CSS.

La méthode Javascript querySelector() de l’objet Document ou Element permet de sélectionner une balise grâce à un sélecteur CSS.
Exemple de code Javascript de querySelector() :

document.querySelector('BODY > TABLE .MaClass');
elementTable.querySelector('.MaClass');

La méthode Javascript *.querySelector() retourne :

  • null, si pas de résultat.
  • Element, qui correspond au premier élément trouvé.

closest()

Sélecteur par sélecteurs CSS.

La méthode Javascript closest() de l’objet Element permet de sélectionner une balise parente la plus proche grâce à un sélecteur CSS.
Cependant selon le sélecteur, vous pouvez redescendre à partir du parent trouvé.
Exemple de code Javascript de closest() :

//Je trouve le parent ayant la classe .MonParent
element.closest('.MonParent');
//Je trouve le parent section.unClass et je redescends vers le premier span trouvé 
element.closest('section.unClass > span');
//Je trouve le parent section.unClass ou section.troisClass
element.closest('section.unClass, section.troisClass');

La méthode Javascript *.closest() retourne :

  • null, si pas de résultat (ou si l’élément n’est pas dans le DOM).
  • Element, qui correspond au premier élément parent trouvé.

Modifier un attribut

Tester la présence d’attributs

La méthode hasAttribute() de l’interface Element nous permet de tester la présence d’un attribut en particulier pour un élément. Cette méthode prend en argument le nom de l’attribut qu’on recherche et renvoie la valeur booléenne true si l’élément possède bien cet attribut ou false sinon.

Pour vérifier si un élément possède des attributs ou pas (quels qu’ils soient), on utilisera plutôt la méthode hasAttributes() de cette même interface. Cette méthode retourne à nouveau une valeur booléenne (true si l’élément possède au moins un attribut ou false si l’élément ne possède pas d’attribut).

let p1 = document.querySelector('p');
let vide = document.getElementById('vide');

//Si p1 possède des attributs, hasAttributes() renvoie true
if(p1.hasAttributes()){
    vide.textContent = 'p1 possède des attributs';
}

//Si p1 possède un attribut id, hasAttribute() renvoie true
if(p1.hasAttribute('id')){
    vide.textContent += ' dont un attribut id';
}

Récupérer la valeur ou le nom d’un attribut

La propriété attributes de l’interface Element renvoie la liste des attributs d’un (nœud) élément spécifié. La liste d’attributs est renvoyée sous la forme « clef / valeur ».

On va pouvoir récupérer les noms et valeurs de chaque attribue en utilisant une boucle for pour itérer dans cette liste et les propriétés name et value.

let p1 = document.querySelector('p');
let vide = document.getElementById('vide');

if(p1.hasAttributes()){
    let attP1 = p1.attributes; // Liste des attributs de p1
    vide.innerHTML = 'Liste des attributs de p1 : <br>'
    //La propriété length renvoie le nombre d'attributs
    for(let i = 0; i < attP1.length; i++){
        vide.innerHTML += attP1[i].name + ' = ' + attP1[i].value + '<br>';
    }
}

Pour ne récupérer que la valeur d’un attribut donné pour un élément, on utilisera plutôt la méthode getAttribute(). Cette méthode renvoie la valeur de l’attribut donné si celui-ci existe ou null ou la chaine de caractères vide dans le cas contraire.

let p1 = document.querySelector('p');
let valeur = p1.getAttribute(nom_de_l_attribut);

Changer la valeur d’un attribut

Pour ajouter un nouvel attribut ou changer la valeur d’un attribut existant pour un élément, nous allons cette fois-ci utiliser la méthode setAttribute() à laquelle on va passer en arguments le nom et la valeur de l’attribut à ajouter ou à modifier.

let p1 = document.querySelector('p');
p1.setAttribute('class', 'blue');

Supprimer un attribut

Pour supprimer un attribut d’un élément, nous allons pouvoir utiliser la méthode removeAttribute() de l’interface Element. Cette méthode va prendre en argument le nom de l’attribut à supprimer.

let p1 = document.querySelector('p');
p1.removeAttribute('class');

Modifier les styles d’un élément

Finalement, on va pouvoir modifier les styles d’un élément grâce à la propriété style de HTMLElement qui va nous permettre de définir les styles en ligne d’un élément (les styles vont être placés dans la balise ouvrante de l’élément directement).

Cette propriété retourne un objet à partir duquel on va pouvoir utiliser des propriétés JavaScript représentant les propriétés CSS. Ces propriétés respectent la norme lower camel case : elles doivent être écrites sans espace ni tiret, avec une majuscule au début de chaque mot sauf pour le premier : la propriété CSS background-color, par exemple, s’écrira backgroundColor.

let p1 = document.querySelector('p');
let p2 = document.getElementById('p2');

p1.style.color = 'crimson'; //Nuance de rouge
p1.style.fontSize = '20px';

p2.style.backgroundColor = 'orange';

Ajouter ou supprimer une classe CSS d’un élément

Pour supprimer la classe « test » vous pouvez utiliser classList :

var element = document.getElementById("test");
element.classList.remove("test");

Pour ajouter une nouvelle classe :

var element = document.getElementById("test");
element.classList.add("test2");

Modifier le contenu

Il existe plusieurs méthodes pour changer le contenu d’une balise en JavaScript.
Le plus simple est d’attribuer un ID à la balise.

<div id="test">contenu initial</div>

Pour effacer le contenu initial et le remplacer par un nouveau contenu on peut utiliser innerHTML.

var nouveau = "nouveau contenu";
document.getElementById('test').innerHTML = nouveau;

Pour ajouter le nouveau contenu à la suite du contenu initial on peut aussi utiliser innerHTML.

var nouveau = "nouveau contenu";
document.getElementById('test').innerHTML += nouveau;

Ajouter des éléments dans le DOM

Créer de nouveaux nœuds et les ajouter dans l’arborescence du DOM

On va pouvoir, en JavaScript, ajouter des éléments dans notre document. Pour cela, il va falloir procéder en deux étapes : on va déjà créer un nouveau nœud puis on va ensuite l’insérer à une certaine place dans le DOM.

Créer un nœud Element

Pour créer un nouvel élément HTML en JavaScript, nous pouvons utiliser la méthode createElement() de l’interface Document.

Cette méthode va prendre en argument le nom de l’élément HTML que l’on souhaite créer.

Pour insérer du texte dans notre nœud élément, on va pouvoir par exemple utiliser la propriété textContent.

Insérer un nœud dans le DOM

Il existe différentes méthodes qui nous permettent d’insérer des nœuds dans d’autres nœuds. La différence entre ces méthodes va souvent consister dans la position où le nœud va être inséré.

Nous pouvons déjà utiliser les méthodes prepend() et append() du mixin ParentNode. Ces deux méthodes vont respectivement nous permettre d’insérer un nœud ou du texte avant le premier enfant d’un certain nœud ou après le dernier enfant de ce nœud.

On peut également utiliser la méthode appendChild() de l’interface Node qui permet d’ajouter un nœud en tant que dernier enfant d’un nœud parent.

Les différences entre append() de ParentNode et appendChild() de Node sont les suivantes :

  • La méthode append() permet également d’ajouter directement une chaine de caractères tandis que appendChild() n’accepte que des objets de type Node ;
  • La méthode append() peut ajouter plusieurs nœuds et chaines de caractères au contraire de appendChild() qui ne peut ajouter qu’un nœud à la fois ;
  • La méthode append() n’a pas de valeur de retour, tandis que appendChild() retourne l’objet ajouté.

On peut encore utiliser la méthode insertBefore() de l’interface Node qui permet pour sa part d’insérer un nœud en tant qu’enfant d’un autre nœud juste avant un certain nœud enfant donné de ce parent.

Cette méthode va prendre en arguments le nœud à insérer et le nœud de référence c’est-à-dire le nœud juste avant lequel le nœud passé en premier argument doit être inséré.

let b = document.body;
let newP = document.createElement('p');
let newTexte = document.createTextNode('Texte écrit en JavaScript');

newP.textContent = 'Paragraphe créé et inséré grâce au JavaScript';

//Ajoute le paragraphe créé comme premier enfant de l'élément body
b.prepend(newP);

//Ajoute le texte créé comme dernier enfant de l'élément body
b.append(newTexte);

Ajouter un écouteur d’événements

La méthode à utiliser est addEventListener().

document.getElementById("myBtn").addEventListener("click", function(){ alert("Hello World!"); });
document.getElementById("myBtn").addEventListener("click", myFunction);

function myFunction() {
    alert ("Hello World!");
}

jQuery

Cibler un élément

La façon la plus simple de sélectionner des éléments HTML en jQuery va être d’utiliser des sélecteurs CSS. En effet, je vous rappelle ici que jQuery simplifie grandement la sélection d’éléments en supportant l’intégralité des sélecteurs CSS.

De plus, jQuery met également à notre disposition des “pseudo-sélecteurs” qui vont nous permettre de sélectionner précisément et simplement certains éléments spécifiques aux formulaires HTML.

On va notamment pouvoir sélectionner des éléments input en fonction de la valeur de leur attribut type grâce aux pseudo-sélecteurs jQuery :text:password:checkbox:radio:submit:file:image:button et :reset.

jQuery nous permet également de sélectionner certains éléments de formulaire en fonction de leur état. Pour cela, on utilisera les pseudo-sélecteurs :

  • :input pour cibler tous les éléments input, textarea, select et button ;
  • :checked pour cibler les éléments cochés ou sélectionnés pour des input type="checkbox", input type="radio" et des éléments de liste select ;
  • :selected pour cibler les éléments option sélectionnés dans une liste select ;
  • :disabled pour cibler les éléments input qui possèdent un attribut disabled ;
  • :enabled pour cibler tous les éléments qui ne possèdent pas d’attribut disabled.

Enfin, jQuery nous fournit également quelques méthodes qui vont nous permettre d’affiner nos sélections. On peut notamment ici citer les méthodes has()filter()not()first()last() et eq().

Modifier un attribut

Récupérer la valeur d’un attribut ou définir un attribut

On va pouvoir utiliser la méthode attr() pour récupérer la valeur d’un attribut, ajouter un attribut ou modifier la valeur d’un attribut déjà existant.

Pour récupérer la valeur d’un attribut, nous allons utiliser attr() en lui passant le nom de l’attribut dont on souhaite récupérer la valeur en argument. Cette méthode va alors agir comme un getter et retourner la valeur de l’attribut du premier élément de la notre sélection uniquement.

Pour mettre à jour la valeur d’un attribut ou pour définir un nouvel attribut, nous allons passer l’attribut en question en premier argument de attr() et sa (nouvelle) valeur associée en second argument. Si l’attribut existait déjà, sa valeur sera mise à jour. Si il n’existait pas, il sera ajouté à chaque élément de notre sélection.

$(document).ready(function(){
    //Retourne la valeur du premier id d'un paragraphe trouvé
    let pid = $("p").attr("id");

    //Affiche la valeur de l'id récupéré dans notre span id="valAttr"
    document.getElementById("valAttr").textContent = "Valeur du 1er id de p : " + pid;

    //Ajoute un attribut target à notre lien
    $("a").attr("target","_blank");
});

Les méthodes permettant de manipuler spécifiquement les attributs class

Finalement, jQuery met à notre disposition une série de méthodes qui vont nous permettre de manipuler spécifiquement les attributs class.

La méthode hasClass() va nous permettre de déterminer si au moins l’un des éléments d’une sélection possède un certain attribut class ou pas. On va devoir passer le nom de la classe qu’on recherche en argument de cette méthode. Elle renverra true si la classe est trouvée false dans le cas contraire.

La méthode addClass() nous permet d’ajouter une ou plusieurs classes à une sélection d’éléments. On va passer les classes à ajouter en argument.

La méthode removeClass(), au contraire, va nous permettre de supprimer une, plusieurs ou toutes les classes de chaque élément d’une sélection. Si on utilise cette méthode sans argument, toutes les classes des éléments de la sélection seront supprimées. Si on précise une ou plusieurs classes en argument, alors seules ces classes seront supprimées.

Finalement, la méthode toggleClass() va nous permettre d’ajouter une ou plusieurs classes à chaque élément d’une sélection si ces éléments ne possèdent pas ces classes ou au contraire de supprimer ces classes si les éléments les possèdent. “Toggle” signifie “basculer” ou “alterner” en français.

$(document).ready(function(){
    //Lors du clic sur le bouton #b1...
    $("#b1").click(function(){
    //Si #p3 ne possède pas de class="bleu", on en ajoute une
        if(!$("#p3").hasClass("bleu")){
            $("#p3").addClass("bleu");
        }
        $(".bleu").css("color", "blue");
    });
    
    //Lors du clic sur le bouton #b2...
    $("#b2").click(function(){
        $("div").toggleClass("cacher afficher");
        //On applique hide() aux éléments qui possèdent une class="cacher"
        $(".cacher").hide();
        //On applique show() aux éléments qui possèdent une class="afficher"
        $(".afficher").show();
    });
});

Modifier le contenu

La méthode html()

Définit ou renvoie le contenu des éléments sélectionnés selon si cette méthode est appelée avec ou sans argument.

Sans Argument

Si cette méthode est appelée sans argument, elle renvoie le contenu HTML de l’élément sélectionné.

<p id="titre">J'aime <strong>mon site de formation</strong>.</p>
$("#titre");//Sélectionne la balise mais ne fait rien.
alert($("#titre").html());//Affiche le contenu "J'aime mon site de formation "
Avec Argument

Permet de modifier le contenu de l’objet si on l’appelle avec comme premier argument une chaîne de caractères qui joue le rôle du contenu.

<p id="titre">J'aime <strong>mon site de formation</strong>.</p>
alert($("#titre").html('Je préfère lire à distance '));//Remplace le contenu "J'aime mon site de formation" par "Je préfère lire à distance "

La méthode text()

La méthode text() permet, de lire ou de modifier le contenu textuel des éléments auxquels elle est appliquée.

Si cette méthode est appelée sans argument, elle renvoie le contenu textuel de l’élément sélectionné.

Lorsque cette méthode est utilisée pour renvoyer du contenu, elle renvoie le contenu textuel de tous les éléments correspondants (le balisage HTML sera supprimé).

<p id="titre">J'aime <strong>mon site de formation</strong>.</p>
alert($("#titre").text());//Affiche le contenu "J'aime mon site de formation"

Lorsque cette méthode est utilisée pour définir le contenu, elle écrase le contenu de TOUS les éléments correspondants.

<p id="titre">J'aime <strong>mon site de formation</strong>.</p>
alert($("#titre").text('Je préfère lire à distance '));//Remplace le contenu "J'aime mon site de formation" par "Je préfère lire à distance "

Modifier les CSS

La méthode .css() de jQuery peut être utilisée avec les propriété CSS. Pour modifier une seule propriété CSS, la méthode utilise deux arguments: le premier est le nom de la propriété CSS souhaitée et le deuxième, est la nouvelle valeur.

$("p").css("background-color", "red");

Ajouter un écouteur d’événements

Méthode .on()

La méthode .on() attache un ou plusieurs gestionnaires d’événements sur les éléments sélectionnés et les éléments enfants. Elle permet d’écouter les éléments créés dynamiquement.

Vous pouvez retrouver la liste des événements à cette adresse : http://api.jquery.com/category/events/

$('.btn').on('click', function() {
    alert( $(this).text() );
});

L’association d’un gestionnaire à un événement peut aussi s’écrire de façon plus simple mais perd l’avantage d’écouter en permanence la page. Par exemple, si un bouton est créé à l’aide d’un script après que le DOM soit chargé, la méthode .click() ne fonctionnera pas.

$('.btn').click(function() {
    alert( $(this).text() );
});

Cacher / dévoiler

Afficher ou cacher un contenu instantanément avec show() et hide()

Les méthodes show() et hide() vont respectivement nous permettre d’afficher un contenu HTML caché ou de cacher un contenu HTML visible.

On va déjà pouvoir utiliser les méthodes show() et hide() sans argument, pour afficher ou cacher un élément instantanément très simplement.

Dans cette première utilisation qui est la plus basique les deux méthodes show() et hide() vont se contenter de jouer sur l’état de la propriété CSS display de l’élément HTML ciblé.

$(document).ready(function(){     
    //Dès qu'on clique sur #b1, on applique hide() au titre
    $("#b1").click(function(){
        $("h1").hide();
    });
    
    //Dès qu'on clique sur #b1, on applique show() au titre
    $("#b2").click(function(){
        $("h1").show();
    });
});

Afficher ou cacher un contenu progressivement avec show() et hide()

On va ensuite pouvoir passer trois arguments à nos méthodes show() et hide() (ainsi qu’à nos autres méthodes permettant de créer des effets).

Le premier argument va correspondre à la durée de l’animation. On va pouvoir préciser une durée soit sous forme d’un nombre correspondant au nombre de millisecondes que doit durer l’effet, soit en utilisant les mots clefs slow ou fast.

Pour information, slow correspond à 600ms et fast à une durée d’effet de 200ms. La durée par défaut de l’effet est de 400ms.

Le deuxième argument va correspondre à une fonction d’accélération. Le rôle d’une fonction d’accélération est de définir la vitesse de l’animation à différents moments de celle-ci. La fonction d’accélération par défaut est swing, mais on va également pouvoir passer la valeur linear afin que notre effet progresse à vitesse constante (de manière linéaire).

Enfin, le troisième argument va être une fonction de rappel qui ne sera exécuté qu’une fois l’effet terminé.

Lorsqu’on utilise tous ces arguments, hide() et show() deviennent de véritables méthodes d’animation et vont alors modifier progressivement les valeurs des propriétés widthheight et opacity en même temps pour l’élément ciblé.

Dans cette utilisation, les méthodes hide() et show() cumulent donc les effets de fondu et de slide.

Dès que les valeurs pour ces trois propriétés arrivent à 0, la propriété display reçoit la valeur none.

$(document).ready(function(){     
    $("#b1").click(function(){
        $("h1").hide(5000, "linear", function(){
            alert("Titre bien caché");
        });
    });
    
    $("#b2").click(function(){
        $("h1").show();
    });
});

Inverser l’état de visibilité d’un élément avec toggle()

La méthode toggle() va nous permettre d’inverser l’état de visibilité d’un élément HTML, c’est à dire de l’afficher si il est caché ou de le cacher si il est affiché.

Cette nouvelle méthode va pouvoir s’utiliser exactement comme les précédentes, soit sans argument soit avec les mêmes types d’arguments que show() et hide().

$(document).ready(function(){
    //Inverse l'état de visibilité de h1 lors d'un clic sur #b1     
    $("#b1").click(function(){
        $("h1").toggle();
    });
    
    //Inverse progressivement l'état de visibilité de h2 lors d'un 
    //clic sur #b2 en conservant la fonction d'accélération par défaut
    //et alert un message à la fin
    $("#b2").click(function(){
        $("h2").toggle(2000, function(){
            alert("Etat de visibilité changé");
        });
    });
});