Share
Au cours des dernières années, la popularité de JavaScript a gagné en popularité, en partie grâce aux bibliothèques développées pour faciliter la création d'applications / d'effets JavaScript pour ceux qui n'ont peut-être pas encore maîtrisé le langage de base..
Alors que par le passé, il était courant de dire que JavaScript était un langage de base et qu’il s’agissait d’un «coup de foudre» sans fondement réel; ce n'est plus le cas, surtout avec l'introduction d'applications Web à grande échelle et d'adaptations telles que JSON (JavaScript Object Notation).
JavaScript peut avoir tout ce qu'une langue orientée objet a à offrir, mais avec quelques efforts supplémentaires en dehors du cadre de cet article.
function monObjet () ;
Félicitations, vous venez de créer un objet. Il existe deux manières de créer un objet JavaScript: il s'agit des "fonctions du constructeur" et de la "notation littérale". Celle ci-dessus est une fonction constructeur, je vais expliquer la différence prochainement, mais auparavant, voici à quoi ressemble une définition d’objet en utilisant la notation littérale.
var myObject = ;
Literal est une option recommandée pour l'espacement des noms afin que votre code JavaScript n'interfère pas (ou vice versa) avec d'autres scripts s'exécutant sur la page, ainsi que si vous utilisez cet objet en tant qu'objet unique ne nécessitant pas plus d'une instance de la object, tandis que la notation du type de fonction constructeur est préférable si vous devez effectuer un travail initial avant la création de l'objet ou si vous avez besoin de plusieurs instances de l'objet, chaque instance pouvant être modifiée au cours de la durée de vie du script. Continuons à construire simultanément sur nos deux objets pour pouvoir observer les différences..
Accentsconagua
function myObject () this.iAm = 'un objet'; this.whatAmI = function () alert ('Je suis' + this.iAm); ; ; var myObject = iAm: 'un objet', whatAmI: function () alert ('Je suis' + this.iAm); Pour chacun des objets, nous avons créé une propriété 'iAm' qui contient une valeur de chaîne utilisée dans notre méthode d'objets 'whatAmI' qui alerte un message..
Les propriétés sont des variables créées dans un objet et les méthodes sont des fonctions créées dans un objet..
Le moment est probablement idéal pour expliquer comment utiliser les propriétés et les méthodes (vous l’auriez déjà fait si vous connaissez une bibliothèque)..
Pour utiliser une propriété d’abord, vous devez taper à quel objet il appartient - c’est-à-dire, dans ce cas, il s’agit de myObject - puis, pour référencer ses propriétés internes, vous devez mettre un arrêt complet puis le nom de la propriété afin qu’elle ressemble finalement à myObject.iAm ( cela retournera 'un objet').
Pour les méthodes, il en est de même sauf que pour exécuter la méthode, comme pour toute fonction, vous devez mettre une parenthèse après celle-ci; sinon, vous retournerez simplement une référence à la fonction et non ce que la fonction renvoie réellement. Cela ressemblera donc à myObject.whatAmI () (cela alertera 'Je suis un objet').
Il existe également une différence entre la manière dont ces deux types de déclarations d'objet sont utilisés..
Pour utiliser un objet noté littéralement, il vous suffit de le référencer avec son nom de variable. Vous pouvez donc l'appeler en le saisissant chaque fois que vous le souhaitez.
myObject.whatAmI ();
Avec les fonctions constructeur, vous devez d'abord instancier (créer une nouvelle instance de) l'objet; vous faites cela en tapant;
var myNewObject = new myObject (); myNewObject.whatAmI ();
Utilisons notre fonction constructeur précédente et construisons-la pour qu'elle effectue certaines opérations de base (mais dynamiques) lors de son instanciation..
function myObject () this.iAm = 'un objet'; this.whatAmI = function () alert ('Je suis' + this.iAm); ; ; Comme toute fonction JavaScript, nous pouvons utiliser des arguments avec notre fonction constructeur;
function monObjet (quoi) this.iAm = quoi; this.whatAmI = function (language) alert ('Je suis' + this.iAm + 'du' + language + 'language'); ; ; Maintenant, instancions notre objet et appelons sa méthode whatAmI en remplissant les champs obligatoires comme nous le faisons.
var myNewObject = new myObject ('un objet'); myNewObject.whatAmI ('JavaScript'); Cela alertera "Je suis un objet du langage JavaScript."
J'ai mentionné précédemment les différences entre les constructeurs d'objet et les littéraux d'objet et le fait que toute modification apportée à un littéral d'objet affecte cet objet dans l'ensemble du script, tandis qu'une fonction de constructeur est instanciée et qu'une modification est apportée à cette instance, elle n'affectera aucune autre instance de cet objet. Essayons un exemple.
Nous allons d’abord créer un littéral Object;
var myObjectLiteral = myProperty: 'ceci est une propriété' // alert current myProperty alert (myObjectLiteral.myProperty); // ceci alertera 'ceci est une propriété' // change myProperty myObjectLiteral.myProperty = 'ceci est une nouvelle propriété'; // alert current myProperty alert (myObjectLiteral.myProperty); // this va alerter 'ceci est une nouvelle propriété', comme prévu
Même si vous créez une nouvelle variable et que vous la dirigez vers l'objet, cela aura le même effet.
var myObjectLiteral = myProperty: 'ceci est une propriété' // alert current myProperty alert (myObjectLiteral.myProperty); // this alertera 'ceci est une propriété' // définit une nouvelle variable avec un objet comme valeur var sameObject = myObjectLiteral; // change myProperty myObjectLiteral.myProperty = 'c'est une nouvelle propriété'; // alert current myProperty alert (sameObject.myProperty); // cela va toujours alerter 'ceci est une nouvelle propriété'
Essayons maintenant un exercice similaire avec une fonction constructeur.
// c'est une autre façon de créer une fonction constructeur var myObjectConstructor = function () this.myProperty = 'c'est une propriété' // instanciez notre constructeur var constructorOne = new myObjectConstructor (); // instancie une seconde instance de notre constructeur var constructorTwo = new myObjectConstructor (); // alert myProperty actuel de l'instance constructorOne alert (constructorOne.myProperty); // this alertera 'ceci est une propriété' // alert alerta myProperty actuel de constructorTwo instance alert (constructorTwo.myProperty); // cela va alerter 'ceci est une propriété'
Donc, comme prévu, les deux renvoient la valeur correcte, mais changeons myProperty pour l'une des instances..
// c'est une autre façon de créer une fonction constructeur var myObjectConstructor = function () this.myProperty = 'c'est une propriété' // instanciez notre constructeur var constructorOne = new myObjectConstructor (); // change myProperty de la première instance constructorOne.myProperty = 'c'est une nouvelle propriété'; // instancie une seconde instance de notre constructeur var constructorTwo = new myObjectConstructor (); // alert myProperty actuel de l'instance constructorOne alert (constructorOne.myProperty); // ceci alertera 'ceci est une nouvelle propriété' // alertera myProperty actuel de constructorTwo instance alert (constructorTwo.myProperty); // ceci alertera toujours 'ceci est une propriété'
Comme vous pouvez le constater à partir de cet exemple, même si nous avons modifié la propriété de constructorOne, cela n'a pas affecté myObjectConstructor et n'a donc pas affecté constructorTwo. Même si constructorTwo a été instancié avant la modification de la propriété myProperty de constructorOne, cela n'affectera toujours pas la propriété myProperty de constructorTwo car il s'agit d'une instance complètement différente de l'objet dans la mémoire de JavaScript..
Alors lequel devriez-vous utiliser? Cela dépend de la situation, si vous n'avez besoin que d'un seul objet de ce type pour votre script (comme vous le verrez dans notre exemple à la fin de cet article), utilisez un littéral d'objet, mais si vous avez besoin de plusieurs occurrences d'un objet , où chaque instance est indépendante de l'autre et peut avoir différentes propriétés ou méthodes en fonction de la manière dont elle est construite, utilisez une fonction constructeur.
Tout en expliquant les fonctions des constructeurs, il y avait beaucoup de mots-clés 'ce' qui étaient lancés et je pense que le meilleur moment pour parler de la portée!
Maintenant, vous vous demandez peut-être quelle est cette étendue dont vous parlez? La portée en JavaScript est basée sur les fonctions / objets, ce qui signifie que si vous êtes en dehors d'une fonction, vous ne pouvez pas utiliser une variable définie dans une fonction (sauf si vous utilisez une fermeture)..
Il existe cependant une chaîne d'étendue, ce qui signifie qu'une fonction dans une autre fonction peut accéder à une variable définie dans sa fonction parente. Jetons un coup d'oeil à un exemple de code.
Comme vous pouvez le voir dans cet exemple, var1 est défini dans l'objet global et est disponible pour toutes les fonctions et objets, var2 est défini dans function1 et est disponible pour function1 et function2, mais si vous essayez de le référencer à partir de l'objet global, l'erreur "var2 n'est pas définie" sera générée., var3 est uniquement accessible à function2.
Alors qu'est-ce que 'cette' référence? Dans un navigateur, "ceci" fait référence à l'objet window. Techniquement, la fenêtre est notre objet global. Si nous sommes à l'intérieur d'un objet, "ceci" fera référence à l'objet lui-même, mais si vous êtes à l'intérieur d'une fonction, cela fera quand même référence à l'objet window et de même si vous êtes à l'intérieur d'une méthode qui est dans un objet, " this 'fera référence à l'objet.
En raison de notre chaîne de champs d'application, si nous sommes dans un sous-objet (un objet dans un objet), "ceci" fera référence au sous-objet et non à l'objet parent..
Notez également que lorsque vous utilisez des fonctions telles que setInterval, setTimeout et eval, lorsque vous exécutez une fonction ou une méthode via l’une de ces méthodes, "this" fait référence à l’objet window car il s’agit de méthodes de window, donc setInterval ( ) et window.setInterval () sont identiques.
Ok, maintenant que tout est en ordre, faisons un exemple du monde réel et créons un objet de validation de formulaire!
Tout d'abord, je dois vous présenter la fonction addEvent que nous allons créer. Elle est une combinaison de la fonction addEventListener () d'ECMAScript (Firefox, Safari, etc.) et de la fonction attachEvent () de Microsoft ActiveX Script..
fonction addEvent (to, type, fn) if (document.addEventListener) to.addEventListener (type, fn, false); else if (document.attachEvent) to.attachEvent ('on' + type, fn); else to ['on' + type] = fn; ; Cela crée une nouvelle fonction avec trois arguments, à étant l'objet DOM auquel nous attachons l'événement, type étant le type d'événement et fn étant la fonction exécutée lorsque l'événement est déclenché. Il vérifie d’abord si addEventListener est pris en charge. Si tel est le cas, il vérifiera si attachEvent n’est pas attaché et si vous échouez, vous utilisez probablement IE5 ou quelque chose d’aussi obsolète. Nous allons donc ajouter l’événement directement à sa propriété event (note: la troisième option écrasera toute fonction existante ayant pu être attachée à la propriété d'événement, tandis que les deux premières l'ajouteront en tant que fonction supplémentaire à sa propriété d'événement).
Maintenant, configurons notre document pour qu'il ressemble à ce que vous pourriez voir lorsque vous développez des éléments jQuery..
En jQuery vous auriez;
$ (document) .ready (function () // tout notre code qui tourne après que la page soit prête va ici);
En utilisant notre fonction addEvent nous avons;
addEvent (window, 'load', function () // tout notre code qui tourne après que la page soit prête va ici);
Maintenant pour notre objet Form.
var Form = validClass: 'valid', fname: minLength: 1, maxLength: 15, nomChamp: 'Prénom', lname: minLength: 1, maxLength: 25, nomChamp: 'Nom', validateLength: function (formEl, type) if (formEl.value.length> type.maxLength || formEl.value.length < type.minLength ) formEl.className = formEl.className.replace("+Form.validClass,"); return false; else if(formEl.className.indexOf("+Form.validClass) == -1) formEl.className +="+Form.validClass; return true; , validateEmail : function(formEl) var regEx = /^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]2,9)$/; var emailTest = regEx.test(formEl.value); if (emailTest) if(formEl.className.indexOf("+Form.validClass) == -1) formEl.className +="+Form.validClass; return true; else formEl.className = formEl.className.replace("+Form.validClass,"); return false; , getSubmit : function(formID) var inputs = document.getElementById(formID).getElementsByTagName('input'); for(var i = 0; i < inputs.length; i++) if(inputs[i].type == 'submit') return inputs[i]; return false; ; Donc, ceci est assez basique mais peut facilement être développé.
Pour décomposer cela en premier, nous créons une nouvelle propriété qui est simplement le nom de chaîne de notre classe CSS «valide» qui, lorsqu'elle est appliquée au champ de formulaire, ajoute des effets valables tels qu'une bordure verte. Nous définissons également nos deux sous-objets, fname et lname, afin que nous puissions définir leurs propres propriétés qui peuvent être utilisées par des méthodes ailleurs, ces propriétés sont Longueur minimale quel est le nombre minimum de caractères que ces champs peuvent avoir, longueur maximale qui est le maximum de caractères que le champ peut avoir et nom de domaine qui ne s'utilise pas réellement, mais peut être récupéré pour des choses telles que l'identification du champ avec une chaîne conviviale dans un message d'erreur (par exemple, le champ 'Prénom est obligatoire.').
Ensuite, nous créons une méthode validateLength qui accepte deux arguments: formEl l'élément DOM à valider et le type qui fait référence à l’un des sous-objets à utiliser (c'est-à-dire fname ou lname). Cette fonction vérifie si la longueur du champ est comprise entre les plages minLength et maxLength. Si ce n'est pas le cas, nous retirons notre classe valide (si elle existe) de l'élément et renvoyons false, sinon, nous ajoutons la classe valide et renvoyons vrai.
Nous avons ensuite une méthode validateEmail qui accepte un élément DOM comme argument, puis testons cette valeur des éléments DOM par rapport à une expression régulière de type courrier électronique; encore une fois si cela passe nous ajoutons notre classe et retournons vrai et vice versa.
Enfin, nous avons une méthode getSubmit. Cette méthode reçoit l'identifiant du formulaire, puis parcourt tous les éléments en entrée du formulaire spécifié pour trouver celui qui possède un type de soumission (type = "submit"). La raison de cette méthode est de renvoyer le bouton d'envoi afin que nous puissions le désactiver jusqu'à ce que le formulaire soit prêt à être soumis..
Mettons cet objet validateur pour travailler sur une forme réelle. Nous avons d'abord besoin de notre HTML.
Nous allons maintenant accéder à ces objets d’entrée en utilisant JavaScript et les valider lorsque le formulaire sera soumis..
addEvent (window, 'load', function () var notreForm = document.getElementById ('notreForm'); var submit_button = Form.getSubmit ('notreForm'); submit_button.disabled = 'désactivé'; fonction checkForm () var input = notreForm.getElementsByTagName ('input'); if (Form.validateLength (entrées [0], Form.fname)) if (Form.validateLength (entrées [1], Form.lname)) if (Form.validateEmail (input [2])) submit_button.disabled = false; return true; submit_button.disabled = 'désactivé'; return false;; checkForm (); addEvent (ourForm, 'keyup', checkForm); addEvent ( ourForm, 'submit', checkForm);); Décomposons ce code.
Nous encapsulons notre code dans la fonction addEvent afin que, lorsque la fenêtre est chargée, ce script s'exécute. Tout d'abord, nous saisissons notre formulaire à l'aide de son identifiant et le plaçons dans une variable nommée notre forme, ensuite, nous saisissons notre bouton d'envoi (à l'aide de notre méthode getSubmit de l'objet Form) et le plaçons dans une variable nommée bouton de soumission, puis définissez l'attribut désactivé des boutons d'envoi sur 'désactivé'.
Nous définissons ensuite une fonction checkForm. Cela stocke toutes les entrées à l'intérieur du champ de formulaire sous forme de tableau et nous l'associons à une variable nommée… vous l'avez deviné… contributions! Ensuite, il définit des instructions if imbriquées qui testent chacun des champs du tableau input avec nos méthodes Form. C’est la raison pour laquelle nous avons retourné true ou false dans nos méthodes. Ainsi, si elle renvoie true, nous passons cette instruction if et continuons sur la suivante, mais si elle renvoie false, nous quittons les instructions if..
Après la définition de la fonction, nous exécutons la fonction checkForm lors du chargement initial de la page et la lions également à un événement keyup et à un événement submit.
Vous vous demandez peut-être pourquoi joindre en soumettant si nous désactivions le bouton d'envoi. Eh bien, si vous êtes concentré sur un champ de saisie et appuyez sur la touche Entrée, il tentera de soumettre le formulaire et nous devons le tester, d'où la raison pour laquelle notre fonction checkForm renvoie true (soumet le formulaire) ou false (ne soumet pas forme).
Nous avons donc appris à définir les différents types d’objets dans JavaScript et à y créer des propriétés et des méthodes. Nous avons également appris la fonction addEvent et avons utilisé notre objet dans un exemple de base du monde réel.
Ceci conclut les bases de l’orientation JavaScript des objets. Espérons que cela puisse vous aider à construire votre propre bibliothèque JavaScript! Si vous avez aimé cet article et êtes intéressé par d'autres sujets liés à JavaScript, postez-les dans les commentaires, car je serais heureux de continuer à les écrire. Merci d'avoir lu.
Pourquoi ne pas également consulter la gamme d'éléments JavaScript sur CodeCanyon. Vous pouvez trouver des scripts pour créer des curseurs, des comptes à rebours, des chargeurs et des téléchargeurs, etc..
Articles JavaScript populaires sur le marché Envato
