혁신을 이룹니다, 오딘박스

19-11-28, 클라이언트사이드프로그래밍 수업내용 본문

DEVELOPMENT/클라이언트사이드

19-11-28, 클라이언트사이드프로그래밍 수업내용

포근함 간지뽕빨 리턴씨 2019. 11. 28. 10:45

jQuery Logo

 

클라이언트 사이드 프로그래밍 [jQuery]

 

2019년 11월 28일 수업 내용 + 개인적인 추가 내용

 

선택 <-> 처리

 

[목표]

jQuery 개념을 이해

jQuery 파일을 웹문서 작성에 활용

jQuery 파일 두가지 버전과 용도를 이해

jQuery 문장 구조의 특징 이해

jQuery selector 포함 기능 이해

 


 

jQuery 소개

jQuery 기본 : HTML, CSS JavaScript

Lightweight "write less do more" Javascript Library

웹 문서 작성 JavaScript를 매우 쉽게 활용 할 수 있도록 만든 라이브러리

jQuery를 활용하지 않은 웹 사이트는 없을 정도의 필수 아이템

 

jQuery 가능 한 것

HTML/DOM 조작 ->간단한 방법으로 처리 가능
CSS 조작
HTML  이벤트 처리
다양한 효과와 애니메이션
AJAX

- Ajax(Asynchronous JavaScript and XML, 에이잭스)는 비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다.

 


jQuery 사용법

웹 문서에 jQuery 파일을 추가

1. jQuery파일을 다운로드,웹 문서 추가 [ 수업 시 주로 다룰 방법 ]

 [ 참고링크 ]

Production version

실질적 효율적 활용 목적 압축 제공

파일 크기가 매우 작다

jquery-3.4.1.min.js
0.08MB

Development version

테스트 학습 수정 개발 등이 가능한 비압축 원본 파일

파일 크기가 커서 활용 효율 측면 불리하여, 사용성이 떨어짐

jquery-3.4.1.js
0.27MB

2. 외부 사이트 제공 jQuery파일 웹 문서 링크 연결 추가

Google, MicrosoftCDN 제공 파일을 연결

 

기본 문법 $(selector).action()
$ : jQuery 정의/접근 할 수 있는 기호
- jQuery 태그 선택은 CSS 문법 사용

 

* 문서 준비 이벤트

$(document).ready(function(){
// 문서 불러오기 끝내기 전에 jQuery 코드 실행 방지
});

jQuery 문장 구조

1. 기본 문장 구조

기본 문법 $(selector).action() 

- jQuery 이용, html 요소를 선택(query) 필요한 처리 (Action)


$

jQuery 라이브러리 접근

$대신 jQuery 사용 가능

 

selector

처리대상 html 요소 선택

 

action

선택된 요소 필요한 처리


를 들어,

$("P").hide();
// 위 아래와 같이 써도 됨
jQuery("P").hide();
$(this).slide();
$(".class").hide();
$("#id").hide();

// jQuery 예제

2. jQuery 코딩 시작

// 기존 JavaScript
<script>
window.onload = function() {
// Source code
};
</script>


// jQuery 활용 시
<script>
$(document).ready(function(){
// Source code
});
</script>

3. jQuery 사용

jQuery Effects [hide / show]

$(selector).hide([speed, callback]); // 감추다
$(selector).show([speed, callback]); // 보여주다
$(selector).toggle([speed, callback]); // 위 두가지를 보여준다

 

fading

$(selector).fadeIn([speed, callback]);
$(selector).fadeOut([speed, callback]);
$(selector).fadeToggle([speed, callback]);

 

sliding

$(selector).slideUp([speed, callback]);
$(selector).slideDowne([speed, callback]);
$(selector).slideToggle([speed, callback]);

오늘 수업 시 한 예제 소스

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="ko" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <script src="jquery-3.4.1.min.js" charset="utf-8"></script>
          <script type="text/javascript">
 
            $(document).ready(function() {
              $("p").click(function(){
                $(this).slideUp();
              });
            $("#btnHide").click(function(){
              $("p").fadeOut(1500);
            });
 
            $("#btnShow").click(function(){
              $("p").fadeIn(1500);
            });
 
            $("#btnToggle").click(function(){
                  $("p").fadeToggle(1500);
            });
 
 
            });
          </script>
  <body>
    <h1>jQuery Coding Test</h1>
    <hr>
    <button id="btnHide">hide</button>
    <button id="btnShow">Show</button>
    <button id="btnToggle">toggle</button>
    <hr>
    <p>컴퓨터</p>
    <p>프로그래밍</p>
    <p>최영환</p>
  </body>
</html>
 
cs

 

1 Comments
댓글쓰기 폼