JavaScript Functions

Question 1

How do you add an event listener to the window

Answer 1

window.addEventListener(event, callback);

Question 2

What are tricky about the ‘blur’ and ‘focus’ and ‘resize’ events when adding to a window?

Answer 2

You have to use the actual event on the window object:

window. onblur
window. onfocus
window. resize

Question 3

What does ‘reduce’ do?

Answer 3

It operates on an array, and takes a callback that allows you to sum ( or do whatever ) to the elements in the array.

Array.prototype.reduce(callback, initialvalue)

Callback(previous, current, index, array).

myarray.reduce(function (a, b) { return a + b; })

Question 4

What function makes an element (canvas, video etc) fullscreen?

Answer 4

requestFullScreen (but it’s new, so it uses extensions)
webkitRequestFullScreen();

The only gotcha - you must call it from a user action. I.e. A user must press a button or something.

Question 5

What function do you use to get the rectangle that bounds an object (useful for determining mouse position in games)?

Answer 5

getBoundingClientRect();

NOTE: It gives you back an object that has ‘top’, ‘left’ etc. Not x and y!!!

Question 6

What object is used for ajax requests?

Answer 6

var xobj = XMLHttpRequest();

Question 7

What function on an XMLHttpRequest object do you use to specify that you want json?

Answer 7

xobj.overrideMimeType(‘application/json’);

Question 8

What function do you use to make a get request for a json file?

Answer 8

xobj.open(‘GET’, ‘myfile.json’, true);

Question 9

What function is used to prevent the usual action of an event from occurring (so you can intercept and do something else)?

Answer 9

e.preventDefault();

Question 10

What does Math.max do?

Answer 10

Math.max(10, 20); // Returns 20

Returns the largest of two or more numbers

Just be aware -

Math.max(-20, -10) will return -10. This is correct, just a tricky one to spot.

NOTE: There is also Math.min

Question 11

Is this valid?

[1, 2, 3, 4].reduce(function(a, b) { return a + b; }

Answer 11

Yup - because reduce is a member of Array.prototype, it will work being called directly on an array like this.

Question 12

What is the code equivaleent way to get the media query values @media (width) @media(height)

Answer 12

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)

Question 13

What function will give you the inside height / width of a window?

Answer 13

There isn’t one - use window.innerHeight .innerWidth

OR right your own function that returns those values (not on e a browser, that gives the value inside the scrollbars)

Question 14

How would you copy an array, in the simplist, quickest method?

Answer 14

return array.slice();

Question 15

return array.slice();

Answer 15

throw “Error”

You can of course throw objects as well. If you create a new exception object.

throw new UserException();

Question 16

How do you find the index of a value with a certain property (i.e. a prime number) in an array?

Answer 16

array.findIndex(callback, this)

callback(currentvalue, index, array);

returns -1 if nothing found, otherwise the index.

Question 17

How would you find the index of a string, or character in another string?

Answer 17

var str = "good string";
str.indexOf('good');

returns -1 if nothing found

Question 18

What is the function for string length?

Answer 18

It isn’t a function, it’s a property

string.length

Question 19

Why would getDay return 1, when calling date.getDay() - for January 1st?

Answer 19

Because getDay returns the day of the week (0 for sunday). Use getDate instead.

Question 20

What functions can you use to get the breakdown of a date object?

Answer 20

getDay,
getDate,
getYear / getFullYear,
getHours,
getMinutes,
getTime() // milliseconds since 1970 (use Date.now though)

Question 21

How do you get the current time in milliseconds?

Answer 21

Date.now();

Question 22

How do you create a date object?

Answer 22

var date = new Date(2011, 10, 20);

NOTE: Months are 0 indexed... or
new Date(year, month, day [, hour, minute, second, millisecond ])

var date = Date.parse(“11/30/2010”); (note the date order)

Question 23

How do you create a new canvas element?

Answer 23

var canvas = document.createElement('canvas');
canvas.id = 'gameCanvas';

Question 24

How do you append a canvas element to the body?

Answer 24

var body = document.getElementById('body');
var canvas = document.createElement('canvas');
body.appendChild(canvas);

Question 25

How would you create a timer that triggers every 30 milliseconds?

Answer 25

var interval = setInterval(function () {}, 30);

clearInterval(interval)

Question 26

How would you create a timer that triggers just once, in 30 milliseconds?

Answer 26

var timeout = setTimeout(function () { }, 30);

clearTimeout(timeout);

Question 27

What function do I use to turn a valid json object into something I can parse?

Answer 27

JSON.stringify(obj);

NOTE: There is a replacer callback available - it passes in the key and the value - allowing you to change the values while parsing it.

The function works a bit weird - it takes key value. If key matches what you want to change, return the value you want to change it to. If you want to keep the parameter, return the original value. If you want to remove it, return ‘undefined’.

NOTE: you can only change the value, not theW key.

Also - the space parameter (third parameter) modifies whitespace.

Question 28

What function do I use to parse a JSON string into a javascript object?

Answer 28

JSON.parse(string);

Question 29

What are the two ways to call drawImage?

Answer 29

var ctx = canvas.getContext('2d');
ctx.drawImage(image, 100, 100);

or

ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);

If sw, sh is not the same as dw, dh - the engine will scale it itself.

Question 30

What function can you use to get a list of the properties on an object?

Answer 30

Object.getOwnPropertyNames(object);

NOTE: use Object to call it.

Question 31

Useful _’s fucntions?

Answer 31

_.isEqual (has issues with NaN's too)
_.extend
_.uniqueId (can pass a string for a prefix) 
_.extendOwn
_.now (like Date.now)
_.clone (shallow copy of a plain object)
_.flatten (flattens an array)