전체 글 (97) 썸네일형 리스트형 onClick 속성을 이용하여 Validation 함수 구현방법 문제 : 아이디랑 비밀번호를 입력했을 때 조건에 부합하지 않으면 Alert를 실행!! 순서 1.알람창 tag 만들기 " 4자 이상 있어야 합니다. 2. hide class를 이용해서 미리 숨겨놓기 3. JS 에서 만약 input tag 의 value 값이 기존에 비어 있지만 함수가 호출되어 함수에 인자 값이 들어왔을 때 그 값이 4 미만이면 tag를 찾아 classList에 hide 를 remove() 함수를 이용한다. 4. 이 함수를 input tag에 onclick 이벤트 즉 속성이 불러졌을 때 함수를 호출(값 넣기)하는 모습을 만들면 완성 html email : 이메일을 정확히 입력해야합니다. password: password를 입력하지 않았습니다. 로그인버튼 JS const email =docum.. 버튼 클릭했을 때 화면을 보여주거나 가리기 1. 스타일 속성의 기존 hide 값을 block 으로 바꾸기 alertBox.setAttribute("style","display:block") 2. css 에 hide 클레스를 만든 후 classList에 contain() 함수를 이용하여 hide의 css를 조정 html Hello Alert 박스 닫기 CSS *{ box-sizing: content-box; } .alert-box{ margin-top: 100px; padding: 20px; border-radius: 4px; border: 2px black solid; text-align: center; } .hide{ display: none; } JS document.querySelector('#title').textContent="Alert.. Tree 개념 이해하기 목적 : 트리의 구조를 배열과 클레스 객체로 표현할 수 있다. 코드구현 class Tree{ constructor(value){ this.value=value this.children=[] } insert(value){ const childNode= new Tree(value) this.children.push(childNode) } } const rootNote= new Tree(null) rootNote.insert(1) firstNode= rootNote.children[0] firstNode.insert(2) console.log(firstNode) 깨달은 점 1.어떤 데이터의 관계를 만들 때 생각해야될 아이디어 1.1 데이터를 담을 공간을 만들어라 this.value= value 1.2 수직적 .. 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.. Q의 이해 프린트 작업목록 문제 김코딩은 최근 인쇄할 일이 많이 생겨 창고에서 안 쓰던 프린터를 꺼냈습니다. 이 프린터의 성능을 테스트하여 새로운 프린터를 장만할지 결정하려고 합니다. 김코딩은 프린터의 인쇄 작업 목록의 크기와 최대 용량을 가정하고 각기 다른 용량의 문서를 차례대로 인쇄하여 모든 문서가 인쇄되는데 최소 몇 초가 걸리는지 테스트하기로 했습니다. 프린터 인쇄 작업 목록의 제한사항은 다음과 같습니다. [제한사항] 인쇄 작업 목록은 칸으로 이루어져 있습니다. 각 칸에는 한 개의 문서만 위치할 수 있습니다. 문서는 1초에 한 칸만 이동할 수 있습니다. 인쇄 작업 목록의 크기는 bufferSize이고 최대 용량 capacities 만큼 문서를 담을 수 있습니다. 만약, 인쇄 작업 목록의 크기가 2이고 최대 용량이 10Kib라.. 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(){ } } 함수는 객체이다!? 함수.. 이전 1 2 3 4 5 6 7 ··· 13 다음