jQuery

jQuery


>>
HAWTHORN: Good morning ladies and gentlemen
and welcome to this fabulous TechTalk by Mister Dmitri Gaskin. A 12 year old Drupal Core Developer.
With Dmitri’s permission, I’m going to pontificate about how I actually met Dmitri. So I am a
program manager for the Open Source Team and we ran various initiatives to help get students
involved in open source software development. And we thought, you know, we do this great
program called Summer of Code which focuses on university students but why don’t we try
to do something that would be interesting for secondary-schoolers, like pre-university
students. And we did a very small pilot. One of the projects that we worked with was Drupal
which is a Content Management System. And, you know, they came to me and they said, “You
know, we’ve got this really smart kid who’d love to be a part of the highly open participation
contest but he’s–he’s sort of too young, he’s 12 and the age cut-off is 13, is there
any way we can make an exception?” And I went to our lawyers because our lawyers are really
cool then I said, “So, can we make an exception?” and they went, “No.” This is one of those
times when we can’t be cool. So we went, “All right, what a bummer.” and then all of a sudden
I heard, “Well, that’s okay, Dmitri’s cool with it, he’s just going to mentor other students
until he’s old enough to actually participate.” So without further ado, I’m going to leave
you in the hands of this gentleman, Mr. Dmitri Gaskin, who’s going to tell you about jQuery.
Dmitri?>>GASKIN: Thanks. So, first of all, I would
like to thank Leslie for introducing me. I would like to thank all of you for being here
and I’d like to thank Leslie for inviting me. So, I’m going to talk about jQuery and
jQuery’s motto is “The write less, do more JavaScript library.” So, now a little bit
about me. So, I am 12 years old, as Leslie said. I’m very involved in the Drupal product.
Drupal is a Content Management System but it’s also a Content Management Framework.
So it–we focus on being really extendable and it’s–I would recommend checking it out,
it’s really neat. Unfortunately, that’s not what I’m here to talk about. So, now a little
bit about you. How many of you know and can write Java Script? That’s most of you. Okay,
very good. So, I’ll skip my part about, like what Java Script is. So, pardon me, I’m just
going to flip through a lot of slides. Thi–this is the agenda for if we were to go over the
JavaScript basics but we’re not going to. Yes, that’s how you deal with arrays. You
probably know that already, that’s how you deal with objects. So, yes. Then there’s the
demo. Okay, so here’s our agenda for today. So, first I will talk about jQuery basics
and just the basic use of jQuery. Then I’ll talk about plugins and Advanced jQuery. I’ll
figure–I figure I’ll bunch those two together because Advanced jQuery is very apparently
short. So, the basic function is the dollar sign. Now, there are three ways to use it,
you can use it CSS selector, any Pseudo-se–CSS 3 Pseudo-selector, anything like that, you
can put some HTML in it, I’m not really going to go over–because of how much time that
we have, I’m not going to go over how we use that, or you can use it with a DOM element,
that’s fairly simple. So, let me just show off basic use of that. So, here I have my
list of organizations that are involved in Summer of Code this year. So, let me use a
CSS selector. This is a table by the way, if it doesn’t look too clear. And in–there’s
my little Java Script console and that’s where I’m going to be typing the JavaScript. So,
inside the dollar sign function, I can pass at a parameter of a CSS selector. Let’s just
take table, oops. It would help if I could type. So, it gave me an array with the table
and I just fill this little cool thing that if you mouse over this, then it should highlight–you
can’t really see that color, can you? But it highlights–if you would see, it would
highlight the whole table here. Then we could, for example, let’s take a table row. And this
has all the table rows and it’ll–as I mouse over them it’ll go over the next one then
I can take–let me just clear the screen, I could take all the data of every single
cell, that takes a while because there are obviously a lot of those but then–like that,
oops, yes. So–so, you can use CSS like that. Now, you can also use like classes and IDs
and stuff like that. So, let’s say I have a class which is project–project, I think
its project name. Yes, so all these–only the first table row–the ones in this column
have the class project name and then I could do project–that–project ideas and that’s
everything in the second row.
For some reason, Audacity is a little bit–everything in this row where it says ideas–so in that
column–column sorry not row. So, then I could also do it by ID–so let’s see my favorite
Drupal–Drupal has its ID in Drupal. Oops, okay, that was not intended, so–no you’re
not going to be able to see Drupal. Let’s do something like the Apac–I think its Apache
Software Foundation, so that’s this row, that one right there, so I give the whole row,
the ID, ASF. So yes, those are some basic CSS selectors. You can use–you can use CSS
3 Pseudo-selectors. I’ll cover that a bit later. So back to the presentation–so I guess
I better cover those pretty soon–so you can also do actions, so when you select something
you can do an action on everything you selected. So here’s some basic actions. The first set
of basic action that I’ll talk about is Traversal, so how you traverse the DOM. So you can use
children which gets the children–children by–and then in an expression so this is–you
get all the children and you filter them out, so you only have the only ones that match
this certain CSS expression. Parent, this gets the parent quite obviously. Parents expression
and so now I should know for all of these if you have for example, say I selected all
the table rows, now this didn’t only select one thing, so doing that, parent won’t go
through each one of them and get the parent of that one and make it the new selection.
So now we have a new selection which is all the parents of all the table rows and this
happens to be just one thing which should be in the tbody tag. So you thought–parents
thought–and then with the expression that means you find all the parents that match
a certain expression so I could do .parents in passing table and that would find all parents
that are tabled and there are obviously only one of those. So, at least in my case, there’s
also .find expression, this is pretty much the same as .children expression. .filter,
this filters out everything from the current selection, only the ones that match the expression,
so say I have–I selected all the tabled–of the TDs, the table cells and then I could
filter with the class project ideas and this would then give me only the project idea cells.
Filter functions–so what this does, this–you can pass in actually a function and you call
this–you can use this and that is the–that is just one of them. So it–it’ll race through
that function for each one of these selected elements and then if–if that function returns
true then that, that element is in the new selection, if it returns false it’s not. .EQ
index, that just gets the element of position index in the current selection so say I have
selected three table rows and I want to get the second one, then I just pass it into.
And .not expression, get everything that does not match this expression. So if I–again
if I selected all the table, the TD cells and I did .not and then .project ideas, what
that would do is–what that would do is it would get all the ones that are not project
ideas, it would get all the project names. .add expression, what this does is it adds
everything that matches to this–that matches the expression, everything not just ones that
have to do with the current selecture–selector to–to the current selection. .next so say
you have the table row and that has the idea of Drupal, if you do .next then it gets the
next table row. .next are all the ones that after the current one, .prev that–previous
one–.prev all the–all the previous ones. .slice, that’s just like slices–so start
and end–pretty self explanatory. .siblings, this is basically like, .next all and .prev
all in one. So, then there are also some pretty special ones. .end, so what–I called that
all the–I call all these traversal things destructive operation ’cause they destruct,
they destroy the current selection and they change it. So but you can use .end to end
the current–well, you can use that to go back to the last one. So, say you did all
table cells and then you filtered back project ideas and then you can do a .end on that to
go back to all the table cells. And so, you could call any of these Traversal ones, any
number of times and do .end, it always reverse to the last one. There’s the right end cell
and this just selects the current ones and the previous one. So, let me show those off.
So, let’s say–let me take the first one. Adium, I’ll call $(‘#adium’).next() and this
gets the Apache Software Foundation. And if you can’t see that what I’m highlighting–I’m
highlighting this one. Let me reload the page and see if Audacity is still selected. There
we go. So, then there–let’s get children. So let’s do $(‘#adium).children() and this
gets all the children. And there are exactly two elements. If you cannot see then there’s
this one, adium that’s the project name, that’s the first TD and then there’s the ideas which
is the second one. Then we could do, for example, let’s get .prev()–let’s do .prevAll(). So,
let’s see.
So this gets all the ones before that one. So, we could look at it and–this is first
one, second one. If you can’t see, I just ran my mouse through everything from here
to here. Let’ clear that. Is this making sense? Okay. Oh, I’m glad. Okay. Next, manipulation
this is actually doing stuff with these things you selected. So, for example say you selected
table data and you want–and you want–so currently I have it like an A–Atrack of something
like co.Google.com/whatever, a link to the organization. Say you wanted to change it
to–I don’t know, like who. So I can do .html(val) and I can pass any html() in this and it will
go in unescaped. Now .text is the equivalent–but with escaping so they do exactly the same
thing except .text escapes the html. .append(content), this just appends stuff to the end. By the
way these operations, they do it on everything you selected. So say, you selected five table
rows that if you .append the content, then it’ll add content to the end of each one of
them. .appendTo, so, what this does is it takes all of them and it appends them to a
certain other object. So, say I want to append the text ideas in that link from one project
to another project’s ideas, like, I have no idea why I would do this but I can. You can
also append it to a jQuery object. So you can append it and inside that put like, a
jQuery selective with some minute–with some traversal stuff. .prepend(content), pretty
much self explanatory, this one too. Does the same thing as append and appendTo. Yes.
So, .after(content) this–so say I have a table–I have a table selected and then I
do .after, this will put it actually after the table tag instead of at the bottom of
the table tag right before the closing one. .before same thing. A wrap, this– this wraps
it with the–with some html and it will automatically find the innermost area. So, for example if
I have a DIV and inside that is a span and inside that I’ve a bold that it’ll wrap for
good and it’ll split it, so DIV, span, bold put the content here and then the end bold
and span and DIV. .empty, this just empties it. .remove, this removes the elements from
the dom completely, .remove(expression) this only removes once that matched the expression.
I’ve a feeling this deprecated because you could just use like .find or .filter with
the expression and then .remove that. So, let me show those off. Let’s see, so I’ll
use .html. So, I’ll take Drupal and I’ll put in .html, Drupal is [pause]. So, we go to
Drupal–Drupal is awesome. So, now let’s reload the page so that you can see. Let’s use .text
and let’s do .text with the exact same thing. Actually I don’t think–this–this just removes
the HTML, it doesn’t escape it. But let’s test it out [PAUSE] because Drupal really
is awesome. No it doesn’t–it escapes it. So there is that, let’s use some of the more
complicated ones, so let’s use Adium [PAUSE] dot, let’s just remove that table row, and
it’s gone. Let’s do $(‘#wesnoth’).empty() and its still there, it’s just there’ nothing
in it. Let’s do like, I don’t know, maybe that’s enough for demo. What? Yes it re–it
removes the children and the children text notes. May we really should get to selectors.
So selectors, you can use #id, .class, element Type, for example table, table row. This is
just in case your not up to your CSS 3. Last that will first removes–gets the first so
if you do table row .first–:first, that gets the first table row. So if last, not, you
can put a CSS–another CSS expression nested inside of there. Parent>child, were child
is a direct child of the parent not the distant child. Even, :odd, contains, stuff that’s
:empty, :hidden, :visible, and then there’s the [attribute] and [attribute=value] and
[attribute!=value]. Sorry. Let me show that off. So, let me get the first table row.
So this gets the first table row. Let’s get
tbody, so you can also put behind this. So the first table row the tbody and this–this
one. And then the–we–we can do all kinds of things like that. I hope you know your
up to your CSS3 because CSS3 is becoming more and more prominent. So that’s done. Now we’ll
talk about how to get attributes in CSS. So there’s .attr that’s just says the attribute–the
HTML attribute name to value, name and func–name and function and whatever this function returns.
And then there’s just like an ob–you can use an object so if you want to set multiple
attributes because it’s really jQuery focuses not only on writing less code and doing more,
but also on being a lot faster. So with something like this, you don’t need to call the .attr
function many times. You can call it once which just an object. You can remove an attribute,
so you can set the value unlike an input element. You can do CSS, you can set the element of
name to value and again you can do it with an object to properties you can add class,
rule of class and now I’ll show that. So, only this, let’s see, .attr. No, I did that.
CSS background color, so you can either do it like that–the CSS attribute’s like that
or like this. Like camelCase if you’re doing it with an object because then you can’t really
have a dash and–unless you have it quoted in a Skitzo complex, really pretty color,
very beautiful so that just shows how to do that. If we had an input element, I would
show how to set the value. It’s really simple, you just call .val. Okay so, there are a couple
more that I could show off if you really wanted me to but I don’t think they’re–what? Okay,
let’s see. Let’s–let’s do CSS with an object. Apache Software Foundation.CSS and–let’s
say background color is green and color–so the text color will be orange. Well that–it
would be orange but I have some A elements, the anchor elements so that doesn’t really
work. Actually it looks a lot better than–on there, than it does on my screen because you
can’t really see the different between the text and the background. But–okay, so, I–we
can add a classified–classes defined–I don’t really define very many classes. So, there
is just a few more really useful functions. Now, all of these returned something that’s
not–that’s not just a jQuery thing. So, this returns the HTML in the current selection
text of the value if you have input elements, the attribute of name, the CSS name, the height
of the current element, the width, if it is–if it returns true if–if the elements match
the expressions. Otherwise, it returns false, if it has the class and the browser offset,
so like–top and left. Let me show that off. So, let’s get the browser offs–et of Audacity.
So, this is in object, it’ll just say object–object, so, let’s get the left offset and so it’s
270 pixels. It probably looks a lot more up there, but, I haven’t, you know, enlarged.
.offset().top, so, that’s the offset function that I could do. BBC, no $(‘#bbb’).HTML()
and it shows the Alinks, let’s use .text so we can see the actually–you just escape that
HTML. Oh, I guess, here it–it doesn’t escape but it removes the HTML ins–inconsistency.
I’ll file it by when I get home. So, let me talk about a new thing, now this–does not–this
is more complicated, so, this is how you really get your code fast. And you also get your
codes smaller and it’s–and it looks pretty, and it’s–because it’s readable and it’s fun.
So, you can attach multiple functions to a single selector, so, you can do $(CSS Selector).action1().action2();
and I’ll talk about why that works later. So–so, the action–so, say you select like
a table cell and that action where we could do .HTML something .action2() is we could
do like .CSS and set like the background color to be purple. And then we could–we could
do as many of those as we want. So, let me show that off. So, let me take wesnoth, wesnoth
dot, let’s–let’s set it the .HTML–no that won’t work ’cause that will not validate.
So, .wesnoth, let me show off these selector powers, TDA first, so that the first table
itself in the wesnoth table row. A little TR there, okay, so now, let’s have the HTML
to–let’s see what’s World of Warcraft, a game that doesn’t rival this, but, it’s still
a game, so, somewhat rivals. I know if you want to go like a real website, you probably
wouldn’t want to set the background color to be purple, but, who cares. Yes, so, we
did two things, we changed the text and we–and we–we–we set the background color to purple,
in case you can’t notice it’s been purple-black, here it is. You–you could do as many of those
as you want and any other functions that you just covered. I know it’s probably hard to
remember all of them, I wouldn’t blame you for not remember a single one. Okay, so now
Bindings, Binding is–is the jQuery way of responding to user interaction. So, with DOM
this–the classic thing, you could do like a document.getElementById and then you could
set .onclick equals function. But what if you want to bind–what if you want to make
multiple functions for when you click? Well, Jquery can solve that, it can solve it even
better if I add water. So, the basic function you use is a CSS–CSS selector.bind, so, you
can bind it to a click. And everything that happens inside that function, right there,
that happens when the user clicks .CSS selector and you can do pretty much any event. Now,
I’ll run through a really quick list. There are tons and tons of them and I’ll tell you
where you can get a list of them in our resources section which is at the very end. So here’s
some events: click, mouse over, mouse out, mouse enter when you first–so, thi–this
is I think a jQuery specific event. There are couple of those so what you can do like
TD.mouse enter, this background color is purple and then mouse out, this background color
is white and so that’s just the first time that you enter it. Yeah, mouse leave, blur
for just input elements, change, again for input elements, double click, focus, key down,
key up, key press, scroll, resize, load and that’s–for example, if you’re used to setting
with old style JavaScript, for the body unload, is something–is something that’s exactly
this. Unfortunately, when that happens, that’s right when the page loads on the JavaScript
executes. Sometimes the CSS files haven’t loaded, a lot of times the images you have
and you haven’t loaded and so jQuery has a specific function to solve that which is the
ready event and so this is just like the load event except it’s when, it’s–it’s after all
the images and CSS and everything like that have been loaded. So let me show the events
off. So let me–let me use that example I used before. So $(‘TD;first’).bind(‘mouseenter,
function()) and again the–the bind function is chainable. So this–so in any function–there
are a bunch of functions like this where, where bind is one of them, where inside the
function you can use this and if you wrap them with a jQuery thing, this is a DOM element
and if you wrap it with a jQuery, then that jQuery-fies the DOM element and the DOM element
happens to be the thing that the event happened on. So it would, in this case, be the specific–the
specific table cell that you entered your mouse into .background color or CSS background
color and let’s change that to green. That only–did the first TD–so want to take the
first TD of all table rows. Hello? Yeah, so let’s just do all table cells. This takes
a while because there are a ton of organizations, 175 organizations got into Summer of Code
this year. So yeah every time you put your mouse in it, it turns green. Now let’s reload
and–so we can chain this and bind it again to mouse out and so we just demonstrated chaining
and binding in one. And so this, .background color again, CSS background color. Yeah, it
would help if I knew jQuery myself. White, [PAUSE] binding to all of these. Okay, so
when you–when you first put your mouse in, it turns green and for some reason this didn’t
work. [PAUSE] Oh, first of all it’s mouse leave and second of all I pasted the wrong
thing. So yeah, mouse leave. [PAUSE] Okay now it’ll bind–bind two events which is really
slow. Okay so, yeah, whenever you put your mouse over one, it turns green. In case you
can’t see the green, this is the green. [PAUSE] Okay, now effects, because I really like when
things look pretty. So here’s how you add basic effects. So there are–there are basically
expression.function and so this–there is basically three ways you can call these basic
effects, there’s this one and you could say a speed. For example, we have some defaults
speeds like slow which I think is maybe like, five seconds fast which is maybe like a second
or two, or you can put your own number in milliseconds. And speed and callbacks, so
what callback does is–callback is executed after the animation is done so, say you want
like–say you want nested animations then you could do expression.the first animation
and set a speed and do the callback and inside the callback to this–as I said this is a
relevant and it is relevant in this case dot and then do another function. So here are
some of the effects. Show, you can show the element and this expands like that so vertically
and horizontally hide it like that, vertically and horizontally toggle. This is just if it’s
shown, hide it and if it’s hidden show it. Slide up doop, slide down doop, slide toggle,
if its shown hide it, if its hidden show it. FadeIn, I can’t really demonstrate that with
my hands. FadeOut, now you can’t see them. FadeTo. This fadeTo function, this is actually
really interesting in between the speed callback–I mean the speed parameter in the callback parameter
there’s another parameter, opacity. So say you’re at full opacity and you want to go
half opacity but not all the way to zero then you could pass it like 0.5 or something. So
let me show that. This is the fun part. TD, let’s do like dot mouse over–oh yes so, I
forgot to tell you like we haven’t put a sign for this but see the little mouse over function
any–pretty much any event you pass into bind, it also has a shortcut which is just that
function and you just pass the callback into it. So I can do .bindmouse over and then the
callback or I could just do .mouseover and then callback. So I could–this dot fade out
and then again it’ll take a while to set the bind tool on them. Okay so, whenever I mouse
over one, it’ll fade out. [PAUSE] That’s pretty fun. Yes and so you can use these effects
to do really pretty things. All this went 2.0 stuff. So there’s also advanced animations
if you really need that little extra something, so there’s basically this function .animate(params,duration,easing
callback). So the params is an object of CSS parameters you want to alter. So, for example
you want–if you want to fade the background to be yellow then–actually this is not one
that support the properties, you can however download a plugin for this but, say you want
to fade–you want to make it animate to another position then do .params–params so you could
pass then like, position is absolute–first you would do .CSSplu–position absolute and
then you do something like params is, like, top is 200 left is 200 and that–that–we
just animate it to that position. Duration is how long–again we have our presets and
you could also pass the number in milliseconds. At easing–makes me want to drink water. Easing
I won’t really go on this, this is pretty complicated but it’s just how you want to
get from one place to another. So for example, one easing is linear just go, like that or
rather say this is my zero opacity and this is my one opacity, linears just like that
there could be an easing for like an exponential curve like that or like that or there could
be–there’s one called bounce in so that goes all the way and then bounces and then bounces
again and then stays. And in callback you execute this after the function is done so
the–the–the main easing that you’ll use is–is linear. So now let me show off advanced
animations. So say I want to do a .–let me get the first A and I’ll animate–first let
me set it to CSSposition–and so since I don’t want it to lose its current position, I’ll
set it top is $(‘a;first’).offset() and left is–again (‘a;first’)–now if we want it to
be really faster, we would put this (‘a;first’) in it’s own variable and this offset in it’s
own variable so we only need to call these. This is the kind of thing that the jQuery
core library does. So then we do the CSS. Now, we’ll animate to top 500–no, that’s
too much, 300 left is 300 and then duration, let’s make it take four seconds and linear
and when we’re done, we’ll do a function. Yeah, so now you see it travels there and
it alerts that we’re done. So let me show you–oh yeah I already showed you the more
basic functions. Okay. So I think now we’re going to do Ajax. So most people like to be
buzzer compliant and of course that means using Ajax. So Ajax the basic–here’s some
basic functions. Use .load and so this basically takes what you have in the URL and you can
pass like, any data to it like getting post data and this happens after you do the load
so what it does is that it gets the stuff at the URL with the http get and it sticks
it in what’s in here, the CSS selector. And then the callback is executed after it’s done.
And again this is relevant here. And .post–and you see that this right there, does not have
a CSS selector and now just correct–you do not get CSS to use a CSS selector here. But
here in the URL you just–here’s the URL you can post some data to your URL and then the
callback is what’s executed after. And in the callback you got a parameter which is
the data you got back. I’ll demonstrate this. No, I won’t demonstrate this but I’ll do demonstrate
it’s companion, the get and this is the same thing except it uses a http get instead of
post. And there’s that Ajax and this is a more complicated, Ajax so let me talk about
that. So what you pass into there is simply a list of options. And one of these options–one
of these options is the data and this is like get a post data, oh, another is type like
get or post in all caps. Another is URL which is the URL you want to get or post it to.
Sorry. So Ajax events, so when you’re doing Ajax, you have certain events so there the
global events. And what these are is you can use the CSS selector and bind to the global
Ajax event name and you can do a function on that. So here is–are a list of them. So
there’s Ajax start. So maybe if you add a little loading widget that pops up–that pops
up whenever you’re loading something, you could–you could bind the loading widget to
the–there’s the loading den which is currently hidden to the Ajax start function and then
whenever it starts an Ajax request, you can put in the callback this dot show or something
and then Ajax send when it’s sending the data. Then there’s Ajax success and here’s probably
where you like–you’d like to hide it. And then Ajax error. This happens when there’s
an error with the Ajax so what you’d like to do here probably like hide it and then
somewhere append in an H1 tag, “There was an error.” So then the other type of Ajax
event is local so this is what–these are the options that you can pass into Ajax. The
.Ajax function. So before send, this happens right before you send it. Success, this happens
when the request is successful. Error, this happens when there was an error with the request.
And complete with everything is complete, regardless of whether it was successful or
there was an error. So let me show off Ajax. Let’s do first the .load. So $(‘table’).parent().load
and I set up a handy HTML fite–file data.HTML. And let’s pass nothing into it and let’s do
the callback. Something like, [pause] and it would help if I spellt–spelled loading
right. Downloading. So, here’s the contents of my data.HTML. And it loaded in and then
it alerted that it was done loading. And this actually even returns the DIV that was loaded
so we could do stuff on this DIV, let’s try that out. $(‘table’).parent().load(‘data.html,{},function),
no, let’s not pass–all of the parameters after the first and get post and load are
optional. And I think even the data parameter is optional, so if you pass in a function
where the data parameter should be–JQuery is squared it up to detect that it’s a function
and then all–instead of sending that to the callback it make–and make every known data.
So then we could do like CSS background color, let’s see what’s a good one, blue. Okay that
didn’t work. And I know why because the table is gone. There, see? Now it’s blue. Very pretty,
very hard to read too. So now let me show off some advanced Ajax. So let me just do
.Ajax and I’ll just say–just for started URL is data.HTML or even better what we could
do is we could load some JSON, how cool would that be? So we could do projects, I set up
the same table in–it’s JSON–.JSON. And so we could do URL and we could request some
JSON and we could type–we’ll be GET and the URL, no I already setup the URL. And so then
of course we need the success function. [PAUSE] So for the success function, we’ll say some–so
we get the data here, so to pars the JSON moves to {JSON=EVAL(‘(‘+ data +’). [PAUSE]
I’m sure there’s a better way to do this, this is just a quickened rerun. So let iterate–so
I made an arrival projects
and in there I had the name. So
table $(‘table’).parent().append(‘json[i].name)) and yes, and it appends. So it got the JSON,
it evaluated it and there we go. So now it appended all the names. Now if we want to
be extra fancy, we might want to add a line break, so we could actually read it. Here
we go. Of course this is from the last request. Now these are from our current requests. So
let me show off the global events, so let’s say $(‘table’).parent() and remember how append
can take a jQuery object? Well the cool thing is that I could–and remember how I said that
I wouldn’t get to the HTML, I actually will in the JQuery function. So DIV and we can
do loading, let me show off my loading example. So we could do this .CSS position absolute,
so it’s a pending list and then may want to hide that. So now we could do–now let’s bind–let’s
say (‘div’,)* text or contains (loading) lets make sure that works [pause] Okay so let’s
reload–actually let’s add a class to this DIV–let’s add a–for an ID–(‘div id’=loader)–so
now you could do like (‘loader’)–which–that works. Now, there is the loader this–so we
could do (‘# loader’).bind (‘Ajaxstart’, function (){$(this).show()}), and now whenever it starts
Ajax, then it’ll show and again let’s find–we could chain this, (‘Ajaxsuccess’), so that’s–let’s
just do simple (‘Ajax’) ({url: ‘projects.json’}) and the–the loader that was right there–but
if you sat–really quickly hide, that was because it ended the request–and the–Ajax
successfully should–I could get it. Okay, are there any questions on this part, yes?
>>[INDISTINCT]>>GASKIN: Yes, that’s the only thing we’ve
focused on there. Actually cross browser compatibility and on–pretty much all the modern browser,
I think jQuery works really well. We have lots of testers, to test that theory out.
That app should work. Yes?>>[INDISTINCT] selector in the next headline,
you know, is it something that I got into, it’s something else or does that…?
>>GASKIN: It’s–if it’s left to right. So it’ll first, execute the selector and then
it’ll do the next one–the next one–left–yes left to right, so any other questions, yes?
>>What was like–can you demonstrate the .end?
>>GASKIN: Demonstrate the .end?>>Yes.
>>GASKIN: Okay, that is a very good idea that I should–so here is also where it would
be useful. So let’s do (‘td’), let’s do background color–I keep messing this up–.css (backgroundcolor,
‘green’).find(‘a’).–wait, let’s get this the first one–so we can use .find (‘a’).,
and then we could do something to the (‘a’) tag–we could do the–like a CSS(‘color’,’red’)and
.end. So now it’s back to the original cell and then we could do .h–no that wouldn’t
work–.append(‘hi’). So it took–it took it, it went from left to right–it selected it–it
changed the background color to green, it got the (‘a’), it changed the color to red
then it ended that first one and it appended hi. Does that makes sense?
>>[INDISTINCT] one in the previous or does it go…
>>GASKIN: Yes, it goes to one previous but if you nest them so for example if you dot–do
.find and then .find again and then .end then it goes to the previous one. And if you do
.end again like it goes to the one–to the first one. And you also–you could do something
like .find we’ll selected .find something–.find something else .end which goes back to this
first find–.find something else .end which goes back to the first find again, .end which
goes to the first selection. Any other questions?>>[INDISTINCT] for .bind, like you know,
put a–put a mouse over, can you bind as many events as you want to?
>>GASKIN: Yes, the question was, can you bind as many events as you want to? And yes
can bind as many events as you can possibly think of. I think that’s it for questions.
Are there any other more? Okay. Now, on to the next section, building plugins. So if
you really think jQuery should do more, this part is for you because I’m going to show
how you can make jQuery do more. So, [pause] here’s how you–here’s how you build functions–plugins.
So, a plugin is just basically a function. Let’s–so you extend jQuery.fn by doing JQery.fn.my
plugin() as a function. And so, for those you who aren’t into the nitty-gritty JavaScript,
jQuery.fn is basically an alias to jQuery.prototype and then each one–each plugin returns this.
So every function returns this. The jQuery–so it wraps this in the jQuery function. So,
that means that what it does is essentially it returns this which has–which is a j–an
instance of jQuery so it has all these other things you can do to it. I–does that makes
sense?>>[INDISTINCT]
>>GASKIN: Yes. You’re–you’re adding new contents to the jQuery core object so that
you could chain them together and jQuery unlike most JavaScript libraries have prototype–has
one object defines exactly one object and it has all its stuff inside that one object.
So, then you can call $(…).myPlugin because that selector returns this. And this is a
jQuery object which has the myPlugin. So, here’s the magical helper–plugin helper and
I will demonstrate how to use that. So here’s the typical plugin. Now, I actually omitted
something in this. So, right–where’s my little pointer thing? Well–oh yes, here it is. So,
right here and right there–you’re looking on that screen. There should be a return.
So, what that does is it returns this .each and .each also returns this. So, what you
do–what that does is basically it iterates through all the items of the selection and
it does–and now this–this–this is just that one element. So, now let me show it off
and for this I will just go into my text editor. So [pause]–So, I’m going to go in to my text
editor because I’ll be doing multiple lines of code. So, this index up PHP. All this code
is fairly complicated oops. Let me bring up the side so you can see. So, another thing
to note that I haven’t talked about yet is when to do it. So, the $(function), so what
you can do is you can do document–$(document).bind(‘ready’, function(), so here is what you do after the
Dom–this is one–this is when the Dom initialize. So you really don’t want to do any job script
out of this because it won’t have any effect and the effects because the browser hasn’t
even parsed the html. So, that was just a quick side note. And here you see I have a
$(function() and that’s just an alias to document.ready. So, now let’s do decree–oh, so by the way
the $ is an alias to the jQuery(function). So, if you want–if you’re feeling really
cross JQue–crossed JavaScript Library. If you’re really, like, want to use multiple
Java Script Libraries, then instead of using the $ you can just use jQuery and then jQuery
pass stuff into there. But I’m not really feeling like that today. Okay. So, I’m not
really feeling like that today, so I’ll do this jQuery.fn.myPlugin – function(){return
$(this).each (function(), so this is what the table will plugin and now we can do stuff
with this here. So, $(this).CSS(‘background-color’ ‘green’;}). And let’s go back to the html,
the page that we loaded. And then we can do the table data and we can do my plugin and
it takes a long time because we have a lot of web. And it–they’re all green and you
see we returned all of these–from returning this. So now, we have a full plugin that’s
chainable and everything. So, I would go into more detail about building plugins, but we’re
kind of constrained on the matters of time. So, now advanced jQuery if you’re wondering
how everything works. Sorry for leaving you–leaving you hanging. I’ll answer that right now. So
the stack, this is–this is how the selectors on the .end function work. So, this holds
all the destructive operations like the manipulation. Whenever you do one of those it–it puts the
previous selection in the stack, and so, it’s just an array. So, it just pushes–it does
.push on this stack and it–whenever you call–this is actually a jQuery object and inside the
jQuery object is contained the stack. And if you’ll go in this–the source code, you
can see all sorts of references and utility functions for that. So, the .end, what that
does is it just returns this stack .pop. So, it just pops the item of the stack and return
to that, instead of returning the current selection. Next is advanced scripting, so,
you can use .getScript, what this does, this is really neat. This is the function that
I don’t think any other JavaScript library provides. Where you can get another script
and it’ll automatically load the other JavaScript script and when–and after that’s done and
then it’ll call the callback. And .getJSON, it’ll–that will get some JSON, so, it’ll
automatically send all the request headers properly. Okay, and–so using jQuery with
other JavaScript libraries. So, what you do that is you wrap your code in this. So, what
this does is it has a temporary function that has the dollar sign passed in and there’s
jQuery’s there. And what you can do is if–say you want to name your jQuery function something
else, not the dollar sign, then you could actually do like jq equals jQuery.no conflict.
So, what that does is it removes the $ and it just makes it–makes it jq. And, you know,
what’s even cooler is you can do is you can pass in jQuery.no conflict true and then–jq=jQuery.noconflict
true, what that does is that totally eliminate even the jQuery object. So, the jQuery object
is gone and all references to it. So, what you can do then is you could have multiple
versions of jQuery running on the same page, and this is useful for like speed testing
and stuff. So, inside there then you can do your document ready in there and you still
have access to the dollar sign. So, are there any questions? Yes.
>>[INDISTINCT]>>GASKIN: The question is does jQuery do
unit tests? And the answer is yes. jQuery has like–I forget like fifteen hundred tests
written for it, to test like every single function multiple times. And yes, we’ve actually
focused a lot on writing tests. Any other questions?
>>What is drop?>>GASKIN: Okay, that’s a very good question,
what is drop? So, for the Druple project, we have an extension of GHOP, or how ever
you wish to pronounce that. What that does is we just–I’m currently on starting something
like that for jQuery in the future whenever I get time, of course I’m over committed.
So, whenever I get time, I will start something like this. So, drop is basically–we’re extending
GHOP, we’re taking little bite-sized tasks, some things we–people can do. And we’re just
uploading them, and say, “Hey, you want to do this as a task?” And then you get points
for it, and we currently don’t know what the points are for, but, you get recognized in
the community if you do drop task. So, yes, if you–if you are feeling to be Druple awesomeness
and you want to try it out then I recommend trying drop for getting–getting your hands
wet and getting people to recognize you. Any other questions? No, I think that’s it. Thanks.
So, there’s one last slide I would like to share with you which is resources, and there’s
only one resource and this resource was like the best resource ever. No, there’s two resources
to that, well the other, I didn’t put on it, and the other is googling for jQuery. But–I
can assume that you’re all advanced enough to be able to do that.
>>What’s Google? Don’t answer that. We don’t want anyone to know.
>>GASKIN: I wasn’t trying to.>>Thank you, Dmitri.
>>GASKIN: Thanks for coming and watching.

Comments

  1. Post
    Author
  2. Post
    Author
  3. Post
    Author
  4. Post
    Author
  5. Post
    Author
    explosivehotdogs

    @zincink same here, but I'd be willing to bet most punters here were still figuring out how to wean themselves off of eating glue… no offense to the punters! ; )

  6. Post
    Author
    roby p

    ok, one hour ago i didn't quite understand the power of jquery.. so thank you Dmitri.. And i have been at many lessons where the professor where much less understandable and much more boring than this kid.. The umm thing it's not a problem in my opinion, the only problem is the console that shows only a little part of the code that he is typing.

  7. Post
    Author
  8. Post
    Author
  9. Post
    Author
  10. Post
    Author
  11. Post
    Author
  12. Post
    Author
  13. Post
    Author
  14. Post
    Author
    James Hamilton

    awesome!! I think back to when I was that old and playing with Photoshop 3 and Windows 3.1 .. although I'm not using Windows 3.1 anymore.. If I'd been introduced and encouraged into programming, I'd be much better at it now, but we can always learn more if we take the time to.. and for people who don't like how he talks.. John Carmack talks a bit funny, so does Bill Gates.. and they're far smarter than most of us will ever be. if you couldn't make it through the umms.. you missed out

  15. Post
    Author
  16. Post
    Author
  17. Post
    Author
  18. Post
    Author
    yumyum999zz

    Well, he is only 12 years old, so I’ll be less abrupt. It is the tile “jQuery” that got this video 233, 964 views (currently) not his ability to express himself. I guess SOMEONE is glad HE knows what he means. This video is like watching someone having an episode of some kind.

  19. Post
    Author
  20. Post
    Author
  21. Post
    Author
  22. Post
    Author
    Gábor Hertelendy

    I truly Envy of his genius, but this presentation is soo bad it can not be focused on for more than seconds. He is so annoying to listen to. Really, I'm having a mental crash down from "Umms" and fast out of rythm speach in pitch voice. He is young all right, he should play outside with his friend, or if none is at his age, then find some. This is not TechTalks this is showing off with a smart kid. dislike^3

  23. Post
    Author
  24. Post
    Author
  25. Post
    Author
  26. Post
    Author
    mobcat40

    I wish someone had spent a few hours to teach the basics of presentation, his ambitious mind woulda easily picked it up and this woulda been 10x better

  27. Post
    Author
  28. Post
    Author
  29. Post
    Author
    Helen Zhang

    This really sucks, we are no longer paying attention to the content that he's presenting rather than his age.

  30. Post
    Author
    HumanBlade

    this video has some… um good content, but um….. the presenter is a bit um scatter-brained, and ummmmm it leads to a non-effective kind of um presentation and stuff. and it's like hes um rushing through ummm everything he's talking about. it ends up being a braindUMp, with painful interface. thumbs down. props to those people who remained in the audience. don't care if i get info from a 12 year old or an octagenarian, but for a googletechtalk, this is way below standard.

  31. Post
    Author
  32. Post
    Author
    Meet Adonis

    this is a greattt great presentation and awesome content! but this kids is killing the learning process! why they put them to show this? is obviously that the kid know a lot! that he is a brain, but as a kid dont have experience and teacher skills! is all wasted for people who is looking to start with jquery and explore it. He is supossing that everybody know what he is talking about, plus he dont explain almost nothing, he just talk with broken words. Googletechs do this again please!

  33. Post
    Author
  34. Post
    Author
  35. Post
    Author
  36. Post
    Author
    Chambewi

    Umm this kid is smarter then any of you umm UMM counters, good thing u'all spoke that well at that age, get over your selves,and give this kid his dews.

    pick, pick pick.

  37. Post
    Author
  38. Post
    Author
    JamesRCoston

    @Junije1 Because I am smart that means that I haven't lost my virginity? Don't make stupid assumptions like that on YouTube because most of the time its only something you want to say and don't actually know.

    I am in a relationship, but I am not prepared to discuss my life with scum like you on YouTube.

  39. Post
    Author
    JamesRCoston

    @Junije1 I just saw your channel, and you're nothing more than a complete waste of organs and skin. Take the comments into consideration, and do people a favour.

  40. Post
    Author
    JamesRCoston

    @Junije1 I don't insult people. And theres nothing wrong with being confident in yourself. I don't wait for other people to judge me and give a result. I could care less about that. I am not interested in biology. So, if that is one of your strong subjects, why on earth are you watching this video?

  41. Post
    Author
    JamesRCoston

    @Junije1 That wouldn't happen, since jQuery and CSS are two different technologies. So, if you are this smart, why did you post a comment like that? Make something of yourself.

  42. Post
    Author
  43. Post
    Author
  44. Post
    Author
  45. Post
    Author
    Wayne Phillips

    I think sometimes we're too concerned about hurting kids' feelings when what they really want is our honesty. Dmitri obviously knows quite a lot about jQuery but that was an awful presentation by any standard. It was just too rushed and all over the place. I don't know if he was just (understandably) nervous or what.

    This is not to say that he can never be good at teaching. Far from it. He just needs guidance. In the meantime, I hope he takes time to enjoy his childhood and adolescence.

  46. Post
    Author
    Tim Williams

    OK, he says 'um' a lot. Get over it.

    Never have I learned so much from someone so young.

    Well done Dmitri. Very impressive.

  47. Post
    Author
  48. Post
    Author
    Timothy Dundon

    They all speak WAY to fast . . . . speaking "fast" is considered being "smart" in our society now . . . . which is quite the opposite. Slowing down when speaking, listening more . . . . that's more important, once day, we'll more back (or forward) to that.

  49. Post
    Author
  50. Post
    Author
  51. Post
    Author
    David Patheyjohns

    It would have been better if he was mentored, or prhapes the women should have stayed near to him to re assure him.

  52. Post
    Author
  53. Post
    Author
  54. Post
    Author
  55. Post
    Author
  56. Post
    Author
  57. Post
    Author
  58. Post
    Author
  59. Post
    Author
  60. Post
    Author
    MrSchwaker

    This video was great, until I read the top comment and started realizing I was getting slapped in the face.

  61. Post
    Author
  62. Post
    Author
  63. Post
    Author
  64. Post
    Author
    ertreri

    this kid is probably more intelligent than 99.5% of the people hired by google, no doubt about it, given that he is this good at 12, and he is also probably already better than 90% their web developers.
    With that said, someone should be arrested, because for a kind his age to know this much in the field IT is actually criminal. The boy does not have a life outside his computer. This is actually a very sad clip.

  65. Post
    Author
  66. Post
    Author
    Jan Christian Refsgaard

    I completely disagree, holding people back can be just as bad as pushing stuff on kids. That is my only childhood regret, I have given up coding manny times prior to puberty, It was so depressing, I remember learning HTML and then not being able to make a webpage because I had no server knowledge, I hit so manny walls because nobody was there to support me. As long as coding is what float Dmitri boat then I think it's awesome!

  67. Post
    Author
  68. Post
    Author
  69. Post
    Author
  70. Post
    Author
  71. Post
    Author
  72. Post
    Author
  73. Post
    Author
  74. Post
    Author
  75. Post
    Author
  76. Post
    Author
    recompile

    He's only 12, when he gets a bit older, he'll learn why he shouldn't use absurd libraries like jquery.

    I did dumb things when I was 12 too.

  77. Post
    Author
    recompile

    A 12-year-old writing code isn't exactly unusual.

    Back in the 80's, you couldn't throw a rock without hitting a 10 year old computer programmer. If you dig around the web, you'll find that many of developers taught themselves how to program between the ages of 8-13.

    Just an example, when I was in fourth grade there were 3 kids besides myself that wrote computer programs for fun, in a class of 25. Scholastic even published a number of programming books for that age group (ex. micro adventure)

  78. Post
    Author
  79. Post
    Author
  80. Post
    Author
    FLKY

    As someone stated before me, a 12 years old kid who writes code isn`t so rare, I know a circle of people who would call that a late bloomer lol.

  81. Post
    Author
    Mike Smith

    concise, to the point: I needed a quick rundown of jQuery to understand some code that flew on my desk (or should I say crime scene…): I only needed to see this once. cuz I have other language knowledge, and this jquery just has the fundamentals of chaining and binding, and a nice compressed no-nonsense syntax.

    Great job! Only a 12 yer old can explain something just straight without fuzz to the point: he did then, no better tutorial than this 2008 video. Thx google tech talks too!

  82. Post
    Author
  83. Post
    Author
    muffdriver69

    I remember when I was his age, I was playing with Ninja Turtles and doing my algebra. This kid is already on the ball with technical university stuff and talks like a genius! Brilliant kid!

  84. Post
    Author
  85. Post
    Author
  86. Post
    Author
  87. Post
    Author
  88. Post
    Author
  89. Post
    Author
  90. Post
    Author
    Churchill Arquero

    nice………..too bad i have watched this just too late…….great talk……creating functions =)

  91. Post
    Author
    Sudeep Makwana

    Kid rocks ……… except "Ummm " but its oki … he is gonna rock in next 5 to 10 year that i can say now …

  92. Post
    Author
  93. Post
    Author
    SpottedSpider

    The speech was useless and I learned nothing. I get the kid is learning JQuery, good for him! But his voice coupled with the fact that he constantly says "um" repeatedly meant this video was absolutely worthless as far as learning even the most basic of knowledge. They could have chosen a better speaker to go over this knowledge. Glad you are passionate about development Dmitri, good for you. But I see no reason why this video should be linked on the JQuery wikipedia. I can't link this material

  94. Post
    Author
  95. Post
    Author
  96. Post
    Author
  97. Post
    Author
  98. Post
    Author
  99. Post
    Author
  100. Post
    Author

Leave a Reply

Your email address will not be published. Required fields are marked *