Added JavaScript sheet.

This commit is contained in:
CSnap 2023-11-19 04:33:54 +00:00
parent 66971b77db
commit bec65af4a2
2 changed files with 251 additions and 1 deletions

View File

@ -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)

248
javascript.md Normal file
View File

@ -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);
}
```
```