Javascript

Question 1

Method for finding elements without using getElementById

Answer 1

document.querySelector(“#id”);

Question 2

Property that represents the HTML text between an elements opening / closing tag

Answer 2

element.innerHTML = “text”;

Question 3

What version of querySelector finds all of the elements with a given tag?

Answer 3

document.querySelectorAll(“.class”);

Question 4

What is the traditional way of getting an element via ID?

Answer 4

document.getElementById(“myid”);

NOTE no # for the id

Question 5

How do you change the CSS style of an element?

Answer 5

element.style.color = “red”;

Question 6

Write code to create a P element and append it to the end of the body element.

Answer 6

var p = document.createElement(“p”);

document. body.appendChild(p);
p. innerHTML = “Hello World!”;

Question 7

How would you set an attribute on an element that you have created through code?

Answer 7

p.setAttribute(“id”, “example”);

Question 8

How do you remove an element from a page?

Answer 8

p.parentNode.removeChild(p);

This will effectively remove itself (but note that it has to go through the convoluted path of getting it’s parent then having parent delete the node)

Question 9

Write code to set a “click” handler on a button element?

Answer 9

var but = document.querySelector("button");
but.addEventListener("click", clickHandler, false);

Question 10

How do you remove an event listener?

Answer 10

but.removeEventListener(“click”, clickHandler, false);

Question 11

How do you produce a random number between 1 and 10?

Answer 11

var num = Math.floor((Math.random()*10) + 1);
or
var num = Math.ceil(Math.random() * 10);

Question 12

Convert a string into an int.

Answer 12

var num = parseInt(input.value);

Question 13

How do you determine if a value is a string?

Answer 13

if (isNaN(variable)) { // Do something appropriate }

Question 14

How do you disable a button in code?

Answer 14

var button = document.querySelector("button");
button.disabled = true;

Question 15

How could you use Math.random() to give a random true / false result?

Answer 15

if (Math.round(Math.random() === 1) {
  // True
} else {
  // False
}

Question 16

How would you create a random number between 10 and 25?

Answer 16

Math.floor(Math.random() * 16) + 10;

Question 17

What is some limitations of an object literal?

Answer 17

It is a singleton and also cannot implement the concepts of encapsulation, and inheritance. It also doesn’t require the use of new to create it.

Question 18

What is the basic difference in implementation for Object Literal and an Object in javascript?

Answer 18

Object Literal:
var shape = {
   height: 10,
   width: 10,
   area: function() { // stuff }
}

Object (created by using new)
function Shape() {
  this.height = 10;
  this.width = 10;
  this.area = function() { // stuff };
};

Question 19

What is the equivalent of a class in Javascript?

Answer 19

The constructor function

Question 20

When in the global scope, what does “this” point to?

Answer 20

The window object.

Question 21

How is a public variable implemented in Javascript?

Answer 21

By declaring the member with the “this” keyword - it becomes available through the object

Question 22

How is a private variable implemented in Javascript?

Answer 22

By declaring the member with the “var” keyword. It can no longer be accessed outside the object and is local to it.

Question 23

How do you declare an object that takes parameters?

Answer 23

function Shape(w, h) {
    var height = h;
    var width = w;

this.getArea = function() {
   return h * w;
} }

var myShape = new Shape(10, 10);

Question 24

How do you set default values for an objects parameters?

Answer 24

function Shape(w, h) {
   var height = h || 4;
   var width = w || 10;
....

Question 25

What is the value of an object parameter that is not passed when creating the object?

Answer 25

undefined

Question 26

Is it possible to override methods in JavaScript?

Answer 26

No

Question 27

Does overloading occur if two functions in an object have the same name?

Answer 27

No - the last declared one overwrites the first.

Question 28

How can you declare a function that can take variable arguments?

Answer 28

this.getArea = function() {
console.log(arguments);
}

Question 29

How can you add a new entity to an existing object?

Answer 29

var foo = new Foobar();
foo.num = 10;

NOTE: This only adds the entity num to this instance of the object.

Question 30

What is the difference between class based OO languages and JavaScript?

Answer 30

JavaScript is prototype based, which means instead of using classes to make objects, it uses objects to create objects.

Question 31

What does ‘DOMContentLoaded’ event fire on?

Answer 31

When the page is fully loaded (but doesn’t wait for the style sheets or images).

document.addEventListener(‘DOMContentLoaded’, callable);

Question 32

What event can be used to determine if an image (game asset) has been loaded?

Answer 32

image.onload = function() {
};

// You can use this to decrement a counter that is keeping track of the number of assets loading… when it is 0 - you can start the game.

Question 33

What does the following code do??

window.requestAnimationFrame = window.requestAnimationFrame ||
window.webkitAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000/60);
};

Answer 33

Because some browsers don’t support requestAnimationFrame - it overwrites the window method requestAnimationFrame with a pointer to the method that DOES exist. Whether that be requestAnimationFrame, or msAnimationFrame. This allows us to continue using requestAnimationFrame name while it points to the most appropriate method for the given browser. Note - the last part of the conditional is a callback function that reverts to the method of simply calling the main game loop again.

Question 34

Is ‘window.requestAnimationFrame(callback)’ equivalent to ‘requestAnimationFrame(callback)’?

Answer 34

Yes, because window is the global container - you can access its members anywhere.

Question 35

What is the term for a javascript object?

Answer 35

Prototype

Question 36

Create a dog object with a function named bark.

Answer 36

function Dog {
}

Dog.prototype.bark = function() {
console.log(‘woof’);
};

var MyDog = new Dog();
MyDog.bark();

Question 37

What is a self invoking function?

Answer 37

A function that will call itself. It is created with the following syntax.

(function () {
    var x = "Hello!!";      // I will invoke myself
})();

Question 38

How do you simulate optional arguments in Javascript.

Answer 38

By testing each argument in the function body against undefined - you can determine if a value was passed. i.e.

function (var1, var2) {
   if (var1 === undefined) {
      var1 = VAR1_DEFAULT_VALUE;
   }
}

Question 39

In Javascripts inheritince model - does the ‘override’ keyword exist?

Answer 39

No - you simply redefined the method on the new object.

Question 40

How do you inherit from an existing object?

Answer 40

function newObject() {
}

newObject.prototype = new Object.create(OtherObject.prototype);

Question 41

Basic / primitive types in Javascript are pass by…

Answer 41

value

Question 42

Non-primitive types (such as objects) are pass by….

Answer 42

reference

Question 43

How do you call a function from the superclass (i.e. to call the parent version of an overridden function)?

Answer 43

I want to call the update method in the parent class:

childObject.prototype.update = function(myValue) { 
   parentObject.prototype.update.call(myValue);
   // Do other stuff
};