 So in previous units, we talked about first JavaScript itself as a programming language, and then we also covered HTML, the document format used for webpages. And now in this unit, we're going to bring the two things together. We're going to talk about how in the browser you can use JavaScript code to inspect and manipulate the web page. Now what's called the DOM, the document object model, that's a standard for expressing documents as a big hierarchy of objects which can be inspected and manipulated by some programming language, in this case by JavaScript. Now in the DOM of a page, as we call it, you have a bunch of objects arranged in a hierarchy and each object is a node in that hierarchy. It's basically just one big tree. And the root of that hierarchy is usually something called a document object, a document node, and that document node has children and those children themselves can have their own children and so forth in one big tree. And these children nodes, most of them are called elements. Basically, every tag in an HTML document ends up as an element in the DOM. Every p tag, every div tag, every span tag, every anchor tag, etc., those all end up as elements. And each element itself can have children and these children are going to be other elements or attribute nodes or text nodes. If a tag in your HTML has an attribute that shows up as an attribute node, which for some reason is abbreviated as ATTR, that's what they call those nodes. And if a tag has in its content other tags, those show up as child elements, and if the content of a tag has text in it, the text shows up as text nodes. So again, the DOM is just an expression of our document in this case HTML as a big tree of objects, a bunch of node objects all arranged in one big tree. And the point of all this is that the browser exposes the DOM for that page to any JavaScript code included in the page. So how do we get at the objects of the DOM so that we can inspect them and manipulate them? Well, when the browser runs JavaScript code, it defines a global variable called document, which is assigned to the document node of the page. Now the document object and in fact all of the nodes have a property called children, which is basically an array of all the children of that node. And so we could actually, from the document object, look at its children and then look at the children of its children and the children of its children of its children. So we could walk all the way down the whole hierarchy to access any element, but this is a very cumbersome way to do it. So the document object actually provides a few very useful methods for more conveniently getting at certain elements. The two most commonly used are the methods getElementById and getElementsByTagName. GetElementById does pretty much what it sounds like. It returns the single element with the ID of the specified argument. So here document.getElementById with the argument of foo, that will return the element which has the ID foo. GetElementsByTagName is also pretty self-explanatory. Note it says elements plural because we're returning more than one. And in this case, what this will return is it will return all elements in the document which are of type div. And it will return them as an array. In what order I'm not certain, it may have a guaranteed order that it goes from top to bottom or something like that. In truth, it's really not all that important because getting all the elements of a certain type is not something we typically do very often. So this method is really not all that useful. GetElementById is pretty much the workhorse for accessing elements. Now of course in our HTML we don't necessarily give every element its own ID. That's generally not a good thing to do. But in practice, the most common way to access elements without their own ID is to access some ancestor and then from there walk down the tree to the element that we're actually trying to access. So for example, we might have a div with a bunch of p tags inside it and we want to do something to every one of those p tags. Well, the div we would give an ID and we'd access it with GetElementById and then we could just loop over all of its children, which are the p tags, and that's how we can get at the p tags there. Another essential method of the document object is createElement, which as the name implies creates a new element which you can then insert anywhere into the DOM so you can actually change the page on the fly by creating some element like say a paragraph and then inserting it somewhere. Now from here I could go into more detail about the document object and all of its other various methods and from there we could cover the other types of node objects in the DOM. But the DOM has this problem that the various different browsers don't implement it exactly the same way. There ends up being some differences between the DOM as implemented say in Firefox and the DOM as implemented in Internet Explorer and in many cases these differences are very minor, but they're all very annoying. And on top of this the DOM is not that well designed of an API from the perspective of someone wishing to inspect and manipulate the content of a web page. It's just a bit clumsy and kind of haphazard in how it came about. In practice when it comes to programming JavaScript in the browser it's a very good idea to use an abstraction layer over the native DOM and by abstraction layer we mean basically a JavaScript library which exposes to you more convenient objects and methods for doing the same business. So in fact for most of the rest of this unit we're not going to talk more about the DOM per se we're going to talk about jQuery which is the most popular such JavaScript library. Now jQuery and similar libraries aren't total abstractions over the DOM they don't cover all of the functionality of the native DOM so to do certain things you will occasionally have to deal with native DOM objects and just as a matter of competence it's easier to understand jQuery and use it effectively if you understand what exactly it's abstracting over for you. In any case I do strongly suggest you use jQuery at the very least it spares you from having to deal with a whole bunch of annoying cross browser differences and little quirks. But you'll find when you write your code to use the native DOM straight with no abstraction layer like jQuery is that you'll get mysteriously different behavior in different browsers because of some subtle difference between the browsers. When you use jQuery you don't have those problems as much because jQuery tends to compensate for the differences between the browsers. So now if you want to use jQuery or any other JavaScript library for that matter how do you do so? Well in the page you simply include a script tag with a source attribute and a URL pointing to the JavaScript code. Typically we put JavaScript in files ending in .js but that actually isn't strictly required you could actually call it whatever you want. But in any case looking at this example here we have two script tags first to jQuery.js which presumably is the jQuery library all in one file and we also after that have my code .js which is presumably the code I've written for my site. And the first thing to note here is that the order is important because the browser will execute the JavaScript basically just top to bottom in order that it appears in the document. So you want the jQuery library to run first so that its objects and methods get defined in the global namespace such that we can then use them in our own code. So you always put the libraries you want to use first and then your own code. Now in both these script tags the source attribute is a relative URL. Assuming the browser has retrieved this page from the URL http colon slash slash example dot com slash index dot html it then interprets the relative URL jQuery.js as example dot com slash jQuery.js. The browser will make a get request to example dot com slash jQuery.js and whatever gets back it interprets as JavaScript code. Likewise with my code dot js the browser would look for that as example dot com slash my code dot js. So in practice what this means when you want to use jQuery on your website you go to jQuery.com you download the latest jQuery library you take that file you put it up on your web server and make sure it's accessible at a certain URL and then in a script tag in your own pages you have the URL either relative or absolute that points to that file which is the jQuery library. Now you'll also notice that we've included a meta tag with the attribute char set of utf8-8. Char set here is actually a bit of a misnomer because it's specifying a character encoding not a character set but in any case we include it here because the jQuery library is in utf8 and while most browsers can most of the time correctly guess what the character encoding is supposed to be sometimes they guess wrong that's why it's a good idea to make this explicit. Here's a more complete template for an HTML page using jQuery notice we have the doc type declaration at the top doc type HTML is what is prescribed by the HTML5 standard so it's a good thing to use moving forward in this example though we made two differences with the script tags first the one that contains our code the code we're going to write we're just going to include that written in the page itself you know we don't have to put it in a separate file we can just put it in the page it's just that if we write a lot of javascript code it tends to make sense to put it in a separate file and in the script tag above that you'll notice we're including jQuery with an absolute URL pointing to a file hosted on jQuery.com so rather than downloading the library and throwing it up on our own web server we're just relying upon the file hosted on jQuery.com a few other sites like Google also host the jQuery library in this same fashion basically as a public service and in fact in most cases websites they want to use jQuery 99% of the time it makes the most sense just to let jQuery or Google host it for you rather than having to put it up on your own website and it ends up saving you and your users bandwidth because the jQuery library is not actually terribly big the core of it's only about 30 kilobytes but once you get many users that begins to add up and by using jQuery hosted on jQuery.com or Google.com you get the advantage that the user's browser is quite likely to have that URL already cast because the user has previously visited some other site that's also using jQuery from the same URL if the URL points to jQuery on your own site the browser doesn't know that that's actually the same thing it already has it's a different URL so as far as the browser can tell it's not the same thing so it's going to redownload something it probably already has any case moving on when a library like jQuery runs in the browser what it does is it defines a bunch of objects and methods for use in your own code and it makes those things available in your code by assigning them to names in the global namespace well in the case of jQuery it assigns to just one name in the global namespace jQuery with a lowercase j and a capital Q the object which it assigns to the name jQuery is a function object it's a function object with an object defined in its prototype property so it's effectively a constructor function it's a function we call to create objects in this case what we call jQuery objects now what a jQuery object represents is basically just a wrapper around one or more DOM elements in a sense a jQuery object is a collection of other objects of DOM element objects basically what's going on internally is the jQuery object has a property which is an array holding those other elements and as we'll see later the jQuery object has a bunch of methods which are useful for inspecting and manipulating the elements which it contains now the jQuery constructor function like a lot of other methods in jQuery is pretty heavily overloaded that is you can call it with different types of arguments and different numbers of arguments to get different behavior so here are what are probably the most commonly used overloads of the jQuery constructor function first off if we invoke jQuery and pass in a single DOM element some element object we retrieved perhaps with say document.getElementById or some similar method well that returns a new jQuery object which wraps around that single DOM element so here in the example if we invoke jQuery with an argument of Christy assuming Christy is some variable holding a DOM element well then this returns a new jQuery object wrapping around that single DOM element the second overload here is perhaps the one most commonly used where we pass into jQuery a selector that is a string which uses the same syntax as CSS selectors and jQuery will interpret that selector to identify zero or more different DOM elements to contain in the newly created jQuery object so in the example here jQuery with an argument of a string reading.orange that's a CSS selector specifying all elements with the class orange so this will return a new jQuery object with all elements that at that moment include the class orange in the third and last overload of jQuery shown here you pass in a string of html jQuery will then represent actual DOM elements representing that html so here in this example the html in the string specifies a div with an id of high underscore div and inside the div there's some text content there's hello comma space followed by an anchor tag a link with an href of wikipedia.org-slash-world and its own content of world so what that all gets interpreted as is it requires creating a number of different DOM elements first there's the element representing the div itself and inside that div is while there's an attribute node representing the id attribute and its value and then also inside the div there's a child text node representing the first content element that text and then there's a second child the anchor tag there's a DOM element representing the anchor tag with its own attribute node and its own text node content the word world so the jQuery object which is returned by this call immediately contains just one DOM element the div but then that element itself has its own children so it's the div and then inside that div element object is everything that makes up the div as written here in the string now to create these elements jQuery itself is using the method document.createElement and what you need to understand about these newly created elements is that they don't exist in the document yet they're creating free-floating elements that are attached to any document we would use other methods in the DOM or methods of jQuery to actually put them somewhere in the document we have to attach them as children to some other part of the existing document until that time say the div we create here doesn't show up anywhere in the document now just as a note something you need to be really clear on is that the global variable jQuery is a reference to the constructor function for creating jQuery objects and if you write jQuery.foo what you're accessing is a property of that constructor function itself when though you invoke jQuery and then access a property from what is returned that's different you're accessing a property of that returned jQuery object so just be clear that jQuery objects have a certain set of properties and the variable jQuery that the constructor function has its own properties and one reason this is a bit confusing is because it happens that there are one or two cases where those separate namespaces happen to have the same name so it could be a bit confusing at first the primary example I'm thinking of is get there's jQuery.get and then there's the get property of jQuery objects which is different so just keep that in mind I understand that what jQuery has done is they've stuffed a whole bunch of useful things as well as other functions as properties of this one function object because it just was convenient to do so they want the jQuery to show up as just a single object added to the global namespace and so they just use that object itself as a namespace to contain other things so when you go to the jQuery site and you look at the documentation for the API you'll notice that most things listed here are just written as dot and then some method name because the vast majority of things in the API are just methods of the jQuery object those are methods of jQuery objects for all other things you see the full name written out like for example here jQuery dot ajax that is just the name of a function it's not a method of jQuery objects it's just a function that for convenience and succinctness has been placed as a property inside the jQuery constructor function object the thing referenced by the name jQuery dot add dot add class dot after those are all names of methods of jQuery objects we wouldn't write say jQuery dot after because the jQuery constructor function doesn't have a property called after only jQuery objects which we create from the jQuery constructor have such a property, such a method now I did say earlier that the only name the jQuery library adds to the global namespaces jQuery that's not entirely true by default jQuery will also assign the same object to the variable named dollar sign now you may be surprised to learn that dollar sign is actually a valid character in javascript identifiers well usually you're not supposed to use it it's considered generally bad practice but the designers of jQuery decided hey it's really convenient, it stands out a lot in code and because if you use jQuery you're going to be invoking the jQuery constructor constantly it makes sense to give it a really short distinct brief name and what's more brief than just a single character so they decided to alias the jQuery constructor function to dollar sign and the fact it's usual practice with jQuery to almost always use dollar sign rather than write out jQuery because it's just more convenient so in fact that's what I'll do from here on out, I'll just simply use dollar sign instead of writing out jQuery