JavaScript `$`
JavaScript를 사용하다 보면 `$` 기호를 자주 접하게 됩니다. 특히 jQuery를 사용할 때 많이 보이는 이 기호는 무엇을 의미하며, 어떻게 활용할 수 있을까요? 이 글에서는 `$`의 의미와 다양한 사용 방법에 대해 알아보겠습니다.
`$`의 의미
먼저 `$`는 JavaScript에서 단순히 문자일 뿐입니다. `$`는 변수명, 함수명 등 다양한 곳에서 사용할 수 있는 문자로, 특별한 의미를 가지고 있지 않습니다. 예를 들어 다음과 같은 코드는 정상적으로 동작합니다.
const $ = 5;
console.log($); // 5하지만 일반적으로 `$`는 특정 라이브러리나 프레임워크에서 특별한 목적으로 사용됩니다. 가장 대표적인 예가 바로 jQuery입니다.
jQuery에서의 `$`
jQuery는 DOM 조작을 쉽게 하기 위해 개발된 JavaScript 라이브러리입니다. jQuery에서는 `$`를 주로 사용하여 DOM 요소를 선택하고, 다양한 메서드를 호출할 수 있습니다. 아래 예제를 통해 jQuery에서 `$`가 어떻게 사용되는지 살펴보겠습니다.
DOM 요소 선택
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<p id="text">안녕하세요, jQuery!</p>
<script>
$(document).ready(function() {
$('#text').text('안녕하세요, JavaScript!');
});
</script>
</body>
</html>위 코드에서 `$`는 jQuery의 단축 기호입니다. `$(document).ready(function() {...})`는 문서가 완전히 로드된 후에 코드를 실행하라는 의미입니다. `$('#text').text('안녕하세요, JavaScript!')`는 ID가 `text`인 요소의 텍스트를 변경합니다.
이벤트 처리
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="btn">클릭하세요</button>
<p id="text">안녕하세요, jQuery!</p>
<script>
$(document).ready(function() {
$('#btn').click(function() {
$('#text').text('버튼이 클릭되었습니다!');
});
});
</script>
</body>
</html>이 예제에서는 버튼 클릭 이벤트를 처리합니다. `$('#btn').click(function() {...})`는 버튼이 클릭되었을 때 실행할 함수를 정의합니다. 버튼이 클릭되면 ID가 `text`인 요소의 텍스트가 변경됩니다.
다른 라이브러리에서의 `$`
jQuery 외에도 다른 라이브러리나 프레임워크에서도 `$`를 사용할 수 있습니다. 예를 들어, ES6 템플릿 리터럴에서도 `$`를 사용합니다.
ES6 템플릿 리터럴 예제
const name = 'John';
const message = `Hello, ${name}!`;
console.log(message); // Hello, John!이 예제에서 `$`는 템플릿 리터럴 내에서 변수를 삽입하기 위해 사용됩니다. `${}` 안에 변수를 넣으면 해당 변수의 값이 문자열에 삽입됩니다.
결론
JavaScript에서 `$`는 특별한 의미를 가진 문자가 아닙니다. 그러나 jQuery와 같은 라이브러리에서는 편리하게 DOM을 조작하기 위한 단축 기호로 사용됩니다. 또한, ES6 템플릿 리터럴에서도 변수 삽입을 위해 사용됩니다. `$`의 용법을 이해하면 JavaScript를 더 효율적으로 사용할 수 있습니다.
'Programming' 카테고리의 다른 글
| arecord 사용법 (0) | 2024.06.26 |
|---|---|
| Robots.txt: 웹사이트의 문지기 (0) | 2024.06.23 |
| AJAX란? (0) | 2024.06.21 |
| AJS: Atlassian JavaScript Library (0) | 2024.06.21 |
| UML - ER Diagram (0) | 2024.06.21 |
