What if you go go from 0 to imperative programming in 60 minutes? What would that 60 minutes look like?

screenshot of code

Some HTML with a little JS plopped in.

tl;dr… We’d start with HTML, add a tag or two, and plop some script tags right in the middle.

Declarative VS Imperative Programming

Declarative programming is often considered to be more elegant than imperative. It has a beauty to it that doesn’t depend on the implementation. Code that says “Here I am, render me!” Imperative code is more detail oriented, more work-a-day. Fiddling with off-by-one errors, setting up variables, writing functions and, well, procedures. …but imperative programming is what we most often think of when we think of what a programmer does. And when it comes down to the rough edges where we need to reach for a solution that hasn’t been mapped out with a framework, imperative is what we reach for. So, it’s something we need to introduce to students, and quick!

HTML is declarative

We start with HTML. It is simple, elegant, and just works. As long as you close all the tags, it will be rendered by your browser of choice. Students pick on on HTML quickly, and its declarative nature is part of what facilitates quick learning. So, why change that? (Spoiler: we want to become programmers, and quick!)

JavaScript tags can make HTML procedural

We can turn any HTML page into a program. Watch:

<!-- index.html -->
<h1> Guess a number </h1>

<script>
  let number = prompt("Enter your guess");
</script>

<p>
  Your answer is 
  <span>
    <script>
      if(number === "7") {
        document.write("correct");
      } else {
        document.write("incorrect");
      }
    </script>
  <span>
</p>

The simplicity and hack-y nature is why it was called Java-“script”. But it’s also what helped make the early days of the web so much fun.

The web was born for this

The web was invented as a way for anyone to be able to build a website with simple tools. Its drifted away from that, but the creators of Netscape and JavaScript were steeped in ideas like HyperCard and SmallTalk. Tools that tightly coupled code with presentation. Smalltalk was even used to teach elementary school children how to code! In that sense, the above code is beautiful. And it makes perfect sense even if it isn’t the way it’s “supposed” to be done.

It takes the perfectly fine declarative syntax of HTML and twists it into a steaming mess of imperative code mixed with HTML. Yes…but it also shows how a computer interpreter starts at the top, moves to the bottom, and processes things from start to finish.

And, we can put code exactly where its output is needed. We can even introduce ideas like variables and control structures. And it’s all thanks to the friendly declarative syntax of HTML.

If you think about it, it’s not so different from what React, PHP, or other template systems are trying to get back to (without the clunky tooling). Say…

// DisplayResults.js (React)
function(props) {
  return (
    <p> Your answer is...
    { props.answer === "7" ? "correct" : "incorrect" }
    </p>
  )
}

And…it works. Mostly likely it was designed to work this way.

So, if you want to show someone how to code in 60 minutes, why not start off with document.write() and embedded script tags? It’s fun, and it may be the fasted way to get from zero to elegant code, even if we need to take a detour on the way there.