JavaScript

Question 1

What is JavaScript?

Answer 1

• JS is a programming language written for the web. It’s the final piece along with HTML and CSS
  
  • Brandon Ike created in 1995 to make it easier to add dynamic and interesting elements to websites
  • Now there are endless opportunities with JS, even outside of the web

Question 2

Truthy and Falsy

Answer 2

• Every value in JavaScript has an inherent boolean value. When that value is evaluated in the context of a boolean expression, the value will be transformed into that inherent boolean value.
  * A value is falsy if it converts to false when evaluated in a boolean context. For example, an empty String “” is falsy because, “” evaluates to false.
  * A value is truthy if it converts to true when evaluated in a boolean context. For example, the number 1 is truthy because, 1 evaluates to true.
  * Essentially, if it’s not in the list of falsy values, then it’s truthy!

Question 3

Ternary operator

Answer 3

provides you with a shortcut alternative for writing lengthy if…else statements.

conditional ? (if condition is true) : (if condition is false)

Question 4

What are functions?

Answer 4

Reusable chunks of code that are repeated without rewriting

Question 5

What is scope?

Answer 5

part of the program where a particular identifier such as a variable name is visible or accessible

2 kinds of scope in JS: global scope and function scope

* When trying to access an identifier, the JavaScript Engine will first look in the current function. If it doesn't find anything, it will continue to the next outer function to see if it can find the identifier there. It will keep doing this until it reaches the global scope.

Question 6

Shadowing

Answer 6

AKA scope overriding: using the same variable name in more than 1 different scope

Question 7

Hoisting

Answer 7

• In most languages, you have to declare a function before you call it. Basically, code is read from top to bottom. This is not true in JS.

before any JS is executed, all function definitions are “hoisted” to the top of their CURRENT SCOPE.

* However, for variables, the declaration will be hoisted but NOT the assignment. Because of these odd behaviors, best practice is to declare functions at the top of their scripts and variables at the top of their functions. That way, the way the code looks and the way the code behaves are consistent with each other.

Question 8

Anonymous function

Answer 8

A function with no name, which you can store in a variable, because anything in JS can be stored in a variable

Syntax:
var catSays = function(max) {
// code here
};

    * All function declarations are hoisted and loaded before the script is actually run. Function expressions are not hoisted, since they involve variable assignment, and only variable declarations are hoisted. The function expression will not be loaded until the interpreter reaches it in the script.

Question 9

Callback functions

Answer 9

• Being able to store a function in a variable makes it really simple to pass the function into another function. A function that is passed into another function is called a callback. Let’s say you had a helloCat() function, and you wanted it to return “Hello” followed by a string of “meows” like you had with catSays. Well, rather than redoing all of your hard work, you can make helloCat() accept a callback function, and pass in catSays.

Question 10

What is an object in JS?

Answer 10

• An object is a data structure in JavaScript that lets you store data about a particular thing, and helps you keep track of that data by using a “key”
  
  • It’s common to format objects so that each key-value pair is on its own line to improve readability

Question 11

JSON

Answer 11

• JavaScriptObjectNotation. JSON is a popular and simple format for storing and transferring nested or hierarchal data. It’s so popular that most other programming languages have libraries capable of parsing and writing JSON (like Python’sJSON library). Internet GET and POST requests frequently pass data in JSON format. JSON allows for objects (or data of other types) to be easily encapsulated within other objects. See theMDNorJSON.orgfor more details.

Question 12

Why use jQuery?

Answer 12

• JQuery is there so you can focus on UX, not browser compatibility
• jQuery is a FUNCTION (and therefore also an object)
  
  • The $ symbol is the same as writing “jQuery”. It returns the same exact function.
    
    • It’s just a pointer to the same JavaScript object we saw when we wrote “jQuery”. It’s like a functionname.
  • Some other JS libraries use the $ symbol as well, like MooTools, which maps the dollar sign to a variable
  • The dollar sign is just a function
  • jQuery (the dollar sign) returns an array-like object called a jQuery collection. It looks and behaves like an array, but also has some additional methods.

Question 13

jQuery DOM traversal methods

Answer 13

• .parent()
  * Goes up 1 level
  
  • .parents()
    
    • Goes up many levels (all the way to the top)
  • .children()
    
    • Creates a jQuery collection of all IMMEDIATE children (1 level down)
  • .find()
    
    • Children’s children, etc. Similar to parent and parents. This traverses many levels DOWN in the DOM tree
    • Can pass in a star (in quotes) because a selector parameter is not optional. A star means all of the descendants. This is not always the case.
  • .siblings()
    
    • Any elements that have the same parent

Question 14

Example of jQuery function

Answer 14

$(‘.example’).each(function() { $(this).text(); }) // returns text of each example element

Question 15

Event listeners in jQuery

Answer 15

• ntro to Event Listening:
  
  • Events give you the power to set up automatic responses based on what users do when they’re on your page
  • You can do it with no libraries at all, but jQuery recommended
• What are browser events?
  
  • Specific actions at specific times
  • Think of the even as a ball going through a hoop. The resulting action is that the team gets points.
  • Browser events:
    
    • Every time you move your mouse, click a link, submit a form, or anything really, your browser makes announcements about what is happening
  • Google Chrome has handy function monitorElements(elementToWatch);
    
    • It can only be used in the console in dev tools, NOT in a JS file (causes reference error)

Question 16

Anatomy of an event listener in jQuery

Answer 16

• Target element to listen to
  
  • Event we want to react to
  • Actions we want to take in response

(target-element).on(type-of-event, function with stuff we want to do)

Question 17

‘this’ keyword

Answer 17

• Intro
  
  • A way to dynamically refer to the current object
  • The most widely misunderstood aspect in the language
  • It’s a parameter
• Defining “this”
  
  • An identifier that gets a value bound to it, much like a variable, but instead of defining the value explicitly in your code, ‘this’ gets bound to the correct object automatically
  • Usually appears inside a function
• What is it bound to?
  
  • The object that a function is looked up upon when it’s being invoked is what the keyword ‘this’ will be bound to
  • Typically you’ll see something like “obj.fn(3, 4);”… when you have a dot before a function call, the object to the left is ‘this’
    
    • This works in 90% of cases
  • If there is no dot (for example, if there’s a simple function call like “fn(g, b);”, and the body of fn invokes “this”, “this” is bound to the scope of the function (fn):

Question 18

What is HTML canvas?

Answer 18

• Introduction
  
  • Canvas API
  • Powerful API you can use to edit, resize, change images, animations and interactions
  • Can use it to create games inside the browser

Use the  tag
Coordinates are (0,0) for top left. (1,0) is 1 to the right of top left

Question 19

Critical render path

Answer 19

Steps the browser takes in order to render the pixels on the screen.

1. DOM (JS between DOM and CSSOM step) (DOM is fully parsed representation of HTML
2. CSSOM (CSS object model)
3. Render tree (start at root of DOM and move from there)
4. Layout (how things are arranged)
5. Paint

Question 20

Frames

Answer 20

• Anytime a new image is on the screen (including when scrolling), the device puts a new frame on the screen
  
  • Most devices change their screen 60 times a second (60Hz), so we need the frames to match that (60 fps)
  • People are very good at noticing when we miss one of these frames, and they DON’T LIKE IT
  • If the browser takes too long to make a frame, it will get left out, and we’ll have a dropped frame, and users will see sputtering (like in Jank Invaders)
  • If it’s really bad, the whole screen can lock up, which is the worst
  • The following equation shows how many milliseconds we have to render a frame. However, the browser also has some housekeeping to do on each frame, so realistically we have about 10ms-12ms per frame (aim for 10) to make sure the frame arrives on time:

Question 21

What goes into a frame?

Answer 21

• Browser makes GET request to server
  
  • Server responds by sending HTML
  • Browser does some look-ahead parsing, gives us the nodes
    
    • In Chrome Dev Tools, this is labeled as “Parse HTML”
  • Then, it combines the DOM and CSS
    
    • In Dev Tools, this is “Recalculate Styles”
  • When combined, we get a new tree called the Render Tree
    
    • Looks similar to the DOM except some things are missing. For example, we don’t have the anymore, no scripts, and don’t have any nodes whose display property is “none”. Things with CSS specifications like “:after” will be added to the render tree even though it isn’t part of the DOM.
    • Only elements that will actually be displayed on the page will make it into the Render Tree.
  • Once the browser knows which rules apply to an element, it can begin to calculate “layout”, or how much space elements take up and where they are on the screen

Question 22

Google Maps API

Answer 22

• Web Services and Geocoding
• Geocoding: Taking the address and getting a lat/long
• Reverse geocoding: taking the lat/long and getting the place (e.g. “Disney World” instead of coordinates)
• Intro
  
  • Google Maps is used by over 2 million developers worldwide
  • Here we’ll see a real estate listing app
• JavaScript API Overview
  
  • 4 types of maps (pre-configured)
    
    • Roadmap
    • Satellite
    • Hybrid
    • Terrain

various API’s like geometry, directions, etc.