it개발자스터디공간

웹표준 html,css,javascript 실무 과정 자료] addEventListener를 사용하는 이유

웹표준 html,css,javascript 실무 과정 자료] addEventListener를 사용하는 이유

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.

addEventListener를 사용하는 이유

■ 이벤트에 1개 이상의 이벤트 핸들러(=리스너 함수)를 추가 가능

■ 이벤트를 세밀하게 조정 가능

■ HTML요소 뿐 아니라 임의의 DOM 요소에도 동작

웹표준 html,css,javascript 실무 과정 자료] addEventListener

웹표준 html,css,javascript 실무 과정 자료] addEventListener

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.

addEventListener

■ 이벤트타깃.addEventListener(이벤트타입문자열, 리스너 객체, false);

■ 이벤트타깃: 

  - 리스너 객체: 지정한 타입의 이벤트가 발생했을 때 통지를 받아들이는 객체, 함수

  - false: “true”시 하위의 이벤트타깃에 발송이 됨. 보통 false

웹표준 html,css,javascript 실무 과정 자료] 입력제한 위반시 이벤트 처리

웹표준 html,css,javascript 실무 과정 자료] 입력제한 위반시 이벤트 처리

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.

입력제한 위반시 이벤트 처리

■ invalid이벤트: 입력제한의 위반 사항이 발생시 발생

■ validity 프로퍼티

  - valueMissing: 필수입력체크(위반시: true, 아니면 false)

  - typeMismatch: email, url등 타입체크(위반시: true, 아니면 false)

  - patternMismatch: 패턴 체크(위반시: true, 아니면 false)

  - rangeUnderflow: 최소값보다 작은 값인지 체크(위반시: true, 아니면 false)

  - rangeOverflow: 최대값보다 큰 값인지 체크(위반시: true, 아니면 false)

■validationMessage 프로퍼티: 입력제한의 위반시 발생하는 메시지

■setCustomValidity() 메서드

  - 커스텀 에러 메시지 설정 

웹표준 html,css,javascript 실무 과정 자료] 입력제한 속성

웹표준 html,css,javascript 실무 과정 자료] 입력제한 속성

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.

입력제한 속성

웹표준 html,css,javascript 실무 과정 자료] 입력제한 컨트롤 타입

웹표준 html,css,javascript 실무 과정 자료] 입력제한 컨트롤 타입

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.

입력제한 컨트롤 타입

웹표준 html,css,javascript 실무 과정 자료] 폼 작성 태그 <form>

웹표준 html,css,javascript 실무 과정 자료] 폼 작성 태그 <form>

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.

폼 작성 태그 <form>

■ action: 데이터를 보낼 곳(URL)

  - 폼에 입력한 데이터를 처리하는 PHP, JSP같은 프로그램의 URL

  - 보내기 버튼은 input 요소의 type=“submit”

■ method: get, post(데이터 송신 방법)

  - get: action속성에 지정한 URL 다음에 ?와 폼데이터를 추가하여 송신(기본값)

  - post: 폼 데이터를 본문으로 송신(action URL변화없음)

웹표준 html,css,javascript 실무 과정 자료] querySelector(“선택자명”)

웹표준 html,css,javascript 실무 과정 자료] querySelector(“선택자명”)

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.

querySelector(“선택자명”)

■ CSS의 선택자명으로 요소를 지정하는 방법

■ 지정한 요소의 최초 1개만을 얻음.

  - 사용하기 편한 장점!

■ querySelectorAll(“선택자명”)

  - 선택자명으로 지정한 모든 요소를 배열로 가져옴

웹표준 html,css,javascript 실무 과정 자료] getElement

웹표웹표준 html,css,javascript 실무 과정 자료] getElement

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.

■ getElementById(“id명”)

  - 지정한 id명을 가진 객체를 얻는 방법

■ getElementsByClassName(“클래스명”)

 -지정한 클래스명을 가진 객체를 얻는 방법

 -배열로 ‘전체요소’를 얻기 때문에 각각의 요소는 item(요소의 인덱스)로 접근함

■ getElementsByTagName(“요소명”)

  - 지정한 요소명을 가진 객체를 얻는 방법

  - 배열로 ‘전체요소’를 얻기 때문에 각각의 요소는 item(요소의 인덱스)로 접근함