Javascript (16) 썸네일형 리스트형 JS 지저분한 코드 깨끗하게 바꾸는 팁!! 문제: 한 조건에 대한 답이 두 개일 때 기존 function check(a){ if(typeof a === "string"){ return console.log("맞아요") }else{ return console.log("틀러요") } } 해결 : 삼항 연산자 function check(a){ typeof a === "string"? console.log("맞아요") : console.log("틀려요") } 문제 : 예외 조건이 undefined || null 일 때 다른 메세지를 보내고 싶으면 기존 function printMessage(text){ let message =text if(text === null || text === undefined){ message="nothing to displa.. callback 함수 지옥편 promise로 극복 문제 콜백함수는 동기적으로 한번 함수가 실행되고 끝나는 동기적 방식과 달리 함수 인자에 함수 값을 넣음으로써 함수를 여러번 호출할 수 있는 장점이 있다.(비동기적이라는 의미) 첫 번째: 콜백함수 이해하기 콜백함수 여러 함수를 여러번 호출할 수 있다. function show(a,callback){ console.log(a) callback(a) a++ console.log(a) } function minus(a){ a-- console.log(a) } show(1,minus) 결과 1,0,2 두 번째: 콜백함수 이해하기 2 //타입이 문자면 에러 메세지 보내줘 function show(a,callback){ callback(a) console.log("이제 함수를 종료합니다") } function che.. callback함수를 적용해보기! callback 함수를 이해했는지 확인하는 작업. 문제: 나이가 3 초과인 사람은 통과하고 아니면 입장할 수 없다라는 콜백함수 만들기. 원리 : 단일 쓰레드인 js엔진은 실행할 수 있는 공간이 한 곳인데(콜스택)입니다. 먼저 main함수가 실행되고 조건에 맞춰서 console.log가 실행이 되거나 되지 않은 상태(age3? console.log("통과입니다"): callback() } function errorcheck(age){ setTimeout(() => { console.log("나이가 3보다 작기 때문에 서버 요청에 실패하였습니다.") }, 1000); } check(7,errorcheck) check(2,errorcheck) 결과 통과입니다 나이가 3보다 작기 때문에 서버 요청에 실패하였습니.. JS function 코딩하면서 이해하기 문제 함수 매개변수의 기본 디폴트 값은 무엇인가? function check(a,b){ return typeof a } undefined check() 'undefined' 답은 'undefined' 함수는 값이고 속성 값이 될 수 있다. 함수의 모형을 보면 다음과 같고 함수의 값이 결국 속성 값으로 연결되서 생각 할 수 있음을 쉽게 볼 수 있다. function cal(a){ return a } undefined // 이를 다시 쓰면 a의 값이 함수임을 알 수 있다 let a=function(){ return a } undefined // 값을 쓸 수 있다는 것은 객체로 확장해서 생각하면 객체의 값으로 쓸 수 있다는 말이다 let a={ b: function cal(){ } } 함수는 객체이다!? 함수.. 자바스크립트 동작원리 with callback function 콜백함수 개념? 콜백함수는 간단하게 다른 함수에 매개변수로 넘겨준 함수를 말한다. 매개변수로 넘겨받은 함수는 일단 넘겨받고, 때가 되면 나중에 호출(called back)한다는 것이 콜백함수의 개념이다. 예시 function checkGang(count, link, good) { count < 3 ? link() : good(); } function linkGang() { console.log('1일 3깡은 기본입니다. 아래 링크를 통해 깡을 시청해주세요'); console.log('https://youtu.be/xqFvYsy4wE4'); } function goodGang() { console.log('오늘 할당량은 모두 채우셨습니다! :)') } checkGang(2, linkGang, goodGan.. 더미데이터 버튼 클릭시 보여주기 위한 onclick=button() 만들기 javascript function button(){ const container=document.querySelector('#contents') for(let i=0; i 함수로 tag 여러 태그 만들고 데이터 값 넣기 메모 DOM을 JavaScript로 조작하여 HTML Element를 추가하거나 삭제, 혹은 내용을 변경 createElement - CREATE querySelector, querySelectorAll - READ textContent, id, classList, setAttribute - UPDATE remove, removeChild, innerHTML = "" , textContent = "" - DELETE appendChild - APPEND innerHTML과 textContent의 차이 DOM의 더 깊은 내용에 대해서 이해할 수 있다. createDocumentFragment를 활용하여, 더 효율적으로 DOM을 제어할 수 있다. HTML5 template tag 사용법을 이해할 수 있다. ele.. 이전 1 2 다음
