Preview
Video Player
00:00
00:00
Your First JavaScript Program
2:56You've learned three different ways to output messages with JavaScript. Let's put these pieces together and write a small program using those methods.
All right, you've learned three different
ways to output messages with JavaScript,
0:00
a dialog box,
writing directly to the console, and
0:04
writing to the current web page.
0:08
Let's put these pieces together and write
a small program using these three methods.
0:09
If necessary,
clear the console to add new code.
0:13
First, type alert.
0:16
And in between quotation marks,
type the message Hello.
0:20
Thanks for visiting.
0:26
Now, I don't want to run this code yet, so
I'll press and hold down the shift key.
0:30
Then press enter to bring the cursor down
to the next line without running the code.
0:36
Next, type console.log and
0:40
provide it the message, Hello from
the console between quotation marks.
0:46
I'll again press Shift+Enter to bring
the cursor down to the next line.
0:55
And this time type document.write.
1:00
And here's something interesting, you can
even provide document.write markup or
1:04
HTML tags containing the element and
text to write to the page.
1:11
h1 tags for example.
1:15
In between the h1 tags I will write
the message welcome to my web page.
1:18
And that's it.
1:26
You can also copy these lines of code
from the teacher's notes with this video.
1:27
So now we have three lines of code,
1:31
which we can run by pressing the Enter or
Return key.
1:34
First, the alert dialog displays.
1:38
After clicking OK,
the message appears in the console and
1:41
the welcome heading appears on the page.
1:45
There are two things to
understand from this.
1:47
First, a program is a set of statements
that run one after the other.
1:50
Second, one statement needs to complete
before the next statement runs.
1:56
For example, the console.log
command which prints to the console
2:02
can't do its thing until
the first alert command finishes.
2:07
This also includes the user
closing the dialogue box.
2:12
Once that happens, the console.log
statement runs and finally document.write.
2:16
Keep in mind that you
won't often use alert or
2:24
even document.write in your projects.
2:27
I'm just using these commands now as
quick and simple ways to produce some
2:30
output as you learn the basics
of the JavaScript language.
2:34
You're also going to learn other common
methods for running JavaScript and
2:37
getting output when you're further
along in your learning journey.
2:41
All right, you've started your
JavaScript programming adventure,
2:43
written your first program,
and learned new commands.
2:47
In the next video, you'll learn where and
how to add JavaScript to web pages.
2:50