1
00:00:00,008 --> 00:00:04,571
Before we add the next feature to our
spoiler project I want to introduce you to

2
00:00:04,571 --> 00:00:10,350
an approach for how to use JavaScript
on webpages, unobtrusive JavaScript.

3
00:00:10,350 --> 00:00:14,030
Unobtrusive JavaScript is
basically three principles.

4
00:00:14,030 --> 00:00:18,240
The first is that JavaScript, as the
functional layer of webpages, should be

5
00:00:18,240 --> 00:00:22,890
kept separate from the structural and
presentational layers, the HTML and CSS.

6
00:00:23,950 --> 00:00:27,700
We've got that covered by keeping all
of our JavaScript in a separate file.

7
00:00:29,080 --> 00:00:34,480
The second principle is that cross-browser
inconsistencies should be accounted for.

8
00:00:34,480 --> 00:00:39,350
Users should have similar experiences,
regardless of which browser they're using.

9
00:00:39,350 --> 00:00:42,860
As we've discussed, that's pretty
much what jQuery was invented for, so

10
00:00:42,860 --> 00:00:43,705
we're covered there.

11
00:00:43,705 --> 00:00:47,852
[SOUND] The third idea is
called progressive enhancement.

12
00:00:47,852 --> 00:00:51,824
Progressive enhancement is the idea
that your website's core content and

13
00:00:51,824 --> 00:00:56,300
functionality should be available even
when JavaScript is blocked, disabled, or

14
00:00:56,300 --> 00:00:58,390
not fully supported.

15
00:00:58,390 --> 00:01:02,310
Why would someone have JavaScript
turned off you may ask?

16
00:01:02,310 --> 00:01:04,645
Your user might have
some kind of firewall or

17
00:01:04,645 --> 00:01:08,710
plug-in installed that ends up blocking or
breaking your scripts.

18
00:01:08,710 --> 00:01:12,084
Something might go wrong at
the network level causing your scripts

19
00:01:12,084 --> 00:01:14,240
to only be partially loaded.

20
00:01:14,240 --> 00:01:18,310
A business might disable JavaScript on
employee computers to limit the use of

21
00:01:18,310 --> 00:01:20,070
certain websites.

22
00:01:20,070 --> 00:01:23,890
Your user could be using an older
browser at a public library, or

23
00:01:23,890 --> 00:01:28,520
a school with older computers, or using
your website in a developing country that

24
00:01:28,520 --> 00:01:32,690
doesn't yet have the technology
to support modern browsers, or

25
00:01:32,690 --> 00:01:36,310
your script can simply fail for
some unknown reason.

26
00:01:36,310 --> 00:01:38,990
Think about progressive
enhancement in this way.

27
00:01:38,990 --> 00:01:41,620
It's about making sure your
site's core content and

28
00:01:41,620 --> 00:01:47,000
functionality is available regardless of
the technology your user has access to,

29
00:01:47,000 --> 00:01:51,260
and adding on interactivity and
other bells and whistles from there.

30
00:01:51,260 --> 00:01:53,860
Take google.com as an example.

31
00:01:53,860 --> 00:01:56,540
What is the function of google.com?

32
00:01:56,540 --> 00:01:58,650
What should the user be able to do?

33
00:01:58,650 --> 00:02:02,220
Well, as I'm sure you know,
Google is a search engine.

34
00:02:02,220 --> 00:02:05,540
Its core functionality is that users
should be able to go to the site,

35
00:02:05,540 --> 00:02:09,120
search for a term, and
get a list of search results.

36
00:02:09,120 --> 00:02:14,624
Everything else, a little animations,
and games that are available sometimes,

37
00:02:14,624 --> 00:02:19,187
the auto-complete feature, and
the search by voice feature are all

38
00:02:19,187 --> 00:02:23,240
add-ons that enhance the core
purpose of this site.

39
00:02:23,240 --> 00:02:28,340
If I were to search for something like
kittens, Google wants to know my location.

40
00:02:28,340 --> 00:02:32,200
I get some latest tweets about kittens.

41
00:02:32,200 --> 00:02:35,890
This top stories widget that shows me all
of the latest and greatest news about

42
00:02:35,890 --> 00:02:41,140
kittens, and also this button here where
I can search for a new term by voice.

43
00:02:42,420 --> 00:02:44,320
Let's turn off JavaScript for a moment.

44
00:02:45,320 --> 00:02:51,170
We're going to go into dev tools
in Chrome, click these three dots,

45
00:02:51,170 --> 00:02:55,090
and then settings, and
then scroll to the bottom here and

46
00:02:56,120 --> 00:02:58,530
click this Disable JavaScript box.

47
00:03:00,490 --> 00:03:04,590
Now, I will refresh, and with
the JavaScript turned off, you can see

48
00:03:04,590 --> 00:03:10,240
the page looks a bit different, and the
search by voice button has disappeared.

49
00:03:10,240 --> 00:03:13,510
If the search by voice button element
had been included in the markup,

50
00:03:13,510 --> 00:03:18,510
it would be visible, but not functional to
a user whose JavaScript is unavailable.

51
00:03:18,510 --> 00:03:21,540
The resulting user experience
would be frustrating.

52
00:03:21,540 --> 00:03:24,434
Have you ever spent a few moments
furiously clicking on a button that

53
00:03:24,434 --> 00:03:25,640
doesn't respond?

54
00:03:25,640 --> 00:03:27,130
Not fun right?

55
00:03:27,130 --> 00:03:31,220
So some of the fancier options might have
disappeared, but I can still search for

56
00:03:31,220 --> 00:03:33,540
a term and get some results.

57
00:03:33,540 --> 00:03:35,360
Depending on your specific project or

58
00:03:35,360 --> 00:03:39,420
situation, it might not make sense
to work as hard as Google does

59
00:03:39,420 --> 00:03:43,260
to ensure that your website remains
functional without JavaScript.

60
00:03:43,260 --> 00:03:47,920
However, thinking about it this way can
help us decide, in our own projects,

61
00:03:47,920 --> 00:03:51,800
which HTML elements we should
generate using JavaScript, and

62
00:03:51,800 --> 00:03:55,160
which elements we should
write directly into the HTML.

63
00:03:57,375 --> 00:04:03,034
I'm going to turn JavaScript back
on by unclicking this button and

64
00:04:03,034 --> 00:04:07,190
refreshing, and
let's go back to our project.

65
00:04:07,190 --> 00:04:09,190
What does our application do?

66
00:04:09,190 --> 00:04:13,230
Well, it allows the user to
read a spoiler about a movie.

67
00:04:13,230 --> 00:04:16,180
We'll need to make sure our content,
the spoilers,

68
00:04:16,180 --> 00:04:19,170
are accessible even if
the JavaScript doesn't work.

69
00:04:19,170 --> 00:04:23,400
That means a spoiler text should
always be present in our HTML.

70
00:04:23,400 --> 00:04:27,610
On the other hand, we can use JavaScript
to dynamically generate the HTML for

71
00:04:27,610 --> 00:04:30,720
the button, and insert it onto the page.

72
00:04:30,720 --> 00:04:34,280
That way, if JavaScript isn't available,
and the button won't work for

73
00:04:34,280 --> 00:04:36,400
a user, it won't show up.

74
00:04:36,400 --> 00:04:38,130
Let's do that in the next video.