w5d6-7

Question 1

In the styles pane in the elements tab in dev tools, what does a striked-through property represent?

Answer 1

A property that has been overridden by one above it (attributes are listed in descending order of precedence).

Question 2

What does the ‘computed’ style tab represent?

Answer 2

It shows what CSS selector is providing a property value by clicking the dropdown arrow on the left.

Question 3

How can you edit CSS directly in your browser, and allow your changes to persist?

Answer 3

You save over the file in your file system, then just remember to save it.

Question 4

What must we do to round the result of any integer operation in JS?

Answer 4

Math.floor()

Question 5

What is the boilerplate for command line I/O in JS?

Answer 5

var readline = require(‘readline’);

var reader = readline.createInterface({
  // it's okay if this part is magic; it just says that we want to
  // 1. output the prompt to the standard output (console)
  // 2. read input from the standard input (again, console)

input: process.stdin,
output: process.stdout
});

Question 6

T/F: A JS function will run even if it is passed too many or too few arguments.

Answer 6

T; if too few (or none) then the undefined parameters will have a value of ‘undefined’. If too many, then the excess arguments are stored in an array called ‘arguments’, along with the anticipated args.

Question 7

How can we use Array methods on the arguments array?

Answer 7

Slice it:

// `arr.slice() == arr.slice(0, arr.length)` makes a copy of `arr`.
var args = Array.prototype.slice.call(arguments);
args.forEach(function (i) { console.log(i) });

Question 8

Where is the slice method stored?

Answer 8

In Array.prototype because it is an “instance” method.

Question 9

What does slice() do?

Answer 9

With no arguments, slice() returns a COPY of the array.

Question 10

What does __proto__ point to?

Answer 10

The object’s prototype

Question 11

What is the value of Object.prototype.__proto__

Answer 11

null; ‘Object’ is the “top level class”.

Question 12

How can we create prototypal inheritance?

Answer 12

function Animal () {};

function Dog () {};

// Replace the default `Dog.prototype` completely!
// `Dog.prototype.\_\_proto\_\_ == Animal.prototype`.
Dog.prototype = new Animal();

function Poodle() {};
// Likewise with `Poodle.prototype`.
Poodle.prototype = new Dog();

var myAnimal = new Animal();
var myDog = new Dog();
var myPoodle = new Poodle();

Question 13

In the below example, why do we not just do Dog.prototype = Animal.prototype:

function Animal (name) {
  this.name = name;
};

Animal.prototype.sayHello = function () {
console.log(“Hello, my name is “ + this.name);
};

function Dog () {};

// The surrogate will be used to construct `Dog.prototype`.
function Surrogate () {};
// A `Surrogate` instance should delegate to `Animal.prototype`.
Surrogate.prototype = Animal.prototype;

// Set `Dog.prototype` to a `Surrogate` instance.
// `Surrogate.\_\_proto\_\_` is `Animal.prototype`, but `new
// Surrogate` does not invoke the `Animal` constructor function.
Dog.prototype = new Surrogate();

Dog.prototype.bark = function () {
console.log(“Bark!”);
};

Answer 13

Because this would mean that any function added to Dog would be added to Animal.

Question 14

What does the following code accomplish:

function Dog (name, coatColor) {
  // call super-constructor function on **the current `Dog` instance**.
  Animal.call(this, name);

  // `Dog`-specific initialization
  this.coatColor = coatColor;
}

Answer 14

It allows us to call the initialization logic from Animal on the new Dog object.

Question 15

What does Object.create do?

Answer 15

It returns a new object with its __proto__ set to its first argument:

Dog.prototype = Object.create(Animal.prototype);

Question 16

What is the code to create a function which mimics Ruby’s Object.new() syntax?

Answer 16

Function.prototype.new = function () {
  var args = Array.prototype.slice.call(arguments);

  var instance = Object.create(this.prototype);
  this.apply(instance, args);

return instance;
};

Question 17

What is a JavaScript runtime?

Answer 17

Alternatively known as an environment, it is a context that exposes functionality that the JavaScript program can access through APIs.

Question 18

What are File IO (require()) and DOM manipulation (document.getElementById(“…”);) examples of?

Answer 18

JavaScript runtimes; they provide functionality accessed through a JavaScript API.

Question 19

Describe how JS files are loaded in a browser?

Answer 19

They are loaded in the order they are listed, and they all SHARE a global namespace (a la Ruby)

Question 20

What is an IIFE and what is it used for.

Answer 20

It is an Immediately Invoked Function Expression, where a source file wraps its contents in an anonymous function (invoked at the end with ()). It allows for private variables by wrapping them in the function scope. Classes can be exported them by making them properties of ‘window’:

// ./zoo/animal.js
(function () {
  // If window.Zoo does not exist yet, set it to a new blank object.
  if (typeof Zoo === "undefined") {
    window.Zoo = {};
  }

  // Define an Animal class; export it as `window.Zoo.Animal`. Save it
  // to a local variable named `Animal` so we can don't have to repeat
  // `Zoo.Animal.prototype` throughout `./zoo/animal.js`.
  var Animal = Zoo.Animal = function () {
    // ...
  };

  Animal.prototype.eat = function () {
    // ...
  };
})();

// ./zoo/lion.js
(function () {
  if (typeof Zoo === "undefined") {
    window.Zoo = {};
  }

  var Lion = Zoo.Lion = function () {
    // ...
  };

  // Inherit Lion from Animal
  function Surrogate () {};
  Surrogate.prototype = Animal.prototype;
  Lion.prototype = new Surrogate();

  Lion.prototype.roar = function () {
    // ...
  };
})();

// ./app.js
(function () {
  for (var i = 0; i < 10; i++) {
    console.log(new Zoo.Lion());
  }
})();

Question 21

Why should you avoid using prompt() on a webpage?

Answer 21

It is synchronous, and pauses all rendering of the webpage, including scrolling.

Question 22

Explain the following HTML in the context of asynchronous JavaScript:

A page for you!

Submit me!

<p></p>

Answer 22

JavaScript lets us ask the browser to notify us of events. Here, we’re asking the browser to listen for a click event on the $submitButtonEl. When a user presses the mouse while it is hovered over the $submitButtonEl, the browser interprets this as a “click” occurring on the button. The browser then calls any JavaScript code that has been registered as a handler for the event.

Our handler extracts the value of the $textFieldEl, resetting it. We then build and append a p tag with the input contents.

This is all accomplished through jQuery’s on method, which asks the browser to register the handler to call later when the event is triggered.