Jade_o.o

eventListener를 통해 계산기를 구현해보자 1. 연산자는 +,-,/,*가 올 수 있다. 2. 초기화와 계산 버튼에 대한 내용을 작성해야 한다. [계산] 버튼 클릭시 cal() 함수가 실행되도록 인라인 방식으로 미리 설정해 두었습니다. 먼저 전체 html 코드를 살펴보고 브라우저로 실행된 콘솔창도 함께 보자 계산기 만들기 값1: 값2: 연산자: 계산 초기화 결과: /* 방법1 querySelector 사용 : selector의 구체적인 그룹과 일치하는 document안 첫번째 엘리먼트를 반환한다. 일치하는게 없으면 null반환한다. */ function cal() { let value1 = Number(document.querySelector('#value1').value); let value2 ..

eventListener를 통해 text창에 입력 후 등록 버튼을 누르면 댓글이 달리도록 구현해보자. - 문제 1) - [ ] 아이디 input과 댓글 input을 입력하고 [등록] 버튼을 누르면, 댓글이 추가됩니다. 2) - 폼을 "제출"헸을 때에 해당하는 이벤트는 무엇인가요? 3) - [ ] 아이디 값과 댓글 값을 가져와야 합니다. 4) - [ ] 태그를 새로 만들고, "아이디 - 댓글내용" 형식이 되도록 설정합니다. 5) - [ ] 태그에 li를 추가합니다. 6) - [ ] 아이디 input과 댓글 input을 초기화해야 합니다. 1. 등록 버튼을 누르거나, input창이 focus된 채로 엔터키를 치면 댓글 등록 2. 댓글이 등록되면 아이디는 굵은 글씨 3. 댓글 등록 후 input창 초기화 4...

eventListener를 통해 버튼을 클릭 시 색상이 랜덤으로 변화되도록 코드로 구현해보자 1) - [ ] 버튼을 클릭하면 배경 색상이 변경됩니다. 2) - 문서 전체의 색상을 변경하려면 어떤 태그의 배경 색이 변해야 될까요? 3) - 버튼을 "클릭" 했을 때, 색상이 변경되려면 어떤 이벤트가 필요한가요? 4) - [ ] 버튼을 클릭했을 때 h2 태그의 색상 값이 변경됩니다. 5) - h2 태그의 content(내용)을 변경하려면 어떤 속성값을 변경해야 할까요? 6) - [ ] 색상을 나타내는 방식에는 헥스 코드(#RRGGBB)와 10진 코드 (R,G,B) 두 가지 방식이 있습니다. 7) - 이 프로젝트에서는 10진 코드(r, g, b) 방식을 사용합니다. 8) - rgb(r, g, b)에서 red, ..

addEventListener - event.target : event가 있는 요소를 반환해줌 - mouse 1) mouseover : 요소에 커서를 올렸을 때 2) mouseout : 마우스가 요소를 벗어날 때 3) focus : 포커스가 갔을때(=클릭했을때) - keyboard : 함수내에서만 envent 기능 구형 - scroll : scroll 없을 때는 실행 x 먼저 전체 html코드를 살펴보고 브라우저로 실행된 콘솔창도 함께 보자 div1 div2 event.target : 사용 시 event가 있는 요소를 반환해줌 let div1 = document.querySelector('.div1'); //div1.addEventListener('click', function(){ // console...