jquery 와 jquery mobile 연동

아직 Java script 사용하는게 익숙지 않다. 그러나 보고 있는 강의는 JQuery 와 JQuery Mobile 로 넘어가고 있다. 어짜피 JQuery 를 하면서도 Java script 를 계속 사용할 것이니깐 익숙해지도록 노력해야 겠다.

JQuery 와 JQuery Mobile 은 다음 사이트에서 각각 받을 수 있다.

JQuery : https://jquery.com/

JQuery Mobile : http://jquerymobile.com/

JQuery 인 경우는, JQuery 홈페이지에서 download 버튼을 누르면 관련 page 로 이동하고, "Download the uncompressed, development jQuery 3.x.x" 링크를 눌러서 다운로드 받으면 된다. 하나의 js 파일을 받게 된다.

JQuery Mobile 인 경우에는, JQuery Mobile 홈페이지에서 "Latest Stable" 버튼을 눌러서 다운로드 받으면 된다. 받은 파일은 zip 형식이다.

이전에 compressed 된 파일을 보고 내용을 감추려고 그러나 했는데, 그런 건 아닌 듯 하다. 압축한 파일이 전송하는데 효과적이라 실제 웹사이트 구축시에는 압축 버전을 사용하고, 개발 시에는 프로그램 내부도 볼 수 있도록 압축되지 않은 버전을 사용할 것이라는 짐작을 해본다.

JQeury 와 JQuery Mobile 을 연동하기 위해서는 몇 가지 작업을 해줘야 한다.

먼저, Aptana Studio 에서 Web project 를 하나 만들어뒀으면, java script 파일을 모아두는 디렉토리인 "js" 를 하나 만들어 둔다. 이 위치에 JQuery 파일과 JQuery Mobile 파일을 복사한다. 각 파일 이름은 "jquery-3.1.1.js", "jquery-mobile-1.4.5.js", "jquery-mobile-1.4.5.css" 이다. 버전에 따라서 뒤에 따라 붙는 버전명은 다를 수 있다.

HTML 파일에 JQuery 를 link 시켜야 한다. 

<link rel="stylesheet" href="js/jquery-mobile-1.4.5.css" />

<script src="js/jquery-3.1.1.js"></script>

<script src="js/jquery-mobile-1.4.5.js"></script>

<script type="text/javascript"> 내 코드는 이곳에다 </script>

순서가 중요하다. css 적용, JQuery, JQuery Mobile 순으로, 그리고 내가 작성할 코드는 마지막에 오도록 한다.