Professional Documents
Culture Documents
Ultimate Javascript Cheat Sheet - 200+ Resources
Ultimate Javascript Cheat Sheet - 200+ Resources
I felt bored after completing the Ultimate Cheat Sheet Compilation, so I just
decided to create another one! The most complete javascript cheat sheet and resource
compilation you can find online!
PS: It took me around 10 hours to complete the guide. Share it at: https://worldindev.ck.page/
Table of content:
● My cheat Sheet
● Projects ideas to become a javascript master
● Other resources
For beginners
What is JS (Javascript)
JavaScript is a scripting or programming language that allows you to implement complex
features on web pages — every time a web page does more than just sit there and display static
information for you to look at — displaying timely content updates, interactive maps, animated
2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably
involved. It is the third layer of the layer cake of standard web technologies. MDN
What it used for?
To put things simply, JavaScript is an object orient programming language designed to make
web development easier and more attractive. In most cases, JavaScript is used to create
responsive, interactive elements for web pages, enhancing the user experience. Things like
menus, animations, video players, interactive maps, and even simple in-browser games can be
created quickly and easily with JavaScript. JavaScript is one of the most popular programming
languages in the world. BitDegree - What Is JavaScript Used For And Why You Should Learn It
JS Cheat Sheet
–> Download the PDF Version of this Cheat Sheet here
Include Javascript:
<script type="text/javascript"></script>
<script src="myscript.js"></script><code></code>
Variables:
var myVariable = 22; //this can be a string or number. var is globally
defined
Variables in the block scope, which means those variables exist only within the corresponding
block
JavaScript Variables - w3schools
https://dev.to/devlorenzo/js-hide-and-show-32og
Data Types:
//string
var string = 'ASCII text';
//int
var integer = 123456789;
//float
var float = 123.456;
//boolean, can be true or false
var t = true;
var f = false;
//undefined
var undef;//defaults to undefined
var undef = undefined;//not common, use null
//null
var nul = null;
//array
var arr = ['Hello','my','name','is','Dr.Hippo',123,null];
//object
var person = {'name':'John Smith','age':27};
//function
var fun = function(){
return 42;
}
Operators
Basic Operators
+ — Addition
- — Subtraction
* — Multiplication
/ — Division
(...) — Grouping operator, operations within brackets are executed
earlier than those outside
% — Modulus (remainder )
++ — Increment numbers
-- — Decrement numbers
https://dev.to/devlorenzo/js-change-text-on-hover-3945
Comparison Operators
== Equal to
=== Equal value and equal type
!= Not equal
!== Not equal value or not equal type
> Greater than
< Less than
>= Greater than or equal to
<= Less than or equal to
? Ternary operator
Logical Operators
Bitwise Operators
Loops
for - loops through a block of code a number of times.
var i=0;
while (i < 10) {
console.log(i);
i++;
}
When you use break without a label, it terminates the innermost enclosing while, do-while, for,
or switch immediately and transfers control to the following statement.
When you use break with a label, it terminates the specified labeled statement.
When you use continue without a label, it terminates the current iteration of the innermost
enclosing while, do-while, or for statement and continues execution of the loop with the next
iteration. In contrast to the break statement, continue does not terminate the execution of the
loop entirely. In a while loop, it jumps back to the condition. In a for loop, it jumps to the
increment-expression.
When you use continue with a label, it applies to the looping statement identified with that
label.
Source - Loops and iteration - MDN
https://dev.to/devlorenzo/js-on-scroll-events-4232
Strings
dev.to Article - 10 JavaScript string methods you should know - by @frugencefidel
Escape characters
Top 10 JavaScript Array Methods You Should Know - By Rachel Cole at morioh.com
Functions
Syntax
Examples
function myFunction(p1, p2) {
return p1 * p2; // The function returns the product of p1 and p2
}
function myFunction(a, b) {
return a * b; // Function returns the product of a and b
}
Maths
Methods
https://dev.to/worldindev/finally-how-to-understand-math-awesome-resource-list-4end
Properties
E — Euler’s number
LN2 — The natural logarithm of 2
LN10 — Natural logarithm of 10
LOG2E — Base 2 logarithm of E
LOG10E — Base 10 logarithm of E
PI — The number PI
SQRT1_2 — Square root of 1/2
SQRT2 — The square root of 2
Date
https://dev.to/devlorenzo/js-how-to-get-current-date-1km
Javascript date objects allow us to work with date and time. We can retrieve information for it by
creating a date and assign and assigning it to a variable:
Date object provide us a lot of different methods, the most used are year, month, day, hours,
minutes, seconds, and milliseconds. Remember that you always have to precise the entire year
(1950 and not only 50), that we always start with 0 (so, for example, December is the eleventh, a
minute is composed of 59 seconds…) and that day is in a 24 hours format.
Events
Mouse:
onmouseover - When the pointer is moved onto an element or one of its children
onmouseout - User moves the mouse pointer out of an element or one of its children
Keyboard:
Frame:
Form:
onselect - The user selects some text (for <input> and <textarea>)
Drag:
Clipboard:
Media:
onplaying - Media is playing after having been paused or stopped for buffering
installed - The browser is trying to load the media but it is not available
ontimeupdate - The playing position has changed (e.g. because of fast forward)
Other:
transitionend - Fired when a CSS transition has completed
SetTimeout will wait foo seconds and then execute the action. SetInterval will execute this same
action every foo seconds.
Both can be inline or multiline, I recommend using multiline 99% of the time. It’s important to
notice that they work in milliseconds.
SetTimeout:
setTimeout(function(){
alert("Hello World!");
}, 2000); // 2 seconds
SetInterval:
setInterval(function() {
alert("I want to show you another Javascript trick:");
}, 1000);
● If you want to remove the first delay you have to add code a first time out of the function.
I recommend you save this code in a separate function you can call whenever you need.
Continue reading here
https://dev.to/devlorenzo/js-settimeout-and-setinterval-1pbf
First, it’s important to notice that a majority of backend actions have an unknown result, we don’t
know if it will work when we write our code. So we always have to write two different codes, one if
the action works, another if the action results in an error. This is exactly how a try/catch work, we
submit a code to try, if it works code continues, if it doesn’t we catch the error (avoiding the app
crashing) and run another code. This is a very common thing we don’t only use in web
development (also in Android app development with java for example).
Try / Catch
try {
// Try to run this code
// For example make a request to the server
}
catch(e) {
console.log(e)
// if any error, Code throws the error
// For example display an error message to the user
}
Promises
The big problem with try/catch is that when you have to nest it (and you will have), it’s really
messy and difficult to read and write. So Javascript support promises with async functions:
More here
Back to Top - 🔝
Projects ideas to become a javascript master
https://dev.to/worldindev/10-projects-to-become-a-javascript-master-giveaway-2o4k
1. Converters
2. Word Counter
3. Timer / Clock
4. Random password generator
5. Calculator
b) Games
1. Log-in, Sign-up
2. Filter
3. To-Do List
4. Social
5. Portfolio
Back to Top - 🔝
Other resources
Table of content:
● My cheat Sheet
● Projects ideas to become a javascript master
● Other resources
○ Complete Javascript cheat sheets
○ JS promises
○ JS Arrays
○ JS loops
○ Preprocessor
○ CoffeScript
○ EJS
○ Babel
○ JS Frameworks & Libraries
○ Angular
○ Vue
○ React
○ JQuery
○ Others
○ Node
○ Other resources
By dev hints
PDF Version
Two Others:
By overapi
https://dev.to/devlorenzo/js-how-to-handle-errors-fi6
Dev.to article
https://dev.to/devlorenzo/js-settimeout-and-setinterval-1pbf
By codecadamy
JS Arrays:
By dev hints
JS Loops:
By codecademy
JS preprocessor:
CoffeeScript:
CoffeeScript website
Others:
At karloeaspirity.io
JS to CoffeeScript
EJS:
EJS website
EJS docs
At one compiler
Or at GitHub
Babel:
Babel website
Babel docs
By karloespiritu.io
Or at Medium
Angular
By angular.io
By dev hints
Vue
By vue mastery
By dev hints
Other - By marozed
React
By dev hints
Others:
JQuery
AJAX intro + cheat sheet at GitHub
PDF Version
Article about top 10 jquery cheat sheets
Or by over API
Others
Ember.js:
Website
Meteor:
Website
Mithril:
Website
Node
Website
Other Resources:
Advanced Topics
● How Browsers Work: Behind the scenes of modern web browsers
● Learning Advanced JavaScript by John Resig
● JavaScript Advanced Tutorial by HTML Dog
● WebGL Fundamentals
● Learning JavaScript Design Patterns by Addy Osmani
● Intro to Computer Science in JavaScript
● Immutable data structures for JavaScript
Libraries/Frameworks/Tools
● Introduction to React video
● React Interview Questions
● JavaScript Promises: A Tutorial with Examples
● Khan Academy: Making webpages interactive with jQuery
● A Beginner’s Guide To Grunt: Build Tool for JavaScript
● Getting Started with Underscore.js
● jQuery Course by Code School
● Thinkster.io Courses on React and Angular
● The Languages And Frameworks You Should Learn In 2016
● ES6 Tools List on GitHub
● Getting Started with Redux
Server-side JavaScript
● Real-time Web with Node.js Course by Code School
● NodeSchool Course
● Node.js First Look on Lynda
● All about NodeJS Course on Udemy
● Server-side Development with NodeJS Course on Coursera
Source (with links) - 50 resources to help you start learning JavaScript - By Daniel Borowski - At
Medium
https://dev.to/devlorenzo/the-ultimate-compilation-of-cheat-sheets-100-268g
⚡Giveaway ⚡
We are giving away any course you need on Udemy. Any price any course.
Subscribe to my Newsletter!
● The PDF version of this article!!!
● Monday: Weekly digeeeeeests!!!
● Wednesday: Discussions and dev insights - We debate around developer lifes - Examples:
🎁
The importance of coffee behind development / If you weren’t a dev, you’d be a…
● Gifts, lots of . We send cheat sheets, coding advice, productivity tips, and many more!
● That’s --> free <-- and you help me!
Back to Top - 🔝