?
I. Introduction▲
Dans Comment créer facilement un framework JavaScript - Partie 2, j'ai parlé de quelques méthodes de navigation DOM, comme les techniques « getByName », « getByTag » et « getByClass ». J'ai aussi expliqué comment créer d'autres méthodes supplémentaires juste pour le fun, telle que les fonctions « even » (pair), « odd » (Impair) et « SetOpacity ». Dans le tutoriel de cette semaine, je vais continuer cette série d'articles sur le framework JavaScript « VOZ » et continuer à ajouter de nouvelles méthodes au code de la partie 2. Je vais donc compléter un peu le framework en ajoutant des méthodes pour utiliser le JavaScript avant qu'une page ne soit chargée et d'autres techniques tout aussi utiles. Continuez à lire la suite pour suivre l'évolution du framework ! N'hésitez pas à laisser vos commentaires et amusez-vous !
II. Attendre jusqu'au chargement du DOM▲
Avant de continuer avec notre framework, nous devons parler du chargement des pages web. L'un des plus gros problèmes auquel un développeur peut être confronté est l'utilisation du JavaScript avant que la page ne soit complètement chargée. Dans de nombreuses applications web, le JavaScript entre en action après le chargement d'une page. C'est un gros problème, car l'application ne fait rien jusqu'à ce que tous les images et fichiers rattachés soient entièrement chargés. Pour expliquer ce phénomène, je vais utiliser un exemple.
Imaginons que nous ayons une page avec 20 images en miniatures pour présenter les produits d'une société. Imaginons que l'on utilise le JavaScript pour créer une popup sur chaque miniature pour que, lorsque l'on clique sur l'une d'elles l'image en taille réelle apparaisse. Le problème est que l'application ne marchera pas tant que tous les éléments ne seront pas chargés. Notre page peut ressembler à ça :
function popUpImagen(imagen){
... ici le code ...
}
window.onload = popUpImagen;Ce script attend que la page soit entièrement chargée pour commencer à lier les images en taille réelle aux miniatures. Si l'utilisateur à une connexion Internet lente, le script ne fonctionnera pas, tant que les tous les éléments de la page ne seront pas chargés.
Pour résoudre ce problème, nous pouvons créer une petite méthode pour vérifier la disponibilité du DOM. Dès que celui-ci est chargé, nous pouvons travailler avec.
// Vérification du chargement du DOM
// Callback est une fonction anonyme qui s'exécute dès que le DOM est prêt
domReady:function(callback){
var done = false; // Création d'une variable appelée done initialisée à false
// Vérifie toutes les 10 millisecondes si le document.body et le document.getElementById sont chargés
// S'ils sont disponibles, alors on change la valeur de done en true
var checkLoaded = setInterval(function(){ if(document.body && document.getElementById){done = true;}},10);
// Vérifie toutes les 10 millisecondes si done == true
// Si c'est le cas, alors on exécute la fonction callback
var checkInter = setInterval(function(){if(done){clearInterval(checkLoaded);clearInterval(checkInter);callback();}},10);
},Utilisez donc cette méthode pour exécuter une partie du code aussitôt que le DOM est disponible. Exemple :
$$.domReady(function(){
alert('Hello World');
});III. Modification de la fonction « setStyle() »▲
Maintenant, modifions la méthode setStyle() pour utiliser un objet en paramètre. Il est souvent difficile de se souvenir de l'ordre des paramètres d'une fonction. Utiliser un objet est très pratique, car nous n'avons plus à nous préoccuper de l'ordre des paramètres. De plus, ce sera plus simple pour organiser ce que nous faisons.
Exemple d'une fonction qui insère des données en AJAX.
// Utilisation de paramètres littéraux
function insertCustomer(prenom,nom,adresse,anniversaire,genre,telephone){
... ici le code ...
}Cela pourrait devenir pénible d'appeler cette fonction si nous ne nous souvenons pas de l'ordre des paramètres. Par exemple, nous pourrions utiliser la fonction comme ça :
insertCustomer('Teylor','Feliz','Mon adresse','Male','09/15/1978','555-555-5555');Nous recevons immédiatement une erreur, car nous envoyons le paramètre « genre » à la place de « anniversaire ». Une excellente façon d'éviter ce problème est de créer un objet et de le passer en paramètre de la fonction. De cette manière, nous devons juste connaître les noms des paramètres, plutôt que leur ordre d'envoi.
Exemple de l'appel de la même fonction lorsque l'on utilise un objet en paramètre :
insertCustomer({prenom:'Teylor', nom:'Feliz', genre:'Male',
telephone:'555-555-5555', anniversaire:'09/15/1978', adresse:'Mon adresse'});Pour utiliser cet objet dans la fonction, nous devons la modifier comme dans l'exemple suivant :
function insertClient(args){
// Un exemple d'utilisation de la fonction est args.nom
var prenom = args.prenom;
var nom = args.nom;
... ici le code ...
}Revenons sur la méthode « setStyle » et à présent modifions-la pour qu'elle prenne en paramètre un objet.
// Mise à jour de la méthode setStyle
// Maintenant le paramètre est un objet
// Utilisation : var mystyle ={color:'red',background:'black'};
// .setStyle(mystyle) ou alors nous pouvons passer l'objet directement lors de l'appel
// .setStyle({color:'red',background:'black'});
// Notez que le nom des styles utilisés sont les mêmes qu'en JavaScript.
// Par exemple : background-color en css donne backgroundColor en JavaScript, margin-left en css donne marginLeft en JavaScript, etc.
setStyle:function(objStyle){
for(var i = 0;i < this.elems.length;i++){// Parcours des éléments et ajout des styles
for(var k in objStyle){ // Parcours de l'Objet ObjStyle en utilisant la propriété nom comme nom de style
// et sa valeur comme valeur de style
// Par exemple : {top:20px} donnera elem.style.top = 20px;
this.elems[i].style[k] = objStyle[k];
}
}
return this; // Renvoie this dans l'ordre d'appel
},Cela aide à envoyer plus d'une propriété de style en même temps. Exemple :
$$.getById('myid').setStyle({color:'red',border:'1px solid blue'});IV. Méthodes set et get pour les éléments d'entrée▲
Les éléments d'entrée représentent la partie la plus importante d'une page Internet pour un développeur web, car c'est le seul moyen d'obtenir des informations de l'utilisateur pour interagir avec ceux-ci en arrière-plan. C'est pourquoi nous allons créer deux fonctions : l'une pour afficher les données dans les éléments de saisie et l'autre pour récupérer ces mêmes données.
// Renvoie la valeur d'un élément ou un tableau avec toutes les valeurs trouvées
// Cette fonction ne se chaine pas
getValue:function(){
var elemstemp = [];// Création d'un tableau temporaire pour sauvegarder les éléments trouvés
for(var i=0;i < this.elems.length;i++){// On parcourt tous les éléments pour vérifier leur valeur
if(this.elems[i].getAttribute('type') == 'checkbox' || this.elems[i].getAttribute('type') == 'radio'){
// Si l'élément du formulaire est un checkbox ou un bouton radio, on vérifie s'il est coché
// Si c'est le cas, on enregistre la valeur
if(this.elems[i].checked === true){
elemstemp.push(this.elems[i].value);
}
} else{
elemstemp.push(this.elems[i].value);
}
}
// elemstemp.push(if(this.elems[i].getAttribute)this.elems[i].value); // Ajout de la valeur dans le tableau temporaire
if(elemstemp.length === 1){ // Si le tableau temporaire a un seul élément, on renvoie uniquement cet élément
return elemstemp[0];
}
return elemstemp; // Sinon, on renvoie le tableau temporaire avec toutes les valeurs trouvées
},
// Mise à jour de la valeur pour les éléments trouvés
// Val est la valeur pour les éléments trouvés
setValue:function(val){
for(var i=0;i < this.elems.length;i++){ // On parcourt tous les éléments pour vérifier leur valeur
// Si l'élément du formulaire est un checkbox ou un bouton radio, on vérifie si val == elem.value
// Si c'est le cas, alors on coche l'élément
if(this.elems[i].getAttribute('type') == 'checkbox' || this.elems[i].getAttribute('type') == 'radio'){
if(this.elems[i].value === val){
this.elems[i].checked = true;
}
}
else{
this.elems[i].value = val; // Mise à jour de la valeur de l'élément
}
}
return this;// Renvoie this dans l'ordre d'appel
},V. Effets amusants : « fadeIn() » et « fadeOut() »▲
On s'attend à trouver dans un Framework JavaScript de superbes effets comme en DHTML, nous allons donc créer des méthodes pour faire apparaître ou disparaître des éléments en fondu. Mais, avant ça, nous devons créer un objet d'aide (helper) appelé « Helpers ». L'objet d'aide va contenir les méthodes clés de nos fonctions d'effets. On ajoutera en plus quelques méthodes AJAX dont nous aurons besoin dans le chapitre suivant. Le code est bien commenté, je ne m'étendrai donc pas plus sur le sujet.
La méthode d'aide est :
var Helpers={
// Méthode pour définir l'opacité d'un élément
// C'est presque le même que la méthode setOpacity()
// elem est l'élément sur lequel on va modifier l'opacité
// Niveau d'opacité souhaité, en pourcentage : les valeurs sont entre 0 et 100
setOpa:function(elem,level){
if(level>=0 && level< =100){// La valeur de l'opacité doit être entre 0 et 100
elem.style.opacity = (level/100); // On définit l'opacité pour Firefox, Safari, Opera, Chrome,etc.
elem.style.filter = 'alpha(opacity='+level+')'; // On définit l'opacity pour IE :(
}
},
// Méthode pour créer l'effet de disparition avec fondu
// Utilisation de la méthode setOpa
// elem est l'élément sur lequel on va modifier l'opacité
// time est la durée de l'effet
fadeOut:function(elem,time){
var level = 100; // Définit le niveau à 100
var interval = setInterval(function(){ // On crée un intervalle en utilisant la méthode setOpa
Helpers.setOpa(elem,--level); // On utilise la méthode setOpa pour décrémenter le niveau de 1
if(level==0){ // Si le niveau a pour valeur 0, alors on stoppe l'intervalle
clearInterval(interval);
}
},time/100);
},
// Méthode pour créer l'effet d'apparition avec fondu
// Utilisation de la méthode setOpa
// elem est l'élément sur lequel on va modifier l'opacité
// time est la durée de l'effet
fadeIn:function(elem,time){
var level = 0;// Définit le niveau à 0
var interval = setInterval(function(){// On crée un intervalle en utilisant la méthode setOpa
Helpers.setOpa(elem,++level); // On utilise la méthode setOpa pour incrémenter le niveau de 1
if(level==100){// Si le niveau a pour valeur 100, alors on stoppe l'intervalle
clearInterval(interval);
}
},time/100);
}
}Ajoutons maintenant les méthodes « fadeIn » et « fadeOut » dans le framework « VOZ ».
// Méthode de disparition avec fondu
// Utilisation de l'objet Helpers
// time est en millisecondes par exemple 8 secondes = 8000
fadeOut:function(time){
for(var i=0; i < this.elems.length;i++){// Parcours des éléments et exécution de la fonction fadeOut du helpers
Helpers.fadeOut(this.elems[i],time)
}
return this;// Renvoie this dans l'ordre d'appel
},
// Méthode d'apparition avec fondu
// Utilisation de l'objet Helpers
// time est en millisecondes par exemple 8 secondes = 8000
fadeIn:function(time){
for(var i=0; i < this.elems.length;i++){
Helpers.fadeIn(this.elems[i],time)
}
return this;// Renvoie this dans l'ordre d'appel
},VI. Conclusion▲
Exemple du framework JavaScript VOZ partie 3
Comme dans les parties 1 et 2, j'ai fait une page qui vous montre en action la partie 3 du framework JavaScript « VOZ », visitez le lien ci-dessus. Aussi, dans la quatrième partie de cette série sur le framework JavaScript VOZ, nous créerons d'autres méthodes AJAX et je vous montrerai comment les utiliser. Comme toujours, j'espère que vous avez trouvé ce tutoriel amusant et facile à suivre ! N'hésitez pas à laisser vos commentaires.
VII. Remerciements▲
Je tiens ici à remercier l'équipe de Developpez.com pour ses relectures attentives et ses suggestions, et en particulier Bovino et Jacques THERY.