자바스크립트, JQuery, Dom, Ajax개념정리

JavaScript와 jQuery의 차이점

JavaScript와 jQuery 개요

JavaScript

기본 개념: 웹 페이지의 동적 동작을 구현하는 프로그래밍 언어입니다.
사용 목적: 사용자와 상호작용, 웹 페이지의 콘텐츠 변경, 데이터 검증 등.

jQuery

기본 개념: JavaScript를 더 쉽게 사용하기 위해 만들어진 라이브러리입니다.
사용 목적: DOM 조작, 이벤트 처리, 애니메이션, AJAX 작업을 간편하게 수행할 수 있도록 도와줍니다.

DOM (Document Object Model)

정의

DOM: 웹 페이지의 구조를 나타내는 트리 구조로, HTML 요소들을 객체로 표현한 것입니다.
목적: JavaScript를 사용하여 HTML 문서의 콘텐츠를 동적으로 변경할 수 있습니다.

JavaScript로 DOM 조작

// 요소 선택
var element = document.getElementById('example'); // ID로 선택
var elements = document.getElementsByClassName('example'); // 클래스명으로 선택
var element = document.querySelector('.example'); // CSS 선택자로 선택

// 요소 내용 변경
element.innerHTML = 'New content';

// 새로운 요소 추가
var newElement = document.createElement('div');
newElement.innerHTML = 'Hello, world!';
document.body.appendChild(newElement);
    

jQuery로 DOM 조작

// 요소 선택
var $element = $('#example'); // ID로 선택
var $elements = $('.example'); // 클래스명으로 선택

// 요소 내용 변경
$element.html('New content');

// 새로운 요소 추가
var $newElement = $('

Hello, world!

');
$('body').append($newElement);
    

이벤트 처리

JavaScript로 이벤트 처리

document.getElementById('myButton').addEventListener('click', function() {
  alert('Button clicked!');
});
    

jQuery로 이벤트 처리

$('#myButton').click(function() {
  alert('Button clicked!');
});
    

AJAX (Asynchronous JavaScript and XML)

정의

AJAX: 서버와 비동기적으로 데이터를 주고받을 수 있는 기술입니다.
목적: 페이지를 새로 고침하지 않고 데이터를 주고받을 수 있습니다.

JavaScript로 AJAX

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};
xhr.send();
    

jQuery로 AJAX

$.ajax({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: function(data) {
    console.log(data);
  }
});
    

요약

• JavaScript: 기본적으로 웹 페이지를 동적으로 조작하는 프로그래밍 언어입니다.
• jQuery: JavaScript를 더 간편하게 사용할 수 있도록 만든 라이브러리로, DOM 조작, 이벤트 처리, AJAX 작업 등을 단순화합니다.
• DOM: 웹 페이지의 HTML 구조를 객체 형태로 표현한 것으로, JavaScript를 통해 조작할 수 있습니다.
• AJAX: 페이지 새로 고침 없이 서버와 데이터를 주고받는 기술입니다.

실용적인 예제

JavaScript로 DOM 조작 및 이벤트 처리

<div id="example">Original content</div>
<button id="myButton">Click me</button>
<script>
  document.getElementById('myButton').addEventListener('click', function() {
    var element = document.getElementById('example');
    element.innerHTML = 'Content changed!';
  });
</script>
    

jQuery로 DOM 조작 및 이벤트 처리

<div id="example">Original content</div>
<button id="myButton">Click me</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    $('#myButton').click(function() {
      $('#example').html('Content changed!');
    });
  });
</script>