Comment créer facilement un framework Javascript
Partie 2

Date de publication : 4 février 2010 , Date de mise à jour : 1 octobre 2010
Par
Teylor Feliz (AdmixWeb)
KalyParker (traduction)
I. Introduction
II. La navigation DOM partie 2
III. Méthodes supplémentaires pour le fun
IV. Conclusion
V. Remerciements
I. Introduction
La semaine dernière, j'ai parlé de l'importance du langage de programmation JavaScript, et comment il est devenu très populaire
parmi les programmeurs à cause de ses diverses fonctionnalités. Comme je l'ai précédemment mentionné, aujourd'hui les
programmeurs peuvent créer beaucoup plus facilement des applications Web avec JavaScript, c'est la raison pour laquelle on continue
à l'apprendre et à l'utiliser. La semaine dernière, j'ai également expliqué étape par étape la création de
notre propre framework JavaScript,
que j'ai appelé "VOZ". Dans le tutoriel de cette semaine, je vais le compléter à
partir du code de la semaine dernière. Je vais principalement l'étoffer un peu, en ajoutant des méthodes utiles
et d'autres méthodes supplémentaires un peu plus fun. Lisez la suite pour suivre l'évolution du framework ! N'hésitez pas à laisser vos
commentaires, et amusez-vous !
II. La navigation DOM partie 2
Dans la partie précédente de la série, nous avons présenté la méthode "$$.getById()", aujourd'hui nous allons créer
d'autres méthodes similaires pour utiliser DOM plus facilement. Ces techniques simples d'utilisation s'appelleront "getByName", "getByTag" et "getByClass".
Méthode "getByName"
La méthode "getByName" peut prendre plus d'un paramètre et permet d'obtenir tous les éléments ayant un nom spécifique.
getByName:function(){
var tempElems = [];
for(var i = 0;i<arguments.length;i++){
if(typeof arguments[i] === 'string'){
var e = document.getElementsByName(arguments[i]);
for(var j=0;j<e.length;j++){
tempElems.push(e[j]);
}
}
}
this.elems = tempElems;
return this;
},
|
Méthode "getByTag"
La méthode "getByTag" a la capacité de trouver tous les éléments ayant un nom de balise spécifique.
getByTag:function(){
var tempElems = [];
for(var i = 0;i<arguments.length;i++){
if(typeof arguments[i] === 'string'){
var e = document.getElementsByTagName(arguments[i]);
for(var j=0;j<e.length;j++){
tempElems.push(e[j]);
}
}
}
this.elems = tempElems;
return this;
},
|
Méthode "getByClass"
La méthode "getByClass" retourne tous les éléments ayant le nom de classe spécifié.
La recherche peut être filtrée dans la page entière ou sur un conteneur parent et sur un type de balise défini pas l'utilisateur.
getByClass:function(name,type,parent){
var tempElems = [];
var pattern = new RegExp("(^| )" + name + "( |$)");
var e = (parent || document).getElementsByTagName(type || '*')
for(var i=0;i<e.length;i++){
if(pattern.test(e[i].className)){
tempElems.push(e[i]);
}
}
this.elems = tempElems;
return this;
},
|
Méthode "checked"
Cette méthode coche ou décoche simplement les boutons radio ou les cases à cocher trouvés.
checked:function(bol){
for(var i=0;i<this.elems.length;i++){
if(this.elems[i].nodeName.toLowerCase()==='input' && (this.elems[i].getAttribute('type') == 'checkbox'
|| this.elems[i].getAttribute('type') == 'radio')){
this.elems[i].checked = bol;
}
}
return this;
},
|
III. Méthodes supplémentaires pour le fun
Méthode "even et odd"
La méthode "even" correspond aux éléments d'un tableau dont l'indice est pair. Par exemple 0, 2, 4, 6, 8, 10...
La méthode "odd" correspond aux éléments d'un tableau dont l'indice est impair. Par exemple 1, 3, 5, 7, 9...
even:function(){
var tempElems = [];
for(var i=0;i<this.elems.length;i+=2){
tempElems.push(this.elems[i]);
}
this.elems = tempElems;
return this;
},
odd:function(){
var tempElems = [];
for(var i=1;i<this.elems.length;i+=2){
tempElems.push(this.elems[i]);
}
this.elems = tempElems;
return this;
},
|
Méthode "setOpacity"
Les méthodes "setOpacity" affectent en pourcentage ou en valeur l'opacité voulue sur un élément.
setOpacity: function(level){
for(var i = 0;i<this.elems.length;i++){
if(this.elems[0].filters){
this.elems[i].style.filter='alpha(opacity='+level+')';
}
else{
this.elems[i].style.opacity=level/100;
}
}
return this;
},
|
IV. Conclusion
Exemple du framework JavaScript VOZ
Visitez le lien ci-dessus pour voir la deuxième partie de notre framework VOZ en action !
Aussi, attendez la troisième partie de cette série sur ce framework JavaScript, qui est en cours de rédaction.
J'espère que vous avez trouvé ce tutoriel amusant et facile à suivre !
N'hésitez pas à laisser vos commentaires, car comme toujours j'apprécie de recevoir les impressions d'autres amoureux du Web !
V. Remerciements
Je tiens ici à remercier l'équipe de Developpez.com pour ses relectures attentives et ses suggestions, et en particulier
Bovino et
Bérénice MAUREL.


Les sources présentées sur cette page sont libres de droits
et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation
constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ©
. Aucune reproduction,
même partielle, ne peut être faite de ce site et de l'ensemble de son contenu :
textes, documents, images, etc. sans l'autorisation expresse de l'auteur.
Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 €
de dommages et intérêts. Droits de diffusion permanents accordés à Developpez LLC.
Cette page est déposée.