415 lines
11 KiB
HTML
415 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'; font-src 'self' data:; img-src 'self' data:; connect-src 'self'; base-uri 'self'; form-action 'self' https://defcon.social https://bsky.app;">
|
|
<meta http-equiv="X-Content-Type-Options" content="nosniff">
|
|
<link rel="stylesheet" href="../assets/css/style.css">
|
|
<link rel="icon" type="image/x-icon" href="../favicon.ico">
|
|
<script>
|
|
// Apply theme immediately to prevent flash
|
|
(function() {
|
|
const theme = localStorage.getItem('theme') ||
|
|
(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
})();
|
|
</script>
|
|
<title>JavaScript Quickstart Reference - Quick Reference - Launch Pad</title>
|
|
</head>
|
|
<body>
|
|
<button class="theme-toggle" id="themeToggle" aria-label="Toggle dark mode">
|
|
<svg class="theme-icon theme-icon-moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
|
|
<svg class="theme-icon theme-icon-sun" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: none;"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
|
|
</button>
|
|
<br/><br/>
|
|
<div class="name">
|
|
__ _______________________ _________._________________________
|
|
\_ _____/ \______ \ / _ \ / _____/ / _____/ | | \_ _____/
|
|
| __) | _/ / /_\ \ / \ ___ / \ ___ | | | __)_
|
|
| \ | | \ / | \ \ \_\ \ \ \_\ \ | |___ | \
|
|
\___ / |____|_ / \____|__ / \______ / \______ / |_______ \ /_______ /
|
|
\/ \/ \/ \/ \/ \/ \/
|
|
</div>
|
|
<div class="blog-page-header">
|
|
<div class="blog-header-content">
|
|
<a href="/quickref" class="back-link" title="Back to Quick Reference">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 24 24" class="home-icon"><path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
|
|
</a>
|
|
<h1 class="blog-page-title">JavaScript Quickstart Reference</h1>
|
|
</div>
|
|
</div>
|
|
<div class="blog-post-container">
|
|
<div class="blog-posts-container" style="max-width: 900px; margin: 0 auto;">
|
|
<div class="blog-post">
|
|
<div class="blog-post-content">
|
|
<p><a href="index.html">← Back to quick reference</a></p>
|
|
<p><a href="../index.html">← Home</a></p>
|
|
<hr>
|
|
<p>Quick reference guide for JavaScript. Essential syntax, control flow, data structures, and common patterns for web development and Node.js.</p>
|
|
<hr>
|
|
<h2>Hello World</h2>
|
|
<pre><code>console.log("Hello, World!"); // Basic output</code></pre>
|
|
<hr>
|
|
<h2>Variables</h2>
|
|
<pre><code>let x = 42; // Mutable variable
|
|
const name = "Alice"; // Immutable
|
|
let flag = true; // Boolean
|
|
var old = "deprecated"; // Avoid var, use let/const
|
|
|
|
// Multiple declarations
|
|
let a = 1, b = 2, c = 3;
|
|
|
|
// Destructuring
|
|
let [x, y] = [1, 2];
|
|
let {name, age} = {name: "Alice", age: 30};
|
|
</code></pre>
|
|
<hr>
|
|
<h2>Control Flow</h2>
|
|
<h3>If/Else</h3>
|
|
<pre><code>if (x > 10) {
|
|
console.log("x is big");
|
|
} else {
|
|
console.log("x is small");
|
|
}
|
|
|
|
if (x > 10) {
|
|
console.log("big");
|
|
} else if (x > 5) {
|
|
console.log("medium");
|
|
} else {
|
|
console.log("small");
|
|
}
|
|
|
|
// Ternary operator
|
|
let result = x > 10 ? "big" : "small";
|
|
|
|
// Switch
|
|
switch (x) {
|
|
case 10:
|
|
console.log("ten");
|
|
break;
|
|
case 20:
|
|
console.log("twenty");
|
|
break;
|
|
default:
|
|
console.log("other");
|
|
}
|
|
</code></pre>
|
|
<h3>For Loops</h3>
|
|
<pre><code>// Traditional for loop
|
|
for (let i = 0; i < 5; i++) {
|
|
console.log(i);
|
|
}
|
|
|
|
// For...of (arrays, strings)
|
|
let nums = [1, 2, 3];
|
|
for (let n of nums) {
|
|
console.log(n);
|
|
}
|
|
|
|
// For...in (object keys)
|
|
let person = {name: "Alice", age: 30};
|
|
for (let key in person) {
|
|
console.log(key, person[key]);
|
|
}
|
|
|
|
// Array methods
|
|
nums.forEach(n => console.log(n));
|
|
nums.forEach((n, i) => console.log(i, n));
|
|
</code></pre>
|
|
<h3>While Loops</h3>
|
|
<pre><code>while (x > 0) {
|
|
x--;
|
|
console.log(x);
|
|
}
|
|
|
|
// Do...while
|
|
do {
|
|
x--;
|
|
} while (x > 0);
|
|
</code></pre>
|
|
<hr>
|
|
<h2>Functions</h2>
|
|
<pre><code>// Function declaration
|
|
function add(a, b) {
|
|
return a + b;
|
|
}
|
|
|
|
console.log(add(2, 3));
|
|
|
|
// Function expression
|
|
const subtract = function(a, b) {
|
|
return a - b;
|
|
};
|
|
|
|
// Arrow functions
|
|
const multiply = (a, b) => {
|
|
return a * b;
|
|
};
|
|
|
|
const divide = (a, b) => a / b; // Implicit return
|
|
|
|
// Default parameters
|
|
function greet(name = "World") {
|
|
return `Hello, ${name}!`;
|
|
}
|
|
|
|
// Rest parameters
|
|
function sum(...numbers) {
|
|
return numbers.reduce((a, b) => a + b, 0);
|
|
}
|
|
</code></pre>
|
|
<hr>
|
|
<h2>Arrays / Objects</h2>
|
|
<h3>Arrays</h3>
|
|
<pre><code>let nums = [1, 2, 3];
|
|
nums.forEach(n => console.log(n));
|
|
|
|
// Array methods
|
|
nums.push(4); // Add to end
|
|
nums.pop(); // Remove from end
|
|
nums.unshift(0); // Add to beginning
|
|
nums.shift(); // Remove from beginning
|
|
nums.length // Length
|
|
nums[0] // Access by index
|
|
nums.slice(1, 3) // Slice (non-mutating)
|
|
nums.splice(1, 1) // Remove/insert (mutating)
|
|
|
|
// Array methods (functional)
|
|
nums.map(n => n * 2) // Transform
|
|
nums.filter(n => n > 1) // Filter
|
|
nums.reduce((a, b) => a + b, 0) // Reduce
|
|
nums.find(n => n > 1) // Find first match
|
|
nums.some(n => n > 5) // Any match
|
|
nums.every(n => n > 0) // All match
|
|
</code></pre>
|
|
<h3>Objects</h3>
|
|
<pre><code>let person = {name: "Alice", age: 30};
|
|
console.log(person.name);
|
|
console.log(person["name"]);
|
|
|
|
// Object methods
|
|
person.greet = function() {
|
|
return `Hello, I'm ${this.name}`;
|
|
};
|
|
|
|
// Object literal with method shorthand
|
|
let person = {
|
|
name: "Alice",
|
|
age: 30,
|
|
greet() {
|
|
return `Hello, I'm ${this.name}`;
|
|
}
|
|
};
|
|
|
|
// Object destructuring
|
|
let {name, age} = person;
|
|
let {name: n, age: a} = person; // Rename
|
|
|
|
// Spread operator
|
|
let person2 = {...person, age: 31};
|
|
</code></pre>
|
|
<h3>Maps and Sets</h3>
|
|
<pre><code>// Map
|
|
let map = new Map();
|
|
map.set("name", "Alice");
|
|
map.set("age", 30);
|
|
map.get("name");
|
|
map.has("name");
|
|
map.delete("name");
|
|
|
|
// Set
|
|
let set = new Set([1, 2, 3]);
|
|
set.add(4);
|
|
set.has(3);
|
|
set.delete(2);
|
|
set.size
|
|
</code></pre>
|
|
<hr>
|
|
<h2>Strings</h2>
|
|
<pre><code>let text = "Hello, World!";
|
|
let template = `Hello, ${name}!`; // Template literal
|
|
|
|
// String methods
|
|
text.length
|
|
text.toUpperCase()
|
|
text.toLowerCase()
|
|
text.substring(0, 5)
|
|
text.slice(0, 5)
|
|
text.split(",")
|
|
text.replace("World", "JavaScript")
|
|
text.includes("Hello")
|
|
text.startsWith("Hello")
|
|
text.endsWith("!")
|
|
</code></pre>
|
|
<hr>
|
|
<h2>Classes</h2>
|
|
<pre><code>class Person {
|
|
constructor(name, age) {
|
|
this.name = name;
|
|
this.age = age;
|
|
}
|
|
|
|
greet() {
|
|
return `Hello, I'm ${this.name}`;
|
|
}
|
|
}
|
|
|
|
let person = new Person("Alice", 30);
|
|
console.log(person.greet());
|
|
|
|
// Inheritance
|
|
class Student extends Person {
|
|
constructor(name, age, grade) {
|
|
super(name, age);
|
|
this.grade = grade;
|
|
}
|
|
}
|
|
</code></pre>
|
|
<hr>
|
|
<h2>Promises & Async/Await</h2>
|
|
<pre><code>// Promises
|
|
let promise = new Promise((resolve, reject) => {
|
|
setTimeout(() => resolve("Done!"), 1000);
|
|
});
|
|
|
|
promise.then(result => console.log(result))
|
|
.catch(error => console.error(error));
|
|
|
|
// Async/await
|
|
async function fetchData() {
|
|
try {
|
|
let response = await fetch("https://api.example.com/data");
|
|
let data = await response.json();
|
|
return data;
|
|
} catch (error) {
|
|
console.error("Error:", error);
|
|
}
|
|
}
|
|
|
|
// Promise.all
|
|
let promises = [promise1, promise2, promise3];
|
|
Promise.all(promises).then(results => {
|
|
console.log(results);
|
|
});
|
|
</code></pre>
|
|
<hr>
|
|
<h2>Error Handling</h2>
|
|
<pre><code>try {
|
|
let result = riskyOperation();
|
|
} catch (error) {
|
|
console.error("Error:", error.message);
|
|
} finally {
|
|
console.log("Always runs");
|
|
}
|
|
|
|
// Throwing errors
|
|
function divide(a, b) {
|
|
if (b === 0) {
|
|
throw new Error("Division by zero");
|
|
}
|
|
return a / b;
|
|
}
|
|
</code></pre>
|
|
<hr>
|
|
<h2>Modules (ES6)</h2>
|
|
<pre><code>// Export
|
|
export function add(a, b) {
|
|
return a + b;
|
|
}
|
|
|
|
export const PI = 3.14159;
|
|
|
|
export default class Calculator {
|
|
// ...
|
|
}
|
|
|
|
// Import
|
|
import { add, PI } from "./math.js";
|
|
import Calculator from "./calculator.js";
|
|
import * as math from "./math.js";
|
|
</code></pre>
|
|
<hr>
|
|
<h2>Node.js Basics</h2>
|
|
<pre><code>// File system
|
|
const fs = require("fs");
|
|
|
|
// Reading
|
|
fs.readFile("file.txt", "utf8", (err, data) => {
|
|
if (err) throw err;
|
|
console.log(data);
|
|
});
|
|
|
|
// Writing
|
|
fs.writeFile("file.txt", "Hello, World!", (err) => {
|
|
if (err) throw err;
|
|
});
|
|
|
|
// Promises (fs/promises)
|
|
const fs = require("fs/promises");
|
|
let data = await fs.readFile("file.txt", "utf8");
|
|
|
|
// Readline (user input)
|
|
const readline = require("readline");
|
|
const rl = readline.createInterface({
|
|
input: process.stdin,
|
|
output: process.stdout
|
|
});
|
|
|
|
rl.question("What's your name? ", (answer) => {
|
|
console.log(`Hello, ${answer}!`);
|
|
rl.close();
|
|
});
|
|
</code></pre>
|
|
<hr>
|
|
<h2>Tips</h2>
|
|
<ul>
|
|
<li>Variables: <code>let</code> mutable, <code>const</code> immutable. Avoid <code>var</code>.</li>
|
|
</ul>
|
|
<ul>
|
|
<li><code>prompt()</code> (browser) or <code>readline</code> (Node.js) can handle user input.</li>
|
|
</ul>
|
|
<ul>
|
|
<li>JS is dynamically typed; type coercion can surprise you. Use <code>===</code> for strict equality.</li>
|
|
</ul>
|
|
<ul>
|
|
<li>Arrays are zero-indexed; objects are key-value maps.</li>
|
|
</ul>
|
|
<ul>
|
|
<li>Functions are first-class and can be anonymous or arrow-style.</li>
|
|
</ul>
|
|
<ul>
|
|
<li>Use <code>const</code> by default, <code>let</code> when reassignment is needed.</li>
|
|
</ul>
|
|
<ul>
|
|
<li>Template literals (backticks) allow string interpolation: <code>`Hello, ${name}!`</code>.</li>
|
|
</ul>
|
|
<ul>
|
|
<li>Arrow functions preserve <code>this</code> from enclosing scope; regular functions have their own <code>this</code>.</li>
|
|
</ul>
|
|
<ul>
|
|
<li>Use array methods (<code>map</code>, <code>filter</code>, <code>reduce</code>) for functional programming patterns.</li>
|
|
</ul>
|
|
<ul>
|
|
<li>Destructuring works with arrays and objects for cleaner code.</li>
|
|
</ul>
|
|
<ul>
|
|
<li>Use <code>async/await</code> for cleaner asynchronous code than promise chains.</li>
|
|
</ul>
|
|
<ul>
|
|
<li><code>null</code> is intentional absence of value; <code>undefined</code> is uninitialized.</li>
|
|
</ul>
|
|
<ul>
|
|
<li>Use <code>===</code> and <code>!==</code> instead of <code>==</code> and <code>!=</code> to avoid type coercion surprises.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script async type="text/javascript" src="../blog/analytics.js"></script>
|
|
<script src="../theme.js"></script>
|
|
</body>
|
|
</html>
|
|
|