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.
In Python, a common learning language, Hello World is achieved simply with:
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 solution we would probably write it like this:
When the student opens this html file in their web browser the text appears in the web console.
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.
The alert would be very similar, but with a few less characters:
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.
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
Here’s the snippet:
message.textContent = 'Hello, World!';
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.
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:
- You don’t need to look in a strange place.
- It looks like a real website.
- 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
If you liked this article we’d love to see those claps, and if want to see more by us, please follow along.