[ jQuery ] 라이브러리 연결하기
jQuery
What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
jquery.com
1) 홈페이지에 접속하여, Download jQuery 클릭하기
2) 압축 파일 선택
3) 압축파일에 있는 코드 전체 복사 후 새로운 텍스트 파일에 붙여 넣고,
폴더 이름 jquery-3.6.0.min.js 변경 후 확장자 변경해주기!
그러면 텍스트 파일이 밑에 사진처럼 변경된다.
변경이 안된다면 보기 눌러 확장자 체크해주기!
4) 이클립스에서 webapp 하단에 JS 폴더 생성 후 파일 옮겨주기
5) 새로운 파일 만들어 밑에 코드 활용하여 연결해주기 ( 바로 연결할 거면 2번째 코드 사용! )
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
// window.onload 이벤트와 같은 기능을 수행
$(document).ready(console.log('jquery 라이브러리 연결 확인')
);
</script>
</body>
</html>
위에 코드로 사용하여 실행하였을 때, 아래 사진과 같은 오류가 발생한다. ( $가 선언되지 않은 상태! )
오류가 발생하는 이유는 외부 자바스크립트 파일 추가가 안되었기 때문!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script src="js/jquery-3.6.0.min.js"></script> <!-- 외부 자바스크립트 파일로 추가 -->
<script type="text/javascript">
// window.onload 이벤트와 같은 기능을 수행
$(document).ready(console.log('jquery 라이브러리 연결 확인')
);
</script>
</body>
</html>
<script src="js/jquery-3.6.0.min.js"></script> 코드를 새로 입력해주면 연결이 완료된다.