JavaScript Flashcards

1
Q

What is JavaScript?

A
  • 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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Truthy and Falsy

A
  • 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!
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Ternary operator

A

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

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What are functions?

A

Reusable chunks of code that are repeated without rewriting

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What is scope?

A

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.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Shadowing

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Hoisting

A
  • 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.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Anonymous function

A

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.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Callback functions

A
  • 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.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What is an object in JS?

A
  • 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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

JSON

A
  • 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.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Why use jQuery?

A
  • 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.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

jQuery DOM traversal methods

A
  • .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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Example of jQuery function

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Event listeners in jQuery

A
  • 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)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Anatomy of an event listener in jQuery

A
  • 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)

17
Q

‘this’ keyword

A
  • 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):
18
Q

What is HTML canvas?

A
  • 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
19
Q

Critical render path

A

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
20
Q

Frames

A
  • 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:
21
Q

What goes into a frame?

A
  • 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
22
Q

Google Maps API

A
  • 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.