Use JavaScript for web interactivity

What is JavaScript?

JavaScript is the language that lets you add behaviour to a web page. Think of it as a butterfly that flutters around the page, making things move, respond, and change without reloading the whole page.

Getting Started – The script tag

Place JavaScript inside <script></script> tags. You can add it inline or link to an external file.

<script>
  console.log('Hello, world!'); // prints to the browser console
</script>
  

The Document Object Model (DOM)

The DOM is like a family tree of all the elements on a page. JavaScript can walk this tree to find elements and change them.

• document.getElementById('id') – find one element by its unique ID.
• document.querySelector('.class') – find the first element with a class.
• document.querySelectorAll('tag') – find all elements of a tag.

Event Handling – Making Things Interactive

Events are like triggers that fire when something happens (click, key press, mouse move).

1. Create a button: <button id="btn">Click me</button>
2. Add an event listener in JavaScript: document.getElementById('btn').addEventListener('click', () => alert('Button clicked!'));

⚡ Tip: Use addEventListener instead of inline onclick attributes for cleaner code.

Functions – Reusable Blocks of Code

A function is a named block that you can call whenever you need it.

function greet(name) {
  return 'Hello, ' + name + '!';
}
console.log(greet('Alice')); // Hello, Alice!
  

🧩 Analogy: Think of a function like a recipe – you give it ingredients (parameters) and it returns a dish (output).

Scope – Where Variables Live

Variables can be global (accessible everywhere) or local (only inside a function).

• var – function-scoped.
• let – block-scoped.
• const – block-scoped, value cannot change.

💡 Tip: Prefer let and const to avoid accidental global variables.

Asynchronous JavaScript – Doing Things Without Waiting

Sometimes you need to wait for something (like data from a server) but you don’t want to freeze the page.

• setTimeout() – run code after a delay.
• Promise – handle future values.
• async/await – write asynchronous code that looks synchronous.

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log(data);
}
fetchData();
  

Debugging – Finding and Fixing Bugs

Use the browser’s Developer Tools (F12) to:

1. Inspect elements and see the DOM.
2. Check the Console for error messages.
3. Set breakpoints in the Sources panel to step through code.

🛠️ Exam Tip: Practice reading console errors – they often tell you exactly where the problem is.

Exam Tips – What to Remember

• Know the difference between var, let, and const.
• Be able to write a simple event listener for a button click.
• Understand how to change an element’s innerHTML or style property.
• Practice debugging with console.log and breakpoints.
• Remember the basic syntax for functions and arrow functions.

Good luck! 🚀