JavaScript’s Hello World

JavaScript on the Web has a lot of what we want in an educational coding environment. You can easily build interactive user interfaces and games, the applications are portable and work on every device, and it uses a popular real world programming language.

The big downside of JavaScript on the Web is how complicated it is. The evolution of the web has created a mix of technologies that makes sense in context, and in retrospect, but is hard to explain to a beginner.

A really interesting place that illustrates this is “Hello, World!”. If you’re not familiar with it, one of the first programs that many textbooks, courses and tutorials teach is a simple program that outputs the phrase “Hello, World!” to the screen.

Hello World in TI Basic

I’ve been putting together a JavaScript course (coming soon!) and as a result I’ve been thinking a lot about how to make JavaScript learnable.

In Python, a common learning language, Hello World is achieved simply with:

print('Hello, World!')

This works well because Python runs in a terminal environment, where simple input and output is text-based. On the web everything runs within the web browser and simple input and output is more complex. Just getting a script to run requires some HTML scaffolding, which can be confusing for students.

In writing Hello World there seem to be two popular choices. One uses an alert to display the text, the other uses console.log. I'm not particularly happy with either of them, let’s look at why.

console.log

For the console.log solution we would probably write it like this:

<script>
console.log('Hello, World!');
</script>

When the student opens this html file in their web browser the text appears in the web console.

How the Web Inspector appears in Safari.

The web console is quite difficult to access for beginners, it’s usually opened by right-clicking the page and selecting “Inspect element”. From there students have to navigate to the console (depending on their browser). There are a number of other ways to open the console, but all are quite obtuse for beginners.

This can be alleviated in an online learning environment by providing a web console preview, but if you wanted to open your page outside the learning environment you would have the same issues.

alert

The alert would be very similar, but with a few less characters:

<script>
alert('Hello, World!');
</script>

This has the benefit of not requiring students to open a web console. However to me it feels a bit dishonest. This isn’t a website — it’s an alert. It doesn’t feel like it’s true to the nature of what the web is, websites don’t communicate by popping up an alert.

How an alert would appear in Safari.

It’s also hard to say whether students will get excited about it — some students might think its cool that they can make an alert pop up. Others might click to dismiss it before they even register it’s there.

Ultimately, the best thing going for it is simplicity, which I quite like, but the dishonesty is a downside.

A third option

I’ve been working with a third option, to me it is a lot more honest, though it is more complicated. It uses the DOM (Document Object Model), which is a key piece of technology for students learning JavaScript on the web. It also takes advantage of some rather old features of JavaScript that make accessing the DOM a lot easier.

Here’s the snippet:

<h1 id="message"></h1>
<script>
message.textContent = 'Hello, World!';
</script>

This solution leverages the fact that all elements with an ID are available as named variables on the window object. If this doesn’t quite make sense to you — it just means instead of writing:

let element = document.getElementById('message');
element.textContent = 'Hello, World!';

You can write the short snippet above. This saves a lot of time, and makes a lot more sense — but it isn’t current best practices and has some awkward side effects (like not being able to use certain id values e.g. "name").

There are some complexities to this solution. Students need to use more JavaScript syntax than the alert version. It also requires them to write a little bit of HTML. Finally, it's assuming the student understands the idea of "setting the text of an element".

The upside is threefold:

1. You don’t need to look in a strange place.
2. It looks like a real website.
3. Students are working with the DOM straight away!

With enough scaffolding during the learning process I think the hurdles can be handled and the upsides are seriously great.

I’m especially excited about accessing elements by id. Simplifying access to the DOM significantly reduces the barriers to interesting interactive JavaScript web apps.

If you liked this article we’d love to see those claps, and if want to see more by us, please follow along.

What do you think of this solution? How have you taught Hello World with JavaScript? Tell us in the comments below.