JavaScript for Web Development - Full Cheat Sheet
1. Basic Syntax
JavaScript uses C-style syntax and is case-sensitive.
- let & const: Modern variable declarations.
Example: let x = 10; const name = "Alice";
- Data types: Number, String, Boolean, Object, Array, null, undefined.
- Template literals: Multi-line and variable substitution.
Example: `Hello, ${name}`
- Comments: Single line `//`, Multi-line `/* comment */`
2. DOM Manipulation
Allows JS to interact with HTML.
- Access elements: document.getElementById('id'), document.querySelector('.class')
- Change text: element.innerText = "New Text";
- Change HTML: element.innerHTML = "<strong>Bold</strong>";
- Create/append: let p = document.createElement('p'); parent.appendChild(p);
- Style: element.style.color = "blue";
3. Events
Handle user interactions.
- addEventListener: element.addEventListener('click', function() {...});
- Event object: function(event) { console.log(event.target.value); }
4. Functions
Reusable blocks of code.
- Function declaration: function greet() { }
- Arrow function: const greet = () => { }
- Callbacks: function passed as argument.
Example: arr.forEach(item => callback(item));
5. Arrays and Objects
Array methods:
- forEach, map, filter, find
Object basics:
- let user = { name: "Alice", age: 25 };
- Access: user.name, Modify: user.age = 26
Destructuring:
- const { name } = user; const [first] = array;
6. Conditional Logic
Control flow in programs.
- if, else if, else, switch
Example:
if (x > 0) { ... } else { ... }
- Ternary: const msg = (x > 0) ? "Positive" : "Non-positive";
7. Loops
Execute code repeatedly.
- for, while, do...while
- for...of (arrays), for...in (objects)
- Array methods preferred: arr.map(x => x * 2);
8. Form Handling + Validation
Read and validate form inputs.
- Access value: document.querySelector('input').value
- Prevent form submit: event.preventDefault()
- Validation example:
if (!input.value) alert("This field is required");
9. fetch API (AJAX)
Fetch data from a server.
- fetch('https://api.com').then(res => res.json()).then(data => console.log(data));
- With async/await:
async function getData() {
try {
const res = await fetch(url);
const data = await res.json();
} catch (e) {
console.error(e);
10. Local & Session Storage
Store data in browser.
- localStorage.setItem('key', 'value');
- localStorage.getItem('key');
- localStorage.removeItem('key');
- JSON: localStorage.setItem('data', JSON.stringify(obj));
Optional: async / await
Syntactic sugar for Promises.
- async declares an asynchronous function.
- await pauses execution until a promise resolves.
Example:
async function fetchData() {
const res = await fetch(url);
const data = await res.json();
Optional: try...catch
Handles errors in code.
Example:
try {
let res = riskyFunction();
} catch (error) {
console.error("Error occurred:", error);
Optional: ES6 Modules
Split JS into modules.
- Export: export function greet() { }
- Import: import { greet } from './greet.js';
Optional: DevTools
Browser toolset for debugging.
- Console: View logs and run JS
- Elements: Inspect and modify HTML/CSS
- Network: View API requests and responses
- Sources: Debug JS with breakpoints
