nata_developer

*Udemy의The Complete JavaScript Course 2020: Build Real Projects! 참고 1.비동기 프로그래밍 맛보기 const second = () => { setTimeout(() => { console.log("Async Hey there"); }, 2000); }; const first = () => { console.log("Hey there"); second(); console.log("The end"); }; first(); /* Hey there The end Async Hey there */ console.log(Hey there) 뒤에 sencond()가 있음에도 세번째 console.log인 The end가 먼저 출력되었다. setTimeout이 web..

JavaScript 2020. 8. 7. 15:50

*Udemy의The Complete JavaScript Course 2020: Build Real Projects! 참고 1.CLASS //ES5 var Person5 = function(name, yearOfBirth, job) { this.name = name; this.yearOfBirth = yearOfBirth; this.job = job; } Person5.prototype.calculateAge = function() { var age = new Date().getFullYear - this.yearOfBirth; console.log(age); } var john5 = new Person5('John', 1990, 'teacher'); //ES6 class Person6 { construc..

JavaScript 2020. 8. 7. 15:17

*Udemy의The Complete JavaScript Course 2020: Build Real Projects! 참고 1.SPREAD OPERATOR function addFourAges (a, b, c, d) { return a + b + c + d; } var sum1 = addFourAges(18, 30, 12, 21); console.log(sum1); //ES5 var ages = [18, 30, 12, 21]; var sum2 = addFourAges.apply(null, ages); console.log(sum2); //ES6 const sum3 = addFourAges(...ages); console.log(sum3); const familySmith = ['John', 'Jane', ..

JavaScript 2020. 8. 7. 14:54

1.ARROW FUNCTION const years = [1990, 1965, 1982, 1937]; // ES5 var ages5 = years.map(function(el) { return 2016 - el; }); console.log(ages5); // ES6 let ages6 = years.map(el => 2016 - el); console.log(ages6); ages6 = years.map((el, index) => `Age element ${index + 1}: ${2016 - el}.`); console.log(ages6); ages6 = years.map((el, index) => { const now = new Date().getFullYear(); const age = now - ..

JavaScript 2020. 8. 7. 14:10

*Udemy의The Complete JavaScript Course 2020: Build Real Projects! 참고 1.LET, CONST // ES5 var name5 = 'Jane Smith'; var age5 = 23; name5 = 'Jane Miller'; console.log(name5); // ES6 const name6 = 'Jane Smith'; let age6 = 23; name6 = 'Jane Miller'; console.log(name6); // LET function varTest() { var x = 1; if (true) { var x = 2; // 상위 블록과 같은 변수! console.log(x); // 2 } console.log(x); // 2 } function..

JavaScript 2020. 8. 7. 12:54

*Udemy의The Complete JavaScript Course 2020: Build Real Projects! 참고 1.FUNCTIONS ARE ALSO OBJECTS IN JAVASCRIPT 자바스크립트의 함수는 FIRST CLASS이다. 1. 함수는 Object type의 인스턴스이다. 2. 함수는 객체처럼 행동한다. 3. 변수에 함수를 저장할 수 있다. 4. 다른 함수에 인자로 함수를 전달할 수 있다. 1-1) PASSING FUNCTIONS AS ARGUMENTS var years = [1990, 1965, 1937, 2005, 1998]; function arrayCalc(arr, fn) { var arrRes = []; for (var i = 0; i < arr.length; i++) {..

JavaScript 2020. 8. 7. 12:29

*Udemy의 The Complete JavaScript Course 2020: Build Real Projects! 참고 Everything is an object 1.TYPE JAVASCRIPT의 TYPE은 PRIMITIVES와 그 외로 나뉜다. 2.OBJECT ORIENTED PROGRAMMING 1. 메써드와 프로퍼티를 통해 다른 객체와 상호작용한다. 2. 데이터를 저장 혹은 애플리케이션을 모듈로 구조화 하기 위해 사용한다. 3. 코드를 깨끗이 하기 위해 사용한다. 3.CONSTRUCTORS AND INSTANCES IN JAVASCRIPT 객체는 생성자를 통해 수 많은 인스턴스를 생성할 수 있다. 4.INHERITANCE 상속을 통해 Athlete 객체는 Person 객체의 코드를 포함하게 된다..

JavaScript 2020. 8. 6. 20:02

*Udemy의 The Complete JavaScript Course 2020: Build Real Projects! 참고 1.JAVASCRIPT DOM DOM: Document Object Model 1. HTML document의 구조화된 표현이다. 2. DOM은 자바스크립트와 같은 스크립트와 웹페이지를 연결하기 위해 사용된다. 3. 각각의 HTML box마다, 우리가 접근할 수 있고 상호작용 할 수 있는 DOM에는 object가 있다. 2.EVENT Events: 웹 페이지에 무언가 발생했다고 알리기 위해 보내는 알림 예제: 버튼 클릭, 윈도우 리사이징, 스크롤 다운, 키 누르기 Event listener: 특정한 이벤트에 기반한 액션을 수행하는 기능. 이벤트가 발생할 때 까지 기다린다. EXECU..

JavaScript 2020. 8. 6. 18:18