PAUL IRISH: Hi.
I want to share with you guys a few JavaScript APIs you
might not be too familiar with.
I'm going to list them right here in this page.
I'm just going to chuck them in.
Add content editable to this h1, paste them in.
This works for now.
The first one is classList. After that we're going to talk
about dataset, matchMedia, textContent, matchesSelector.
We'll get right into it.
ClassList is a better API for dealing with the class name of
an element.
Normally we do a lot of stream manipulation, and
it's not so much fun.
But classList gives us an API that we really deserve.
So I'm going to go over here to this panel over here.
You can see that this li has a class of Selected on it.
And it gives us this light blue background.
Now, I want to add that class to another one.
So I'm going to bring up the console by hitting Escape, and
I'm going to be using a shortcut, $ 0, just refers to
whatever element I have selected right here.
So $0.classList.add('selected'),
now, there it is.
It just adds the class of Selected.
I could also add, let's say, OK.
Now, as you can imagine, a remove also works.
So I can remove my selected class back.
And of course, a toggle, so I can toggle that on and off.
As you can see, the class is being toggled, as is the nice
blue background.
So that's about it.
Next is elem.dataset.
I'm going to go over to this page right here.
This is a page of talks that my team has done lately.
And each of the talks in the markup that we're using here,
we're using a bunch of article elements.
And on each of the article elements we use
an HTML5 data attribute.
And it says data event, and it lists out the event name.
I like that for CSS selectors and giving a
nice styling hook.
So let's see.
I'm going to reference this element again.
And the old way of getting at this is Get Attribute.
And I could get my attribute with data.event.
That works.
But we also now have dataset.
So I can say dataset and go straight to event, and that
returns back that string.
I'm going to add in one more here.
So we're going to add in data.place-name.
Oh, probably need to give it a value.
I'll say Brazil.
Now, one thing you should be aware of is that, if you are
using an extra hyphen, it'll be camelCased over in dataset.
So just be aware of that.
But the cool thing about dataset is that you ask for
just it, and you get back this DOM string map which is
essentially an object which just has all the data
attributes.
So it kind of collects them, rounds them up, and gives it
back to you as an object.
It's really nice.
The next is window.matchMedia.
Now this is kind of a fun one.
So I'm going to type in window.matchMedia.
So this basically is a JavaScript API for testing to
see if a certain media query, a media query that we use in
CSS, if that's going to pass.
But now you can see it in JavaScript.
So I'm going to type out only screen, and max
width is 700 pixels.
I think that's about right.
It returns back this media query list object, which is a
little funky, but the thing that we're most interested in
is the matches attributes.
So currently, this media query, if I had this in my
style sheet, this would not be passing.
Let me try resizing my window a little bit.
No, we're not passing yet.
OK, so we've now reduced the window to less than 700
pixels, so that's going to pass.
So, anyways, there's matchMedia.
Test out your media queries.
Next is textContent.
And textContent's been around for a little while, but I just
want to cover it real quick.
TextContent is an API for just seeing, what is the text value
of a DOM subtree?
So I'm going to ask for the textContent of
this photo down here.
And here we get back just the text that
your users are seeing.
This is somewhat similar to the innerText attribute that
is also on DOM elements.
But there is a small difference.
Where inner text is cognizant of the styles that you're
applying, and let's say an element in here was display
none, innerText would not return that in its result,
whereas text content would.
So there's a slight difference, but most of the
time it doesn't matter too much.
TextContent is supported in IE9 and
absolutely every other browser.
So you're good to use it.
The last one I want to show is matchesSelector.
This is a really fun one.
So I'm going to go down here.
And these links, this little table contents, I'm going to
select one of these.
So this link--
the element--
And I call matchesSelector on it.
Currently, this is prefixed, so it's webkitMatchesSelector,
or in Firefox it's mozMatchesSelector.
And so I'm going to ask, hey, does this element--
would it match against the selector like, A?
And it would.
Because it's an A tag.
Whereas it's not an li, so this is false.
It is an A inside of an li, and it's also ol.toc li A
should be true, because--
here we go.
So that's pretty cool.
Where this comes in really handy is over in event
delegation.
So I'm going to bring up a little bit of code right here.
So what we have here is a little bit of
event delegation code.
We're going to bind a click handler to the document.
And what we want to do here is, if I click on of these
links, I want to do a smooth scroll down the page, down to
wherever this content is.
But here's the tricky part.
We need to figure out, wherever we click, what is
that element, and does that element match the thing that
we're targeting?
So I'm going to write this out, but I'm going to kind of
cheat a little bit.
I'm just going to steal this code right here, this
matchesSelector.
But we need an element here to base that off of.
What we're going to do is we're just going to grab this
event object that was passed into the listener.
And I'm going to grab the target off of that.
And that refers to whatever element initially received
that click.
And so event.target, we want to see if that matches a
selector, which indicates that it is indeed one of these.
And if it is then we're going to do a
smooth scroll for alert.
Otherwise, do nothing.
So I'm just going to try that out.
OK, that seemed to work.
And I click other places, nothing is happening.
I click on these guys, and yes.
OK, that's it.
So anyways, five APIs, hope you're a little bit more
familiar with them now.
And I hope to see you using them.
Thanks.