1. 조작할 html 하단에 자바스크립트 코드를 짜야 한다. => 코드를 한줄씩 차례대로 읽기 때문에 2. 셀렉터 오타주의 알림창임 3. 함수 오타주의 => 대문자, 소문자 주의
코딩
UI 알아서 만드는 법 1. 미리 html/css 디자인 만들기 2. 필요할때 보여달라고 js 짬 알림창임 버튼 .alert-box { background-color: skyblue; padding:20px; color:white; border-radius: 5px; display:none; } 번외: 알림창 닫기 버튼 만드는 법 알림창임 알림창닫기버튼 .alert-box { background-color: skyblue; padding:20px; color:white; border-radius: 5px; display:block; } 알림창임 닫기버튼 열기버튼
async / await async / await 는 프로미스 대신 요긴하게 쓸수 있다 async 를 function 앞에 붙이면 함수 실행후에 Promise 오브젝트가 남습니다 같이 쓰이는 await는 프로미스가 성공할때까지 기다려주며, 항상 async 함수 안에서만 씁니다 async function 더하기(){ //new Promise()어쩌구~ 디자인 안해도 'async'를 함수 앞에 붙이면 함수가 프로미스기능 return 1+1; } 더하기().then(function(결과){ //.then()사용가능! 왜? async 함수가 있으면 프로미스를 뱉어내니까 console.log(결과) }) // async 는 성공만 판정가능 //return Promise.reject() 실패판정하면, 에러를 일으킴..
Promise() 프로미스 = 성공/실패 판정기계! -3가지 상태- 성공실패 판정전 성공 후엔 실패 후엔 var 프로미스 = new Promise(); 프로미스.then(function(){ }).catch(function(){ }); // 콜백함수와 다르게 '실패시 특정 코드를 실행해주세요~' 가능함 1. Promise기계 안에는 아무거나 다 집어넣을 수 있습니다 var 프로미스 = new Promise(function(성공,실패){ var 어려운연산 = 1+1; 성공(); }); 프로미스.then(function(){ console.log('연산이 성공했습니다') }).catch(function(){ console.log('연산이 실패했습니다') }); //참고로, 연산결과같은걸 then안에서 활용하..
자바스크립트는 동기적처리가 베이스다 그런데, 상황에 따라서는 비동기적처리를 한다 순차적으로 가다가 오래걸리는 코드는 일단 치워두고, 쉬운 코드 먼저 실행한다음, 그제서야 실행한다 // 1 // 3 //(1초뒤) 2 함수를 순차적으로 실행하고 싶다면? 콜백함수를 사용한다 즉, 함수 안에 함수를 넣는다 → 참고로, 콜백함수는 비동기,동기라고 나누지 말자. 그냥 순차적으로 출력하는, 함수디자인 패턴일뿐... 콜백함수의 문제점첫째함수(function(){ 둘째함수(function(){ 셋째함수(function(){ 넷째함수(function(){ }); }); }); }); 겹겹이 쌓여서 보기싫음 해결방법은 프로미스!첫째함수().then(function(){ }).then(function(){ }).then(fu..
문제 src 디렉토리 안에는 클래스가 존재합니다. constructor, super, extends, class 키워드를 이용하여 구현합니다. 상속과 관련된 키워드 super, extends는 공식문서를 읽어본 후 적용해봅니다. 풀이 먼저 Grub 을 완성한뒤, Bee, HoneMakerBee,ForagerBee 순서대로 완성하면 됩니다. class Grub { // TODO.. constructor(){ // class는 항상 constructor()를 포함한다 this.age = 0; this.color = `pink`; this.food = `jelly`; } eat(){ return `Mmmmmmmmm jelly` // 콘솔이 아니라 리턴을 써야 했다 } } module.exports = Grub..
'__proto__' 앞서, 보았던 prototype(부모유전자)는 함수 뒤에만 쓸 수 있습니다. 속성이나 배열 같은 다른 객체에게는 쓸 수 없습니다. 하지만, '__proto__'는 모든 객체가 가지고 있는 속성이기 때문에 함수가 아닌 일반객체에서도 부모와의 상속관계를 표현할 수 있습니다. 즉 '__proto__'는 모든 객체에서 부모의 유전자를 검사할때 쓰는 속성입니다. function 기계(){ this.name = 'Kim'; this.age = 15; } var 학생1 = new 기계(); console.log(학생1.__proto__); === console.log(기계.prototype); 자식.__proto__ 는 부모. prototype을 의미한다. '__proto__'를 등록한다면? '..
Prototype이란? 자바스크립트에는 constructor(객체 찍어내는 기계)말고도 상속을 해주는 장치가 하나 더 있다! 바로 prototype 이다. 기계를 만들면, 우리가 모르게 prototype 이라는 게 생성된다. function 기계(){ this.name = 'Kim'; this.age = 15; } var 학생1 = new 기계(); var 학생2 = new 기계(); console.log(기계.prototype); '기계.prototype' 은 기계의 부모유전자입니다. 기계.prototype 에 변수나 함수가 들어있다면 기계로부터 생성되는 오브젝트(자식)들은 모두 그것들을 물려받아 쓸 수 있습니다. function 기계(){ this.name = 'Kim'; this.age = 15; ..
