[MUSIC]
0:00
Hi, everyone.
0:09
I'm Guil, a developer and
JavaScript teacher here at Treehouse.
0:10
I'm really excited to teach
you the basics of JavaScript.
0:13
JavaScript is a great first
programming language to learn.
0:16
It's fun, versatile and
you can use it in any web browser,
0:19
which means that you can get up and
running doing useful things right away.
0:22
JavaScript started life as a simple
scripting language intended to
0:27
add engaging interactive
features to web pages.
0:30
However, JavaScript's grown into
a powerful, general purpose programming
0:33
language that's used on nearly
every website in the world.
0:37
And in all phases of development,
from software to hardware,
0:40
making it one of the most
in demand developer skills.
0:43
So it's a great time to
be learning JavaScript.
0:46
Let me take you through some of
the places you can find JavaScript,
0:49
then we'll jump into a quick
programming example.
0:53
Developers have always used JavaScript to
add fun and useful features to webpages.
0:56
The most common place you'll
encounter JavaScript is on the web,
1:01
where it's used to create every thing
from engaging photo, and video galleries,
1:05
like a pop up or scrolling gallery.
1:09
To complex animated experiences,
1:11
like this interactive photo
gallery shaped like a disco ball.
1:13
With JavaScript, you can create
immersive web experiences and
1:19
make ordinary web experiences
like signing up at a site and
1:23
filling in a form more exciting and
delightful.
1:27
You can even make games using HTML,
CSS and JavaScript like in these examples.
1:34
Developers use JavaScript for more than
just adding visual flair to a website.
1:40
Many of the world's top websites and apps
use JavaScript for useful functionality.
1:45
For instance, web applications
like Google Maps, Gmail, and
1:49
Google Docs depend on JavaScript.
1:53
Many tasks, like creating an email or
document, titling a document and adding
1:55
numbers and calculations to a spreadsheet
for example, are done using JavaScript.
2:00
One of the best part about
getting started with JavaScript,
2:06
is that because it's
implemented in a web browser,
2:09
you don't need additional tools or
setup to get going.
2:11
Let me show you a fun example.
2:14
In fact, you can follow along if you like by
launching the workspace with this video.
2:15
In the workspace, open the preview.js
file located inside the js folder.
2:19
Don't worry about what any of the code
in this file means right now.
2:25
You'll learn more about what
each part of this code does, and
2:28
have a chance to do lots of programming
with JavaScript throughout the course.
2:31
This is a JavaScript file containing a
short program that asks the user by name.
2:34
Hi, want to see something cool?
2:40
Then it replaces all the content on
whatever webpage they're visiting with
2:43
a Welcome headline and an animated GIF.
2:48
First I'll replace the text
inside these quotes with my name,
2:50
and now I'll run
the script in the browser.
2:55
In fact, I'll try it on a live website.
2:59
A quick and easy way to run JavaScript is
in the web browser's developer tools using
3:01
a tool called the JavaScript Console.
3:05
One way to open the console is with the
keyboard shortcut CMD+OPTION+J on a Mac,
3:08
or CTRL+SHIFT+J on Windows.
3:13
You're going to use the console all
throughout the course to run and
3:15
test JavaScript code, identify and
3:19
fix errors, as well as display
messages from within your program.
3:21
The console lets you interact with
the webpage you're currently on, so I can
3:25
try this script on just about any website
by pasting this code into the console.
3:30
For instance, I'll run the script
on the MDN web docs site,
3:35
which is one of the best resources
on web technologies, just for fun.
3:38
I'll copy all the code from my file and
3:42
paste it into the console,
then press Enter or Return.
3:46
We see a dialogue box pop up
on the page that says Hi Guil,
3:52
want to see something cool?
3:55
I wanna click OK,
everything on the page disappears.
3:58
The webpage's HTML, CSS, and JavaScript
is replaced by the headline and an image.
4:02
And notice that this is only temporary.
4:07
When you refresh the browser,
everything comes back.
4:09
I can make this script a little more
useful and interactive by allowing
4:13
any user to enter their name into an input
field and display it on the page.
4:17
I'll replace my name inside
quotes with prompt, and
4:21
the message What is your name?
4:26
And let's see what this does.
4:33
I'll copy my updated code, then paste the
code into the console, and press Enter.
4:35
Now a dialog box appears that asks,
What is your name?
4:43
Or enter Guil and click OK, And
4:47
now the alert dialogue says,
Hi Guil, want to see something cool?
4:53
When I click OK, again everything
on MDN doc's page disappears and
4:58
gets replaced by the welcome headline and
GIF.
5:04
Neat.
5:08
This is another advantage of learning
JavaScript as your first programming
5:09
language.
5:13
You can get instant feedback in
the browser with a minimal amount of
5:13
JavaScript code.
5:17
I'll refresh the page,
now all the content is back.
5:18
And JavaScript isn't just
limited to the web browser.
5:23
You can also use JavaScript outside
of the browser, even on web servers.
5:26
For example,
Node js is a popular choice for
5:30
writing JavaScript that
runs on the server.
5:32
Node offers great performance and
easily handles lots of simultaneous users.
5:35
It's a favorite of big companies
like PayPal, LinkedIn and
5:40
Netflix who use Node to serve up at
least some portion of their websites.
5:43
There are even complete desktop
applications written in JavaScript.
5:48
For example, Slack,
GitHub desktop, the Visual Studio,
5:51
Code Editor and
Discord are all written with JavaScript.
5:54
You'll learn a whole lot more about
Node JS in later courses, and
5:58
you'll need to study a lot and work
hard to build the next Slack or Discord.
6:01
But the basics you're going to learn in
this course will provide the foundations
6:05
for building complex user interfaces and
6:09
software that's usable by everyone
on just about any device.
6:11
And with just the basics,
6:14
you can start using JavaScript in all
sorts of fascinating in meaningful ways.
6:16