CS: JavaScript: Variables, Functions, and Events
Practice reading and writing beginner JavaScript code
CS: JavaScript: Variables, Functions, and Events
Practice reading and writing beginner JavaScript code
CS - Grade 6-8
- 1
A student writes this code: let score = 10; score = score + 5; What is the value of score after the code runs? Explain why.
Work through the code one line at a time.
The value of score is 15. The variable starts at 10, and then 5 is added to the current value. - 2
Write one line of JavaScript that creates a variable named playerName and stores the text value Maya in it.
One correct answer is let playerName = "Maya";. This creates a variable named playerName and stores the text value Maya. - 3
Look at this code: const birthYear = 2011; birthYear = 2012; Why would this code cause an error?
Think about the difference between let and const.
This code causes an error because birthYear was created with const. A const variable cannot be reassigned after it is given a value. - 4
Write a JavaScript function named sayHello that displays the message Hello, coder! in the console when it is called.
One correct answer is function sayHello() { console.log("Hello, coder!"); }. This defines a function named sayHello that prints the message to the console. - 5
A function is shown below: function doubleNumber(number) { return number * 2; } What does doubleNumber(7) return? Explain how you know.
Replace the parameter name with the argument value.
doubleNumber(7) returns 14. The value 7 is used for number, and the function returns 7 times 2. - 6
Match each JavaScript term to its meaning: variable, function, event. Use each term once. A. A named set of instructions that can be reused. B. A named place to store a value. C. Something that happens, such as a click or key press.
Variable matches B because it stores a value. Function matches A because it is a reusable set of instructions. Event matches C because it is something that happens, such as a click. - 7
A web page has a button with the id colorButton. Write JavaScript code that listens for a click on the button and then prints Button clicked! to the console.
Use getElementById, addEventListener, and the click event.
One correct answer is document.getElementById("colorButton").addEventListener("click", function() { console.log("Button clicked!"); });. This code finds the button, listens for a click, and runs the function when the click happens. - 8
Read the code: let clicks = 0; function countClick() { clicks = clicks + 1; } countClick(); countClick(); What is the value of clicks after the code runs?
The value of clicks is 2. The variable starts at 0, and the function adds 1 each time it is called, so two calls make the value 2. - 9
A student wants the heading with id title to change to Welcome! when a button is clicked. Fill in the missing line inside the function: function changeTitle() { ______________________________ }
Use textContent to change the words shown on the page.
One correct answer is document.getElementById("title").textContent = "Welcome!";. This finds the heading with the id title and changes its text to Welcome!. - 10
Explain the difference between a parameter and an argument using this example: function greet(name) { console.log("Hi, " + name); } greet("Lena");
The parameter is in the function definition, and the argument is in the function call.
In this example, name is the parameter because it is the placeholder in the function definition. Lena is the argument because it is the actual value sent into the function when it is called. - 11
Find and correct the mistake in this code: let total = 3; function addTwo() { total + 2; } addTwo(); The student expects total to become 5.
The mistake is that total + 2 does not save the new value. A corrected version is function addTwo() { total = total + 2; }. After addTwo is called, total becomes 5. - 12
Plan a small interactive web feature. Describe one variable, one function, and one event you would use for a button that keeps track of how many times it has been clicked.
Think about what needs to be stored, what action should happen, and what user event starts the action.
One possible plan is to use a variable named clickCount to store the number of clicks. A function named updateCount could add 1 to clickCount and display the new number. A click event on the button would run updateCount each time the button is pressed.