This lesson covers:
Views are the interface to the document object model (DOM). This is how the browser renders each page, it takes html and turns it into a document. It also provides a low level interface to javascript to change the DOM.
You can find more details about the DOM interface here.
The interface is cumbersome, and historically was not consistent between browsers. There are now very well laid out standards for the DOM but you still want to make it easier on yourself to make edits. Some features you will be using a lot. Others you might not use at all. So each application you right should have a set of functions and objects that make interacting with the DOM easier.
jQuery is a great example of make the DOM easier to work with.
// native DOM interface
document.getElementById('content').getElementByClassName('wrap').classList.add('inner');
// jQuery
$('#content').find('.wrap').addClass('inner');
As you can see, using jQuery is much easier to read and is less to type. Even though the DOM interface is more explicit, in jQuery, the statement is just as clear.
The D3.js library is very similar to jQuery, except is focused on Scalable Vector Graphics (SVG). SVG is another node, similar to a div, but has a different way to handle layouts and different child nodes. It’s designed to render graphics.
Its good to know ahead of time what you want this app to do. How many buttons are you going to have? How are you going to arrange them.
If you know you will have a menu, you will get better performance by attaching only one event listener. Also, if you want to add to the menu, you will not have to reattach any new event listeners.
var menu = document.getElementById('menu');
menu.addEventListener('click',function(event) {
// find your element
var menuItem = event.target;
// tell your controller what happened
// this is an example
app.triggerEvent('click', 'menu', event.target, event);
}, false);
For more info on the addEventListner method click here.
This is a simple example, but its supposed to be. The controller, here is is called “app”, should worry about what happens after the event, the view should properly tell the controller what happened. Here, the controller object has a crazy trigger interface that takes the event name, the context, the element target, and the event object. Usually, the controller does not need to know this much info. You should really only send enough data for the controller to figure out what it needs to do.
TODO: write this section
the “FormData” object is relatively new, part of the changes included in HTML5, but it fixes one of fundemental bugs with the XMLHTTPRequest (these changes are often called XMLHTTPRequest2). With the FormData object you can now upload files in a clean way in javascript and AJAX without having to use iframes or flash.