# JavaScript Cheat Sheet for Web Development

## 1. Variables and Data Types

```javascript
let myVariable = 5; // Variable
const myConstant = 10; // Constant
let string = "This is a string";
let number = 42;
let boolean = true;
let nullValue = null;
let undefinedValue = undefined;
let objectValue = { a: 1, b: 2 };
let arrayValue = [1, 2, 3];
let symbol = Symbol("symbol");
```

## 2. Operators and Conditionals

```javascript
let a = 10,
  b = 20;
let sum = a + b;
let difference = a - b;
let product = a * b;
let quotient = a / b;
let remainder = a % b;
if (a > b) {
  console.log("a is greater than b");
} else if (a < b) {
  console.log("a is less than b");
} else {
  console.log("a is equal to b");
}
```

## 3. Strings, Template Literals and Arrays

```javascript
let hello = "Hello,";
let world = "World!";
let greeting = hello + " " + world; // 'Hello, World!'
let world = "World!";
let greeting = `Hello, ${world}`; // 'Hello, World!'
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]); // 'Apple'
fruits.push("Durian"); // Adding to the end
fruits.unshift("Elderberry"); // Adding to the start
let firstFruit = fruits.shift(); // Removing from the start
let lastFruit = fruits.pop(); // Removing from the end
```

## 4. Functions and Objects

```javascript
function add(a, b) {
  return a + b;
}
let subtract = function (a, b) {
  return a - b;
};
let multiply = (a, b) => a * b;
let car = {
  make: "Tesla",
  model: "Model 3",
  year: 2022,
  start: function () {
    console.log("Starting the car...");
  },
};
console.log(car.make); // 'Tesla'
car.start(); // 'Starting the car...'
```

## 5. DOM Manipulation

The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of a document and enables a way to manipulate its content and visual presentation by treating it as a tree structure where each node is an object representing a part of the document. The methods under this section help in accessing and changing the DOM.

```javascript
let element = document.getElementById("myId"); // Get element by ID
let elements = document.getElementsByClassName("myClass"); // Get elements by class name
let elements = document.getElementsByTagName("myTag"); // Get elements by tag name
let element = document.querySelector("#myId"); // Get first element matching selector
let elements = document.querySelectorAll(".myClass"); // Get all elements matching selector
element.innerHTML = "New Content"; // Change HTML content
element.style.color = "red"; // Change CSS styles
let attr = element.getAttribute("myAttr"); // Get attribute value
element.setAttribute("myAttr", "New Value"); // Set attribute value
```

## 6. Event Handling

JavaScript in the browser uses an event-driven programming model. Everything starts by following an event like a user clicking a button, submitting a form, moving the mouse, etc. The addEventListener method sets up a function that will be called whenever the specified event is delivered to the target.

```javascript
element.addEventListener("click", function () {
  // Code to execute when element is clicked
});
```

## 7. Form Handling

In web development, forms are essential for interactions between the website and the user. The provided code here prevents the default form submission behavior and provides a skeleton where one can define what should be done when the form is submitted.

```javascript
let form = document.getElementById("myForm");
form.addEventListener("submit", function (event) {
  event.preventDefault(); // Prevent form submission
  // Handle form data here
});
```

## 8. AJAX Calls

AJAX, stands for Asynchronous JavaScript And XML. In a nutshell, it is the use of the fetch API (or XMLHttpRequest object) to communicate with servers from JavaScript. It can send and receive information in various formats, including JSON, XML, HTML, and text files. AJAX’s most appealing characteristic is its "asynchronous" nature, which means it can do all of this without having to refresh the page. This allows you to update parts of a web page, without reloading the whole page.

```javascript
// Using Fetch API
fetch("https://api.mywebsite.com/data", {
  method: "GET", // or 'POST'
  headers: {
    "Content-Type": "application/json",
  },
  // body: JSON.stringify(data) // Include this if you're doing a POST request
})
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error("Error:", error));

// Using Async/Await
async function fetchData() {
  try {
    let response = await fetch("https://api.mywebsite.com/data");
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Error:", error);
  }
}
fetchData();
```

## 9. Manipulating LocalStorage

The localStorage object stores data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year. This can be

```javascript
localStorage.setItem("myKey", "myValue"); // Store data
let data = localStorage.getItem("myKey"); // Retrieve data
localStorage.removeItem("myKey"); // Remove data
localStorage.clear(); // Clear all data
```

## 10. Manipulating Cookies

Cookies are data, stored in small text files, on your computer. When a web server has sent a web page to a browser, the connection is shut down, and the server forgets everything about the user. Cookies were invented to solve the problem of "how to remember information about the user": When a user visits a web page, his/her name can be stored in a cookie. Next time the user visits the page, the cookie "remembers" his/her name.

```javascript
document.cookie = "username=John Doe"; // Create cookie
let allCookies = document.cookie; // Read all cookies
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; // Delete cookie
```
