{"id":752,"date":"2012-10-05T16:36:45","date_gmt":"2012-10-05T16:36:45","guid":{"rendered":"http:\/\/a.parsons.edu\/~dejongo\/12-fall\/?p=752"},"modified":"2021-04-19T16:09:42","modified_gmt":"2021-04-19T16:09:42","slug":"12-javascriptjquery","status":"publish","type":"post","link":"https:\/\/b.parsons.edu\/~dejongo\/12-javascriptjquery\/","title":{"rendered":"11 JavaScript\/JQuery"},"content":{"rendered":"

If HTML is for content and CSS for presentation, than Javascript is for behavior. It really takes mastery of all three to become a web designer. It is, unfortunately, too much for this coures to tackle all three, so we merely touch on Javascript and give you some idea of how it works. If you want to learn more, try Kahn Academy <\/a> or Codecademy for Javascript<\/a> or Jquery<\/a>.\n<\/p>\n

Javascript goes as far back as the origin of the web. You will recall<\/a> that the web was inspired by Apple’s Hypercard, which had been implemented in a proto-web kind of way in the offices where the web was born. Well, hypercard had a scripting language called Hyperscript that inspired Javascript.\n<\/p>\n

Javascript transforms the content of web pages in much the same way as HyperScript transformed the content of the hypercard stacks. Javascript scripts are executed upon loading or by a user action, and do something to the content of the web page. Much of the added functionality on the web is due to Javascript.<\/p>\n

Where Javascript Enters the Picture<\/h2>\n<\/p>\n

When the browser requests content from the server, the document is fetched or constructed by server side scripting, crosses the HTTP divide, and arrives at the client (the browser). The browser then parses the content, starting with the header, and constructs the document, including the requests for additional resources such as the CSS stylesheet, JavaScript scripts, fonts, and images, and organizes all of it into the web page we are all familiar with. In the case of Ajax, additional material can be requested and received without flushing the existing page, allowing the page to be updated asynchronously.<\/p>\n

The DOM<\/h2>\n<\/p>\n

The browser processes, or parses the information, transforming the tags, attributes, content, etc., into nodes that form a tree according to the document object model, the DOM. See the demonstration<\/a>.\n<\/p>\n

\"HTML\n<\/p>\n

The browser attempts to heal any errors that come up as the document tree is constructed. Each browser does that in their own way, meaning that the tree structure of the document can be different from one browser to the next. Part of the HTML5 specification is to create a unified way for browsers to handle non-valid documents, making sure that all browsers create the same DOM for any given page.\n<\/p>\n

JavaScript manipulates the properties and the elements in the DOM as soon as the page is loaded, or afterwards, if triggered by the user. Slight variations in how the different browsers handle JavaScript create big problems, which may or may not be the same from browser to browser. You can imagine that it used to be a real pain to program JavaScript.\n<\/p>\n

This pain kept the more integrated Javascript implementations out of general usage, mostly relegating it to simple code snippets for much of its existence. The solution came with the development of cross browser JavaScript Libraries, which provide a simplified unified interface, or framework for implementing Javascript across the various browsers.\n<\/p>\n

There are well over 50 of such open source libraries, of which jQuery is but one. They all simplify the task of creating highly responsive web pages, abstracting away browser specific features that let designers concentrate on design and user interactivity.\n<\/p>\n

Then again, jQuery has won the hearts and minds of the web development community and has become ubiquitous since its release. It is the \u201cwrite less, do more\u201d library we all know and love.\n<\/p>\n

The browsers have cleaned up their act and support a uniform DOM implementation, these days. While this alone does not make jQuery superfluous, it is possible to make the case to write Javascript<\/a> instead of jQuery. If you wish to learn Javascript, you can read Eloquent Javascript<\/a> (pdf<\/a>) for free on the web. <\/p>\n

jQuery<\/h2>\n<\/p>\n

jQuery is one of the many JavaScript libraries created to ease JavaScript development. John Resig<\/a>, the person who created the library, originally wanted to call it jSelect but the url was already taken, so it became jQuery. One of the most important things that jQuery does is provide a more uniform and easier to access ability to select DOM elements, removing the problems caused by different Javascript implementations and DOM error resolution.\n<\/p>\n

jQuery is very flexible when it comes to selecting<\/a> DOM elements with the jQuery function, and it works similar to the way selectors do in CSS.\n<\/p>\n

In the same way that jQuery simplifies selecting DOM elements, it also makes manipulating the node objects much easier. It does not just return the DOM object but wraps each one of them with standard functions that make it really easy to manipulate them. You can show, toggle, hide, animate and otherwise<\/a> manipulate and attach events to these objects with ease. <\/p>\n

The Focus of jQuery<\/h2>\n<\/p>\n

From a slideshow<\/a> by John Resig:\n<\/p>\n

In a nutshell:<\/p>\n