430 Exam
x = [1, 2, 3, 4].shift() what is value of x?
1
how many symbols in decimal
10
x = ["red", "green", "blue"].filter(i => i.length > 3)
["green", "blue"]
123 == '123'
true
'3' + 4 + 5
'345'
3 + 4 + '5'
'75'
POST
(create) send data to server, appending to existing
DELETE
(delete) send data to server, overwriting if exists
GET request
(read) request document from server
PUT
(update) send data to server, overwriting if exists
console.log("-------") for(var i=0; i<5; i++) { console.log(i) } console.log("-------") what prints to the console?
-------- 0 1 2 3 4 --------
how many symbols in hexadecimal
16
how many symbols in binary
2
x = [0, 1, 2, 3, 4, 5].indexOf(4)
4
x = [1, 2, 3, 4].slice(-1) value of x?
4
how many symbols in octal
8
to use in responsive sites:
<meta name="viewport" content="width=device-width, initial-scale=1.0"> * { box-sizing: border-box; } @media
<div style="clear: left"> another floating element is allowed to the left of this div?
False
Does var h1 = document.createElement('h1'); create a new h1 node in the DOM and append it to the body element?
False
For responsive website, it is best to use absolute pixel counts for sizing elements
False
Native apps are super easy to convert from iOS to Android. Its fast simple and only requires a license key from Google and Apple
False
<meta name="viewport" content="width=device-width, initial-scale=1.0"> should be in the <body>?
False it should be in the head
<ul id="appendToMe">...</ul>. How do you select this unordered list?
document.getElemenetById('appendToMe')
<body onload="init()"> when browser fully loads the body and DOM, it will call the init function?
True
A best practice is to design with a mobile first approach. Make it work for mobile users first and then style for other devices.
True
All of the following are correct ways of defining arrays var colors = ["blue", "yellow", "red"] var empty = [] var powersOf2 = [2, 4, 8, 16]
True
By default inline elements are the size of their contents
True
By default, Block elements take up the width of their parent container and have the height of their contents. They are rendered by the browser on their own line.
True
Hybrid apps lets developers write mobile apps using HTML, CSS, and Javascript. This is great because you can take advantage of skills and frameworks from web developers and allows them to create mobile apps without having to know native android and iOS languages/tools.
True
Javascript allows a programmer to add, remove, and change nodes in the DOM (T/F)
True
PhoneGap is a product created out of Apache Cordova open source project
True
With the responsive grid, wrap columns in a row div and ensure the columns add up to 100%
True
buid.phonegap.com allows you to upload HTML/CSS/JS, configs, and images and compile them to native objects for web platforms
True
does JS use functions as classes?
True
var colors = ["blue", "yellow", "red"] colors.pop() colors.push("maroon") console.log(colors) What logs to console?
[blue, yellow, maroon]
If you want to append an item to an array simply do it like this:
a.push()
Appends items to the end of the array.
a.push(item1, ..., itemN)
Reverses the array.
a.reverse()
Removes and returns the first item.
a.shift()
Returns a sub-array.
a.slice(start[, end])
Returns a string with the toString() of each element separated by commas.
a.toString()
promise model with async/await
async function makeServerRequest(url) { try { result = await serverRequest(url) // wait for request, assign result... if (!result) { throw new Error(result) } else { showGrades(result) } } catch(error) { showError(error) } } makeServerRequest('http:/asu.edu/getGrades/123456789')
asynchronous
button.addEventListener() XMLHttpRequest() fetch() 3rd Party Libraries: MySQL.js
3 major approaches of asynchronous
callbacks promises asynch/await
onmousedown = "startDrawing(event)" onmouseup = "stopDrawing(event)" What happens when user clicks down mouse? What happens when user lets go of click?
click down = startDrawing let go = stopDrawing
synchronous example
console.log('a') console.log('b') console.log('c')
box-sizing: border-box;
content is variable and shrinks to accommodate padding and border outside dimension of element is fixed and set with width and height border dictates final size width and height style apply to border
box-sizing: content-box;
content size is fixed with width and height outside dimension of element is variable and grows to accommodate padding and border content dictates final size width and height style apply to content
how can you reset a form in js?
create a function that accepts a form and then use form.reset() function resetForm(form) { form.reset() }
123 === '123'
false
one other way to create an object
function Person(name, age) { this.name = name; this.age = age; } // Define an object var you = new Person('You', 24);
OOP example
function makePerson(first, last) { return { first: first, last: last, fullName: function() { return this.first + ' ' + this.last; }, fullNameReversed: function() { return this.last + ', ' + this.first; } }; } var s = makePerson('Simon', 'Willison'); s.fullName(); // "Simon Willison" s.fullNameReversed(); // "Willison, Simon"
blocking vs non-blocking
js has few blocking calls, ex: alert() in js, we do not block
XMLHttpRequest
non-blocking, asynchronous, callback model
fetch
non-blocking, asynchronous, promise or async/await model
3 subpixels of one logical pixel
red green blue
rules for phone gap
split html, css, and js into separate files replace onload with onDeviceReady include cordova.js handle security with content-security-policy meta tag make a config.xml file include plugins for native resources code using the plugin JS API zip for compilation
<button onlick="appendListItem('append to me')">...</button>. What happens when the button is clicked?
the browser looks for a javascript function called appendListItem
inline element size is dictated by
the width and height of their contents
block element size is dictated by
the width of their container and the height of their contents
promise model
then/catch makeServerRequest('http:/asu.edu/getGrades/1234567') .then(result => showGrades(result)) .catch(error => showError(error))
Most likely reason for this error?: TypeError: Cannot read 'value' of null
there is no element in the DOM that matches the ID name of the one given
@media queries are used to create breakpoints to style different hardware devices
true
content-box: the content dictates the size of the element on the screen. border-box: the border dictates the size
true
function getNumValue(id) { return Number(document.getElementById(id).value); } calling the above functions does: 1. gets the element 2. read the value of element 3. convert element value to number 4. returns results of step 3 to function caller
true
native app development requires
two teams devs that know two platforms decide which platform to do first maintain dual source code great performance
ways to create an array
var a = new Array(); a[0] = 'dog'; a[1] = 'cat'; a[2] = 'hen'; a.length; // 3 var a = ['dog', 'cat', 'hen']; a.length; // 3
create objects
var obj = new Object(); var obj = {}; var obj = { name: 'Carrot', _for: 'Max', details: { color: 'orange', size: 12 } }; obj.details.color; // orange obj['details']['size']; // 12
function that will return take an array and return an array with the elements doubled?
x.map(x => x*2)
write a function that will return the sum of all the numbers in a given array
x.reduce((sum, item) => sum + item)