[jQuery] 1.jQuery 개요

in Web on jQuery


javascript란?



이번 파트에서는 jQuery에 대해 알아볼 건데요~!

제이쿼리(jQuery)는 오픈 소스 기반의 자바스크립트 라이브러리입니다.



앗? 자바스크립트가 뭔지 모르시는 분이 계실텐데요~

먼저, 자바스크립트(JavaScript)가 무엇인지 간단하게 알고가죠!



자바스크립트(JavaScript)는 객체(object) 기반의 스트립트 언어입니다.

또한, 자바스크립트는 타입을 명시할 필요가 없는 인터프리터 언어입니다~!

C언어와 자바와 같은 언어는 소스파일을 작성한 후,

해당파일을 컴파일하여 사용자가 실행할 수 있는 실행파일로 만들어 사용하지만,

자바스크립트와 같은 인터프리터 언어는 컴파일 작업을 거치지 않고,

소스코드를 바로 실행할 수 있습니다.



HTML로 웹의 내용을 작성하고, CSS로는 웹을 디자인 하며, 자바스크립트로는 웹의 동작을 구현할 수 있습니다.

예를 들어, 마우스 클릭을 하는 이벤트가 발생했을 때, 글자색이 바뀌거나, 이미지가 바뀌는 등

웹의 동적인 부분을 자바스크립트를 이용해 구현할 수 있습니다.

다음은 javascript 예입니다! 


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>자바스크립트 예제</title>
	<style>
		body{width:30%; border:2px solid orange;}
		button{margin:10px; border:1px solid blue;}
	</style>
</head>
<body>
		<div class="example">
		<h1>자바스크립트 예</h1>
			<img class="textarea" id="js_ex" src="computer_on.png" style="width: 350px; height: 417px;">
			<br>
			<button class="textarea" onclick="document.getElementById('js_ex').src = 'computer_on.png'">
			컴퓨터 켜기</button>
			
			<button class="textarea" onclick="document.getElementById('js_ex').src = 'computer_off.png'" >
			컴퓨터 끄기</button>
		</div>
</body>
</html>




실행화면



신기하죠??? 웹이 이제 자바스크립트로 인해 동적인 면도 가지게 되었습니다.

자바스크립트에 대해 자세히 배우는 것은 다음으로 미루겠습니다~

다음에 제가 따로 메뉴를 만들어서 포스팅하겠습니다!

저희는 지금 제이쿼리에 대해 배울 것이기 때문입니다!

jQuery 개요



javascript의 강력한 기능때문에 지금까지도 개발자들은 많이 사용하고 있습니다.

하지만, 자주 사용하는 기능을 자바스크립트으로 매번 구현하는 것을 복잡하다고 느낀 사람들은

웹에서 자주 사용하는 기능들을 자바스크립트를 사용해서 라이브러리로 미리 구현해놓았습니다.

이런 자바스크립트 라이브러리 중 하나가 바로 제이쿼리입니다!



제이쿼리의 장점은 다음과 같습니다.


  • 제이쿼리는 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원됩니다.

  • HTML DOM을 손쉽게 조작할 수 있으며, CSS 스타일도 간단히 적용할 수 있습니다.



  • 애니메이션 효과나 대화형 처리를 간단하게 적용해 줍니다.



  • 같은 동작을 하는 프로그램을 더욱 짧은 코드로 구현할 수 있습니다.



  • 다양한 플러그인과 참고할 수 있는 문서가 많이 존재합니다.



  • 오픈 라이선스를 적용하여 누구나 자유롭게 사용할 수 있습니다.





제이쿼리(jQuery) 다운로드



제이쿼리를 사용하기 전에 먼저 제이쿼리 파일을 다운받아야합니다.

다운로드는 jquery.com 에서 받을 수 있습니다.

jquery-3.3.1.js 파일을 받으면됩니다!

제이쿼리의 확장자는 .js 입니다~!

다운받으셨으면 다음 장부터 제이쿼리에 대해 알아보고 실습해보겠습니다.