Bummer! You have been redirected as the page you requested could not be found.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed JavaScript Basics!
You have completed JavaScript Basics!
Preview
Now you're going to take your first step into programming by learning three different ways to output messages with JavaScript: a dialog box, writing directly to the console and writing to the current web page.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Now, you're going to take your first
step into programming by creating
0:00
a simple JavaScript program.
0:03
A program is a set of instructions
that perform specific tasks
0:05
when executed by the computer.
0:09
In other words,
you're telling the computer what to do.
0:11
To get started and code along with me,
open your workspace and
0:13
preview the index.html file in the browser
by clicking the Preview Workspace icon.
0:16
As you learned earlier, one of the
benefits of programming with JavaScript,
0:22
and what makes JavaScript unique
to other programming languages,
0:26
is that it runs in the browser.
0:29
There's no need to set up any
kind of development environment,
0:31
which means you can start coding
with JavaScript right away.
0:34
As you learned earlier, there's
a development tool built right into
0:37
the browser called the JavaScript console,
which you can use to run JavaScript code.
0:40
Most browsers have a JavaScript console,
but to follow along with me,
0:44
I suggest that you use Chrome,
since that's what I'll use in this course.
0:48
You can open the console using the
keyboard shortcut Cmd+Option+J on a Mac,
0:52
or Ctrl+Shift+J on Windows.
0:57
Or another quick way is to right or
0:59
Ctrl+click anywhere in your browser
window, and to choose Inspect.
1:01
This will open up Chrome DevTools,
which is a useful set of web
1:06
developer tools to help you
build websites and applications.
1:09
You may have already used
the Elements tab, for
1:12
example, to inspect your HTML and CSS.
1:15
Click Console to get to
the JavaScript console.
1:18
The Console is often used to inspect
the inner workings of your websites and
1:21
applications.
1:25
You can see messages
logged from JavaScript or
1:27
any errors that might be occurring.
1:29
And as you experienced earlier,
1:31
you can run JavaScript in the console to
interact with the page you're inspecting.
1:34
In the console, you can also run
JavaScript that's not related to the page.
1:38
Sometimes, you just want to test some code
or try out a certain JavaScript feature.
1:42
The Console is a perfect place for
these kinds of experiments.
1:47
For example, in the Console,
1:50
you can use JavaScript to perform
basic math operations, like 10 + 5.
1:52
Press Enter and
the Console outputs the result of
1:57
the math operation below your code,
in this case 15.
1:59
If you type something in between
quotation marks like, Hello, world!,
2:03
it will echo it back to you.
2:08
By default, the Console clears
whenever you refresh the page.
2:09
You can also click the Clear console icon,
or right or
2:14
Ctrl+click anywhere in the console and
select Clear console.
2:18
Now, let's use a command called alert,
2:23
which I showed you at
the beginning of the course.
2:25
Type the word alert in a lowercase
into the Console, followed by ();.
2:28
Let's see what it does.
2:35
Press Enter, or Return,
to run this command in the console,
2:36
and a dialog box pops up in the browser.
2:40
It seems like something is
missing in the dialog box.
2:42
So let's try adding a message.
2:45
And here's a shortcut, to bring back the
previous command you ran in the console,
2:48
press the up arrow key
on your keyboard once.
2:52
This lets you edit the command and
run it again.
2:55
This time add a set of quotes
inside the parentheses, and
2:58
in between the quotes, type, Hello world!.
3:02
Press Enter, again, and
now there's a message.
3:07
Alert is a command that's
built into the browser.
3:11
It opens a dialog box and
displays a message.
3:15
What we've typed here is
called a JavaScript statement.
3:18
A statement is like a sentence,
and just as sentences end
3:23
in a period,
JavaScript statements end in a ;.
3:27
You write programs by
typing multiple statements,
3:31
just like you write a paragraph
by writing multiple sentences.
3:34
Let's add another statement,
3:39
console.log is another widely used command
that outputs a message to the console.
3:40
Like alert, you can take the message
between the parentheses,
3:46
within a set of quotes,
write Hello world!.
3:51
console.log is going to log or print
the message Hello world to the Console.
3:56
Pressing Enter displays the message.
4:01
This might not seem
immediately interesting, but
4:04
as we get farther along in the course and
you do more programming,
4:07
you'll start to see just how
handy console.log can be.
4:10
Here's another command, document.write().
4:15
The word document represents
the current web page, and
4:19
write is a command that writes
a message to the current web page.
4:24
You'll learn more about why there's
a dot between document and write and
4:29
between console and log, for
example, later in this course.
4:32
Now, let's provide a message to
document.write between quotation marks.
4:36
This time I'll type,
Welcome to my web page.
4:41
Press Enter, and notice how it writes
the message directly into the web page.
4:47
Everything on the page is
replaced by the message.
4:52
This is not permanent, though.
4:55
Refreshing the page
brings everything back.
4:56
document.write is not as widely used
as some of the other techniques
4:58
you'll learn to insert
content into a web page.
5:03
But you still might see it used in
real-world projects, and it's a quick and
5:06
simple way to let you produce some
output while learning JavaScript,
5:10
just like alert and even console.log.
5:14
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up