반응형 addEventListener4 selectbox를 JS로 컨트롤 해보기 - input, change 이벤트 selectbox를 JS로 컨트롤 해보기 - input, change 이벤트 이전 포스팅에서는 Javascript로 DOM을 조작하는데 있어, input 사용을 주로 예제로 들었습니다. 이번 포스팅에서는 input의 사촌(?) 격인 selectbox 컨트롤을 추가로 정리해보면서, 다양한 form 요소들을 사용하는 방법을 확장해 나가보기로 합니다. selectbox의 장점 input은 사용자가 직접 타이핑을 해서 입력을 하기 때문에, 입력되는 데이터를 '한정'하거나 제한을 해야하는 장치들이 필요합니다. 예를 들어 대학교 이름을 입력받아야 하는 경우 사용자에 따라서 '한국대학교', '국립한국대학교', '한국대', '한대' 등으로 각양각색으로 입력을 할 수 있기 때문입니다. 그래서 마치 4지선답 객관식 문제처.. 2023. 2. 16. 마우스 wheel 동작 이벤트 및 감지 - scrollY, scrollTop 차이? 마우스 wheel 동작 이벤트 및 감지 웹문서를 다이내믹하게 표현하기 위해서는 scroll 이벤트에 대한 동작 감지와 컨트롤은 필수일 것입니다. 이벤트 리스너를 달아두고 click을 감지하는 것은 비교적 '간단한' 느낌이 들지만, wheel 동작을 감지하는 것은 상대적으로 조금 더 복잡하거나 까다롭다고 느끼면서 어려워하는 경향이 존재하기도 합니다. 하지만, 몇가지 속성들에 대해 동작원리를 파악해 두고 이해를 해 둔다면, 스크롤 이벤트는 응용할 수 있는 표현 영역이 훨씬 더 다양하게 존재할 수 있습니다. 그래도 Wheel 동작 감지와 scroll은 어렵게 보인다구요? 일단 당장 도전해 보고 판단해 봅시다. window.addEventListenter 사용자가 브라우저 화면을 얼마나 스크롤했는지를 파악하기 .. 2023. 2. 9. JavaScript로 버튼을 다루는 방법 2가지(onclick, addEventListenter) JavaScript로 버튼을 다루는 방법 2가지 이전 포스팅에서 자바스크립트로 CSS의 display 속성을 조작하여 Modal 공지창을 띄워주는 방법을 알아보았습니다. Javascript로 알림창 보이기 / 숨기기 (+ 함수로 개선하기) Javascript로 알림창 보이기 / 숨기기 (+ 함수로 개선하기) Javascript로 알림창 보이기 / 숨기기 웹 사이트에서 마우스 롤오버를 하면 숨겨져 있던 서브메뉴가 보인다거나, 공지 알림창을 클릭하면 사라지거나 하는 경우는 거의 대부분 Javascript로 CSS의 displa kincoding.com 공지창을 띄워주기 위해서는 엘리먼트를 클릭하는 행위가 필요했는데요, 이처럼 버튼을 클릭하는 방법에 있어서도 자바스크립트는 2가지의 다른 방식을 활용할 수가 있.. 2023. 1. 16. switch 구문? - 가끔 사용되니 if와 비교하여 이 참에 정리 코딩을 조금이라도 학습해본 사람이라면, 조건을 핸들링해야 할 때 if 조건문을 가장 먼저 떠 올리게 될 것입니다. 그런데 현업실무에서는 때때로 switch 구문을 이용해서 조건을 처리하는 경우도 왕왕 존재합니다. if 구문와 switch 구문이 비슷하게 동작한다고 하면 어떤 모습으로 서로 다르게 사용되는 지 정리해두면 좋습니다. switch 기본 구문 다음 코드로 살펴봅시다. 사용자가 1 또는 2를 입력(선택)하는 상황을 가정해보았습니다. let yourChoice = 1; switch (yourChoice) { case 1: alert("1을 선택했습니다!"); break; case 2: alert("2를 선택했습니다!"); break; } yourChoice 변수에 1이 담겼으니, case 1: 이하.. 2023. 1. 6. 이전 1 다음 반응형
