[jQuery] jQuery 사용
jQuery 설치
☞ jQuery란?
jQuery(제이쿼리)는 HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리다. 존 레식이 2006년 뉴욕 시 바캠프(Barcamp NYC)에서 공식적으로 소개하였다. jQuery는 오늘날 가장 인기있는 자바스크립트 라이브러리 중 하나이다.
jQuery는 MIT 라이선스와 GNU 일반 공중 사용 허가서v2의 듀얼 라이선스를 가진 자유 오픈 소프트웨어이다. jQuery의 문법은 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, Ajax 개발을 쉽게 할 수 있도록 디자인되었다. 또한, jQuery는 개발자가 플러그인을 개발할 수 있는 기능을 제공한다.
[출처] 위키백과, 우리 모두의 백과사전.
Site : https://jquery.com/
jQuery CDN Site : https://code.jquery.com/
01. jQuery CDN 링크사용
A) code.jquery.com 에 접속 후 minified를 클릭합니다.
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
B) 위의 코드를 <head></head> 사이에 삽입합니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> </head> <body> </body> </html>
02. jQuery 저장 후 사용
A) https://jquery.com/ 에 접속 후 오른쪽 상단의 Download Jquery 버튼을 클릭합니다.
Download the compressed, production jQuery 3.3.1 에 대고 오르쪽 마우스를 클릭해 폴더에 저장합니다. ( ex: js/jquery-3.3.1.min.js )
B) 위의 코드를 <head></head> 사이에 삽입합니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/jquery-3.3.1.min.js"></script> </head> <body> </body> </html>
자바스크립트(JavaScript)란?
자바스크립트(JavaScript)란?
-웹을 풍부하게 만들어주는 작고 가벼운 언어
우리가 매일 접속하는 웹사이트는 크게 3가지 요소로 구성된다. ‘HTML(Hyper Text Markup Language)’, ‘CSS(Cascading Style Sheets)’, ‘자바스크립트(Javascript)’다. HTML은 웹페이지의 큰 뼈대를 제공하고, CSS는 색깔이나 글씨체와 같은 디자인 요소를 관리한다. 자바스크립트는 크로스 플랫폼(cross platform), 객체지향 스크립트 언어로 웹페이지의 동작을 담당한다.
자바스크립트를 이용하면 웹에 풍부한 효과를 넣을 수 있지만, 2000년대 초반만 해도 자바스크립트는 개발자들에게 무시당하는 언어였다. 별다른 기능도 없고, 성능도 별로 좋지 않았기 때문이다. 하지만 최근 몇 년 사이에 다양한 자바스크립트 프레임워크와 라이브러리가 생기면서 자바스크립트 생태계는 크게 확장되고 있으며, 그 위상도 점점 높아지고 있다.
출처: 자바스크립트 [Javascript] - 웹을 풍부하게 만들어주는 작고 가벼운 언어 (용어로 보는 IT)
-1995년 탄생한 동적 언어
-배우기 쉽고 확장성 높지만, 보안엔 취약해
-‘개발자가 가장 관심 많이 갖는 언어’로 꼽혀
※ 자바스크립트 관련 라이브러리나 프레임워크 : 앵귤라.JS, D3.JS, 노드JS, 리액트JS
'JavaScript' 카테고리의 다른 글
| 홈페이지 접속시 자동으로 모바일 홈페이지로 이동 스크립트 (0) | 2018.05.01 |
|---|
홈페이지 접속시 자동으로 모바일 홈페이지로 이동 스크립트
모바일 디바이스 기기로 웹사이트 접속시 자동으로 모바일 사이트로 접속하게 만들기
example 01) PC용 홈페이지 index페이지 <head></head> 사이에 삽입
<script type="text/javascript">
var UserAgent = navigator.userAgent;
if (UserAgent.match(/iPhone|ipad|Android|Windows CE|BlackBerry|Symbian|Windows Phone|webOS|Opera Mini|Opera Mobi|POLARIS|IEMobile|lgtelecom|nokia|SonyEricsson/i) != null || UserAgent.match(/LG|SAMSUNG|Samsung/) != null)
{
location.href = "/m/"; /* 모바일 홈페이지 경로 */
}
</script>
<?php
$connect = '0';
extract(array_merge($HTTP_GET_VARS, $HTTP_POST_VARS));
?>
<script-x language='JavaScript-x'>
//모바일 페이지로 이동.
var uAgent = navigator.userAgent.toLowerCase();
var mobilePhones = new Array('iphone','ipod','android','blackberry','windows ce',
'nokia','webos','opera mini','sonyericsson','opera mobi','iemobile');
for(var i=0;i<mobilePhones.length;i++){
if(uAgent.indexOf(mobilePhones[i]) != -1){
if(<?=$connect;?> == '0'){
document.location='모바일용 홈페이지 경로';
<? $connect = '0'; ?>
}
}
}
</script-x>
'JavaScript' 카테고리의 다른 글
| 자바스크립트(JavaScript)란? (0) | 2018.05.04 |
|---|
