자바스크립트와 제이쿼리
자바스크립트는 웹브라우저에서 작동하는 스크립트입니다. 기능을 포함하는 거의 모든 홈페이지들이 사용하고 있습니다.
제이쿼리 또한 역시 자바스크립트입니다. 다만 자바스크립트로 빈번하게 사용되는 기능들은 조금 더 함축적인 코드를 통해 사용하게 만든 라이브러리입니다.
자바스크립트는 아래와 같이 크게 4가지 요소로 구성되어있습니다.
1. 자바스크립트 core 문법
2. 자바스크립트 core 라이브러리
3. 자바스크립트 BOM (Browser Object Model)
4. 자바스크립트 DOM (Document Object Model)
제이쿼리는 이중 자바스크립트 DOM 작업을 쉽게 처리할수있도록 도와주는 라이브러리입니다. 또한 제이쿼리는 DOM 작업을 쉽게 도와주는 라이브러리일 뿐, 자바스크립트 문법이나 라이브러리를 대체하는 프로그래밍 언어가 아님을 인지해야 합니다.
자바스크립트와 제이쿼리 문법 차이
// html
<body>
<ul id="menu">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
<script>
// javascript
//menu 노트 찾기
var menu = document.getElementById("menu");
//li 리스트 구하기
var liList = menu.getElementsByTagName("li");
//li 개수만큼 루프 돌며 스타일 변경
for(var i=0;i<liList.length;i++){
//i번째 li 접근
var li = liList[i];
//스타일 변경
li.style.color="#f00";
}
// jquery
$("#menu li").css("color", "#f00");
</script>
</body>
위와 같이 document의 html 구성이 있을 때, 자바스크립트 코드와 제이쿼리의 코드는 색을 변경한다는 같은 기능을 가지고 있습니다. 같은 기능을 함에도 불구하고, 제이쿼리의 코드가 더 간결하다는 것을 확인할 수 있습니다.
제이쿼리의 사용법을 잘 알고 있다면개발 속도는 빨라집니다. 하지만 제이쿼리가 항상 자바스크립트보다 우월한 것은 아닙니다.
제이쿼리는 어디까지나 자바스크립트를 토대로 만든 것이기 때문에 개발 속도가 아닌 처리 속도 부분에서 성능이 떨어집니다. 제이쿼리 라이브러리를 거치면서 브라우저에 맞는 네이티브 자바스크립트로 변환된 뒤 실행되기 때문입니다.
'JavaScript & JQuery' 카테고리의 다른 글
| [JavaScript]Input type number의 maxlength 적용(slice 메서드) (2) | 2022.05.20 |
|---|---|
| [JavaScript]Split 함수(문자열을 잘라 배열로 변환) (10) | 2022.04.28 |
| [JavaScript]자주 사용하는 정규식 (2) | 2022.04.12 |
| [JavaScript] 정규 표현식(RegExp)의 개념 (4) | 2022.04.12 |
| [JavaScript]checkbox, select, radio 활성화, 비활성화 / 선택 값 / 선택 변경 (8) | 2022.03.22 |
댓글