Learn Javascript
Javascript basics
Quicklinks to Repl language playgrounds:
Lessons
- 100 - Introduction & getting Javascript up and running
- 101 - Numeric calculations
- 102 - Numeric variables
- 103 - String variables
- 104 - User input
- 105 - Converting between numbers and strings
- 106 - Comparing values
- 107 - Making decisions with "if"
- 108 - Repeating instructions with "while"
- 109 - Making a list
- 110 - Looping through a list
- 111 - Other list functionality
- 112 - Dates and times
- 113 - Functions
- 114 - Callbacks
- 115 - JSON
- 116 - Promises and using fetch
- 117 - Classes
Intro to HTML
Javascript rarely stands alone in isolation. As the language of the web, it is very commonly used in conjunction with HTML and CSS, so an understanding of these two markup languages is very useful.
- Introduction to HTML
- Anchor elements
- The DIV and SPAN elements
- IMG, VIDEO, AUDIO elements
- FORM and INPUT elements
- Lists
- Tables
Intro to CSS
Javascript rarely stands alone in isolation. As the language of the web, it is very commonly used in conjunction with HTML and CSS, so an understanding of these two markup languages is very useful.
- Introduction
- Boiler plate
- Basic styling
- Showing/hiding items
- Grid layout
- Drop down menus
- Styling form elements
- Icons
- Styling tables
Javascript & the DOM
The DOM (document object model) forms the basis of where Javascript, HTML and CSS all intersect.
- Document object model functions & properties
- Event handlers
- Basic form tasks (validation, send)
- Uploading files
- Local storage
- Reading an uploaded file in the browser
- Geolocation
- Detect screen size, device type
- Cordova
Node.js
Javascript doesn't just have to run in the browser. Node.js is when Javascript is used to run as a standalone tool, commonly to create web servers.
- Install & setup of Node.js (including npm) coming soon
- A simple express.js web server coming soon
Firebase
Google Firebase is one of a number of tools that Google makes available for developers. It is quite handy as a "proof of concept" tool that minimises the need for you to create your own "back end" server.
Firebase can be used to provide:
- Authentication of users against their pre-existing Google credentials.
- Store/retrieve application data in JSON format
- Upload/download files for storage
Tutorials and notes on Firebase as follows:
- Part 1 - Firebase authentication
- Part 2 - Firebase database
- Part 3 - Firebase file storage
HTML Canvas
The HTML canvas is a graphics system that you can program with Javascript. The element is divided into pixels. You use sets of pixel coordinates to tell Javascript where to draw shapes, place text or images etc.
- Coordinate system
- Hello canvas!
- Drawing basic shapes
- Using colour
- Displaying text
- Keyboard events
- Mouse events
- Drawing an image
- Playing a sound
- Detecting collisions
Reference guides & valuable links
Some summary guides that might be useful.
- My Javascript reference summary (also available as PDF)
- HTML 5
- HTML Canvas
- CSS 3
Official documentation from the Mozilla developer network
- Mozilla developer network: Javascript documentation
- Mozilla developer network: HTML documentation
- Mozilla developer network: CSS documentation
- Mozilla developer network: Web API documentation
Get copies of the MDN documents offline:
- http://devdocs.io/offline
For thorough, free, high quality references to other languages, I highly recommend the Notes for Professionals series of PDFs available from goalkicker:
- Javascript notes for professionals
- CSS notes for professionals
- HTML 5 notes for professionals
- HTML 5 Canvas notes for professionals
Programming practice
Project ideas
- "I Need Practice Programming": 49 Ideas for Game Clones to Code or PDF
- Juice it or lose it (a talk by Martin Jonasson & Petri Purho)
Javascript Games: A youtube series that looks quite good:
- Javascript Games series: Pong
- Javascript Games series: Flappy bird
- Javascript Games series: Snake
- Javascript Games series: Tetris
Author
(C) Paul Baumgarten 2019