| Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente |
| issue67:tutoriel_-_webdev_p._3 [2013/01/02 16:49] – auntiee | issue67:tutoriel_-_webdev_p._3 [2013/02/17 21:23] (Version actuelle) – fredphil91 |
|---|
| Notre CRUD (Create, Read, Update, Delete ou Créer, Lire, Modifier, Supprimer) se poursuit et nous allons cette fois sauter dedans à pieds joints. Je veux vous montrer comment utiliser JavaScript lui-même avant de réécrire l'application avec JQuery. Comprendre le langage est plus important que la façon d'utiliser les bibliothèques. | Notre CRUD (Create, Read, Update, Delete ou Créer, Lire, Modifier, Supprimer) se poursuit et nous allons cette fois sauter dedans à pieds joints. Je veux vous montrer comment utiliser JavaScript lui-même avant de réécrire l'application avec JQuery. Comprendre le langage est plus important que la façon d'utiliser les bibliothèques. |
| |
| L'une des premières fonctions que nous écrirons est vraiment très souvent utilisée. Vous pouvez même en fait vouloir la sauvegarder pour une utilisation future. La fonction doit regarder l'objet document, rechercher des identifiants, et retourner celui que vous recherchez. Tout d'abord, nous commençons par créer une fonction qui prend un argument, nous l'appellerons ge pour « get element ». Pour créer une fonction il suffit d'écrire : | L'une des premières fonctions que nous écrirons est vraiment très souvent utilisée. Vous pouvez même en fait vouloir la sauvegarder pour une utilisation future. La fonction doit regarder l'objet document, rechercher des identifiants et retourner celui que vous recherchez. Tout d'abord, nous commençons par créer une fonction qui prend un argument, nous l'appellerons ge pour « get element ». Pour créer une fonction il suffit d'écrire : |
| |
| function ge(id) { | function ge(id) { |
| Maintenant que nous avons une fonction, il faut écrire le code. Nous recherchons un identifiant dans le modèle d'objet document et l'objet document possède justement une fonction pour ça. Nous allons rapporter les résultats de cette fonction dans une variable et la retourner. | Maintenant que nous avons une fonction, il faut écrire le code. Nous recherchons un identifiant dans le modèle d'objet document et l'objet document possède justement une fonction pour ça. Nous allons rapporter les résultats de cette fonction dans une variable et la retourner. |
| |
| // Récupère un élément par son id dans le modèle d'objet document (DOM) | <nowiki>// Récupère un élément par son id dans le modèle d'objet document (DOM)</nowiki> |
| |
| function ge(id) { | function ge(id) { |
| So now that we have our form set, we can move back to the JavaScript. The JS contains in its first line an alert to tell us that our JS file is connected. This is pretty annoying when we are testing, so let’s change that to a console log—so we can see it if we want to, and forget about it if we don’t. Next, we create a variable that contains the form element we are going to be using and manipulating later; let’s call that ‘form’. Hint: we created a function to get elements by id a little earlier in this article.** | So now that we have our form set, we can move back to the JavaScript. The JS contains in its first line an alert to tell us that our JS file is connected. This is pretty annoying when we are testing, so let’s change that to a console log—so we can see it if we want to, and forget about it if we don’t. Next, we create a variable that contains the form element we are going to be using and manipulating later; let’s call that ‘form’. Hint: we created a function to get elements by id a little earlier in this article.** |
| |
| La ligne qui commence par // s'appelle un commentaire. Cette ligne sert à aider les codeurs à garder la trace de ce qui se passe dans leur code, et leur permet de laisser des notes pour d'autres personnes utilisant leur code. | La ligne qui commence par <nowiki>//</nowiki> s'appelle un commentaire. Cette ligne sert à aider les codeurs à garder la trace de ce qui se passe dans leur code, et leur permet de laisser des notes pour d'autres personnes utilisant leur code. |
| |
| La prochaine chose à faire est de traiter le formulaire lorsque le bouton Envoyer est enfoncé. Tout d'abord, nous devons donner un id au formulaire lui-même. Appelons-le « ubuVersFrom ». Alors maintenant, la balise « open form » (ouvrir formulaire) devrait ressembler à ceci : <form id='ubuVersForm'>. Nous devons juste ajouter un autre identifiant à notre formulaire HTML. Notre bouton Envoyer doit avoir un id d'envoi (« id='submit' »). Votre bouton de formulaire devrait maintenant ressembler à ceci : <input type="submit" name="submit" id='submit' value="Add" />. | La prochaine chose à faire est de traiter le formulaire lorsque le bouton Envoyer est enfoncé. Tout d'abord, nous devons donner un id au formulaire lui-même. Appelons-le « ubuVersFrom ». Alors maintenant, la balise « open form » (ouvrir formulaire) devrait ressembler à ceci : <form id='ubuVersForm'>. Nous devons juste ajouter un autre identifiant à notre formulaire HTML. Notre bouton Envoyer doit avoir un id d'envoi (« id='submit' »). Votre bouton de formulaire devrait maintenant ressembler à ceci : <input type="submit" name="submit" id='submit' value="Add" />. |
| Earlier, I had you create a variable that holds the form element. It should have looked something like this: var form = ge('ubuVersForm');. This is very useful now, because we can see if the browser let us look at what we can do, what it contains, etc. We are going to look for an attachEvent object within our form element (below). If the browser allows it, let's use it.** | Earlier, I had you create a variable that holds the form element. It should have looked something like this: var form = ge('ubuVersForm');. This is very useful now, because we can see if the browser let us look at what we can do, what it contains, etc. We are going to look for an attachEvent object within our form element (below). If the browser allows it, let's use it.** |
| |
| Les déclarations « if » ont l'air très faciles, mais il est également facile de perdre de vue ce qui se passe, alors les commenter lourdement dès le départ va vous faire économiser des maux de tête plus tard. Je sais que je m'en remettre à la vieille et fiable méthode addEventListener, ceci (page suivante, en haut à gauche) sera donc dans notre déclaration « else ». | Les déclarations « if » ont l'air très faciles, mais il est également facile de perdre de vue ce qui se passe, alors les commenter lourdement dès le départ va vous faire économiser des maux de tête plus tard. Je sais que je dois m'en remettre à la vieille et fiable méthode addEventListener, ceci (page suivante, en haut à gauche) sera donc dans notre déclaration « else ». |
| |
| Plus tôt, je vous ai fait créer une variable qui contient l'élément formulaire. Cela aurait dû ressembler à quelque chose comme ceci : var form = ge('ubuVersForm');. Ceci est très utile maintenant, parce que nous pouvons voir si le navigateur nous laisse voir ce que nous pouvons faire, ce qu'il contient, etc. Nous allons chercher un objet attachEvent dans notre élément de formulaire (ci-dessous). Si le navigateur le permet, nous allons l'utiliser. | Plus tôt, je vous ai fait créer une variable qui contient l'élément formulaire. Cela aurait dû ressembler à quelque chose comme ceci : var form = ge('ubuVersForm');. Ceci est très utile maintenant, parce que nous pouvons voir si le navigateur nous laisse voir ce que nous pouvons faire, ce qu'il contient, etc. Nous allons chercher un objet attachEvent dans notre élément de formulaire (ci-dessous). Si le navigateur le permet, nous allons l'utiliser. |
| Nous sommes presque prêts à tout essayer ; un seul problème subsiste. Nous devons écrire la fonction processForm. Cela n'a aucun sens de l'ajouter au bouton Envoyer si elle n'existe pas, pas vrai ? Commencez par créer une nouvelle fonction appelée processForm (en haut à droite) avec un argument et faites-lui retourner faux. Maintenant que vous avez une fonction, la première chose à faire est d'arrêter toutes les actions par défaut que le navigateur sait utiliser. Encore une fois, nous voulons faire ceci seulement si le navigateur le permet. Pour ce faire, nous utilisons un objet appelé preventDefault. | Nous sommes presque prêts à tout essayer ; un seul problème subsiste. Nous devons écrire la fonction processForm. Cela n'a aucun sens de l'ajouter au bouton Envoyer si elle n'existe pas, pas vrai ? Commencez par créer une nouvelle fonction appelée processForm (en haut à droite) avec un argument et faites-lui retourner faux. Maintenant que vous avez une fonction, la première chose à faire est d'arrêter toutes les actions par défaut que le navigateur sait utiliser. Encore une fois, nous voulons faire ceci seulement si le navigateur le permet. Pour ce faire, nous utilisons un objet appelé preventDefault. |
| |
| Le code ci-dessus récupère l'élément formulaire (comme formElement) que vous aviez lié à l'événement, vérifie si le navigateur permet d'utiliser preventDefault, et appelle preventDefault si c'est le cas. L'instruction if est sur une seule ligne dans ce cas, car il s'agit d'une simple vérification et exécution. Vous pourriez la mettre sur plusieurs lignes, et ajoutez une instruction else, et éventuellement une ligne d'affichage console, s'il ne permet pas preventElement. Vous pourriez également ajouter des affichages console dans l'instruction if/else pour attacher la fonction à l'événement Envoyer. | Le code ci-dessus récupère l'élément formulaire (comme formElement) que vous aviez lié à l'événement, vérifie si le navigateur permet d'utiliser preventDefault, et appelle preventDefault si c'est le cas. L'instruction if est sur une seule ligne dans ce cas, car il s'agit d'une simple vérification et exécution. Vous pourriez la mettre sur plusieurs lignes et ajouter une instruction else, et éventuellement une ligne d'affichage console, s'il ne permet pas preventElement. Vous pourriez également ajouter des affichages console dans l'instruction if/else pour attacher la fonction à l'événement Envoyer. |
| |
| **We covered quite a bit of stuff this month. The following is an update of how your code should look now. Thank you for following along, I would love to see what you guys have now, or questions/comments that you might have. Feel free to share via twitter @aliendev2 and/or hashtag #FCMWebDev. | **We covered quite a bit of stuff this month. The following is an update of how your code should look now. Thank you for following along, I would love to see what you guys have now, or questions/comments that you might have. Feel free to share via twitter @aliendev2 and/or hashtag #FCMWebDev. |
