Course outline
Module 1
Module 1: What JavaScript Is and Why It Matters
What JavaScript Is and Why It Matters
Knowledge check
Q1. What is JavaScript primarily used for?
- A. Styling the layout and colors of printed documents
- B. Making web pages interactive and dynamic ✓
- C. Storing large amounts of data in databases
- D. Designing hardware circuits for computers
Why: JavaScript is a programming language that runs in web browsers to make pages respond to user actions, such as clicking buttons, filling forms, or updating content without reloading the page.
Q2. Which three technologies typically work together to build a web page?
- A. HTML, CSS, and JavaScript ✓
- B. Python, Java, and C++
- C. SQL, PHP, and Ruby
- D. Photoshop, Excel, and Word
Why: HTML provides the structure and content, CSS controls the visual styling, and JavaScript adds behavior and interactivity. Together they form the foundation of most websites.
Q3. Where does JavaScript code usually run when a user visits a website?
- A. On a distant server only, never on the user's device
- B. Inside the user's web browser ✓
- C. Inside the printer connected to the computer
- D. Inside the operating system's file manager
Why: Browsers include a JavaScript engine that executes the code on the user's device. This is why interactive features can respond instantly to clicks and typing.
Q4. Despite its name, how is JavaScript related to Java?
- A. JavaScript is an older version of Java
- B. They are the same language with different names
- C. They are separate languages with no direct relationship beyond a similar name ✓
- D. JavaScript is a compiled subset of Java
Why: JavaScript and Java are entirely different languages. The similar name was a marketing decision made in the 1990s, and the two differ greatly in syntax, purpose, and design.
Q5. Why does JavaScript matter for people who are not professional developers?
- A. It is required to send email from any device
- B. It powers many everyday features on websites and apps, so understanding it helps you grasp how digital products work ✓
- C. It is only used by governments and is not relevant to businesses
- D. It replaces the need for any other software tools
Why: JavaScript underlies a large share of the web experiences people use daily. Even non-developers benefit from understanding its role when working with designers, product teams, or evaluating digital tools.
Module 2
Module 2: How Websites Use JavaScript Behind the Scenes
How Websites Use JavaScript Behind the Scenes
Knowledge check
Q1. What is the main role of JavaScript on a website?
- A. To store all of the website's images and videos
- B. To make web pages interactive and respond to user actions ✓
- C. To define the physical server where the website is hosted
- D. To encrypt passwords sent over the internet
Why: JavaScript runs in the browser and allows pages to respond to clicks, typing, and other actions, making them interactive rather than static.
Q2. Which of these is the best everyday example of JavaScript at work on a website?
- A. A photo gallery that loads a new image without refreshing the whole page ✓
- B. A domain name registered with a registrar
- C. The color of the text set in a stylesheet
- D. A file download stored on a hard drive
Why: Updating part of a page without a full reload is a classic JavaScript behavior, while the other options relate to domains, styling, or files rather than scripted behavior.
Q3. Where does most JavaScript code on a typical website run?
- A. On the user's web browser ✓
- B. Inside the user's printer
- C. Only on the company's email server
- D. Inside the internet router
Why: Most JavaScript is downloaded with the web page and executed by the visitor's browser, which is why it can react instantly to what the user does.
Q4. What does it mean when a page 'updates dynamically'?
- A. The page content changes based on user actions or data, often without reloading ✓
- B. The website permanently changes its address
- C. The page is printed automatically
- D. The browser is updated to a newer version
Why: Dynamic updates mean the content changes in response to interaction or new data, commonly powered by JavaScript running behind the scenes.
Q5. Why do websites often use JavaScript to check a form before submitting it?
- A. To give immediate feedback, such as flagging a missing email address ✓
- B. To permanently delete the user's account
- C. To change the website's hosting provider
- D. To increase the size of the page's fonts
Why: JavaScript can validate form inputs right in the browser, catching errors instantly and saving the user from waiting for a server response.
Module 3
Module 3: Variables: Storing Information Simply
Variables: Storing Information Simply
Knowledge check
Q1. What is a variable in JavaScript?
- A. A fixed value that can never change
- B. A named container that stores a piece of information ✓
- C. A type of loop that repeats code
- D. A message shown to the user on a web page
Why: A variable is a named container that holds a value, such as a number, text, or true/false. The name lets you refer back to that information later in your code.
Q2. Which keyword is commonly used to create a new variable in modern JavaScript?
- A. make
- B. create
- C. let ✓
- D. store
Why: The keyword 'let' is used to declare a variable whose value can be changed later. For example: let score = 10;
Q3. Given the code let age = 25; what is the value stored in the variable 'age'?
- A. age
- B. let
- C. 25 ✓
- D. The word 'value'
Why: The variable 'age' stores the number 25. The name 'age' is the label you use to access the stored value.
Q4. Which of these is the best reason to use a variable instead of typing a value directly into your code?
- A. Variables make the code run faster in every case
- B. Variables let you store information once and reuse or change it easily in many places ✓
- C. Variables are required for every line of JavaScript
- D. Variables automatically display content on the screen
Why: Storing a value in a variable lets you reuse it in several places and update it in one spot, instead of editing every occurrence of the same hard-coded value.
Q5. After running let color = 'blue'; and then color = 'green';, what is the value of 'color'?
- A. blue
- B. green ✓
- C. blue and green together
- D. An error always occurs
Why: Variables declared with 'let' can be reassigned. The second line replaces the old value 'blue' with 'green', so the current value is 'green'.
Module 4
Module 4: Making Decisions: Conditions and Choices
Making Decisions: Conditions and Choices
Knowledge check
Q1. In JavaScript, which keyword is used to run a block of code only when a condition is true?
- A. when
- B. if ✓
- C. check
- D. while
Why: The 'if' keyword checks a condition and runs the code inside its block only when that condition evaluates to true.
Q2. What will the following code print? let age = 20; if (age >= 18) { console.log('Adult'); } else { console.log('Minor'); }
- A. Minor
- B. Adult ✓
- C. Nothing is printed
- D. An error occurs
Why: Since 20 is greater than or equal to 18, the condition is true, so the code inside the if block runs and prints 'Adult'.
Q3. Which operator checks whether two values are equal in value AND type?
- A. =
- B. ==
- C. === ✓
- D. !=
Why: The strict equality operator (===) checks both value and type, so 5 === '5' evaluates to false, while the loose operator (==) would return true.
Q4. What does the 'else' part of an if-else statement do?
- A. It runs before the if condition is checked
- B. It runs when the if condition is false ✓
- C. It always runs along with the if block
- D. It repeats the if block until the condition is true
Why: The 'else' block provides an alternative: it runs only when the if condition evaluates to false.
Q5. Which logical operator returns true only when BOTH conditions are true?
Why: The AND operator (&&) returns true only when both conditions on either side are true; the OR operator (||) needs just one to be true.
Module 5
Module 5: Repeating Tasks with Loops
Repeating Tasks with Loops
Knowledge check
Q1. What is the main purpose of a loop in JavaScript?
- A. To store multiple values in a single variable
- B. To repeat a block of code multiple times ✓
- C. To define a reusable function
- D. To compare two values and choose a path
Why: A loop lets you repeat a block of code multiple times without writing the same instructions over and over. Storing values is the job of variables or arrays, and comparing values is done with conditionals like if statements.
Q2. Which keyword is used to create a for loop that runs a fixed number of times?
- A. repeat
- B. loop
- C. for ✓
- D. each
Why: The for keyword starts a for loop, which is commonly used when you know in advance how many times you want the code to run. 'repeat' and 'loop' are not built-in JavaScript keywords for this purpose.
Q3. In the loop 'for (let i = 0; i < 3; i++)', how many times will the loop body run?
- A. 2 times
- B. 3 times ✓
- C. 4 times
- D. 0 times
Why: The counter i starts at 0 and the loop continues while i is less than 3. It runs when i is 0, 1, and 2, so the body executes 3 times. Counting starts at zero, which is a common source of confusion for beginners.
Q4. What does a while loop do?
- A. It runs exactly once and then stops
- B. It runs the code block as long as a condition remains true ✓
- C. It runs forever no matter what
- D. It only runs if the condition is false at the start
Why: A while loop checks a condition before each repetition and keeps running the code block as long as that condition is true. Once the condition becomes false, the loop stops. It is not guaranteed to run once, and it can run forever only if the condition never becomes false.
Q5. What happens if you forget to update the variable controlling a while loop?
- A. JavaScript automatically fixes the loop
- B. The loop stops after one repetition
- C. The condition may never become false, causing an infinite loop ✓
- D. JavaScript throws a syntax error before running
Why: If the variable in the condition never changes, the condition stays true and the loop keeps running forever, which is called an infinite loop. This can freeze a browser tab or program. JavaScript does not automatically correct this, and it is a logic error rather than a syntax error.
Module 6
Module 6: Responding to Clicks and User Actions
Responding to Clicks and User Actions
Knowledge check
Q1. In web development, what is a 'click event'?
- A. A sound a mouse makes when pressed
- B. A signal the browser sends when a user clicks an element, which JavaScript can listen for and respond to ✓
- C. A type of website hosting service
- D. A command that deletes a web page
Why: A click event is a notification the browser creates when a user clicks something. JavaScript can 'listen' for this event and run code in response, such as showing a message or changing the page.
Q2. Which term describes the code that runs in response to a user action like a click?
- A. A variable
- B. A comment
- C. An event handler ✓
- D. A style sheet
Why: An event handler is a function that is assigned to run when a specific event, such as a click, happens. It 'handles' the event by defining what the page should do.
Q3. Why do developers use 'addEventListener' in JavaScript?
- A. To change the color of a button permanently
- B. To connect a function to an element so it runs when a specific event occurs ✓
- C. To load images faster
- D. To create a new web browser
Why: addEventListener attaches a function to an element and tells the browser to run that function when a chosen event, like a click, happens. It is the standard way to respond to user actions.
Q4. A user clicks a button on a website, but nothing happens. What is the most likely reason if the developer forgot to set up the response?
- A. The button is too small
- B. The browser has no event listener attached to that button ✓
- C. The user's mouse is broken
- D. JavaScript cannot display text
Why: Clicking alone does nothing unless code has been set up to listen for that click. Without an event listener connected to the button, the browser has no instructions to follow.
Q5. In the sentence 'When the button is clicked, show a welcome message,' what part is the event?
- A. Show a welcome message
- B. The button
- C. When the button is clicked ✓
- D. Welcome
Why: The event is the trigger, here the click. The action, showing the message, is what the code does in response. Identifying the event first helps you understand what starts the code.
Module 7
Module 7: Putting It Together: Understanding a Simple Web App
Putting It Together: Understanding a Simple Web App
Knowledge check
Q1. In a simple web app, which part is primarily responsible for the structure and content of the page, such as headings, paragraphs, and buttons?
- A. CSS
- B. HTML ✓
- C. JavaScript
- D. A database
Why: HTML defines the structure and content of a web page, such as headings, paragraphs, and buttons. CSS controls appearance, and JavaScript adds behavior and interactivity.
Q2. What is the main role of CSS in a web app?
- A. To store user data permanently
- B. To control the visual appearance, such as colors, fonts, and layout ✓
- C. To respond to button clicks with new actions
- D. To send emails to the server
Why: CSS (Cascading Style Sheets) controls how the page looks, including colors, fonts, spacing, and layout. It does not handle data storage or the logic that responds to user actions.
Q3. If a user clicks a 'Add to Cart' button and the item count on the page updates immediately, which technology is most likely making that change happen?
- A. HTML alone
- B. CSS alone
- C. JavaScript ✓
- D. A printer driver
Why: JavaScript runs in the browser and can respond to events like clicks by changing the content of the page. HTML only describes static structure, and CSS only styles it.
Q4. In a simple JavaScript-powered web app, what does an 'event' typically refer to?
- A. A scheduled calendar reminder
- B. An action or occurrence, such as a click, key press, or page load, that the code can respond to ✓
- C. A type of CSS color
- D. A saved file on the server
Why: An event is something that happens in the browser, such as a user clicking a button, typing in a field, or the page finishing loading. JavaScript can listen for these events and run code in response.
Q5. Why is it helpful to think of a simple web app as having separate parts for structure, style, and behavior?
- A. It makes the page load without an internet connection
- B. It means you never need to write any code
- C. It makes each part easier to understand, change, and troubleshoot independently ✓
- D. It guarantees the app will never have bugs
Why: Separating structure (HTML), style (CSS), and behavior (JavaScript) makes a web app easier to understand and maintain, because you can change one layer without disrupting the others. It does not remove the need for code or eliminate bugs.