week 5 Flashcards

Question

JS syntax

Answer 1

- comments: single line "//" or multi lines "/* */" - literals: fixed values. can be numbers, strings, boolean values, etc. - keywords: tokens that have special meaning in JavaScript. ex: break, case, catch, continue, do, else, finally, for, function, if, in, new, return, switch, this, throw, try, typeof, var, void, while, etc.

Answer 2

- used to store data values - uses the var keyword to declare variables - starts only with the alphabet, underscores (_) or dollar ($) - cannot start with a number and also there shouldn't be spaces in-between.

Answer 3

- performs some operation on single or multiple operands and produces a result Arithmetic operators - +, -, *, /, %, ++, -- Comparison Operators - ==, ===, !=, >, =, <= Logical Operators - &&, ||, ! Assignment Operators - =, +=, -=, *=, /=, %= Ternary Operator - ? : ;

Answer 4

if/else if/else for for-in: allows iteration over the keys of any object for-of: allows iteration over an array or array-like object while do-while

Answer 5

JavaScript does not declare types, has no static type checking available, single-threaded and runs off of an event-loop, can run on a server or on a browser, is multi-paradigm language, utilizes prototype-based objects, class-based syntax

Answer 6

string number: BigInt used to represent integers of arbitrary length. use n at end. boolean null: nothing undefined: not initialized object: set of key-value pairs. key is string, value can be any type. Symbol

Answer 7

== is used for comparison between two variables irrespective of the data type of variable. === is used for comparison between two variables but this will check strict type, which means it will check datatype and compare two values.

Answer 8

process of converting a value from one data type to another data type explicit: can explicitly convert the datatype of the variable. For example: Number('3'), String (123), Boolean(2) implicit: JavaScript is a loosely-typed language, values can also be converted between different types automatically. It usually happens when you apply operators to values of different types. For example: '3' * '2', 2/’5', 123 + '', 7 || 'hello', 123 != '456'

Answer 9

falsy: any expressions or value that results in boolean false value - - Obviously boolean false is false. - - Any empty string will be evaluated to false. - - Any undefined variable will be equal to false. - - Any null variable will be equal to false. - - Any numerical expression with result in NaN (not a number) will be equal to false. - - Any numerical expression with result in zero will be equal to false. truthy: any expressions or value that results in boolean true value

Answer 10

defines the lifetime and visibility of a variable global: defined outside any function, block, or module, accessed everywhere in the application, lifetime is throughout the application, can declare the global variables in a browser using the global window object. local: - - function: variable declared in a function is only visible inside that function. var is the keyword to define variable for a function-scope accessibility. These variables cannot be accessed or modified. - - block: scope of the variables declared inside the {} (curly brackets), use const and let keywords - - lexical: variable defined outside a function can access the inside another function defined after the variable declaration. The inner functions are lexically bound to the execution context of their outer functions.

Answer 11

- variable declarations made with var and function declarations made with the function keyword are hoisted - or moved - to the top of the scope in which they are declared when the JavaScript interpreter parses the code - means that variables and functions can be used before they are even declared

Answer 12

allow developers to declare variables in the block scope, which means those variables exist only within the corresponding block. - value of a const variable can't be changed through reassignment, and it can't be redeclared.

Answer 13

- a variable that allows the programmer to store more than one value - are objects and thus consist of key/value pairs and inherit from the Array prototype - array values can consist of JavaScript primitives, or other JavaScript objects, including arrays and functions. - created using square brackets - length of an array can be changed - remove elements using splice(), pop(), and shift

Answer 14

sort() indexOf() & lastIndexOf() find() & findIndex() filter(): takes a callback function and creates a new array that is the made up of elements for which the callback function returns a truthy value. original array is not modified map(): takes a callback function and creates a new array that is the result of calling the function on each element of the array. original array is not modified reduce(): takes a callback function and returns a single value that is the result of calling the function for each value in the array

Answer 15

- provides an easy way to create multiline strings and perform string interpolation - strings that enclosed within the backtick character(`) - allow for embedded expressions (placeholders), which are indicated by the dollar sign and curly braces ($(expression}). These expressions can be used to evaluate code.

Answer 16

- to parse template literals with a function. - ex. "tagFunction`Hello ${firstName} ${lastName}!`" does same as "tagFunction(['Hello ', ' ', '!'], firstName, lastName)"

Answer 17

- allows the accessing of raw strings as they were entered. - String.raw() is a built-in function which accepts a string literal argument and returns raw string. It returns the strings without any interpretation of backslashed characters.

Answer 18

- defined using the function keyword syntax: function name(parameter1, parameter2, parameter3) { // code to be executed } - can return a value by executing the code after the function call. To return a value, we use the return keyword.

Answer 19

- all function arguments are passed by value primitives: primitive value is copied to a new variable pbjects: value that is stored in a variable containing an object is not the object itself. Instead, an object reference is being stored inside of that variable.

Answer 20

``` Function Expression / Anonymous Function: function declared without any identifier refer to it. It is an expression that the variable holds a function. For example: var x = function (a, b) {return a * b}; Self-Invoking Functions / IIFE Functions: an anonymous function that is invoked immediately after its definition. holds an anonymous function inside a set of parentheses (), which does the execution. Syntax : (function(){ code goes here...})(); Callback Functions: a function that gets executed after another function completes the execution. It helps us develop asynchronous JavaScript code and keeps us safe from problems and errors. use "callback" keyword as last parameter. Closures: a function that remembers and accesses the variables and arguments of its outer function even after the function return. The closure able to access the variables defined between its curly brackets, the outer function’s variables and the global variables. ```

Answer 21

a reference variable that refers to the current object. this alone: refers to a global Object. this in function: refers to the Global object [object Window] this in strict mode this in Event Handlers: refers to the HTML element that received the event this in Object Method Binding: refers to the object The call() and apply() method: allows us to write a method that can be used on different objects.

Answer 22

- provides a concise way to write functions in JavaScript One-line arrow functions have implict return and defined without curly braces. Multiline arrow functions have multiple statements inside the function, enclosed with curly braces and need an explicit return to return something.

Answer 23

- strictness of code - can be applied to function level in order to implement strictness only in that particular function. - does not allow us to use undefined variables, reserved keywords as variable or function name, duplicate properties of an object, duplicate parameters of the function, assign values to read-only properties, Modifying arguments object, and Deleting an undeletable property.

Answer 24

tree-like hierarchical representation of the HTML document - Each HTML element in the DOM tree is an object. The positions of the elements in the DOM tree are nodes.The tags are element nodes. Attributes in the elements are attribute nodes. The text inside elements is a text node. It may not have children and is always a leaf of the tree. The root of the DOM tree is a element, which is known as a document object.

Answer 25

- by ID: getElementById() method is used to select an element based on its unique ID. will return the element as an object if the matching element was found, or null if no matching element was found in the document. - by Class Name: getElementsByClassName() method used to select all the elements having specific class names. This method returns an array-like object of all child elements which have all of the given class names. - by Tag Name: getElementsByTagName() method used to select HTML elements by tag name. This method also returns an array-like object of all child elements with the given tag name. - with CSS Selectors: querySelector() and querySelectorAll() methods to select elements that matches the specified CSS selector. The querySelector() finds the first element that matches a CSS selector whereas the querySelectorAll() finds all elements that match a CSS selector.

Answer 26

- Create Elements: createElement() method is used to create a new element and attach it to the DOM tree - Replace Child Elements: replaceChild() method is used to remove an element from the DOM tree and insert a new one in its place. - Remove Child Elements: removeChild() method is used to remove an element from the DOM tree. - Append a Node: appendChild() method is used to add a node to the end of the list of child nodes of a specified parent node. - Insert a Node before another: insertBefore() method is used to insert a node before another node as a child node of a parent node. - Insert a Node After another: can insert a new node after an existing node as a child node, by selecting a parent node of the existing node and call the insertBefore() method on the parent node to insert a new node before that immediate sibling node. - Get or Set text of a Node: textContent property is used to get and set a text content inside a particular node. - Get or Set HTML of Element: innerHTML property to get the text and inner HTML elements inside a the particular element and the setting will replace the existing text and inner tags inside an element with the new content. - Clone a Node: cloneNode() method is used to clone an element. The cloneNode() method accepts an optional parameter. If the parameter value is true, then the original node and all of its descendants are cloned. If the parameter value is false, only the original node will be cloned.

Answer 27

occur when user interaction takes place on a web page or is triggered by browser onclick - This is a click event occurs when a user clicks the element on a web page. ondblclick - This is a click event occurs when a user double clicks the element on a web page. onload - This is a load event occurs when the browser has finished loading the page. onunload - This is a load event occurs when a user closes the document. onresize - This is a load event occurs when the browser window is minimized or maximized. onmouseover - This is a mouse event occurs when the user moves the mouse over an HTML element. onmouseout - This is a mouse event occurs when the user moves the mouse away from an HTML element onkeydown - This is a keyboard event occurs when the user presses down a key on the keyboard onkeyup - This is a keyboard event occurs when the user releases a key on the keyboard onfocus - This is a form-input event occurs when the user gives focus to an element on a web page onblur - This is a form-input event occurs when the user takes the focus away from a form element or a window onchange - This is a form-input event that occurs when a user changes the value of a form element onsubmit - This is a form-input event that occurs when the user submits a form on a web page.

Answer 28

- a function in JavaScript that waits for an event to occur - addEventListener() function is an inbuilt function in JavaScript used to handle the event syntax: element.addEventListener(event, function, useCapture) - removeEventListener() method used to remove an event handler that has been attached with the addEventListener() method.

Answer 29

bubbling: - event propagates from the target element to its parents, then all its ancestors that are on the way to top. - Bottom to Top approach. capturing: - event propagates from the top element to the target element. - Top to Bottom approach.

Answer 30

Topmost nodes: - The document object is the root of every node in the DOM. The topmost tree nodes are associated with document properties: document. documentElement property - refers the DOM node of the tag. document. head property - refers the DOM node of the tag. document. body property - refers the DOM node of the tag. Parent Nodes: - The parent of any node is the node that is one level above in the DOM tree. There are two properties to get the parent — parentNode and parentElement. Child Nodes: - The children of a node are the nodes that are one level below it. The properties are listed below: childNodes property - returns a list of child nodes, including text nodes. firstChild property - give access to the first child node. lastChild property - give access to the last child node. Sibling Nodes: - Siblings are nodes that are children of the same parent. The siblings of a node are any node on the same tree level in the DOM. previousElementSibling property - give access to the previous sibling Node, i.e. the node that immediately precedes the specified node. nextElementSibling property - give access to the next sibling vode, i.e. the node that immediately precedes or follows the specified node.

Answer 31

- A key value pair follows a specific syntax, with the key followed by a colon followed by the value. Key/value pairs are separated by comma applications: - Used to transmit data between the server and web application using JSON. - JSON format helps transmit and serialize all types of structured data. - Allows us to perform asynchronous data calls without the need to do a page refresh. - Web services and Restful APIs use the JSON format to get public data.

Answer 32

- describes the process of exchanging data from a web server asynchronously with the help of XML, HTML, CSS, and JavaScript work flow: 1. A client event occurs on a webpage. (for example, the user clicks a button) 2. JavaScript creates an XMLHttpRequest object. 3. The XMLHttpRequest object makes an asynchronous request to the server. 4. The server process the received HttpRequest. 5. The server creates a response and sends data back to the browser. 6. Browser process the returned data using JavaScript. 7. The page content updated by javascript.

Answer 33

- is used to make HTTP requests to the server and receive data in response. - syntax to create XMLHttpRequest object: var xhttp = new XMLHttpRequest(); - send request to server: open(method, URL, async), send() - server response: - ---- responseText - Returns the response as a string. - ---- responseXML - Returns the response as XML. - ---- status - Returns the status as a number (For example, 200: "OK", 403: "Forbidden",404: "Page not found") - ---- statusText -Returns the status as a string (e.g., "Not Found" or "OK"). the state of availability of data is given by the readyState attribute of XMLHttpRequest. The onreadystatechange function is called every time the readyState changes. The readyState property defines the status of the XMLHttpRequest: readyState = 0 : Not intialized readyState = 1 : Connection establised readyState = 2 : request received readyState = 3 : processing request readyState = 4 : request finished and response is ready

Answer 34

- JSON in Request Payload: In JavaScript, to send a request using JSON data, we need to serialize our JSON object into a string. The JSON.stringify() method is used to converting an object to a string. Then, the server receives the string and process the request. - JSON in Response Body: If the response from the server is string/text, we need to parse them into a JSON object. The JSON.parse() method converts a JSON string representation to a JSON object. - XML in Response Body: The responseXML field contains the data as a read-only Document Object Model.

Answer 35

- used to handle asynchronous operations in JavaScript. - constructor syntax: let promise = new Promise(function(resolve, reject) { // executor (the producing code, "singer") }); The function passed to new Promise is called the executor. When a promise object is created, the executor runs automatically. It contains the code which produces the result. The arguments resolve and reject are callbacks. When the executor obtains the result, it should call one of these callbacks: resolve(value) — if the job finished successfully, with the result value. reject(error) — if an error occurred, the error is the error object. The Promise.status property, gives information about the state of the Promise object. The promise object can have three states: pending, fulfilled, and rejected. A Promise object connects the executor and the consuming functions which will receive the result or error. Consuming functions can be registered using methods .then, .catch and .finally.

Answer 36

- provides a fetch() method defined on the window object. This method used to send requests and returns a Promise that retrieved from the response. Promise object represents a value that may not be available now but, will be resolved in the future. - syntax for fetch() method: let promise = fetch(url, [options]) - handle errors: surround our await instruction with a try...catch block or to append a catch() callback to our promise methods to access the response body in various formats: response. text() – read the response and return as text. response. json() – parse the response as JSON. response. formData() – return the response as FormData object . response. blob() – return the response as Blob (binary data with type). response. arrayBuffer() – return the response as ArrayBuffer(low-level representation of binary data).

Answer 37

Async and Await are extensions of promises. async -An async function is a function that operates asynchronously via the event loop, returns a Promise object implicitly. async ensures that the function returns a promise. await - The await keyword is only valid inside async functions. await makes JavaScript wait until that promise settles and returns its result.

Answer 38

Background: - client-server protocol - Information is transferred via multiple messages - part of the application layer and thus requires some underlying communication protocol to transmit data- that protocol is TCP. Requests: Verb - Indicates the executing HTTP method. URL - Specifies the endpoint where the resource is located. HTTP Version. Request Header - META-DATA (information) of the Request as key-value pairs such as format supported by the client, browser type, etc. Request Body - Message content or resource representation. Responses: HTTP Response - Response Code. 200 (OK), 403 (Forbidden), 404 (Not Found), 500 (Internal Error), etc. HTTP Version. Response Header - META-DATA for the Response such as: content length, content type, date, etc. Response Body - Some kind of payload in the case where HTTP is used in the context of a RESTful service then the body is a resource representation.

Answer 39

- HTTP request verbs or methods indicate the action that a client hopes to perform. characteristics of requests: idempotent - "identical request can be made once or several times in a row with the same effect while leaving the server in the same state"- MDN safe - doesn't alter the server's state. read-only cacheable - Determines if there is a chance the response to the corresponding method can be cached allowed in HTML forms request has a body - GET - HEAD - POST - PUT - DELETE - CONNECT - OPTIONS - TRACE - PATCH

Answer 40

``` Informational responses (100–199), Successful responses (200–299), Redirects (300–399), Client errors (400–499), Server errors (500–599) ```

Answer 41

- Representational State Transfer. - for a web service to be RESTful it has to adhere to a set of guidelines or constraints - should not retain information about the state of the client. - defined by four interface constraints: identification of resources; manipulation of resources through representations; self-descriptive messages; and, hypermedia as the engine of application state - the server creates an object or resource and returns the state of that object (the values contained within the object) when requested by the client.

Answer 42

- resources in REST: information that can be named - resource representation: the particular state of the resource that is what is returned to a client of a restful service. format is in JSON or XML - resource identifier: make resources useful across the network and allow the client to request a resource's representation - URL: a very frequently used form of resource identifier in a RESTful service RESTful URL construction: Whenever possible use nouns to name resources Typically begin with the plural collection of a particular resource Then use path parameters to identify a "singleton" resource in a specific document/record within a particular collection. Capitalize on path structure to represent a heirarchy Identify stores of resources that are managed by the client Finally use query parameters to filter resources of a particular type. /associates/{id}/projects?subject=java - /associates/{id}/projects?week=2

Answer 43

Interface Constraints: Identification of resources Manipulation of resources through representations Self-descriptive messages Hypermedia as the engine of application state Client-Server: "Separation of concerns"- the client focuses on the user interface and the server focuses on data storage. => Allows the two to develop separately/independent Stateless: The server should not retain any information about the state of the session. Cacheable: Responses should be explicitly labeled as cacheable or not. When the response is cached, the client may reuse the data in the response for later. This improves network efficiency. Layered System: The system should be organized into layers so that components can only communicate with components that are part of the same layer. It essentially provides some isolation to parts of the system.

Answer 44

Step 1 - Install the JSON Server using the npm install -g json-server command. JSON Server is available as a NPM package. Step 2 - Create a new JSON file with name db.json. This file contains the JSON data which will be exposed by the REST API. Step 3 - Running the JSON Server using the json-server --watch db.json command. We need to pass over the file name containing our JSON structure - db.json- as a parameter. Step 4 - Now, we are going to test the REST API Endpoints exposed by the JSON Server with Postman.

Answer 45

- import Jackson library by adding dependencies to pom.xml file - create data class to act as resource - going to utilize the Jackson Object Mapper to create a JSON representation

week 5 Flashcards

(69 cards)