본문 바로가기

CodeIt_Sprint/인터렉티브_자바스크립트12

(12)인터렉티브_자바스크립트_Input관련 이벤트.type 연습용 코드 :- html 코드 : Hello ! Stay Signed in  - CSS 코드 :#form { width: 250px; height: 250px; margin: 70px 30px; padding: 30px; box-shadow: 2px 2px 10px #bfbfbf; border-radius: 5px;}.title { margin: 10px 0 15px; text-align: center; color: #6502C2;}.input { width: 100%; height: 35px; margin: 5px 0; padding: 5px 10px; box-sizing: border-box; cursor: pointer;}.. 2024. 12. 5.
(11)인터렉티브_자바스크립트_키보드 관련 event ● 키보드 관련 event.프로퍼티 값 (2가지)○ event.key : 키보드를 누른 후 출력되는 값○ event.code : 키보드를 눌렀을 때, 키보드 상 누른 위치 :● 키보드 관련 event.type (3가지) ○ 키보드를 눌렀을 때, 발생 type => ''keydown" , "keypress""keydown" : 기능적인 key(ESC , Tab) 등 과 출력 관련 키 모두 발생 , 연타 눌렀을 떄도 발생"keypress" : 연타 눌렀을 때, 발생X , ESC 눌렀을 때, 발생X , 영어가 아닌 문자 입력 시, //어지간하면, 사용 X○ 키보드를 누른 후의 떼었을 때, 발생 type => "keyup" ● 연습문제 :코드잇 우등생 규리는 최근에 공부한 HTML/CSS, 그리고 자바스크립트를.. 2024. 12. 4.
(10)인터렉티브_자바스크립트_마우스 클릭 관련 세부 event.type 3가지, 마우스 포인터 이동 관련 세부 event.type □ 마우스 클릭 동작● 동작1_ 마우스 왼쪽 한번 클릭○ "마우스 왼쪽 클릭"으로 event.type 발생 종류, 순서 (Window 기준)- event.type 종류 :'mousedown''mouseup''click'- event.type 순서 : 'mousedown' => "mouseup" => 'click' ● 동작2_ 마우스 오른쪽 한번 클릭 ()○ "마우스 오른쪽 클릭"으로 event.type 발생 종류, 순서 (Window 기준)- event.type 종류 :'mousedown''mouseup''contextmenu'- event.type 순서 : 'mousedown' => "mouseup" => 'contextmenu'● 동작3_ 마우스 왼쪽 2번 연타 클릭 ()○ "마우스 오른쪽 클릭"으로.. 2024. 12. 3.
(9)인터렉티브_자바스크립트_event객체프로퍼티메소드 preventDefault() 메소드를 이용하여, 실습 3개 해보기(작성중) ● Default 코드 , 출력 장면 :- index.html Link I Love Codeit! - 출력장면 ● 실습 1 : JavaScript 코드를 이용하여, link의 링크 접속시, 접속기능은 안되고, "꺼져"라는 경고창 출력 //href 속성삭제 X- 답 : const link = document.querySelector('#link'); link.addEventListener('click',function(event) { event.preventDefault(); alert('꺼져 병신아'); });● 실습 2 : checkBox 태그가 unchecked 되어있을 때, input 입력을 막고, "체크하고 입력해 병신아" 경고창 출력되도록.. 2024. 11. 29.