1
00:00:00,000 --> 00:00:09,321
[MUSIC]

2
00:00:09,321 --> 00:00:14,138
JavaScript is a popular general purpose
programming language you can use to power

3
00:00:14,138 --> 00:00:19,340
web servers, create desktop and
mobile applications, even control robots.

4
00:00:19,340 --> 00:00:22,501
But JavaScript was initially
designed to run in the browser,

5
00:00:22,501 --> 00:00:26,510
to make webpages responsive to mouse
clicks and other visitor input.

6
00:00:26,510 --> 00:00:30,353
It's one of the essential tools for
creating fun, interactive,

7
00:00:30,353 --> 00:00:32,693
and useful websites and applications.

8
00:00:32,693 --> 00:00:35,917
I'm Guil, a developer and
an instructor here at Treehouse.

9
00:00:35,917 --> 00:00:39,278
In this course,
you'll start to learn how to bring

10
00:00:39,278 --> 00:00:42,495
webpages to life using
the power of JavaScript.

11
00:00:42,495 --> 00:00:46,333
This course assumes you know
your way around JavaScript basics.

12
00:00:46,333 --> 00:00:49,326
So make sure you've completed
the prerequisites listed in the teacher's

13
00:00:49,326 --> 00:00:51,140
notes with this video, before continuing.

14
00:00:52,290 --> 00:00:57,697
JavaScript lets you create interactive
webpages that respond to a user's actions.

15
00:00:57,697 --> 00:01:01,243
For example, a user clicks on a button,
or fills out a form, and

16
00:01:01,243 --> 00:01:03,425
then something happens, as a result.

17
00:01:03,425 --> 00:01:07,657
New content appears on the page,
form fields provide validation hints,

18
00:01:07,657 --> 00:01:09,170
a video plays, and more.

19
00:01:10,260 --> 00:01:14,441
First, let's look at examples of
JavaScript's role in helping you create

20
00:01:14,441 --> 00:01:16,940
immersive, interactive web experiences.

21
00:01:18,220 --> 00:01:21,599
Here's a website displaying
documentation and resources for

22
00:01:21,599 --> 00:01:24,950
a popular JavaScript library called React.

23
00:01:24,950 --> 00:01:28,844
These docs, like many library and
tool documentation sites,

24
00:01:28,844 --> 00:01:31,720
are usually made up of static web pages.

25
00:01:31,720 --> 00:01:34,870
For the most part,
there's no JavaScript interactivity.

26
00:01:34,870 --> 00:01:38,787
The site contains only text and links,
which is perfect for this site,

27
00:01:38,787 --> 00:01:43,230
because it's all about delivering
paragraphs of textual information.

28
00:01:43,230 --> 00:01:47,130
It's just meant to model a regular page,
like a page in a book that you can read.

29
00:01:48,300 --> 00:01:52,310
Next, let's check out this
JavaScript Calculator.

30
00:01:52,310 --> 00:01:58,150
Clicking a number button makes that
number flash and appear in this display.

31
00:01:58,150 --> 00:02:03,148
I can clear the display then,
for example, add 8 and

32
00:02:03,148 --> 00:02:07,980
9, click =, and the number 17 appears.

33
00:02:07,980 --> 00:02:10,870
This is what I mean by interactivity.

34
00:02:10,870 --> 00:02:15,577
When the page loads, JavaScript code
tells the browser to listen for

35
00:02:15,577 --> 00:02:19,892
button clicks, and
perform math in response to those clicks.

36
00:02:19,892 --> 00:02:23,415
Then it alters the display to
show that math as it's performed.

37
00:02:24,578 --> 00:02:27,704
Now let's have a look at
a fun interactive website,

38
00:02:27,704 --> 00:02:30,910
that highlights the fall
harvest of Corto olive oil.

39
00:02:31,920 --> 00:02:37,670
After the page loads, we can use the
slider at the bottom to explore the site.

40
00:02:37,670 --> 00:02:41,630
This triggers an animated transition
into a video about the product.

41
00:02:43,250 --> 00:02:45,990
Now, we're presented with a menu.

42
00:02:45,990 --> 00:02:50,270
Clicking a menu item triggers all
sorts of changes to the page.

43
00:02:50,270 --> 00:02:54,249
We can also click on the navigation
buttons along the right side of the page,

44
00:02:54,249 --> 00:02:57,500
and the page transitions to
the corresponding information.

45
00:02:58,900 --> 00:03:03,594
So now you're starting to understand
how JavaScript can make websites more

46
00:03:03,594 --> 00:03:06,430
engaging and pleasurable to use.

47
00:03:06,430 --> 00:03:09,710
Let's look at one more example,
Google Sheets.

48
00:03:09,710 --> 00:03:13,380
This is an example of a full
blown web application.

49
00:03:13,380 --> 00:03:16,330
You can type information into cells.

50
00:03:16,330 --> 00:03:20,771
You can right click on cells to bring
up various options to, for example,

51
00:03:20,771 --> 00:03:24,150
insert or delete rows, columns, and cells.

52
00:03:24,150 --> 00:03:28,785
And you can navigate menus for
other functionality, such as sorting,

53
00:03:28,785 --> 00:03:32,220
filtering, or even adding new sheets.

54
00:03:32,220 --> 00:03:37,601
All of this interactivity is
accomplished with JavaScript,

55
00:03:37,601 --> 00:03:41,842
which is listening for
actions like clicks, and

56
00:03:41,842 --> 00:03:46,197
then changing what we see
based on those actions.

57
00:03:46,197 --> 00:03:49,543
To make static pages
interactive with JavaScript,

58
00:03:49,543 --> 00:03:53,807
you'll start by breaking
interactivity into distinct actions.

59
00:03:53,807 --> 00:03:57,843
Selecting elements on the page,
manipulating or doing something with

60
00:03:57,843 --> 00:04:02,291
the elements, and listening for user
actions or events, like a mouse click.

61
00:04:02,291 --> 00:04:07,069
You'll learn how to take control of your
webpages by accessing something called

62
00:04:07,069 --> 00:04:10,830
the Document Object Model,
or DOM, with JavaScript.

63
00:04:10,830 --> 00:04:13,770
The DOM is where all
these actions take place.

64
00:04:13,770 --> 00:04:16,760
There's so much to learn, and
we're gonna have fun in this course, so,

65
00:04:16,760 --> 00:04:17,640
let's get started.