이번포스티에서는 제이쿼리(JQuery)의 개념에 대하여 알아보고 간단한 사용예제에 대하여 코드를 통해 살펴보도록 하겠다.
제이쿼리(JQuery)의 개념
모든 브라우저에서 동작하는 클라이언트 자바스크립트 라이브러리이며, 무료로 사용 가능한 오픈소스 라이브러리이다. JavaScript가 동적 페이지 기능 구현이 가능하지만, 사용하다 보니 구현이 복잡한 부분이 있어서 jQuery라는 라이브러리를 활용하여 조금 더 간단하고 쉽게 자바스크립트를 구현할 수 있게 도와주는 고마운 라이브러리이다.
제이쿼리(JQuery) 사용예제 코딩
시작하기 앞서 JQuery 를 사용하려면 아래의 경로를 head 태그 내에 명시해주어야 한다는 걸 알고 넘어가자.
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>그럼 본론으로 돌아가서 만약 alert message 를 띄우는 button 을 만든다고 가정하여 코딩을 진행해 보자.
JavaScript 로만 만들면 아래와 비슷한 로직으로 구현이 될 것이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<title>Document</title>
<script>
//JavaScript
window.onload = function() {
document.getElementById("firstButton").onclick = function() {
alert("첫 번째 버튼을 클릭했습니다.");
}
};
</script>
</head>
<body>
<div id="mainDiv">
<button id="firstButton">첫 번째 버튼</button>
</div>
</body>
</html>그럼 이를 JQuery 를 적용해 수정하면? 어떻게 될까
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<title>Document</title>
<script>
//JQuery
$(document).ready(function() {
$("#firstButton").on("click", function() {
alert("첫 번째 버튼을 클릭했습니다");
});
});
</script>
</head>
<body>
<div id="mainDiv">
<button id="firstButton">첫 번째 버튼</button>
</div>
</body>
</html>우리가 기존에 JavaScript 에서 사용하던 window.onload() 를 JQuery 에서는 아래와 같이 제공한다.
//기존의 JavaScript
window.onload = function () {
...(생략)
};
//JQuery 방법 1
$(document).ready(function() {
...(생략)
});
//JQuery 방법 2
$(function() {
...(생략)
});
방법1과 방법2는 같은 기능을 수행하니 둘 중 뭘 사용해도 상관없다. window.onload() 와 똑같이 화면에 태그들이 다 뿌려지고난 뒤 기능을 수행하는데, 즉 화면이 열릴 때 해당 기능을 수행하도록 해주는 초기화 함수라 생각하면 쉽다.
또한, JavaScript 의 onclick 등의 이벤트도 뭐가 달라졌는지 살펴보면, 보다 직관적이게 엘리먼트를 지정하고 이벤트를 능동적으로 걸 수 있게 해준다는 것을 알 수 있다.
//JavaScript
document.getElementById("firstButton").onclick = function() {
alert("첫 번째 버튼을 클릭했습니다");
};
//JQuery
$("#firstButton").on("click", function() {
alert("첫 번째 버튼을 클릭했습니다");
});
연관정보 : ESB의 개념과 특장점
ESB 개념과 특장점 알아보기
이번포스팅에서는 ESB의 개념과 특장점에 대하여 자세히 알아보겠다. ESB의 개념 가트너 그룹의 보고서에 따르면 EAI를 "엔터프라이즈 미들웨어를 인프라로 하여 다양한 이질적 기업 환경(애플리
gguljaem.tistory.com
연관정보 : 캐시메모리 개념과 매핑기법
캐시메모리의 개념과 매핑기법에 대한 설명
Cache Memory는 메인 메모리와 CPU간의 데이터 속도 향상을 위한 중간 버퍼 역할을 하는 CPU내 또는 외에 존재하는 메모리이다. 전체 시스템의 성능의 개선을 시킬 수 있는 메모리이다. 이번 포스팅에
gguljaem.tistory.com
'컴퓨터 지식창고' 카테고리의 다른 글
| 오버로딩(Overloading)과 오버라이딩(overriding) 차이 (0) | 2021.12.14 |
|---|---|
| ESB 개념과 특장점 알아보기 (0) | 2021.12.14 |
| DHCP 프로토콜의 개념과 동작원리 (0) | 2021.12.13 |
| SNMP의 개념과 동작원리에 대한 설명 (0) | 2021.12.13 |
| 병렬 컴퓨팅과 분산 컴퓨팅에 대한 설명 (0) | 2021.12.13 |
댓글