JavaScript15 (53) [JavaScript] 9일 JavaScript DOM DOM이란?웹 페이지 콘텐츠를 조작한느 메소드와 인터페이스를 제공한다.XML을 HTML에서 사용할 수 있도록 확장된 애플리케이션 프로그래밍 인터페이스. Node ELement주요 속성설명closest(selector)가장 가까운 조상을 찾는다.children모든 자식 요소를 찾는다. 태그만 검색.요소에 요소 자식이 없으면 children의 length는 0fitstElementChild요소의 첫번째 자식을 반환. 태그만 검색, 자식 요소가 없는 경우 null반환innerHTML요소의 HTML 컨텐츠를 설정하거나 반환getAttribute요소의 지정된 속성값을 반환setAttribute지정된 속성을 지정된 값으로 설정하며, 이미 존재하는 속성이면 값을 변경 노드 추가 및 삭제 자바 .. 2024. 5. 2. (52) [JavaScript] 8일 JavaScript Form document.forms 객체document.forms 속성은 현재 문서의 요소 목록을 반환한다. forms 객체는 html문서의 태그를 자바스크립트로 접근하기 위한 것으로 내장 객체 계층구조에서 document의 하우에 있다. form 요소의 name 속성에 이름을 설정하면 자바스크립트에서 쉽게 접근 할 수 있다. submit 버튼 이름 : 나이 : 전송하기 에서 type="submit"을 생략하면 submit 버튼--> 주요 속성 및 메소드 submit 버튼 - 유효성 검사 이름 : 나이 : 전송하기 2024. 4. 29. (51) [JavaScript] 7일 JavaScript 객체 - 이벤트2 Bubbling 과 Capturing DIV 영역 p 영역 SPAN영역 키보드 관련 이벤트 keypress -> keyup - 특수키 : SHift, Alt, ctrl , F1~F12 등 발생되는 이벤트 : keydown - > keyup - keypress : 실제 눌러진 키코드로 반환(사용하지 말것을 권장) key 속성으로 실제 눌러진 키를 확인 할 수 있다. --> 키 이벤트 숫자만 : 영문자만 : 영숫자 : 입력된 한글 삭제 : 한글만 입력 : 한글입력 제한 : 한글 입력 제한 한글 가능 : 한글 제한 : 한글 제한 : 한글 제한 : 한글 가능 : F12, 마.. 2024. 4. 28. (50) [JavaScript] 6일 JavaScript 객체 - 이벤트 이벤트란?HTML 이벤트는 HTML 요소에서 발생할 수 있는 상황으로, 자바스크립트가 HTML 페이지에서 사용될때 자바 스크립트는 이런 이벤트에 반응한다.브라우저는 이벤트를 감지할 수 있으며 이벤트 발생 시에는 통지해 준다.이 과정을 통해 사용자와 웹페이지는 상호작용이 가능하게 된다. 이벤트 핸들러 등록 HTML 요소의 이벤트 핸들러 어트리뷰트에 이벤트 핸들러를 등록하는 방법이다. onclick 과 같이 on으로 시작하는 이벤트 어트리뷰트의 값으로 함수 호출 등을 전달한다. HTML과 Javascript는 관심사가 다르므로 분리하는 것이 좋으며, 이 방식은 권장하지 않는다. 이벤트 등록 - 인라인 이벤트 핸들러 방식 확인 1 확인 2 이벤트 등록 - 이벤트 핸들러 프로퍼티 방식 .. 2024. 4. 28. (50) [JavaScript] 6일 JavaScript 객체 - DOM 문서 객체 모델(Document Object Model)이해웹 페이지 콘첸츠를 조작하는 메소드와 인터페이스를 제공한다.DOM은 HTML문서의 모든 요소에 접근하는 방법을 정의한 API다.DOM은 전체 페이지를 노드 계층 구조로 변환하며, HTML 페이지의 각 부분은 각기 다른 데이터를포함하는 다양한 타입의 노드로 표현된다. document 객체 이름 : 생일 : 나이 : 확인 전체 화면 전체 화면 전체화면취소 location 객체 네이버 구글 다음 navigator 열기 닫기 우편번호 확인 배경색 변경 2024. 4. 28. (50) [JavaScript] 6일 JavaScript 객체 - 클래스 Class 객체를 생성하기 위한 템플릿이다.클래스는 데이터와 이를 조작하는 코드를 하나로 추상화한다. 클래스 클래스 - 메소드 클래스 : getter / setter 클래스/인스턴스 속성 클래스 - static 메소드 class-상속 클래스-private 2024. 4. 28. 이전 1 2 3 다음
