Novice JavaScript

novice-javascript.md

Novice JavaScript

Context

This article discusses strategies for teaching 100% novice programmers--the very first program and next steps after it. Target audience is grade and high school.

Problem: the quiz app

For new programmers, particularly kids, Python is the default choice for good reason: it's perfect for simple interactive apps:

answer = input("What's your name? ")
print(answer, "is a beautiful name!")

Then move on to ifs:

answer = input("Which Pokemon is awakened by the flute? ").strip().lower()

if answer == "snorlax":
    print("correct, Snowlax is awakened by the flute!")
else:
    print("incorrect.", answer, "is not awakened by the flute")

But after the Q&A stage, Python becomes suboptimal for students who want to build GUI apps. Turtle graphics are a good next step for simple drawings, but is restrictive and confusing once students move on to games. Pygame is the next step after turtle, but (mostly) locks students into a local dev environment, when most everything else they do on the computer is on the web.

HTML/JS/CSS is the logical solution to getting students quickly coding without having to install anything, and working in a friendly, GUI-first browser environment. But interactive Q&A apps are tough to do out of the box:

• Node readline is horrible for beginners
• Browser prompt/alert/document.write is a poor user experience and very restrictive
• Browser HTML forms, inputs, onclick/onsubmit are more complex than input()/print() and not readily accessible for novices.

A number of possible approaches follow.

Solution: start with Python, then go into HTML/JS

One solution is to skip JS initially and start with Python. Then transition into HTML/JS instead of Python turtle, or once the student starts hitting Python turtle limitations.

The downside is friction when switching languages/environments.

Solution: readline-sync

readline-sync from npm provides a friendly synchronous UX, with some cool options.

Downsides:

• involves an npm install and import, harder to use on web IDEs than Python out of the box
• still slightly worse syntax than input()/print()
• Node probably doesn't have great next steps for students (turtle, pygame) anyway, so you're installing Node only to switch to the browser.

Solution: HTML with a lightweight JS wrapper

<form onsubmit="answer()">
  Enter your name: <input>
  <input type="submit">
</form>
<script>
function answer() {
  console.log(this);
}
</script>

Solution: Multi-page HTML quiz or choose your own adventure

Downside: requires multiple files, no "programming" per se although a nice way to intro HTML.

Solution: click-based apps

Random integers and random array selection are also easier in Python.

button clicker

<style>
button {
  transition: all 1s ease-in-out;
  position: absolute;
}
</style>

score: <span id="out">0</span>
<button tabindex="-1">click me</button>
<script>
button = document.querySelector("button");
score = 0;

button.onclick = () => {
  score++;
  out.setHTML(score);
};

setInterval(() => {
  button.style.top = Math.random() * innerHeight;
  button.style.left = Math.random() * innerWidth;
}, 500);
</script>

Downside: tricky concepts like callbacks, harder for students to understand than simple if/input/print.

Solution: p5.js

Solution: images

Solution: pure HTML collapseable sections

<details>
<summary>What did the buddhist say to the hot dog vendor?</summary>
Make me one with everything
</details>
<details>
<summary>What is the capital of France?</summary>Paris
</details>

This makes a quiz app in a single page, but the interactivity isn't satisfying (user just thinks of their answer) and there's no score. Too boring and static, but perhaps nested dropdowns could be interesting.

Solution: alpine.js

<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<div x-data="{
  step: 1,
  name: '',
  color: '',
  food: ''
}">
  <div x-show="step === 1">
    <p>What is your name?</p>
    <input x-model="name" @keydown.enter="step = 2">
    <button @click="step = 2">Next</button>
  </div>

  <div x-show="step === 2">
    <p>Favorite color?</p>
    <input x-model="color" @keydown.enter="step = 3">
    <button @click="step = 3">Next</button>
  </div>

  <div x-show="step === 3">
    <p>Favorite food?</p>
    <input x-model="food" @keydown.enter="step = 4">
    <button @click="step = 4">Finish</button>
  </div>

  <div x-show="step === 4">
    <p x-text="`${name} likes ${color} and ${food}`"></p>
  </div>
</div>

Downside: using a rather esoteric library, probably not extensible. Learning curve for instructor.

Solution: Lua

Lua and love2d are great, but no real advantages over Python.