JavaScript for Kids: A Playful Introduction to Programming (2015)
Afterword: Where To Go From Here
Now that you’ve learned the basics of JavaScript, you’re ready to venture out into a whole, wide world of programming. You could learn another programming language, or you could choose to build on your knowledge of JavaScript, taking your skills to the next level. Where you go next is entirely up to you, but here are some ideas.
More JavaScript
We’ve looked at a lot of JavaScript in this book, but there’s much more you can learn about the language. Here are some books and websites that will help you learn more of the details of JavaScript:
§ JavaScript: The Good Parts by Douglas Crockford (O’Reilly Media, 2008)
§ Eloquent JavaScript, 2nd Edition, by Marijn Haverbeke (No Starch Press, 2014)
§ JavaScript: The Definitive Guide, 4th Edition, by David Flanagan (O’Reilly Media, 2001)
§ The Mozilla Developer Network’s JavaScript resources: https://developer.mozilla.org/en-US/docs/Web/JavaScript/
§ Codecademy JavaScript courses: http://www.codecademy.com/en/tracks/javascript/
Web Programming
To create websites, you need to use some HTML and CSS, along with JavaScript.
HTML
HTML is the markup language used for creating web pages. We learned some basic HTML in Chapter 5, but there’s much more to learn. Here are some places you can learn more about HTML:
§ The Mozilla Developer Network’s Introduction to HTML: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction/
§ Codecademy HTML & CSS course: http://www.codecademy.com/tracks/web/
§ Mozilla Webmaker: https://webmaker.org/
CSS
CSS (short for Cascading Style Sheets) is the language used to control the appearance of web pages. Learn more about CSS here:
§ The Mozilla Developer Network’s Getting Started with CSS: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/
§ Codecademy HTML & CSS course: http://www.codecademy.com/tracks/web/
Server-Side Code with Node.js
Web pages live on web servers. A server stores all the HTML, CSS, and JavaScript for a web page, and it allows people to access the page from the Internet. You can also write programs for the server (called server-side code) to make the server generate new HTML files each time a web page is loaded. For example, when you visit http://twitter.com/, a program runs on a server that finds the latest tweets for your feed, generates an HTML file containing those tweets, and sends that file to your browser.
Node.js lets you write server-side code in JavaScript. Find out more about Node.js with these links:
§ Node.js documentation: http://nodejs.org/
§ The Node Beginner Book: http://www.nodebeginner.org/
Graphical Programming
If you want to make interactive graphics in JavaScript, you have two main options: the canvas element and SVG.
Canvas
We learned the basics of the canvas element in this book, but there’s much more you can do with it. Here are some tutorials and games you can use to learn more:
§ The Mozilla Developer Network’s Canvas Tutorial: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/
§ Code Monster from Crunchzilla: http://www.crunchzilla.com/code-monster/
SVG Using Raphaël
SVG is an image format that lets you draw shapes and animate them without redrawing from scratch for each animation step. SVG programming can be difficult to get the hang of, but it’s much easier if you use the JavaScript library called Raphaël. Here are some resources for learning Raphaël:
§ Raphaël website: http://raphaeljs.com/
§ An Introduction to the Raphaël JS Library: http://code.tutsplus.com/tutorials/an-introduction-to-the-raphael-js-library--net-7186/
3D Programming
Remember how in Chapter 13 we told canvas we wanted to make a 2D drawing context by calling canvas.getContext("2d")? It’s also possible to do 3D graphics using canvas. This is another one of those areas where it’s easier to use a library, so I’d recommend using the library three.js. Here are some resources for learning three.js:
§ three.js Manual: http://threejs.org/docs/index.html#Manual
§ The Beginner’s Guide to three.js: http://blog.teamtreehouse.com/the-beginners-guide-to-three-js/
Programming Robots
You can even control robots using JavaScript! For example, the Parrot AR.Drone is a small flying helicopter that you can control using Node.js. Or you can check out Johnny-Five, a JavaScript library that lets you use Node.js to control devices such as the Arduino (a popular microcontroller that’s used in lots of homemade electronics and robotics projects). Here are some resources for learning how to control robots and other devices with JavaScript:
§ node-ar-drone: https://github.com/felixge/node-ar-drone/
§ NodeCopter: http://nodecopter.com/
§ NodeBots: http://nodebots.io/
§ Johnny-Five: https://github.com/rwaldron/johnny-five/
Audio Programming
JavaScript also allows you to do advanced audio programming in web browsers using the Web Audio API (short for application programming interface). You can use the Web Audio API to make sound effects or even create your own music! Here are some resources for learning more about the Web Audio API:
§ The Mozilla Developer Network’s Web Audio API: https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/
§ HTML5 Rocks: Getting Started with Web Audio API: http://www.html5rocks.com/en/tutorials/webaudio/intro/
Game Programming
If you want to do more game programming in JavaScript, you might want to try using a game engine. A game engine is a collection of code that handles a lot of the lower-level concerns of the game (like keyboard and mouse input), allowing you to concentrate on the parts that make your game different. Here are some resources you can check out to learn more about game programming and game engines:
§ Crafty game engine: http://craftyjs.com/
§ Pixi Renderer: https://github.com/GoodBoyDigital/pixi.js
§ HTML5 Game Engines: http://html5gameengine.com/
§ Udacity HTML5 Game Development: https://www.udacity.com/course/cs255
§ 3D Game Programming for Kids by Chris Strom (Pragmatic Programmers, 2013)
Sharing Your Code Using JSFiddle
What if you want to share all the great JavaScript you’ve written with the world? There are many ways to do that. One of the easier ones is JSFiddle (http://jsfiddle.net/). Just type your JavaScript in the JavaScript box, add any HTML you want in the HTML box, and then click Run to run your program. To share it, click Save, which gives you a URL that you can then share with anyone.