Implement program flow (25%) Flashcards
What does the == operator do?
Evaluates whether the values are equal independent of the underlying data type.
var n = 2000, s = '2000'; alert(n == s); // True alert(n === s); // False, since the data types don't match
What does the === operator do?
Evaluates whether the values are equal both in value and underlying data type.
var n = 2000, s = '2000'; alert(n == s); // True alert(n === s); // False, since the data types don't match
What are the two ways to create arrays?
var cars = ["Saab", "Volvo", "BMW"];
var cars = new Array("Saab", "Volvo", "BMW");Why should you avoid using the new keyword to create arrays?
Avoid using the new keyword to create arrays var numbers = new Array(40, 300); // creates array with 2 element var numbers = new Array(40); // creates array with 40 undefined elements
What kind of indexing do arrays support?
numeric
How do you create an array that supports string indexing?
use an object instead
How do you resize an array?
var anArray = new Array(5);
alert(anArray.length);
anArray[9] = ‘soccer’; // anArray is dynamically resized
alert(anArray.length);
What does the indexOf method of arrays do?
Returns the first index at which a given element can be found in the array, or -1 if it is not present.
What does the join method of arrays do?
Joins all elements of an array into a string.
What does the lastIndexOf method of arrays do?
Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found.
What does the pop method of arrays do?
Removes the last element from an array and returns that element.
What does the push method of arrays do?
Adds one or more elements to the end of an array and returns the new length of the array.
What does the reverse method of arrays do?
Reverses the order of the elements of an array in place — the first becomes the last, and the last becomes the first.
What does the shift method of arrays do?
Removes the first element from an array and returns that element.
What does the sort method of arrays do?
Sorts the elements of an array in place and returns the array.
What does the splice method of arrays do?
Adds and/or removes elements from an array.
What does the toString method of arrays do?
Returns a string representing the array and its elements.
What does the unshift method of arrays do?
Adds one or more elements to the front of an array and returns the new length of the array.
What does the valueOf method of arrays do?
Returns the array as a comma separated string.
What does the concat method of arrays do?
Returns a new array comprised of this array joined with other array(s) and/or value(s).
What does the slice method of arrays do?
Extracts a section of an array and returns a new array.
Which methods of arrays return new arrays?
concat, slice, sort, splice
How do you create a multi-dimensional array?
var multiArray = new Array(3); multiArray[0] = new Array(3); multiArray[1] = new Array(3); multiArray[2] = new Array(3); multiArray[1][2] = 'ball sport';
What are the parameters for the slice method of the Array object?
startIndex, endIndex
var sports = new Array('soccer', 'basketball', 'hockey',
'football', 'cricket', 'rugby', 'tennis', 'badminton');
var someSports = sports.slice(1, 2);
The slice method takes two parameters: the indexes where the slice operation should begin and end. The ending index isn’t included in the slice. All copied elements are returned as an array from the slice method. In this example, because ‘basketball’ is at index 1 and the ending index is specified at index 2, the resulting array someSports contains only one element ‘basketball’.
What are the parameters for the splice method of the Array object?
startIndex, length, optional items to add to the array
var sports = new Array('soccer', 'basketball', 'hockey',
'football', 'cricket', 'rugby', 'tennis', 'badminton');
var splicedItems = sports.splice(1, 3, 'golf', 'curling',
'darts');
The splice method returns an array containing the items that are spliced out of the source that are spliced out of the source array. The first parameter is the index in the array where the splice operation should start. The second parameter is the number of items to splice, starting from the index specified in the first parameter. The optional last parameter lists items that are to replace the items being spliced out. The list doesn’t have to be the same length as the items being spliced out. In fact, if the last parameter is omitted, the spliced items are simply removed from the array and not replaced. In this example, three items are replaced, starting at index 1. So, ‘basketball’, ‘hockey’, and ‘football’ are replaced with ‘golf’, ‘curling’ and ‘darts’.
Which methods of the Array object are used to provide stack functionality?
pop and push
var sports = new Array();
sports.push(‘soccer’, ‘basketball’, ‘hockey’);
sports.push(‘football’);
var nextSport = sports.pop();
Which methods of the Array object are used to provide queue functionality?
push and shift
Array.prototype.enqueue = function(item)
{
this.push(item);
};
Array.prototype.dequeue = function()
{
return this.shift();
};
var queue = new Array();
queue. enqueue(1);
queue. enqueue(2);
queue. enqueue(3);
queue. enqueue(4);
var next = queue.dequeue();
Which methods of the Array object operate only on the beginning of the array?
shift and unshift
var sports = new Array();
sports.unshift(‘soccer’, ‘basketball’, ‘hockey’);
sports.unshift(‘football’);
var nextSport = sports.shift();
The shift and unshift methods work in the exact opposite way from the pop and push methods. The shift method removes and returns the first element of the array, whereas the unshift method inserts new elements at the beginning of the array.
Which method of the Array object tests whether ALL elements in the array pass the test implemented by the provided function?
every
var evenNumbers = new Array(0, 2, 4, 6, 8, 9, 10, 12); var allEven = evenNumbers.every(evenNumberCheck, this);
// allEven is false since 9 is not even
if (allEven) {
...
} else {
...
}
function evenNumberCheck(value, index, array) {
return (value % 2) == 0;
}
Which method of the Array object tests whether ANY elements in the array pass the test implemented by the provided function?
some
var evenNumbers = new Array(0, 2, 4, 6, 8, 9, 10, 12); var someEven = evenNumbers.some(evenNumberCheck, this);
// someEven is true even though 9 is not even
if (someEven) {
...
} else {
...
}
function evenNumberCheck(value, index, array) {
return (value % 2) == 0;
}
Which method of the Array object enables an application to process some logic against each item in the array?
forEach
This method runs for every single item and doesn’t produce a return value.
var sportsArray = [‘soccer’, ‘basketball’, ‘hockey’, ‘football’,
‘cricket’, ‘rugby’];
sportsArray.forEach(offerSport);
function offerSport(value, index, array) {
var sportsList = document.getElementById("sportsList");
var bullet = document.createElement("li");
bullet.innerText = value;
sportsList.appendChild(bullet);
}
Which method of the Array object provides a way to remove items for an array based on some processing done in the callback function.?
filter
The filter method returns a new array containing the elements that are included based on a return value of true or false from the callback function.
var evenNumbers = new Array(0, 2, 4, 6, 8, 9, 10, 12); var allEven = evenNumbers.filter(evenNumberCheck, evenNumbers);
function evenNumberCheck(value, index, array) {
return (value % 2) == 0;
}
Which method of the Array object provides a way to replace values in the array?
map
Every element in the array is passed to a callback function. The callback function’s return value replaces the value for the position in the array that was passed in. The following example demonstrates having every number in an array rounded off appropriately:
var money = [12.8, 15.9, 21.7, 35.2]; var roundedMoney = money.map(roundOff, money);
function roundOff(value, position, array) {
return Math.round(value);
}
Which methods of the Array object are recursive?
reduce and reduceRight
Each result of the callback function is passed back into the callback method as the previous return value along with the current element to be passed in. This provides some interesting scenarios. The reduce method processes the elements of the array in ascending order, whereas the reduceRight processes the elements of the array in descending order. The following example demonstrates using the reduce method to calculate a factorial:
var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; var factorials = numbers.reduce(factorial);
function factorial(previous, current) {
return previous * current;
}
In which direction does the reduce method of the Array object process its elements?
ascending
In which direction does the reduceRight method of the Array object process its elements?
descending
What is the syntax of the for loop?
for (var i = 0; i
What is the syntax of the for..in loop?
var person = { firstName: "Jane", lastName: "Doe",
birthDate: "Jan 5, 1925", gender: "female" };
for (var prop in person) {
document.write(prop); // Writes property name
document.write(person[prop]); // Writes property value
}
What is the for..in loop used for?
Iterating over an object’s properties.
What is the syntax of the while loop?
var i = 0; while (i
Which looping construct always runs at least once?
do..while
var canvas = document.getElementById("canvas1");
do {
//stop traffic
}while(canvas.styles.backgroundColor == 'red')
What is the syntax of the do..while loop?
var canvas = document.getElementById("canvas1");
do {
//stop traffic
}while(canvas.styles.backgroundColor == 'red')What are the three ways to hook up an event handler?
- Declare it directly in the HTML markup.
<body>
2. Assign the function to the event property of the element object through JavaScript.
window. onload = onloadHandler();
~~~
function onloadHandler() {
alert("hello event.");
}
~~~
~~~
// or use an anonymous function
window.onload = function() {
alert("hello event.");
};
~~~
3. Use the newer add and remove methods on the element object to associate event handlers.
object. addEventListener("eventName", function, useCapture);
object. removeEventListener("eventName", function, useCapture);
If useCapture is true, events are dispatched to parent objects before child objects.
If useCapture is false, events are dispatched to target objects first and then to parent objects.
</body>
What are the two types of functions which can be used as event handlers in JavaScript?
named and anonymous
How do you get a reference to the event object in an event handler?
var event = window.event;
In some browsers, the event is passed as a parameter to the handling function.
What are the parameters of the addEventListener and removeEventListener methods?
eventName, function, useCapture
If useCapture is true, events are dispatched to parent objects before child objects.
If useCapture is false, events are dispatched to target objects first and then to parent objects.
In which order are events fired?
In the order they are added.
How do you remove an anonymous function as an event listener?
You can’t unless you previously saved a reference to it.
How do you cancel an event?
return false or set window.event.returnValue to false
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;
}
In an event handler, what does the keyword ‘this’ represent?
The element that generated the event.
What event is fired when the value associated with an element changes?
change
What are the four events that are fired when an element receives and loses focus?
focusin, focus, focusout, blur
What event is fired when an element receives focus?
focus
What event is fired when an element loses focus?
blur
What event is fired just before an element receives focus?
focusin
What event is fired just before an element loses focus?
focusout
What event is commonly used to validate form fields?
blur
What method is called to set focus on any element that can receive focus?
focus
What are the three events raised in when the keyboard is used?
keydown, keypress, and keyup
What event is raised when a key is pushed down?
keydown
What event is raised when a key is released?
keyup
What event is raised when a key is completely pressed?
keypress
Which four properties of the Event object are available for keyboard events?
altKey, keyCode, ctrlKey, shiftKey
Which property of the Event object indicates whether the Alt key was pressed?
altKey
Which property of the Event object indicates the numeric code for the key that was pressed?
keyCode
Which property of the Event object indicates whether the Control key was pressed?
ctrlKey
Which property of the Event object indicates whether the Shift key was pressed?
shiftKey
Which keys only fire the keydown event?
arrow keys
Which events are raised when using the mouse?
click, dblclick, mousedown, mouseup, mouseenter, mouseover, mouseleave, mousemove
Which event is raised when the mouse performs a click?
click
Which event is raised when the mouse performs a double-click?
dblclick
Which event is raised when the mouse button is pressed down?
mousedown
Which event is raised when the mouse button is released?
mouseup
Which event is raised when the mouse cursor enters the space of an HTML element?
mouseenter or mouseover
Which event is raised when the mouse cursor leaves the space of an HTML element?
mouseleave
Which event is raised when the mouse cursor moves over an HTML element?
mousemove
Which six properties of the Event object are available for mouse events?
clientX, clientY, offsetX, offsetY, screenX, screenY
Which property of the Event object returns the x or horizontal position of the mouse cursor relative to the viewport boundaries
?
clientX
Which property of the Event object returns the y or vertical position of the mouse cursor relative to the viewport boundaries?
clientY
Which property of the Event object returns the x or horizontal position of the mouse cursor relative to the target element?
offsetX
Which property of the Event object returns the y or vertical position of the mouse cursor relative to the target element?
offsetY
Which property of the Event object returns the x or horizontal position of the mouse cursor relative to the upper-left corner of the screen?
screenX
Which property of the Event object returns the y or vertical position of the mouse cursor relative to the upper-left corner of the screen?
screenY
Which events are raised during drag-and-drop operations?
drag, dragend, dragenter, dragleave, dragover, dragstart, drop
Which event is raised continuously while the element is being dragged?
drag
Which event is raised on the element being dragged when the mouse is released to end the drop operation?
dragend
Which event is raised on a target element when a dragged element is dragged into its space?
dragenter
Which event is raised on a target element when a dragged element leaves its space?
dragleave
Which event is raised continuously on the target element while the dragged element is being dragged over it?
dragover
Which event is raised on the element being dragged when the drag operation is beginning?
dragstart
Which event is raised on the target element when the dragged element is released?
drop
In which drag-and-drop event do you set data to be transferred and used in the subsequent drop event during the same operation?
dragstart
var chip = document.getElementById("chip");
chip.addEventListener("dragstart", function ()
{ window.event.dataTransfer.setData("Text", this.id); });
How do you obtain the data transferred in the drop event of a drag-and-drop operation?
event.dataTransder.getData(“Text”);
b1.addEventListener(“drop”, function () {
window.event.returnValue = false;
var data = event.dataTransfer.getData(“Text”);
var d = document.getElementById(data);
d.classList.remove(“begin”);
d.classList.add(“dropped”);
this.appendChild(d);
});
In which drag-and-drop events should you provide visual feedback to the user?
dragevent and dragleave
var b1 = document.getElementById("bucket1");
b1.addEventListener("dragenter", function () {
b1.classList.add("over");
window.event.returnValue = false;
});
b1.addEventListener("dragleave", function () {
b1.classList.remove("over");
});
What must you do for elements that don’t support drag-and-drop functionality by default?
You must cancel the event by setting event.returnValue to false.
How do you create a custom event?
myEvent = new CustomEvent(
"customEventName",
{
detail: { description: "a description of the event",
timeofevent: new Date(),
eventcode: 2 },
bubbles: true,
cancelable: true
}
);How do you handle a custom event?
myEvent = new CustomEvent(
“customEventName”,
{
detail: { description: “a description of the event”,
timeofevent: new Date(),
eventcode: 2 },
bubbles: true,
cancelable: true
}
);
How do you raise a custom event?
object.dispatchEvent(myEvent);
myEvent = new CustomEvent(
“customEventName”,
{
detail: { description: “a description of the event”,
timeofevent: new Date(),
eventcode: 2 },
bubbles: true,
cancelable: true
}
);
Which browser does not support custom events?
Internet Explorer
What is the syntax of a try..catch..finally block?
try {
} catch(e) {
} finally {
}
What properties are available on the exception object?
message, number, name
Which property on the exception object returns a textual description of the error that occurred?
message
Which property on the exception object returns a numeric error code?
number
Which property on the exception object returns the name of the exception object?
name
Which object and method are used to write messages to the console window?
console.log
What is the syntax to throw an exception?
throw new Error(“error message”);
Which API provides bidirectional communication support to your web applications?
WebSocket API
What types of data can be sent and received using the WebSocket API?
binary and text
Why should WebSocket API be used when possible rather than using HTTP?
Allows a connection directly to the server over a socket. Is a much lighter weight connection than HTTP. Is fully bidirectional.
What is required for a full-implementation of the WebSocket API?
A proper server-side implementation that can accept socket connections.
What applications are ideally served by WebSocket API?
messenger/chat apps, server-based games, WebRTC (Web Real-Time Communication) video conferencing
What is the syntax to create a web socket?
var wsConnection = new WebSocket('ws://studygroup.70480.com',
['soap', 'xmpp']);What are the parameters required to create a WebSocket object?
- The URL of the server-side socket to connect to, which is always prefixed with ws or wss for secure WebSocket connections
- An optional list of subprotocols
Study this example use of WebSocket.
var wsUri = "ws://echo.websocket.org/"; var output;
function init() {
output = document.getElementById("output");
testWebSocket();
}
function testWebSocket() {
websocket = new WebSocket(wsUri);
websocket.onopen = function (evt) {
writeToScreen("CONNECTED");
writeToScreen("SENT: " + message);
websocket.send(message);
};
websocket.onclose = function (evt) {
writeToScreen("DISCONNECTED");
};
websocket.onmessage = function (evt) {
writeToScreen(evt.data);
websocket.close();
};
websocket.onerror = function (evt) {
writeToScreen(evt.data);
};
}
What four events are raised by the WebSocket object?
open, close, message, error
What are the four possible values for the readyState property of the WebSocket object?
WebSocket.OPEN, WebSocket.CONNECTING, WebSocket.CLOSING, WebSocket.CLOSED
Study this example of using the jQuery AJAX method.
$.ajax({
url: searchPath,
cache: false, // if true, a cached copy can be used
dataType: "xml", // must be xml or json
type: "GET", // or "POST"
success: function (data) {
// do stuff
},
error: function(xhr, errorStatusNumber, errorThrown) {
// do stuff
}
});What feature allows the creation of multi-threaded JavaScript applications?
web workers
What is required to use a web worker?
A separate JS file containing the script that will be processed on the separate thread.
What is the syntax to create a web worker?
var webWorker = new Worker(“workercode.js”);
What method of the Worker object starts the worker process?
postMessage
What parameters are required to call the postMessage method of the Worker object?
a single parameter containing the data to pass to the worker thread.
webWorker.postMessage(“some data”);
What should be passed to the postMessage method of the Worker object if there is no data to pass?
an empty string (“”)
webWorker.postMessage(“”);
What method of the Worker object stops the worker process?
terminate
What event of the worker process is raised when the worker process is complete?
message
var webWorker = new Worker(“workercode.js”);
webWorker.onmessage = function(evt) {
// Do stuff with results
}
What event of the worker process is raised when an error occurs in the worker process?
error
What are the available properties of the event object passed to the function handing the error event of the Worker object?
message, filename, lineno
What is the required structure of a JS file when used in a web worker?
onmessage = function(e) { // This must be first in the file.
// Do stuff
self.postMessage(result); // Send result back to calling page
}What are the available properties of the event object passed to the function handling the message event of the Worker object?
data
What data types can be passed to the postMessage method of the Worker object?
strings, native data types, JSON, and XML. Functions cannot be passed. Native data types, JSON and XML are serialized when passed.
True or false. There is a limit to the number of web workers that can be created.
False. There is no limit on the number of workers, but creating workers is a heavy operation that involves creating threads at the operating system level. To use a high volume of workers, consider using a pool of workers that can be used in a round-robin fashion.
True or false. Web workers can modify the web page.
False. Web workers have no access to the DOM.
True or false. Web workers can create their own web workers.
True
How can you run a web worker after a delay or set interval?
use window.setTimeout and window.setInterval.
var work = new Worker("workerFile.js");
setTimeout(function(){
work.postMessage("");
},3000); // Runs after a 3-second delay.
var work = new Worker("workerFile.js");
setInterval(function(){
work.postMessage("");
},3000); // Runs every 3 seconds.
