티스토리 뷰

[JQUERY]자바스크립트

어도비 브라켓(ADOBE Brackets) 제이쿼리(jquery) 연결하기

가산동 2018. 7. 20. 00:02

브라켓 설치 및 설정 방법 보기

>> [[JQUERY]자바스크립트] - 어도비 브라켓(ADOBE Brackets) 설치하기

>> [[JQUERY]자바스크립트] - 어도비 브라켓(ADOBE Brackets) 설정하기



앞서 설치한 브라켓에 JQUERY 를 연결해보겠다. 

JQUERY 사이트에 접속한다.


>> https://jquery.com/



우측에 다운로드 버튼을 누르면 다운로드 페이지로 이동한다.



스크롤을 내려보면

jQuery 3.3.1 release notes 가 있다 클릭하자.



종류가 두가지다.

https://code.jquery.com/jquery-3.3.1.js

js는 소스를 보기쉽게 줄맞춤을 해논것이고  

https://code.jquery.com/jquery-3.3.1.min.js 

min.js 는 줄맞춤없는 버젼이락 보면된다. 


나는 https://code.jquery.com/jquery-3.3.1.min.js  이걸 쓸거다.

둘중 아무거나 써도 상관없다. 클릭을 해보면,



이런식으로 나오는데 Ctrl + Shift + A 를 눌러주면 


이런식으로 전체를 드래그 할수 있다. 

그상태로, 브라켓에서 js파일을 만들어주자.



js파일들이 추후에 추가될 수 있으므로 폴더를 하나 만들어서 관리하면 편하다.

우클릭 후 폴더 만들기를 선택한다.



폴더 이름을 js 라고해주자.




만들어진 js 파일 위에 마우스를 올려놓고 우클릭, 파일만들기를 선택한다.



파일 이름을 jquery-3.3.1.min.js 라고 해주었는데 이름은 변경해도 상관없다.



앞서 전체 복사했던 소스를 붙여 넣기 해준후 저장을 해준다.


index.html 폴더로 이동해서 jquery가 정상적으로 연결되었는지 확인해보자.

index.html 에 아래처럼 소스를 입력한다. 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    
    <script>
        $(function(){
            alert('jquery 연결쓸수있니?');
        })
    </script>
</head>
    <body>
        <p>시작한다?</p>
    </body>
</html>
cs

브라켓을 설치하고 설정하면서 적었던 소스에서 조금 추가가 되었다. 
5 번째 라인에 있는 <script> 태그는 저장한 jquery 파일 경로를 설정하면서 쓸수 있게해준다.

7 번째 라인 <script> 태그 안에 jquery 소스를 입력해보자.
9 번째 alert()는 경고창 정도로 생각하면된다. 


브라켓 우측 상단에 번개모양 아이콘을 클릭해보면 위와같이 나오는걸 확인 할 수 있다. 


저작자표시 비영리 변경금지

'[JQUERY]자바스크립트' 카테고리의 다른 글

jQuery 003. 출력기능 document.write()  (0) 2018.07.21
jQuery 002. 알림창 alert()  (0) 2018.07.21
jQuery 001. 변수사용 var  (0) 2018.07.21
어도비 브라켓(ADOBE Brackets) 설정하기  (0) 2018.07.19
어도비 브라켓(ADOBE Brackets) 설치하기  (0) 2018.07.18
댓글