JavaScript Functions Flashcards
How do you add an event listener to the window
window.addEventListener(event, callback);
What are tricky about the ‘blur’ and ‘focus’ and ‘resize’ events when adding to a window?
You have to use the actual event on the window object:
window. onblur
window. onfocus
window. resize
What does ‘reduce’ do?
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; })
What function makes an element (canvas, video etc) fullscreen?
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.
What function do you use to get the rectangle that bounds an object (useful for determining mouse position in games)?
getBoundingClientRect();
NOTE: It gives you back an object that has ‘top’, ‘left’ etc. Not x and y!!!
What object is used for ajax requests?
var xobj = XMLHttpRequest();
What function on an XMLHttpRequest object do you use to specify that you want json?
xobj.overrideMimeType(‘application/json’);
What function do you use to make a get request for a json file?
xobj.open(‘GET’, ‘myfile.json’, true);
What function is used to prevent the usual action of an event from occurring (so you can intercept and do something else)?
e.preventDefault();
What does Math.max do?
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
Is this valid?
[1, 2, 3, 4].reduce(function(a, b) { return a + b; }
Yup - because reduce is a member of Array.prototype, it will work being called directly on an array like this.
What is the code equivaleent way to get the media query values @media (width) @media(height)
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0) var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
What function will give you the inside height / width of a window?
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)
How would you copy an array, in the simplist, quickest method?
return array.slice();
return array.slice();
throw “Error”
You can of course throw objects as well. If you create a new exception object.
throw new UserException();
How do you find the index of a value with a certain property (i.e. a prime number) in an array?
array.findIndex(callback, this)
callback(currentvalue, index, array);
returns -1 if nothing found, otherwise the index.
How would you find the index of a string, or character in another string?
var str = "good string";
str.indexOf('good');
returns -1 if nothing found
What is the function for string length?
It isn’t a function, it’s a property
string.length
Why would getDay return 1, when calling date.getDay() - for January 1st?
Because getDay returns the day of the week (0 for sunday). Use getDate instead.
What functions can you use to get the breakdown of a date object?
getDay, getDate, getYear / getFullYear, getHours, getMinutes, getTime() // milliseconds since 1970 (use Date.now though)
How do you get the current time in milliseconds?
Date.now();
How do you create a date object?
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)
How do you create a new canvas element?
var canvas = document.createElement('canvas');
canvas.id = 'gameCanvas';How do you append a canvas element to the body?
var body = document.getElementById('body');
var canvas = document.createElement('canvas');
body.appendChild(canvas);How would you create a timer that triggers every 30 milliseconds?
var interval = setInterval(function () {}, 30);
clearInterval(interval)
How would you create a timer that triggers just once, in 30 milliseconds?
var timeout = setTimeout(function () { }, 30);
clearTimeout(timeout);
What function do I use to turn a valid json object into something I can parse?
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.
What function do I use to parse a JSON string into a javascript object?
JSON.parse(string);
What are the two ways to call drawImage?
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.
What function can you use to get a list of the properties on an object?
Object.getOwnPropertyNames(object);
NOTE: use Object to call it.
Useful _’s fucntions?
_.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)
