이제 여러분에게 기본적인 jQuery 사용을
보여드리겠습니다
우선 태그를 사용해서
jQuery 라이브러리를 넣습니다
이전에는 자바스크립트 코드를 태그 안에 넣었죠
이번에는 src 라는 속성을 추가해보겠습니다
이 속성은 URL을 넣기 위해 필요합니다
URL은 뭘까요?
만약 제 컴퓨터에서 작업하다가
jQuery를 다운 받아서
제 웹 페이지가 있는 폴더에 저장했다면
그냥 여기에 jquery.js 를 써주면 됩니다
하지만 칸아카데미에서는 동작하지 않을 겁니다
여기에는 jQuery를 받을 수 있는
서버 URL을 적어줘야 합니다
jquery.com에 가면 URL 리스트가 있습니다
그 중 하나를 복사해서 여기에 넣어 보겠습니다
됐습니다
이제 이 URL에 대해 몇 가지만
살펴보고 갑시다
일단 https로 시작하는 것을 볼 수 있습니다
이는 보안이 강화된 URL임을 의미합니다
칸아카데미에서는 안전하게 쓸 수 있는
웹 자원만 가져올 수 있습니다
웹 개발에서의 좋은 관례라 할 수 있죠
두번째로 이 자원은 googleapis.com 이라는
구글 서버에서 가져왔음을 알 수 있습니다
이런 서버를 CDN이라 부릅니다
컨텐츠 전송 네트워크라고 하는 것이죠
이 서버는 라이브러리 같이
정적인 파일들을 아주 빨리 제공하는 데
최적화된 서버입니다
구글 서버는 제가 신뢰하는 곳 중 하나입니다
일반적으로 스크립트를 가져오는 서버는
신뢰할 수 있는 곳이어야 합니다
어떤 곳은 여러분의 사이트에 나쁜 짓을 할 수도 있기 때문입니다
세번째로 살펴볼 것은
URL에 2.1.4. 라고 적힌 버전 정보입니다
jQuery 라이브러리는 계속 발전 중이어서
종종 새로운 버전을 내놓습니다
왼쪽에 있는 숫자일 수록
메이저 버전을 표현하고
오른쪽에 있는 숫자일 수록
마이너 버전을 나타냅니다
저는 jQuery 2를 사용하고 있습니다
요즘 브라우저에서 동작하는 버전이죠
하지만 IE8에서는 작동하지 않습니다
여러분의 웹 사이트에서
필요사항에 따라 어떤 버전을 쓸 지 결정할 수 있습니다
이제 jQuery를 포함시켰으니
또 다른 태그 안에서
실제로 사용해봅시다
모든 자바스크립트 라이브러리들은 함수들이 노출돼있고
함수의 이름을 제공합니다
사용 설명서를 찾아봐서
함수의 이름은 무엇이며
어떤 일을 하는 지 알아야 합니다
jQuery 라이브러리는 메인 함수 하나를 노출하고 있는데요
아주 짧은 이름을 가지고 있습니다
바로 달러 기호이죠
그 말은 우리가 제일 먼저 써야할 것은
바로 달러라는 거죠
이건 함수니까 괄호를 쳐주고요
당연히 세미콜론도 찍어야겠죠
함수 이름이 짧아서 좋군요
왜냐면 이 함수를 호출할 일이 매우 많거든요
이 함수에는 매우 많은 걸 전달할 수 있습니다
예시로 h1이라는 문자열을 넘겨보겠습니다
이걸 쓰면 jQuery는 이 웹 페이지의
모든 h1 요소를 찾아줍니다
그리고 jQuery 콜렉션 객체로 반환해줍니다
객체를 반환 받았으니
jQuery 객체의 메소드들을 호출함으로써
아까 찾은 h1 요소들을 조작할 수 있습니다
예를 들면 text 함수를 사용해서
모든 h1 요소의 텍스트를 바꿀 수 있습니다
문자열을 전달해서 말이죠
바뀌고 있네요
자 끝났습니다
첫 jQuery 맛보기였습니다
태그에 jQuery 라이브러리를 포함시키고
jQuery에게 모든 h1 태그를 찾게 한 다음
텍스트를 바꿔 보았습니다
이 수업을 계속 들으면 매우 많은 것들을
더 자세하게 배울 수 있을 겁니다
요소를 선택하고 조작하는 다양한 방법과
사용자 이벤트에 반응하는 웹 페이지와
재미있는 애니메이션 효과들도 배울 수 있을 겁니다