종우의 컴퓨터 공간

API(messenger) - Application Programming Interface - contracted provided by one pirce of software to another - Structured request and response - API endpoints: URL REST(HTTP Request to format that message) - Representational State Transfer - architecture style for designing networked applications - relies on stateless, client-server protocol, almost always HTTP Http Requests - GET: retrieve data..

document.querySelector('.get-jokes').addEventListener('click', getJokes); function getJokes(e) { const number = document.querySelector('input[type="number"]').value; const xhr = new XMLHttpRequest(); // get it from the external API xhr.open('GET', `http://api.icndb.com/jokes/random/${number}`, true); xhr.onload = function() { if (this.status === 200) { const response = JSON.parse(this.responseTe..

document.getElementById('button1').addEventListener('click', loadCustomer); document.getElementById('button2').addEventListener('click', loadCustomers); // Load Customer function loadCustomer(e) { const xhr = new XMLHttpRequest(); xhr.open('GET', 'customer.json', true); xhr.onload = function() { if(this.status === 200) { // console.log(this.responseText); const customer = JSON.parse(this.respons..

.open(method, url, async?) - initializes a newly-created request, or re-initializes an existing one - parameters method: HTTP request method such as GET, POST, PUT, DELETE, etc url: a DOMString representing the URL to send the request to async?: an optional boolean parameter .onprogress() - onprogress() is the function called periodically with information when an XMLHttpReqeust before success co..

Ajax 란? - Asynchronous(비동기) JavaSciprt And Xml의 약자이다. - 자바스크립트의 라이브러리 중 하나로 브라우저가 가지고 있는 XmlHttpRequest 객체를 이용해서 전체 페이지를 새로고침 할 필요 없이 필요한 일부분의 데이터만을 갱신할 수 있게 도와준다. - 비동기(async) 방식이란? 웹 페이지를 리로드하지 않고 데이터를 불러오는 방식을 말한다. Ajax를 통해서 서버에 요청을 한 후 멈추어 있는 것이 아니라 그 프로그램은 계속 돌아간다는 의미를 내포하고 있다. - Ajax는 아래와 같은 기술들이 혼합적으로 사용되며, 서버와 [JSON, XML, HTML, 텍스트 파일] 등을 주고 받을 수 있게된다. HTML DOM JavaScript XmlHttpRequest ..

- ES6 신텍스에서 상속하는 방법이다. - 자바 언어처럼 extends 키워드를 통해서 상속한다. 예제 class Person { constructor(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } greeting() { return `Hello there ${this.firstName} ${this.lastName}`; } } class Customer extends Person { constructor(firstName, lastName, phone, membership) { super(firstName, lastName); this.phone = phone; this.membership = members..

- 자바, 씨언어와 같은 오브젝트 오리엔티트 언어에서 사용하는 클래스와 신텍스가 비슷하다. 예제 class Person { constructor(firstName, lastName, dob) { this.firstName = firstName; this.lastName = lastName; this.birthday = new Date(dob); } greeting() { return `Hello there ${this.firstName} ${this.lastName}`; } calculateAge() { const diff = Date.now() - this.birthday.getTime(); const ageDate = new Date(diff); return Math.abs(ageDate.getUTC..

- this is the alternative way to create object with Object.create() method - Object.create() takes the first parameter of prototype 예제 const personPrototypes = { greeeting: function() { return `Hello there ${this.firstName} ${this.lastName}`; }, getsMarried: function(newLastName) { this.lastName = newLastName; } } const mary = Object.create(personPrototypes); // adding properties mary.firstName ..