- JavaScript Everywhere 6:20
- What to Expect 2:55
- JavaScript Everywhere Review 5 questions
- Display Messages with JavaScript 5:18
- Your First JavaScript Program 2:56
- Add JavaScript to HTML 6:58
- Debug JavaScript in the Console 5:52
- Adding Scripts and JavaScript Commands Review 6 questions
- JavaScript Practice Challenge 2:39
- JavaScript Challenge Solution 1:45
- Code Challenges and Getting Help
- Write JavaScript Statements 4 objectives
Preview
Video Player
00:00
00:00
JavaScript Everywhere
6:20JavaScript is a powerful programming language that adds dynamic interactivity to millions of sites on the web. Before you start programming, learn about some of the places JavaScript runs and what JavaScript can do.
[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