Using JavaScript to teach programming remotely

By Laura James. Posted

When the pandemic sent students home, the challenge for Laura James was keeping them coding. JavaScript to the rescue!

When lockdown loomed and we found ourselves facing the prospect of remote learning, my Year 9 computing students (aged 13–14) were about halfway through a program of study learning Visual Basic (VB). Trying to get students to continue learning this language at home presented many difficulties: did the students have Windows computers? Could they download the Visual Studio software? Would students even want to program when, faced with home learning and no teacher guidance, the inevitable bugs appeared in their programs? All of these challenges made me consider whether there was a better language to use to teach programming concepts.

Switching to JavaScript

Before they began learning VB, my students were learning to build web pages using HTML and CSS, to get them used to the rigours of writing accurate text-based code. The students really engaged with HTML and CSS as they learnt techniques to build their own websites full of colour, images, and embedded content that they could really make their own. This success with web-based HTML, and the virtual teaching barriers to VB, gave me the idea that rather than pursue the dated language of VB, we could attempt to learn JavaScript.

JavaScript has many advantages. It is regularly listed as one of the most popular programming languages in the world, as it is used on almost every website. It also has huge advantages as a teaching language, as it can be run in any browser. And most students have access to a browser. If you right-click in a browser, choose Inspect or Inspect Element, find the Console in the developer tools, and type

<b>alert(“hello world”</b>
), then you’ve programmed your first bit of JavaScript!

Starting with jsbin.com

However, we needed to find a better integrated development environment (IDE) that students new to JavaScript could quickly get to grips with. Enter jsbin.com. 

Discovering this simple site was a revelation: it allows you to write mini web pages with attached CSS and JavaScript that can be saved with a unique URL, without needing to log in. During the lesson, I could give students the steps they needed to perform, either over a live video demonstration or as a prepared PowerPoint or prerecorded video, and students could follow along. If a student was really stuck, they could send me the link to their latest bin and I could help them spot the error.

After a couple of lessons, most students were confidently adding alerts and prompts to HTML buttons they had created on a fictional scam web page, pretending to ask for people’s credit card numbers, or showing a pop-up saying “You’ve been scammed.” We then moved on to manipulating the web pages themselves, changing background colours and images, and adding text.

Moving on with glitch.com

Eventually we outgrew using jsbin.com as a development environment, as it only allowed for coding of a single web page at a time, and we went back to using the site we had started out learning HTML and CSS with: glitch.com.

Glitch.com is another free site, and one that allows many more web coding opportunities than jsbin.com. Once signed up, you can create multiple projects, which act like mini websites: you can have multiple pages inside each site, and use shared resources such as CSS and JavaScript files.

Inside glitch.com, students created a range of projects, such as:

  • A simple login form to introduce ‘if’ statements

  • A Love Tester, using random numbers to predict how well two names would be matched 

  • A times table generator, using ‘for’ loops

  • A random task chooser to introduce the concept of arrays

  • A Rock, Paper, Scissors game, using Boolean operators such as AND and OR

You can see my resources for this scheme of work at javascript.geekcandy.co.uk

As with jsbin.com, students could send me a live link to their site on glitch.com if they were stuck, and I could help them spot their error.

Using glitch.com gave students the perfect IDE for building their JavaScript-powered games

The pros and cons of JavaScript

While JavaScript has been a good language for my classes during lockdown, it might not work for everyone.

The advantages of learning JavaScript are:

  • It’s a useful skill for the real world

  • It links back to HTML and CSS, which my students had already studied

  • The online IDEs make it accessible to almost all students

  • There are plenty of resources online, so students can look up how to do other things such as add timers, sounds, and graphics

  • In the CyberFirst Girls competition, a UK competition supporting girls interested in a career in cybersecurity, some of the challenges use JavaScript

The disadvantages of learning JavaScript are:

  • It presents a relatively steep syntax learning curve, and the semicolons and curly brackets can be off-putting; training students to read their code properly, though, is a useful skill for whatever language they learn

  • The errors are not always obvious; both the sites mentioned had some form of syntax error checking, but it wasn’t always foolproof, and students have to be prepared to hunt down the bugs themselves

Next steps

My students have really engaged with learning JavaScript. Many have spent extra time adding features to their JavaScript websites by researching other techniques. Even students who have found the coding part challenging have enjoyed making their websites look unique by adding different images in the HTML and different styles in the CSS.

Having learnt the basics of JavaScript, there are many options for my students going forward. JavaScript has several extra libraries that can be imported easily:

  • P5.js would allow artistic drawing and animating features 

  • Phaser.js is a gaming engine with sprites, physics, and game mechanics

  • Three.js is a 3D library with lots of examples to ignite students’ interest in 3D games and visualisation

Our school curriculum at this learning stage is very flexible, which I appreciate is not the case in all schools. Now we are back in the classroom, I could go back to teaching Visual Basic. However, this experiment has made me realise that online IDEs and a wealth of online resources make JavaScript a viable language to continue teaching in the physical classroom. 

Online Javascript editors

jsbin.com

This is a simple online editor that doesn’t require students to log in. They can quickly type their HTML, CSS, and JavaScript, and their web page appears on the right-hand side. It’s similar to jsfiddle.net, but I like the ability to hide panels when not needed.

glitch.com

Here’s another online editor, but one that requires you to register for an account (which is free). It allows multiple pages and asset hosting, and gives memorable unique site names.


https://twitter.com/lollypopstar

Print

Free - UK only

If you’re a UK-based teacher, volunteer, librarian or something in between, we'll send each issue free to your door.

Digital

Free

Just want to read the free PDF? Get each new issue delivered straight to your inbox. No fuss and no spam.

Buy

From £6

If you are UK-based but not involved in education, you can get hard copies by buying back issues.