-
자바스크립트는 정적인 HTML 콘텐츠에서 사용자와 상호작용하며 동적으로 변경하는 부분을 담당한다.
-
자바스크립트는 웹 브라우저에서 해석되는 인터프리터 언어이다.
-
자바스크립트의 특징
- 동적이며 타입을 명시할 필요가 없는 인터프리터 언어이다.
- 객체지향 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다.
- HTML의 내용, 속성, 스타일을 변경할 수 있다.
- 이벤트를 처리하고 사용자와의 상호작용을 가능하게 한다.
- 서버와 실시간 통신 기능을 제공한다.
- 다음과 같은 기능은 대부분 자바스크립트를 사용한다
- 웹 페이지에서 날씨 정보 출력
- 웹 브라우저를 통한 고객 상담 채팅
- 팝업형태의 메뉴와 탭 형태의 화면 구성
- 선택에 따라 일부 화면이 바뀌거나 움직이는 형태
-
자바스크립트는 일반적인 프로그램 언어 요소 이외에 HTML 문서에 접근할 수 있는 내장 객체와 함수 등을 제공한다. 이를 통해 DOM을 다룰 수 있다.
-
DOM이란, 문서 객체 모델로 HTML이나 XML 문서 내의 모든 요소를 정의하고 각각의 요소에 접근할 수 있는 계층 구조로 표현된다.
-
자바스크립트에서 객체를 정의하는 구문은 JSON이라고도 불리며 다양한 API 구현에 표준 데이터 교환 규격으로 사용되고 있다.
-
자바스크립트는 변수타입을 따로 지정하지 않으며, 선언은
var,let,const를 사용한다. -
범위지정없이 변수를 선언하면 전역변수가 된다.
-
문자열을 표현할 때, " "와 ' ' 모두 사용할 수 있다.
-
<script>태그는 HTML의<head>와<body>영역 모두에서 사용가능하다. -
웹 페이지에서 사용자와 상호작용하는 기능을 구현하기 위해서 '이벤트 처리'와 'DOM'의 개념을 이해해야 한다.
-
이벤트는 HTML문서에서 발생하는 특정 상황으로, 이벤트 발생은 보통 자바스크립트 코드와 연계된다.
-
버튼 클릭, 마우스 이동 등 주로 UI에서 발생한다.
-
자바스크립트에서 이벤트를 처리하는 방법은 세가지가 있다
- HTML 태그에 이벤트 처리 속성을 이용한다.
- 문서 객체모델 (DOM) 요소에 속성을 추가한다.
- DOM 요소에 addEvenListener()로 콜백 함수를 등록한다.
- 태그에 이벤트 처리속성을 이용한 예시
<button type="button" 로그인 </button>
<div onMouseOver="show()"> 마우스가 올라가면 텍스트가 보입니다. </div>-
자바스크립트에서 HTML요소에 접근할 수 있는 것은
DOM(문서객체 모델)을 통해서이며, DOM은 텍스트로된 HTML문서를 프로그램적으로 처리할 수 있도록 문서 구조 전체를 객체화한 것이다. -
DOM은 웹 페이지의 구조를 트리로 나타내며, 이를 이용하여 HTML 요소에 접근하고 조작할 수 있습니다.
-
돔 트리 (DOM TREE)
-
DOM은 웹 페이지가 로드되면 브라우저에 의해 생성되며, 웹 페이지의 모든 요소는 트리 형태로 DOM에 포함됩니다. 각 요소는 노드(Node)라고 불리며, 요소 노드, 속성 노드, 텍스트 노드 등 다양한 유형의 노드로 구성됩니다.
-
요소 선택: getElementById, getElementsByClassName, getElementsByTagName 등의 메서드를 사용하여 원하는 HTML 요소를 선택할 수 있습니다.
-
요소 속성 조작: 선택한 요소의 속성을 변경하거나 읽어올 수 있습니다. 예를 들어, element.setAttribute('속성명', '값')를 사용하여 요소의 속성을 설정할 수 있습니다.
-
콘텐츠 조작: 선택한 요소의 텍스트 내용을 변경하거나 HTML 콘텐츠를 추가/제거할 수 있습니다. element.textContent를 사용하여 요소의 텍스트를 변경할 수 있고, element.innerHTML을 사용하여 요소의 HTML 콘텐츠를 조작할 수 있습니다.
-
이벤트 처리: addEventListener를 사용하여 특정 이벤트(예: 클릭, 마우스 오버 등)가 발생했을 때 실행되는 함수를 등록할 수 있습니다.
-
요소 추가/제거: createElement, appendChild, removeChild 등의 메서드를 사용하여 새로운 요소를 생성하고 DOM에 추가하거나, 기존의 요소를 제거할 수 있습니다.
