What do you want to learn? Leverged jhuang@tampa.cgsinc.com Skip to main content Pluralsight uses cookies.Learn more about your privacy Introduction to JavaScript & jQuery by Karl Swedberg Karl Swedberg, author of Learning jQuery and the jQuery API Documentation (api.jquery.com), teaches you what you need to know about the JavaScript language before diving into jQuery; including closures, anonymous functions, and implicit versus... Start CourseBookmarkAdd to Channel Table of contents Description Transcript Exercise files Discussion Recommended jQuery & History of DOM Scripting History of jQuery (upbeat music) Karl Swedberg and this is one of my far too many Email addresses, so you can use this if you want to contact me, if you have any questions about the presentation or if you just want to ask me a question about anything or if you just want to be my friend. (laughing) Whatever, okay. And this is my Twitter handle if you want to follow me on Twitter. I am a web developer at Fusionary Media in Grand Rapids, Michigan. It's a great place to work and the guys over there are really nice about letting me leave and do this sort of thing every once in awhile, so I like to give them a shout out. I'm also a member of the jQuery Project Team. We kind of changed the nomenclature of things recently, so I'm a Board Member of jQuery, whatever that means. So basically what it means is I deal along with about 15 other people with the kind of inner imaginations of jQuery as a loose organization. Like when we want to put on conferences for example. We just finished up a conference in Boston and it went really well. We also had one this year in Silicon Valley in Mountain View and in order to do that we need money of course, and we need time and resources and so we kind of try to handle things like that. In any case I'm sort of involved in that. We don't have any formal guidelines for what it means to be a jQuery Board Member, but you have to like really care about it and do a lot of work for jQuery in one form or another. What I'm responsible for is mostly documentation. So if you look at api dot jQuery dot com if you've ever been there, a lot of that was written by me and basically what we did was we got a book called jQuery Reference Guide, jQuery one point four Reference Guide that I wrote with a co-author, Jonathan Chaffer and we took it out of book form which was a really ugly. It was in word documents and we ported it in to an XML structure which is not that great either, but it works, right? And we made it work on the web, so what you see on the website had it's origins in jQuery one, four Reference Guide and we've been updating it ever since. And there are a number of people who have also been involved in updating it. I kind of oversee that part of jQuery's work. And I've written a couple books and edited one. I was a technical reviewer for jQuery Cookbook which is really good and Learning jQuery and the Reference Guide. Learning jQuery the third edition just came out like a few weeks ago. I have a copy here if any of you want to take a look later on, want to leaf through it or something that's cool. I forgot to bring my jQuery swag, so like I have stickers and buttons and stuff. I'll bring them next week, so if you're coming next week, too you'll get some swag if you want it. Let's see, all right, so back to our slide here. What I wanted to do, Mark was really gracious about putting together a little Outline for the website before-- He was probably sick of asking me to do it and he just did it himself, and it looks pretty good to me, so I'm sticking with it pretty much. (laughs) So here's what we're gonna do. We're going to talk about the philosophy of jQuery in an API walkthrough. We're going to go through Dev Tools. Bare-bones JavaScript, talk about that and then we're going to get into jQuery Selector's and Traversing and that's probably about as much as we can handle today. If we have time for more, I can talk all day. Like I love talking about this stuff, so I can keep talking and hopefully, we'll have time for questions and stuff like that, too. I wanted to step back a minute before we jumped in to jQuery itself and talk about DOM Scripting. I think jQuery owes a lot of it's success to the DOM Scripting movement. Back in the '90s and early part of this century a lot of the JavaScript that was written was pretty bad. It used different practices, right? We didn't have the same best practices then as we do now, so there was a lot of in line JavaScript. There was a lot of stuff that was like just document write. document dot write like where it would convert what ever was in this JavaScript function into HTML and kind of stick it in there, right? It was kind of ugly. There are lots of problems with that and we moved away from that. DOM Scripting was something a number of people started doing probably about eight years ago or what ever and some of the tenants of that are that it's based on web standards. It tests features not browsers and it's Unobtrusive. I'll tell you a little bit about what each one of those things means. But first, I got my start on JavaScript with Jeremy Keith's book DOM Scripting. It's a great book. I'd recommend it. I think it's out in the second edition now. Peter-Paul Koch, PPK on JavaScript, that's also a really good book. These are like fairly beginnery level for JavaScript. Jonathan Snook's book I haven't read, but I heard good things about it, and I know Jonathan, so I put that one up there, too in case you're interested in looking at just regular old DOM Scripting. So what I mean by Unobtrusive is that it takes seriously the separation of concerns, so when you have a webpage, right? You have your content and your structure which is the HTML and that sits in it's own file or set of files or however you produce that, then you have the presentation which is your style sheets. It's your CSS. Then you have the Behavior element and that's where you write your JavaScript. So you keep those separate and then they all come together to make a beautiful tableau. All right, so one of the problems with DOM Scripting though at least when I started learning it was that it was really verbose. It took a lot to do something very simple. This was looking for all the block quotes and extracting the site attribute out of the block quote and sticking it after it or at the end of the quote in a link, right? There are things like this. You create your link, your anchor or what ever, right? document dot create element A and then you have to set the attribute, then you have to set the inner, the text inside of it, right? document dot create text node. It's a lot of work just to, like I just want that little like, why can't I just put it in there? One of the drawbacks, at least for me, right? So then jQuery came along-- Oh, let me go back here though, one of the things that you can see here is it starts off by saying if there's no get elements by tag name method off of the document then it's just going to bail. It's not even going to try to run this, right? So that's an example of testing features, right? So instead of saying like if this Internet Explorer four which is what people were doing back in the '90s, right? Feature testing is a much more sensible way to go. All right, jQuery came along along with a number of other libraries. Somebody this morning mentioned MooTools, Dojo, Prototype. I heard all of those mentioned. There was Multiki, there were a whole bunch of them and there still are. But jQuery really caught on. It just exploded and I happened to be just discovering JavaScript at the time it started and so I said, "Hey, that actually makes sense to me. "I'm gonna start using this." And that's how I got involved with jQuery. Benefits of jQuery JQuery had some benefits some advantages over regular DOM Scripting, but also just some general benefits of it's own. It let you move quickly from beginner to advanced. Not for everybody, but for more people than more people than I would have expected at first. For myself for example, I couldn't believe how how quickly I could jump right in. I was no programmer, right?, at all. I was an English teacher before I started doing this stuff and so I didn't really feel like I knew anything about this sort of stuff and I started getting involved in it. I'd already kind of immersed myself in HTML and CSS, so I was really in to that, and jQuery's core concepts really fit with my understanding of HTML and CSS. So I was able to jump right in and I started asking questions on the List Serve because we had a List Serve back then, just like a simple mailing list. Within a couple of months I was answering people's questions on the List Serve, and then you know, a few weeks after that I said to John Resig, the creator of jQuery, I said, "Would you mind if I started a blog? "Because I'm learning all this stuff and I want "to keep track of what I'm learning." And he said, "No, go ahead, go right ahead." And so I did that and it wasn't too long after I started writing this blog that a publisher contacted me. I mean it was all very weird. I was like, "Dude, you don't want to ask me "to write this book. "I don't know anything about it." I mean that's why I have this website learning jQuery, not teaching it. (laughing) So I said, "Okay, I'll write the book "as long as my friend Jonathan can write it "with me because he actually know what he's doing." So we wrote it together and through that process I learned a ton and so now I guess that gives me some kind of credential to come talk to you about it. But in any case, jQuery really helps improve developer efficiency. You can get a lot done when you use jQuery. that It would be hard to do without it. The core developers of jQuery spend a lot of time and effort working on all sorts of ugly browser inconsistencies and weird edge cases, so you don't have to, right? They deal with tons of bugs. Writing JavaScript as smooth as possible for you when you use the library, so that you don't have to worry about that sort of thing. You can just write your code and be able to expect that it'll work, okay? It has excellent documentation, yeah. There's more to come with that, too. There's a sub-team of the jQuery Project that is working on a new learning site and I'm hoping that what'll happen is once that's launched I'll be able to kind of fold the learning jQuery dot com site into that, so I won't have to have that obligation anymore. It's a wonderful opportunity for me, but it's become more and more difficult to maintain it. In any case, personal matter. Unobtrusive from the ground up, yeah, so John really got this whole thing about Unobtrusive JavaScript about keeping the JavaScript separate, right?, about not putting on-click handlers like right into the elements on the page. At the time Prototype was probably the largest JavaScript library and it did not do this. It didn't really concern itself with this whole Unobtrusive aspect of writing JavaScript. There was another add-on to Prototype called Behavior that allowed it to do that sort of thing, and then eventually it was baked in, but jQuery kind of started with this philosophy. Reduces browser inconsistencies as I mentioned and at it's core it's a simple concept and we'll talk about that in a minute. So here's the Unobtrusive part, right? Just like with the DOM Scripting, jQuery does basically the same thing. You just add your jQuery file and then your custom JavaScript file and you keep that separate from the other stuff and it all kind of works together, so awesome. Reduces browser inconsistencies, okay, so here's another example of DOM Scripting. Getting the height of the viewport, the window, the viewable area of the browser. So this is how one might do it with DOM Scripting. This came from PPK's site. Have you ever been to quirksMode, quirksMode dot org I can't remember if is org or com. Anyway I think it's org. It's an awesome site. There's a lot of charts on browser support and things like that. He's really into mobile stuff now. Anyway, I think this came from that and you know, it was from awhile ago, but still that's a whole lot of work to just find out two coordinates or two things, right? Here's how you do it with jQuery. And you can do this with jQuery because jQuery does the work for you behind the scenes. So you just pass window into this dollar function and then you call a width or a height method on that. And we'll talk about all that stuff later as well. Documentation & Support, api dot jQuery dot com I mentioned that. There's also a forum, forum dot jQuery dot com, and then there's an IRC channel, pound jQuery. How many of you have been on the jQuery IRC channel? Okay, not very many. It's an awesome place for support. There are usually 400 plus people there and unless you're really obnoxious or something you'll get quick answers to questions. If you're really genuine and you come with sincere questions they'll be answered. People are really good on there, and they're passionate about jQuery and about helping people, so definitely check that out. There's also a jQuery Dev channel and a jQuery meeting channel and on and on. Core Concepts of jQuery One of the reasons I think that jQuery has become so popular is because at it's core it's a very simple concept. Find something. Do something, right? How many of you have heard that before related to jQuery? Yeah, a couple of you have heard that, too. You find something and then you do something, right? So what does that mean? Well, you find, finding something is like selecting elements in the document, right? You find the things that you want to work with and then you do something with them. And it all starts with the dollar sign, with the bling, all right? So what is this dollar sign? In some programming languages the dollar is special. I know in PHP it's special. I'm sure it is in other languages and JavaScript there's nothing special about a dollar sign which is why jQuery and Prototype and MooTools and other libraries use it because it's one character and it's distinct enough, so that people can remember it, okay? So that's all it is. There's' nothing magical about the dollar at all. With jQuery just about everything starts with this dollar symbol, right? This is a function. This is a function call. We're calling this dollar function and we can pass an argument into it. So we're passing in an argument. This is a string because it has quotes around it and does anybody know what we're trying to do here with this? (indistinct talking) Yeah, find every div on the page. So what it's going to do is it's going to loop through, it's going to actually it's going to use a native DOM method called get elements by tag name behind the scene and it's going to bundle those up, all those divs and put them into an array inside of an object, inside of a jQuery object, and this jQuery object is an array like object. So it looks, it has some of the properties of an array, like it has a length property, but it's not really an arrary. Then you can kind of cycle through the divs within that. Like you can say, "I just want the first one, "or the second one or the third one." And you can grab those just as if you were grabbing elements out of an array, right? Okay, same thing here except here we're trying to find what? Some element with an id of id, right? Which would be kind of a weird id, okay. Okay, so then we have Do something, right? So once we have the elements we can do something with them and here's what we can do. We can let elements we can let these elements that we've collected listen for something to happen like we can let it wait for it to be ready, right? We can also wait for the user to do something, like click on a div, right? These elements can listen for another listener to act. They can listen for a certain amount of time to elapse. They can do all sorts of things and then they can actually do the something, right? Like manipulate elements, animate them. So manipulate them meaning like change one of their attributes or many of their attributes, change where they are in the document, move them around, animate them, communicate with the server, you know go fetch something and bring it back, all sorts of things that you can do with your collection. Okay, in a nut shell, Find something, Do something. Now, there are methods in the jQuery library that don't work exactly that way and we'll touch on what the difference is between those that do and those that don't, jQuery is really, really good at working with the DOM, right? The DOM is Document Object Model. It's basically the stuff in your web page, right? After the browser goes through and sees it as text it turns it into a whole bunch of little objects, right? Then it constructs this kind of tree out of it, this model and that's the Document Object Model and that's what jQuery really excels at, and it has some additional features that it also does well, but it doesn't do everything for you, right? There are other libraries that you can use in conjunction with jQuery. It doesn't try to be everything to everyone, but what it does accounts, I think, for at least 80% of what people need for most websites. Unless you're building a complex web application, really jQuery's got just about everything for you and stuff that builds on top of jQuery like jQuery Y that sort of thing. Developer Tools Browser Support Okay, Dev Tools. Mark said something about in the little outline that he posted something about using the console, and so I thought, yeah, that's cool. Everybody should know how to use a console, but I think people should have a broader sense of, hey, what are some of the tools out there that I can use to make my development more efficient and more effective? Okay, so... We're kind of faced with this dilemma here, right? We have up to five browsers to test against, and this is just the desk top browsers, right? This isn't even including the mobile stuff, and, so, we need to be able to see how things work. Sometimes we can write tests, like unit tests, for this sort of thing. Sometimes, we have to visually inspect how things look, right? You've all, probably, if you've done much CSS work experienced that sinking feeling after developing your website using Firefox or Chrome or Safari or something, and then checking it out in IE7 at the last minute or IE6 and saying, "Oh, no." And that's what the CEO of our client uses, right? Why is it always the CEO of the client that you're writing this website for. Why is it always that this person that is using the worst browser? It makes no sense to me. It's crazy, but, in any case, Developer Tools can make your life much easier. So, first thing to consider is browser suport. Modernizer, how many of you have used Modernizer before? Yeah, okay, I'm starting to see some more hands raised. Modernizer's an awesome tool. It's like it's own JavaScript library, and you can stick it in the head of your document, and it will go through and feature test all sorts of different things to see if the browser is capable of using those features, and then it will do something like it'll add certain class names to the HTML element if it supports that feature or doesn't support it, so CS Transitions or Geo Location or all sorts of different things, right? And it'll just tell you, and so you can actually. Oh, and then it'll also have this Modernizer object with properties that you can test to see, okay, does it support this? If yes, okay let's do something, otherwise, we'll do something else, or we can have these, what people are calling, polyfills, where you have scripts that fill in the gaps of browser incompetence, right? So if you have something like Canvas, for example. There are some Internet Explorer versions that don't recognize the Canvas element, but they do have VML, vector markup language, right? And there's a polyfill called XCanvas that you can load, and if you use it with Modernizer, you can load that only if the Canvas element is not recognized, which is kind of nice, right? You don't have to guess, hmmm, well, what version of IE actually supports it and what doesn't, that sort of thing. That's something really nice to check out, and then there's CanIUse.com. This is a great site. It has all sorts of different stuff in there. You just type in the feature that you're interested in, and it'll tell you if you can use it and in which browser, and I thought I had it in here somewhere, but I don't. Okay, so like... WordWrap, let's see. Feature anybody? Anybody think of a feature? Sorry? Speak up. Did I hear somebody? Flexible Box model. Okay, so F. Ah, I'm on the wrong keys, sorry. Flex Box or Box Flex. It's Flex Box, okay. There you go, and, oh, look at that. With the MS vendor prefix it may be available in IE10. All right, and available in Firefox 4, Chrome 12, so it goes back a certain number, and it goes forward a certain number, and I think there's a setting somewhere, yeah. There are settings in here where you can say, "Okay, all." All browser versions that it has recorded, so stuff like that. Really nice, anyway. You can use that. Code Sharing Code sharing. This is a really nice thing to know about because it's good to share. JSFiddle is a really nice site. If you are writing code, and you want to share it with somebody, or if you just want to test something, you want to mock something up really quickly, just go to JSFiddle.net and have it. Just start typing. Put your JavaScript in there. If you go to the IRC channel or whatever and have a question, something's not working, you can say, "Hey, I created a Fiddle, "so check it out," and they will go, and they'll take a look at it, and then they can create a new version of it, and then send you a link of their version, or whatever, and then they'll say, "Here's how you do it. "Here's what you can do to fix the problem." So it's really nice. So, you know, you just put your HTML up here, your JavaScript up here, CSS here, and here it'll show you the result, so let's say, okay... And then you can chose a framework and all sorts of stuff, right? So let's say I do this. Let's say I don't have any HTML and I want to say Div hello.pend to body. Okay, I want to see if that works. Hey! Look at that. There it is. Okay, JS Bin is a similar tool. It works very, very much the same way. You have your JavScript over here, your HTML over here. There's also a real time preview where you can just, you know... And especially Minnesota. That's not very real time, is it? Maybe you have to... Oh, that's the render. Well, whatever. It was working before. In any case, JS Bin, and you can save it. You can download it. You can use it as a template, so that when you come back to the site you can start with that. It's very nice. All right. Yeah, so JSFiddle, JS Bin, awesome tools. All right, text editors. Here are some for the Mac. TextMate, it's the one that I use. I really like it. It hasn't been updated in decades it seems, but there's some kind of rumbling about maybe a new version coming out by the end of the year. I'll believe it when it happens, but, in any case, there's a JQuery bundle for it, so you can have code snippets and tab completion, that sort of thing, that I worked on with my co-author Jonathon Chaffer, and you can get it from my GetHub repository at GetHub.com/Kswedberg and then look for the JQuary, the TM bundle, TextMate Bundle. The JavaScript tools bundle is really, really, really good too. So you should check that out. One of the best things about it, for me, is that it comes with a tool call JS Hint, which is kind of like JS Lint, except it's less... what's the word? Dogmatic, they say. That's not my claim. That's their claim. All right, so, for example, here let's go into something like... Okay, we'll just on in here, and let's say I'm ready to type something new, and I say like... (humming) (grunting) Yeah, I'm done. Oh, look at that. Six issues with JS Hint. Hmm, I wonder what that means? Okay, so that must mean that I did something bad, huh? So I can validate it, and their all on line three. (chuckles) Okay, so if I got rid of them, got rid of line three, and saved again. It's not giving me any warning, right? So whenever I save, it'll popup a warning if I have an error or something odd. It also has some other stuff like a minifier built into it, so if I wanted to compress this, I could do it with any of these minifiers, JSMin, Dojo Shrinksafe, Dean Edwards Packer, YUI compressor, oh, Google Closure Compiler. Any of those I just say, yes, let's do it, and... There we go. Now it's minified. All right. Okay, so that's JavaScript tools bundle, okay? There's Sublime Text 2, that's a relatively new one. It's able to use TextMate bundles and themes, so it's kind of nice that way. I've used it off and on. TextMate, sometimes, depending on... Depending on the bundle that you're using and some other things. There are a few things it doesn't do very well like it doesn't handle really large files very well, so sometimes I'll use Sublime Text 2, so if you're like an ultra geek, you could use MacVim. I know a number of people who swear by that. Espresso is like a nice, pretty text editor. Okay, so Windows, I don't know too much about Window's text editors, but there's one called E, E Text Editor, which allows you to use JQuary bundles, or, I'm sorry, TextMate bundles in that as well, so that's kind of nice. Eclipse Aptana, some people use that. Some people feel that's it a little bit too heavy, but others really enjoy it. It's got a lot of nice features. Notepad++ is a fairly bare bones. It's pretty quick. That's the one I use when I have to go into a Windows virtual machine just because it has a pretty small footprint and I can boot it up really quickly, and then there's Visual Studio, Microsoft offering, so if you're doing other Microsoft-y type things, Visual Studio has JQuary code completion and code hinting. IntelliSense they call it, right? All built in, so that might be nice. Yeah, and then there are plenty of others, and then there are also, I'm sure there are plenty of text editors for Linux too, but I can't help you. I figure if you are using Linux, you probably already have your text editor. You're probably all set to go. Developer Tools Let's talk about using the console. Quick and dirty way to kind of test out some code to do all sorts of stuff, to debug your code, that sort of thing. Firefox has Firebug. How many of you have used Firebug? Yeah, all right, cool. So, I don't really have to get into that too much, right? It has... You probably know what it has if you've used it, right? A bunch of extensions that go along with it. Like if your a PHP devleoper there's Fire PHP, Fire Cookie, which will show you all the cookies and let you quickly do stuff like delete them. Okay, Chrome Developer Tools. How many use Chrome Developer Tools? Okay, okay, not quite as many, but some there. In many ways, I don't know, in someways, I think it's leapfrogging Firebug. There are things about Firebug that I still really like. I like being able to single click into a style property to edit it instead of having to double click. I don't know, it seems silly, but when I'm doing it 1000 times a day it starts to add up, you know? I think it adds up to 2000. (chuckles) Anyway, yeah, so there are all sorts of really cool features in Chrome Developer Tools like live debugging and code changing. A lot of hidden goodies in there, and I would encourage you, if you're interested at all in using it and become more of a Chrome developer. I don't know, what do you call them? Like a master or whatever. Check out, you can check out the Dev Tools site at Google, but also check out Paul Irish's screen cast. It's really good, and he shows some really cool features. I'll just show you a couple. (muffled speaking) I'm sorry? That URL doesn't seem to exist. It doesn't? No, the URL you have requested is not available. (muffled student speaking) This one? Huh, looks like it exists. Oh, yeah, anyway. That's Paul. Hi Paul. All right. Yeah, maybe I did something wrong somewhere. I don't know, but tell you what. Let me do this. Okay, so I... (noise of surprise) (grunt of frustration) I know this one works because I just tried it. Right, and... How can we do this? I have a good idea. Let's do this. Let's have a scratchpad. We'll go to OkSoClap.com, and we'll say FEMasters. (fake chuckle) Yeah. There we go. Okay, so you can grab it from there. So OkSoClap.com/FEMasters. And let's try that one more time, and, yep, there we go. Good, got it right. Any questions so far? If you want to drop something in here too, we can use this as a class discussion board or whatever. You can also chat. Hi everyone. (chuckles) All right, let's go back here and we'll take a look. Oh, I was going to show you some things in the Chrome Dev Tools. Let's see, this would be a decent place to do it. Okay. So whichever tab, whichever panel you'll in, you can bring up the console by hitting the escape key while you're down there and close it by hitting the escape key again. That's kind of nice. You can do that in Firebug too. Here's something else, and Paul Irish, I think, talks about a lot of these things. Inspect Element, okay, so let's say I'm inspecting this one, right? and then I want to use that one. Let's say I want to use it with JQuary, right? Well, this is going to give me that element, right? And so if I want to use it with JQuary, I could just do this, provided I have JQuary on the page. .I, hey, it's gone. All right. All right, so using dollar zero will get the selected element from the dom viewer into the console for you. That's a nice thing. When you're working with styles, like colors. Have you seen this? This is really cool. So say you have the hash thing, right? Or the hexcode, and that's really nice, but you can change it by just clicking on the little swatch there, and that might seem kind of dumb at first, but RGB, some people just think in RGB, other people think in Hex, I don't know. It's like men are from Mars, women are from Venus, or something, and then, but, there are situations where it can be really nice to have something like this like the HSL is really nice, so if I just wanted to, if I liked this color, but I just wanted to make it a little bit brighter, I would just up the luminescence, the L. Can you see the link's getting lighter? Yeah, and so I'm just holding down the down arrow key, the up arrow key, whatever. (descending noise) And then you change the hue and the saturation as well, so if I wanted to pump up the saturation to 100%, bam. There we go, and then it'll change it right back to the hex value for you, so you can copy that and do whatever. So check this out too. This is kind of neat. I can go into style sheets, and I can... You can kind of mess around with stuff, and, oh, this is not a very good example 'cause I'm generating a style sheet, but anyway. Yeah, so you can make a bunch of changes, and it'll start recording the changes that you make, and then you can right click on it and save that copy of the style sheet, and then paste it back into your text editor, so that's really kind of cool. All right, enough of that. Any questions about console stuff? No, you guys are good with that? Cool. Safari, it has a console too. How many of you develop in Safari? One? Two. Okay, so you have to activate this by going to the preferences menu. Preferences advanced or something like that, and then saying, "Give me the developer menu." All right. It's really similar to Chrome. Yeah, it's very similar. I don't think it's as good. They're not keeping up the pace of development with it. Maybe eventually they'll roll some of Chrome's changes in, but the Chrome Dev Tools team, they're going nuts. They're really improving that thing like crazy. Okay, and then Internet Explorer 8+ has it's own set of Developer tools. The F12 Developer tools, right? Much, much better than in previous versions of IE and finally includes a console. Internet Explorer less than or equal to seven, well, you have a bunch of these third party things that are kind of wonky and a little weird, but they they're better than nothing. There's a developer toolbar that doesn't have a console in IE7 or lower. There's a script debugger, there's companion JS. I try to, yeah. I haven't really done very much... I don't even remember what I'm using anymore for these. Typically, what I'll do is... Unlike with CSS, Internet Explorer's JavaScript engine didn't change much between IE6 and IE8. It changed a little bit in IE8. It hardly changed at all in IE7, so the idea of dropping support for IE6 makes a... That makes a lot of sense in CSS terms, but in JavaScript terms it's like, yeah, when you're do that you're pretty much going to have to drop support for IE7 because the same bugs are in IE7, so, what can you do? All right, so, yeah. So, that's it for tools. Lets' talk so bare-bones JavaScript. How you guys feeling? Are you feeling good? You ready to move on? Yeah, and please, let's have two way conversation here. If you want to ask questions or if you want to chime in with a comment, please do. If I say something that's horribly wrong, correct me, okay? I won't be offended. Best compliment I've ever gotten, I think, came last night when one of my bosses said to me, "You know, Karl. "You're not a rock star." He said, "You're like a studio musician." I was like, "Yeah, I like that. "I really like that." Because, you know, studio musicians are like so much better at what they do than rock stars. I don't know if I agree with, I think his opinion of me is a little exaggerated, but, still it's such a nice compliment, and I bring it up because don't feel weird about chiming in, okay? I'm just like you. Bare-bones JavaScript Data Types and Variables For some of you, this is gonna be like, oh man, this is really basic, and for others it's gonna be like oh, now I finally get why I do this when I copy and paste this plugin from-- this jQuery plugin, you know. Oh now I know what that means. So I wanna touch on some of the fundamentals and some of the things especially that you see a lot in jQuery and that you might not realize oh this is something that happens, you know, it's like oh, that's why I see these, you know, the curly braces over there, all right. So you have, can work... I think I used this slide in another presentation and changed it on the fly there too. But, I don't know why it doesn't stay changed for me. In any case, you can work with the following things, strings, right. What are strings? It's textual content. It's wrapped in quotation marks. You can use single quotes or double quotes, it doesn't matter, they're the same. Unlike with something like PHP where there's a difference, right. Yeah. I don't know about other programming languages but with JavaScript they're equivalent, right. This is a string. All right, hello my name is Karl. It's a string literal, right. This is a literal string, right. You can create a string as an object and then set text as a, you know, with that string constructor object but no point in doing that, it's silly, okay. This is the exact same thing, hello my name is Karl. Double quotes. Okay, numbers. You can work with numbers in JavaScript, integers, floating point, octals, hexadecimal, exponent literal, infinity, all sorts of numbers. Weird things will happen because of octals and things like them, right. And we'll take a look at that later. Booleans, boolean just means true or false, right, true or false. No quotes around that because it is the thing, it's the true or the false, right. Okay, in JavaScript you can also work with arrays. These are simple lists and they're indexed. And the indexes start with zero. I know that some of you this morning were saying that, like you were into CSS and like you feel pretty, you feel really confident with CSS and HTML, JavaScript not as much. And I heard somebody talking about nth-child, right. Was that you? Okay, yeah, well nth-child is kind of weird right? I mean it's not weird if you just live in CSS land all the time. But if you're a JavaScript developer it's weird because nth-child is indexed starting at one, okay. It's one, CSS selectors are one-based, right. So nth-child one is the first one, but if you're working with arrays, if you're working in JavaScript, the first of anything is zero, okay. And we'll talk about that when we get to selectors. Here's my lovely family, they're all in an array, Karl, Sarah, Ben, and Lucia. Okay, this is another array, right. First one is all an array of strings, second one is an array of a string and two integers that are just random, don't try to derive any meaning from that, it means nothing. Here's an array of arrays, and each array contains strings right. So you can nest this stuff. I mean some of this stuff, you know you might think, oh yeah of course, yeah. But you know, it's good to review maybe. Objects are lists of key value pairs, right. So here's where you have the curly braces instead of the square braces, right. So you have a key or a property and its value. So first name Karl last name Swedberg. All right. You can also just like with your array where you can have an array of arrays, you can have an object with arrays as the values, okay. Or anything as a value, right. You can have a function as a value, okay. Variables, always declare your variables. So what does that mean? And you know what a variable is right? It's something that you use to represent something else. Always declare them because if you don't they will be placed in the global scope, okay. They will become properties of the window object, right. And that's not a good thing. Especially if you're working on a large project. What does it mean to declare your variables? It means not doing this. My name equals Karl, right. It means putting a var in front of it, right. Now if we took away everything else on this slide, right, and we just had var my name equals Karl and that was the extent of our JavaScript file that wouldn't really be much better than having my name equals Karl, right. Because it would still be in the global scope. It's important to consider where am I going to be using this variable, and how can I contain it to within this place where I'm using it. Does that make sense? Like, I don't want it to leak out into some other file or, you know, to possibly conflict or collide with a variable of the same name in some other place, right. So this is still good, var my name equals Karl and then, you know, you do more stuff, and then my name equals Joe, right. If it's within the same context, then that's okay. We've already declared it, now we can just keep changing it, we don't have to say var again, okay. JavaScript Operators Conditionals and operators, okay. We have some conditionals in JavaScript, if and else and switch. I never use switch, I just never do it, I don't know why. I do in PHP but I don't in JavaScript. Typically in JavaScript I use objects instead. I'll show you how you can do that. We have operators. Right, like for adding and subtracting and stuff like that. The plus operator works for concatenating, putting together strings as well as for adding numbers, right. And so you can have weird problems like when you, when you have a string like, you know a string one, two plus the number three. You know what the result will be? One, two, three. So you would need to convert that string to a number before, you know, to the number 12 before you added it to three if you really wanted to add those two, okay. And then we have our logical operators. I put a couple of these in blue and bolded them. Do you know what the difference is between the double equals and the triple equals? Does anybody, yes? One test equivalents, the other test equivalents including type. That's right, that's right. Because there's... Yeah, yeah because you can have-- Or cast weight. Yeah, right, exactly, yeah. Two things can be equivalent but not be of the same type. And if you just use double equals you know it'll... You might wind up with some surprising results. For example if you were going to do something like this. If you were looking at the results of a form, right. Like if you were doing form validation or something like that and you wanted to do... Let's see, do I have anything here? This is my catch all dump of stuff. So, like here... Oh. My-- Oh it's just a scan link. Sorry about that. Hide, I'm looking for the hide thing. I'll just do that. Okay. Sorry about that. Let's see. Yeah, yeah, yeah, whatever. So let's see. What is this element here? That is input with an ID of A, okay cool. So let's see, I can do A and I get that input. Let me clear that. Right, okay. Now I can get the value. Okay, and if I wanna say that equals an empty string, right it's true. Right, it's true, it equals an empty string, this one. That's good, that's good. That's as it should be. Whoops. Okay, so what happens if I put the number zero in there? And why, does it look so hideous? There we go. What if I put the number zero in there? And I clear this. Well that stinks. What happens... Hm. Rats. Right, because it, I know why because it gets it as a string, right. So what happens if I do this? That's true. Okay. So if I convert this to a number and I say it's equal to an empty string, yeah it is. 'Cause they're both falsey, right. They're both falsey values. So they're not like false, false, like the boolean false, but zero is falsey and so is an empty string and so they're equivalent, right. Even though they're not the same type. It's kind of weird isn't it? Yeah. I just used the unary operator, the plus there to convert that to a number. But you could do this too, the value times one, and that would convert it. Or I could do like parsefloat or something like that too, there are a number of ways to convert strings to numbers. All right. Back to our program. Okay. Okay and then we have the bang which is for-- not. Double ampersand for and and double pipe for or, right. There are no textual equivalents. Like you can't do capital O capital R for or like you can in some languages, right. Loops Okay so loops. Loops iterate through a list of some kind, right. So a common pattern in JavaScript is to build a list or a collection of something and then do something with each item in the list, right. Kind of like what we were talking about with jQuery, right, find something, do something. With DOM scripting what you have to do is you have to loop through it yourself. CSS uses implicit iteration. It loops through for you, right. If you just say like, dot my class, and then you give it like a background color, it'll loop through all of the elements that have a class of my class and it'll apply that background color to them, right. So it does this implicit iteration. And it works on it as a live list so if new things are added they also get the background color. All right, there you go. All divs now get the text color red, okay. JavaScript relies on explicit iteration. So it has to explicitly loop through each div, right. So jQuery allows for both. You can iterate through explicitly, you can use one of jQuery's methods, or you can convert your collection of elements that you build up when you find something, right, you can convert those to like an array and use a native JavaScript looping structure. But jQuery will do the looping for you. It does, like when you say div dot, you know div in parens whatever with the dollar dot add class, right, it will, that add class method inside the jQuery core file, it will go through, and it'll say okay all of these divs I'm gonna go through and for each one of these I'm gonna add the class, okay. It's nice. Two most common loops are for loops for general purpose iteration. You use them with arrays, or array-like objects like DOM lists, or DOM node lists, node lists. Or foreign loops which are used with arrays or objects. But don't use them with arrays just use them with objects, okay. Use a foreign loop. We'll see an example of each. While loops and do-while loops are the other two looping structures. Okay. For loop, three statements and a code block, right. So this is what you get. The first statement is the initial value, what you're gonna start with. The second one is the condition that you're testing it against. Okay, so I'm gonna keep doing the same thing as long as this condition is met. And the third thing is your incrementer, okay. So like what you're gonna do each time. And typically you're going to increment the value because in for loop you're using numbers, right. You're gonna be looping through an array and you're gonna be starting with what number? In JavaScript what do you start with? If you're looping through... What, what was that, sorry? You're at zero. I just talked right over you. Yeah, zero right, yeah. Okay, so you start with zero and then you apply this condition and then you increment that and each, for each one of those things you do your, you do something within that block. So it looks something like this. For var i equals zero, i is less than three. Typically you wouldn't have like a hard coded number there for three, you would have something like a variable. You'd have like the length of the array, right. And then i plus plus, plus plus just adds one to the number. So that i there, it doesn't have to be i, it can be anything you want it to be, i is just a convention, it's just a one letter variable name, okay. You don't have to var it here, you can var it outside of this, of the parens there. But you should, but you shouldn't just say for i equals zero without var-ing that i, right. Because then i becomes this global variable that, something somewhere else can... Like if you're doing a few loops like this, you know, like they can mess, they can mess with each other, they can mess with each other's heads, you know. Like it'll change the number and it could be weird you know. It could start with the number 23 if another loop has gone through. Well no, it wouldn't it would start with zero, but still you get the point. If it's looking for, if you're looking for i at some point. Nah, in any case. Here's a common use case for this. We're gonna get all of the divs, right. All the elements by tag name we're gonna get all the divs. We're gonna loop through them and we're gonna change the color. We're gonna, you know on the style property of those divs, right. And so, yeah. Pretty straight forward right? Divs dot length, that's the, you know. This divs variable here, this is not a true array, it's a node list, it's a live node list, okay. It'll update it you add divs. In any case, yeah. Yeah? So that div is removed. Does the length update while you're in a loop, if it's a live loop? Yes. Yeah. Which is a prob, which can be a problem. Yep, because then you could only apply it to, you know, like all but one, all but the last one, right. So yeah, that, because here we're checking it against the length each time. And it's also, depending on the length of the array, it can also be wasteful, right. Like something you don't need to check the length every single time, right. Sometimes it's better to store the length in a variable first, right. So now I'm guaranteed to go through all of the divs that are there when I start. Yes? Another way you can do that if you don't wanna have a div count there floating around is you can right after where you're declaring var i, you could just put in like another, you can put in like a var L and then they like hopefully call the length and you can get the length there, and you use i is, you know, greater than L over there. Exactly, exactly. I'm so glad you just explained the next slide. (laughs) I was looking ahead I was like, wait a second. (laughs) Yeah I did that on purpose. No, but that's awesome, you're absolutely right. So here I'm, notice here I'm using a comma to separate those two variables, right. If you separate two statements like that with a comma it's applying that var to the second one as well, okay. It's declaring the second one too, it's not just setting it. You can't put a semicolon, you only get, you only get two semicolons here, right. But yeah, you can do it right in here. It's still going to be within the same scope, but it's more compact, I guess, yeah. Because for statements are not functions. This is not, JavaScript's variables are lexically scoped, they're scoped to within the function. So it really is six one half does in the other, right. But it's nice. Okay. For-in loops. Same kind of thing. So you can say, for var person in family. If I have an object, a family object. So each time I go through here, for each element in that object, right, person will be the key and family person will be the value. Right? Does that make sense? Yeah? Okay. While and do-while. I don't use these very much but they can be handy. They don't do the iteration for you, so you have to do them within the code block. Okay. So you would have to do the plus plus. Or you could start with four and work backwards. And say like while i is greater than zero. You know start with var i equals four or whatever. And then do i minus minus. So, all right. Functions and Arguments Let's talk about some functions. You can work with functions in JavaScript. We talked about arrays, objects, strings, numbers... That's basically all we talked about so far right. Okay. So functions allow you to define a block of code, optionally name that block, and then call it later, as many times as you want. So you can have the same thing do what you want it to do repeatedly. Okay. So here's our function declaration, here we're defining the function. And here we're calling it, okay. So whatever we said, set up to happen in that first, when we defined it, that's what's gonna happen when we call it. Make sense? All right. So you can define functions with parameters, right. Param one, param two. And then you call the functions with arguments. So my function one and two like that, and so it will use one and two, those strings, in place of param one and param two within the function that you defined. And so you know, so basically you're using those as local variables. All right, okay. Function, do something. Alert I am something, okay, and then you call the function and it alerts, and it says I am something, right. You can also define a function and return something, return a value right. So I'm gonna do function something (laughs). A little play on words there. And I'm gonna return a plus b. So I'm expecting numbers, right. I guess I could do strings, but it would just concatenate them. And so if I alerted something one, two, what would it alert? Three, awesome. You passed first grade math. All right, and JavaScript. All right, cool, so. Here's, this is kind of cool. You can assign the return value of a function, you can assign a value, a variable to that, right. So this is the same thing, right, we're defining the function, but here we're saying, okay I'm gonna let my sum equal the return value, whatever comes back from that. And then when I alert my sum that equals the return value of something with one and two, right. And so that will alert what? (mumbles) Yes. Okay. The arguments object. Now this is something that's a little bit different, something a little unique to JavaScript. How many of you have worked with the arguments object before? Yeah, okay, a few of you nodding your heads, cool. All right, so with the arguments object, every function has one, right. And it's a collection of the arguments passed to the function when it is called, okay. So if I pass one and two in, the arguments object is gonna be a collection containing, it's going to be an array-like object that I can loop through. I can't apply other array functions to, or array methods to, unless I convert it to a true array, but I can loop through it and find out each one of those. It has a length property so it'll tell me how many arguments were passed in. Yeah. And what this does is it allows for a variable number of arguments, right. So you could do something crazy. Like this. Like function log thing. And notice I have no parameters in there, I have no explicit parameters. But what I'm gonna do is I'm gonna say for var i equals zero i is less than arguments dot length, i plus plus. And then for each one of those I'm going to console dot log the value of that argument, right. And so if I call it like that, log thing one, two, three like that, that's what it's gonna print to the console. Does that make sense? It's kinda handy. Coding Exercise My something function. I want you to allow-- I want you to convert this to allow for a variable number of arguments, okay. So use a for-loop to loop through the arguments object adding to a sum variable with each iteration, and after the loop, return the sum, okay. Does that make sense? All right, I think you've had enough time. Let's see. Let's create another file here, scratch dot JS. Okay. And I'll put that on here. Huh, where are we? Yeah. Scratch.JS Okay. All right folks, what are gonna do here? We want to create a function right? And what do we wanna call it? Something. Okay. So we're giving it a name. This is a function declaration. So we have our parentheses after it, we start with the function key word, all right. And then we have square braces, right? No. All right, curly braces, okay. All right, so now what? What do we do now? ForEach. ForEach? Yeah. Yeah, ECMAScript 5 has a forEach method, but it probably wouldn't work on the arguments object anyway. So we don't have a forEach, we have another kind of loop that's a JavaScript. A for-loop, yeah there we go. Okay, so for... In. For-in. Okay so this is an array-like object, so it has a length and it's an indexed object, right. And so each argument is going to have an index. So we're not gonna use a for-in loop, we're just gonna use a for loop, okay. So we wanna say for, what? Var i equals zero. Var equals, for var i equals zero. And then, i is less than... Arguments dot length. Arguments dot length, right. And we want to iterate, ah, increment, we wanna increment that by one each time. Okay. Some people try to be cool and that, like they'll take this out of here and they'll stick it like in here, for whatever reason. I think that's kind of silly, but. Okay. Let's see. Now what? We wanna log it to the console right? So how do we do that? Come on you wrote it already, tell me, just tell me what you wrote. How do you log something to the console? Console dot log. Console dot log, okay. This is just another function, right. The log, log is a method of the console object, right. Okay. And what are we logging? We're logging this particular argument, right. So arguments i. So each time you go through it, so the first time you go through it's gonna be arguments zero. Which is the first argument, right. But that's not really what we want, we don't wanna just log... We don't wanna, nah, we don't wanna do this, right. We just wanna log the result. So what else do we have to do? Declare a variable. Okay, great, declare a variable. And we'll call this sum. And what, should we just declare it like that? Equals zero. Equals zero, right, we should start with zero. Yeah. And then, each time we go through for each one we wanna say sum is equal to whatever sum was the last time, right, or, you know, before we looped in the case of the first iteration, plus... Parseint. Arguments. Yeah so we could use parseint or pasefloat if we wanted, if we didn't trust the person who was calling the function and thought maybe they would, maybe they're gonna stick a string in there or something, but let's just pretend that like, whoever's using, you know that you're using this function and that you know that you're gonna put numbers in here, okay. So sum equals sum plus arguments i, right. And then, after it finishes looping through each one and adding to what the sum is at each iteration, we have, we can return something, we can return a value. And the value is sum, right. We can return the value of some there. Now the shorthand for doing sum equals sum plus arguments i, instead of doing this, we can do sum plus equals arguments i. That's the same thing it's just shorthand. Okay. Does that make sense? We good? Okay, so now if we said, if we did... Now we're gonna call it, so same thing except without the function keyword, let's say one, four, five, eight, and 15. I don't even know what that is, but let's see, that would six, four, 29. Okay, so let's go to... Where are we? I'm at slash scratch dot html. Oh, that's not it. Maybe it's intro. No. What's the matter for you. Let's see. All right. Tell you what, let's just stick it in the console shall we. Ta-da. Can you see that down there? 29, I was right, yay. I passed basic math. All right. All right, so does that make sense? Now you know how to use the arguments object, right. Yes? I've had pathing and straining with and under. Oh yeah so you wanna break it? Okay, so let's just do it with, with the last one. Yeah. It's 14 15, right. 'Cause it takes whatever was added up so far, the 14, and just tacks 15 onto it, right. So yeah, you could use parseint. The problem with parseint though is that, what if we have 8.3? Then parseint doesn't work. So what we would need is parsefloat. 29.3. All right, cool. What if you pass in a string like the words RO? Then it's at 15. Oh man. Then you know what it'll do? It'll, yeah it'll... Let's see, doesn't anybody know? I think I know. We pass the number but it's i (mumbles). But Karl isn't a string. I mean Karl isn't, no it won't do it if I'm parsefloating it. What happens when you try to parsefloat something that isn't a number? You get NaN back, not a number. That's right, you get NaN back, not a number. So that's what you'll have tacked onto the end. Yeah, add it on to the back. Oh, what did I just do? Woops, wrong key. It is numeric. So what you wanna do then is do a, you wanna check the type of that same procedure, type of. That's right. Yep. Yeah, and so. Right if, yeah you could say if it's, you know, if is NaN, blah-blah-blah, yeah. So you could, you can get really very, you can get very defensive with this, which is a good thing. But for our purposes, we're just showing how to loop through an arguments object, right. You're gonna start seeing some of these patterns in jQuery. And it's kinda like, you know, when you buy a car, all of a sudden everybody is driving the same car. It's like, wow, so many people bought the same car as I did. You ever have that? Same thing here, I think, like you know that if you familiarize yourself with something, pretty soon, you're gonna start seeing it everywhere, right. That's what I'm hoping. Named and Anonymous Functions Here's something funky about JavaScript, functions can return other functions. Which is kinda neat. It's kinda bizarre right? Like here's something like if, if we wanted to multiply something, right, we could have a multiple function and inside of that we could define another function and then we would return that function, that inner function, right. And so, if I say var triple equals multiple three, that three represents the end there, or is represented by the end, right. And so, then, then if you use triple, if you call triple with a number, it'll multiply that times three, right. So triple five is 15, quadruple five because we passed in a multiple of four first, will be 20. You can also put parens, you can stack parens next to each other. I don't know if you knew that, that's kind of a funky thing isn't it? So you could do it at once, multiple four, five just like that. Because it's returning a function that immediately gets called. So it's a little esoteric but we have a wide range of knowledge basis here so I'm trying to touch on as many as possible. Okay so here we're getting into jQuery land I think. Because I think if you look at examples on the web of jQuery scripts you'll see a lot of what we call anonymous functions, okay. And anonymous functions are functions that have no name, right. So check this out. The first function there, function foo, the first one is a function declaration. We're just starting with the keyword, right. The second one is a function expression. We are saying that, we are saying this variable foo is going to equal this function, and it happens to be a named function and the name of the function happens to be the same as the variable, right. It's kind of funky, but go with it. The anonymous function is also a function expression. Right. But the function itself has no name, right. There's nothing that comes after function, there's no name that comes after it. We're just assigning a variable to this, this function. And obviously in each case we're not doing anything in the function so it's not gonna return anything, it's not gonna do anything but that's just for the demo. Yes, question. They look exactly the same to me. Okay, which ones? Oh I see, okay, no there's, it's just this function. Okay so the foo is told to the latter. How does the var foo work? Yeah, I mean you don't need to have the same name here, you could say var bar equals function foo. 'Cause when I think of naming a variable, I think of saying var foo equals and the foo is the name of the variable. Right. When you say name zero var foo equals functions foo it seems like you're naming it twice. Right, you are, you're not actually naming... When you say var foo equals functions you're not naming the actual function you're associating it with a name. So you're naming the variable and then you're naming the function. Right, right in that second one. In the third one, we're just saying, we have this function that doesn't have a name, because they're named by putting something after the keyword function. And yeah, it happens to be anonymous. Okay, so anonymous functions are prevalent in jQuery, they're nice for creating closures, we'll talk about that. That's where you can contain variables so that they're not colliding with other variables of the same name elsewhere, right. They're used as callback functions in jQuery, and they can be used as object properties, okay. So let's take a look. Prevalent in jQuery, document ready. How many of you have seen code that uses document ready, jQuery code that uses document ready? Okay, almost everybody, right. Document ready. What you see inside the ready there, that's an anonymous function. And check this out. Ready is a function, right. And the argument for that function is a function. We're passing that in as our argument. As opposed to like when we were doing something, we were passing in a number, like number one and two, or whatever, here we're not. We're passing in a function, right. We could do the same thing here... Like we could do this this way. Ah, sorry. Okay. Tell you what, let me do it in TextMate 'cause it's easier. Okay. So, oops. Here is ready. Okay. There is document ready. Now I could say, I could do this, I could say var my function equals you know do something in here, right, and then I could say my function. Does that make sense? I'm saying that this is the same thing as this. So I'm passing it in as an argument, I'm referencing that as the argument of the ready function. Or I could do it like this. Oh function my function. And then pass it in, same idea. Yeah? I understand that the document has a ready. Do elements have a ready? No, nope. No, no. Images have a load. Yeah images have a load, other things have a load like the object element. Or iframes have a load. Things with like an SRC tag. But not, not, they don't have a ready. Okay. All right, so. Whenever you have a function, variables that you define, that you declare within that function are limited to that function, okay. Okay. So here's a pattern that you'll see a lot. If you ever download a jQuery plugin and you look at it, you look at the actual code instead of just like dropping it in and ignoring it, you'll see something like this, a lot of jQuery plugins do this. They have an immediately invoked function expression. Okay. And that's a lot to, to manage so I just call it an iffy, okay. Okay, so this is what it looks like in jQuery plugins often, right. It'll have, it's an anonymous function, right, and we put parentheses around that anonymous function, and then we immediately call it. Okay. And we do this so that like jQuery is what is available outside of it, right, we're calling it with that jQuery, and then dollar is the, is what we can, that's a functions parameter so we can use that inside the function. That way if we're using jQuery and Prototype, or jQuery and MooTools on the same page or something like that and you're using a plugin, if they don't do something like this, then it's going to break, okay. Because those other libraries also use the dollar as a function name, okay. And it's a global. They're used as callback functions. So this is kind of interesting, this is a jQuery animation that will slide paragraphs down slowly, right. And so you see here the second argument is an anonymous function, right. And what this does is, the reason it's called a callback function is that here we're actually defining what the function is, right. And jQuery internally will call that function when it finishes with the animation. Okay. So you can... Like sometimes if you wanna fade something out and then remove it, right, you would fade it out and then put the remove in the callback function. So that you're not removing it like immediately. Because these animations happen asynchronously, right. They happen and they let other stuff continue happening while they're happening. Objects In JavaScript everything's an object, almost everything, right. We looked at, we already looked at a bunch of this stuff, right, objects, arrays, functions, jQuery as an object, number strings, booleans or primitive data types, but they can be wrapped as objects. So window is the global object in a browser context, right. If you don't, again, I know I've said this a number of times but if you don't declare your variable, if you don't start it with var it becomes a property of the window object, right. So it comes with some useful properties and methods, location, window dot location and that's an object. It has like, you know the href or the path name or the host name or whatever. Parseint, parsefloat, isNan, encode URI, decode URI, set timeout, clear timeout, a bunch of others, okay. All right. Interval, blah-blah-blah. There's a date object, so you can do stuff with the date. Regular expression object. Okay you can, you can do it with the object constructor, you can say new reg ex pah hello, or you can just do a regular expression literal. So just slash, whatever, slash. We're not gonna get into regular expressions today, it would take too long and I know you wanna get to more jQuery-ish stuff. Using a regular expression. Whatever. I didn't think I had all these things in here. Okay. We're skipping all that. I thought I had that stuff hidden. Somehow it just magically appeared. There's a lot of it. You can look at it on your own. There's a math object. So you can do math functions. Okay. For those of you who are more CSS-ey, right, check this out. The object literal notation, right with the curly braces, it looks a whole lot like CSS notation doesn't it? I mean there are subtle differences, but it looks a whole lot, it looks pretty similar. I like that. Okay. Here we have var person. Okay, first name, last name. Check out hello, see that, that's a... You could have a function as a value. Whoops, did I? Yeah, sorry. You can have a function be a value of one of these object properties, right. So I can call that function, I can say, person dot hello with parens. Interest's down there. Interest is a property of the person object but it's also an object itself, right. Okay. Here's something really important to remember about objects in JavaScript, no trailing comma, okay. Don't put a comma after the last item in an object. You know why? Anybody run into this before? Like in PHP if you have... I'm sorry I keep talking about PHP, it's like, I know a little Ruby but PHP is otherwise the only server-side language I know. But if you have an associative array, you can put a comma after the last element in that associative array right. And it's kind of nice to be able to do that 'cause when you add an element later, you don't have to worry about, oh yeah everything broke because I forgot to put a comma there. Here no comma. That's just the way the spec is, the specification for ECMAScript. Which is JavaScript basically. And almost all browsers are forgiving if you put a comma there, but Internet Explorer is not, it'll throw an error and your code will break, okay. And actually in that case, that's not, that's not necessarily dumb of Internet Explorer it's just a choice, I mean they have very right. You know, that's what the spec says, no trailing comma. So it says, eh okay, well, if you put one in there we're gonna throw an error, right. So whatever. All right, so to access properties of an object you can use dot notation or you can use array notation, okay. Dot notation, person dot first name is Karl, person dot last name, blah-blah-blah, right. You just put a dot there, right. Person dot hello. That'll return hello my name is Karl service right. So it's kind of cool. When you're using object, when you're creating an object literal, notice my inside that hello function, see it says this. This refers to the parent object, okay. So it refers to person, so person dot first name. Any questions? All right. You can also use array notation. Notice here that first name, last name, and hello are all in quotation marks, right. Because these are actually strings, right. Yeah, you know, you could put a number in there but that wouldn't do any good. You'd put a number in there if you had like an array, not an object, right. Okay, so why would you want to use array notation versus dot notation? Well we'll answer that question after this. First you answer this question. What does this equal? Those two things down at the bottom, person, interest, musical, one with the array notation and the dot notation those are equivalent, right. Those are basically asking for the same thing. So what will be, what will that equal, anybody? Folk. Folk. Folk, yep. How many of you see, how many of you don't see, and does anybody not see how it's folk? Go like this or something if you're not quite sure beause I want everybody to... Yes? I just don't understand what the one does. Ah, excellent. I'm glad you spoke up. The one is for an array, right. Because these things are arrays. Sorry, I'm moving around on ya. Go for it. Okay so those things are, those are elements in an array and arrays don't have the keys, right. The keys are actually numbers, starting with zero. Okay. And notice that with, like I can use dot notation on everything, but I can't use dot notation for the number. Because it, you know, it's a number. Yeah? I'm just wondering why you have interest and musical in quotes where person is not. And then when you think, when you did the dot notation (noise drowns out audio) the whole story there. Ah, right, right, right, right. Or will it break when they're not there? Yeah, yeah, okay, so when you're using the array notation and you're referring to something that's a string like alpha numeric characters, right, then it has to be in quotes. It can't be in quotes if it's just dot notation. If it's a number, it's not in quotes because numbers aren't in quotes, strings are, right. But this'll, this'll I think give you a better idea of why you would, why it's a really nice thing that those are in quotes. It allows you to do something like this. Okay, person.firstName equals Karl, right. I can set the properties now by doing dot notation. Additional Object Examples Let's say I wanted to-- let's say I have another variable assigned and I assign it to first name. Okay like I say prop equals first name, okay. Now I can say person and use array notation, person prop, and I'll get Karl. And notice there I'm not using quotation marks, right. Why not, because that's a variable and the variable itself doesn't have the quotation marks. It's representing the string. The value of it does have the quotation marks. Okay. And so you can kind of... Yeah, so like you have this variable and you just plug it into the array notation and you'll get... Yeah, so first prop is first name and then I changed it to last name. And so each time... Yep, so because, here because prop equals first name, doing this is the same thing as doing that. Right, because I just said the two things were equal. Right. Okay. So then I can just change the value of prop depending on which property I want to get. Okay. So then it get kind of cool for the more advanced people here, right. Because now you can loop through this object and you can say, oh depending on what type of value it is, we're going to do something different with it. If it's a function, then we're gonna call the function. Otherwise we're just going to set it to be that thing, right. And so blah will equal the result of saying person... In this case it'll, the only person element there that's a function is hello. And so that one will be called, otherwise it'll just show what it is, what the value is. And that's a fancy way of saying, if then, using the question mark and the colon, okay. Okay. Object literals are greatest function arguments. Right. How many of you have seen this kind of thing in a jQuery plugin when you've used a jQuery plugin? Yeah, or any jQuery method, right. Like a lot of them use this, they use these object literals, right. And the really nice thing about this is that inside the plugin or inside the jQuery function it has a set of defaults, right. And so you can just set one or, or more of these options to override the defaults, right. And then the other ones will use the, will just use the default value, right. And you can put them in in any order within that object. Right, it doesn't matter because they're all, they're all keyed up to those properties, it's nice. Instead of having like 15 arguments, you just have one argument and it's a lot more descriptive that way too, right. You can see, ah, the speed is fast, the height is 500, the width is 200, instead of like having three arguments and having the first one be fast, the second one 500, the third one 200. This happens to me all the time, I'm like, which argument goes first, which argument goes second, wait, how's that work? Like in other languages. This kind of thing is really nice when you have a lot of things. Okay. So JSON, or some people will say jay-san. I say jay-son. How many of you have heard of this, heard of it? Okay, awesome. Do you know what it is? I mean, sort of, but you may not realize that it's, it's a subset of this JavaScript object literal notation, right. And it's a subset and it's very specific about how it has to be, about its syntax, right. So you may have notice here that the keys in that object, like speed, height, width, something else, none of those have quotes around them. The quotes are option. You can put them in there. And remember you can do single quotes or double quotes, doesn't matter. If you're using JSON they have to be quoted. And they have to be double quotes, all strings have to have double quotes. That's the rule. And Douglas Crockford made the rules, and he's not about to change them. You can't use functions either, as property values. So there you have it. JSON notation, an awesome thing about it is that like if you're using a server-side language, you can have that server side language create the JSON for you. Like Ruby has a to_json method, I think. Yeah? And PHP has a json_encode method, and so it'll take a PHP array and it'll turn it into a JSON string. And so you don't have to worry about the syntax. You don't have to worry about, ooh, I'm using double quotes, I blah-blah-blah, right. Rolling your own by hand is a dangerous business 'cause you'll probably, you'll mess it up at some point. I have, that's why I've, I've tried to kick the habit. This is JSON. Right, this is what it looks like, it's just like object literal notation. Typically it'll look something more like this. Like it won't be all pretty, pretty printed out for you. jQuery and JavaScript Loading Here are some general rules for adding your script elements in your document, right. So one thing is you wanna add your scripts after you reference your styles, your style sheets, okay. That way, the browsers have a chance to parse the styles before it gets to the script in case there are any functions in the script that rely on CSS. You wanna reference custom scripts after jQuery core. So like anything that uses jQuery, you wanna reference after jQuery is already loaded, right. And typically you'll wanna put plugins in between the core file and your own custom files, okay. Usually you will either reference scripts in the head or just before the closing body tag. How many of you typically put your script tags like in the head of the document? All right. Down at the bottom, at the end of the body? Okay. Okay some of you don't do it at all, okay. Okay. We'll look at the difference, or we'll talk about the difference. Where can you get jQuery? Well you can get it from the jQuery homepage, download it and just use that local script. Or you can use a CDN, a content delivery network, or distribution network. Google has one, Microsoft has one, and jQuery has one, right. And you can use any of those. This is online, so you can reference that there. So this is what it looks like if you are referencing your scripts near the closing body. If you've ever used the Yahoo, the page slow, slow page, is that what it is? Haven't used it in a while. YSlow. YSlow. I knew it wasn't page slow, I was conflating a Google page speed with YSlow. Anyway, they recommend putting the scripts at the bottom, near the, you know, just before the closing body tag. The reason is that if you load your scripts the conventional way like this, they are blocking elements. Which means that the rest of, whatever is coming after it can't, the browser won't do anything else until those things are fully loaded, okay. And so if you start, if you have them in the head, there will be some amount of time during which the user will see nothing, they'll see just like a white blank page. If you put them in, near the close of the body, at least stuff will be rendering on the page, the user will start seeing stuff on the page even before it gets to this, right. And so it's not like the, it's not like the whole page is gonna load faster this way, but the perception will be that it's loading faster. Because they're gonna start seeing stuff sooner. And perception is important. Okay. So here we have using the Google CDN, and we're doing it in the head this time, right. So that's kind of what it looks like. We still have it after the style sheet. Here's another option. You could load jQuery in the head and load all your custom stuff at the bottom, you know, right before the body. That sort of thing would make sense if you were working on a big project and you have server-side guys who were injecting JavaScript like willy-nilly into the document, like, and you're not sure where they're doing it but you know that they're using jQuery, right, and it's all kind of dynamic and, you know, it's outputting stuff and you have no control over it, or you'd be a lot cleaner about things. But this way you can be assured that jQuery will be available when they start doing that stuff. And you can wait. But you don't, you know, but your loading as little as possible before the page starts rendering. So that's another option. Okay, document ready. Already mentioned this. Document, what document ready does is it will, this is like an event listener, right. It will execute the code that, it'll execute the function inside that ready function, you know 'cause it's your argument, when the structure of the document has loaded, okay. So this is when the DOM has loaded and it's been parsed by the browser. This is, if you have a lot of big images on your page, this maybe quite a bit sooner than when the, when the windows loads, okay. Because the window onload event happens when everything has finished loading, all the images, all the whatnot, everything, right. Okay. So it doesn't wait for images to load. It's usually better than window onload. So this is how you use it. Ta-da. Okay. So are there occasions when you would want to use, you would not want to put your code in a document ready function, when you'd want to load things after document ready? You'd maybe wanna go before if you're not interacting with the DOM and you'd wanna go after if you're dealing with images. Okay, yeah, right, right. If you're dealing with images and they don't have a width and a height attribute or something like that and you need to know just how big they are, you're gonna wanna wait right. Yeah, good point. Also browsers do this differently, but you know how like you get like a little loading indicator or you get like a little spinner on the tab or whatever, like a little thing, browsers handle this a little bit differently, each of them, but, but if you have a lot of stuff to load and you know it's not gonna be used until the, until everything's loaded but you have a lot of big, heavy scripts, it will be less obviously that they're loading if you wait until after window load. Because it's not gonna show this. If it's before that, in many browsers, it'll act like it's still loading the page. And so people will be like, ah, should I do something, or shouldn't I, I don't know 'cause it looks like its not done yet, you know. But if you can safely wait, again, it might increase people's perception that you have a snappy page, okay. So yeah, when images need to be loaded first, when you're absolutely sure you won't need to execute the script until everything's finished loading. Then you could do like window.bind 'load'. Okay. JavaScript Loading and Execution Tips Before document ready. When would you need to or want to do something before document ready? When you're not interacting with the DOM. Yeah, sure, when you're not interacting with the DOM. Yeah. Like if you have, if you need to fire off an Ajax call like as soon as that page, loads, right, you might wanna get it started immediately, right. You might not wanna wait until the documents ready. You might wanna put jQuery in the head and have your Ajax functions in the head too and get started on those while the browser's rendering the rest of your page, right. And you can get the response and then like in your callback, for your Ajax, we'll look at this next week, but in the callback you could have the document ready in there. If the document is already read (laughs) when you call document ready, it'll fire it immediately. So yeah. So it's nice that way. You don't have to worry about it. Like as opposed to like window onload, right. If you miss the load event for window, you're screwed (laughs) right. It's like, oh well it already loaded so I'm binding something to the window load event and it'll never happen, so ah. Images a lot. What's that? You can run into that with images. Yeah you can run into a lot of problems with images. That's a real pain, yeah. Yeah, actually, buy my book (laughs), I'm teasing. But we actually wrote an Ajax transport for image, for images that deals with some of these issues like when the image returns a 404 or like in Internet Explorer when, yeah when it's cached it won't fire the load event, the onload event for the image, but it'll give it the complete property. And so you look for that and there's all sorts of weirdo edges cases. Yeah. So before document ready, when what you're doing doesn't have to do with the DOM. Or when something needs to be styled or hidden or something immediately, right. And I'll show you. When you need to avoid the dreaded flash of unstyled content. You know what that's like? You ever do that? Like where you want, like you have this awesome tab, tab user interface, right but it takes a while for your page to load and so it looks like crap for about a half a second before it all kind of snaps into place. Yeah, yeah. So here's what you can do. Put this in the head. Document dot document element, that's your HTML tag, right, dot class name equals js. That's all you have to do, right. So what that allows you to do is in your... Whoops, tell you what, I'll just, I'll make a scratch.CSS too. Okay. So it allows you to do something like this. Like I have my tab panels, right and they are position relative. But if the user has JavaScript enabled, then tab panels are, whoops, position absolute. Right. Because you're giving that HTML element a class of js and now tab panels will be a descendant of that, and so it'll just magically work. And it'll work like immediately because it's already set before the body is rendered, right. And the CSS is already parsed and so you're all good to go. It's cool, right. I mean this is even, like for this and it's-- whatever, you know, it's okay. Like you could maybe do it without this and then it would just look ugly if somebody didn't have JavaScript. And, you know, that's a choice you're gonna have to make. But I would say that if you're working on a public site and you can't control whether people have JavaScript, you should never, ever, ever hide content from them through CSS and require them to have JavaScript in order to see that content. I think that's unfair and immoral (laughs). Yeah, so like you could do this, you could say, tab panels display block, I'm just making this up, but... Display hidden, right. So now, again, it will be hidden immediately and you won't get that flash of unstyled content, but it'll only be hidden if people have JavaScript enabled because that's how the class name is being added, it's being added with JavaScript, right. And so presumably at some point based on some user interactions or whatever, it will give them, it'll change the display of the tab panels, you know, at some later time. All right. So okay, yeah, so this is another wrinkle in the whole thing on, you know, whether, whether to put things in the head, or the body, or whatever, you know, how to load these scripts. And really what we're talking about now is performance, website performance, right. There are a number of script loaders that try to do things in as fast a way as possible, and asynchronously so it won't block other things from occurring when you, when you load them. So I'm not going to get into this too much, or at all, today. But there's a really good response that Alex Sexton wrote to a question, "what are the use cases for..." I would say the top three script loaders, or my favorite three, "RequireJS, Yepnope, or LABjs?" And he talks about that. They all have their advantages, they all have their use cases. None is like, this is so much better than the other ones. You know, they just, it's for different needs, okay. So check it out if you're interested in that sort of thing. jQuery Selectors and Traversal Find Something It's an art really, I mean you have to, you really have to consider these things. We didn't even talk about concatenating and minifying your scripts and gzipping them, it can dramatically effect the user perception and overall experience and a lot depends on what you are trying to achieve, right? So, ah! Let me show you this little example here. I'm going to pop it out of the full screen mode for a sec so that I can clear my cache.I want you to look for three boxes They're like big blocks, right? One will be green, one will be red, one will be yellow. Ok. Just yesterday it held onto that red one so much longer. Let me try this one more time. So watch again. There we go! You see that? You see the difference? I mean it's pretty dramatic right? Did you see the green one at all? No, you didn't. (laughs) No, the green one you didn't see because that was hidden using that technique of, you know, CSS and the JS class on the HTML element, ok? If you use Modernizr, it does that for you, you know? So put Modernizr in the head, it's awesome. And the yellow one was using Document Ready and the red one was using window.onload, right? And so this is how many milliseconds at 983 after, from head to ready so it's almost a second and it was three and 1/2 seconds to window.load 'cause I put a bunch of big, big images on there, alright? Yeah, any questions...about that? No? Alrighty. Back to slides, ok, selectors and traversals, traversal at the heart of jQuery, right, find something, do something, we're going to talk about find something now, ok, for the CSS people here, check this out, you see? It keeps like, I feel like I'm on a ship or something. Ok, look at that. Here's your CSS selector. Here's your jQuery equivalent. Notice the difference? The only difference is that with jQuery we're, the selector is a string so we have to put it in quotes and it's an argument of this dollar function so we have to put the dollar and the parens around it, and that's it. So the moral of the story is use what you know. You know the people who are good at CSS, you have a huge advantage here, you can get anything you want, right? By just using this CSS selectors that you've known and loved for years. Make sense? Are you familiar with all of these? Is everybody familiar with these? Any of them that look odd? No? Ok, cool. How about these? Those all make sense? Any of them that look odd? What, can you just explain, sorry, prevAll? Yeah, yeah, sure, so what this does is, so the pre-plus selector, yeah, that prevAll, that's kinda of weird way of saying it, ok, so the first one, the plus combinator, this is a CSS selector, right? It's not used very much because we're all still stuck in some way, even if it's just emotionally, in IE6 land, right? Where we think, ah, I can't use that because IE6,IE7,maybe you know,they're not gonna,they don't support this selector right, so what this does, this pre is the previous element and selector is the one that's actually selected, that's the next adjacent sibling, ok? So if you have two li's right? And you used li plus li, it would give you the second one, right? If you had three, it would give you the second and third because the second and third both have one that immediately precedes them, yeah? Cause it's like saying ok, so the next, the next element that matches this selector, the very next one and the tilda is like, if I had a div, and then, a paragraph and then a div, and a div, and a div and they were all siblings of each other right? And I said, paragraph, or p tilda div that would give me all the divs that followed that paragraph that come after, so it wouldn't be the one before it but it would be all the ones that come after it, ok? Not :checked disabled,:checked is a really weird one in CSS. Well, I'm not even gonna get into that right now, ok? Attribute selectors. You know about attribute selectors? This is nice and if any of you are familiar with regular expressions, this is kind of like regular expression-like syntax so you know, you have a leg up here, I mean, although there's weird stuff like the tilde equals that isn't really a match but anyway, you can say that sum attribute equals this value, so like eight trap equals this value or doesn't equal this value or the bang equals, that is not a CSS selector, that's a custom jQuery selector that we threw in there and it's come back to haunt us. And, yeah, begins with, ends with is anywhere there. The attribute has a value as one of its space separated values so like if you have like a rel or a class or something like that and you wanna just say is one of the rels, no follow? You know, I don't want to get to one that says, I don't want to get it, if it just says, me no follow likey or something you know, it has to be no follow, you know, so it can't be anywhere in this string, in the attribute, it has to be, that word, right? So those can be really handy and then we have some custom form selectors, let's not even look at these. Custom miscellaneous selectors, eh? Ok. You can get a list of all of these selectors on the API site category/selectors and you'll see all of them and you can read all about them and love them. Traversal Methods: Up, Sideways, and Down Traversal methods! They allow you--selectors pretty much allow you to go in two directions, right? Either sideways or down. Like you can, you know, basically, you know, you can go down from something like with a descendant or child or you can go like across with some kinda of a sibling selector or you can filter them out right? But you can't go up to a parent with a selector? But with traversal methods, you can. You can move up with one of these. Parent moves up one level, parents with an s, moves up multiple levels and parentsUntil will keep moving up until it hits whatever you put in that argument, the parentsUntil argument, right? So, tell me, the first one, li.bottom.parent, what will that give us? What will we collect? The inner ul. The innermost ul, yes, good. How about span.parents ul? It'll give us all of the uls, in order, starting with the innermost one going up, ok? It's one of the few cases where the elements are not returned in document order, ok? When it's a parents thing, it's like kinda of in reverse order, right? Because you know, you might wanna say, I just want to get the first one so it has, has to be in that order, ok? ParentsUntil span, parentsUntil ul, what will that return? The innermost ul? I'm sorry? The innermost ul? Uh, no. Good guess, it's going to go up to the ul but not include it, so it'll give you li class equals bottom. Does that make sense? So if I did this... if I had that, and I said span.parentsUntil ul.foo, it would give me li, ul, li, well, li.bottom ul li, in that order and it would stop there, yeah, parentsUntil isn't really all that useful, you what's really useful though? NextUntil, like for example, if we had something like this, let's see, let's say we had in our document, we had a dl, right, and then we had a dt, right and then we had like five dd's and then we had another dt. And we wanted to, like if I, if somebody clicked on this one and we wanted to hide all these dd's but we didn't wanna hide the dt there, right, we wanted it, oh and let's say this one had a couple here too, right? We couldn't just say nextAll, all the next dd's cause then it would hide these too right? That would be bad so we could say nextUntil dt, you know, so we'd say, yeah. Alright, ok, closest, closest is really nice when you're working with event delegation, which we'll talk about next week so what this does is it starts with the one that you selected initially, so it'll start with, for the first one, it'll start with the span and you're saying closest ul and so it'll start with that span and say, Is this a ul? No, it's a span, silly and then it'll go to the next one li, Is that a ul? No, and then it'll go to the ul there and say, Is this a ul? Yup! And so and then, it'll stop and then it's not gonna give you anything else. So it's the closest parent or that thing, right? So the .bottom closest li, right, so it's gonna say, ok, I found my .bottom, is this an li? Yup! This is it! I'm stopping right here. Pretty nice, pretty handy, ok. Sideways. We have a whole bunch of sideways ones right? Siblings, which you'll find all the siblings on either side. Next, nextAll, nextUntil and then the equivalents for previous, prev, prevAll, prevUntil, ok? Now, let me tell you something about siblings. You know what siblings are, right? They are elements that have the same parent, right? So if I have, like, I don't know, four of those, and this has class equals foo but then I have another, right? Ok? And I say .foo nextAll or .foo siblings, right? How many siblings will I have? How many elements will it return? Three. Right. It's not gonna give me this one, is it? That's not a sibling, that's a cousin. Right? Because it's parent is a sibling of this one, right, so that make it a cousin, right. So in Oklahoma, they could marry. Eh, sorry, that was bad. Alright, yeah, and then moving down, we have children and then we have find. Do you know what the difference is between children and find? I don't know why it didn't say like, I don't know why we didn't come up with like children and then descendants. I mean, that would sort of make more sense, right, 'cause descendants could be children or grandchildren or great-grandchildren or whatever, but, ah, whatever. Same thing with like parents and then, you would think would be ancestors, right, but no. Parents. Alright, in any case, children is the immediate children one step down from the element, right. Find is, will look anywhere down there. Find? With find, you need a selector of some sort, you need a filter, like you need to stick an argument in there. With children, you don't, if you don't have it, it'll get all the children, like all the immediate children. With find, I don't know what'll do, it probably won't do, it'll probably return nothing or an empy object. Yeah. How can you get all the descendants? But I'll come back to you after somebody answers this perplexing question. How do you get all descendants? What could you possibly put inside the find argument to get everything? Wouldn't it be awesome if there was such thing as a universal selector that would select everything? Wouldn't that be really cool? Like, wouldn't it be really neat if CSS had something like this, something like that? Does CSS have something like that? A universal selector? That would select everything like let's say I wanted everything inside the body. What would I put here? (student mumbles answer) Sorry? An asterisk. Yeah! Sorry, I was excited. Yeah, an asterisk right? So if I go back to jQuery land, right, and I wanted to do the same thing, ah, body, I would use stop find and I used an asterisk and that would get me everything inside the body which would be kinda crazy, right? You probably don't wanna do that, I mean, especially if you have a really complex document, right? It would take a lot of time to gather up all those things but that's how you would do it. Traversal Methods: Filtering Filtering. Once you have your collection of elements and you wanna filter it down to just the ones that match your condition, you can use filter with a selector. Like filter some-class, right, and so that would, you know .some-class and then that would and that would say, ok, now that we have this collection, only keep the ones that match this right? You could also put a function in there and it will only keep the ones that for which this returns true. The function returns true or a truthy value, right? So here, if I said, all li's that have more than one li as an ancestor, I'm sorry, yeah, more than one so two or more then it would only give me those that have two or more li's as an ancestor. You can filter the opposite way with not, ok, so only keep the ones that don't match this, that aren't some-class, ok, and you can use a function same way, alright? Slice, you can say, ok, I want, which one would this return? Which one would this give us? If we have 5 li's and we did li's .slice two. Which li would it give us? The second one. Sorry? The second one. Good guess, but it's wrong. The third one, right. Why would it gives us the third one? So we can next off zero. Yeah, that's right cause the first one is the next zero, right, cause that's how things work in most programming languages. I think, like, Visual Basic for Applications was one based or something or some Visual Basic kinda of variant but otherwise, they're zero. Negative two will give you the last two elements. It's kinda nice, so if we have five li's, we'll give you the fourth and fifth, slice three six? I can never remember this. I think this will give you starting with the fourth one and six of them starting with the fourth one. Is that right? Why do I always mess, I always have to test this, it's embarrassing. Let's see. Ok, so , what if we, what if in our Scratchpad, we did, this... alright, there we go, pop open a console and we say, li we get all those li's and then we say .slice three, six, right, there we go, oh, the third one, I'm sorry, the fourth one through the seventh one, right? So starting with the fourth, fifth, sixth, sorry. Fourth, fifth and sixth, ok? Up until the ok, you got eight now. Does that make sense? Does that make sense to you guys? Beause I'm starting to confuse myself. (laughs) This'll start at the third one and go all the way to the second to last, let's try that. Sorry, ok, let's see what the last one is. Yeah, second to last one. Good. And the first one that is selected was the third one, right? Yes! Ok, that makes sense, ok. Alrighty, slice. Slice is nice. Eq, equal, that'll give you the, it'll return one element, right, or select one and that'll be the third one, that'll be the third from the end, ok? So this is kinda weird, jQuery also has this notion of a contextual selector as a second argument so far everything we've been seeing has been with one argument inside that dollar function right? Here, we have two. I would say, don't do it. You don't need it. Don't use the second selector, I mean, the second argument. It's the same thing as starting with the second one and saying .find in the first one and, as a matter of fact, it's so much like that, that that's what jQuery does internally is that it converts it into that other syntax and runs it that way so it's just extra work for jQuery to do. And, I mean, that's not really the reason why I'd say don't use it, I say don't use it because it's a lot less descriptive, right? It's not really saying, it's not really telling you what's happening there. If you're saying context.find selector, that's at least, like, as soon as you understand what find means, you know, that you're finding descendants, then at least, that's a little bit more descriptive than just having a second argument, right, so, I would say, skip it altogether. But, you should be aware of it, in case, you see it in somebody else's code, right, ok? There's also add, so you can add elements, like you can say all the li's and then .add all the div's or whatever. You can say andSelf so you could do something like this. You could say, like... ul.children .andSelf and so that would return all of the li's and the ul, yeah? Together, as one happy family. Okay, end-- is kinda weird. It doesn't really, it doesn't really select anything. It's used with chaining and I'll tell you about that in a bit. Demonstration of Traversal Methods And then, we have a couple that kinda fit into this category kinda not; hasClass and is. hasClass, you put a class name in there and if the element has the class, then it returns true so you can't chain off of this one, right? Is, you put any selector in there and it'll tell you, if its, if it matches that selector so that's when you want a true or false value, okay Again, we have all of these in traversing. Tell you what though. Let's do this cause I think you'll like this, I think you'll have fun with this, okay We have a little demo and seriously? Ah! It did it again. Sorry, ok, I really need to clean that CSS very quickly. That was hacking on. Ah...let's do that. There we go, okay Alright, that's because I have a different screen resolution that's why, ok, so here we have a DOM tree, right? We have a bunch of stuff in there and this is what it looks like in the HTML version, right? So we have a forum and a list and we have an hl and stuff like that, ok, so we can practice, right? So let's say, let's say we wanna get...I don't know how about...only...let's see what else we have here, okay Let's get any div.text that follows a div.text, okay? What can we do? How can we do this? We can do it just as a selector or we can use a tranversal method as well. So we know what we want to get right? We wanna get all the div.texts, right? But we only want the ones that follow, that immediately follow a div. text. So, what'll it be? Next? What's that? .next. There we go. Ah, ha! And look at that. We have these three div.texts. Ah, that's kinda funky. Yeah, so we have this one, the first name one is not selected but all the other ones are. Nice, huh? Alright, that made sense. By the way, if you put a filter in here for next, that does not mean that you keep going until you hit that filter, right? It doesn't, like, let me see if we can come up with an example here. Ok, how bout this? Like, div.email, right? Here we have div.email and we wanna say next.text area, ok? How many elements will be selected? How many? I heard somebody say something but I didn't hear what? One? One? Ok, div.email, yup. Yeah, ok, that was a bad example. (grrrs) Alright, yeah, you're right, one, ok, so how 'bout this? How 'bout this? Legend.email, ok? So we have our legend here and it's a sibling of this div and this div, and this div and here's our div.email. So that's a .email so how many will this select? Zero. Did it just select something? Why'd it select first name? What?! Did I break this? My stupid demo is broken. How could that be? You know what? It's not, ah! Uh! I keep doing that, sorry. It's not respecting the filter. That's it. I knew there was something wrong with that. That's what I get for writing this demo while you guys were talking this morning. (laughs) Alright, let me see if I can fix it real quick. Bet I can. Alright. Feed.arg. Ah! There it is. See that. Forgot to put the # in front of x arg. Ok, now let's try it. Ok, I can close this. Yeah, ok, so nextAll works, right? It selects this email one. Now, if I change that back to next, it's gonna do? Nothing. Ah! Ok. Ok, good. Yeah, any questions about that? 'Cause that's a tricky one, oh, let me, before we move on we're gonna say, we're not gonna do any method here, right, and no filter, ok, we're gonna do something like this, li nth child... one, no, let's make it two, ok. So which one of these li's is it gonna, which li's is it going to return? Which one? Sorry? That one there. This one here? Ok, it's say nth child two. Ok, well, let's try it. No. Ok, why did it do that? Here's the thing about nth child. It's kinda of a funky selector. This is what it means. It means, well, first of all, this is the only jQuery selector that is one-based. It's the only one. And the reason is that, this, there is no JavaScript or DOM equivalent to nth child, this is a CSS construct. This is something that the CSS people made up, right, nth child, and so they use a one-based system, right, which is, you know, everything else is jQuery, everything else in JavaScript, whatever, is zero-based but this is one-based and here's what nth child means it doesn't mean just the nth one, just like, you know, it means the one that is the nth child of its parent, ok? So if I did nth child one, what would this select? Ok, it's an li nth child one. It would select item one and Number one? And number one. Why? Because their both li's and they are both the first child of their parents, right. Let's try it. Yeah. Now, of course, we wouldn't have to use nth child one. We could use first child, which is, you know, kinda of silly but last child is kinda nice cause it's hard to know, it's harder to figure out, which one is the last one on your own, right? So, yeah, so that number one is both the first and the last. Make sense right? 'Cause it's the only one, right? So is nth child minus one wrote the same way as last child then? Can you do that? I don't think, no, you can't. That doesn't work. No. You can do li eq minus one, right? But...what that does, yeah, what that does is, that gives you the very last li in the document. It doesn't care about who its parent is or anything like that. It's not relative to the parent element. It's just relative to the whole, it first collects all the li's and then it says, ok, the last one or it should. What? How 'bout this? Let's try this one. OH! I know what the problem is. Sorry. This is the problem of having a demo like, in a single page slideshow app 'cause there are plenty of other li's around here so like on another slide, there's an li and it's selecting that one but you can't see it, right? So if I did, was that DOM tree hyphenated or not? Oh, yeah, there we go. So if I did DOMtree, yeah, the last one there or if I did eq aw, this should work too? Why isn't that working? (scoffs) Something's broke. I'll have to look into that. I don't, that's not my problem. Hmm. Now that makes sense. Maybe I screwed up in my, in the DOM, anyway, ok. No, it looks right to me. Ok. Yeah, you wanna find anything else? We good here? I mean, this is kinda fun to play around with and say, ok, well, let's see, you know, what does this mean? What does that mean? Yes? So, CSS nth child stuff doesn't really work very well in IE. Will this work in IE? Yes, yes it will. Yeah, so here's what jQuery does. In recent browsers, there is a DOM method called querySelectorAll and so if you're doing something that's more complicated than just a single class or a single element or an id or a single id, alright, if you're doing something more than that in a selector, jQuery will use this querySelectorAll method which is a native DOM method that browsers implement, ok? And actually, John Resig was one of the ones who kind of influenced that being part of the specification because of jQuery and so jQuery will use that because it's also faster to use the native DOM methods than it is to use some kind of looping and parsing and figuring out what this is and everything. But it does feature testing too, right? So if the browser doesn't have this querySelectorAll that would match it for you, right? It will fall back to its own selector engine called Sizzle. So jQuery has this like, Sizzle is this like standalone selector engine that John wrote that is, comes with jQuery, it's all part of jQuery, it comes packaged together and it will fall back on that and so it will, anything that or any of the selectors that you see in the jQuery API, jQuery will successfully return, regardless of the browser as long as it's a browser that we support, right? If it's Netscape Navigator 4, you're probably out of luck, right, but, you're out of luck in more ways than one if that's the case, right? So, yes the answer is yes, you can count on it. The CSS selector, maybe, maybe not. The jQuery selector? A-Okay. Chaining Let's go on. We'll talk about chaining. That demo doesn't allow for chaining but you can chain those traversal methods together so you can say get all the li's.filter, only the ones that are the, have a class of foo, right and then .find so within those li's, find all of the spans and then you can do .slice and only get like, the first three of them or something, so you can keep doing dot, dot, dot right. JavaScript has chaining built in. A lot has been made about jQuery's use of chaining, where you can, like, keep adding these things together, it's not something that jQuery invented, it's something that's built into the language. This is a perfect case with this, with these native string methods, where you can replace things and you know and keep going on to replace, right, so you can also split a string into an array and then join it with a dot, right? So what, would that, sorry, what would the first one give you anyway? Do you know? The first one replacing all w's with, no, no, we're not, we're only replacing the first w with an n and we're replacing this with that so change it to snap that text right? Alright? And the second one, we're splitting that string into an array and so it'll give us how many elements in the array? Three. One, you know, so it's broken up by those hyphens and then we're going to join them with dots so the 616.555.1212, ok? So jQuery takes advantage of this concept by having almost all methods return the jQuery object so you can keep chaining off of it because all of these methods are methods of the jQuery object, they're actually the jQuery prototype but forget about that. Chain, we can chain traversal methods together, whoa! Right? Like a.parent li.siblings.find.a, right?This is nice. Like if you click this one, you know, if you click one and it'll say, and instead of using a, you use this. You know you say this.parent li.siblings.find a and then we can do something with all those other ones like add a class or remove their active class, right? Like you click on this a, we wanna say, ok, I wanna add an active class here and I wanna remove that active class from all the others ones in this list. Does that make sense? You can, chaining allows you to attach multiple behaviors like a.remove class old.add class new so you can keep... (bouncy spring) Right? DOM traversal methods are different from other jQuery chaining methods, a new jQuery instance is created with each one. Why does that matter? Well, it allows you to move backwards later so you can say a.add class foo, right, and then .parent li and now you have this new jQuery collection and then .remove class foo so you're removing it from the li. And I should have an example. Oh, yeah! Here we go. Yeah, so if you use the End method and I mentioned that I said, we'll talk about that later, we'll talk about it now. So here's what you do. You say .container space li colon first not a very good way of doing that, by the way, .add class first li, so the first one inside the container we're gonna add a class to it and then we're going to move on to the next one and we're going to add a class to that one and that's gonna, that class will be second li and then we're going to say end and end doesn't really end, it just goes back one step, ok? So if it said backstep, it might be more descriptive but so it goes .end and then it says nextAll, so it's all the ones that follow from the first li. Does that make sense? So .add class first li, ok, .next, that's another traversal method, right, so we have a new collection here, it's a collection of one element and we're gonna add a class and then we're just gonna say .n so that's going to pop that last one off and so now, we're dealing with the first one again, the first li, nextAll, end class and then end. You don't need an end at the end, it's just, just makes it nice and JavaScript ignores whitespace nearly all the time except for with automatic semi-colon insertion but because of that you can style your chaining to not be all bunched together and can make it look nice, sometimes, this is not the best way to go about things, like to have these endless chains of things. It can be kinda of, you can get into a problem with debugging so something that you might want to do instead is like, let's say, let's do this, ok, I can say, var li's oh, actually, yeah, that's what we can do, we'll do that. Var li's equals container li and then we can say, li's.first.add class, first li and then we can say .next, .add class, whatever, right, but we could stop there and then we could say, li's.first again .nextAll or instead of doing that, we could say li's.slice one so that would give us from the second one on, right? No. Sorry, yeah. One count of minus one, isn't it? No, one count of minus one will give us from the second one to the second to last one, right? Just using one argument will give us, yeah, here, let's try it. Li.slice.one, oh yeah, see, I have to improve this demo. That's what I need to do. There we go. Right? And unfortunately, I don't know, can I do? No, that's a...yeah. Does that make sense? Looping Here is how with jQuery you can do explicit iteration often, you don't need to but if you do, you can use an Each method, and it takes a function as well so instead of doing for, a for-loop, you just do .each and then inside there you put a function and then that function that you're defining has a possible argument that you can stick in there, right, index and so that'll give you like, that's like I, you know and the first one will be zero etc. So, you can say this .append # index plus one right, and so you're gonna, we're gonna be appending that string to all the li's so if we try this... and I'm not going to use my keyboard shortcut. So I've learned my lesson. Huh? That Firebug is being weird so we'll go over to Chrome. And... here we go, okay. Now, okay. Let's try it. Ta-da! Okay, it went through the whole document, all the slides in this page and it just appended # and then the index of it and so that was the 27th one, the first one in the DOM tree, right? So if we did it again but we rooted it on DOM tree. There we go, # one, # two, # three, so it's item one number one, yeah, right, and why is it starting with # one? Let's take a look at our code again. Starts with one because I said on the first one it's gonna be, the index is gonna be zero and zero plus one, right, so for each one, I'm adding one to it. 'Cause that would be silly if we said, oh, this is list item number zero, you know? Okay? Any questions about this kind of thing? Alright, now we're getting to this Keyword. Okay, if you're creating an object literal, it refers to that current object , if you have a constructor function which we won't get into now, it refers to that, the essence of that function so jQuery, you can also set this by using a couple JavaScript methods called Call and Apply and that's what jQuery does so in here, inside this each, jQuery will call the function within the context of that, of the particular li, ok? So if we loop through each li, this just the bare this, will be that DOM element, that li, ok, and so you can do something with that, you can use DOM properties or methods on it. If you put this inside of, if you use it as an argument, inside the dollar function, then that becomes your selector. Right? And so now you're saying, I want to find this element. Why would you do that? So that you can all, use all the jQuery active terms. That's right. So you can use all the jQuery methods. Add class, remove class, append, insert after, whatever, right, all of those you can use on the jQuery object that's returned by that function. jQuery Selecting Tips Tips. Selectors that you use more than once so if you get a collection, so instead of putting this in a function call every single time, like dollar, parens this and you're doing that like five times within a function, do it once and then use the variable. Do it once, declare variables, you know and then use that instead, right, I mean if the value isn't going to change for some reason, if you know it's not going to change then store it in a variable and use that, ok? It'll be a lot easier than doing another function call, with this, it's not that big of a deal but if you're doing like, div., you know, if you're doing some sort of crazy selector, it's like your querying the DOM, you're having it go through the DOM every single time. It's not good so yeah, you can also use the length property to check if something exists, ok, so, do I have any list items? I can find out here, I'm declaring a variable, list items equals dollar li and I'm setting another variable, num items to list items.length, ok, so that's gonna, that num item is going to tell me how many list items I have, alright? And if it's zero, it's falsey, right? So I can say if num items and so that would be if the value is one or more, then I'll do something, right? Often, there is no need to check for the existence of it. Sometimes you can just say, list items.add class pre, if there are no list items, it's gonna be a collection of zero elements and it's not gonna do anything, right? It's gonna try to do something to zero elements and it'll be done. Does that make sense? To everybody? It's different from like using like, get element by id like if you tried to do document.get element by id and then you tried to get the, find out the class name of that element, if that element didn't exist it would throw an error. It would say, you're trying to get a property of null or undefined and you can't do that. Undefined doesn't have properties so you're breaking things but here, you're always going to get something back. That's why you have to check for the length, okay? You'll always get something back even if it's an empty object or an object with an empty array with a length of zero, alright? Ok, I just remembered, I did something earlier and I wanted you to...ah! Yeah, right here. Ok, I wanted to explain myself here. You see var list items there, with a dollar in front of it? Ok, ya'll know that there's nothing special about the dollar on that variable name, right? The only reason I did that there is for me. It's because I like to know that I'm working, that what I'm working with is a jQuery collection and that I can attach jQuery methods to it, right? So I can do an add class or whatever on it, right, and that reminds me, oh, yeah, I'm working with a jQuery collection here so I'll just do dollar list items but it's not special in anyway, you know? I can get rid of the dollar and it would mean the same thing Is that? We're all clear on that? Good. Alright. Ok, yeah, concatenate and yeah, avoid jQuery's custom selectors when possible, sometimes, you're gonna wanna use one and it's not the end of the world but there are other times, when, you really ought not to. They're not really serving you well at all, they're not, they don't do anything that you can't do with a real CSS selector better, ok. Colon check box. That is a custom jQuery selector that only exists in jQuery land, it's not a real CSS selector and so jQuery can't use it's own, it can't use the native querySelectorAll method and so it's going, like, in the browsers that it supports, so the browsers, the modern browsers are gonna do that much more slowly than they're going to do the third one, ok? Because the third one, jQuery, can just take this chunk and stick it into a querySelector All and say bam! We're done. In the first one, you can't, it has to kinda parse it and apply all these regular expressions to it and then, oh! And here's something else, why is the second one better than the first one? A small list? Sorry? It's weighing a smaller list, if the first goes, gets hit with. Yeah, that's right. So, with the first one, that is equivalent to doing that. So it's saying, look through every single element in the whole document and see if it's a checkbox and see if its type equals checkbox, right? That's ridiculous. You know that only inputs can have a type equals checkbox, right? Only inputs can be checkboxes. So do this, if you're going to use the custom selector but better to just do this last one here. Make sense? Awesome! Ok, here's another one. div:first., It was great, at first. I loved all these funky selectors. It was so fun, like I could do anything with them, you know it was really neat, but it's slower, it's slower. It has to parse that out and figure out what's going on and do all sorts of crazy crap. With the second one, it just goes, get on with spike tagging, bam! And then it says, ah! Pluck it, pluck out the first one, we're done, ok, so because it does the real work in that jQuery function, right, with that first selector, that's where the real work is being done and then the method is just acting on the collection that it already has so it's much easier. Okay. Another example, li:eq three, use the method instead, ok? Less than three? Use zero, three, like so, so that's zero and up to three, up to the fourth one but not included. Q&A Open Questions with Karl We talked a lot about selectors and traversal methods today, we talked a lot about some non-jQuery stuff. Next week, we're gonna look at, it's gonna be like, all jQuery, all the time, and I'm gonna give you some really nice tips on now that you've been working out how to find things, how to select elements in the document, and how to collect all those things, now what can you do with them, right? So, we'll do a lot of that stuff next week. But, I want to open this up for questions. Yes. A couple questions on your javascript in a separate file and link it in, including the ready function. Would you hardcode some of that directly in your script, or in your file? Like in your HTML file? Yeah. No, I'd put everything in a separate file. OK, including that ready function. Oh yeah. OK. Related to that then, you had an example where you were including variable in some of your javascript. What if those variables were drawn from PHP variables? Is there a way to use included files in the javascript, but have PHP variables pass into some of those functions? Yeah, I think I understand. So, let me, can I show you an example? Okay. This might take a minute. It really shouldn't, but, ah, there we go. Okay. Ah, I can look here, same thing. Okay. So, includes... Okay. So, check this out. I have a whole bunch of stuff here, this is all like expression engine, and PHP nonsense, right? And, I'm building up this body class, and I have all this stuff, right? And now I have a PHP array. Right? This is an associative array, right here? And now, and here, I have a script tag with var FM equals. And I'm json encoding this PHP associative array. So it's gonna become an object, a javascript object, right? And then I'm closing the script tag, and then later on I echo that, somewhere. So, oh yeah, here we go. There you go. So now all of these things, all of these things are properties of this FM object, okay? And so, here's the nice thing about doing it this way. Like, I spit out this big FM json object, right? It's a single global variable, that can be accessed from any other function, or any other file that comes after it. But I'm not saying that, I'm not creating a separate global variable for each one of those, it's just one single variable. And everything else is a property of it, right? So, that's typically what you want to do if you have, if you need some variables to be portable from one file to another, from PHP to javascript, make a single object, a global object, and then you namespace everything off of that. So everything else is a property or a method off of that. So, it would look like, here, let's go to scratch. So, if I had a function here. Okay. Now, if I am in this other function, and I want to say console dot log X, right? I think that's gonna give me a reference error, X is undefined. Okay? Because X was defined within this other function. If, however, I do console that log FM dot X, I'm good right? And that makes sense, right, because FM is a global object here, it's a global variable. However, what might not make as much sense is this. If I now say, "Inside function fu, FM dot X equals whatever" That's gonna log bla as well, does that make sense? Because you can set a property, the object itself is defined outside of these functions, so setting the property inside a function doesn't matter. This one still has access to the properties of that function I mean of that object, sorry. And by the way, doing this is not such a good idea, what I've just done here. If you look at it, if this were my script, this would be bad In terms of global variables. Do you know why? Because I've said var FM equals something, so that's a global variable. Are there any other global variables here? The functions? The function, yeah, right. Fu and bar. So what can you do? What can you do to avoid that global variable pollution? Because, you know, everybody loves to use the name fu for all their variables. So what can you do, how can you contain these? Namespace. Oh yeah, right, you can namespace them! You could say, "FM dot fu equals function." Now we're good. Since that's a statement, we need to put a semicolon there, or we should. So then we could say FM dot fu. Alright, how else could we do it? How could we do it with bar without namespacing it, without making it a property of... Immediately executing function? Yeah, there you go! We can wrap this sucker in an IIFE, right? So, we don't want to do it with FM, but we can do it with the rest of it, right? Let's see, how do we do that? We know it's an anonymous function, right? This is, when I first started learning this, this is how I did it. I'm like, "Okay, I know it's an anonymous function. "I know what a function looks like, it looks like that. "And I know I have to call this function, "but I'm not sure that's gonna work just like that." You can't call it immediately like that, can you? Well, maybe, but not... I'm gonna group it, like that, I'm gonna use this grouping thing here. And then I'll just go like that. And there we go! And then I'll just cut that, and stick it down at the bottom Apply some indentation, okay. Cool. Now, I could also do this. I mean, it might be a little silly, but I can say FM there, and then lowercase fm, because you know how much I hate typing uppercase letters, so I could do that, and now I could say fm dot, or I could say, well... Yeah, fm. fm dot Z, or whatever. Sometimes people do something like this, this is kind of funky. They'll do something like, they'll say "this," and then they'll say "window," up here. Remember, the global context in a browser is the window object. And so, we're talking about the context, so "this equals window." So, I don't know why they do that, it's a little weird. But you're scoping it to the local variable, you don't have to go up as many levels up the scope hierarchy chain. But, here's something else that people sometimes do. Undefined, and then they leave this blank. And this is getting into real esoteric stuff. I mean, this is mostly for people who are writing third party scripts, where they don't know where they're gonna be used, but they want to know undefined is going to be undefined. Somebody else could come along and think they're really clever and say, "Var undefined equals stupid." And now that's what undefined equals. But that's really dumb, right? But, people do dumb things. So this is kind of protection against dumb things. And so, we're calling, or is it the other way around? Oh man, it's the other way around. Yeah, there we go, yeah. So now we know that undefined in here is something that's not defined. Yeah, I'm sorry. But you can defend against other people's stupidity, I guess Anyway, yeah, any other questions? Let's do some Q and A. What else is on your mind about any of this stuff, about functions, objects, selectors, traversal. Did you run into any problems with any of this stuff? Think, "Gee, you know, it made sense at one time." I have some questions. Where do you think jQuery is going in the next few years? Hopefully to Hawaii, I really need a vacation. No, sorry, that was a dumb answer. Let's see. Well, let's take a look at where it's been. This just came out a couple of days ago. This is builtwith.com, and this talks about its usage on the top 10 thousand sites, however they define that, like the Alexa top 10 thousand. So, we are almost at 50 percent of sites, of the top 10 thousand sites are using jQuery now. So that's just in terms of popularity. It is now on more of the top 10 thousand sites than Flash is and this is an interesting one. And this probably isn't even answering your question, you're probably wondering like, what are we gonna do with the library? But I'll tell you about that, too. But if you look at this, this is kind of interesting because 1.4.2 is huge, and 1.3.2 is also pretty big. 1.6.1 is not too shabby, but 1.4.2 and 1.4.4 So the 1.4 really makes up a lot of this pie, doesn't it? Why do you think that is? They have their explanation, I think it's decent. I'm not gonna let you see their explanation. I mean, did it come with an OS or something? Say that again? Did it come with an OS, like XP. It didn't come with an OS, they don't come with OSs so much, but they do come with frameworks, like Drupal, Wordpress, all those. So, that's one thing, that's huge. Drupal locks in a certain jQuery version, and you can upgrade your jQuery, but you have to do it through a module, and not very many people do that, ok? So that's one thing. Another thing is that the release cycles have gotten a lot shorter since 1.4.4. So there was a long time between 1.2.6 and 1.4.4. Much shorter time between 1.4.4 and now, which is 1.7. As a matter of fact, it was, this is November, right? So it was just, like, 13 months ago that we were at 1.4.4. And now we're at 1.7. So we've hit 1.5, 1.5.1, 1.5.2, 1.6.1, 1.6.2, 1.6.3, 1.6.4, and 1.7, all in a little over a year. And before that, the cycles were much longer. So there's that. And here's something else to consider. If I build a site and it's running well, I leave it alone. Like, if I build a site for a client, like my own sites. I have a handful of blogs and stuff. I'm not going in there and updating jQuery every time a new release comes out. You know, it's working fine, no need, right? Yes? How many differences does it make when you update jQuery, are you going to break things by doing that? How many things are different, does it just add on, or does it actually dramatically change the system things? That's a great question, too. There are, there have been some breaking changes. Not very many. And they're fairly easy fixes. The more third party plugins that you're using along with it the more dicey it gets, because you don't know if the plugin developers were using best practices, and you know, things like that. And there are some things you just never would have accounted for. But a lot of them are edge cases. I've updated a number of sites already, from like 1.3, 1.2, 1.4, to 1.6. 1.7 just came out, like, yesterday. So, to 1.6, and haven't really had many problems. At most, I've had to change a couple lines. I've kind of known what I'm looking for. It might help to have a blog post or something that says, "Here are some things that you should look for," maybe I'll do that. Is there such a thing? What's that? Is there such a thing, like documentation when they release it, they say "By the way." Yeah, yeah, in the release notes, every time, we say, "Here are the things that are problematic." But it's a lot, there are a lot of release notes to go through, and it can get buried. It can be hard to kind of sift through all of that. But really, we take backward compatibility very seriously, sometimes to the point of making jQuery not as speedy, or not as small, as we could otherwise. Like, for example, there's a method, a jQuery method called size. So you have your jQuery collect, you dot size, and then parentheses. It's the same thing as dot length, as a property, right? It's the same exact thing, it does that internally. It says, "Return this dot length," and you're done. But it's a method call, it's a function call, and so it's a little bit slower. But size has been in there since, like, 1.0, or earlier. And, a lot of people use it, because they don't know any better, and we're just not gonna remove it. It would break too many people's code, if they tried to upgrade. So, I mean, it's kind of a bummer, on the one hand. But we really, really care about not breaking people's code. Course author Karl Swedberg Karl Swedberg is a web developer at Fusionary Media in Grand Rapids, Michigan, where he spends much of his time making cool things happen with JavaScript. As a member of the jQuery team, Karl is... Course info LevelIntermediate Rating (493) My rating Duration3h 34m Released19 Feb 2013 Share course