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

2
00:00:09,221 --> 00:00:10,203
Hi, everyone.

3
00:00:10,203 --> 00:00:13,161
I'm Guil, a developer and
JavaScript teacher here at Treehouse.

4
00:00:13,161 --> 00:00:16,276
I'm really excited to teach
you the basics of JavaScript.

5
00:00:16,276 --> 00:00:19,691
JavaScript is a great first
programming language to learn.

6
00:00:19,691 --> 00:00:22,946
It's fun, versatile and
you can use it in any web browser,

7
00:00:22,946 --> 00:00:27,070
which means that you can get up and
running doing useful things right away.

8
00:00:27,070 --> 00:00:30,868
JavaScript started life as a simple
scripting language intended to

9
00:00:30,868 --> 00:00:33,675
add engaging interactive
features to web pages.

10
00:00:33,675 --> 00:00:37,349
However, JavaScript's grown into
a powerful, general purpose programming

11
00:00:37,349 --> 00:00:40,163
language that's used on nearly
every website in the world.

12
00:00:40,163 --> 00:00:43,517
And in all phases of development,
from software to hardware,

13
00:00:43,517 --> 00:00:46,379
making it one of the most
in demand developer skills.

14
00:00:46,379 --> 00:00:49,504
So it's a great time to
be learning JavaScript.

15
00:00:49,504 --> 00:00:53,441
Let me take you through some of
the places you can find JavaScript,

16
00:00:53,441 --> 00:00:56,553
then we'll jump into a quick
programming example.

17
00:00:56,553 --> 00:01:01,247
Developers have always used JavaScript to
add fun and useful features to webpages.

18
00:01:01,247 --> 00:01:05,055
The most common place you'll
encounter JavaScript is on the web,

19
00:01:05,055 --> 00:01:09,815
where it's used to create every thing
from engaging photo, and video galleries,

20
00:01:09,815 --> 00:01:11,855
like a pop up or scrolling gallery.

21
00:01:11,855 --> 00:01:13,827
To complex animated experiences,

22
00:01:13,827 --> 00:01:17,321
like this interactive photo
gallery shaped like a disco ball.

23
00:01:19,437 --> 00:01:23,601
With JavaScript, you can create
immersive web experiences and

24
00:01:23,601 --> 00:01:27,378
make ordinary web experiences
like signing up at a site and

25
00:01:27,378 --> 00:01:30,556
filling in a form more exciting and
delightful.

26
00:01:34,221 --> 00:01:40,802
You can even make games using HTML,
CSS and JavaScript like in these examples.

27
00:01:40,802 --> 00:01:45,279
Developers use JavaScript for more than
just adding visual flair to a website.

28
00:01:45,279 --> 00:01:49,793
Many of the world's top websites and apps
use JavaScript for useful functionality.

29
00:01:49,793 --> 00:01:53,474
For instance, web applications
like Google Maps, Gmail, and

30
00:01:53,474 --> 00:01:55,528
Google Docs depend on JavaScript.

31
00:01:55,528 --> 00:02:00,627
Many tasks, like creating an email or
document, titling a document and adding

32
00:02:00,627 --> 00:02:06,124
numbers and calculations to a spreadsheet
for example, are done using JavaScript.

33
00:02:06,124 --> 00:02:09,082
One of the best part about
getting started with JavaScript,

34
00:02:09,082 --> 00:02:11,634
is that because it's
implemented in a web browser,

35
00:02:11,634 --> 00:02:14,363
you don't need additional tools or
setup to get going.

36
00:02:14,363 --> 00:02:15,533
Let me show you a fun example.

37
00:02:15,533 --> 00:02:19,543
In fact, you can follow along if you like by
launching the workspace with this video.

38
00:02:19,543 --> 00:02:25,194
In the workspace, open the preview.js
file located inside the js folder.

39
00:02:25,194 --> 00:02:28,437
Don't worry about what any of the code
in this file means right now.

40
00:02:28,437 --> 00:02:31,232
You'll learn more about what
each part of this code does, and

41
00:02:31,232 --> 00:02:34,850
have a chance to do lots of programming
with JavaScript throughout the course.

42
00:02:34,850 --> 00:02:40,878
This is a JavaScript file containing a
short program that asks the user by name.

43
00:02:40,878 --> 00:02:43,208
Hi, want to see something cool?

44
00:02:43,208 --> 00:02:48,176
Then it replaces all the content on
whatever webpage they're visiting with

45
00:02:48,176 --> 00:02:50,825
a Welcome headline and an animated GIF.

46
00:02:50,825 --> 00:02:55,648
First I'll replace the text
inside these quotes with my name,

47
00:02:55,648 --> 00:02:59,018
and now I'll run
the script in the browser.

48
00:02:59,018 --> 00:03:01,284
In fact, I'll try it on a live website.

49
00:03:01,284 --> 00:03:05,846
A quick and easy way to run JavaScript is
in the web browser's developer tools using

50
00:03:05,846 --> 00:03:08,011
a tool called the JavaScript Console.

51
00:03:08,011 --> 00:03:13,574
One way to open the console is with the
keyboard shortcut CMD+OPTION+J on a Mac,

52
00:03:13,574 --> 00:03:15,762
or CTRL+SHIFT+J on Windows.

53
00:03:15,762 --> 00:03:19,430
You're going to use the console all
throughout the course to run and

54
00:03:19,430 --> 00:03:21,424
test JavaScript code, identify and

55
00:03:21,424 --> 00:03:25,108
fix errors, as well as display
messages from within your program.

56
00:03:25,108 --> 00:03:30,098
The console lets you interact with
the webpage you're currently on, so I can

57
00:03:30,098 --> 00:03:35,266
try this script on just about any website
by pasting this code into the console.

58
00:03:35,266 --> 00:03:38,749
For instance, I'll run the script
on the MDN web docs site,

59
00:03:38,749 --> 00:03:42,795
which is one of the best resources
on web technologies, just for fun.

60
00:03:42,795 --> 00:03:46,544
I'll copy all the code from my file and

61
00:03:46,544 --> 00:03:52,063
paste it into the console,
then press Enter or Return.

62
00:03:52,063 --> 00:03:55,996
We see a dialogue box pop up
on the page that says Hi Guil,

63
00:03:55,996 --> 00:03:58,024
want to see something cool?

64
00:03:58,024 --> 00:04:02,148
I wanna click OK,
everything on the page disappears.

65
00:04:02,148 --> 00:04:07,774
The webpage's HTML, CSS, and JavaScript
is replaced by the headline and an image.

66
00:04:07,774 --> 00:04:09,504
And notice that this is only temporary.

67
00:04:09,504 --> 00:04:13,331
When you refresh the browser,
everything comes back.

68
00:04:13,331 --> 00:04:17,461
I can make this script a little more
useful and interactive by allowing

69
00:04:17,461 --> 00:04:21,802
any user to enter their name into an input
field and display it on the page.

70
00:04:21,802 --> 00:04:26,773
I'll replace my name inside
quotes with prompt, and

71
00:04:26,773 --> 00:04:29,650
the message What is your name?

72
00:04:33,454 --> 00:04:35,333
And let's see what this does.

73
00:04:35,333 --> 00:04:43,099
I'll copy my updated code, then paste the
code into the console, and press Enter.

74
00:04:43,099 --> 00:04:47,794
Now a dialog box appears that asks,
What is your name?

75
00:04:47,794 --> 00:04:53,873
Or enter Guil and click OK, And

76
00:04:53,873 --> 00:04:58,980
now the alert dialogue says,
Hi Guil, want to see something cool?

77
00:04:58,980 --> 00:05:04,478
When I click OK, again everything
on MDN doc's page disappears and

78
00:05:04,478 --> 00:05:08,348
gets replaced by the welcome headline and
GIF.

79
00:05:08,348 --> 00:05:09,391
Neat.

80
00:05:09,391 --> 00:05:13,295
This is another advantage of learning
JavaScript as your first programming

81
00:05:13,295 --> 00:05:13,907
language.

82
00:05:13,907 --> 00:05:17,566
You can get instant feedback in
the browser with a minimal amount of

83
00:05:17,566 --> 00:05:18,619
JavaScript code.

84
00:05:18,619 --> 00:05:21,461
I'll refresh the page,
now all the content is back.

85
00:05:23,537 --> 00:05:26,366
And JavaScript isn't just
limited to the web browser.

86
00:05:26,366 --> 00:05:30,250
You can also use JavaScript outside
of the browser, even on web servers.

87
00:05:30,250 --> 00:05:32,988
For example,
Node js is a popular choice for

88
00:05:32,988 --> 00:05:35,800
writing JavaScript that
runs on the server.

89
00:05:35,800 --> 00:05:40,450
Node offers great performance and
easily handles lots of simultaneous users.

90
00:05:40,450 --> 00:05:43,907
It's a favorite of big companies
like PayPal, LinkedIn and

91
00:05:43,907 --> 00:05:48,060
Netflix who use Node to serve up at
least some portion of their websites.

92
00:05:48,060 --> 00:05:51,557
There are even complete desktop
applications written in JavaScript.

93
00:05:51,557 --> 00:05:54,976
For example, Slack,
GitHub desktop, the Visual Studio,

94
00:05:54,976 --> 00:05:58,273
Code Editor and
Discord are all written with JavaScript.

95
00:05:58,273 --> 00:06:01,486
You'll learn a whole lot more about
Node JS in later courses, and

96
00:06:01,486 --> 00:06:05,181
you'll need to study a lot and work
hard to build the next Slack or Discord.

97
00:06:05,181 --> 00:06:09,421
But the basics you're going to learn in
this course will provide the foundations

98
00:06:09,421 --> 00:06:11,604
for building complex user interfaces and

99
00:06:11,604 --> 00:06:14,929
software that's usable by everyone
on just about any device.

100
00:06:14,929 --> 00:06:16,152
And with just the basics,

101
00:06:16,152 --> 00:06:19,890
you can start using JavaScript in all
sorts of fascinating in meaningful ways.