JavaScript Features
JavaScript is the scripting language of the web. Embeded within HTML, JavaScript can create websites that do great things. Some examples include online games, online document editing, and even apps you can download and run on your phone!
This is intended as a guide for those looking to get into programming for the web. It is incomplete, but provides some ideas on what one can do and what one might Google to learn more. Most sections are classified as Basic, Intermediate, or Advanced based on how difficult I consider it to work with the technologies involved.
Good places to find answers about how to build for the web
Basic
Advanced
If you're having trouble running code
If you're having trouble running code you could try the following sites.
BASIC Console
Browsers support a JavaScript console, which includes the ability to print out debug messages & a REPL (Read Evaluate Print Loop). The console can be accessed in Chrome by clicking the three dots menu > More Tools > Developer Tools and clicking on console. There you can evaluate arbitrary JavaScript.
Things to Google
JavaScript console tutorial
Things to Google on JavaScript Features
Basic
JavaScript var tutorial
JavaScript functions tutorial
JavaScript math tutorial
JavaScript string tutorial
JavaScript array tutorial
JavaScript boolean tutorial
Intermediate
JavaScript regex tutorial
JavaScript ES6 class
JavaScript ES6 class tutorial
JavaScript ES6 class inheritance tutorial
JavaScript ES6 class fields
JavaScript ES6 class methods
JavaScript prototypical inheritance example
JavaScript events
JavaScript onclick tutorial
JavaScript map
JavaScript filter
JavaScript arrow functions
Things that are useful in general programming
Intermediate Datastructures
Things to Google
JavaScript linked list tutorial
JavaScript AVL tree
JavaScript red black tree
JavaScript graph datastructure
computer science data structures list
Intermediate Algorithms
Things to Google
JavaScript sorting algorithms
quicksort
mergesort
heapsort
Algorithm running times
Big O Notation
computer science algorithms list
JavaScript graph algorithms
JavaScript Dijkstra's path algorithm
JavaScript A star path algorithm
Intermediate Object Oriented Programming
Things to Google
JavaScript object oriented programming
object oriented programming inheritance
JavaScript Application Program Interfaces (APIs)
Intermediate Web Requests
If you need to load resources dynamically, or interact with servers then web requests are your friend. You may run into trouble with the Cross Origin Resource Sharing (CORS).
Things to Google
JavaScript XMLHttpRequest tutorial
JavaScript AJAX tutorial
CORS XMLHttpRequest
CORS AJAX
Intermediate DOM manipulation
Control HTML from JavaScript. The Document Object Model (DOM) lets you interact with existing elements, create new ones, and change their properties (style, content, etc.). Developers often use libraries instead of using the browser's built in API. One such library is jQuery.
Things to Google
JavaScript DOM tutorial
Intermediate Canvas element
A visual element that allows drawing custom shapes, lines, and images to the screen. Useful in the designing of games, image manipulation (filters etc.), and the design of other advanced graphical applications.
Things to Google
JavaScript Canvas tutorial
JavaScript Canvas game tutorial
JavaScript Canvas game examples
Advanced WebGL
Allows 3D Drawing and Shading capabilities in the browser. Extremely efficient and easier to work with than many 3d libraries, but requires advanced knowledge in order to proplerly use. Libraries available that make the process easier (try Three.js). Low poly 3d models reccomended, as your projects usually won't be running on computers built for AAA games.
Things to Google
JavaScript WebGL tutorial
JavaScript WebGL game tutorial
JavaScript WebGL game examples
Threejs tutorial
Threejs examples
Intermediate File Manipulation
JavaScript can open files users provide to a web page and interact with them, including creating new files. By default, JavaScript has built in functions supporting the parsing of JSON (JavaScript Object Notation). JavaScript can also create permanent or temporary filesystems, which it has more control over. This is available via the FileSystem API.
Things to Google
JavaScript read json file example
JavaScript read file line by line
JavaScript FileSystem API
JavaScript read file from input element
Advanced Progressive Web Applications
JavaScript is still evolving and progressive web applications are one of the coolest new things you can do with it. See a google primer on the subject here.
Things to Google
Progressive Web Applications tutorial
Intermediate Async Functions & Promises
JavaScript provides powerful tools to deal with asyncronous tasks through promises and async functions. Learn about promises here and async functions here.
Things to Google
JavaScript Promise tutorial
Advanced Web Assembly
Web Assembly (WASM) provides the ability to have compiled languages like C/C++ run within the web and interact with JavaScript. Some people write games using libaries like SDL2 and Web Assembly allows these applications to be shipped to the web.
Things to Google
WASM emscripten tutorial
WASM SDL2 tutorial
Tools
- git
- For non-Chromebooks an editor named Brackets
- For Chromebooks just go on the Chrome web store, search 'JavaScript editor', and pick one.