JavaScript
JavaScript는 웹 페이지에 동적인 기능을 추가하기 위해 사용되는 프로그래밍 언어입니다.
이는 클라이언트 측의 스크립트 언어로, 웹 브라우저에서 실행됩니다.
- 동적 콘텐츠 : HTML 및 CSS는 정적인 콘텐츠를 제공하지만, JavaScript는 웹 페이지에 사용자 상호작용, 애니메이션, 폼 검증 등의 동적인 동작을 추가할 수 있습니다.
- 브라우저 제어 : 브라우저 내의 HTML 및 CSS를 조작하여 웹 페이지의 콘텐츠와 스타일을 동적으로 변경할 수 있습니다.
- 비동기 통신 : 서버와의 비동기 요청을 통해 데이터를 주고받을 수 있습니다. (AJAX)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Example</title>
</head>
<body>
<div id="myDiv">Hello, World!</div>
<button id="myButton">Change Text</button>
<script>
document.getElementById('myButton').onclick = function() {
document.getElementById('myDiv').textContent = 'Text Changed!';
}
</script>
</body>
</html>
jQuery
jQuery는 JavaScript를 더 쉽게 사용할 수 있도록 해주는 경량의 자바스크립트 라이브러리입니다.
- DOM 탐색 및 조작 : CSS 선택자를 사용하여 DOM 요소를 쉽게 선택하고 조작할 수 있습니다.
- 이벤트 처리 : 다양한 이벤트를 간단하게 처리할 수 있습니다.
- 애니메이션 : 복잡한 애니메이션 효과를 쉽게 구현할 수 있습니다.
- AJAX : 서버와 비동기적으로 데이터를 주고받는 기능을 단순화합니다.
- 크로스 브라우저 호환성 : 브라우저 간의 호환성을 보장하여, 다양한 브라우저에서 동일한 코드가 작동하도록 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="myDiv">Hello, jQuery!</div>
<button id="myButton">Change Text</button>
<script>
$(document).ready(function() {
$('#myButton').click(function() {
$('#myDiv').text('Text Changed!');
});
});
</script>
</body>
</html>
jQuery 구문
jQuery의 기본 형식은 다음과 같습니다.
// $(선택자).동작함수()
$(selector).action()- 달러 기호 ($) : jQuery를 의미하고, jQuery에 접근할 수 있게 해주는 식별자
- 선택자 : 원하는 HTML 요소 선택
- 동작 함수 : 선택된 요소에 원하는 동작 설정
$(document).ready()를 통해 문서가 완전히 로드되고, DOM이 준비되었을 때 실행할 코드를 지정할 수 있습니다.
$(document).ready(function() {
...
});
// 이렇게 짧게 작성 가능
$(function() {
...
});- 안정성 향상 : 코드가 DOM 요소에 안전하게 접근하고 조작할 수 있게 되어 오류를 줄일 수 있습니다.
- 비동기 로드 지원 : 페이지의 다른 리소스가 완전히 로드되지 않아도, DOM이 준비되면 코드를 실행할 수 있습니다.
728x90
반응형
'Web > jQuery' 카테고리의 다른 글
| [jQuery] jQuery 이벤트 처리 (0) | 2024.07.14 |
|---|---|
| [jQuery] jQuery 선택자 (0) | 2024.07.14 |
