JavaScript Flashcards by andy chen

JAVASCRIPT-PRIMITIVES-AND-VARIABLES

What is the purpose of variables?

to store data for the computers to use in the future

How well did you know this?

Not at all

Perfectly

JAVASCRIPT-PRIMITIVES-AND-VARIABLES

How do you declare a variable?

use a keyword (var, let, const) and variable name and =

How well did you know this?

Not at all

Perfectly

JAVASCRIPT-PRIMITIVES-AND-VARIABLES

How do you initialize (assign a value to) a variable?

use an equal sign

How well did you know this?

Not at all

Perfectly

JAVASCRIPT-PRIMITIVES-AND-VARIABLES

What characters are allowed in variable names?

letter, numbers, $, underscore,

numbers cant be first

How well did you know this?

Not at all

Perfectly

JAVASCRIPT-PRIMITIVES-AND-VARIABLES

What does it mean to say that variable names are “case sensitive”?

Car= and car= are different variables

How well did you know this?

Not at all

Perfectly

JAVASCRIPT-PRIMITIVES-AND-VARIABLES

What is the purpose of a string?

for storing text that wouldn’t make sense to JavaScript

How well did you know this?

Not at all

Perfectly

JAVASCRIPT-PRIMITIVES-AND-VARIABLES

What is the purpose of a number?

for doing calculations

if the number is a zipcode then store as string

How well did you know this?

Not at all

Perfectly

JAVASCRIPT-PRIMITIVES-AND-VARIABLES

What is the purpose of a boolean?

it is for letting computers make a decision that is true or false

How well did you know this?

Not at all

Perfectly

JAVASCRIPT-PRIMITIVES-AND-VARIABLES

What does the = operator mean in JavaScript?

assignment operator

How well did you know this?

Not at all

Perfectly

JAVASCRIPT-PRIMITIVES-AND-VARIABLES

How do you update the value of a variable?

by assigning a new value to the variable name without the keyword.

let a = 2; for declaring a variable
a = 5; for updating a variable (no need for keyword)

How well did you know this?

Not at all

Perfectly

JAVASCRIPT-PRIMITIVES-AND-VARIABLES

What is the difference between null and undefined?

null is absents of value intentionally (ex: optional user input)
undefined is not trustworthy

How well did you know this?

Not at all

Perfectly

JAVASCRIPT-PRIMITIVES-AND-VARIABLES

Why is it a good habit to include “labels” when you log values to the browser console?

to know where you’re getting values from. for organization purposes

How well did you know this?

Not at all

Perfectly

JAVASCRIPT-PRIMITIVES-AND-VARIABLES

Give five examples of JavaScript primitives.

string, number, boolean, null, and undefined

How well did you know this?

Not at all

Perfectly

JAVASCRIPT-OPERATORS-AND-EXPRESSIONS

What data type is returned by an arithmetic operation?

a number data

How well did you know this?

Not at all

Perfectly

JAVASCRIPT-OPERATORS-AND-EXPRESSIONS

What is string concatenation?

glueing strings together

How well did you know this?

Not at all

Perfectly

JAVASCRIPT-OPERATORS-AND-EXPRESSIONS

What purpose(s) does the + plus operator serve in JavaScript?

addition of numbers and concatination if strings

How well did you know this?

Not at all

Perfectly

JAVASCRIPT-OPERATORS-AND-EXPRESSIONS

What data type is returned by comparing two values (, ===, etc)?

booleans

How well did you know this?

Not at all

Perfectly

JAVASCRIPT-OPERATORS-AND-EXPRESSIONS

What does the += “plus-equals” operator do?

left operand = left operand + right operand

How well did you know this?

Not at all

Perfectly

JAVASCRIPT-OBJECTS

What are objects used for?

to group together data that can represent something

How well did you know this?

Not at all

Perfectly

JAVASCRIPT-OBJECTS

What are object properties?

variables that is glued to an object

How well did you know this?

Not at all

Perfectly

JAVASCRIPT-OBJECTS

Describe object literal notation.

var obj = { properties: value }

How well did you know this?

Not at all

Perfectly

JAVASCRIPT-OBJECTS

How do you remove a property from an object?

use the delete as ex: delete object.property or delete object[‘property’]

How well did you know this?

Not at all

Perfectly

JAVASCRIPT-OBJECTS

What are the two ways to get or update the value of a property?

dot notation or bracket notation

How well did you know this?

Not at all

Perfectly

JAVASCRIPT-ARRAYS

What are arrays used for?

storing values in a grouped list like a grocery list where orders are not essential

How well did you know this?

Not at all

Perfectly

JAVASCRIPT-ARRAYS Describe array literal notation.

var variable = [ ]

JAVASCRIPT-ARRAYS How are arrays different from "plain" objects?

objects have individual assigned properties but arrays have automatic number indexes assigned

JAVASCRIPT-ARRAYS What number represents the first index of an array?

JAVASCRIPT-ARRAYS What is the length property of an array?

to find the length of an array

JAVASCRIPT-ARRAYS How do you calculate the last index of an array?

array.length - 1

JAVASCRIPT-FUNCTION What is a function in JavaScript?

a reusable block of code

JAVASCRIPT-FUNCTION Describe the parts of a function definition.

keyword, optional name, optional number of parameters, code, return

JAVASCRIPT-FUNCTION Describe the parts of a function call.

name, ( ) and arguments

JAVASCRIPT-FUNCTION When comparing them side-by-side, what are the differences between a function call and a function definition?

function call doesnt have keyword function and uses ( ) to call the function

JAVASCRIPT-FUNCTION What is the difference between a parameter and an argument?

``` parameter = placeholder for potential value argument = actual value being placed in the argument ```

JAVASCRIPT-FUNCTION Why are function parameters useful?

pass information to a function, to be able to reuse the function code block

JAVASCRIPT-FUNCTION What two effects does a return statement have on the behavior of a function?

``` 1. will replace the function called in that line of code. ex: function(3) = 10 var x = function(3) will become var x = 10 ``` 2. stops the function entirely once a value is returned

JAVASCRIPT-METHODS Why do we log things to the console?

to debug our code, to check if our output is as expected, etc

JAVASCRIPT-METHODS What is a method?

function that is a property of an object

JAVASCRIPT-METHODS How is a method different from any other function?

methods have to be called on an object, functions do not

JAVASCRIPT-METHODS How do you remove the last element from an array?

pop( )

JAVASCRIPT-METHODS How do you round a number down to the nearest integer?

Math.floor( )

JAVASCRIPT-METHODS How do you generate a random number?

Math.random( )

JAVASCRIPT-METHODS How do you delete an element from an array?

pop for last item, shift for first item, splice for specific index

JAVASCRIPT-METHODS How do you append (to the end) an element to an array?

push

JAVASCRIPT-METHODS How do you break a string up into an array?

split(' ')

JAVASCRIPT-METHODS Do string methods change the original string? How would you check if you weren't sure?

does not change the original string. to check: console.log( )

JAVASCRIPT-METHODS Roughly how many string methods are there according to the MDN Web docs?

like 50

JAVASCRIPT-METHODS Is the return value of a function or method useful in every situation?

JAVASCRIPT-METHODS Roughly how many array methods are there according to the MDN Web docs?

a lot

JAVASCRIPT-METHODS What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?

MDN

JAVASCRIPT-IF Give 6 examples of comparison operators.

greater than equal, greater than, less than equal, less than, ==, ===

JAVASCRIPT-IF What data type do comparison expressions evaluate to?

boolean, true or false

JAVASCRIPT-IF What is the purpose of an if statement?

to let the computer make a decision based on conditions

JAVASCRIPT-IF Is else required in order to use an if statement?

JAVASCRIPT-IF Describe the syntax (structure) of an if statement.

if (conditions) { } else { }

JAVASCRIPT-IF What are the three logical operators?

&& and || and !

JAVASCRIPT-IF How do you compare two different expressions in the same condition?

&& or ||

JAVASCRIPT-LOOPS What is the purpose of a loop?

to continuously iterate through a code block until the condition is met

JAVASCRIPT-LOOPS What is the purpose of a condition expression in a loop?

to know when to stop the loop

JAVASCRIPT-LOOPS What does "iteration" mean in the context of loops?

iteration = looping through once

JAVASCRIPT-LOOPS When does the condition expression of a while loop get evaluated?

at the start of every loop

JAVASCRIPT-LOOPS When does the initialization expression of a for loop get evaluated?

before the loop begins and only once

JAVASCRIPT-LOOPS When does the condition expression of a for loop get evaluated?

before each iteration

JAVASCRIPT-LOOPS When does the final expression of a for loop get evaluated?

after each iteration

JAVASCRIPT-LOOPS Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?

break

JAVASCRIPT-LOOPS What does the ++ increment operator do?

increments by 1

JAVASCRIPT-LOOPS How do you iterate through the keys of an object?

for in loop

DOM-QUERYING Why do we log things to the console?

to see what we're doing and for debugging

DOM-QUERYING What is a "model"?

a representation of something

DOM-QUERYING Which "document" is being referred to in the phrase Document Object Model?

the html document

DOM-QUERYING What is the word "object" referring to in the phrase Document Object Model?

data type

DOM-QUERYING What is a DOM Tree?

representative chunk of the page that shows the element and their element's configuration DOM = model that represents an html document in the form of javascript data types

DOM-QUERYING Give two examples of document methods that retrieve a single element from the DOM.

document. querySelector( ) | document. getElementById( )

DOM-QUERYING Give one example of a document method that retrieves multiple elements from the DOM at once.

document.querySelectorAll( )

DOM-QUERYING Why might you want to assign the return value of a DOM query to a variable?

to be able to use it again in the future

DOM-QUERYING What console method allows you to inspect the properties of a DOM element object?

console.dir( )

DOM-QUERYING Why would a tag need to be placed at the bottom of the HTML content instead of at the top?

html loads from top to bottom and the elements need to load first

DOM-QUERYING What does document.querySelector() take as its argument and what does it return?

a css selector and returns first one that matches

DOM-QUERYING What does document.querySelectorAll() take as its argument and what does it return?

a css selector and returns a NodeList

DOM-EVENTS Why do we log things to the console?

in this exercise, to debug and check if action happened

DOM-EVENTS What is the purpose of events and event handling?

- something that happens | - to set up a list of action whenever an event occurs

DOM-EVENTS Are all possible parameters required to use a JavaScript method or function?

no, 3rd parameter of addEventListener is optional

DOM-EVENTS What method of element objects lets you set up a function to be called when a specific type of event occurs?

addEventListener

DOM-EVENTS What is a callback function?

a function that is called as an argument in another function

DOM-EVENTS What object is passed into an event listener callback when the event fires?

- object that is built in the moment as a reference of data

DOM-EVENTS What is the event.target? If you weren't sure, how would you check? Where could you get more information about it?

- the button that you interact with - target = the dom element where the event originated from - console.log(event.target); - in the browser's console

DOM-EVENTS What is the difference between these two snippets of code? element. addEventListener('click', handleClick) element. addEventListener('click', handleClick( ) )

2nd one always gets called without having to click it??

DOM-MANIPULATION What is the className property of element objects?

property that can get or set the value of class attribute

DOM-MANIPULATION How do you update the CSS class attribute of an element using JavaScript?

use the className property on an element | select your element.className = new value

DOM-MANIPULATION What is the textContent property of element objects?

get or set a text element

DOM-MANIPULATION How do you update the text within an element using JavaScript?

select your element.textContent = 'whatever'

DOM-MANIPULATION Is the event parameter of an event listener callback always useful?

no, if it's not necessary, then no need

DOM-MANIPULATION Would this assignment be simpler or more complicated if we didn't use a variable to keep track of the number of clicks?

more complicated if we did not have variable

DOM-MANIPULATION Why is storing information about a program in variables better than only storing it in the DOM?

makes it easier to know what's going on in your own code. store it in javascripts in variables and use that data to influence the DOM.

JAVASCRIPT-FORMS What event is fired when a user places their cursor in a form control?

focus event

JAVASCRIPT-FORMS What event is fired when a user's cursor leaves a form control?

blur event

JAVASCRIPT-FORMS What event is fired as a user changes the value of a form control?

input event

JAVASCRIPT-FORMS What event is fired when a user clicks the "submit" button within a form?

submit

JAVASCRIPT-FORMS What does the event.preventDefault() method do?

stops the default behavior from happening or in this form case = browsers from refreshing

JAVASCRIPT-FORMS What does submitting a form without event.preventDefault() do?

the page will refresh because of the action attribute (outdated)

JAVASCRIPT-FORMS What property of a form element object contains all of the form's controls.

elements property

JAVASCRIPT-FORMS What property of a form control object gets and sets its value?

value

JAVASCRIPT-FORMS What is one risk of writing a lot of code without checking to see if it works so far?

wont be able to see if your code works

JAVASCRIPT-FORMS What is an advantage of having your console open when writing a JavaScript program?

can check to see if your code works as you're working on it

DOM-CREATION Does the document.createElement() method insert a new element into the page?

no, still have to append it

DOM-CREATION How do you add an element as a child to another element?

appendChild method

DOM-CREATION What do you pass as the arguments to the element.setAttribute() method?

setAttribute(attribute, value)

DOM-CREATION What steps do you need to take in order to insert a new element into the page?

``` var h1 = document.createElement('h1') someDiv.appenchild(h1) ```

DOM-CREATION What is the textContent property of an element object for?

to get or set text content

DOM-CREATION Name two ways to set the class attribute of a DOM element.

- someElement.className = 'classssss' | - setAttribute ('className', 'classVaues')

DOM-CREATION What are two advantages of defining a function to create something (like the work of creating a DOM tree)?

- saves a lot of time | - makes it reusable

DOM-EVENT-DELEGATION What is the event.target?

where the event originated from

DOM-EVENT-DELEGATION Why is it possible to listen for events on one element that actually happen its descendent elements?

event bubbling

DOM-EVENT-DELEGATION What DOM element property tells you what type of element it is?

event.target.tagName

DOM-EVENT-DELEGATION What does the element.closest() method take as its argument and what does it return?

closest CSS selector and matches with closest ancestor (parent) element

DOM-EVENT-DELEGATION How can you remove an element from the DOM?

someElement.remove( )

DOM-EVENT-DELEGATION If you wanted to insert new clickable DOM elements into the page using JavaScript, how could you avoid adding an event listener to every new element individually?

addEventListener to the parent element, use tagName method to check if you're targeting the right element

JAVASCRIPT-VIEW-SWAPPING What is the event.target?

where the event originated from

JAVASCRIPT-VIEW-SWAPPING What is the affect of setting an element to display: none?

it will hide the element from the viewer

JAVASCRIPT-VIEW-SWAPPING What does the element.matches() method take as an argument and what does it return?

css selectors and returns a boolean value

JAVASCRIPT-VIEW-SWAPPING How can you retrieve the value of an element's attribute?

call it on the dom element

JAVASCRIPT-VIEW-SWAPPING At what steps of the solution would it be helpful to log things to the console?

every step

JAVASCRIPT-VIEW-SWAPPING If you were to add another tab and view to your HTML, but you didn't use event delegation, how would your JavaScript code be written instead?

have to add event listener for each individual element

JAVASCRIPT-VIEW-SWAPPING If you didn't use a loop to conditionally show or hide the views in the page, how would your JavaScript code be written instead?

have to write many conditional statements

JAVASCRIPT-AND-JSON What is JSON?

JavaScript Object Notation and lets us store them that is not in memory space

JAVASCRIPT-AND-JSON What are serialization and deserialization?

- stringifying and parsing data for network transmission | - breaks up data to put them into 1 sequence from beginning to end to be able to transmit

JAVASCRIPT-AND-JSON Why are serialization and deserialization useful?

breaks down data to byte size and easy to transmit data and load data throughout the web and store data

JAVASCRIPT-AND-JSON How do you deserialize a JSON string into a data structure using JavaScript?

use JSON.parse(someJSONString) | returns an array or object

JAVASCRIPT-LOCAL-STORAGE How do you store data in localStorage?

localStorage.setItem( keyName , keyValue )

JAVASCRIPT-LOCAL-STORAGE How do you retrieve data from localStorage?

localStorage.getItem( keyName )

JAVASCRIPT-LOCAL-STORAGE What data type can localStorage save in the browser?

-strings

JAVASCRIPT-LOCAL-STORAGE When does the 'beforeunload' event fire on the window object?

- is fired when the window, the document and its resources are about to be unloaded.

JAVASCRIPT-CUSTOM-METHODS What is a method?

method is a function of a property

JAVASCRIPT-CUSTOM-METHODS How can you tell the difference between a method definition and a method call?

- a method definition is an anonymous function of the value of a property - method call is property.method (parameter)

JAVASCRIPT-CUSTOM-METHODS Describe method definition syntax (structure).

``` var object = { methodName: function (parameters) { function block code return something; } }; ```

JAVASCRIPT-CUSTOM-METHODS Describe method call syntax (structure).

object.method(parameters)

JAVASCRIPT-CUSTOM-METHODS How is a method different from any other function?

it's not.

JAVASCRIPT-CUSTOM-METHODS What is the defining characteristic of Object-Oriented Programming?

it's a concept based on objects which contain data (known as attributes or properties) and code (known as methods)

JAVASCRIPT-CUSTOM-METHODS What are the four "principles" of Object-Oriented Programming?

Abstraction, encapsulation, inheritance, polymorphism

JAVASCRIPT-CUSTOM-METHODS What is "abstraction"?

being able to work with (possibly) complex things in simple ways.

JAVASCRIPT-CUSTOM-METHODS What does API stand for?

Application Programming Interface

JAVASCRIPT-CUSTOM-METHODS What is the purpose of an API?

connects computers to computer programs

JAVASCRIPT-THIS What is 'this' in JavaScript?

'this' refers to the current object being worked on currently

JAVASCRIPT-THIS What does it mean to say that 'this' is an "implicit parameter"?

can use 'this' even though it is not listed as a parameter (which shouldnt have a parameter named 'this')

JAVASCRIPT-THIS When is the value of 'this' determined in a function; call time or definition time?

call time

JAVASCRIPT-THIS What does 'this' refer to in the following code snippet? ``` var character = { firstName: 'Mario', greet: function () { var message = 'It\'s-a-me, ' + this.firstName + '!'; console.log(message); } }; ```

since greet function is never called, the value of 'this' is nothing since 'this' only gets a value when something is called.

JAVASCRIPT-THIS Given the above character object, what is the result of the following code snippet? Why? character.greet();

It's a me, Mario.

JAVASCRIPT-THIS Given the above character object, what is the result of the following code snippet? Why? ``` var hello = character.greet; hello(); ```

it's a me 'undefined' | - because 'this' only refers to the object from the left of the dot and nothing

JAVASCRIPT-THIS How can you tell what the value of 'this' will be for a particular function or method definition?

we dont know yet until it is called

JAVASCRIPT-THIS How can you tell what the value of 'this' is for a particular function or method call?

it would be the object that it is working with (object to the left of the dot)

JAVASCRIPT-PROTOTYPES What kind of inheritance does the JavaScript programming language use?

prototype based

JAVASCRIPT-PROTOTYPES What is a prototype in JavaScript?

JAVASCRIPT-PROTOTYPES How is it possible to call methods on strings, arrays, and numbers even though those methods don't actually exist on strings, arrays, and numbers?

JAVASCRIPT-PROTOTYPES If an object does not have it's own property or method by a given key, where does JavaScript look for it?

in the prototype

JAVASCRIPT-CONSTRUCTOR What does the new operator do?

The new operator lets developers create an instance of a object - 4 steps that the new operator will take - create a black, plain JS object - Points new Instances to the constructor function's prototype property - 'this' will now be the new object - if you do not return anything(99.99% wont return anything) then object is returned instead

JAVASCRIPT-CONSTRUCTOR What property of JavaScript functions can store shared behavior for instances created with new?

prototype property

JAVASCRIPT-CONSTRUCTOR What does the instanceof operator do?

check whether an object is an instance of a particular class or not.

JAVASCRIPT-TIMERS What is a "callback" function?

a function passed into another function as an argument

JAVASCRIPT-TIMERS Besides adding an event listener callback function to an element or the document, what is one way to delay the execution of a JavaScript function until some point in the future?

setTimeout(function, timeInMiliseconds)

JAVASCRIPT-TIMERS How can you set up a function to be called repeatedly without using a loop?

setInterval(function, imeInMiliseconds)

JAVASCRIPT-TIMERS What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?

JAVASCRIPT-TIMERS What do setTimeout() and setInterval() return?

HTTP-MESSAGES What is a client?

a desktop computer or workstation that is capable of obtaining information and applications from a server. a program that is requesting data

HTTP-MESSAGES What is a server?

A server is a computer program or device that provides a service to another computer program and its user, also known as the client.

HTTP-MESSAGES Which HTTP method does a browser issue to a web server when you visit a URL?

GET

HTTP-MESSAGES What three things are on the start-line of an HTTP request message?

HTTP method, the request-target (website) and what version ex: GET / google.com / 1.0

HTTP-MESSAGES What three things are on the start-line of an HTTP response message?

a start line describing the message, a block of headers containing attributes, and an optional body containing data. protocol version, status code, status text

HTTP-MESSAGES What are HTTP headers?

a field of an HTTP request or response that passes additional context and metadata about the request or response. For example, a request message can use headers to indicate it's preferred media formats, while a response can use header to indicate the media format of the returned body.

HTTP-MESSAGES Where would you go if you wanted to learn more about a specific HTTP Header?

mdn

HTTP-MESSAGES Is a body required for a valid HTTP request or response message?

JAVASCRIPT-AJAX What is AJAX?

an application that allows you to update 1 part of the website without having to reload the entire page

JAVASCRIPT-AJAX What does the AJAX acronym stand for?

Asynchronous JavaScript And XML

JAVASCRIPT-AJAX Which object is built into the browser for making HTTP requests in JavaScript?

XMLHttpRequest

JAVASCRIPT-AJAX What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?

'load' event

JAVASCRIPT-AJAX Bonus Question: An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?

prototypal inheritence