본문 바로가기

전체 글432

예제로 배우는 자바스크립트 요약 및 코드 분석 12장 12.1~12.3 12.1 이벤트란? 이벤트(event)는 웹 페이지에서 발행하는 사건을 의미한다. 자바스크립트에서는 이벤트가 발생하면 이벤트를 감지하고 처리할 수 있다. 사용자의 마우스 조작과 키보드 입력은 하나의 이벤트이며 HTML 문서 로드나 에러 발생 들도 일종의 이벤트이다. 이벤트를 처리하는 함수를 이벤트 핸들러(event handler) 또는 이벤트 리스너(event listener)라고 합니다. 12.1.1 이벤트 핸들러 마우스 클릭이나 이동, 페이지 로드, 이미지 로드, 입력창에 데이터 입력, 키보드 누르기 등에 따라 발생되는 이벤트를 처리하기 위해 자바스크립트에서는 이벤트 핸들러(event handler)를 사용한다. 다음은 버튼을 클릭했을 때 이벤트 핸들러를 통해 요소 내에 있는 텍스트를 변경해주는 예이.. 2023. 10. 18.
예제로 배우는 자바스크립트 요약 및 코드 분석 11장 11.5~11.6 11.5 HTML 폼 검증 자바스크립트는 HTML 폼에 사용자가 입력한 데이터를 서버로 보내기 전에 데이터가 유효한지를 검증할 수 있다. 11.5.1 폼 입력 여부 확인 다음은 텍스트 입력창과 비밀번호 입력창에 입력된 값을 체크해서 비어있는 경우, 알림창에 경고 메시지를 출력하는 예이다. 예제 11-23. 아이디/비밀번호 입력 여부 체크하기 check_id1.html 코드 원문 아이디: 비밀번호 : 예제 11-23. 아이디/비밀번호 입력 여부 체크하기 check_id1.html 코드 원문 /* */ 아이디: 비밀번호 : 11.5.2 숫자 입력 검증하기 다음은 텍스트 입력창에 1에서 10까지의 숫자가 입력되었는지를 체크하는 예제이다. 예제 11-24. 입력창에 1~10 숫자 입력 체크하기 check_num.. 2023. 10. 17.
예제로 배우는 자바스크립트 요약 및 코드 분석 11장 11.3~11.4 11.3 HTML 요소 내용과 속성 11.3.1 요소 내용 가져오기 자바스크립트에서 HTML 요소의 내용을 가져오는 데는 innerHTML과 innerText 프로퍼티를 이용한다. 먼저 innerHTML을 이용해서 목록 요소의 내용을 가져오는 다음의 예를 살펴보자. 예제 11-10. innerHTML로 요소의 내용 가져오기 get_html.html 코드 원문 안녕 예제 11-10. innerHTML로 요소의 내용 가져오기 get_html.html 코드 원문 안녕 이번에는 앞 예제 11-10에서 사용된 innerHTML 속성 대신 innerText를 사용해서 HTML 요소의 내용을 가져온다. 예제 11-11. innerText로 요소의 내용 가져오기 get_text.html 코드 원문 안녕 예제 11-11.. 2023. 10. 17.
예제로 배우는 자바스크립트 요약 및 코드 분석 11장 11.1 ~ 11.2 11장 문서 객체 모델(DOM) 문서 객체 모델(DOM)은 HTML 문서의 구조화된 표현이다. 자바스크립트에서는 DOM 구조에 접근해서 HTML 문서의 구조, 스타일, 내용 등을 변경할 수 있다. 11장에서는 DOM의 구조에 대해 알아보고 DOM의 메서드와 속성에 대해 배우자. 또한 HTML 요소를 선택하고, HTML 요소의 내용과 속성을 변경하고, CSS 속성을 설정하는 방법에 대해서도 알아보자. 마지막으로 DOM 노드에 새로운 노드를 추가하고 삽입, 삭제, 변경하는 방법에 대해 학습하자. 11.1 문서 객체 모델(DOM)이란? 문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서의 구조화된 표현이다. 자바스크립트에서는 DOM 구조에 접근해서 HTML 문서의 구조.. 2023. 10. 16.

티스토리툴바