How to get started with JAVASCRIPT and HTML5
JavaScript is free and comes built into all modern web browsers so you don't need to get anything to be able to program in JavaScript. If the JavaScript code is located on the webpage that you are viewing then you can always use: View/Source from the toolbar menu to look at the source code.
This page and the examples given here aim to get you going with very basic JavaScript.
JavaScript is the programming language which enables much of the world wide web to do what it does. You only see JavaScript on a web page if something goes wrong!
These pages will show you how to get strated with using JavaScript to write web pages for simple mathematical modelling or things like code breaking.
JavaScript is a real programming language. It gets very hard very quick. There are millions of webpages out there to help you. If you get stuck then very often you can Google a page which solves your problem.
Resources
You will need a web browser such as Internet Explorer 9+, Mozilla, Chrome etc.
A text editor such as Notepad2. Many browsers actually contain a 'scratchpad' and text editor. Have a look in the tools/developer tools options.
There are plenty of JavaScript development environments out there but they are very complicated!
There are some very good reference websites out there. Many of them allow you to try out and modify the JavaScript so that you can see what it does. You could then cut and paste working code into your own project.
W3 schools JavaScript reference page.
W3 schools HTML5 canvas tag reference page.
Mozilla Javascript reference page
Open Source Libraries
Khronos - home page for WebGL
Mozilla page for WebGL
JQuery
Node.js
Making Progress
Start simple! Write programs that only aim to do one thing and get that to work. Save everything you do and modify things that already work but save the new program under a differetn name!
Write comments within the program. In JavaScript and Java this is done by putting \\ (double back slash) before the comment. This makes it much easier for others and yourself to work out what your program is upto. In HTML comments are put inside these: <!-- Comment Here -->
Almost always somebody out there will have done what you want to do, written a lesson on it or written something very similar. Watch out for all the usual internet hazards when looking for code and avoid downloading material which is suspect but you can learn a great deal by looking at or modifying other people's codes.
How to use these pages
Below you can see the name of the exercise, eg 'Hello World'. Notes tells you how to do it and will have some pictures etc. Example is a very basic web page which does the job. It will have no frills but should have plenty of comments. You can see, and copy, my version of the code by opening the example and then using the view/source menu, or equivalent, in your browser.
Start Here
Hello World in HTML5. Notes. Example.
Drawing and Geometry
Hello World with the Canvas object.Notes. Example.
Drawing a triangle. Notes. Example.
2D cellular automata.John Conway's Life . Notes and theory, Turmite.
Drawing a rubber band selection rectangle without destroying the background image.. Rubber Band Selection Rectangle.
Creating randomly positioned images.
Objects
Creating randomly coloured and positioned rectangles using a rectangle object.
Colour
Changing colour with RGB values.
Graphs
Code Breaking
Timers
JavaScript ToolBox Library of working functions.
Trouble Shooting
Most browsers have some kind of console for debugging code. In Mozilla this can be found in the tools menu and is called the 'browser console'. This will contain messages about errors in your code. It will usually give a line number and some idea as to the nature of the error.
Browsers do not implement JavaScript in exactly the same manner and so you might need to switch between browsers in order to get your code to behave properly. At present Chrome seems to be about the best behaved!
last updated 14th April 2016