Foundations of Programming in JavaScript

This is a series of Ancient Brain "Worlds" based on the course Foundations of Programming in JavaScript (video tutorials) by Daniel Shiffman at The Coding Train. This is a full course to teach programming from basics, using JavaScript, for people who have never programmed before.

The Coding Train course provides source code for the video tutorials. The code has been ported here to Ancient Brain "Worlds" that can be run and edited in the browser. Done with permission of The Coding Train under MIT licence. On Ancient Brain, you can clone, edit, run, host, share, comment, like and embed these Worlds. You can upload your own resources (images, music, etc.) to use in these Worlds.

Here is the kind of World you will be able to create when you are finished this course:


Tutorial 7.8 variant
By "Coding Train" project
Tutorial 7.8 with music and other uploaded images, including from other users. Click on the images.

Notes

  • If you are unfamiliar with the Ancient Brain platform, work through the Start Tutorial first.

  • This course uses the P5 graphics library. The "Docs" menu above provides a quick link to the P5 docs to consult when coding. P5 is supported by Ancient Brain, and so are other graphics libraries like Three.js (which is used in the Start Tutorial).

  • The videos describe coding JavaScript on these platforms:
    1. Offline, using http://localhost
    2. Online, using the p5.js Web Editor.
    Both of these are a bit different to coding on Ancient Brain.

  • For more on The Coding Train, see their site and YouTube channel.

The course

Tutorial Title Videos Worlds
1.1 Code! Programming with p5.js

1.2 p5.js Web Editor

Optional video. This describes a different platform to Ancient Brain.

1.3 Shapes & Drawing

1.4 Color

1.5 Errors & Console

1.6 Code Comments

Tutorial Title Videos Worlds
2.1 Variables in p5.js (mouseX, mouseY)

2.2 Variables in p5.js (Make your own)

2.3 JavaScript Objects

2.4 The map() Function

2.5 The random() Function

Tutorial Title Videos Worlds
3.1 Introduction to Conditional Statements

3.2 The Bouncing Ball

3.3 Else and Else if, AND and OR

3.4 Boolean Variables

Tutorial Title Videos Worlds
4.1 while and for Loops

4.2 Nested Loops

Tutorial Title Videos Worlds
5.1 Function Basics

5.2 Function Parameters and Arguments

5.3 Functions and Return

Tutorial Title Videos Worlds
6.1 Introduction to Object-Oriented Programming

Optional video. Link video for the Coding Train playlist.

 
6.2 Classes in JavaScript

6.3 Constructor Arguments with Classes

Tutorial Title Videos Worlds
7.1 What is an array?

7.2 Arrays and Loops

7.3 Arrays of Objects

16.4 for...of loop

7.4 Mouse Interaction with Objects

7.5 Removing Objects from Arrays

7.6 Object Communication Part 1

7.7 Object Communication Part 2

7.8 Objects and Images

On Ancient Brain you can upload your own images and music. Try it!


What next?

Now you know some programming in JavaScript and P5, you can keep going. JavaScript and P5 support many more advanced features. The Coding Train has more videos showing how to code these advanced features. See playlists and in particular P5 playlists.

We have another Coding Train course adapted to Ancient Brain. This course shows how to do more advanced 3D "WebGL" Worlds using P5. You might like to go there next:

Go to the WebGL course.



The background is a program, showing the JavaScript graphics used on this site.
 
Font:

© Ancient Brain Ltd. All rights reserved.

Ancient Brain ™ is a trademark of Ancient Brain Ltd.

Beta      Bug bounty      Contact      Stats      The name      Terms and conditions