[Jquery] 1. 개발 환경 구축

Jquery (제이쿼리)란?

자바스크립트 라이브러리(프레임워크)

=> 자바스크립트에서 자주 사용되는 기능을 모아놓는것

 https://jquery.com/-> 라이브러리 다운로드 
 jquery-3.7.1.js   (압축X)
 jquery-3.7.1.min.js (압축O)
 jquery-3.7.1.slim.js (압축X,Ajax X)
 jquery-3.7.1.slihttp://m.min.js (압축O, Ajax X)

jQuery

 

 https://flukeout.github.io/
 

CSS Diner

HTML : 웹페이지 구축을 위한 태그 

- 코드 작성 및 페이지 요청/응답 처리를 수행 편리

- 처리결과를 바로 페이지에 추가 가능

- 웹 브라우저 아닌곳에서는 사용 불가능

- 요청이 같은 도메인주소로 부터 호출 해야함
 

XML : 태그형태로 데이터를 저장(HTML코드보다 문법에 제한적)

- 유연한 데이터 타입(다양한 태그 사용가능)

- 다양한 응용 프로그램들 사이에서 데이터 교환 가능

- 전달하려는 데이터보다 태그의 크기가 더 크다(코드 작성량 증가,처리속도 감소)

- 요청이 같은 도메인주소로 부터 호출 해야함

 

JSON : 자바스크립트 객체 표현식 (JavaScript Object Notation)

- JavaScript 문법을 따르고있음

- 요청이 다른 도메인주소로 부터 호출가능

- HTML/XML 보다 간결한 데이터 표현 => 최근 데이터처리 표준형태(개방형 데이터 포멧)로 사용되고 있음

- 문법에 예민함( 기본적인 문법 숙지 필요 )

- 자바스크립트 코드를 포함가능( 악의적인 데이터파일을 포함가능 )

 

JSON 문법

- 데이터 저장 =>  속성(key) : 값(value)   데이터 쌍으로 구성(단순텍스트형태)

=> 속성은 "" 표시, 값은 데이터 타입에 따라서 변경

- JSON객체 저장 => { "속성":값, "속성":값,..... } 사용하여 표시

- JSON배열 저장 => [ "속성":값, "속성":값,..... ] 사용하여 표시

 

* 사용가능한 데이터타입

정수(2,8,16진수 사용X), 실수(고정소수점 3.123,-9.33/부동소수점 1e4, 2.5E-5), Boolean(true/false), Null값, 문자열(""로 표시되는 0개이상의 유니코드문자,이스케이프 문법지원), 객체 { "속성" : [ "속성":값,... ] }, 배열 [ {"속성":값} ]
      
* Date(날짜 정보)타입 지원X => 다른형태로 변경후 저장가능(정수,문자열)

 

 

제이쿼리 개발 환경 구축하기

 

파일 다운로드

 

https://jquery.com/

jQuery

 

들어가서 파일 다운 후

 

생성한 프로젝트에 js 폴더 생성 한 번 더 하고

 

추가

 

 

제이쿼리 라이브러리 추가

<script src="../js/jquery-3.7.1.min.js"></script>

 

<script type="text/javascript">
	// 자바 스크립트 코드 작성
	
	
	$(document).ready(function(){
		alert("JQUERY1 실행! ");
		});
	
	$(functuon(){
		alert("JQUERY2 실행! ");
	});
	

</script>

 

 

 

$마크가 제이쿼리를 의미한다

 

CDN 라이브러리 추가!

https://releases.jquery.com/

jQuery CDN

<!-- 제이쿼리 라이브러리 추가<CDN : Content Delivery Network> -->
<!-- <script src="../js/jquery-3.7.1.min.js"></script> -->
<script src="https://code.jquery.com/jquery-3.7.1.js" 
integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>

 

- 여러 개 추가하면 오류 날 확률이 높음 하나만 쓰는 게 안정적

 

 

쓸 거면 밑에 두 개 추천~

4번째 거 선택!

 

<!-- 제이쿼리 라이브러리 추가 -->
<!-- <script src="../js/jquery-3.7.1.min.js"></script> -->
<!-- 제이쿼리 라이브러리 추가(CDN : Content Delivery Network) -->
<!-- <script src="https://code.jquery.com/jquery-3.7.1.js"  -->
<!--  integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="  -->
<!--  crossorigin="anonymous"></script> -->
 
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>

 

 

 

<파일 만들 때마다 항상 기본 셋팅>

<script src="../js/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		alert(' 준비 끝 ! ');
		
	});

</script>