Mission. id, password 가 입력되면 로그인 버튼 활성화 id, password 가 다시 지워지면 로그인 버튼 비활성화 DOM요소 const inputId = document.querySelector('.loginId'); const inputPw = document.querySelector('.loginPw'); const loginBtn = document.querySelector('.loginBtn');첫번째 방법 inputPw.addEventListener('keydown', () => { if(inputId.value && inputPw.value) { loginBtn.disabled = false; loginBtn.styl..
예약어와 약속어 예약어 keyword 예약어(keyword)는 프로그래밍 언어에서 문법의 일종으로 미리 지정된 단어들이다. const a = `hello`;여기서 const 는 a rk 상수(const)임을 나타내는 예약어이다. 예약어는 식별자(identifier)의 이름으로 쓰일 수 없다. * await * break * case * catch * const * continue * debugger * default * delete * do * else * enum * export * extends * false * finally * for * function * if * implements * in * instanceof * interface * let * new * null * package * pr..
promise들을 여러가지고 chaining을 할 수 있다. promise.. then.. promise.. then.. async 와 always를 사용하면 동기식으로 코드를 순서대로 작동하는 것처럼 간편하게 작성 할 수 있다. 기존에 존재하는 promise 위에 간편하게 api를 제공한다. syntatic sugar 기존에 존재하는 거 위에 기존에 존재하는 것을 감싸서 더욱 간편하게 사용할 수 있는 api를 제공하는 것을 syntatic sugar 라고 한다. class 또한 prototype을 base로 그 위에 살짝 덧붙여진 syntatic sugar이다. async & await 깔금하게 promise를 사용할 수 있는 방법 무조건 promise를 async와 await으로 대체해서 사용해야하는..
Promise promise는 javascript에 내장되어 있는 object로 asynchronous operation을 위해 사용된다. 비동기적은 것을 실행할 때 callback 함수 대신 유용하게 쓰일 수 있는 object이다. Promise의 2가지 핵심포인트 state: process가 무거운 operaton을 수행하고 있는지 중인지 아니면 기능 수행이 완료되어 성공했는지 실패했는지 상태에 대해 이해하는 것이 중요하다. ① pending : promise가 만들어져서 지정한 operation이 수행 중일 때 ② fullfilled : operaion을 성공적으로 모두 끝내었을 때 ③ rejected: file을 찾을 수 없거나 network에 문제가 생겼을 때 producer와 consumer의..
Javascript callback Javascript 는 synchronous 한다. (동기적입니다.) hoisting이 된 후 코드가 작성한 순서에 따라 동기적으로 실행된다. 비동기적인(asynchronous) 실행방법 console.log('1'); setTimeout(function () { console.log('2'); }, 1000); console.log('3'); // output //1 //3 //2 첫번째로 console창에 1이 출력되고 두번째로 setTimeout은 Browser API 이므로 Browser에게 1000ms가 지난 후에 callback 함수가 실행되도록 요청하고 응답을 기다리지 않고 바로 세번째로 콘솔에 3을 출력한다. 그러고나면 1초가 지난 후에 setTimeou..
Array 1. Declaration const arr1 = new Array(); const arr2 = [1, 2]; 2. Index position const fruits = ['🍎', '🍌']; console.log(fruits); console.log(fruits.length); console.log(fruits[0]); console.log(fruits[fruits.length - 1]); // array의 index는 0부터 시작 3. Looping over an array mission. print all fruits a. for for (let i = 0; i < fruits.length; i++) { console.log(fruits[i]); } b. for of for (let fru..
1. script async vs defer default script 에 option 값을 주지 않고 html 파일을 실행하게 되면 위에서 아래로 순차적으로 코드가 실행된다. 위에서부터 HTML parsing을 하다가 중간에 script 코드가 있으면 parsing을 멈추고 해당 js를 fetching 하고, fetching이 끝나면 executing 하고 그 다음 다시 parsing을 시작한다. => page를 loading 하는데 시간이 오래 걸린다. async async는 boolean 값으로 위에 그림에서처럼 선언 하는 것만으로 true로 설정되어 사용할 수 있다. HTML parsing과 js 파일을 병렬로 fetching하고, fetching이 완료되면 parsing을 멈추고 executin..
논리식 (Logical) 논리식에서 거짓(false)인 8가지 1. 0 2. -0 3. '' 4. "" 5. false 6. null 7. undefined 8. NaN AND조건, OR조건 AND 조건 : && OR 조건 : || &&는 AND 연산자로 양쪽 모두 True 여야 한다. 반면 ||은 OR 연산자로 양쪽 중 한 쪽만 True여도 True를 출력한다. 예시 *** AND조건 2＆＆3 : AND 조건이므로 2를 먼저 확인하여 True이면, 3 또한 확인해야합니다. 여기서는 3 또한 True이므로 마지막 값인 3이 출력된다. 0＆＆2 : 같은 AND 조건이지만, 앞의 0이 이미 False이기 때문에 뒷 부분과 관계없이 0이 출력된다. 'Hi'＆＆0 : 앞의 String은 True이므로 뒷 부분을..
clock (digital) #html 00:00 -------------------------------------------------------- #js const clock = document.querySelector(".clock"); const clockTitle = clock.querySelector("h1"); function getTime() { const date = new Date(); const hours date.getHours(); const minutes = date.getMinutes(); const seconds = date.getSeconds(); clockTitle.innerText = `${hours < 10 ? `0${hours}`:hours} : ${minutes ..
