SDLC Methods, HTML, CSS, JavaScript (ROCP - Week 1)
Are all events cancelable with the preventDefault() method?
No
Are function expressions hoisted?
No
Are variables in JavaScript constrained to one type?
No
Does the .preventDefault() method prevent further propagation of an event through the DOM?
No
Is AJAX a programming language?
No
Is the doctype declaration considered to be an HTML tag?
No
Is NaN equal to itself using strict equality?
No, it evaluates to false
Does Scrum stand for anything?
No, it's not an acronym, so all caps is not correct
Are objects iterable in JavaScript?
No, not unless they implement the iterable protocol
Do you use the "on" prefix for the attribute of the event passed through the addEventListener() method, such as with using "onclick"?
No. For example, you'd use click instead of onclick.
Is NaN is a data type in JS?
No. It's a number method.
Is Java a loosely-typed language?
No. It's strictly typed.
How are Scrum and Kanban similar?
Scrum and Kanban are both iterative work systems that rely on process flows and aim to reduce waste.
What's the difference between Agile and Scrum/Kanban?
Scrum and Kanban are two practical work methodologies which are considered to be Agile.
What is divitis in web design slang?
The practice of authoring web-page code with many div elements in place of meaningful semantic HTML elements.
What privilege does the spread operator allow us?
The privilege of obtaining a list of parameters from an array
Does JavaScript support higher-order (first-class) functions?
Yes
Does the addEventListener() method attach to an element without overwriting existing event handlers?
Yes
For hoisting to work, must the function must be defined in a function declaration?
Yes
Is CSS render blocking?
Yes
Should one take into consideration how the number of nodes affects how long it takes to render a web page?
Yes
Does JavaScript have types?
Yes, but the variables are dynamically and loosely typed
In JavaScript, what value does a variable without a value (for which a value has not been assigned/initialized) have?
undefined
Which JavaScript method retrieves the first element in the document with a specific class name? (eg. class="example")
.document.querySelector(".example");
What two features does the Fetch API provide?
1. A JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. 2. A global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.
What two structure/s does a JSON message represent?
1. A key/value collection or 2. An array of key/value collections. Example 1: { "id":7, "name":"Example Name" } Example 2: [ { "id":7, "name":"Example Name" }, { "id":8, "name":"Another Example" }
What is a Promise in Javascript?
1. A library for asynchronous programming introduced with ES6 2. A first-class representation of a value (which can be instantiated) that may be made available in the future 3. Promises are used in many existing JavaScript libraries. Example: function timeout(duration = 0) { return new Promise((resolve, reject) => { setTimeout(resolve, duration); }) } var p = timeout(1000).then(() => { return timeout(2000); }).then(() => { throw new Error("hmm"); }).catch(err => { return Promise.all([timeout(100), timeout(200)]); })
Describe the web process.
1. A request for a web page or app starts with an HTML request. 2. The server returns the HTML-response headers and data. 3. The browser then begins parsing the HTML, converting the received bytes to the DOM tree. The browser initiates requests every time it finds links to external resources, be they stylesheets, scripts, or embedded image references. Some requests are blocking, which means the parsing of the rest of the HTML is halted until the imported asset is handled. 4. The browser continues to parse the HTML, making requests and building the DOM, until it gets to the end. 5. Then it immediately constructs the CSS object model (CSSOM). 6. With the DOM and CSSOM complete, the browser builds the render tree, computing the styles for all the visible content. 7. After the render tree is complete, layout occurs, defining the location and size of all the render tree elements. 8. Once complete, the page is rendered, or 'painted' on the screen.
What two guidelines should you follow to prevent problems that arise from variable hoisting?
1. Always declare any variables at the top of a function 2. Use const and let, not var because const and let are not hoisted.
What is the series of events that happen when you make an AJAX call?
1. An event occurs on a web page (the page is loaded, a button is clicked) 2. An XMLHttpRequest object is created by JavaScript 3. The XMLHttpRequest object sends a request to a web server 4. The server processes the request 5. The server sends a response back to the web page 6. The response is read by JavaScript 7. Proper action (like page update) is performed by JavaScript
What are the responsibilities of a scrum master?
1. Clearing obstacles 2. Establishing an environment where the team can be effective 3. Addressing team dynamics 4. Ensuring a good relationship between the team and product owner as well as others outside the team 5. Protecting the team from outside interruptions and distractions.
What are the six steps in the Critical Render Path for an HTML document?
1. Constructing the DOM Tree 2. Constructing the CSSOM Tree 3. Running JavaScript 4. Creating the Render Tree 5. Generating the Layout 6. Painting HTML document -> parsed -> DOM -> CSSOM -> Render Tree -> Layout -> Paint -> Composite
What are the six total kinds of JavaScript errors?
1. EvalError An error has occurred in the eval() function. Note: Newer versions of JavaScript does not throw any EvalError. Use SyntaxError instead. 2. RangeError A number "out of range" has occurred 3. ReferenceError An illegal reference has occurred 4. SyntaxError A syntax error has occurred 5. TypeError A type error has occurred 6. URIError An error in encodeURI() has occurred
What are the different ways to include CSS?
1. External stylesheets, implemented through <link> tags with a url attributes of CDNs 2. Embedded in HTML (between <style> tags located in <head> tags 3. Inline style, using the attribute style in the syntax style="<selector>{}"
What are the scopes of variables in Javascript?
1. Global scope 2. Functional scope (local scope, variables) 3. Block scope
What are the different JavaScript errors?
1. Uncaught ReferenceError: _____ is not defined 2. Uncaught TypeError: _____ is not a function 3. Uncaught TypeError: undefined is not a function 4. Uncaught SyntaxError: missing ) after argument list 5. Uncaught TypeError: Assignment to constant variable.
What are the five kinds of selectors in CSS?
1. Universal: * 2. Element: html, div, p 3. Class: .class-name 4. Id: #id-name 5. Attribute: [attribute-key] (Also there are pseudo selectors)
What are some important differences between HTML5 and HTML?
1. HTML5 supports SVG (Scalable Vector Graphics), canvas, and other virtual vector graphics, whereas in HTML, using vector graphics was only possible by using it in conjunction with different technologies like Flash, VML (Vector Markup Language), or Silverlight. 2. Web SQL databases are used in HTML5 for storing data temporarily. Meanwhile, in the previous version of HTML, only browser cache could be utilized for this purpose. 3. With HTML5, JavaScript can run within a web browser, while the older HTML only allows JavaScript to run in the browser interface thread 4. HTML5 is not based on SGML. This means that the language has improved parsing rules which provide enhanced compatibility. 5. You can use inline MathML and SVG in text with HTML5, whereas HTML restricts it. 6. Some elements are removed in HTML5, like isindex, noframes, acronym, applet, basefont, dir, font, frame, frameset, big, center, strike, and tt. 7. HTML5 supports new kinds of form controls (input tag attributes), including dates and times, email, number, range, tel, url, search, etc. 8. There are multiple new features and new elements in HTML5. Some of the most important ones are summary, time, aside, audio, video, command, data, datalist, and so on. 9. Semantic elements such as <header>, <footer>, and <nav>
How do you write template literals? `you can use backtickto create multiline stringsand also allow for string interpolationa = ${a}b = ${b}5 + 5 = ${5+5}`;console.log(templateLiteral);
1. Instead of a string with quotation marks, you use backticks. 2. This allows string interpolation, with which variables and expressions can be evaluated from being placed in a dollar sign and curly braces, ${}, inside the backticks.
What does spread operator, which was introduced with ES6, allow you to do?
1. It allows arrays/objects/strings to be expanded into single arguments (for function calls)/elements (for array literals). 2. It allows an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.
How is JSON typically used?
1. It can be saved as a text file or 2. sent through an HTTP payload
What are the different Scrum Meetings?
1. Morning Standup 2. Sprint Planning Meeting 2. Sprint Review 3. Sprint Retrospective
What are the three programming paradigms?
1. Object-oriented 2. Functional 3. Procedural
What are the five iterating steps in the Agile Model?
1. Plan 2. Design 3. Build 4. Test 5. Review
What are the six steps of the SDLC?
1. Planning 2. Analysis 3. Design 4. Implementation 5. Testing and Integration 6. Maintenance
What does a burndown/burnup chart track?
1. Remaining effort 2. Remaining and completed Tasks 3. Ideal burndown 4. Remaining tasks 5. Number of days in Sprint
What are the steps in the Waterfall Model?
1. Requirement gathering 2. Analysis 3. Design 4. Coding 5. Testing 6. Deployment
How do I manipulate the DOM using Javascript?
1. Select an element to manipulate 2. Store a reference to the element inside a variable, calling a JavaScript DOM manipulation method from the HTML DOM Element (HTMLElement) Object on the document object and passing the name of the element id, tag, or name -- or CSS class name -- in quotations marks through the method parameters. 3. Use HTMLElement properties and methods to retrieve, set, or change the data or presentation style/activity that is presented at the selected element/s. The addEventListener() method and the innerHTML property are used to allow user actions to retrieve, set, or change the data or presentation style/activity that is presented at the selected element/s.
What factors does web performance include?
1. Server requests and responses 2. Loading 3. Scripting 4. Rendering 5. Layout 6. The painting of the pixels to the screen
What is the DOM?
1. The DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript. It is an application programming interface (API) for valid HTML and well-formed XML documents. 2. It defines the logical structure of documents and the way a document is accessed and manipulated. 3. In the DOM specification, the term "document" is used in the broad sense - increasingly, XML is being used as a way of representing many different kinds of information that may be stored in diverse systems, and much of this would traditionally be seen as data rather than as documents.
What are the steps in Agile?
1. The product owner receives inputs from customers, team, managers, and execs 2. A product backlog is made 3. The Sprint Planning Meeting is held 4. A Sprint Backlog is made, with tasks being broken out to team members 5. The sprints happen in a 1-4 week period, perhaps with 24-hour sprints and daily standup meetings 6. The Scrum Master keeps track of the burndown/burnup chart 7. There's a Sprint Review 8. Work is finished 9. There's a Sprint Retrospective
What parameters are passed through the addEventListener() method?
1. The type of event (like "click" or "mousedown" or any other HTML DOM Event.) 2. The function we want to call when the event occurs 3. An optional boolean value specifying whether to use event bubbling or event capturing (false for bubbling, the default; true for capturing)
What are some different events?
1. The user selects a certain element or hovers the cursor over a certain element. 2. The user chooses a key on the keyboard. 3. The user resizes or closes the browser window. 4. A web page finishes loading. 5. A form is submitted. 6. A video is played, paused, or finishes. 7. An error occurs.
Why are arrow functions important?
1. They allow for a way to create anonymous functions in a shorthanded way. 2. Their scope is bound to that of the function in which they were declared (outer function)
What are three purposes of the <label> element?
1. To define a descriptive label for form elements 2. To assist screen-reader users, because the screen-reader will read out loud the label when the user focus on the input element. 3. To help users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles the radio button/checkbox
What will a scrum board will always include columns for?
1. User Stories (in Product Backlog and/or Sprint Backlog) 2. To-Do, 3. Work in Progress (WIP), and 4. Done.
What are some ways that HTML forms can be validated using JavaScript?
1. Using control flow statements in functions to return false when input is blank or incorrect Example: function validateForm() { var x = document.forms["myForm"]["fname"].value; if (x == "") { alert("Name must be filled out"); return false; }} The function can be called when the form is submitted: HTML Form Example <form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">Name: <input type="text" name="fname"><input type="submit" value="Submit"></form> 2. Use of the require attribute, to prevent blank input fields Example: <form action="/action_page.php" method="post"> <input type="text" name="fname" required> <input type="submit" value="Submit"></form> 3. Constraint Validation HTML5 introduced a new HTML validation concept called constraint validation. HTML constraint validation is based on: 1. HTML Input Attributes 2. CSS Pseudo Selectors 3. DOM Properties and Methods
What are the three most common SDLC methods?
1. Waterfall 2. Agile 3. DevOps
Besides using an object literal, what are the two other ways you can construct an object in JavaScript?
1. With a function 2. Through using the class keyword and related syntax: Example of doing it with a function: function Person(name, hairColor, height){ this.name = name; this.hairColor = hairColor; this.height = height; this.sayHello = function(){ console.log(`hello from ${this.name}`) } } let pfog = new Person('Pfog', 'Orange', 4); console.log(pfog); pfog.sayHello(); Example with class constructor: class PersonClass { constructor(name, hairColor){ this.name = name; this.hairColor = hairColor; } sayHello() { console.log(`hello from ${this.name}`); } } let rock = new PersonClass('Rock', 'Dark Brown'); console.log(rock);
What are some examples of syntax rules with arrow functions?
1. You do not have to put the parenthesis if you only have one parameter 2. If you only have to write one line for the implementation, and you want to return it, you don't have to put the curly braces, and you don't even need to use the return keyword because arrow functions have an implicit return Example 1 let inner2 = x=> "hello2"; 3. You need to have parentheses with two parameters Example 2: let otherAdd = (one,two) => { return one + two; }; console.log(otherAdd(1,2));
What does it mean to say JavaScript is a loosely-typed language?
1. You do not have to specify variable type. 2. You can use the same variable as more than one type.
What are some of the new features instituted by ES6?
1. arrow functions 2. classes 3. string literals (template strings) 4. let + const 5. default parameters 6. rest/spread operator 7. iterators + for..of 8. generators 9. unicode 10. destructuring 11. modules 12. module loaders 13. map + set + weakmap + weakset 14. proxies 15. symbols 16. subclassable built-ins 17. promises 18. math + number + string + array + object APIs 19. binary and octal literals 20. reflect api 21. tail calls 22. enhanced object literals
What two kinds of notation are used to access an object?
1. bracket notation 2. dot notation
What are some common Constraint Validation HTML Input Attributes?
1. disabled: Specifies that the input element should be disabled 2. max: Specifies the maximum value of an input element 3. min: Specifies the minimum value of an input element 4. pattern: Specifies the value pattern of an input element 5. required: Specifies that the input field requires an element 6. type: Specifies the type of an input element
What is the order of specificity for CSS selectors?
1. important tag 2. style property 3. id selector 4. class selector 5. element selector 6. property
What are the six primitive data types of javascript?
1. null 2. string 3. number 4. undefined 5. boolean 6. symbol
What are the six falsey values in JavaScript?
1. undefined, 2. null 3. NaN 4. 0 5. "" (empty string) 6. false
What are the differences between var, let, and const?
1. var -- variables declared with var have global scope. Variables declared with var don't need to be initialized when declared. 2. let -- variables declared with let have block scope. Values can be reassigned to variables declared with let. Variables declared with let don't need to be initialized when declared. 3. const -- variables declared with const have block scope. Variables declared with const must be initialized when they are declared.
What is the ideal number of people on a Scrum team?
10
What is the syntax for the doctype declaration for HTML(5)?
<!DOCTYPE html>
What is a method in JavaScript?
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.
What does the computing slang term jank mean?
A perceptible pause in the smooth rendering of a software application's user interface due to slow operations or poor interface design.
What is the root tag of an html document?
<html>
What are some common tags of html?
<li>, <h1>, etc.
What is an event handler?
A block of code (usually a JavaScript function that you as a programmer create) that runs when an event fires
What constructs a virtual tree when parsing an HTML document?
A browser known as the DOM
What kind of chart is used to track how many story points remain?
A burndown chart
What is a callback function?
A callback function is a function that is 1. passed into another function as an argument, then 2. invoked inside the outer function to complete some kind of routine or action. Here is a quick example: function greeting(name) { alert('Hello ' + name); } function processUserInput(callback) { var name = prompt('Please enter your name.'); callback(name); } processUserInput(greeting);
What do you call it when a function has access to the parent scope even after the parent function has closed?
A closure
What does it mean when you say that a closure provides encapsulation?
A closure is encapsulated in the sense that the variables declared in the scope of the inner function are not changeable outside of the inner function
What is a falsey value?
A datum which evaluates to false
What is a product backlog?
A prioritized list of what is required: features, bugs to fix, etc.
What is object-oriented programming (OOP)?
A programming paradigm based on the concept of "objects", which can contain data and code: data in the form of fields (often known as attributes or properties), and code, in the form of procedures (often known as methods). A feature of objects is that an object's own procedures can access and often modify the data fields of itself (objects have a notion of "this" or "self"). In OOP, computer programs are designed by making them out of objects that interact with one another.[1][2] OOP languages are diverse, but the most popular ones are class-based, meaning that objects are instances of classes, which also determine their types.
Describe the general steps of the Critical Rendering Path.
A request for a web page or app starts with an HTML request. The server returns the HTML - response headers and data. The browser then begins parsing the HTML, converting the received bytes to the DOM tree. The browser initiates requests every time it finds links to external resources, be they stylesheets, scripts, or embedded image references. Some requests are blocking, which means the parsing of the rest of the HTML is halted until the imported asset is handled. The browser continues to parse the HTML making requests and building the DOM, until it gets to the end, at which point it constructs the CSS object model. With the DOM and CSSOM complete, the browser builds the render tree, computing the styles for all the visible content. After the render tree is complete, layout occurs, defining the location and size of all the render tree elements. Once complete, the page is rendered, or 'painted' on the screen.
What is a Sprint?
A sprint is a short, time-boxed period when a scrum team works to complete a set amount of work.
What's the difference between a statement and an expression?
A statement is anything that is code but does not itself execute or represent a value. An expression is a unit of code that produces values.
What is the bootstrap grid system?
A system of quadrilateral structures based on divisions of 12 across the width of the viewport
What determines how nodes are connected into a DOM tree?
A token hierarchy
What is a Scrum board and what is is used for?
A visual representation of the work to be done. Most Scrum teams use a Scrum board to help them isolate and organize tasks, assign specific tasks to team members, and track each task through its lifecycle.
What is event propagation?
A way of defining the element order when an event occurs
What is AJAX and what is it for?
AJAX (Asynchronous JavaScript And XML) is a technique to allow web pages to be updated asynchronously by exchanging data with a web server behind the scenes.
What is Agile?
Agile is an example of an SDLC method that uses iterations.
What's the difference between Agile and Scrum?
Agile is the overall philosophy; SCRUM is what's done in practice.
What is prototype inheritance in JavaScript?
All JavaScript objects inherit properties and methods from a prototype a. Date objects inherit from Date.prototype b. Array objects inherit from Array.prototype c. Person objects inherit from Person.prototype (as an example of a user-defined object class)
What does a DOM node contain?
All relevant information about the HTML element that was parsed to make it
The DOM contains all the content of a web page. What does the CSSOM contain?
All the styles of the page
Why can hoisting be a problem?
Although JavaScript invocations passing variables declared after the invocation can still work, initialized variables will return undefined instead of an assigned value because JavaScript only hoists declarations, not initializations Example: This will return a specific value: var x = 5; var y = 7; elem = document.getElementById("demo"); elem.innerHTML = x + " " + y; This will return undefined: elem = document.getElementById("demo"); elem.innerHTML = x + " " + y; var x = 5; // Initialize x var y = 7; // Initialize y
What is a group of user stories called?
An epic
What is a function in JavaScript?
An object which intrinsically returns something.
What is an array in JavaScript?
An object with a special relationship between enumerated keys and values
What does it mean to assign a variable using an object literal?
Assigning an empty array or object
Are building the Dom and then building the CSSOM synchronous or asynchronous processes?
Asynchronous
What is bootstrap?
Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development.
Can callback functions be used in synchronous callbacks, asynchronous callbacks, or both?
Both
Do modern browsers use just JavaScript, just built-in HTML validation, or both for validation?
Both, using predefined validation rules defined in HTML attributes
What are the two ways of event propagation?
Bubbling and capturing
How do CSS and JS hold up page rendering?
CSS is a render-blocking resource that holds up the Render Tree. JS is a parser-blocking resource.
What is CSS and what is cascading in its name?
CSS stands for "Cascading Style Sheets". What's cascading are style rules that differ in level of priority and specificity in correspondence with specific HTML elements to determine which style rule applies if more than one rule matches a particular element.
How to you make a custom error class in JavaScript?
Extend the Error class Example: class MyError extends Error{ } throw new MyError("This is my custom error being thrown");
Describe the CSSOM in the Critical Rendering Path.
CSSOM is similar to the DOM, but different. While the DOM construction is incremental, CSSOM is not. CSS is render blocking: the browser blocks page rendering until it receives and processes all of the CSS. CSS is render blocking because rules can be overwritten, so the content can't be rendered until the CSSOM is complete. CSS has its own set of rules for identifying valid tokens. Remember the C in CSS stands for 'Cascade'. CSS rules cascade down. As the parser converts tokens to nodes, with descendants of nodes inheriting styles. The incremental processing features don't apply to CSS like they do with HTML, because subsequent rules may override previous ones. The CSS object model gets built as the CSS is parsed, but can't be used to build the render tree until it is completely parsed because styles that are going to be overwritten with later parsing should not be rendered to the screen. In terms of selector performance, less specific selectors are faster than more specific ones. For example, .foo {} is faster than .bar .foo {} because when the browser finds .foo, in the second scenario, it has to walk up the DOM to check if .foo has an ancestor .bar. The more specific tag requires more work from the browser, but this penalty is not likely worth optimizing. If you measure the time it takes to parse CSS, you'll be amazed at how fast browsers truly are. The more specific rule is more expensive because it has to traverse more nodes in the DOM tree - but that extra expense is generally minimal. Measure first. Optimize as needed. Specificity is likely not your low hanging fruit. When it comes to CSS, selector performance optimization, improvements will only be in microseconds. There are other ways to optimize CSS, such as minification, and separating defered CSS into non-blocking requests by using media queries.
What is DOM manipulation?
Calling JavaScript methods on elements in the DOM tree to create dynamic actions
What does the throw statement let you do?
Create custom errors.
Describe the steps of DOM construction.
DOM construction is incremental. 1. The HTML response turns into tokens which 2. turns into nodes which 3. turn into the DOM Tree. Nodes contain all relevant information about the HTML element. The information is described using tokens. Nodes are connected into a DOM tree based on token hierarchy. If another set of startTag and endTag tokens come between a set of startTag and endTags, you have a node inside a node, which is how we define the hierarchy of the DOM tree. The greater the number of nodes, the longer the following events in the critical rendering path will take. Measure! A few extra nodes won't make a difference, but divitis can lead to jank.
What's the difference between a descendant selector (eg. div p {}) and a selector with a child combinator (>) (eg. div > p {})?
Descendant means anywhere nested within it in the DOM tree. Could be a direct child, could be five levels deep, it is still a descendant. This is different than a child combinator (>) which targets a direct child, requiring the element to be the next nested level down.
What is dynamic typing in relation to JavaScript?
Dynamic typing means that the same variable can hold and be reassigned different datatypes
What is functional programming?
Functional programming (often abbreviated FP) is the process of building software by: 1. composing pure functions, 2. avoiding shared state, 3. mutable data, and 4. side-effects. 5. functional programming is declarative rather than imperative, and 6. application state flows through pure functions. It is to be contrasted with object-oriented programming, where application state is usually shared and collocated with methods in objects.
What are closures?
Functions constructed so as to do the following: 1. Allow an inner function to access an enclosing function's variables, thus providing encapsulation 2. Allow an inner function to preserve (closure) an enclosing function's scope chain when this enclosing function is executed
What is HTML?
HTML, which stands for HyperText Markup Language, is the language that sets the skeletal structure of web page elements. It provides a structure to hypertext parsed by a browser. HTML documents are organized by element tags with attributes and values which are parsed, styled by CSS, and manipulated by JavaScript to render web sites and web apps.
What is JavaScript's ability to call functions before they appear in the code called?
Hoisting
When is a RangeError thrown?
If you use a number that is outside the range of legal values
When is a URI Error thrown?
If you use illegal characters in a URI function
Why is it important to understand hoisting?
If you use var or are otherwise able to make a global variable AFTER trying to use the variable before it's declared, you may not know it until there's a problem because the value the variable was initialized with is not known to the function (though it's declaration is known from the compilation phase) when you try to use it. function hoist(){ console.log(x); let x = 9; } Steps in a poorly-made function: 1. In the compilation stage, the JS engine reads the function and variable declarations but doesn't notice any values. 2. In the execution stage, the JS engine executes calls (invocations) from top to bottom and reads the values for the execution. So console.log(x) is read before the engine knows that x has the value of 9. Although a lot of related mistakes are usually caught by IDEs, Chrome Dev Tools doesn't catch it, and not all related mistakes are indeed caught.
What are three general ways to optimize for the Critical Rendering Path process?
Improve page load speed by 1. prioritizing which resources get loaded, 2. controlling the order in which they are loaded, and 3. reducing the file sizes of those resources.
What is a good example of a case when callback functions are executed in synchronous operations?
In JavaScript array methods such as forEach(), filter(), and map()
What is bubbling in Javascript?
In bubbling the innermost element's event is handled first and then the outer: the <p> element's click event is handled first, then the <div> element's click event..
What is capturing propagation in JavaScript?
In capturing the outermost element's event is handled first and then the inner: the <div> element's click event will be handled first, then the <p> element's click event
Where is the spread operator mostly used?
In variable arrays where more than one value is expected.
What is the most important thing that AJAX allows you to do?
It makes it possible to update parts of a web page without reloading the whole page.
What does the parse method in the JSON API in JavaScript do?
It parses a JSON object into a proper object to be manipulated in a programming language Example: let jsonString = `{"id":7, "name":"Example Name"}`; let jsonObject = JSON.parse(jsonString);
What does a single DOM node start and end with?
It starts with a startTag token and ends with an endTag token.
What does the .stringify method of the JSON API in JavaScript do?
It turns an an object into a JSON string Example: let jsonObject = {id:7, name:'Example Name'}; let jsonString = JSON.stringify(jsonObject);
What happens if you use a let variable before it's declared? (for example, x = 9 then let x;
It will result in a ReferenceError. The variable is in a "temporal dead zone" from the start of the block until it is declared:
What is the doctype declaration?
It's a piece of code that tells which version of HTML is being used on the web page.
With two CSS declarations of the same specificity level, what determines which rule overwrites the other?
It's based on the last rule to be parsed, starting from the top of a style sheet or block to the bottom, and which sheet is loaded last.
What makes is the inner function of a closure private?
It's scope is only available in its outer function
Which is faster and shorter for carrying data to and from a server, XML or JSON?
JSON
What is JSON?
JSON, which stands for JavaScript Object Notation, is a lightweight data format resembling JavaScript objects for simple exchange of data between different programming languages.
What is Javascript?
JavaScript is an object-oriented scripting language supported by most web browsers using an engine such as V8 in Chrome and SpiderMonkey on Firefox. Source code is directly translated (and now JIT compiled as well) into instructions to be run by the browser.
What does the finally statement do?
Lets you execute code, after try and catch, regardless of the result
What does the catch statement do?
Lets you handle the error
What is story pointing?
Making an estimation of number of points, usually 1-10, for how hard you think it will be to complete something
What are objects in JavaScript?
Maps of keys and values that form the basis of most other complex data types in JavaScript
Can you overload functions in JS?
No. There is no function overloading in JavaScript since it allows the passing of any number of parameters of any type. You have to check inside the function how many arguments have been passed and what type they are. The correct answer is THERE IS NO OVERLOADING IN JAVASCRIPT.
What do Date objects, Array objects, and Person objects (as an example of a user-defined object class) inherit from?
Object.prototype
What is on the top of the prototype inheritance chain?
Object.prototype
Describe the Layout stage in the Critical Rendering Path.
Once the render tree is built, layout becomes possible. Layout is dependent on the size of screen. The layout step determines where and how the elements are positioned on the page, determining the width and height of each element, and where they are in relation to each other. What is the width of an element? Block level elements, by definition, have a default width of 100% of the width of their parent. An element with a width of 50%, will be half of the width of its parent. Unless otherwise defined, the body has a width of 100%, meaning it will be 100% of the width of the viewport. This width of the device impacts layout. The viewport meta tag defines the width of the layout viewport, impacting the layout. Without it, the browser uses the default viewport width, which on by-default full screen browsers is generally 960px. On by-default full screen browsers, like your phone's browser, by setting <meta name="viewport" content="width=device-width">, the width will be the width of the device instead of the default viewport width. The device-width changes when a user rotates their phone between landscape and portrait mode. Layout happens every time a device is rotated or browser is otherwise resized. Layout performance is impacted by the DOM -- the greater the number of nodes, the longer layout takes. Layout can become a bottleneck, leading to jank if required during scrolling or other animations. While a 20ms delay on load or orientation change may be fine, it will lead to jank on animation or scroll. Any time the render tree is modified, such as by added nodes, altered content, or updated box model styles on a node, layout occurs. To reduce the frequency and duration of layout events, batch updates and avoid animating box model properties.
CSS is called render-blocking; what kind of blocking is JavaScript called?
Parser-blocking
What are three tips to put the general ways to optimize for CRP into practice?
Performance tips include 1) minimizing the number of critical resources by deferring their download, marking them as async, or eliminating them altogether, 2) optimizing the number of requests required along with the file size of each request, and 3) optimizing the order in which critical resources are loaded by prioritizing the downloading critical assets, shorten the critical path length.
Is the inner function of a closure public or private?
Private
What is prototypal inheritance?
Prototypal inheritance is the way JavaScript uses inheritance. You can set a prototype on a class (object constructor), which allows you to set properties and methods for the entire class.
Is the outer function of a closure public or private?
Public
Do all modern browsers support the XMLHttpRequest object?
Yes
What are the different Scrum artifacts?
Scrum artifacts are categories of task stages. 1. Product Log (of user stories) 2. Sprint Log (of user stories) 3. Increment (Progress) 4. Done
What did HTML5 add?
Semantic tags
What is the difference between server-side validation and client-side validation of form input?
Server side validation is performed by a web server, after input has been sent to the server. Client side validation is performed by a web browser, before input is sent to a web server.
What is the difference between a = 5 and var a = 5?
Short answer: There is no functional difference, as the JS engine will put the var there for you.
What is similar and different between the spread operator and the rest parameter?
Similar: Same syntax: ... Different: The spread operator stands in for an array of elements or objects. The rest operator allows us to pass an indefinite number of parameters to a function and access them in an array
How many falsey values are there in JavaScript?
Six
What is the Event object?
Sometimes inside an event handler function, you'll see a parameter specified with a name such as event , evt , or simply e . This is called the event object, and it is automatically passed to event handlers to provide extra features and information.
What are template literals?
Template literals are string literals that allow embedded expressions.
What does the try statement let you do?
Test a block of code for errors. The throw statement lets you create custom errors. The catch statement lets you tell what to do when an error is caught. The finally statement lets you execute code, after try and catch, regardless of the result.
What method can you use to stop further propagation of an event through the DOM?
The .stopPropagation() method
With bubbling propagation, If you have a <p> element inside a <div> element, and the user clicks on the <p> element, which element's "click" event should be handled first?
The <p> element
What is the difference between == and === in JavaScript?
The == is a loose equality operator, meaning that the value of each operand need to be equal in value but not in type. The === is a strict equality operator, meaning that the value of each operand need to be equal AND the types must be the same.
Describe the CSS box model.
The CSS box model is a series of quadrilateral constructs nested inside each other that represent a specific aspect of the layout of containers. From the outermost quadrilateral construct, it follows this order: 1. margin 2. border 3. padding 4. content
What does HTML get parsed into?
The DOM tree
What is the specific name of JVM's compiler?
The JIT (Just In Time) compiler
What is a good example of a case when callback functions are executed in asynchronous operations?
The callback functions executed inside a .then() block chained onto the end of a promise after that promise is fulfilled or rejected
What do you use to find out of an event is cancelable with .preventDefault() or not?
The cancelable property
What is the fact that you can cause a variable to accept different types due to?
The fact that JS is a loosely-typed language.
Describe the painting stage in the Critical Rendering Path.
The last step is painting the pixels to the screen. Once the render tree is created and layout occurs, the pixels can be painted to the screen. Onload, the entire screen is painted. After that, only impacted areas of the screen will be repainted, as browsers are optimized to repaint the minimum area required. Paint time depends on what kind of updates are being applied to the render tree. While painting is a very fast process, and therefore likely not the most impactful place to focus on in improving performance, it is important to remember to allow for both layout and re-paint times when measuring how long an animation frame may take. The styles applied to each node increase the paint time, but removing style that increases the paint by 0.001ms may not give you the biggest bang for your optimization buck. Remember to measure first. Then you can determine whether it should be an optimization priority.
What is the difference between an event listener and an event handler?
The listener listens for the event happening, and the handler is the code that is run in response to it happening
In the DOM construction stage of the Critical Rendering Path process, what determines how long events happen following DOM Tree formation?
The number of nodes
Describe what the render tree captures in the Critical Rendering Path.
The render tree captures both the content and the styles: the DOM and CSSOM trees are combined into the render tree. To construct the render tree, the browser checks every node, starting from root of the DOM tree, and determine which CSS rules are attached. The render tree only captures visible content. The head section (generally) doesn't contain any visible information, and is therefore not included in the render tree. If there's a display: none; set on an element, neither it, nor any of its descendants, are in the render tree.
What is the Critical Rendering Path?
The sequence of steps the browser goes through to convert the HTML, CSS, and JavaScript into pixels on the screen
What is ECMAScript?
The standard JavaScript is based on.
What is done in a Sprint Planning Meeting?
The team selects, starting at the top of the product backlog, as much as it can commit to deliver by the end of the sprint.
What can you use in JavaScript to retrieve the type of a JavaScript variable or expression?
The typeof operator
What is variable hoisting?
The way variable declarations seem to get 'hoisted' to the top of the current scope during the compilation stage. This means that if a variable with var or without a declaration keyword at all is declared and initialized after it is supposed to be executed, such as if it should appear in a console.log, the execution will not be made.
What are the different states of AJAX?
There are 5 different numerical states of Ajax: 0 (The request is not initialized) 1 (The request has been set up) 2 (The request has been sent) 3 (The request is in process) 4 The request is complete
What type is null?
This is a controversial issue in the culture of programming and it warrants a multifaceted answer: 1. The typeof operator will determine null to be an object. 2. Some people say that null is its own type, which basically means that null being shown as an object with typeof is a bug. 3. Some people say null should indeed be an object.
What is the for attribute of the <label> tag used for?
To act like the id attribute of the <input> element ... to bind the <label> tag and its corresponding <input> element together Example: <label for="other">Other</label> <input type="radio" name="gender" id="other" value="other"><br><br>
What are asynchronous callbacks used for?
To continue code execution after an asynchronous operation has completed
What does it mean to register an event handler?
To define an event listener to run in response to an event
What is the XMLHttpRequest object used for?
To exchange data with a server behind the scenes. This means that it is possible to update parts of a web page without reloading the whole page.
What is the purpose of a closure?
To provide a reusable inner function that has access to the variables of its enclosing function's scope The specifics: a. To prevent unnecessarily duplication of code ... to perform more complex operations in a relatively small amount of code b. To protect important variables and methods within its overall structure from being changeable when the enclosing function is called
Every value in JavaScript evaluated to what kind of boolean values?
Truthy and falsey
What is bubbling and capturing?
Two ways of event propagation in the HTML DOM
What is type coercion?
Type coercion is the process of converting value from one type to another
How do I create an unordered/ordered list?
Use <ul> or <ol> tags with <li> tags for each list item nested within them.
How do you pass parameters to a function called by an event listener?
Use an anonymous function that calls the specified function with the parameters Example: document.getElementById("myBtn").addEventListener("click", function() { myFunction(p1, p2); }); function myFunction(a, b) { var result = a * b; document.getElementById("demo").innerHTML = result; }
How do I cancel an event in JavaScript?
Use preventDefault()
How do I create a table?
Use the <table> tags, then <th> if making a header row, then <tr> for a regular table row, then <td> for each individual cell in each row. Example: <table> <tr> <td>Jill Smith</td> <td>50</td> </tr></table>
How is DOM node information described?
Using tokens
What are the differences between const, let, and var?
Variables and Scope Early versions of JavaScript had only one variable type, var, which is scoped to either a function or the global context. ES6 introduced let, which also has lexical scoping (i.e. block scope), and const, which cannot be reassigned.
What are the main differences between the Waterfall, Agile, and DevOps methods of software development?
Waterfall is a one step at a time process of SDLC steps with no built-in or cyclical recursion, so changes that need to be made result in a lot of back and forth interaction that can result in a waste of time due to uncoordinated revisions. Agile is a process that includes all of the SDLC steps in distinct iterations for a more built-in revision process. DevOps eliminates the inefficiencies of both the Waterfall and Agile methods by leveraging tools that allow for continuous integration of multiple steps in the SDLC.
What makes a closure a closure according to Chrome DevTools?
When a function is paired with a reference to another function's outer scope (lexical environment)
When is an InternalError thrown?
When an internal error in the JavaScript engine is thrown, eg. "too much recursion".
What does Agile value more: working software or comprehensive documentation?
Working software
Are the terms event handler and event listener often used interchangeably?
Yes
Can any variable can be assigned and re-assigned values of any type in JavaScript?
Yes
Can you add event listeners to any DOM object, such as the window object, as well as to HTML elements?
Yes
Can you add events of different types of event (mouseover, click, etc.) to the same element?
Yes
Can you add many event handlers of the same type to one element, i.e. two "click" events?
Yes
Can you add more than one event listener to the same element?
Yes
Can you can add many event handlers to one element?
Yes
Can you pass parameters through a function that is called by an event listener?
Yes
Are try-catch/try-catch-finally blocks useful for catching unforeseen errors, or can they also be used to reverse a block already in place?
Yes, they can. Example: function feedPet(animalType, foodAmount){ if(animalType === 'racoon'){ throw new Error("You shouldn't feed racoons pet food"); } console.log("Dispensing " + foodAmount + " units of food for my " + animalType); } function doChores1(){ feedPet("racoon", 5); //if this function is called, it will cause the error to be thrown (program will crash) } // doChores1(); function doChores2(){ try{ feedPet("racoon", 5); //if this function is called, it will cause the error to be thrown (program will crash) }catch(err){ console.log("I got an error message that says \'" +err.message+ "\' but I am going to feed the racoon anyway"); }finally{ //optionally you can include a finally block, which will occur regardless of whether or not an exception occurs; console.log("I am out of here"); } } doChores2();
Does a closure have access to the parent scope even after the parent function has closed?
Yes. For example, you can invoke it directly, or through assigning the invocation to variable, eg.: function x (){ return function y(){ } } x(); calls outer function x = x(); x(); calls inner function ... it's an invocation of an invocation x(); calls inner function again
In the HTML parsing process in the Critical Rendering Path, what happens when another set of startTag and endTag tokens come between a set of startTag and endTags?
You have a node inside a node, which is how we define the hierarchy of the DOM tree.
How do I create various form data?
You provide a form with <form> tags with <input> tags for each input item (with type attributes of radio button, checkbox, text, etc.), <input> tags and a pair of element tags, usually <button>, that submits the form. Then the data is transferred to a database via a system such as PHP, Ruby on Rails, or Java Servlets.
How do I select various elements in the DOM?
You use JavaScript DOM Selectors, methods that get (select) HTML elements by: 1. id HTML attribute (getElementById()) 2. classname HTML attribute (getElementsByClassName()) 3. tag name HTML attribute (getElementsByTagName()) 4. CSS selector (querySelector(), querySelectorAll())
How do you add an event listener?
You use the addEventListener() method For example, to add an event listener that fires when a user clicks a button: document.getElementById("myBtn").addEventListener("click", displayDate);
What is procedural programming?
a programming paradigm, derived from structured programming,[citation needed] based on the concept of the procedure call. Procedures (a type of routine or subroutine) simply contain a series of computational steps to be carried out. Any given procedure might be called at any point during a program's execution, including by other procedures or itself.
What method makes it easier to control how an event reacts to bubbling?
addEventListener()
What is Agile?
an umbrella term used to describe a project management methodology which breaks down large complex projects into smaller manageable chunks
Does JavaScript have automatic or manual type coercion?
automatic
Fill in the blank: "At regular intervals, the team reflects on how to _"
become more effective
Does each of these expressions evaluate to true or false? What data type is each? checkTruthy(true); checkTruthy(1); checkTruthy(-1); checkTruthy(0); checkTruthy(NaN); checkTruthy(null); checkTruthy(undefined); checkTruthy({}); checkTruthy([]); checkTruthy(''); checkTruthy('hello'); checkTruthy('false'); checkTruthy(Infinity); checkTruthy(-Infinity);
checkTruthy(true); //true boolean checkTruthy(1); //true number checkTruthy(-1); //true number checkTruthy(0); //false number checkTruthy(NaN); //false number checkTruthy(null); //false obj checkTruthy(undefined);//false undefined checkTruthy({}); //true object checkTruthy([]); //true object checkTruthy(''); //false string checkTruthy('hello'); //true string checkTruthy('false'); //true (this is a string) checkTruthy(false); //false boolean checkTruthy(Infinity); //true number checkTruthy(-Infinity);//true number
Fill in the blank: "agile processes harness change for the customer's _"
competitive advantage
What is a good example of a closure and what is going on in it step by step?
const createDivisibleFunction = function(divisor) { return function(num) { return num % divisor === 0; }; }; // Then let's store the returned functions in variables so that we can reference and invoke them: const divisibleBy3 = createDivisibleFunction(3); const divisibleBy5 = createDivisibleFunction(5); divisibleBy3; // => ƒ (num) { return num % divisor === 0; } divisibleBy5; // => ƒ (num) { return num % divisor === 0; } divisibleBy3(9); // => true divisibleBy3(10); // => false divisibleBy5(9); // => false divisibleBy5(10); // => true
What does Agile value more: customer collaboration or contract negotiation?
customer collaboration
Fill in the blank: "Business people and developers must work together _ throughout the project."
daily
Which JavaScript method retrieves all elements in the document with a specific class name? (eg. class="example")
document.querySelectorAll(".example")
What does XML presents data as, for the DOM to use to manage?
documents
How do you make default parameters in JavaScript?
function example(variable = value, variable = value){}
What does Agile value more: processes and tools, or individuals and interactions?
individuals and interactions
Is JavaScript loosely typed or strictly typed?
loosely typed
What two properties do JavaScript errors (of the Error object class) contain?
name and message
What is the name of the property in AJAX that is used to make state changes?
onReadyStateChange()
What are some css selectors?
p{}; p, h1{}; .class{}; #id{}; div > p{}; div p {}
What is the name of the property that represents each number of state in AJAX?
readyState
What does Agile value more: responding to change or following a plan?
responding to change
Fill in the blank: "The best architectures, requirements, and designs emerge from _ teams.
self-organizing
Fill in the blank: "agile processes promote _ development."
sustainable
What allows a browser to change and alter the content of an HTML page through stylesheets or scripts without affecting the original document file?
the DOM
What is the object we use for AJAX in JavasScript?
the XMLHttpRequest Object