JavaScript Flashcards

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

What is the JavaScript code to alert the remainder when 15 is divided by 9?

alert(15 % 9);

What assignment operator will result in x being 15 if x = 10 and y = 5?

x += y;

What assignment operator will result in x being 50 if x = 10 and y = 5?

x *= y;

What is the data type of the variable 'length' in the following code? let length = 16; // Number

Number Signup and view all the answers

What event makes an element turn red when someone moves the mouse over it?

onmouseover Signup and view all the answers

How do you escape characters to alert 'We are Vikings'?

We are "Vikings" Signup and view all the answers

What method would you use to convert text into uppercase?

toUpperCase() Signup and view all the answers

What JavaScript method is used to replace 'Hello' with 'Welcome' in a string?

txt.replace('Hello', 'Welcome') Signup and view all the answers

What does ESLint help with?

Detect coding errors and auto-cleanup Signup and view all the answers

What does Prettier do?

Helps clean up your formatting Signup and view all the answers

What symbol is used for a single-line comment in JavaScript?

// Signup and view all the answers

Where do you want to place a script tag in an HTML document?

Within the head Signup and view all the answers

What does it mean when we say JavaScript is an object-oriented language?

It means JavaScript is modeled around objects with properties and methods. Signup and view all the answers

What happens to the website when you write code in the browser console?

Impacts the current browser instance only. Signup and view all the answers

What is the natural environment for JavaScript?

The browser, server environments, and your computer. Signup and view all the answers

What is ECMAScript?

The specification describing how browsers should implement and interpret JavaScript. Signup and view all the answers

What is default behavior in JavaScript?

Browser stops rendering when JavaScript is encountered. Signup and view all the answers

What does the 'async' keyword do?

Browser downloads JavaScript in parallel while HTML renders. Signup and view all the answers

What does the 'defer' keyword do?

Browser downloads JavaScript in parallel while HTML renders, then defers execution. Signup and view all the answers

How do you load modules in JavaScript?

Define both modules within the header. Signup and view all the answers

When does the browser execute JavaScript?

When the script is encountered, or based on 'async' or 'defer' settings. Signup and view all the answers

What are methods in JavaScript?

Property-changing features (functions) inside objects. Signup and view all the answers

What is an object in JavaScript?

Something such as a constant {}. Signup and view all the answers

What are properties in JavaScript?

Name (key) and value (Everyday backpack) defined using key-value pairs. Signup and view all the answers

What does 'this' refer to in JavaScript?

This object right here. Signup and view all the answers

What is a constant in JavaScript?

Cannot assign a different value to a constant. Signup and view all the answers

What does console.log do?

Outputs the console object automatically. Signup and view all the answers

How do you access object properties?

backpack.name Signup and view all the answers

What does bracket notation allow?

Lets you place variable into the name. Signup and view all the answers

What is a parameter in JavaScript?

Piece of data you can pass to the function. Signup and view all the answers

What is a class in JavaScript?

Class keyword followed by a capitalized name. Signup and view all the answers

What is a class declaration in JavaScript?

class Name {} Signup and view all the answers

What is a class expression in JavaScript?

const Name = class {} Signup and view all the answers

What does the constructor method do?

Defines the parameters for each of the properties. Signup and view all the answers

What is the difference between class and object constructor functions?

Methods live inside the main constructor function. Signup and view all the answers

How do you get the current date and convert it into a string?

const rightNow = new Date(); rightNow.toDateString(); Signup and view all the answers

How do you find the age of an object in JavaScript?

Use the backpackAge() function. Signup and view all the answers

How do you access the property named in a variable in JavaScript?

myObject[propName] Signup and view all the answers

What is the code in the second line of an object called?

An object property with a property name and a property value. Signup and view all the answers

Why is it best practice to place objects inside constants?

To prevent accidental alteration or overwriting. Signup and view all the answers

Which object property names are not valid?

Lines 2, 3, 5, and 6. Signup and view all the answers

How do you access an object in JavaScript?

By naming its container. Signup and view all the answers

Can an object created from a class be given the same name as the class?

No. Signup and view all the answers

How do you define an object in JavaScript?

const myObject = { // Properties and methods go here.}; Signup and view all the answers

Where do you find official documentation for built-in objects?

The MDN Web Docs. Signup and view all the answers

How do you create a new object from a class?

Using the 'new' keyword. Signup and view all the answers

What is the established convention for formatting objects?

All properties and methods are listed on their own separate line. Signup and view all the answers

What is the difference between a function and a method?

A function is a stand-alone, while a method is within an object. Signup and view all the answers

Can you use arrow functions to create object methods?

No. Signup and view all the answers

When creating a class, are prototype methods added inside the constructor method?

False Signup and view all the answers

What is a template literal in JavaScript?

${everydayPack.volume} Signup and view all the answers

How to show the value of everydayPack.name?

Use template literals instead. Signup and view all the answers

How do you declare a JavaScript expression inside a template literal?

Using a dollar symbol followed by curly brackets. Signup and view all the answers

How do you select the main element using query selector?

document.querySelector('main') Signup and view all the answers

How to select the last name in the list using query selector?

document.querySelector('main li:last-child') Signup and view all the answers

How do you change all list items in the list to red?

document.querySelectorAll('main li').forEach(item => item.style.backgroundColor = 'red') Signup and view all the answers

How do you find the class name of an h1 element?

document.querySelector('h1').className Signup and view all the answers

How do you change the class name of an h1 element?

document.querySelector('h1').className = 'new-class' Signup and view all the answers

How do you add a new class using query selector?

document.querySelector('main li:first-child').classList.add('new-class') Signup and view all the answers

How do you remove a class using query selector?

document.querySelector('main li:first-child').classList.remove('new-class') Signup and view all the answers

How do you replace a class using query selector?

document.querySelector('main li:first-child').classList.replace('old-class', 'new-class') Signup and view all the answers

When should you use className?

If you want to look for a string and output. Signup and view all the answers

How to select the style of the .site-title?

document.querySelector('.site-title').style Signup and view all the answers

How to select the color of the .site-title?

document.querySelector('.site-title').style.color Signup and view all the answers

How to change the color of the .site-title?

document.querySelector('.site-title').style.color = 'red' Signup and view all the answers

How to get the property name of a style in .site-title?

document.querySelector('.site-title').style Signup and view all the answers

How to create a new element and append it to your document?

const newArticle = document.createElement('article'); main.append(newArticle); Signup and view all the answers

How to create a new element for a nav menu?

Use document.createElement and append to the desired parent. Signup and view all the answers

What method(s) would you use to check if an element has a specific ID?

element.hasAttribute() and element.setAttribute() methods. Signup and view all the answers

What is the difference between element.className and element.classList?

element.className returns a string, element.classList returns a DOMTokenList. Signup and view all the answers

What does the HTML markup of a new img element look like after the given script executes?

<img class='feat-img' src='logo.svg' alt='The company logo' style='display: block'> Signup and view all the answers

What is the value of const target after this code executes?

A node list containing each element object matching the query. Signup and view all the answers

What is the value after executing const target = document.getElementsByClassName('.note');?

An empty array-like HTMLCollection object. Signup and view all the answers

What kind of selectors do querySelector and querySelectorAll use?

A CSS selector string. Signup and view all the answers

What happens if you run this code: target.style.font-family = 'sans-serif';?

'Uncaught SyntaxError: Invalid left-hand side in assignment'. Signup and view all the answers

What does the element.classList.toggle() method do?

Adds or removes the specified class from the element. Signup and view all the answers

Where does the new element appear when using document.createElement?

At the point in the document where appended. Signup and view all the answers

What is the 'DOM'?

Document Object Model Signup and view all the answers

How do you add an element created using createElement() to the DOM?

Using append, prepend, or insertAdjacentElement methods. Signup and view all the answers

What is a variable in JavaScript?

Container with some piece of data. Signup and view all the answers

In the expression var name = piggy, what is 'piggy'?

The object. Signup and view all the answers

What does 'let' do in JavaScript?

Define a block-scoped local variable. Signup and view all the answers

When should you use 'const'?

When you want data that should not be overwritten. Signup and view all the answers

How to find the type of a variable in JavaScript?

Use the typeof operator. Signup and view all the answers

What is the difference between assignment and comparison operators?

= vs. == Signup and view all the answers

What is absolute equivalence in JavaScript?

=== both sides have to be exactly the same. Signup and view all the answers

How do you express 'a' to the power of 'b'?

a ** b Signup and view all the answers

How do you increment a number before or after output?

++a or a++ Signup and view all the answers

What does a single equals symbol in JavaScript indicate?

A value is assigned to the named variable. Signup and view all the answers

What happens if you use a named variable without first declaring it?

You access a global variable. Signup and view all the answers

What is the value of defaultColor after executing provided code?

"purple" Signup and view all the answers

How do you capture the result of a math equation like 42 * 38 in JavaScript?

Create a variable and set it equal to the math equation. Signup and view all the answers

How do you create a function to display 'Hello' in the inner HTML of an element with the ID 'demo'?

function myFunction() { document.getElementById('demo').innerHTML = 'Hello'; } Signup and view all the answers

In what scenario should you use var instead of let?

When you need a globally scoped variable. Signup and view all the answers

Which statement is true?

Object properties within a constant can be changed. Signup and view all the answers

Study Notes

JavaScript Basics

alert(15%9); alerts the remainder when 15 is divided by 9.
x += y; is an assignment operator resulting in x being 15, equivalent to x = x + y.
x *= y; assigns 50 to x, same as x = x * y.

Data Types and Variables

Use comments to document:
- let length = 16; // Number
- let lastName = "Johnson"; // string
- const x = { firstName: "John", lastName: "Doe" }; // object
onmouseover triggers when the mouse hovers over an element.
Escape characters allow for double quotes in strings: We are \"Vikings\".

String Methods

Convert text to uppercase using toUpperCase().

Replace substrings using:

let txt = "Hello World";
txt = txt.replace("Hello", "Welcome");

Code Quality Tools

ESLint: detects coding errors and requires Node.js.
Prettier: formats code cleanly and also requires Node.js.

Commenting

Single line comment syntax: //
Multi-line comment syntax: /* comment here */.

JavaScript Execution

Script tags are generally placed within the head for initial loading.
JavaScript is object-oriented, modeled around objects with properties and methods.
Browser console code affects only the current session and is lost upon refresh.

ECMAScript and Browser Behavior

ECMAScript: specification for JavaScript's implementation in browsers.
Default JavaScript behavior can block rendering until execution is complete (content blocking).
async downloads scripts in parallel with HTML, while defer ensures scripts only execute after HTML parsing completion.

Object-Oriented Programming

To create and use classes in JavaScript, declare with class ClassName {}.
Constructors define properties and methods for class instances.
Methods are functions within objects; functions are standalone.

Working With Objects

Object properties are accessed using dot notation (e.g., backpack.name) or bracket notation (e.g., backpack["pocketNum"]).
Constants hold values that cannot be reassigned after initialization.
A variable created from a class cannot have the same name as the class itself to avoid conflicts.

The Document Object Model (DOM)

DOM represents the structure of an HTML document as objects; can be manipulated using methods like document.createElement().
Use document.querySelector() to select elements using CSS selectors.
Element manipulation involves adding, removing, or replacing classes and elements through properties like classList.

Creating and Modifying Elements

To create and append new elements:

const newArticle = document.createElement("article");
main.append(newArticle);

Use appendChild() or insertAdjacentElement() to add elements to the DOM.

Data Types and Operators

Use typeof to determine variable types.
Assignment vs comparison: = for assignment, == for equality check, === for strict equality.
Increment numbers with ++a or a++.

Array Manipulation

Add items to an array with collection[collection.length] = "new item" or backpackContents.push("pencil", 5).

Best Practices

Keep object definitions within constants to prevent unintentional alterations.
Use let or const for variable declarations to ensure scope is maintained.
Object properties in constants can be modified but the reference itself cannot be changed.

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Description

Test your knowledge of JavaScript through interactive flashcards. Each card covers essential concepts such as operators, alerts, and comments. Perfect for students looking to strengthen their programming skills in JavaScript.