728x90

자바스크립트는 HTML, CSS와 달리 C 언어나 자바와 같은 프로그래밍 언어의 범주에 속하기 때문에 배우기 위해서는 많은 노력이 요구된다.

자바스크립트

자바스크립트는 정적인 HTML 콘텐츠에서 사용자와 상호작용하며 동적으로 변경하는 부분을 담당한다.

자바스크립트는 객체(Object) 기반의 스크립트 언어로 기본적으로는 웹 브라우저에서 해석되는 인터프리터 언어이며, Node.js와 같은 프레임워크를 사용하면 서버 프로그래밍에도 사용할 수 있다.

자바스크립트의 특징

  • 동적이며 타입을 명시할 필요가 없는 인터프리터 언어다.
  • 객체지향 프로그래밍과 함수형 프로그래밍 모두 표현할 수 있다.
  • HTML의 내용, 속성, 스타일을 변경할 수 있다.
  • 이벤트를 처리하고 사용자와의 상호작용을 가능하게 한다.
  • 서버와 실시간 통신 기능을 제공한다.

자바스크립트 현황

자바스크립트 전성시대로 뷰(Vue), 앵귤러(Angular), 리액트(React)와 같은 프론트엔드 프레임워크/라이브러리에서부터 Node.js를 기반으로 하는 서버 프로그래밍 영역까지 자바스크립트가 널리 사용되고 있다.

ECMAScript란?
ECMAScript는 자바스크립트의 표준규격으로 볼 수 있으며 ES5부터 기존과 다른 새로운 구조가 많이 추가되었다. 웹 개발에 자바트크립트가 중요해진 지난 수년간 많은 변화와 새로운 라이브러리/프레임워크 등이 출현해 관련된 모든 기술을 설명하기에는 어려움이 있을 정도다.

또한 자바스크립트는 네이버, 구글과 같은 월드 와이드 웹 서비스에서부터 데스크톱 응용 프로그램까지 사용되지 않는 곳이 없다.

예를 들어 네이버에서는 다음 기능을 자바스크립트로 구현하고 있다.

  • 최신 뉴스 제목, 뉴스, 환율 등이 자동으로 스크롤되는 화면
  • 쇼핑, 뉴스 스탠드 등에서 현재 화면은 유지하면서 해당 콘텐츠의 페이지 섹션의 페이지만 좌우로 변경되는 화면

이 외에도 다음과 같은 기능은 대부분 자바스크립트를 사용한다.

  • 웹 페이지에 날씨 정보 출력(날씨 정보 사이트에 실시간 데이터 요청 후 출력)
  • 홈쇼핑 등에서 웹 브라우저를 통한 고객 상담 채팅
  • 클릭하면 숨겨진 메뉴가 나오거나 탭 형태의 화면 구성
  • 선택에 따라 일부 화면이 바뀌거나 움직이는 형태

자바스크립트의 기본 문법

자바스크립트는 전통적인 프로그램 언어와 유사한 구조로 대부분의 언어와 같이 다음과 같은 프로그램 구성요소를 지원한다.

  • 변수, 함수, 객체, 클래스
  • 반복문, 조건문
  • 배열, 리스트, 맵(Map) 등의 자료 구조
  • 비동기 처리 지원
  • HTTP 요청 및 응답 처리

그런데 자바스크립트는 일반적인 프로그램 언어 요소 이외에 HTML 문서에 접근할 수 있는 내장 객체와 함수 등을 제공하고 있다. 이를 통해 DOM(Document Object Model)을 다룰 수 있다. DOM이란 문서 객체 모델로 HTML이나 XML 문서 내의 모든 요소를 정의하고 각각의 요소에 접근할 수 있는 계층 구조로 표현된다. 또한 자바스크립트에서 객체를 정의하는 구문은 JSON(JavaScript Object Notation)이라고도 불리며 다양한 API 구현에 표준 데이터 교환 규격으로 사용되고 있다.

 

자바스크립트의 문법적 특징

  • 변수 타입은 따로 지정하지 않으며, 선언은 var, let, const를 사용한다.
  • 범위 지정 없이 변수를 선언하면 전역변수가 되고 위치에 상관없이 호이스팅(끌어올림)되므로 주의한다.
  • 문자열을 표현할 때는 큰따옴표("")와 작은따옴표('')를 모두 사용할 수 있다.
  • 함수형 언어를 지원하며 함수는 변수, 함수 인자, 객체 멤버 등 모든 곳에 사용될 수 있다.
  • <script> 태그는 HTML의 <head> 와 <body> 영역 모두에서 사용 가능하다. 하지만 DOM 접근을 위해서는 HTML 문서가 모두 로딩된 다음에 접근 가능하다.
  • JSON 구조를 광범위하게 사용한다.

같은 변수명으로 변수를 선언할 때 var, let, const의 차이점

  • var(함수범위)는 이미 만들어진 변수 이름으로 재선언이 가능하다.
  • let(블록범위 변수)은 이미 만들어진 변수 이름으로 재선언은 불가능하지만, 재할당은 가능하다.
  • const(블록범위 상수)는 이미 만들어진 변수 이름으로 재선언이 불가능하며 재할당 또는 불가능하다.
자바스크립트 참고 자료
https://developer.mozilla.org/ko/docs/Web/JavaScript
→모질라 재단 자바스크립트 공식 문서

이벤트 처리와 DOM의 개념

웹 페이지에서 사용자와 상호작용하는 기능을 구현하기 위해서는 이벤트 처리와 DOM의 개념을 이해해야 한다.

이벤트 발생과 처리

이벤트는 HTML 문서에서 발생하는 특정 상황으로 이벤트 발생은 보통 자바스크립트 코드와 연계된다. 예를 들어 버튼 클릭, 마우스 이동, 마우스 클릭, 키보드 입력 등 주로 UI에서 발생하는 이벤트가 있으며 이 외에 문서 로드, 창 크기 변경 등도 이벤트다. 자바스크립트에서 이벤트를 처리하는 방법은 다음의 세 가지가 있다. 정의하는 방법에 차이가 있지만 이벤트 발생 시 콜백 함수를 호출하는 형태로 동작하는 것은 동일하다.

  • HTML 태그에 이벤트 처리 속성을 이용한다.
  • 문서 객체 모델(DOM) 요소에 속성을 추가한다.
  • DOM 요소에 addEventListener()로 콜백 함수를 등록한다.
<!-- 태그에 이벤트 처리 속성을 이용한 이벤트 처리 예 -->

<button type="button" onClick="login()"> 로그인 </button>
<div onMouseOver="show()"> 마우스가 올라가면 텍스트가 보인다. </div>

onClick ☞ 마우스 버튼 클릭을 감지하고 login() 함수 호출

onMouseOver ☞ 마우스가 태그 영역 위로 올라가는 것을 감지하고 show() 함수 호출

문서 객체 모델(DOM)

자바스크립트에서 HTML 요소에 접근할 수 있는 것은 DOM을 통해서이며 DOM은 텍스트로 된 HTML 문서를 프로그램적으로 처리할 수 있도록 문서 구조 전체를 객체화한 것이다.

DOM 구조

DOM에서 태그는 요소 노드(Element node)로 정의되고 태그의 속성은 속성 노드(Attribute node)가 된다. 태그 바디의 텍스트는 텍스트는 다시 텍스트 노드(Text node)가 될 수 있으며 경우에 따라서는 innerHTML 속성으로 표현하는 것도 가능하다. 이러한 DOM 체계에 따라 모든 HTML은 브라우저에 의해 로딩될 때 각각의 요소가 하나하나 부모-자식 관계를 가지며 객체 트리 구조로 재구성된다고 볼 수 있다.

 

자바스크립트에서 DOM에 접근하는 방법은 CSS의 셀렉터와 유사하다고 볼 수 있다. 특정 태그, 아이디를 비롯해 CSS 셀렉터를 통한 요소 선택이 가능하다.

document.getElementsByTagName("tag_name");
document.getElementById("id_name");
document.getElementsByClassName("class_name");
document.getElementsByName("name_attribute");
document.querySelector("p.title");
document.querySelectorAll("p.title");
  • querySelector() : 선택자와 일치하는 첫 번째 노드만 가지고 온다.
  • querySelectorAll() : 선택자와 일치하는 모든 노드를 가지고 온다.

속성에 대한 접근은 가져온 요소 객체의 getAttribute(), setAttribute() 함수를 이용한다.

element.setAttribute(attribute, value)
element.getAttribute(attribute, value)

DOM을 활용한 동적 디자인 변경

자바스크립트에서 동적으로 디자인을 변경하는 것 역시 기본적으로는 DOM을 사용하는 것이다. 디자인은 CSS로 정의되고 CSS는 HTML 문서의 구성요소를 셀렉터로 선택해 지정 하는 형식이다. 자바스크립트도 이와 같은 개념으로 접근하면 된다. 기본적으로 태그를 대상으로 하며 직접 디자인을 수정할 수 있다. 또한 태그의 클래스 속성을 동적으로 변경하여 디자인을 수정하는 것도 가능하다.

스타일 속성 변경

특정 태그 요소의 스타일 속성을 직접 변경하는 방식이다. 인라인 스트일 시트 지정과 개념적으로 동일하다.

document.getElementById("box1").setAttribute("style", "background-color: yellow");
  • 아이디가 'box1'인 태그를 찾아 해당 태그의 배경색 속성을 'yellow'로 지정한다.

스타일 객체 변경

스타일 속성 변경과 동일한 방식이지만 코드 구현에서 차이가 있다. 태그의 속성을 문자열 형태로 지정하는 것이 아닌 객체 참조 방식으로 스타일 속성을 지정한다. 따라서 스타일 속성 방식보다 프로그래밍 과정에서 오류 체크가 용이하다.

document.getElementById("box1").style.backgroundColor = "yellow";
  • 'box1' 태그 노드의 style 객체에 포한된 backgroundColor 속성에 새로운 값을 부여한다.

클래스 변경

태그 노드의 스타일 속성이 아니라 클래스 변경을 통해 디자인을 변경하는 형식이다. 당연히 변경하고자 하는 클래스가 CSS에 정의되어 있어야 한다.

document.getElementById("box1").className = "bgyellow";
  • 아이디가 'box1'인 태그 노드를 가져와 클래스 속성을 변경한다.

 

'Programming > Web' 카테고리의 다른 글

[Web] REST API와 JAX-RS  (0) 2022.10.20
[Web] 서블릿과 JSP  (0) 2022.10.19
[Web] 웹 프로그래밍의 기초(CSS)  (0) 2022.10.19
[Web] 웹 프로그래밍의 기초(HTML)  (1) 2022.10.18
[Web] 웹(DevOps)  (0) 2022.10.18

티스토리툴바