This talk will cover JavaScript, the DOM, and jQuery as three separate subjects. Why? Because they are all interrelated.
- JavaScript goes by many names. The original was Mocha and LiveScript. The more politically correct modern name is ECMAScript, but that sounds like a skin disease, so we don't use it.
- Developed in 10 days in 1995 by Brendan Eich and Netscape.
- JavaScript is one of the most popular programming languages in the world. Learn it. JavaScript developers are in demand, and that's likely to continue.
- JavaScript runs in the browser, as well as on the server. Node.js is a popular way to run JavaScript on the server.
- JavaScript's goal in the browser is to enhance the web pages and/or deliver complete client-side applications. We will focus on the former.
Note: to open the Developer console:
- Firefox: Ctrl + Shift + K or Command + Option + K
- Chrome: Ctrl + Shift + J or Command + Option + J
Some examples of JavaScript in action:
- alert('hello world'); console.log('hello world'); - https://jsfiddle.net/ew3nf9je/1/
- Variables, arrays, objects. - https://jsfiddle.net/nc76ss68/
- Functions. Functions as objects. - https://jsfiddle.net/c7dhnftr/1/
- Closures. - https://jsfiddle.net/Lud2cLce/
- if/then/else, for loop - https://jsfiddle.net/ojvqrzek/1/
- Errors and try/catch mechanics - https://jsfiddle.net/xzevrkkq/1/
For further instruction try:
- JavaScript the Good Parts by Douglas Crockford, the book or the series of lectures - https://www.youtube.com/watch?v=JxAXlJEmNMg&list=PLEzQf147-uEpvTa1bHDNlxUL2klHUMHJu&index=2
- Mozilla Developer Network - https://developer.mozilla.org/en-US/Learn/JavaScript
- John Resig's (jQuery creator) Learning Advanced JavaScript - http://ejohn.org/apps/learn/. This is for when you feel pretty good about programming in it and want to become a true Jedi master.
- Never do anything with W3School
The Document Object Model, a.k.a. the DOM is a model for representing and interacting with HTML and XML-like documents. The DOM represents the elements of a document as "nodes", which are organized in a tree structure: aka DOM tree. The DOM provides a way to examine and manipulate the nodes: search them, read and write their properties, create nodes, remove nodes, move nodes within the tree, and respond to external changes to the DOM via "events":
What external changes can happen to the DOM? Two sources: JavaScript code (that you or someone else controls), and user interactions. Examples:
- Showing or hiding a piece of text on a timer.
- User clicking a button.
- Special case: AJAX events.
Theoretically, it is possible to use the DOM from JavaScript directly. Indeed this is what happens under the hood of all JavaScript libraries (such as jQuery). So why don't we do that?
- DOM implementations are inconsistent between browsers. Some are intentional, and some are just bugs fixed in the next version.
- DOM API (methods for manipulating the DOM) are old, verbose, and not helpful for a lot of common tasks.
- DOM API lacks certain basic features that everyone needs.
- DOM events API is a mess.
Examples:
- Finding an element by ID and highlighting it. - https://jsfiddle.net/pafj9znq/
- Finding all elements with a specific class, and highlighting them. - https://jsfiddle.net/ayak2okq/
- Binding an event handler to a button. - https://jsfiddle.net/dxyLtaxk/
jQuery is a mature library that smoothes out interactions with the DOM. It provides a unified interface for everything the DOM offers, and does it through a pleasant API. It also provides fixes for all manner of browser bugs under the hood, so you don't have to do it ever know they existed. jQuery is functional: you can chain different manipulations of the DOM together:
jQuery also includes a wrapper around AJAX methods, as well as a number of useful utility functions that plain JavaScript does not yet include. Examples of what jQuery can do:
- Finding an element by ID and highlighting it. - https://jsfiddle.net/5xtdmdao/
- Finding all elements with a specific class, and highlighting them. - https://jsfiddle.net/46h53m8k/1/
- Binding an event handler to a button. - https://jsfiddle.net/2x3nyomc/1/
- jQuery animations. - https://jsfiddle.net/gm37kdh2/1/
- Complex filtering (first, last, odd, attribute) - https://jsfiddle.net/gvhp2gqm/1/
- Creating new elements - https://jsfiddle.net/bwhg46s5/1/
- Moving elements in the DOM - https://jsfiddle.net/u8chs3y8/1/ and https://jsfiddle.net/qyqbbpyh/1/
- Extracting text/HTML from an element. - https://jsfiddle.net/syjtsm9t/2/
- AJAX example - https://jsfiddle.net/bbgsdnma/1/
jQuery is extensible. Anyone can create "plugins" for it by creating their own DOM manipulation functions and telling jQuery about them. There are lots of plugins available, of varying quality. There is also jQuery.UI which is a UI framework based on jQuery. It is generally not necessary for most web sites, but may be useful for web applications.
Further resources:
- jQuery API reference: http://api.jquery.com/
- jQuery learning center: https://learn.jquery.com/