본문 바로가기

프로그래밍/예제로 배우는 자바스크립트 요약 및 분석(IT 전공 서적)29

예제로 배우는 자바스크립트 요약 및 코드 분석 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.
예제로 배우는 자바스크립트 요약 및 코드 분석 10장 10.4 10.4 Map 객체 Map 객체는 키-값으로 구성된 자료 구조이다. Map 객체에서 키는 숫자, 문자열, 배열, 객체 등 여떠한 데이터 형도 사용 가능하다. 예제 10-19. Map 객체 생성하기 map.html 코드 원문 예제 10-19. Map 객체 생성하기 map.html 코드 분석 10.4.2 set() 메서드 Map 객체의 set() 메서드는 Map 객체에 키와 값으로 구성된 요소를 설정하는데 사용된다. 예제 10-20. Map 객체의 set() 메서드 map_set.html 코드 원문 예제 10-20. Map 객체의 set() 메서드 map_set.html 코드 원문 10.4.3 get() 메서드 Map 객체의 get() 메서드는 특정 키에 해당하는 값을 가져오는 데 사용된다. 예제 10-2.. 2023. 10. 16.

티스토리툴바