issue67:tutoriel_-_webdev_p._3
Différences
Ci-dessous, les différences entre deux révisions de la page.
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/01 23:11] – fredphil91 | issue67:tutoriel_-_webdev_p._3 [2013/02/17 21:23] (Version actuelle) – fredphil91 | ||
---|---|---|---|
Ligne 3: | Ligne 3: | ||
One of the first functions we will write is going to be a very well used one. You might actually want to save this for future use. The function needs to look at the document object, search for ids, and return the one you are looking for. First, we start out by creating a function that takes one argument, we’ll call it ge for “get element”. To create a function you simply write: | One of the first functions we will write is going to be a very well used one. You might actually want to save this for future use. The function needs to look at the document object, search for ids, and return the one you are looking for. First, we start out by creating a function that takes one argument, we’ll call it ge for “get element”. To create a function you simply write: | ||
- | function ge(id) { | + | < |
// code here | // code here | ||
- | };** | + | };</ |
- | 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' | + | 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' |
- | L'une des premières fonctions que nous écrirons est vraiment très souvent utilisée. Vous pouvez même en fait la sauvegarder pour une utilisation future. La fonction doit regarder l' | + | L'une des premières fonctions que nous écrirons est vraiment très souvent utilisée. Vous pouvez même en fait vouloir |
function ge(id) { | function ge(id) { | ||
Ligne 21: | Ligne 21: | ||
**Now that we have a function, we need to write the code. We are searching the document object model for an id, which the document object has a function for. So let’s bring the results of that function into a variable and return it. | **Now that we have a function, we need to write the code. We are searching the document object model for an id, which the document object has a function for. So let’s bring the results of that function into a variable and return it. | ||
- | // gets an element by its id from the document object model (DOM) | + | < |
function ge(id) { | function ge(id) { | ||
Ligne 29: | Ligne 29: | ||
return theElement; | return theElement; | ||
- | };** | + | };</ |
- | Maintenant que nous avons une fonction, il faut écrire le code. Nous recherchons un identifiant dans le modèle d' | + | Maintenant que nous avons une fonction, il faut écrire le code. Nous recherchons un identifiant dans le modèle d' |
- | // Récupère un élément par son id dans le modèle d' | + | < |
function ge(id) { | function ge(id) { | ||
Ligne 43: | Ligne 43: | ||
}; | }; | ||
- | **The line that starts with // is called a comment. This line is to help coders keep track of what is going on in their code, and allow them to leave notes for other people using their code. | + | **The line that starts with < |
The next thing is that we need to handle the form when the submit button is pressed. First, we need to give an id to the form itself. Let’s call it “ubuVersFrom”. So now, the open form tag should look like this: <form id=' | The next thing is that we need to handle the form when the submit button is pressed. First, we need to give an id to the form itself. Let’s call it “ubuVersFrom”. So now, the open form tag should look like this: <form id=' | ||
Ligne 49: | Ligne 49: | ||
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' | + | La ligne qui commence par < |
- | La prochaine chose à faire est de traiter le formulaire lorsque le bouton Envoyer est pressé. Tout d' | + | La prochaine chose à faire est de traiter le formulaire lorsque le bouton Envoyer est enfoncé. Tout d' |
- | Alors maintenant que nous avons notre formulaire, nous pouvons revenir au JavaScript. Le JS contient sur la première ligne une alerte pour nous dire que notre fichier JS est connecté. C'est assez gênant quand nous testons, nous allons donc changer cela en un affichage dans la console - afin que nous puissions le voir si nous le voulons et l' | + | Bien, maintenant que nous avons notre formulaire, nous pouvons revenir au JavaScript. Le JS contient sur la première ligne une alerte pour nous dire que notre fichier JS est connecté. C'est assez gênant quand nous testons, nous allons donc changer cela en un affichage dans la console - afin que nous puissions le voir si nous le voulons et l' |
**So, coding is a lot like logical thinking. Think of how you would tell yourself what needs to happen. If the submit button is pressed, then do process the form. That means we are going to need to have something that attaches a function (let’s call it processForm) to the button. Browsers can be tricky, and there are a few different ways to code some things, and I want to show you good uses of if/else coding... so, we are going to link the function to the button two different ways, but only once. Sounds funny, but it will all make sense. | **So, coding is a lot like logical thinking. Think of how you would tell yourself what needs to happen. If the submit button is pressed, then do process the form. That means we are going to need to have something that attaches a function (let’s call it processForm) to the button. Browsers can be tricky, and there are a few different ways to code some things, and I want to show you good uses of if/else coding... so, we are going to link the function to the button two different ways, but only once. Sounds funny, but it will all make sense. | ||
Ligne 59: | Ligne 59: | ||
Let’s start out by creating an if/else statement: | Let’s start out by creating an if/else statement: | ||
- | // Handle form event | + | < |
if (argument) { | if (argument) { | ||
Ligne 69: | Ligne 69: | ||
// do something else | // do something else | ||
- | };** | + | };</ |
- | En fait, le codage est un peu comme la pensée logique. Pensez à comment vous pourriez vous expliquer à vous-mêmes | + | En fait, le codage est un peu comme la pensée logique. Pensez à comment vous pourriez vous expliquer à vous-même ce qui doit arriver. Si le bouton Envoyer est enfoncé, alors traiter le formulaire. Cela signifie que nous allons avoir besoin d' |
Commençons par créer une instruction if/else : | Commençons par créer une instruction if/else : | ||
Ligne 91: | Ligne 91: | ||
Earlier, I had you create a variable that holds the form element. It should have looked something like this: var form = ge(' | Earlier, I had you create a variable that holds the form element. It should have looked something like this: var form = ge(' | ||
- | Les déclarations « if » ont l'air très faciles, mais il est également facile de perdre | + | 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, |
- | Plus tôt, je vous ai fait créer une variable qui contient l' | + | Plus tôt, je vous ai fait créer une variable qui contient l' |
**We are almost ready to try everything out, only one problem now. We need to write the processForm function. No sense in adding it to the submit button if it doesn’t exist, right? Start by creating a new function called processForm (above right), with one argument, and make it return false. Now that you have a function, the first thing we want to happen is to stop all default actions the browser knows to take. Again, we only want to do this if the browser allows for it. To do this we use a object called preventDefault. | **We are almost ready to try everything out, only one problem now. We need to write the processForm function. No sense in adding it to the submit button if it doesn’t exist, right? Start by creating a new function called processForm (above right), with one argument, and make it return false. Now that you have a function, the first thing we want to happen is to stop all default actions the browser knows to take. Again, we only want to do this if the browser allows for it. To do this we use a object called preventDefault. | ||
Ligne 99: | Ligne 99: | ||
The above code pulls in the form element (as formElement) that you had tied to the event, checks if the browser allows for preventDefault, | The above code pulls in the form element (as formElement) that you had tied to the event, checks if the browser allows for preventDefault, | ||
- | Nous sommes presque prêts à tout essayer, un seul problème subsiste. Nous devons écrire la fonction processForm. | + | Nous sommes presque prêts à tout essayer |
- | Le code ci-dessus récupère l' | + | Le code ci-dessus récupère l' |
**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/ | **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/ | ||
Ligne 110: | Ligne 110: | ||
Le code complet est disponible sur Pastebin : http:// | Le code complet est disponible sur Pastebin : http:// | ||
- |
issue67/tutoriel_-_webdev_p._3.1357078288.txt.gz · Dernière modification : 2013/01/01 23:11 de fredphil91