12.5) 폼 조작하기
12.5.1 form 태그 선택하기 : form 태그는 forms 속성과 name 속성으로 선택가능
* forms 속성 사용
- ducument 객체의 forms 속성은 모든 form 태그의 노드 정보를 HTMLCollection 객체에 담아 반환
- forms 속성을 사용하면 화면에 있는 form 요소 노드를 쉽게 선택 가능
- 개발자 도구 콘솔창에서 document.forms로 값 출력하면 HTMLCollection객체에 모든 form 요소 노드의 정보가 담겨있음
- HTMLCollection 객체는 유사배열이라 인덱스를 사용해 form 요소 노드에 하나씩 접근 가능
- 주의! forms 속성 사용방법은 form 태그의 위치가 바뀌면 잘못 참조하게 되어 오류 발생할 수 있음
* name 속성 사용
- form 태그에 name 속성을 사용하면 훨씬 직관적으로 form 요소 노드 선택 가능
- name 속성값으로 접근하면 form 태그의 순서가 바뀌어도 문제 발생x
<body> <form name="frm1"> <input type="text"> </form> <form name="frm2"> <input type="text"> </form> </body> document.frm1; // form 태그의 name 속성값이 frm1인 노드 document.frm2; // form 태그의 name 속성값이 frm2인 노드
12.5.2 폼 요소 선택하기
- 폼 요소 : input 태그, select 태그, button 태그 등
- 폼 요소 선택은 elements 속성이나 name 속성 사용
예제 코드)
<body> <form name="frm1"> <label for="uname">이름</label> <input type="text" id="uname" name="uname"> <label for="age">나이</label> <input type="text" id="age" name="age"> <label for="gender">성별</label> <select id="gender" name="gender"> <option value="male">male</option> <option value="female">female</option> </select> <button type="submit">전송</button> </form> </body>
- elements 속성 : form 요소 노드의 하위 노드 중 폼 요소 노드만 반환하는 속성
- 위 예제코드를 실행하고 개발자 도구의 콘솔창에 document.frm1.elements 입력시 아래처럼 출력됨
- elements 속성은 HTMLFormControlsCollection 객체에 여러 개의 노드를 담아 반환
- HTMLFormControlsCollection 객체에는 form 요소 노드의 하위에 있는 폼 요소 노드의 정보가 담겨있음
- 인덱스로 정의된 폼 요소 노드의 정보는 기본으로 포함되는 값임
- 폼 요소에 name 속성을 사용했다면 name 속성값으로도 노드를 참조할 수 있음
- 폼 요소에 접근하는 방법 : 인덱스 사용 or name 속성값 사용
document.frm1.elements[0]; // 0번 인덱스 노드 document.frm1.elements['uname']; // form 요소 노드의 하위 노드 중에서 name 속성값이 uname인노드 두 코드는 접근방법의 차이일 뿐, 똑같이 neme 속성값이 uname인 input 요소 노드를 선택함
- document.frm1.uname; 처럼 elements 속성을 생략하고 name 속성값에 바로 접근해도 됨
12.5.3 폼 요소의 입력값 다루기
폼 요소는 사용자에게 값을 입력받아 이를 서버에 전달
서버에 전달하기까지 폼 요소에 입력된 값이 유효한지 검증할 수 있어야 함
값을 입력받는 대표적인 폼 요소 : input 태그, select 태그
* 한 줄 입력 요소 다루기
- 한 줄 입력 요소 : input 태그의 type 속성값을 text, password, number, url, search, email 등으로 지정했을 때 표시되는 폼 요소
- 값을 가져오거나 설정하는 방법이 모두 같음
- 사용자가 입력한 값을 가져오려면 해당 요소 노드에서 value 속성을 사용하면 됨
예제 코드)
<form name="frm"> <input type="text" name="id"> <input type="password" name="pw"> </form> document.frm.id.value; document.frm.pw.value; 웹브라우저 콘솔창에 출력하면 요소에 입력한 값이 각각 출력됨
- value 속성은 웹브라우저에 입력한 값을 그대로 가져올 수 있기때문에 암호화되어 보이는 비밀번호 등도 검증할 수 있음
- value 속성에 값을 할당해 원하는 값을 JS로 입력 요소에 직접 삽입할 수도 있음
<form name="frm"> <input type="text" name="id"> <input type="password" name="pw"> </form> <script> document.frm.id.value = 'jscoding'; document.frm.pw.value = 'aaaccc'; </script>
* 여러 줄 입력 요소 다루기
- 여러 줄 입력 요소 : textarea 태그를 사용하면 표시되는 폼 요소
- 요소의 값을 가져오거나 설정하는 방법은 한 줄 입력 요소와 같음
* 체크박스 다루기
- value 속성으로 값을 가져올 수 있음
- 체크박스에 체크 표시가 있는 것만 값을 가져와야 하는 경우가 많음
- 체크되어 있는 지는 checked 속성으로 확인 가능
- 반복문으로 체크박스 노드에 하나씩 접근한 뒤 checked 속성이 있으면 value 속성으로 값 가져오기
const checkedEls = document.query.querySelectorAll("[type='checked']"); for(let i = 0; i < checkedEls.length; i++){ if(checkedEls[i].checked === true){ console.log(checkedEls[i].value); } }
- 체크박스를 모두 체크된 상태로 바꾸고 싶다면? JS로 checked 속성에 true를 할당
<script> const checkboxEls = document.querySelectorAll("[type='checkbox']"); for(let i = 0; i < checkboxEls.length; i++){ checkboxEls[i].checked = true; // 체크박스를 모두 체크된 상태로 바꾸기 } </script>
* 라디오버튼 다루기
- 라디오버튼 : 여러 개의 항목 중 하나만 선택하게 할 때 사용하는 폼 요소
- 체크박스와 같은 방식으로 값을 다룸
- checked 속성으로 라디오버튼이 선택됐는지 확인하고 value 속성으로 값을 가져옴
코드를 웹 브라우저에서 실행한 뒤 원하는 항목 선택, 콘솔창에 다음 코드를 입력하고 실행하면 선택된 항목의 value 속성값이 출력됨 const radioEls = document.querySelectorAll("[type='radio']"); for(let i = 0; i < radioEls.length; i++){ if(radioEls[i].checked === true){ console.log(radioEls[i].value); } }
- 라디오 버튼을 선택된 상태로 만드는 방법도 체크박스와 동일 : checked 속성에 true 값 할당
- 라디오버튼은 여러 개를 선택하는 요소가 아니므로 원하는 항목만 선택될 수 있게 if 문으로 처리
<form> (중략) </form> <script> const radioEls = document.querySelectorAll("[type='radio']"); for(let i = 0; i < radioEls.length; i++){ if(radioEls[i].value === 'banana'){ radioEls[i].checked == true; } } </script>
* 콤보박스 다루기
- 콤보박스 : select 태그로 만듬, 여러 항목에서 하나를 선택하는 형태의 폼 요소
- 콤보박스에서는 selected 속성으로 선택항목을 확인할 수 있음
ex)
<form> <select> <option value="apple">사과</option> <option value="banana">바나나</option> <option value="orange">오렌지</option> <option value="melon">멜론</option> </select> </form> 위 코드를 웹 브라우저로 실행 후 원하는 항목 선택 다음 코드를 콘솔창에 입력하면 현재 선택된 콤보박스의 value 속성값을 결과로 가져옴 const optionEls = document.querySelectorAll("option"); for(let i = 0; i < optionEls.length; 1++);{ if(optionEls[i].selected === true){ console.log(optionEls[i].value); } }
- 콤보박스를 선택된 상태로 만드는 방법 : 라디오버튼과 비슷함, 한 항목만 선택할 수 있으므로 if문으로 원하는 항목을 선택하게 처리
<form> (중략) </form> <script> const optionEls = document.querySelectorAll("option"); for(let i = 0; i < optionEls.length; i++){ if(optionEls[i].value === 'banana'){ optionEls[i].selected == true; } } </script>
* 파일 업로드 요소 다루기
- 파일 업로드 요소 : input 태그의 type 속성값은 file로 지정하면 표시되는 요소
- 파일을 업로드할 때 사용
- 핵심은 files 속성으로 반환되는 FileList 객체
<form name="frm"> <input type="file" name="upload"> </form> 위 코드를 웹 브라우저도 실행 후, 이미지 파일을 하나 첨부한 뒤 콘솔창에 다음 코드 실행 const filesObj = document.frm.upload.files; console.log(filesObj);
- 결과로 FileList 객체가 반환됨. FileList 객체는 파일 업로드 요소로 선택한 파일에 대한 다양한 정보를 담고있는 객체
- FileList 객체의 속성에 접근하면 다음과 같은 정보를 가져올 수 있음
const files = document.frm.upload.files; files[0].name; // 파일 이름 files[0].size; // 파일 크기 files[0].type; // 파일 타입 files[0].lastModifiedDate; // 파일 마지막 수정일
※ 폼 요소 관련 기타 메서드
|
메서드
|
설명
|
|
submit( )
|
폼 요소의 값 전송(submit)
|
|
focus( )
|
폼 요소에 포커스(커서)를 이동
|
|
폼 요소 관련 메서드 전체를 살펴보려면 아래 페이지 참고
|
|
12.6) 이벤트 다루기
- 이벤트(event) : 웹 브라우저와 사용자 사이에 상호작용이 발생하는 특정 시정
- 발생한 이벤트 종류에 따라 어떤 작업을 하거나 미리 등록한 함수를 호출하는 등의 조작을 JS로 지정할 수 있음
12.6.1 이벤트 종류
- 웹 브라우저와 사용자 간의 상호작용으로 발생하는 이벤트는 200여가지가 넘음
* 꼭 알아야하는 중요한 이벤트
|
구분
|
이벤트
|
설명
|
|
마우스 이벤트
|
onclick
|
마우스로 클릭하면 발생
|
|
ondblclick
|
마우스로 빠르게 두 번 클릭하면 발생
|
|
|
onmouseover
|
마우스 포인터를 올리면 발생
|
|
|
onmouseout
|
마우스 포인터가 빠져나가면 발생
|
|
|
onmousemove
|
마우스 포인터가 움직이면 발생
|
|
|
onwheel
|
마우스 휠(wheel)을 움직이면 발생
|
|
|
키보드 이벤트
|
onkeypress
|
키보드 버튼을 누르고 있는 동안 발생
|
|
onkeydown
|
키보드 버튼을 누른 순간 발생
|
|
|
onkeyup
|
키보드 버튼을 눌렀다가 뗀 순간 발생
|
|
|
포커스 이벤트
|
onfocus
|
요소에 포커스 되면 발생
|
|
onblur
|
요소가 포커스를 잃으면 발생
|
|
|
폼 이벤트
|
onsubmit
|
폼이 전송될 때 발생
|
|
리소스 이벤트
|
onload
|
웹 브라우저의 리소스 로드가 끝나면 발생
|
※ 여기 없는 이벤트를 활용해야 할 때도 있음. 아래 페이지 확인
https://developer.mozilla.org/en-US/docs/Web/Events
12.6.2 이벤트 등록하기
- 이벤트 등록 : 이벤트가 발생할 때 어떤 작업을 할지 JS코드로 작성하는 것
- 이벤트 등록 방법 3가지 : 인라인, 프로퍼티 리스너, 이벤트 등록 메서드
* 인라인 방식으로 이벤트 등록 : HTML 태그에 속성으로 이벤트 등록하는 방법
ex)
<button onclick="clickEvent()">클릭</button> <script> function clickEvent(){ alert("click"); } </script> onclick 이벤트를 button 태그의 속성으로 사용 속성값으로는 이벤트가 발생할 때 실행될 함수 지정 버튼을 클릭해 보면 clickEvent() 함수가 실행되어 웹브라우저에 경고창 출력됨
- 이벤트를 여러 가지 사용하면 사용한 만큼 이벤트를 제어할 수 있음
<form> <input type="text" onfocus="focusEvent()" onblur="blurEvent()"> </form> <script> function focusEvent(){ console.log("focus on"); } function blurEvent(){ console.log("focus out"); } </script> 입력창을 클릭해서 커서를 활성화하면 onfocus 이벤트 발생 입력창 외부 영역을 클리하면 onblur 이벤트 발생해 커서가 빠져나가면서 블러(focus out) 상태가 됨
※포커스 이벤트 사용시 주의점
포커스 이벤트 사용 시 코드 내부에 경고창을 나타내는 alert( ) 메서드는 사용하면 안됨. 경고창을 클리하면 순간 입력창에서 커사가 빠져나갔다고 판단해서 onblur 이벤트가 발생, 경고창이 닫히면 다시 커서가 입력창으로 들어가서 onfocus 이벤트 발생. 경고창이 무한으로 뜨는 현상이 발생함.
* 프로퍼티 리스너 방식으로 이벤트 등록 : 요소 노드에 직접 속성으로 이벤트를 등록하는 방법
ex)
<button>클릭</button> <script> const btnEl = document.querySelector("button"); btnEl.onclick = function(){ alert("click"); } </script> 버튼을 클릭했을 때 요소 노드에 등록된 이벤트 속성에 할당된 함수가 실행됨 ES6 사용가능 환경이라면 코드를 화살표 함수로 작성해도 됨 <button>클릭</button> <script> const btnEl = document.querySelector("button"); btnEl.onclick = () => { alert('arrow click'); } </script>
- 함수를 별도로 정의하고 함수명을 이용해 이벤트와 연결하는 것도 가능
- 함수는 함수 선언문이나 함수표현식, 화살표 함수 등 어떤 방식으로 정의해도 상관없음
* 이벤트 등록 메서드로 이벤트 등록 : DOM에서 제공하는 addEventListener( ) 메서드로 이벤트 등록, 가장 권장하는 방식
|
(형식) <노드>.addEventListener("<이벤트 타입>", <이벤트 함수>);
|
- addEventListener( ) 메서드의 매개변수에는 이벤트 타임과 이벤트 함수 전달
- 이벤트 타입은 이벤트종류에서 on만 빼면 됨
ex)
<button>클릭</button> <script> const btnEl = document.querySelector("button"); btnEl.addEventListener("click", function(){ alert("button Click"); }); </script> ES6 사용가능 환경이라면 코드를 화살표 함수로 작성해도 됨 함수 선언문이나 함수 표현식으로 정의한 함수명으로 연결해도 됨 <button>클릭</button> <script> const btnEl = document.querySelector("button"); const clickEvent = () => { alert("button Click"); } btnEl.addEventListener("click", clickEvent); </script>
- 단, 함수표현식으로 정의된 함수는 호이스팅에 의해 선언과 할당이 분리됨. 참조하려는 함수가 addEventListener( ) 메서드보다 반드시 위에 작성되어야 함
12.7) 이벤트 객체와 this
- 이벤트 객체 : 이벤트 타입에 따라 발생하는 이벤트의 각종 정보가 들어 있는 객체 집합
- 이벤트 객체는 이벤트가 발생하면 실행되는 함수의 매개변수로 같이 전달됨
12.7.1 이벤트 객체 사용하기
- 이벤트 함수에는 이벤트 객체라는 데이터가 내부적으로 전달되어 호출됨
- 매개변수를 사용해 이벤트 객체를 받아도 되고, 매개변수를 사용하지 않아도 됨
- 매개변수를 사용해 이벤트 객체를 받으면 이벤트 객체를 활용할 수 있음
ex) 클릭 이벤트에는 PointerEvent 객체가 전달됨
* PointerEvent 객체의 주요 속성
|
속성
|
설명
|
|
clientX
|
마우스가 클릭된 x좌표 (수평 스크롤 포함 X)
|
|
clientY
|
마우스가 클릭된 y좌표 (수직 스크롤 포함 X)
|
|
pageX
|
마우스가 클릭된 x좌표 (수평 스크롤 포함 O)
|
|
pageY
|
마우스가 클릭된 y좌표( 수직 스크롤 포함 O)
|
|
screenX
|
모니터의 왼쪽 위 모서리를 기준으로 마우스가 클릭된 x좌표
|
|
screenY
|
모니터의 왼쪽 위 모서리를 기준으로 마우스가 클릭된 y좌표
|
이벤트 객체를 이용해 표에 정리된 속성 확인해보기 <button>클릭</button> <script> const btnEl = document.querySelector("button"); btnEl.addEventListener("click", function(event){ // 이벤트 객체 console.log(`clientX:${event.clientX}`); console.log(`clientY:${event.clientY}`); console.log(`pageX:${event.pageX}`); console.log(`pageY:${event.pageY}`); console.log(`screenX:${event.screenX}`); console.log(`screenY:${event.screenY}`); }) </script>
ex) keyboardEvent 객체 속성을 사용하면 사용자가 키보드로 어떤 키를 눌렀는지 확인가능
* keyboardEvent 객체의 주요 속성
|
속성
|
설명
|
|
keyCode
|
키보드에서 눌린 키의 유니코드 값 반환
|
|
ctrlKey
|
Ctrl 키가 눌렸으면 true, 그렇지 않으면 false 반환
|
|
altKey
|
Alt 키가 눌렸으면 true, 그렇지 않으면 false 반환
|
|
shiftKey
|
Shift 키가 눌렸으면 true, 그렇지 않으면 false 반환
|
KeyboardEvent 객체의 속성을 출력하는 코드 <form> <input type="text"> </form> <script> const inputEl = document.querySelector("input"); inputEl.addEventListener("keydown", function(event){ // 이벤트 객체 console.log(`keyCode:${event.keyCode}`); console.log(`ctrlKey:${event.ctrlKey}`); console.log(`altKey:${event.altKey}`); console.log(`shiftKey:${event.shiftKey}`); }) </script>
12.7.2 이벤트 취소하기
- a태그, form태그 처럼 HTML 태그 중 일부는 기본으로 이벤트가 적용되어 있음
- a 태그의 기본 이벤트 : 생성된 요소 클리하면 다른 페이지로 이동하도록 하는 클릭 이벤트가 연결되어있음
- form 태그의 기본 이벤트 : 폼 내부에서 버튼이 눌리면 전송되도록 하는 전송 이벤트가 연결되어 있음
- preventDefault( ) 메서드를 사용하면 태그에 기본으로 연결된 이벤트를 취소할 수 있음
ex) a 태그에 연결딘 클릭 이벤트 취소
- 2개의 a 태그가 있으므로 모든 요소 노드의 이벤트를 취소하려면 반복해서 개별 노드에 접근해야함
12.7.3 this 키워드 사용하기
- 이벤트 함수 내부에서 this 키워드를 사용하면 이벤트가 발생한 요소 노드를 바로 가리킬 수 있음
ex) 모든 p 태그에 click 이벤트를 연결, 이벤트 함수 내부에서 this 키워드를 콘솔창에 출력
<p>text-1</p> <p>text-2</p> <p>text-3</p> <script> const pEls = document.querySelectorAll("p"); pEls.forEach((el) => { el.addEventListener("click", function(){ console.log(this); }); }) </script>
- 이벤트가 발생한 대상 노드를 가리킴
- this 키워드의 특징을 이용해 이벤트 발생 시점에서 대상 노드를 조작할 수 있음
ex) 위 코드에서 p 태그를 클릭하면 텍스트 색상을 빨간색으로 바꾸고, 이미 빨간색이라면 다시 검은색으로 바꾸도록 코드 변경
<script> const pEls = document.querySelectorAll("p"); pEls.forEach((el) => { el.addEventListener("click", function(){ if(this.style.color === 'red'){ this.style.color = 'black'; }else{ this.style.color = 'red'; } }); }) </script>
- this 키워드 사용시 주의점 : 이벤트 함수를 화살표 함수로 작성하면 this의 범위가 달라져서 this가 이벤트 발생 노드를 가리키지 않음
ex)
<script> const pEls = document.querySelectorAll("p"); pEls.forEach((el) => { el.addEventListener("click", () => { // this의 범위가 달라져서 이벤트 발생 노드를 가리키지 않음 console.log(this); }); }) </script> ↓ 이벤트 객체의 terget 속성을 사용, target 속성은 이벤트 발생 노드를 가리키는 이벤트 객체의 속성 <script> const pEls = document.querySelectorAll("p"); pEls.forEach((el) => { el.addEventListener("click", (e) => { console.log(e.target); // target 속성 사용 }); }) </script>
'인천일보아카데미 > - 학습일지' 카테고리의 다른 글
| [학습일지]JAVA교육일지 23일차 (0) | 2022.06.04 |
|---|---|
| [학습일지]JAVA교육일지 22일차 (0) | 2022.06.04 |
| [학습일지]JAVA교육일지 20일차 (0) | 2022.05.31 |
| [학습일지]JAVA교육일지 19일차 (0) | 2022.05.31 |
| [학습일지]JAVA교육일지 18일차 (0) | 2022.05.30 |
