JavaScript Flashcards
What are arrays used for?
store multi same datas
Describe array literal notation.
array name=[]
How are arrays different from “plain” objects?
array has number index, add items to array we use push
What number represents the first index of an array?
0
What is the length property of an array?
the total number of items in array
How do you calculate the last index of an array?
array.length-1
What is a function in JavaScript?
special object can be called. set of reusable code can be used
Describe the parts of a function definition.
function keyword, function-name, parameter, and {code block, optional return}
Describe the parts of a function call.
()
When comparing them side-by-side, what are the differences between a function call and a function definition?
function call will have argument, function definition always will be with code block
What is the difference between a parameter and an argument?
parameter-definition variable
argument-with function call
Why are function parameters useful?
we can have the parameters to create more general data for function to use
What two effects does a return statement have on the behavior of a function?
A return statement ends the execution of a function, and returns control to the calling function.
Why do we log things to the console?
console. log specifically is a method for developers to write code to inconspicuously inform the developers what the code is doing. It can be used to alert you that there’s an issue, but shouldn’t take the place of an interactive debugger when it comes time to debug the code.
What is a method?
JavaScript methods are the actions that can be performed on objects. A JavaScript method is a property containing a function definition. Property.
How is a method different from any other function?
A method, like a function, is a set of instructions that perform a task. The difference is that a method is associated with an object, while a function is not.
How do you remove the last element from an array?
.pop()
How do you round a number down to the nearest integer?
Math.floor()
How do you generate a random number?
Math.random()
How do you delete an element from an array?
.splice(index, delect count)
How do you append an element to an array?
.push()
How do you break a string up into an array?
.split(‘ ‘) the single space separate words
Do string methods change the original string? How would you check if you weren’t sure?
no change. we can use console log to check
Roughly how many string methods are there according to the MDN Web docs?
a lot…
Is the return value of a function or method useful in every situation?
no…such as splice. sometimes just need to delete
Roughly how many array methods are there according to the MDN Web docs?
36
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN
Give 6 examples of comparison operators.
> ,=,<=
What data type do comparison expressions evaluate to?
boolean
What is the purpose of an if statement?
The if/else statement executes a block of code if a specified condition is true.
Is else required in order to use an if statement?
no. its optional
Describe the syntax (structure) of an if statement.
if(keyword) (condition) { code to execute if value is true}
What are the three logical operators?
||,&&,!
How do you compare two different expressions in the same condition?
by using the logical operators
What are the four components of “the Cascade”.
source order,
Inheritance,
Specificity & !important
What does the term “source order” mean with respect to CSS?
Source order is, simply put, the order that your CSS rules are written in your stylesheet. The styling provided for an element last in your stylesheet is the styling that will ultimately take effect.
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
inheritance.
but not all properties are inheritable.
List the three selector types in order of increasing specificity.
Type, class, and ID selectors.
Why is using !important considered bad practice?
because it makes debugging more difficult by breaking the natural cascading in your stylesheets.
Why do we log things to the console?
console. log specifically is a method for developers to write code to inconspicuously inform the developers what the code is doing.
What is a “model”?
The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web.
Which “document” is being referred to in the phrase Document Object Model?
the HTML/web page
What is the word “object” referring to in the phrase Document Object Model?
javascript object
What is a DOM Tree?
In this case, the parent “stem” is the root (html)element, the child “branches” are the nested elements, and the “leaves” are the content within the elements.
Give two examples of document methods that retrieve a single element from the DOM.
getElementbyID, querySelector
Give one example of a document method that retrieves multiple elements from the DOM at once.
querySelectorAll
Why might you want to assign the return value of a DOM query to a variable?
so we can reuse the data
What console method allows you to inspect the properties of a DOM element object?
.dir
Why would a (script) tag need to be placed at the bottom of the HTML content instead of at the top?
codes are being run by orders. we have to wait until all variables are assigned
What does document.querySelector() take as its argument and what does it return?
‘the selector’ as argument and returns the first Element within the document that matches the specified selector, or group of selectors.
What does document.querySelectorAll() take as its argument and what does it return?
‘the selector’ as argument and returns the nodelists of all elements within the document that matches the specified selector, or group of selectors.
Why do we log things to the console?
To verify that the result is what we’re expecting
What is the purpose of events and event handling?
respond user inputs
Are all possible parameters required to use a JavaScript method or function?
No, having a parameter for a function doesn’t mean that it will be used
What method of element objects lets you set up a function to be called when a specific type of event occurs?
addeventlistener
What is a callback function?
function is being called as a variable
What object is passed into an event listener callback when the event fires?
Event object - function as the call back function
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
The target property of the event, a reference to the object onto which the event was dispatched. Check on MDN. The element where our target originated from (not attached)
What is the difference between these two snippets of code?
first one is a variable, second is a function being called
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
What is the className property of element objects?
to update the class attribute
How do you update the CSS class attribute of an element using JavaScript?
by using className
What is the textContent property of element objects?
allow to adjust the text
How do you update the text within an element using JavaScript?
by using elementnode.textcontent=…..
Is the event parameter of an event listener callback always useful?
no
Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?
it will be more complicated
Why is storing information about a program in variables better than only storing it in the DOM?
We don’t want to have to look elsewhere for the information. Keep the JavaScript data in JavaScript.
What event is fired when a user places their cursor in a form control?
focus
What event is fired when a user’s cursor leaves a form control?
blur
What event is fired as a user changes the value of a form control?
input
What event is fired when a user clicks the “submit” button within a ?
submit
What does the event.preventDefault() method do?
prevent the browser from automatically reloading the page with the form’s values in the URL. keep page from refreshing
What does submitting a form without event.preventDefault() do?
data got sent right away, page will refresh
What property of a form element object contains all of the form’s controls.
elements. property
What property of form a control object gets and sets its value?
.value
What is one risk of writing a lot of code without checking to see if it works so far?
break during the middle
What is an advantage of having your console open when writing a JavaScript program?
you can know what’s going on
Does the document.createElement() method insert a new element into the page?
no, not yet. it create the element object
How do you add an element as a child to another element?
by using element.appendChild
What do you pass as the arguments to the element.setAttribute() method?
class(string) and value
What steps do you need to take in order to insert a new element into the page?
query the element from the DOM and use appendChild to add the element object to the DOM element
What is the textContent property of an element object for?
to create its text content
Name two ways to set the class attribute of a DOM element.
by using setAttribute; or using DOMelement.className=’..’
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
we can reuse it for more arguments;
ease the process to do in html
same DOM tree in multiple places
The transition property is shorthand for which four CSS properties?
transition-delay,duration,property,timing-function
What is the event.target?
the element triggers the event
What DOM element property tells you what type of element it is?
.tagname
What is a breakpoint in responsive Web design?
the point the view starts to change
What is the advantage of using a percentage (e.g. 50%) width instead of a fixed (e.g. px) width for a “column” class in a responsive layout?
it will change with the parent’s width. so we only need to change the container width
If you introduce CSS rules for a smaller min-width after the styles for a larger min-width in your style sheet, the CSS rules for the smaller min-width will “win”. Why is that?
because of the source order
What is JSON?
JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.
What are serialization and deserialization?
Serialization is the process of turning an object in memory into a stream of bytes so you can do stuff like store it on disk or send it over the network.
Deserialization is the reverse process: turning a stream of bytes into an object in memory.
Why are serialization and deserialization useful?
make it possible to transfer data
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse
How to you store data in localStorage?
localStroage.setItem
How to you retrieve data from localStorage?
localStroage.getItem
What data type can localStorage save in the browser?
strings
When does the ‘beforeunload’ event fire on the window object?
before reload happened
What does the transform property do?
The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
Give four examples of CSS transform functions.
scale,rotate, skew, translate
Give two examples of media features that you can query in an @media rule.
min-width, max-width
Which HTML meta tag is used in mobile-responsive web pages?
Using the viewport meta tag to control layout on mobile browsers
Why is it possible to listen for events on one element that actually happen its descendent elements?
event bubbling