- 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
Display Messages with JavaScript
5:18Now 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.
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