Alongside with HTML and CSS, JavaScript is one of the main technologies used in building interactive webpages and online applications. First appeared in 1995, it has evolved into the most popular programming language (on Github) – all modern web browsers provide support for it, without the need of plugins by means of inbuilt JavaScript engine.
We have gathered a few useful cheat sheets and infographics, especially for those who have just started coding in JavaScript. For more productivity, keep them with yourself while working on your project.
Table of Contents
20. Most Common DOM Methods
This is a small cheat sheet that contains most common DOM methods at a glance. It includes creating new nodes, reaching elements in a document, navigating between nodes, known browser quirks, reading elements, node values and other data.
19. Ultimate JavaScript Cheat Sheet
This one gives you a quick overview of the JavaScript. It contains all basic elements like classes, constructers, functions, error handling, regular expressions, useful math functions and constants, and much more.
18. Basic and Advanced JavaScript
The purpose of this document is to briefly explain the core elements of the JavaScript. It covers array methods, definitions and lingo, control flow statements, and miscellaneous instructions.
17. JavaScript Object Methods Cheat Sheet
As the name suggests, it describes the methods in JavaScript objects, including string, math, array, data and number object methods.
16. JavaScript and Ajax For Dummies
It’s a one stop reference for the most common programming variables, methods, commands and coding miscellany used in the JavaScript, jQuery and AJAX.
15. React
React is a JavaScript library for developing user interfaces. This cheat sheet targets React version 15 and 16. Along with basic components and JSX patterns, it includes new features and API.
14. Interactive JavaScript Cheat Sheet
This is a basic interactive cheat sheet containing all useful JavaScript code examples on a single page. Here you can find code for variables, objects, loops, data types, events, strings and other categories. Simply copy and paste the code you need for your JS project.
13. JavaScript for Java Developers
This page covers the JavaScript language from the point of view of a Java developer, emphasizing on key differences between two languages. It explains functions, objects, classes, encapsulation and modules, block scope and hoisting, constructor vs constructor functions, classic vs prototypal inheritance, closures vs lambdas, and much more.
12. Javascript In One Picture
As the name suggests, the author has tried to wrap all the important concepts of JavaScript in one single image. It’s a Mind map diagram summarizing the JavaScript syntax through practical examples.
11. JavaScript Encyclopedia
The goal of this project is to create a complete encyclopedia for the current and future version of JavaScript. It’s a detailed webpage where you will find almost all essential JavaScript elements.
10. OverAPI
OverAPI Cheat Sheet contains most common JavaScript elements, including basic objects, DOM node and events, Browser and graphics. Just click the on the element to know more about it.
9. Quick API Reference
This is a quick reference by Oscar Otero to functions and properties of jQuery, including selectors, attributes, events and effects. Clicking on each elements will take you to the new page that explains the elements you’ve clicked, along with the example.
8. Fancy Cheat Sheet
This is colorful, basic cheat sheet for beginners who have just started coding in JavaScript and don’t know much about it. It includes regular expression and syntax, pattern modifier, event handler and more.
7. JS Cheat Sheets
The cheat sheet tries to explain the JavaScript concept in a very simple language with code examples. The code is written neatly and you will find helpful comments on almost every line.
6. jQuery Selectors
jQuery Selectors use common CSS syntax to allow authors to instantly detect any set of page elements to operate upon with jQuery library methods. Understanding them is the key to using the jQuery library most effectively. This reference puts the power of jQuery selectors at your fingertips.
5. JavaScript Quick Reference
This quick reference covers working with DOM (create/add DOM elements, add/remove/toggle/check classes), working with JS (loops, events, timers, type checking), and working with functions (add default values to functions and throttle function on resize).
4. Learn X in Y minutes
Here the X refers to JavaScript. It’s a long-single page cheat sheet that contains numbers, strings, operators, variables, array, objects, functions, scope, closures, logic and control structures. It teaches you all of these with the help of code examples.
3. Applying Nasa Coding Standards to Javascript
The NASA Jet Propulsion Lab has been developing software for unmanned mission in deep space and planet exploration missions. High automatization level and longer duration of missions demand superior quality software. As a result, JPL developed a code of guidelines and made it available to the public.
Since the demand of web-driven applications is growing rapidly and more critical operations are entrusted to JavaScript, this cheat sheet tries to apply the NASA coding guidelines to JavaScript and HTML apps for higher performance and reliability.
Read: 20 Best HTML Cheat Sheet | With All New HTML5 Tags
2. All-In-One Cheat Sheet
The name is self-explanatory, the cheat sheet will help you a lot, especially if you have just started coding. Along with providing basic as well as advanced JavaScript element details, it answers some of the basic questions, you might have in your mind as a beginner.
1. Modern JavaScript Cheat Sheet
Read: 17 Useful CSS Cheat Sheets| With New CSS3 Tags
This cheat sheet contains all elements that frequently occur in modern projects and most code. It won’t teach you JavaScript from the scratch, but help you with basic knowledge and concepts. Moreover, the author has provided some personal tips that may be debatable, but I find them very helpful.
Thanks for such an organized cheat sheet. While this sheet contains elements frequently used in modern projects, I was indeed experiencing some major errors in my website, which fatally affected and downed my website. Anyway, I’ve used Muscula to easily find errors and fix them.