Unit 5 Flashcards
What is JavaScript primarily used for in web development?
A. Styling pages
B. Structuring content
C. Adding interactivity and dynamic content
D. Creating database schemas
Answer: C
Which of the following tags is used to write JavaScript code in HTML?
A. <.js.>
B. <.javascript.>
C. <.script.>
D. <.code.>
Answer: C
Where is the best place to place a
tag for performance?
A. In the <head> tag
B. Right after the opening <html>
C. At the end of the <body>
D. Inside a <style> block</style>
Answer: C
Which attribute allows you to defer loading of JavaScript until the page finishes parsing?
A. type=”module”
B. defer
C. delay
D. buffer
Answer: B
What is a JavaScript module?
A. A compressed CSS file
B. A reusable HTML block
C. A file using import and export to organize code
D. A built-in browser object
Answer: C
What is the difference between default and named exports in JavaScript modules?
A. Default exports can only export arrays
B. Named exports are slower
C. Default exports allow one main export; named allows multiple
D. There is no difference
Answer: C
Which of the following is a correct arrow function syntax for adding two numbers?
A. let add = (a, b) => { return a + b; };
B. function add(a, b) => a + b;
C. add(a, b) = a + b =>
D. let add = function => (a, b) { return a + b; }
Answer: A
What keyword refers to the current object context in traditional JS functions?
A. that
B. self
C. this
D. context
Answer: C
What is the key difference in this between arrow functions and regular functions?
A. Arrow functions create a new this context
B. Arrow functions use the surrounding scope’s this
C. Regular functions don’t support this
D. Arrow functions always return undefined
Answer: B
What does the following code return?
((name) => ‘Hi ‘ + name)(‘Jess’);
```
A. "Hi"
B. "name"
C. "Hi Jess"
D. undefined
Answer: C
What will this arrow function return?
js
((name) => { return 'Hi ' + name })('Jess');
A.
undefinedB.
'Hi Jess'C.
Hi nameD. A syntax error
Answer: B
What does users.map(user => user.age) return if users is an array of user objects?
A. A single user’s age
B. A list of names
C. A new array of all user ages
D. A new object with age as a key
Answer: C
What does the reduce() method do?
A. Multiplies all elements
B. Converts a string to lowercase
C. Combines all values in an array into a single value
D. Removes the first item in an array
Answer: C
What is a callback function?
A. A function called after a variable is defined
B. A variable passed into a method
C. A function passed to another function to be executed later
D. A hidden JavaScript file
Answer: C
Which of the following is an example of a higher-order function?
A. parseInt()
B. alert()
C. map()
D. toString()
Answer: C
What will this code output?
const obj = {
value: 42,
getValue: () => this.value
};
console.log(obj.getValue());
~~~
A. 42
B. undefined
C. this
D. Throws an error
Answer: B
What does the following code return?
```js
const arr = [[1, 2], [3, 4], [5, 6]];
const flat = arr.reduce((a, b) => a.concat(b), []);
console.log(flat);
~~~
A. [[1, 2], [3, 4], [5, 6]]
B. undefined
C. [1, 2, 3, 4, 5, 6]
D. [1, 3, 5]
Answer: C
Why is the following arrow function problematic?
```js
Array.prototype.first = () => this[0];
const arr = [10, 20, 30];
console.log(arr.first());
~~~
A. It throws a syntax error
B. Arrow functions can’t access array methods
C. this refers to the wrong context inside arrow functions
D. Arrow functions can’t return values
Answer: C
In the DOM, what is the difference between a method and a property?
A. Properties are always strings, methods are numbers
B. A method performs actions; a property stores values
C. Methods can’t be used with objects
D. There is no difference
Answer: B
What does document.querySelector() return?
A. All elements matching a selector
B. A live NodeList
C. The first element matching a CSS selector
D. A string of class names
Answer: C
Which of these returns a list of all elements matching a class name?
A. getElementById()
B. querySelector()
C. getElementsByClassName()
D. querySelectorAll(“#id”)
Answer: C
Which property lets you change the contents of an HTML element, including child tags?
A. .textContent
B. .innerText
C. .innerHTML
D. .value
Answer: C
What is the difference between .textContent and .innerHTML?
A. They both do the same thing
B. .textContent includes HTML tags
C. .innerHTML escapes special characters
D. .textContent sets text only, ignoring HTML tags
Answer: D
What method would you use to add a new class to an element’s class list?
A. .classList.add()
B. .addClass()
C. .class()
D. .style.addClass()
Answer: A
What does the following code do?
element.setAttribute(‘id’, ‘newId’);
~~~
A. Adds a new class
B. Deletes an element
C. Sets or changes the element’s id
D. Renames the element
Answer: C
Which method allows you to insert a new DOM element into a page?
A. appendChild()
B. removeChild()
C. replaceHTML()
D. appendStyle()
Answer: A
What is the purpose of addEventListener() in JavaScript?
A. Attaches styles to elements
B. Creates a form field
C. Registers a function to run when a specific event occurs
D. Prevents form submission
Answer: C
Which event type is triggered when a text field changes?
A. keyup
B. change
C. input
D. click
Answer: C
Which of the following is not a valid DOM event?
A. onresize
B. onlaunch
C. onclick
D. onmouseover
Answer: B
What does the following event listener do?
js
button.addEventListener('click', () => alert('Clicked!'));
A. Submits a form
B. Logs button ID
C. Shows a popup when the button is clicked
D. Changes button color
Answer: C
Why is using addEventListener() preferred over inline onclick="..."?
A. Inline JS loads faster
B. addEventListener() separates structure and logic
C. Inline JS doesn’t work in modern browsers
D. It’s the only way to handle events
Answer: B
Which code ensures focus moves to the next input box after typing 2 characters?
A. if (input.length == 2) { next.focus(); }
B. input.value.length == 2 => focus(next);
C. input.addEvent('focus', nextBox);
D. focus(input).when(full)
Answer: A
In the Message Printer lab, how is the hidden output box shown after input?
A. display = true
B. output.style.display = block;
C. outputBox.hidden = false;
D. show(outputBox)
Answer: C
