Ceci est une ancienne révision du document !
As our CRUD (Create, Read, Update, Delete) continues, we are going to jump right on in. I want to show you how to use JavaScript itself before we rewrite the app with JQuery. Understanding the language is more important than how to use the libraries.
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
};
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) { var theElement = document.getElementById(id); return theElement; }; 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 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='ubuVersForm'>. We need to add just one more id to our HTML form. Our submit button should have an id of submit (‘ id='submit' ‘). Your form button should now look like this: <input type=“submit” name=“submit” id='submit' value=“Add” />.
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, 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.
Let’s start out by creating an if/else statement:
Handle form event if (argument) { do something
} else {
// do something else
};
If statements look very easy, but it’s also easy to lose track of what is going on, so commenting these heavily from the start is going to save you headaches down the road. I know I want to fall back on the old and reliable addEventListener, this (next page, top left) will then be in our else statement.
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.
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.
The above code pulls in the form element (as formElement) that you had tied to the event, checks if the browser allows for preventDefault, and does preventDefault if it does. The if statement is on one line in this case because it is such a simple check and run. You could put this on multiple lines, and add an else statement, and maybe console log, if it doesn’t allow preventElement. You could also add console logs to the if/else statement to attach the function to the submit event.
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.
The full code is on PasteBin at: http://pastebin.com/pV6RGmBg