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
What does the element.closest() method take as its argument and what does it return?
losest() The closest() method traverses the Element and its parents (heading toward the document root) until it finds a node that matches the provided selector string.
How can you remove an element from the DOM?
element.remove()
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?
add class name and under the parent class
What is the affect of setting an element to display: none?
When applied to a container element, setting display to none causes the container and all of its children to be invisible; thus, it acts on groups of elements as a group. This means that any child of an element with display=”none” will never be rendered even if the child has a value for display other than none
What does the element.matches() method take as an argument and what does it return?
selectorString and return boolean
How can you retrieve the value of an element’s attribute?
The getAttribute() method of the Element interface returns the value of a specified attribute on the element. If the given attribute does not exist, the value returned will either be null or “” (the empty string)
At what steps of the solution would it be helpful to log things to the console?
every steps
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?
query select the element as Dom selector and addeventlistner
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?
Write code for every situation (many else if statements)
What is a method?
A method is a function which is a property of an object. There are two kind of methods: Instance Methods which are built-in tasks performed by an object instance, or Static Methods which are tasks that are called directly on an object constructor.
How can you tell the difference between a method definition and a method call?
definition includes the code block and 'function' function call is object.key(argument)
Describe method definition syntax (structure).
object.key=function(){}; or assign the function inside the object
Describe method call syntax (structure).
object.key(argument)
How is a method different from any other function?
method is with object
What is the defining characteristic of Object-Oriented Programming?
objects can contain both data (as properties) and behavior (as methods).
What are the four “principles” of Object-Oriented Programming?
Abstraction,Encapsulation,Inheritance,Polymorphism
What is “abstraction”?
The most important part of the term “abstraction” boils down to being able to work with (possibly) complex things in simple ways.
What does API stand for?
application programming interface (API)
What is the purpose of an API?
API is the acronym for Application Programming Interface, which is a software intermediary that allows two applications to talk to each other. Each time you use an app like Facebook, send an instant message, or check the weather on your phone, you’re using an API.
What is this in JavaScript?
In most cases, the value of this is determined by how a function is called (runtime binding). It can’t be set by assignment during execution, and it may be different each time the function is called.
What does it mean to say that this is an “implicit parameter”?
meaning that it is available in a function’s code block even though it was never included in the function’s parameter list or declared with var.
When is the value of this determined in a function; call time or definition time?
call time
What does this refer to in the following code snippet?
nothing….. its not called yet
Given the above character object, what is the result of the following code snippet? Why?
its a me , Mario
Given the above character object, what is the result of the following code snippet? Why?
undefined, cuz the ‘hello’ has no object it belongs to
How can you tell what the value of this will be for a particular function or method definition?
no way… until its used, it doesn’t exist
How can you tell what the value of this is for a particular function or method call?
the object that the method is being called. the object that is left of the ‘.’
What kind of inheritance does the JavaScript programming language use?
prototype-based (or prototypal)
What is a prototype in JavaScript?
the ultimate goal is to move properties and methods that we’d like to reuse into a “prototype” object and then tell other objects to simply delegate (verb) to that “prototype” object when they aren’t able to perform the required tasks themselves.
How is it possible to call methods on strings, arrays, and numbers even though those methods don’t actually exist on objects, arrays, and numbers?
cuz its going directly to the original prototype object
If an object does not have it’s own property or method by a given key, where does JavaScript look for it?
the object prototype
What does the new operator do?
The new operator lets developers create an instance of a user-defined object type or of one of the built-in object types that has a constructor function.
- Creates a blank, plain JavaScript object.
- Adds a property to the new object (__proto__) that links to the constructor function’s prototype object
- Binds the newly created object instance as the this context (i.e. all references to this in the constructor function now refer to the object created in the first step).
- Returns this if the function doesn’t return an object.
What property of JavaScript functions can store shared behavior for instances created with new?
prototype
What does the instanceof operator do?
instanceof is a binary operator used to test if an object is of a given type. The result of the operation is either true or false.
What is a “callback” function?
the function being passed around as a value
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, time)
How can you set up a function to be called repeatedly without using a loop?
setInterval(function, interval)
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0
What do setTimeout() and setInterval() return?
The returned intervalID is a numeric, non-zero value which identifies the timer created by the call to setInterval(); The returned timeoutID is a positive integer value which identifies the timer created by the call to setTimeout()
What is a code block? What are some examples of a code block?
{}such as function, loops, conditional,
What does block scope mean?
Block scoping means declaring a variable, not just inside a function, but around any curly brackets like if statements or loops. The variable itself let i is still in memory, but the engine just won’t allow you to access it like before when we used var.
What is the scope of a variable declared with const or let?
block scope
What is the difference between let and const?
let can be reassigned, const can not
Why is it possible to .push() a new value into a const variable that points to an Array?
because we are mutating the array, not reassign
How should you decide on which type of declaration to use?
prefer const, if the value will be reassigned, then use let
What is the syntax for writing a template literal?
string
What is “string interpolation”?
JavaScript string interpolation is the process of embedding an expression into part of a string. A template literal is used to embed expressions. You can add values such as variables and mathematical calculations into a string using interpolation. … Template literals are the JavaScript string interpolation syntax.
What is destructuring, conceptually?
assign properties of an object or values of the element from array to variables
What is the syntax for Object destructuring?
const {key: newkey, key2: newkey2,…}=obj
What is the syntax for Array destructuring?
const [variable1, variable2,variable3…]=array
How can you tell the difference between destructuring and creating Object/Array literals?
destructuring has the object or array on the right side
What is the syntax for defining an arrow function?
( ) => expression
param => expression( ‘()’ optional here)
(param1, paramN) => expression
When an arrow function’s body is left without curly braces, what changes in its functionality?
has to be an expression, no statement
How is the value of this determined within an arrow function?
With arrow functions thethiskeywordalwaysrepresents the object that defined the arrow function.
What is a CLI?
command-line interfaces
What is a GUI?
a graphical user interface
Give at least one use case for each of the commands listed in this exercise. man cat ls pwd echo touch mkdir mv rm cp
man: check manul
cat: display file
ls: list contents in directory
pwd: what directory I’m at
echo: print the string
touch: create file
mkdir: create new directory
mv: rename directory/file
rm: delete file/directory
cp: copy file
What are the three virtues of a great programmer?
laziness
impatience
hubris
What is Node.js?
its JavaScript not in the browser
What can Node.js be used for?
Node. js is primarily used for non-blocking, event-driven servers, due to its single-threaded nature. It’s used for traditional web sites and back-end API services, but was designed with real-time, push-based architectures in mind.
What is a REPL?
The acronym REPL stands for read-eval-print loop and basically provides a programmer with an interactive programming environment.
When was Node.js created?
May 27, 2009
What back end languages have you heard of?
Some common backend languages are Ruby, PHP, Java, . Net, and Python. These programming languages often run on frameworks that simplify the web development process.
javaScript has event loop(only one)
What is a computer process?
In computing, a process is the instance of a computer program that is being executed by one or many threads. It contains the program code and its activity.
Roughly how many computer processes are running on your host operating system (Task Manager or Activity Monitor)?
more than 100
Why should a full stack Web developer know that computer processes exist?
Full stack Web development is based on making multiple processes work together to form one application, so having at least a cursory awareness of computer processes is necessary. This will be extremely important when learning about applications made of multiple components, such as clients, servers, and databases.
What is the process object in a Node.js program?
The process object is a global that provides information about, and control over, the current Node.js process.
How do you access the process object in a Node.js program?
As a global, it is always available to Node.js applications without using require(). It can also be explicitly accessed using require():
What is the data type of process.argv in Node.js?
array of string
What is a JavaScript module?
In the Node.js module system, each file is treated as a separate module.
What values are passed into a Node.js module’s local scope?
exports, require, module, __filename, __dirname
Give two examples of truly global variables in a Node.js program.
process, buffer
What is the purpose of module.exports in a Node.js module?
module.exports property exposes values from the module which can be imported into other modules by require(‘/path/to/module’) and reused.
How do you import functionality into a Node.js module from another Node.js module?
require is a function used for loading a module into another module. It exposes the imported(the module been required) modules exported objects and makes them usable withing the requiring module.
What is the JavaScript Event Loop?
JavaScript has a concurrency model based on an event loop, which is responsible for executing the code, collecting and processing events, and executing queued sub-tasks.
What is different between “blocking” and “non-blocking” with respect to how code is executed?
blocking is something is currently on the stack
The output of an assign statement is always equal to the specified function of it’s inputs. “blocking” and “nonblocking” assignments only exist within always blocks. A blocking assignment takes affect immediately it is processed. A nonblocking assignment takes place at the end of processing the current “time delta”.
What is a directory?
A node directory is a folder that contains log files, operational state, and application data stored in transactional memory.
What is a relative file path?
A relative path refers to a location that is relative to a current directory.
What is an absolute file path?
An absolute path always contains the root element and the complete directory list required to locate the file.
What module does Node.js include for manipulating the file system?
fs
What method is available in the Node.js fs module for writing data to a file?
writeFile
Are file operations using the fs module synchronous or asynchronous?
both
What is NPM?
npm is the world’s largest software registry. Open source developers from every continent use npm to share and borrow packages, and many organizations use npm to manage private development as well.
What is a package?
A package is a file or directory that is described by a package.json file. A package must contain a package.json file in order to be published to the npm registry.
How can you create a package.json with npm?
npm init –yes
What is a dependency and how to you add one to a package?
its a code package. you can add them by doing npm install (package-name)
What happens when you add a dependency to a package with npm?
When you (or another user) run npm install , npm will download dependencies and devDependencies that are listed in package. json that meet the semantic version requirements listed for each.
How do you add express to your package dependencies?
npm install express
What Express application method starts the server and binds it to a network PORT?
app.listen
How do you mount a middleware with an Express application?
app.use
Which objects does an Express application pass to your middleware to manage the request/response lifecycle of the server?
request object and response object
What is the appropriate Content-Type header for HTTP messages that contain JSON in their bodies?
Content-Type: application/json; charset=utf-8
What does the express.json() middleware do and when would you need it?
parse the incoming json string to a object that we can use
What is the significance of an HTTP request’s method?
deter clients action, to make server pass matching action
What is PostgreSQL and what are some alternative relational databases?
PostgreSQL is a powerful, free, open source Relational Database Management System (RDBMS). Microsoft SQL server, Oracle database,MySQL
What are some advantages of learning a relational database?
A quality of many relational databases is that they support good guarantees about data integrity. They can store and modify data in a way that makes data corruption as unlikely as possible. This means that developers can set up their database to reject “bad” data and not worry about data being “half written”.
What is one way to see if PostgreSQL is running?
by using the top in terminal
sudo service postgresql status
What is a database schema?
A collection of tables is called a schema. A schema defines how the data in a relational database should be organized.
What is a table?
A table is a list of rows each having the same set of attributes.
What is a row?
all the data describe one thing
What is SQL and how is it different from languages like JavaScript?
imperative programming languages such as JavaScript, where you basically tell the JavaScript runtime what to do and how to do it.SQL is a declarative programming language. In declarative languages, programmers describe the results they want and the programming environment comes up with its own plan for getting those results.
How do you retrieve specific columns from a database table?
select “”,
“”
from “”
How do you filter rows based on some specific criteria?
where
What are the benefits of formatting your SQL?
easier to read, consistence
What are four comparison operators that can be used in a where clause?
=,,!=
How do you limit the number of rows returned in a result set?
limit number
How do you retrieve all columns from a database table?
select *
How do you control the sort order of a result set?
order by “”
How do you add a row to a SQL table?
select into “form name” (“column name”)
value (‘value’)
What is a tuple?
a list of values is referred to as a tuple.
How do you add multiple rows to a SQL table at once?
values (‘…’,’…’)
(‘…’,’…’)
How do you get back the row being inserted into a table without a separate select statement?
returning *;
How do you update rows in a database table?
update “forename”
set “column”=’value’
where condition
Why is it important to include a where clause in your update statements?
to target specific rows
How do you delete rows from a database table?
delete from “filename”
where condition
How do you accidentally delete all rows from a table?
where there is no condition
What is a foreign key?
two tables share the same column name
How do you join two SQL tables?
select “table”.”category”
from “table”
join “table” using (“foreign key”)
How do you temporarily rename columns or tables in a SQL statement?
use as keyword
What are some examples of aggregate functions?
avg(),max(),every(),min()
What are the three states a Promise can be in?
pending: initial state, neither fulfilled nor rejected.
fulfilled: meaning that the operation was completed successfully.
rejected: meaning that the operation failed.
How do you handle the fulfillment of a Promise?
by using promise.then()
How do you handle the rejection of a Promise?
by using promise.catch()
What is Array.prototype.filter useful for?
it is good to sort the data out based on the condition given
What is Array.prototype.map useful for?
it is good to transform the whole array under certain rule
What is Array.prototype.reduce useful for?
combine elements from an array into one value
What is “syntactic sugar”?
syntactic sugar is syntax within a programming language that is designed to make things easier to read or to express.
What is the typeof an ES6 class?
function
Describe ES6 class syntax.
class something {
constructor (a, b, c){
this.a=a;
this.b =bb;
}
method() {
}
}
What is “refactoring”?
restructure the code without changing its function
What is Webpack?
It’s a tool that lets you bundle your JavaScript applications (supporting both ESM and CommonJS), and it can be extended to support many different assets such as images, fonts and stylesheets.
How do you add a devDependency to a package?
npm install –save-dev
What is an NPM script?
run in node.js to execute tool
How do you execute Webpack with npm run?
with script typied in package.json and npm run build
How are ES Modules different from CommonJS modules?
What kind of modules can Webpack support?
How are ES Modules different from CommonJS modules?
While CommonJS and ES6 modules share similar syntax, they work in fundamentally different ways: ES6 modules are pre-parsed in order to resolve further imports before code is executed. CommonJS modules load dependencies on demand while executing the code.
What kind of modules can Webpack support?
Webpack supports the following module types natively: ECMAScript modules. CommonJS modules. AMD modules.
How do you mount a React element to the DOM?
by using ReactDOM.render
How do you mount a React element to the DOM?
by using ReactDOM.render
What is Babel?
Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.
What is a Plug-in?
a plug-in (or plugin, add-in, addin, add-on, or addon) is a software component that adds a specific feature to an existing computer program.
What is a Webpack loader?
Loaders are transformations that are applied to the source code of a module.
How can you make Babel and Webpack work together?
install babel-loader
What Array method is commonly used to create a list of React elements?
the map method
What is the best value to use as a “key” prop when rendering lists?
The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys
What are controlled components?
the React component that renders a form also controls what happens in that form on subsequent user input. An input form element whose value is controlled by React in this way is called a “controlled component”.
What two props must you pass to an input for it to be “controlled”?
value and onChange
What does express.static() return?
it returns a middleware
What is the local __dirname variable in a Node.js module?
The directory name of the current module.
What does the join() method of Node’s path module do?
The path.join() method joins all given path segments together using the platform-specific separator as a delimiter, then normalizes the resulting path.
What does fetch() return?
A Promise that resolves to a Response object.
What is the default request method used by fetch()?
GET
How do you specify the request method (GET, POST, etc.) when calling fetch?
we can add an object containing the request method and pass the object as the argument to the fetch()method
When does React call a component’s componentDidMount method?
componentDidMount() is invoked immediately after a component is mounted (inserted into the tree).
Name three React.Component lifecycle methods.
render()
componentDidMount()
constructor()
How do you pass data to a child component?
passing by props
