Chapter 2. Implement program flow Flashcards
array.join method
Accepts a string as a parameter whichj is used as a delimiter to separate the values in the array
new Array('socer', 'Basketball','hockey').join(', ')
"socer, Basketball, hockey"
array.reverse()
reverses the array
array.slice()
var sports = new Array('soccer', 'basketball', 'hockey', 'football', 'cricket', 'rugby',
'tennis', 'badminton');
var someSports = sports.slice(1, 2);
The slice() method returns a shallow copy of a portion of an array into a new array object selected from begin to end (end not included).
array.splice()
changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.
splice(whereItShouldStart,numberOfItemsToSplice, itemsWhichReplace)
the optional parameter doesent need to be the same length
array.shift() and array.unshift()
Just like Queue and Dequeue
array.some()
checks whether any objects meet the criteria (callback)
var evenNumbers = new Array(0, 2, 4, 6, 8, 9, 10, 12);
var allEven = evenNumbers.some(evenNumberCheck, evenNumbers);
if (allEven) {
...
} else {
...
}
function evenNumberCheck(value, index, array) {
return (value % 2) == 0;
}
array.reduce() and array.reduceRight()
The reduce() method executes a reducer function (that you provide) on each member of the array resulting in a single output value.
The reduceRight goes from the right side of the array
the break keyword in a loop
The break keyword breaks out of only the currently running loop. If the loop containing the break is nested inside another loop, the outer loop continues to iterate as controlled by its own expression.
How can you hook up an event?
- Declare it directly in the HTML markup
- Assign the function to the event property of the element object through javascript
- Use the newer add and remove methods on the element object to associate event handlers
Exception object properties
- message
- number
- Name
var
Declares a variable, optionally initializing it to a value.
let
declares a block-scoped, local variable, optionally initializing it to a value
const
declares a block-scoped, read-only named constant
arguments in Javascript functions
add(2, 3, 4); // 5 // added the first two; 4 was ignored
arguments object (in a function)
Functions have an additional variable inside their body called agruments which is an array-like object hodling all the values passed into the function
function add() {
var sum = 0;
for (var i = 0, j = arguments.length; i < j; i++) {
sum += arguments[i];
}
return sum;
}
array.length
array.length isnt necessary the number of items in the array.
var a = ['dog', 'cat', 'hen']; a[100] = 'fox'; a.length; // 101
array.length is one more than the highest index in the array
Objects - two ways of initializing an object
- var obj = new Object();
- var obj = {}
The second one is more convinient
Rest parameter syntax
The rest parameter syntax allows us to represent an indefinite number of arguments as an array.
function avg(...args) {
var sum = 0;
for (let value of args) {
sum += value;
}
return sum / args.length;
}
avg(2, 3, 4, 5); // 3.5
Person.prototype
function Person(first, last) {
this.first = first;
this.last = last;
}
Person.prototype.fullName = function() {
return this.first + ' ' + this.last;
};
Person.prototype.fullNameReversed = function() {
return this.last + ', ' + this.first;
};
Person.prototype is an object shared by all instances of Person. Any time you attempt to access a property that isnt set, Javascript will check Person.prototype and it becomes avaliable to all instances of that constructor via the this object
closure
Is the combination of a function and the scope object in which it was created.
Closures let you save state
Number.isSafeInteger(testValue)
tests wether or not the value is safe
Throwing a generic error
try {
throw new Error('Whoops!');
} catch (e) {
console.log(e.name + ': ' + e.message);
}Handling a specific error
If you’re writing for modern JavaScript engines, instanceof keyword:
try {
foo.bar();
} catch (e) {
if (e instanceof EvalError) {
console.log(e.name + ': ' + e.message);
} else if (e instanceof RangeError) {
console.log(e.name + ': ' + e.message);
}
// ... etc
}
geolocation - format
navigator.geolocation.getCurrentPosition(function(position) {
do_something(position.coords.latitude, position.coords.longitude);
});
// global scope var a = 1;
function one() {
alert(a);
}
// alerts ‘1’
calculate three()
// global scope var a = 1;
function two(a) {
alert(a);
}
function three() {
var a = 3;
alert(a);
}
// alerts ‘3’
var a = 1;
function four() {
if (true) {
var a = 4;
}
alert(a);
}
// alerts ‘4’, not the global value of ‘1’
var a = 1;
function one() {
if (true) {
let a = 4;
}
alert(a);
}
// alerts ‘1’ because the ‘let’ keyword uses block scoping
var a = 1;
function Five() {
this.a = 5;
}
alert(new Five().a);
// alerts ‘5’
var a = 1;
var six = (function() {
var a = 6;
return function() {
alert(a);
};
})();
var a = 1;
var six = (function() {
var a = 6;
return function() {
// JavaScript "closure" means I have access to 'a' in here,
// because it is defined in the function in which I was defined.
alert(a); // alerts '6'
};
})();
var a = 1;
function seven() {
this.a = 7;
}
seven.prototype.a = -1;
seven.prototype.b = 8;
alert(new seven().a); ? alert(new seven().b); ?
var a = 1;
function seven() {
this.a = 7;
}
// [object].prototype.property loses to // [object].property in the lookup chain. For example...
// Won't get reached, because 'a' is set in the constructor above. seven.prototype.a = -1;
// Will get reached, even though 'b' is NOT set in the constructor. seven.prototype.b = 8;
alert(new seven().a); // alerts '7' alert(new seven().b); // alerts '8'
var x = 5;
(function () {
console.log(x);
var x = 10;
console.log(x);
})();
This will print out undefined and 10 rather than 5 and 10 since JavaScript always moves variable declarations (not initializations) to the top of the scope, making the code equivalent to:
var x = 5;
(function () {
var x;
console.log(x);
x = 10;
console.log(x);
})();
focus event bubbling
it does not bubble up unlike others
event bubbling- event-target
The most deeply nested element that caused the event is called a target element, accessible as event.target.
entry point function in javascript
window.onload = function(){…}
array.every()
method lets you process specific logic for each array element to determine whether all of them meet some condition
signature of array methods (handler)
array.filter(function(currentValue, index, arr), thisValue)
thisValue- what will be represented by .this in the handler
canceling an event - format
window.onload = function () {
var a = document.getElementById("aLink");
a.onclick = OverrideAnchorClick;
}
function OverrideAnchorClick() {
//do custom logic for the anchor
window.event.returnValue = false;
//or
//return false;
}cancel bubble
window.event.cancelBubble = true;
web socket -format
wsConnection = new WebSocket(‘wss://studygroup.70480.com’,[‘soap’,’xmpp’]);
web worker postMessage
Starts the worker process. Single parameter which is data. If nothing is required empty string can be supplied
web worker terminate
stops the worker process from continuing
webWorker.onmessage = function(event){…}
After the worker process completes the onmessage function is called. This should be set up before starting the worker
webworker self keyword
like .this for the web worker. Gives access to the global namespace within the web worker
Using the eval function
The eval function is used to run JavaScript dynamically. It takes a string as a parameter and runs it as a JavaScript function.
iFrame sandbox
The sandbox attribute should always be used to restrict what data can be placed into an iFrame
allow-same-origin - treated as being from the same Html document
allow-top-navigation - iFrame can load content from the containing HTML document
allow-forms iFrame can submit forms
allow-scripts iFrame can run scripts
XMLHttpRequest
var xmlhttp = new XMLHttpRequest(); var url = "myTutorials.txt";
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myArr = JSON.parse(this.responseText);
myFunction(myArr);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
XMLHttpRequest.responseXML
XMLHttpRequest.responseXML read-only property returns a Document containing the HTML or XML retrieved by the request; or null if the request was unsuccessful, has not yet been sent, or if the data can’t be parsed as XML or HTML.
XMLHttpRequest blob
var xReq = new XMLHttpRequest();
xReq.open("POST", "saveImage.aspx", false);
xReq.responseType = 'blob';
xReq.send(data);
