Added JavaScript sheet.
This commit is contained in:
parent
66971b77db
commit
bec65af4a2
|
|
@ -1,6 +1,8 @@
|
||||||
# CheetSheetz
|
# CheetSheetz
|
||||||
|
|
||||||
Collection of various technical "cheat sheets".
|
## Personal composition of various technical "cheat sheets".
|
||||||
|
|
||||||
|
[JavaScript](https://git.namenode.xyz/CSnap/cheetsheetz/src/branch/main/javascript.md)
|
||||||
|
|
||||||
[Markdown](https://git.namenode.xyz/CSnap/cheetsheetz/src/branch/main/markdown.md)
|
[Markdown](https://git.namenode.xyz/CSnap/cheetsheetz/src/branch/main/markdown.md)
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,248 @@
|
||||||
|
# JavaScript Cheat Sheet
|
||||||
|
|
||||||
|
## Table of Contents
|
||||||
|
|
||||||
|
1. [Variables](#variables)
|
||||||
|
2. [Data Types](#data-types)
|
||||||
|
3. [Operators](#operators)
|
||||||
|
4. [Control Structures](#control-structures)
|
||||||
|
5. [Functions](#functions)
|
||||||
|
6. [Arrays](#arrays)
|
||||||
|
7. [Strings](#strings)
|
||||||
|
8. [Objects](#objects)
|
||||||
|
9. [DOM Manipulation](#dom-manipulation)
|
||||||
|
10. [Asynchronous JavaScript](#asynchronous-javascript)
|
||||||
|
11. [Error Handling](#error-handling)
|
||||||
|
|
||||||
|
## Variables
|
||||||
|
|
||||||
|
### Declaration and Assignment
|
||||||
|
```javascript
|
||||||
|
let variableName = value;
|
||||||
|
```
|
||||||
|
|
||||||
|
### Variable Types
|
||||||
|
- String: `let stringVariable = "Hello";`
|
||||||
|
- Number: `let numberVariable = 42;`
|
||||||
|
- Boolean: `let boolVariable = true;`
|
||||||
|
- Undefined: `let undefinedVariable;`
|
||||||
|
- Null: `let nullVariable = null;`
|
||||||
|
|
||||||
|
## Data Types
|
||||||
|
|
||||||
|
### Primitive Types
|
||||||
|
- String
|
||||||
|
- Number
|
||||||
|
- Boolean
|
||||||
|
- Undefined
|
||||||
|
- Null
|
||||||
|
|
||||||
|
### Reference Types
|
||||||
|
- Object
|
||||||
|
- Array
|
||||||
|
- Function
|
||||||
|
|
||||||
|
## Operators
|
||||||
|
|
||||||
|
### Arithmetic Operators
|
||||||
|
```javascript
|
||||||
|
+, -, *, /, %, ++, --
|
||||||
|
```
|
||||||
|
|
||||||
|
### Comparison Operators
|
||||||
|
```javascript
|
||||||
|
==, ===, !=, !==, <, >, <=, >=
|
||||||
|
```
|
||||||
|
|
||||||
|
### Logical Operators
|
||||||
|
```javascript
|
||||||
|
&& (and), || (or), ! (not)
|
||||||
|
```
|
||||||
|
|
||||||
|
### Assignment Operators
|
||||||
|
```javascript
|
||||||
|
=, +=, -=, *=, /=, %=
|
||||||
|
```
|
||||||
|
|
||||||
|
## Control Structures
|
||||||
|
|
||||||
|
### If Statement
|
||||||
|
```javascript
|
||||||
|
if (condition) {
|
||||||
|
// code to be executed if the condition is true
|
||||||
|
} else if (anotherCondition) {
|
||||||
|
// code to be executed if the previous condition was false and this one is true
|
||||||
|
} else {
|
||||||
|
// code to be executed if all conditions are false
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Switch Statement
|
||||||
|
```javascript
|
||||||
|
switch (variable) {
|
||||||
|
case value1:
|
||||||
|
// code to be executed if variable equals value1
|
||||||
|
break;
|
||||||
|
case value2:
|
||||||
|
// code to be executed if variable equals value2
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
// code to be executed if variable doesn't match any case
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Loops
|
||||||
|
#### For Loop
|
||||||
|
```javascript
|
||||||
|
for (let i = 0; i < 5; i++) {
|
||||||
|
// code to be executed in each iteration
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### While Loop
|
||||||
|
```javascript
|
||||||
|
while (condition) {
|
||||||
|
// code to be executed as long as the condition is true
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Do-While Loop
|
||||||
|
```javascript
|
||||||
|
do {
|
||||||
|
// code to be executed at least once, then repeated as long as the condition is true
|
||||||
|
} while (condition);
|
||||||
|
```
|
||||||
|
|
||||||
|
## Functions
|
||||||
|
|
||||||
|
### Function Declaration
|
||||||
|
```javascript
|
||||||
|
function functionName(param1, param2) {
|
||||||
|
// code to be executed
|
||||||
|
return result; // optional
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Arrow Functions
|
||||||
|
```javascript
|
||||||
|
const add = (a, b) => a + b;
|
||||||
|
```
|
||||||
|
|
||||||
|
### Function Call
|
||||||
|
```javascript
|
||||||
|
let result = functionName(arg1, arg2);
|
||||||
|
```
|
||||||
|
|
||||||
|
## Arrays
|
||||||
|
|
||||||
|
### Array Declaration
|
||||||
|
```javascript
|
||||||
|
let arrayName = [value1, value2, value3];
|
||||||
|
```
|
||||||
|
|
||||||
|
### Array Methods
|
||||||
|
```javascript
|
||||||
|
arrayName.push(newValue); // Add to the end
|
||||||
|
arrayName.pop(); // Remove from the end
|
||||||
|
arrayName.unshift(newValue); // Add to the beginning
|
||||||
|
arrayName.shift(); // Remove from the beginning
|
||||||
|
```
|
||||||
|
|
||||||
|
## Strings
|
||||||
|
|
||||||
|
### Template Literals
|
||||||
|
```javascript
|
||||||
|
let name = "World";
|
||||||
|
let greeting = `Hello, ${name}!`;
|
||||||
|
```
|
||||||
|
|
||||||
|
### String Methods
|
||||||
|
```javascript
|
||||||
|
let str = "Hello, World!";
|
||||||
|
str.length; // Length of the string
|
||||||
|
str.indexOf("World"); // Index of the first occurrence of "World"
|
||||||
|
str.slice(start, end); // Extract a portion of the string
|
||||||
|
```
|
||||||
|
|
||||||
|
## Objects
|
||||||
|
|
||||||
|
### Object Declaration
|
||||||
|
```javascript
|
||||||
|
let person = {
|
||||||
|
name: "John",
|
||||||
|
age: 30,
|
||||||
|
isStudent: false
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
### Object Methods
|
||||||
|
```javascript
|
||||||
|
person.sayHello = function() {
|
||||||
|
console.log(`Hello, my name is ${this.name}.`);
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## DOM Manipulation
|
||||||
|
|
||||||
|
### Selecting Elements
|
||||||
|
```javascript
|
||||||
|
let elementById = document.getElementById("elementId");
|
||||||
|
let elementByClass = document.getElementsByClassName("className");
|
||||||
|
let elementByTag = document.getElementsByTagName("tagName");
|
||||||
|
```
|
||||||
|
|
||||||
|
### Modifying Elements
|
||||||
|
```javascript
|
||||||
|
elementById.innerHTML = "New content";
|
||||||
|
elementById.style.color = "red";
|
||||||
|
```
|
||||||
|
|
||||||
|
## Asynchronous JavaScript
|
||||||
|
|
||||||
|
### Callbacks
|
||||||
|
```javascript
|
||||||
|
function fetchData(callback) {
|
||||||
|
// asynchronous operation
|
||||||
|
setTimeout(() => {
|
||||||
|
let data = "This is the data.";
|
||||||
|
callback(data);
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchData((result) => {
|
||||||
|
console.log(result);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### Promises
|
||||||
|
```javascript
|
||||||
|
function fetchData() {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
// asynchronous operation
|
||||||
|
setTimeout(() => {
|
||||||
|
let data = "This is the data.";
|
||||||
|
resolve(data);
|
||||||
|
// reject("Error occurred"); // Uncomment to simulate an error
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchData()
|
||||||
|
.then(result => console.log(result))
|
||||||
|
.catch(error => console.error(error));
|
||||||
|
```
|
||||||
|
|
||||||
|
## Error Handling
|
||||||
|
|
||||||
|
### Try-Catch Block
|
||||||
|
```javascript
|
||||||
|
try {
|
||||||
|
// code that may throw an error
|
||||||
|
} catch (error) {
|
||||||
|
// handle the error
|
||||||
|
console.error("Error: " + error.message);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
Loading…
Reference in New Issue