[기본 개념] 3 | (1.3) DOM 에서 노드 추가, 삭제하기

[기본 개념] 3 | (1.3) DOM 에서 노드 추가, 삭제하기1 문서 객체 모델 (DOM)2 DOM 요소에 접근, 속성 가져오기3 DOM 에서 이벤트 처리하기4> DOM 에서 노드 추가, 삭제하기4 DOM 에서 노드 추가, 삭제하기노드 리스트란?  DOM 에서 새로운 노드를 만들어 추가하거나 삭제하려면 노드 리스트를 사용해야 하는데, querySelectorAll( ) 메서드를 사용하여 노드를 여러 개 가져올 때 이 노드 정보를 여러 개 저장한 데이터 형식이 노드 리스트이다.  노드 리스트는 배열은 아니지만 배열과 비슷해서 인덱스 번호로 특정 노드에 접근할 수 있다. (ex. li 노드 리스트 중 두 번째 노드 가져오기) document.querySelectorAll("li")[1]  새로운 노드를 ..

• format_list_bulleted 💠프로그래밍 언어/JavaScript
• · 2022. 8. 27.
• textsms

[기본 개념] 3 | (1.2) DOM 에서 이벤트 처리하기

[기본 개념] 3 | (1.2) DOM 에서 이벤트 처리하기1 문서 객체 모델 (DOM)2 DOM 요소에 접근, 속성 가져오기3> DOM 에서 이벤트 처리하기4 DOM 에서 노드 추가, 삭제하기3 DOM 에서 이벤트 처리하기DOM 요소에 함수 직접 연결하기  이벤트 처리기 함수가 간단하면 DOM 요소에 직접 연결할 수 있다.  (ex. 이미지를 클릭하면 알림 창 표시하기) ... ...... 함수 이름을 사용해 연결하기  이벤트가 발생했을 때 실행 함수를 정의해 놓았다면 함수 이름을 사용해 연결할 수 있다. 이 경우 함수 이름 다음 괄호(( )) 를 추가하지 않는다. (ex. 이미지를 클릭하면 함수 실행하기) ... ...... DOM 의 event 객체  DOM 에는 이벤트 정보를 저장하는 ..

• format_list_bulleted 💠프로그래밍 언어/JavaScript
• · 2022. 8. 25.
• textsms

[기본 개념] 3 | (1.1) DOM 의 접근, 속성 가져오기

[기본 개념] 3 | (1.1) DOM 의 접근, 속성 가져오기1> 문서 객체 모델 (DOM)2> DOM 요소에 접근, 속성 가져오기3 DOM 에서 이벤트 처리하기4 DOM 에서 노드 추가, 삭제하기1 문서 객체 모델 (DOM)문서 객체 모델이란?  문서 객체 모델이란 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법이다.  DOM 은 웹 문서를 하나의 객체로 정의하고, 모든 요소도 각각 객체로 정의한다. DOM 트리  DOM 은 웹 문서의 요소를 부모 요소와 자식 요소로 구분하는데, 문서 안의 요소뿐만 아니라 각 요소에서 사용한 내용과 속성도 자식으로 나타낸다.  부모와 자식 구조로 표시하는 것을 DOM 트리라고 하며, 트리에서 가지가 갈라져..

• format_list_bulleted 💠프로그래밍 언어/JavaScript
• · 2022. 8. 24.
• textsms

04. 자바스크립트의 내장 객체를 사용한 문제 II

04. 자바스크립트의 내장 객체를 사용한 문제 II다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요.(문서 안에 html 파일이 있다고 가정한다.) 1. [현재 시간 보기] 버튼을 누르면 현재 시간이 있는 html 파일이 팝업 창으로 나타나는 프로그램을 작성한다.2. 화면의 너비값에서 팝업 창의 너비값(400px)을 빼고 2로 나누면, 팝업 창이 시작할 left 가 된다.3. 화면의 높이값에서 팝업 창의 높이값(200px)을 빼고 2로 나누면, 팝업 창이 시작할 top 이 된다.4. 팝업 창의 좌표값(left, top)과 창의 크기 width, height 를 하나의 문자열로 저장한다.5. window.open( ) 메서드를 실행하여 팝업 창을 보여준다.  현재 시간 보기 결과 ..

• format_list_bulleted 💠문제 풀이/JavaScript 문제 풀이
• · 2022. 8. 24.
• textsms

03. 자바스크립트의 내장 객체를 사용한 문제 I

03. 자바스크립트의 내장 객체를 사용한 문제 I다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요. 1. 현재 시각을 브라우저에 표시하는 프로그램을 작성한다.2. 날짜, 시간 정보가 들어있는 Date 객체의 인스턴스를 만들어 변수로 저장한다.3. Date 객체의 메서드 중에서 지역 시간 정보를 알려주는 메서드를 실행하여 currentTime 변수에 저장한다. 현재 시각 결과 화면A. 해설1. 현재 시각을 브라우저에 표시하는 프로그램을 작성한다.2. 날짜, 시간 정보가 들어있는 Date 객체의 인스턴스를 만들어 변수로 저장한다.--> var 예약어로 now 변수를 만들고, new 예약어로 Date( ) 인스턴스를 생성한다.3. Date 객체의 메서드 중에서 지역 시간 정보를 알려주는 메서드..

• format_list_bulleted 💠문제 풀이/JavaScript 문제 풀이
• · 2022. 8. 23.
• textsms

[정리] 2 | 객체, 자바스크립트의 내장 객체 정리

[정리] 2 | 객체, 자바스크립트의 내장 객체 정리객체 알아보기객체(object) : 프로그램에서 인식할 수 있는 모든 대상프로퍼티(property) : 객체의 특징이나 속성메서드(method) : 객체에서 할 수 있는 동작- 객체 인스턴스 만들기new 객체명- 객체의 프로퍼티와 메서드 사용하기객체명.프로퍼티객체명.메서드자바스크립트의 내장 객체종류설명window브라우저 창이 열릴 때마다 하나씩 만들어짐. 브라우저 창 안의 요소 중 최상위document웹 페이지마다 하나씩 있으며, 태그 만나면 만들어짐. HTML 문서의 정보가 담겨있음navigator현재 사용하는 브라우저 정보가 담겨있음history현재 창에서 사용자의 방문 기록을 저장location현재 페이지의 URL 정보가 담겨있음screen현재 ..

• format_list_bulleted 💠프로그래밍 언어/JavaScript
• · 2022. 8. 23.
• textsms

[기본 개념] 2 | (2.2) 브라우저와 관련된 객체

[기본 개념] 2 | (2.2) 브라우저와 관련된 객체1 객체2 자바스크립트의 내장 객체3> 브라우저와 관련된 객체3 브라우저와 관련된 객체 웹 브라우저가 열리면 가장 먼저 window 라는 객체가 만들어지고 그 하위 요소에 해당하는 객체들이 나타난다.   window       ㅣ        ㅏㅡㅡㅣ  document  ㅡㅡㅜㅡㅡㅣarea         「  ¯¯ ¯¯ㅣtextareaㅣ        ㅏㅡㅡㅣnavigatorㅣ        ㅏㅡㅡㅣimageㅣ        ㅏㅡㅡㅣbuttonㅣ        ㅏㅡㅡㅣhistoryㅣ        ㅏㅡㅡㅣ  form  ㅣㅡㅡㅣㅡㅡㅣtextㅣ        ㅏㅡㅡㅣlocationㅣ          ㄴㅡㅡanchorㅣ        ㅏㅡㅡㅣcheckbox   ㅣ   ..

• format_list_bulleted 💠프로그래밍 언어/JavaScript
• · 2022. 8. 23.
• textsms

[기본 개념] 2 | (2.1) 객체, 자바스크립트의 내장 객체

[기본 개념] 2 | (2.1) 객체, 자바스크립트의 내장 객체1> 객체2> 자바스크립트의 내장 객체3 브라우저와 관련된 객체1 객체객체란? 문서 객체 모델(DOM) 웹 문서 자체도 객체이고 그 안에 삽입되어 있는 것 모두 객체. document, image, link 객체 등 브라우저 관련 객체 웹 브라우저에서 사용하는 정보. navigator, history, location, screen 객체 등 내장 객체 웹 프로그래밍할 때 자주 사용하는 요소는 자바스크립트 안에 미리 정의. Data 객체 등 객체의 인스턴스 만들기 기본형new 객체명  자바스크립트에서 객체는 참조 형태로 사용해야 한다. 인스턴스의 형태로 사용해야 하는데 new라는 예약어 뒤에 만드려고 하는 객체 이름을 써주면 된다. (ex. D..

• format_list_bulleted 💠프로그래밍 언어/JavaScript
• · 2022. 8. 17.
• textsms