- Adding jQuery to a Project 2:43
- Spoiler Revealer: Breaking it Down 6:28
- Understanding Unobtrusive JavaScript 4:38
- Adding New Elements to the DOM 5:06
- Progressive Enhancement and Unobtrusive JavaScript 5 questions
- Adding New Elements to the DOM 2 objectives
- Using on() for Event Handling 2:26
- Using Events with Dynamically Added Elements 4:41
- The Event Object 4:44
- Events with jQuery 2 objectives
- What is Traversal? 8:42
- DOM Traversal with jQuery 2 objectives
- jQuery Events and DOM Traversal Review 5 questions
Preview
Video Player
00:00
00:00
Understanding Unobtrusive JavaScript
4:38Learn three principles of unobtrusive JavaScript: a helpful approach when building web page functionality with jQuery.
Before we add the next feature to our
spoiler project I want to introduce you to
0:00
an approach for how to use JavaScript
on webpages, unobtrusive JavaScript.
0:04
Unobtrusive JavaScript is
basically three principles.
0:10
The first is that JavaScript, as the
functional layer of webpages, should be
0:14
kept separate from the structural and
presentational layers, the HTML and CSS.
0:18
We've got that covered by keeping all
of our JavaScript in a separate file.
0:23
The second principle is that cross-browser
inconsistencies should be accounted for.
0:29
Users should have similar experiences,
regardless of which browser they're using.
0:34
As we've discussed, that's pretty
much what jQuery was invented for, so
0:39
we're covered there.
0:42
[SOUND] The third idea is
called progressive enhancement.
0:43
Progressive enhancement is the idea
that your website's core content and
0:47
functionality should be available even
when JavaScript is blocked, disabled, or
0:51
not fully supported.
0:56
Why would someone have JavaScript
turned off you may ask?
0:58
Your user might have
some kind of firewall or
1:02
plug-in installed that ends up blocking or
breaking your scripts.
1:04
Something might go wrong at
the network level causing your scripts
1:08
to only be partially loaded.
1:12
A business might disable JavaScript on
employee computers to limit the use of
1:14
certain websites.
1:18
Your user could be using an older
browser at a public library, or
1:20
a school with older computers, or using
your website in a developing country that
1:23
doesn't yet have the technology
to support modern browsers, or
1:28
your script can simply fail for
some unknown reason.
1:32
Think about progressive
enhancement in this way.
1:36
It's about making sure your
site's core content and
1:38
functionality is available regardless of
the technology your user has access to,
1:41
and adding on interactivity and
other bells and whistles from there.
1:47
Take google.com as an example.
1:51
What is the function of google.com?
1:53
What should the user be able to do?
1:56
Well, as I'm sure you know,
Google is a search engine.
1:58
Its core functionality is that users
should be able to go to the site,
2:02
search for a term, and
get a list of search results.
2:05
Everything else, a little animations,
and games that are available sometimes,
2:09
the auto-complete feature, and
the search by voice feature are all
2:14
add-ons that enhance the core
purpose of this site.
2:19
If I were to search for something like
kittens, Google wants to know my location.
2:23
I get some latest tweets about kittens.
2:28
This top stories widget that shows me all
of the latest and greatest news about
2:32
kittens, and also this button here where
I can search for a new term by voice.
2:35
Let's turn off JavaScript for a moment.
2:42
We're going to go into dev tools
in Chrome, click these three dots,
2:45
and then settings, and
then scroll to the bottom here and
2:51
click this Disable JavaScript box.
2:56
Now, I will refresh, and with
the JavaScript turned off, you can see
3:00
the page looks a bit different, and the
search by voice button has disappeared.
3:04
If the search by voice button element
had been included in the markup,
3:10
it would be visible, but not functional to
a user whose JavaScript is unavailable.
3:13
The resulting user experience
would be frustrating.
3:18
Have you ever spent a few moments
furiously clicking on a button that
3:21
doesn't respond?
3:24
Not fun right?
3:25
So some of the fancier options might have
disappeared, but I can still search for
3:27
a term and get some results.
3:31
Depending on your specific project or
3:33
situation, it might not make sense
to work as hard as Google does
3:35
to ensure that your website remains
functional without JavaScript.
3:39
However, thinking about it this way can
help us decide, in our own projects,
3:43
which HTML elements we should
generate using JavaScript, and
3:47
which elements we should
write directly into the HTML.
3:51
I'm going to turn JavaScript back
on by unclicking this button and
3:57
refreshing, and
let's go back to our project.
4:03
What does our application do?
4:07
Well, it allows the user to
read a spoiler about a movie.
4:09
We'll need to make sure our content,
the spoilers,
4:13
are accessible even if
the JavaScript doesn't work.
4:16
That means a spoiler text should
always be present in our HTML.
4:19
On the other hand, we can use JavaScript
to dynamically generate the HTML for
4:23
the button, and insert it onto the page.
4:27
That way, if JavaScript isn't available,
and the button won't work for
4:30
a user, it won't show up.
4:34
Let's do that in the next video.
4:36