Hello World!

In this lesson you will learn how to use the developer tools built into your web browser, and use the console to write and run your first program!

There is a long standing tradition in programming language education, to make the first program be one that displays “Hello world!” on the computer screen. You have probably seen this before if you’ve looked at other programming guides. It comes from this book, in case you’re curious.

Before we write our program, I’ll show you how to access your browser’s developer tools. Nearly all modern browsers include these. I’ll show you how to find these in Chromium based browsers (like Chrome, Edge, and Brave), but the instructions are nearly the same for other browsers. If you can’t find it, a quick web search for “devtools in YOUR BROWSER” should help you along.

Look for the menu button, then more tools, then developer tools.

Once you have that open, click over to the console page.

Scroll down to the bottom. This is where you’ll write your program.

I’ll explain the parts of this in more detail as we go along, but for now I just want to experience the fun of running your program :)

A basic way to display a message is with console.log. Anything you put in the quotes aftewards will be written to the console. Type this into the console, then hit enter.

    console.log("Hello world!");

Congrats! A simple little program, but you did it! Since we’re using Javascript, theres another fun little option we can do here. console.log is often just used for debugging, since users don’t usually look at this when they’re browsing the web. The console is just for leaving yourself messages that you can check while developing.

When you want to show show something to the user, there’s “alert”. Try this one:

    alert("hello there!");

Nicely done! Now what happens if we write something that isn’t valid Javascript?

    > blah
    Uncaught Reference Error: blah is not defined.

While the computer is very powerful, when writing programs you have to be very precise in what you tell the computer. Catching and fixing errors is a normal part of programming. With practice you’ll get better and understanding what went wrong.

Next lesson: Expressions

Hope you enjoyed the first lesson! You’ve written two little programs, and learned how to use the devtools in your browser. Next we’ll start building up our programming knowledge from the basics.