Added JavaScript sheet.
This commit is contained in:
parent
66971b77db
commit
bec65af4a2
|
|
@ -1,6 +1,8 @@
|
|||
# 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)
|
||||
|
||||
|
|
|
|||
|
|
@ -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