jQuery 개요 (기본 개념 / 라이브러리 연결방법 / ready( ) 함수)

• jQuery란?
  - 기존에 복잡했던 클라이언트측 HTML 스크립팅(JS)을
    간소화 하기위해 고안된 JavaScript Library.
    ※ 라이브러리(library) : 프로그램, 프로그래밍 언어에 없는 추가적인 기능
  
  - 단점 : jQuery 라이브러리를 다운로드 받아서 사용 → 로딩 속도 느림
              순수 JS보다 속도가 조금 느림
  
  
• jQuery 라이브러리 연결 방법
  - jQuery 라이브러리는 .js 확장자로 작성되어 있어
    script 태그를 이용하여 연결할 수 있음
  
  1) jQuery 라이브러리를 다운로드 받아서 직접 연결
  - 장점 : 서버 컴퓨터에 라이브러리가 존재하기 때문에 연결 속도가 빠름
  - 단점 : 폴더 구조 변경 시 경로가 꼬이게 되는 문제가 발생할 수 있음
  - jQuery 공식 홈페이지 : https://jquery.com/
  
  2) CDN(Content Delivery Network)을 이용한 연결 방법
  - 장점 : 언제 어디서든 jQuery를 이용할 수 있음
  - 단점 : 온라인 환경에서 이용 가능. 인터넷 속도에 따라 지연될 수 있음
  - jQuery CDN 코드 제공 페이지 : https://code.jquery.com/

<h1>JS와 jQuery 차이점</h1>
    
<button id="jsBtn">JS 버튼</button>

<button id="jQueryBtn">jQuery 버튼</button>

// JS와 jQuery 차이점

// 배경 : pink
// 글자색 : white
// 글자 크기 : 24px

// JavaScript
document.querySelector('#jsBtn').addEventListener('click', function(){
    this.style.backgroundColor = 'pink';
    this.style.color = 'white';
    this.style.fontSize = '24px';
})

// jQuery
$('#jQueryBtn').on('click', function(){
    $(this).css('backgroundColor', 'lightblue').css('color', 'white').css('fontSize', '24px');
})

See the Pen 24-12-23 jquery1-1 by Namu (@Namu-the-sans) on CodePen.

---

• HTML 문서 해석 순서와 window.onload / ready( )의 차이점
  - HTML 문서는 기본적으로 위 → 아래 순서대로 해석됨
    → 아래쪽에 작성되어 미해석된 코드는 위쪽 코드에서 호출할 수 없음!
  
  - ★ window.onload(JS) / ready( )(jQuery) 공통점
     → 위쪽에 코드가 작성되어도 제일 마지막에 해석(문서 로딩이 끝나는 시점)
     - 장점 : 코드가 미해석되어 오류가 발생하는 경우가 없어짐
     - 단점 : 먼저 해석되는 코드가 너무 크면 수행되는 시간이 뒤쳐질 수 있음
  
  - ★ window.onload / ready( ) 차이점
     - window.onload는 페이지 내에서 딱 한 번만 작성할 수 있음
     - ready( )는 여러 번 작성 가능
  
  - ★ ★ ★ ready( ) 작성 방법 3가지
     1) jQuery(document).ready(function( ){ 코드; });
     2) $(document).ready(function( ){ 코드; });
         ( '$' 기호는 jQuery를 의미함)
     3) $(function( ){ 코드; });

// window.onload 확인
window.onload = function(){ // 문서 로딩이 완료된 후 수행
   console.log(1);
}

console.log(2); 
// window.onload 미적용시 위 -> 아래 코드 해석 순서에 따라 콘솔창에 1, 2 출력
// window.onload 적용 시 위쪽에 코드가 작성되어도 제일 마지막에 해석 -> 콘솔창에 2, 1 출력

// window.onload 중복 작성
window.onload = function(){ // 문서 로딩이 완료된 후 수행
   console.log(1);
}

window.onload = function(){ // 앞서 작성한 window.onload 덮어씌움
   console.log(3);
}

console.log(2);
// 콘솔창에 2, 3 순서로 출력됨

---

// ready() 함수 확인
$(document).ready(function(){
   $("#readyTest).on('click', function(){
      alert("ready 함수 확인");
   })   
})

// ready() 중복 작성 -> 작성된 모든 내용이 적용
$(function(){
   console.log("ready() 함수의 다른 형태"); // 콘솔 결과창에 해당 문구 출력됨
})

// ready() + 화살표 함수
$( () => {
   console.log("화살표 함수도 가능"); 콘솔 결과창에 해당 문구 출력됨
})

See the Pen 24-12-23 jquery1-2 by Namu (@Namu-the-sans) on CodePen.