Tutoriel sur Javascript, Vue.js, jQuery.js & Node.js

Des méthodes 'setter' et 'getter'

Vous savez qu'avec JavaScript traditionnel il est parfois délicat de récupérer / modifier la valeur d'un attribut / d'une propriété de style.
Pour ne prendre qu'un seul exemple la syntaxe simplifiée élément.style.propriété est efficace pour modifier la valeur mais déconseillée pour récupérer la valeur (utiliser plutôt la méthode getComputedStyle).
Avec jQuery c'est beaucoup plus simple ; une même méthode permet de récupérer OU de modifier un attribut / propriété / contenu.

Récupérer les valeurs des attributs/propriétés et les contenus

Thème

On veut via jQuery obtenir des informations sur certains éléments de la page
• valeurs de certaines propriétés de style
• valeurs de certains attributs
• contenus de certains éléments

Le code HTML

Notez l'élément H4 vide de contenu.

Le script

function frecup()
{
	var fond = $("h1").css("backgroundColor"); 
	var couleur = $("h1").css("color");
	var taille =$("h1").css("fontSize");
	var contenu = $("h1").html();
	var texte = $("h1").text();
	var source =$("img").attr("src"); 
	var alter = $("img").attr("alt"); 
	var infos = "Couleur de fond de H1 :" +fond + " couleur de texte de H1 :" + 
		couleur + " taille du texte de H1 " + taille;
	infos+= "
Contenu de H1 :" + contenu + " texte de la H1 :" + texte;
	infos+= "
Source de l'image :" + source + " texte alternatif  :" + alter; 
	$("#infos").html(infos);
}

Remarquez la technique pour produire le contenu de l'élément H4 identifié "infos".

Pour récupérer la valeur d'une propriété de style il faut utiliser la méthode css() avec un paramètre unique : le nom de la propriété CSS.
Il faut naturellement désigner la propriété de style avec la syntaxe JavaScript (on dit aussi "CamelCase" : suppression du tiret et la lettre qui suit le tiret supprimé est mise en majuscule.
On peut récupérer ainsi non seulement les valeurs des propriétés en ligne mais aussi celles définies dans une feuille de style interne voire dans une feuille de style externe.

Pour récupérer la valeur d'un attribut il suffit d'utiliser la méthode attr avec comme valeur le nom de l'attribut.
Attention ici il y a deux images. Donc en écrivant var chemin = $("img").attr("src") je récupère le chemin de la première image !
Si vous voulez récupérer des infos sur la deuxième image le sélecteur doit être :$("img:eq(1)"). La première image à l'indice 0, la deuxième l'indice 1, et ainsi de suite ...
Comme il n'y a que deux images dans la page, la deuxième est aussi la dernière. Donc pour la sélectionner on pourrait aussi écrire : $("img:last")

Pour récupérer le contenu d'un élément HTML il faut utiliser la méthode html sans passage de paramètre !
C'est l'équivalent de innerHTML en JavaScript traditionnel. Donc on récupère le texte et le balisage du noeud !
Si on veut récupérer uniquement le texte (sans le balisage HTML) il faut utiliser la méthode text().
Cette dernière méthode est donc l'équivalent de textContent en JS natif.

Le rendu du code dans un Iframe :

Exercice: modifier les valeurs des attributs

Thème

Nous voulons créer un script qui modifie la source et le texte alternatif des éléments IMG.

Le code HTML

Le script

function f1()
{
	$("img").attr("src", "../images/jolie_fille.jpg"); 
	$("img").attr("alt","joli nu"); 
}	
function f2()
{
	$("img").attr("src", "../images/burkini.jpg"); 
	$("img").attr("alt","burkini"); 
}	

On utilise la méthode attr() mais cette fois avec deux paramètres : nom de l'attribut et nouvelle valeur de celui-ci.

Le rendu

Manipuler les classes affectées à une collection d'éléments

Dans la section précédente vous avez vu qu'avec la méthode attr() on peut récupérer et modifier la valeur d'un attribut.
Cette même méthode permet d'ajouter de nouveaux attributs à un élément HTML, par exemple, ajouter l'attribut class ...
Mais il faut mieux utiliser la méthode toggleClass(nomClasse).
Cette méthode ajoute la classe précisée si elle n'est pas encore appliquée à l'élément HTML ou la supprime si elle est déjà associée au noeud. Il y a donc un effet bascule.

Thème

Dans la feuille de style interne trois classes sont définies : marine, barbie et gothique.
Chaque classe affecte une couleur au fond de la boîte, une couleur au texte et une couleur à la bordure si elle existe.

Lorsque vous cliquez sur le premier bouton vous appliquez ou retirez aux trois noeuds (section, h1, P) la classe "marine".
Lorsque vous cliquez sur le deuxième bouton vous appliquez ou retirez aux trois noeuds la classe "barbie".
etc.

Le code CSS & HTML de la page

Le script

	$("button:eq(0)").click(function() {$("section, h1, p").toggleClass("marine");	});
	$("button:eq(1)").click(function() {$("section, h1, p").toggleClass("barbie");	});
	$("button:eq(2)").click(function() {$("section, h1, p").toggleClass("gothique");});

Dans chacune des trois fonctions anonymes une instruction unique basée sur la méthode toggleClass.

Le rendu

Pour éviter un blocage retirer par exemple, la classe "barbie" avant d'appliquer la classe "gothique".
En d'autres termes, après avoir cliqué sur l'un des boutons recliquez sur le même.