Values, functions and modules
Use data structures to represent information, functions to name behaviour and modules to make dependencies explicit.
export function greeting(name) {
return `Welcome, ${name}`;
}
console.log(greeting('Hafiz'));The DOM and events
The browser converts HTML into the Document Object Model. JavaScript can query that tree and respond to clicks, keyboard input and form submission.
const button = document.querySelector('#learn');
button.addEventListener('click', () => {
button.textContent = 'Keep building!';
});Fetch and asynchronous work
fetch() sends an HTTP request. Always check the status, handle failures and understand the response format.
const response = await fetch('/api/lessons');
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const lessons = await response.json();Read errors as evidence
Start with the first error, note its file and line, inspect values with breakpoints, and use the Network panel to separate JavaScript failures from HTTP failures.