Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

JavaScript Basics

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Your First JavaScript Program

2:56 with Guil Hernandez

You've learned three different ways to output messages with JavaScript. Let's put these pieces together and write a small program using those methods.

Resources

Code Snippet

alert("Hello. Thanks for visiting!");
console.log("Hello from the console.");
document.write("<h1>Welcome to my web page.</h1>");

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up