Learn about some of the major changes in the new Intro to JavaScript (Corgi) course!
We are excited to announce the arrival of the revised version of our popular Introduction to JavaScript (Golden) course! Meet the new and improved, Introduction to JavaScript (Corgi).
This updated Corgi course has a fresh new look and improved content scaffolding. It not only reflects the relatively recent changes in the JavaScript language, but also many of the ideas and suggestions that our CodeHS teachers have shared with us over the years.
In this tutorial, we will touch upon a few of the major changes that took place in this revision.
Our Golden lessons instruct students to use println(), a function that we included in our JavaScript teaching library, to print to the CodeHS console. This was done to make the task of printing easier for beginner programming students as they moved through our course. In Corgi, we have decided to replace println() in our lessons with JavaScript’s console.log(). Both do the same thing, and both will work in CodeHS, but we want to be more consistent with how printing is done in the development world.
ECMAScript is the standard that defines how the JavaScript programming language works. In 2015, they released the ECMAScript 6 (ES6), the second major revision of the language. In it, they introduced two new variable types — let and const. While all of the ES6 updates work on CodeHS, we felt it was important to update our JavaScript activities to use these two new variables.
Prior to ES6, the var keyword was used to declare variables. While var will still be available to use, let and const give us a slightly more useful approach to declaring variables, they are easier to understand, and they are more consistent with other languages.
The use of the let keyword is very similar to the use of var, with one exception: variables created with let are block-scoped, meaning if they are created within curly brackets { } (that is, a “block”), they are not accessible outside of that block.
Using the let keyword gives us more control over the scope of the variable. This helps us avoid the case of accidentally using/reassigning variable values when we didn’t mean to (similar reasoning for trying not to use global variables throughout a program).
This first example demonstrates what we mean by block-scoped. Run the code, then uncomment line 12 and run it again. What happens and why?
The example below shows the same program with both var and let variables. They highlight how the block-scoped let will act slightly differently than var. Notice how line 35 is producing a “variable is not defined” error!
The const keyword creates and initiates a constant variable that cannot be assigned a new value later in the program. In our Golden course, we used an ALL_CAPS variable name to signify a constant variable, but because we still used var in its creation, it technically could be assigned a new value.
Check out the example below that declares RADIUS as a constant variable. Uncomment line 7 and see what happens!
In our Golden course, we introduce the start() function in our Karel lessons, and use it throughout JavaScript activities, in order to encourage students to organize their code in functions. What was special about this function in CodeHS was that students didn’t need to explicitly call it to run it — it ran automatically when the program was run. This function does not exist outside of CodeHS, and in fact there is nothing like it in JavaScript, so we feel it is no longer necessary to include in our lessons.
In order to still encourage students to organize their code in discrete functions, we instruct them to create a main() function instead. This function serves the same purpose as the start() function, but students will need to call it at the end of their programs in order to run the code that is inside of it.
Below is a simple example to demonstrate the program structure that we use and encourage throughout Corgi. Notice that if you comment out line 10, nothing will be printed to the console.
We encouraged the use of a Color object, like Color.red in our Golden graphics lessons, but now feel that just using a color string, like "red", is simpler for students to use. Students can also use a HEX color code, like "#fc4103", as well if they want more customization.
The example below shows the creation of two circles using color strings:
One of the most challenging aspects of completing a graphics activity is being able to correctly position the graphics objects. To help support students, we have included a new Debug Mode as a property for all graphics objects.
By default, this property is false, but if you set it to true, it will draw a red rectangle around the perimeter of the graphic and a red circle on the object’s position anchor point. This will help students visualize both the bounds of the object and where the setPosition() method is placing the object.
In the example below, a rectangle, circle, and text object are added to the canvas. Their debug modes are turned on, revealing how each are anchored slightly differently.
By the end of the Corgi course, students have a great understanding of the use of functions, parameters, and return statements. We’ve slightly altered our structure of our solutions in the last content module, Animations and Games, in order to encourage the use of these skills.
We now use “init” functions to initialize our graphics objects, and return the graphic to be stored in a global variable. This reduces and organizes the code in the main() function, better reinforces best practices, and allows us to create more than one graphic of the same type. It will be slightly different than what was done in previous modules, but once students get the hang of it, their programs will be cleaner and easier to follow!
The example below demonstrates this technique by creating two boxes that move and bounce around the screen. Lines 12 and 13 use the initBox() function with specific arguments, to create two unique boxes. Line 23 returns the graphic object to be stored in a variable, after it has been created and added to the canvas.
