This page contains a sequence of activities to assist advanced grade 5/6 students to learn basic Javascript syntax, along with some useful tools and coding concepts.
Overview
The list below is more a collection of ideas and not a useful sequence yet. So far I have explored quite a few main streams of Javascript learning, not mutually exclusive, but certainly different. I have ordered these from easiest to hardest (combining the difficulty of activities with a factor for how easy they are to use, e.g. do you need to build a development environment or does everything just run in your browser?)
code.org's CodeStudio series of activities, e.g. Course 3 has 21 stages, some containing up to 15 activities
p5.js, a Javascript library, some online IDEs are available, that lets you draw and animate, building from the Processing language
phaser.io - a desktop and mobile HTML5 game framework
CoderDojo.com, a club where you set up a dojo and (optionally) use their resources to encourage kids to code. I've tried out at least one resource so see notes on coderdojo.
Note that strictly speaking CodeStudio up to Course 3 seems to be entirely based on Blockly, not really coding Javascript at all.
Drawing with Javascript
One of the very common activities used by sites such as code.org and the Khan Academy is drawing shapes using Javascript. What they don't always make clear is that underneath the basic Javascript is a library like Processing.js (there are some other super cool ones around but Processing.js is very popular). Just building drawing apps with Javascript is not quite as simple as they make it look.
So I've collected some notes here on examples of Javascript drawing environments and examples.
Sequence of activities
Introduction to jsfiddle.net
jsfiddle is a great site for combining Javascript with HTML and CSS to produce a web page. This activity is to introduce the site and show how it works. Students can learn how a simple "hello, world" example that shows how to use jsfiddle following the instructions at: http://doc.jsfiddle.net/tutorial.html or (even simpler) https://jsfiddle.net/afabbro/vrVAP/
Using developer mode in the browser
(This activity is probably blocked in ACT schools on managed devices). For anyone playing around with javascript, the developer mode and console in the browser is invaluable.
Note on code.org activities
One of the nice things about code.org activities is that you don't need to sign up to do the activities...but, if you want to save your progress, you may need an account. I assume they use cookies to track your session, even without signing up, so if you have an actual profile of your own, that may be enough. Otherwise, if you keep going back to Code Studio, for instance, it won't know where you're up to. However, if you are using Code Studio, the way the dashboard is laid out neatly with headings and lessons, that might still be quite usable.
As with all code.org activities this is well packaged with tutorial videos and instructions. It is listed as taking one hour.
The direct link is https://www.codeavengers.com/javascript/103#1.1
The activity starts with a plain green flag (Libya) then on to Monaco with half/half red/white and so on.
Each flag is preceded by a video with hints and information.
After Monaco comes something then Czech Republic with a triangle at one side.
Bangladesh (task 5) has a circle in the centre. There are lots of geometric concepts (triangles, rectangles, circles) involved in this activity and Cartesian coordinates are fundamental to this task.
Task 6 - Laos, two rectangles and a circle.
Task 7 - Somalia - star
Task 8 - Chile - several rectangles and a star
Task 9 - Scotland, path object like with a triangle but drawing white cross lines against a blue background
Task 10 - final challenge - Macedonia - multiple rays with central circle - don't forget to create two new rays, and rename all the ray entries for the new ones, including the fill colour assignment.
Tip: The slider on the "Solution Canvas - My Canvas" box lets you check the solution and how close you are...dohhh!
I would have to say that this activity was a bit fun but more interesting than entertaining. Some students may find this quite challenging and so it is probably good that there are only ten flags.
The final thing to note about this activity is that CodeAvengers hosts the activity and they normally charge, so once you have finished you will want to close their site.
Possible extension activities
I'd like to offer some activities for fast finishers here. I don't think the activity provides for experimentation, once it's finished you don't have a blank Javascript console to play with. Perhaps jsfiddle.net could be useful here? Obvious activities would be to draw other flags, or to invent your own flag.
To draw these flags, what library is being used? I think they might mention it once during the tutorial...
Code.org: Vidcode: Code the news
I could NOT get this activity to work correctly. It looks like a quite short but fun activity, using Javascript to add captions and overlays to a movie that they provide (or you can upload your own).
However, although the overlays worked OK, the movie itself never appeared in my player. That meant the activity didn't make a lot of sense, the idea was to be adding additional information to a news broadcast.
This may work better on a different type of computer (non-Mac?)
I don't know that you would spend a lot more than 15-30 minutes on this activity, although I think I jumped out early due to it not working properly.
A reasonable example of an end product is at https://app.vidcode.io/share/OJLncs0pin
If the video works for you, this activity would be a lot more fun if you had your own video to upload, but be aware that there is a sharing option at the end that shares publicly.
Code.org: Vidcode: Bestie Greeting Card (or just a fun movie with annotations)
"It's time to make a greeting card with JavaScript! All you need is a computer with a modern web browser and your creativity! Webcams are recommended but not required."
The video seems to work in this tutorial, which is odd because it didn't work in the "Code the news" activity.
This activity is quite fun because you get to play with video filters including tints and blurs. You can also add graphics etc (similar to the Code the news activity).
OK, just finished this activity, whizzing through still took 20 minutes. It is definitely good fun with lots of hints and some nice results. Be aware that the instructions are all text so you need to read pretty well to accomplish this task.
Not sure where the "bestie greeting card" bit went, I just ended up with a fun movie.
Khan Academy - Drawing with code
The most obvious problem with this activity is that it has movies (typical Khan Academy style) to explain things, and although they have subtitles you may need headphones to use this activity successfully. This means you probably need one computer per student, with headphones for everyone.
This tutorial seems to use ProcessingJS, I think a simple example of this on jsfiddle is the one at https://jsfiddle.net/zalun/6HG8f/
But these tutorials all have a simple panel where you just enter the drawing commands on one side and the results on the right, is there a hosted equivalent of that somewhere?
Hmm, starting from processingjs.org, I found some IDEs:
http://sketchpad.cc/ - when you click on "new sketch" it gives you a complex example
https://www.openprocessing.org/ - unfortunately you need to sign up with an email account but this is pretty cute - create JS then click over to replace the code with a canvas where your code executes.
However I just realised you can pull in libraries on jsfiddle.net, including Processing, so I think once I figure out how to set that up it still might be the easiest approach.
If any students want to continue building and extending their Javascript knowledge, there are lots of resources, e.g.
Khan Academy "Intro to JS - Drawing and Animation" - 105 mini-lessons in this area alone, with videos, tips, etc. This section uses the ProcessingJS module to provide drawing on an HTML canvas.
groklearning.com - this will cost $30/year but is apparently a great tool, I think it uses block based coding though so it's possible it might be too simple for students who are very comfortable with text based programming.
A Javascript library based on the idea of Processing that makes drawing and animation easy on the web.
This library is quite easy to use, but is primarily delivered as a library to download to your computer. While this makes a lot of sense, since Javascript is a client side language, I prefer an online IDE so students can simply concentrate on typing in the key parts and seeing them occur right away. I think learning a code editor is another step.
There are some online IDEs for p5.js:
Overview
The list below is more a collection of ideas and not a useful sequence yet. So far I have explored quite a few main streams of Javascript learning, not mutually exclusive, but certainly different. I have ordered these from easiest to hardest (combining the difficulty of activities with a factor for how easy they are to use, e.g. do you need to build a development environment or does everything just run in your browser?)- code.org's CodeStudio series of activities, e.g. Course 3 has 21 stages, some containing up to 15 activities
- Using code.org Hour of Code javascript activities
- The Khan academy sequence of over 100 mini-lessons titled "Intro to JS: Drawing and Animation"
- woof.js, a Javascript library, complete with online IDE, that builds directly from Scratch using similar categories of "blocks" of code
- w3schools javascript tutorial - very straightforward learning sequence with built in IDE to explore the concepts
- p5.js, a Javascript library, some online IDEs are available, that lets you draw and animate, building from the Processing language
- phaser.io - a desktop and mobile HTML5 game framework
- CoderDojo.com, a club where you set up a dojo and (optionally) use their resources to encourage kids to code. I've tried out at least one resource so see notes on coderdojo.
Note that strictly speaking CodeStudio up to Course 3 seems to be entirely based on Blockly, not really coding Javascript at all.Drawing with Javascript
One of the very common activities used by sites such as code.org and the Khan Academy is drawing shapes using Javascript. What they don't always make clear is that underneath the basic Javascript is a library like Processing.js (there are some other super cool ones around but Processing.js is very popular). Just building drawing apps with Javascript is not quite as simple as they make it look.So I've collected some notes here on examples of Javascript drawing environments and examples.
Sequence of activities
Introduction to jsfiddle.net
jsfiddle is a great site for combining Javascript with HTML and CSS to produce a web page. This activity is to introduce the site and show how it works. Students can learn how a simple "hello, world" example that shows how to use jsfiddle following the instructions at:http://doc.jsfiddle.net/tutorial.html or (even simpler) https://jsfiddle.net/afabbro/vrVAP/
Using developer mode in the browser
(This activity is probably blocked in ACT schools on managed devices). For anyone playing around with javascript, the developer mode and console in the browser is invaluable.Note on code.org activities
One of the nice things about code.org activities is that you don't need to sign up to do the activities...but, if you want to save your progress, you may need an account. I assume they use cookies to track your session, even without signing up, so if you have an actual profile of your own, that may be enough. Otherwise, if you keep going back to Code Studio, for instance, it won't know where you're up to. However, if you are using Code Studio, the way the dashboard is laid out neatly with headings and lessons, that might still be quite usable.I also found the following page with lesson plans and topic information for Unit 3:
https://code.org/educate/csp/unit3/learningresources
Code.org: Drawing flags with Javascript
As with all code.org activities this is well packaged with tutorial videos and instructions. It is listed as taking one hour.The direct link is https://www.codeavengers.com/javascript/103#1.1
The activity starts with a plain green flag (Libya) then on to Monaco with half/half red/white and so on.
Each flag is preceded by a video with hints and information.
After Monaco comes something then Czech Republic with a triangle at one side.
Bangladesh (task 5) has a circle in the centre. There are lots of geometric concepts (triangles, rectangles, circles) involved in this activity and Cartesian coordinates are fundamental to this task.
Task 6 - Laos, two rectangles and a circle.
Task 7 - Somalia - star
Task 8 - Chile - several rectangles and a star
Task 9 - Scotland, path object like with a triangle but drawing white cross lines against a blue background
Task 10 - final challenge - Macedonia - multiple rays with central circle - don't forget to create two new rays, and rename all the ray entries for the new ones, including the fill colour assignment.
Tip: The slider on the "Solution Canvas - My Canvas" box lets you check the solution and how close you are...dohhh!
I would have to say that this activity was a bit fun but more interesting than entertaining. Some students may find this quite challenging and so it is probably good that there are only ten flags.
The final thing to note about this activity is that CodeAvengers hosts the activity and they normally charge, so once you have finished you will want to close their site.
Possible extension activities
I'd like to offer some activities for fast finishers here. I don't think the activity provides for experimentation, once it's finished you don't have a blank Javascript console to play with. Perhaps jsfiddle.net could be useful here? Obvious activities would be to draw other flags, or to invent your own flag.To draw these flags, what library is being used? I think they might mention it once during the tutorial...
Code.org: Vidcode: Code the news
I could NOT get this activity to work correctly. It looks like a quite short but fun activity, using Javascript to add captions and overlays to a movie that they provide (or you can upload your own).However, although the overlays worked OK, the movie itself never appeared in my player. That meant the activity didn't make a lot of sense, the idea was to be adding additional information to a news broadcast.
This may work better on a different type of computer (non-Mac?)
I don't know that you would spend a lot more than 15-30 minutes on this activity, although I think I jumped out early due to it not working properly.
A reasonable example of an end product is at https://app.vidcode.io/share/OJLncs0pin
If the video works for you, this activity would be a lot more fun if you had your own video to upload, but be aware that there is a sharing option at the end that shares publicly.
Code.org: Vidcode: Bestie Greeting Card (or just a fun movie with annotations)
"It's time to make a greeting card with JavaScript! All you need is a computer with a modern web browser and your creativity! Webcams are recommended but not required."The video seems to work in this tutorial, which is odd because it didn't work in the "Code the news" activity.
This activity is quite fun because you get to play with video filters including tints and blurs. You can also add graphics etc (similar to the Code the news activity).
OK, just finished this activity, whizzing through still took 20 minutes. It is definitely good fun with lots of hints and some nice results. Be aware that the instructions are all text so you need to read pretty well to accomplish this task.
My simple example result is at https://app.vidcode.io/share/qu7s0q0nMQ
Not sure where the "bestie greeting card" bit went, I just ended up with a fun movie.
Khan Academy - Drawing with code
The most obvious problem with this activity is that it has movies (typical Khan Academy style) to explain things, and although they have subtitles you may need headphones to use this activity successfully. This means you probably need one computer per student, with headphones for everyone.This tutorial seems to use ProcessingJS, I think a simple example of this on jsfiddle is the one at
https://jsfiddle.net/zalun/6HG8f/
But these tutorials all have a simple panel where you just enter the drawing commands on one side and the results on the right, is there a hosted equivalent of that somewhere?
Hmm, starting from processingjs.org, I found some IDEs:
- http://sketchpad.cc/ - when you click on "new sketch" it gives you a complex example
- http://processingjs.org/tools/processing-helper.html - but has a tiny canvas
- https://www.openprocessing.org/ - unfortunately you need to sign up with an email account but this is pretty cute - create JS then click over to replace the code with a canvas where your code executes.
However I just realised you can pull in libraries on jsfiddle.net, including Processing, so I think once I figure out how to set that up it still might be the easiest approach.The instruction in the video is pretty good, but quite slow - the first tutorial of drawing a face with a few ellipses runs for just over six minutes.
The documentation for the Processing calls is at https://www.khanacademy.org/computing/computer-programming/pjs-documentation
Want to read more about Processing? This Quick Start document may be useful.
Direct link is
https://www.khanacademy.org/computing/hour-of-code/hour-of-drawing-code/v/welcome-hour-of-code
Going Further...
If any students want to continue building and extending their Javascript knowledge, there are lots of resources, e.g.Likely resources
p5.js
A Javascript library based on the idea of Processing that makes drawing and animation easy on the web.This library is quite easy to use, but is primarily delivered as a library to download to your computer. While this makes a lot of sense, since Javascript is a client side language, I prefer an online IDE so students can simply concentrate on typing in the key parts and seeing them occur right away. I think learning a code editor is another step.
There are some online IDEs for p5.js: