Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Get started programming. Learn some common JavaScript commands and learn about the fundamental building block of a program: the statement.
Don't be afraid to regularly pause the videos this course as you follow along with Workspaces!
-
0:00
They say a journey of a thousand miles begins with a single step.
-
0:04
In this video, we'll take that first step by creating a simple JavaScript program.
-
0:09
I've organized this course so
-
0:10
you can follow along in Workspaces, Treehouse's web based text editor.
-
0:15
If you haven't used Workspaces before, here's a quick intro.
-
0:19
To get started with Workspaces, click the Launch Workspace button on this page.
-
0:24
When the Workspace window opens, you can type a new name or leave it as is.
-
0:28
Then, click Launch to open the workspace.
-
0:32
On the left side here are all of your files.
-
0:34
You can add new files to the workspace and open files that already exist.
-
0:38
When you click the Preview button here, a new browser window opens and
-
0:42
the index.html file in your workspace is displayed.
-
0:46
Keep this in mind,
-
0:48
the Preview button doesn't open the file you're currently working on in
-
0:51
the workspace, it always opens the index.html file in the top level folder.
-
0:57
If you haven't already, go ahead and launch the workspace on this page.
-
1:01
It has a few starter files.
-
1:04
Open the file's scripts.js by clicking its name in the file listing.
-
1:09
It's an empty file.
-
1:10
Let's start with a simple command.
-
1:14
Let's see what it does.
-
1:15
Save the file and click the Preview button in the workspace's window.
-
1:19
Well, it doesn't do too much.
-
1:21
It seems like something's missing.
-
1:24
Let's try adding a message.
-
1:28
Save the file, and preview it again.
-
1:31
Now, there's a message.
-
1:31
Cool!
-
1:33
Alert is a command that's built into the browser.
-
1:36
It opens a dialogue box and displays a message.
-
1:39
What we've typed here is called a JavaScript statement.
-
1:42
A statement is like a sentence.
-
1:45
And just as sentences end in a period, JavaScript statements end in a semicolon.
-
1:52
You write programs by typing multiple statements.
-
1:55
Just like you write a paragraph, by writing multiple sentences.
-
1:59
Let's go back to our program and add another statement or
-
2:01
line of programming code.
-
2:03
Here's a new command, document.write.
-
2:06
The word document represents the current web page, and
-
2:09
write is a command that writes a message to the page.
-
2:13
I'll talk more about this command and why there's a dot between document and
-
2:16
write later on in this course.
-
2:19
The important thing to understand now is that we can use JavaScript to
-
2:22
write directly into a web page.
-
2:25
Let's provide a message to this command.
-
2:29
Save the file and preview it.
-
2:33
Now we have two different ways to send messages.
-
2:36
A dialog box, and writing directly to the webpage.
-
2:40
Let's add one last line of code.
-
2:44
So now we have three lines of code.
-
2:46
And if we save the file and preview it, you can see an alert.
-
2:53
Then when you close the alert,
-
2:54
a text message appears, followed by another alert.
-
2:58
There are two things to understand from this.
-
3:00
First, a program is a set of statements that run one after the other.
-
3:06
Second, one statement needs to be complete before the next statement runs.
-
3:11
So the document.write command which prints to the page can't do
-
3:15
it's thing until the first alert command,
-
3:17
which includes the user closing that dialogue box, finishes.
-
3:22
All right, you've started your JavaScript programming adventure.
-
3:25
You've written your first program and
-
3:27
learned two new commands, alert and document.write.
-
3:30
In the next video, you'll learn where and how to add JavaScript to webpages
You need to sign up for Treehouse in order to download course files.
Sign up