JavaScript is what makes pages do things. Skip the textbook and go straight to clicks, events, and the debugging loop that makes the language learnable.
btn.addEventListener('click', show)
HTML = structure. CSS = style. JavaScript = behavior. It's the code that runs when you click a button, submit a form, or see a notification pop up. If the page does something in response to what you do :: that's JavaScript.
JavaScript can read and change anything on the page. It watches for events (clicks, typing, scrolling), runs code when they happen, and updates what you see. That's the entire model.
// Find a button and watch for clicks document.getElementById('myButton').addEventListener('click', function() { // This runs when the button is clicked alert('You clicked it!'); });
An "event" is anything the user does :: click, type, hover, scroll. JavaScript can listen for any event and run code when it happens. The most common: click.
IDs are like name tags. <button id="myBtn">Click me</button>. The ID is how JavaScript finds the element.
document.getElementById('myBtn') finds your button. .addEventListener('click', function() {...}) watches it for clicks.
Anything between the curly braces { } runs when the event fires. Change text, show/hide things, update a counter :: anything.
<!-- HTML --> <button id="scoreBtn">Add Point</button> <p id="score">Score: 0</p> /* JavaScript */ let count = 0; document.getElementById('scoreBtn').addEventListener('click', function() { count = count + 1; document.getElementById('score').textContent = 'Score: ' + count; });
Paste any JavaScript line into Claude and ask "Explain this to me like I'm a beginner." This is the fastest way to build your JavaScript vocabulary. Do it constantly.
One of the most common things JavaScript does: showing or hiding parts of a page based on what you click. This is the foundation of tabs, accordions, modals, and menus.
// Show/hide a section when button is clicked document.getElementById('toggleBtn').addEventListener('click', function() { const section = document.getElementById('hiddenSection'); if (section.style.display === 'none') { section.style.display = 'block'; // show it } else { section.style.display = 'none'; // hide it } });
The goal this section isn't to memorize JavaScript. It's to understand the pattern: find element → listen for event → run code that changes something. Claude handles the syntax. You handle the logic.
Code breaks. Always. The skill isn't avoiding errors :: it's knowing how to find and fix them fast. Your two debugging tools: the browser Console and Claude.
Right-click → Inspect → Console tab. This shows JavaScript errors in red. Every error message tells you which file, which line, and what went wrong.
Don't try to interpret it yourself yet. Copy the red error text.
Claude will tell you exactly what's wrong and show you the fix. Do this every time.
My JavaScript isn't working. Here's the error from the Console: [paste the red error message] Here's my full code: [paste HTML and JS] What's wrong and how do I fix it?
Put JavaScript into practice by building a simple trivia quiz. Use Claude to generate the logic, then customize the questions.
Build me a JavaScript quiz page about [your topic]. 5 multiple choice questions, 4 options each. When I click an answer: highlight it green if correct, red if wrong. Show my running score at the top. At the end, show my total score and a Restart button. Keep the code clean and commented :: I'm a beginner learning JS.