'JavaScript/메모' 카테고리의 글 목록

[JavaScript] DOM (Document Object Model) 2023.08.02
[JavaScript] JavaScript와 jQuery 2023.07.26

💡 DOM (Document Object Model)

웹 페이지의 구조화된 문서를 표현하는 방법 중 하나로,

HTML, XML 또는 XHTML 문서의 프로그래밍 인터페이스이다.

웹 페이지의 요소(element)들을 객체로 표현하며,

이러한 객체들을 JavaScript를 통해 동적으로 조작하고 변경할 수 있도록 제공된다.

DOM의 기본 개념

📍 웹 페이지의 모든 요소들을 객체(Object)로 취급된다.

📍 문서 내의 모든 요소들은 트리 구조로 이루어져 있으며, 각 요소들을 부모-자식 관계를 갖는다.

📍 JavaScript를 사용하여 웹 페이지의 요소를 선택하고 조작할 수 있다.

아래의 HTML 코드를 JavaScript로 조작해보자.

<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
</head>
<body>
    <h1>Title</h1>
    <p>This is a paragraph.</p>
    <button id="myButton">Click Me</button>
</body>
</html>

위 HTML 문서에는 'h1', 'p'. 'button' 태그 등의 요소들로 구성되어 있다.

이러한 요소들은 DOM에 의해 객체로 표현된다.

아래 JavaScript 코드로 버튼을 클릭했을 때 "Hello, World!"를 출력해보자.

// 버튼 요소를 선택하여 클릭 이벤트 리스너를 등록
document.getElementById('myButton').addEventListener('click', function() {
    alert('Hello, World!');
});

위 코드에서 document는 DOM의 최상위 객체로,

웹 페이지의 전체 문서를 나타낸다.

getElementById 메서드를 사용해 myButton이라는 ID를 가진 요소,

즉 버튼을 선택하고

addEventListener 메서드를 사용해 클릭 이벤트에 대한 리스너를 등록한다.

클릭 이벤트가 발생하면 해당 버튼이 선택되었으므로 "Hello, World!"가 출력된다.

'JavaScript > 메모' 카테고리의 다른 글

[JavaScript] JavaScript와 jQuery (0)	2023.07.26

코드를 보다가 JavaScript와 jQuery가 같이 사용되는 것을 보고 이에 대해 정리하려 한다.

JavaScript는 프로그래밍 언어이고,

jQuery는 JavaScript의 라이브러리이다.

기본적인 개념부터 정리해보자.

HTML은 웹 페이지의 구조를 정의하는 언어이며,

CSS는 웹 페이지의 스타일과 레이아웃을 지정하는 언어이다.

JavaScript는 이들과 함께 사용하여 웹 페이지를 동적으로 만들고 사용자와 상호작용할 수 있게 해준다.

따라서 HTML, CSS, JS를 함께 사용해 웹 페이지를 만들고 동적으로 제어할 수 있다.

jQuery는 JavaScript로 작성된 코드를 간결하고 쉽게 작성할 수 있게 도와주는 라이브러리이다.

자세히 설명하면 JS DOM 작업을 쉽게 처리할 수 있도록 도와주는 라이브러리이다.

JavaScript 구성 요소

💡 JavaScript core 문법

자바스크립트의 핵심적인 문법과 기능들을 의미

변수, 조건문, 함수 등과 같은 기본적인 문법과 기능들이 여기에 해당

💡 JavaScript core 라이브러리

자바스크립트 언어의 기본 기능을 보완하고 확장하는 기능들이 포함된 라이브러리

대표적으로 Array, String, Math와 같은 객체들과 메소드들이 포함

💡 JavaScript BOM (Browser Object Model)

브라우저와 관련된 객체들의 집합을 의미

브라우저 창의 크기, URL, 화면 스크롤 위치와 같은 브라우저 창과 관련된 정보와 기능을 다루는 객체들이 여기에 해당

💡 JavaScript DOM (Document Object Model)

문서의 구조를 표현하고 조작하는 객체들의 집합을 의미

HTML 문서의 요소들을 자바스크립트로 접근하고 조작하는데 사용됨

웹 페이지의 요소들을 선택하고 변경하거나 이벤트를 처리하는 등의 작업에 사용됨

예를 들어 JavaScript로 DOM 요소를 선택하고 스타일을 변경하는 코드는 아래와 같다.

var element = document.getElementById("myElement");
element.style.color = "red";

이를 jQuery를 사용해 더 간단하게 작성할 수 있다.

$("#myElement").css("color", "red");

앞서 볼 수 있듯, jQuery를 사용해 개발 속도를 높일 수 있다.

하지만

jQuery 라이브러리의 크기가 크고, 로드하는데 소요되는 시간으로 인해 일정한 오버헤드가 발생 수 있다.

(처리 속도가 느림)

반대로 JavaScript는 매우 빠른 처리 속도를 가진다.

반복되는 작업이나 빠른 속도가 필요로 하는 작업에는 JS를 사용하고

경우에 따라 적절히 섞어서 사용함이 좋다.

참고로 AJAX(Asynchronous JavaScript and XML)는

웹 애플리케이션에서 비동기적으로 데이터를 처리하는 일반적인 방법론을 지칭하는 용어이다.

이러한 방법론은 기본적으로 자바스크립트를 사용하여 서버와 통신하는 것을 의미하며,

특정 라이브러리나 기술을 사용하여 구현할 수 있다.

AJAX는 특정 기술이나 라이브러리가 아님!

AJAX를 구현하기 위해 주로 jQuery와 같은 자바스크립트 라이브러리를 사용하는 경우가 많아

AJAX는 라이브러리라는 혼동이 발생..

AJAX는 웹 페이지의 새로고침 없이

필요한 데이터를 서버로부터 받아오거나 서버에 데이터를 보내는 등의 작업을 수행할 수 있다.

'JavaScript > 메모' 카테고리의 다른 글

[JavaScript] DOM (Document Object Model) (0)	2023.08.02

Sso