Introduction
This is a lesson that I've used in many different situations, and I thought that someone here might find it useful. Generally speaking, it's an introduction to programming using a general purpose programming language, in this case, JavaScript.
There are a multitude of scenarios in which you might find a lesson such as this come in handy. I primarily use it as a fun activity on a transition day, where Year 6's come and experience Year 7. In that case, students generally have 50 minutes to work through the activities. As a rule, it is very rare that someone completes it, but in a more traditional class setting, you are likely to find that students who 'get' coding quickly might complete it in that timeframe.
The teacher in me struggles when I use it on a transition day, because I don't get a great opportunity to explain the concepts in as much detail as I usually would. However, I have also set it as a relief lesson for middle years Digital Technologies classes, and it seems to have gone over quite well.
I use an online coding platform called Code Sandbox. It's great for collaborative work, and means that I don't need to ensure that whatever computer suite I'm in for the transition day has a text editor installed on the machines. Code Sandbox is based on VS Code, so should look quite familiar.
Anyway, that's enough preamble! The lesson is below. I hope you find some creative ways to use it.
The Lesson Itself:
Getting Started
Log in to your computer using your current credentials (your username and password).
Locate your web browser and open it.
In the address bar, type the following:
Click on the ‘Start coding for free’ button in the middle of the page. You don’t need to sign up for an account, although, if you wanted to use this website in the future, you could easily do so.
You should be prompted to create a sandbox and will be presented with a number of options. We want to select the Static option, as seen highlighted in Image 2 below:
Selecting that option will create a sandbox that will look something like the image below. On the left, you will see the file structure. This is where projects are built and grow, kind of like the file structure on a computer. In the middle is the coding area, where you will enter all of the code, and on the right is a makeshift browser window, so you can see the changes you make. At the bottom of that window is a console which is used for debugging JavaScript programs. You will need to open this up by pressing the highlighted word Console as seen in Image 4. Once you have done that, your browser area will look like Image 5 below.
Navigate to the coding area and select all of the text that is there. Once it’s all highlighted, delete it. Then, save so that you can see how your webpage looks. You can use a keyboard shortcut to save. First, make sure your cursor is in the coding area, then press Command and S at the same time (press and hold the Command key and then press S, and let them both go). You should see everything in the browser area disappear. Now you’re ready to start coding some simple JavaScript!
Your Age In 2025
You’re going to begin by writing the HTML needed for the site. This is required because a website won’t function without it. In the coding area, put your cursor on line 1 by left clicking the mouse on that line.
Copy the code in Image 6 below, exactly as you see it. It is very important that you copy it exactly (use capitals where there are capitals, and lowercase where there is lowercase.), otherwise your application won’t work.
Once you’ve finished typing the HTML, save your work and you should see something similar to what's in Image 7 appear in the browser area:
Now you’re ready to start writing your JavaScript. You’ll notice two script tags in the HTML you just wrote. Inside of them is some text that is grey in colour. This is a comment. You will write everything else in-between these script tags. The <script> tags look like this:
Place your cursor at the end of the comment line and press Return (Enter) once. This will put your cursor onto a new line. Next, type the following JavaScript exactly as it is seen in Image 10. (It's important that nothing is changed here - type everything as you see it.) Try and make it a habit to save your work at the end of every line. If you’re unsure whether you’ve saved your work, look at the tab above the coding area (see first image below) that contains the file name (index.html) if there is a small circle to the right of the name, then you need to save (Control/Command + S).
Once you’ve written all of this and saved, you should be able to test your application. Type your birth year into the text box in the browser area and press the Submit button. JavaScript will process your birth year and subtract it from 2025, and then give you the response in the console area. Try testing a few different birth years to make sure the program is functioning correctly. If you got this working, well done! This is likely the first JavaScript program you’ve written. Let’s move on to creating some ASCII art.
ASCII Art
Before you start creating some ASCII art, you will need to get an understanding of how to create line breaks in JavaScript. Unlike in a program like Word, you need to be specific with everything you do in JavaScript. That include telling the program when to include a line break (press enter).
Let’s test this out quickly.
Place your cursor at the end of the last line of JavaScript you wrote. (It should end like this: }); ).
Press Enter twice, and type the following two lines from Image 11 (feel free to change the name to yours if you like).
Save and have a look at the console. Whatever you typed in quotation marks, should appear in the console. The first on one line, and the second command on another. This is happening because you used the console.log command for each new line. Now, this poses a problem. You don’t want to have to type console.log every time you need to force a line break - you just want to press enter. Luckily, JavaScript provides a way for this to happen. We can include our text within something called a back-tick. Providing you do this, it will be interpreted a bit more literally, meaning you can now type like you’re using a word processor. A back-tick looks like this `` as opposed to quotation marks which look like this: ‘’. The difference is subtle, but important. You can find the back-tick next to the 1 on the keyboard.
Comment out the two lines of code you just wrote and save your work. Comments can be made by placing two forward slashes at the beginning of the line you wish to comment. A comment is something that can be read by the programmer, but doesn’t display to the user. In your text editor, a comment will look like what you see in Image 12.
Let’s now try creating the previous lines of code using only 1 console.log command by replacing the quotation marks with back-ticks. Write the following:
Save your work and you should see the same lines in the console, but now they are on two separate lines, and you’ve only used one console.log command. This will make the ASCII art much easier to write.
Clear the console by pressing the little clear button that is indicated below in Image 14:
Now, write your first ASCII art using JavaScript:
Save and see your creation in the console.
Excellent! Now let’s try something a little more challenging. Clear your console and save.
Now, use Image 16 below to copy the text exactly.
Save and check your work in the console. If needed, make some adjustments to your code, save and recheck. Continue changing and saving until you’ve got it perfect.
Well done! You’ve explored some simple applications of JavaScript and are now well on your way to understanding some concepts of a general purpose programming language.
Challenge
Now that you know how to create ASCII art using JavaScript, try finding something more complex than the two images you’ve drawn so far and see if you can create that with the time remaining.
Be sure to show your teacher when you’ve finished!
Conclusion
Well, that's it! I hoped it was useful and that you were able to follow along easily enough. If it is something you'd like to use, but you found one of the steps a little difficult to follow, or would like further clarification, please feel free to ask for assistance.
If it all makes prefect sense and you use it, please also, feel free to leave any feedback, good or bad, so that I can tweak it and hopefully make it better.
Bibliography
Images 1-5, 7-9, 14: Screenshots from Code Sandbox
Images 6, 10-13, 15, 16: Generated using Carbon