Category: JavaScript

What’s an API?
The acronym “API” stands for:

Application
Programming
Interface

google API
https://developers.google.com/apis-explorer/#p/
ProgrammableWeb
https://www.programmableweb.com/apis/directory

const asyncRequestObject = new XMLHttpRequest();
asyncRequestObject.open('GET', 'https://unsplash.com');

const req = new XMLHttpRequest();
undefined
req.open('GET', 'https://www.google.com/');
undefined

VM453:1 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

function handleSuccess(){
	console.log(this.responseText);
}
asyncRequestObject.onload = handleSuccess;

function handleError(){
	// in the function, the 'this' value is the XHR object
	console.log('An error occured');
}
asyncRequestOjbect.onerror = handleError;

function handleSuccess (){
	console.log(this.responseText);
}
function handleError(){
	console.log('An error occurred')
}

const asyncRequestObject = new XMLHttpRequest();

asyncRequestObject.open('GET', 'https://unsplash.com');
asyncRequestObject.onload = handleSuccess;
asyncRequestOjbect.onerror = handleError;

asyncRequestObject.send();

GET Request: An internet request for data. Sent from a client to a server.
Response: A server’s response to a request. Sent from a server to a client. A response to a GET request will usually include data that the client needs to load the page’s content.

-Ajax Definition
Asynchronous
JavaScript
And
XML
request

Get request and response
Data: XML, JSON, HTML

xhr(XMLHttpRequest (XHR)) is Asynchronous

sudo npm install -g bower

https://bower.io/

run bower install

var numLetters = function(letter){
	return new Function('times',
		"if (times < 0) return '';
		var result = '';
		times = Math.round(times);
		while(times--){ result += '" + letter +"'; }
		return result;"
		);
}
&#91;/javascript&#93;

&#91;javascript&#93;
<div id="beach-info"></div>
<script type="text/template" id="beach-supplies">
	<% if(supplies.empty) { %>
		<p> Whaaaat? Get to the beach anyway! </p>
	<% } %>

	<ul>
		<li> Sunscreen - <% if (supplies.sunscreen) { %> check! <% } %> </li>
		<% if (supplies.towel) { %>
			<li> Towel - Yes, a <%= supplies.towel =%> one! </li>
		<% } %>
		<li> Shades - <% if (supplies.shades) { %> check! <% } else { %> sadly, no!! <% } %></li>
	</ul>
</script>

var string = "Hi, my name is *(name)*. And I *(emotion)* this *(thing)*!";

var logResult = template( string );

logResult('Richard', 'love', 'green mint icecream', 2);

Yomen
npm install -g grunt-cli bower yo generator-karma generator-angular

http://knockoutjs.com/

<user-bio>
    <h3>Richard</h3>
    <img src="img/richard_profile.jpg" alt="Richard's profile picture">
    <p>Before working at NNN, Richard...
</user-bio>

$('#my-elem').click(function(e){
	//the element has been clicked.. do stuff
})

document.body.innerHTML = ”;
document.body.style.background= “white”;

var num = [1, 2, 3];

for(var i = 0; i < nums.length; i++){ var num = nums[i]; var elem = document.createElement('div'); elem.textContent = num; elem.addEventListener('click', function(){ alert(num); }); document.body.appendChild(elem); } [/javascript] [javascript] getCurrentCat: function(){ return model.currentCat; }, getCats: function(){ return model.cats; }, setCurrentCat: function(cat){ model.currentCat = cat; }, incrementCounter: function(){ model.currentCat.clickCount++; catView.render(); } }; [/javascript]

function loadImage(src, parent, callback){
	var img = document.createElement('img');
	img.src = src;
	img.onload = callback;
	parent.appendChild(img);
};

var sequence = get('example.json')
.then(doSomething)
.then(doSomethingElse);

Syntax

var promise = new Promise(function(resolve[, reject]){
	var value = doSomething();
	if (thingWorked){
		resolve(value);
	} else if (somethingWentWrong){
		reject();
	}
}).then(function(value) {
	return nextTing(value);
}).catch(rejectFunction);

function setup() {
	document.getElementById('canvas').addEventListener('mousemove',onMouseMove);
	document.getElementById('canvas').addEventListener('keydown',onKeyDown);
}
function onMouseMove(event) {
	var posx = event.clientX;
	var posy = event.clientY;
	console.log("(", posx, ", ", posy, ")");
}
function onKeyDown(event) {
	var keyID = event.keyID;
	console.log("ID: ", keyID);
}

javascript test library
https://jasmine.github.io/

describe('Address Book', function(){
  it('should be able to add a contact', function(){
    var addressBook = new AddressBook(),
    thisContact = new Contact();

    addressBook.addContact(thisContact);

    expect(addressBook.getContact(0)).toBe(thisContact);
  });
});

describe('Address Book', function(){
  it('should be able to add a contact', function(){
    var addressBook = new AddressBook(),
    thisContact = new Contact();

    addressBook.addContact(thisContact);

    expect(addressBook.getContact(0)).toBe(thisContact);
  });

  it('should be able to delete a contact', function(){
    var addressBook = new AddressBook(),
    thisContact = new Contact();

    addressBook.addContact(thisContact);
    addressBook.deleteContact(0);

    expect(addressBook.getContact(0)).not.toBeDefine();
  });
});

var amy = {loc:1};
move(amy);
var ben = {loc:9};
move(ven);

var move = function(car){
	car.loc++;
};

var gold = {a:1};
var blue = extend({}, gold);
var rose = Object.create(gold);
gold.z = 3
log(blue.z); //undefined
log(rose.z); //3

var = {}
this indicate in memory variable.