[풀스택 부트캠프] 섹션 6. jQuery 사용하기

1. jQuery 시작하기

1) jQuery란?

- DOM 조작을 위해서 우리가 실제로 다뤄볼 라이브러리는 jQuery라는 라이브러리다.

- jQuery는 부트스트랩과 같은 오픈소스 라이브러리 중의 하나이다.

- jQuery는 웹페이지에 있는 내용들을 손쉽게 동적으로 조작할 수 있게 해준다.

2) DOM에 대한 이해

- DOM : Document Object Model

- Document : html이나 css를 Document(웹문서)라고 한다. 

- Object : 웹 문서의 태그 하나 하나를 Object라고 한다.

- DOM이란, 이 object들을 손쉽게 조작할 수 있게 해주는 프로그래밍적 인터페이스, 프로그래밍적 수단을 말한다.

- 구조화된 계층적 구조를 계층적으로 어떻게 접근하는지, 어떻게 위치나 속성을 변경하는지를 프로그래밍으로 제공하는 여러가지 양식이나 구조들을 DOM이라고 한다.

- DOM을 제대로 활용하는 것이 바로 jQuery다.

- jQuery를 통해 화면을 손쉽게 조작할 수 있다.

3) parent / sibling / child

- body의 parent는 html

- head의 parent도 html

- body와 head는 sibling

- html의 child는 head, body

- body의 child는 div(header), div(container), div(footer)

4) jQuery 가져오기

- jQuery CDN을 head 태그 안에 import 하기

5) jQuery로 간단해지는 코드 / 장점

- $ : jQuery 함수를 담고 있는 객체.

- 예시)

$('.header').css('color', 'red');

- $('.header') : selecter, header라는 클래스를 가진 태그를 선택한다.

2. jQuery 활용 #1: DOM

1) $ : DOM 접근하기, selecter

- $('#list-item-2') : id로 접근하기

- $('.list-item') : class로 접근하기

- $('li.list-item:eq(1)') : sbling을 이용해서 접근하기, list-item 중 두 번째 아이템에 접근됨. (0부터 시작)

- $('#list-sample li:nth-child(2)') : 두 번째 li에 접근됨. (1부터 시작)

2) jQuery에서 제공하는 함수

- append : 뒤에 동적으로 추가

$('#list-sample').append('<li>항목</li>');

- prepend : 앞에 동적으로 추가

$('#list-sample').prepend('<li>항목</li>')

- text : 태그를 넣더라도 태그가 직접 보여짐

- html : 태그를 넣으면 실제 태그로 들어감

$('#list-item').text('<li>항목</li>');
$('#list-item').html('<li>항목</li>');

- remove : 삭제

$('.list-item:eq(0)').remove();

- css : style 변경

$('.progress-bar-success').css('width','50%');
$('.list-item').css('color','red');

- addClass : class 부여

$('.list-sample li:eq(3)').addClass('list-item');

- removeClass : class 삭제

$('li-active').removeClass('active');

- attr : 속성(attribute) 변경 

$('#img-src').attr('src', 'http://icons....');

- clone : 특정 element를 복제하여 원하는 곳에 추가

var li = $('ul.navbar-nav li:eq(1)').clone();
$('ul.navbar-nav').append(li);

3. jQuery 활용 #2: Event

1) $.click

- $.click : 클릭했을 때 이벤트 발생

- 예제)

function clickEvent() {
    alert('hello');
}
$('p').click(clickEvent);

- 예제2) 인자를 넣는 곳에 바로 함수를 선언할 수도 있다.

이러한 함수를 익명함수라고 한다.

$('p').click(function() {
    alert('hello');
});

- 예제3) 클릭하면 text가 변경된다.

$('p').click(function() {
    $(this).text('클릭됨!');
});

2) $.hover 

- $.hover : 마우스를 올려놓았을 때 이벤트 발생

- 예제)

$('p').hover(function() {
    $(this).append("<span>***</span>");
});

- 예제2) hover는 인자를 2개를 받을 수 있는데, 두 번째 인자는 hover가 끝났을 때 실행되는 것을 의미한다.

$('p').hover(function() {
    $(this).append("<span>***</span>");
},function() {
    $(this).find("span").remove();
});

3) $.focus

- $.focus : 특정 입력필드나 버튼이 선택이 되었을 때 이벤트 발생

$('input').focus(function() {
    $(this).val('----'); //value
});

4) $.mouseover / $.mouseout

- 예제)

$("div.overout").mouseout(function() {
    $("p:first", this).text("mouse out");
}).mouseover(function() {
    $("p:first", this).text("mouse over");
});

5) $.moseenter / $.moseleave

- 예제)

$("div.enterleave").mouseenter(function() {
    $("p:first", this).text("mouse enter");
}).mouseleave(function() {
    $("p:first", this).text("mouse leave");
});

6) $.change

- $.change : 태그들의 값이 변경되었을 때 이벤트 발생

-

$("select").change(function() {
    var str = "";
    $("select option:selected").each(function() {
        str = str + $(this).text() + " ";
    });
    $("#selected-hobby").text(str);
});

- (줄 1~7) select 값이 변경되었을 때 익명 함수 실행됨

- (줄 3~5) selected된 option 각각에 대한 익명 함수가 실행됨

- (줄 6) selected-hobby라는 id값을 가진 부분에 str을 넣음

4. JavaScript 기본 타이머

1) 타이머 : setTimeout / setInterval / clearInterval

- setTimeout : 대기 후에 함수가 실행됨

- setInterval : 주기적으로 함수가 실행됨

- 예제)

function onTime() {
    alert('실행됨');
}
 
//setTimeout
setTimeout("onTime()", 5000); //5초 후 함수 호출됨
 
//setInterval
setInterval("onTime()", 2000); //2초마다 계속 함수가 호출됨

- clearInterval : 타이머 취소
- 예제)

var n = 0;
function onTime() {
    alert('실행됨');
    n++;
 
    if(n==3) {
        claerInterval(timer);
    }
}
 
//setInterval
var timer = setInterval("onTime()", 2000);

2) $.ready

- $.ready : 페이지 로딩이 끝난 후 실행하고 싶을 때 사용

- 예제)

$(document).ready(function() {
    setInterval("onTime()", 2000);
});

- (줄 1) document : 웹 문서 전체를 말함.

3) 변수의 Scope

- 중괄호 안에 선언된 변수는 그 바깥 scope에서 사용할 수 없다.

5. 인터렉티브 웹: jQuery UI

1) jQuery UI

- jQuery UI : 자바스크립트 라이브러리에서 UI를 다이나믹하게 지원하기 위한 오픈소스 라이브러리

- jQuery UI 라이브러리를 다운로드 받은 뒤 압축을 풀고 프로젝트 폴더 안에 넣어준다.

- 아래와 같이 import 시켜준다.

<script type="text/javascript" src="jquery-ui/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jquery-ui/jquery-ui.min.css" type="text/css" />
<link rel="stylesheet" href="jquery-ui/jquery-ui.theme.min.css" type="text/css" />

2) DatePicker

- 날짜를 선택할 수 있게 도와주는 UI이다.

$(document).ready(function() {
    var option = {
        monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
        monthNamesShort: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
        dayNames: ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'],
        dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'],
        dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
        dateFormat: 'yyyy년mm월월dd일'
    };
    $('#datepicker').datepicker(option);
});
 

3) Slider / Picker

- slider

$(document).ready(function() {
    $('#slider').slider();
});

- picker

function hexFromRGB(r, g, b) {
    var hex = [
        r.toString(16),
        g.toString(16),
        b.toString(16)
    ];
 
    $.each(hex, function(nr, val) {
        if(val.length === 1) {
            hex [nr] = "0" + val;
        }
    });
 
    return hex.join("").toUpperCase();
}
 
function refreshSwatch() {
    var red = $("#red-slider").slider("value");
    var green = $("#green-slider").slider("value");
    var blue = $("#blue-slider").slider("value");
 
    hex = hexFromRGB(red, green, blue);
    $("#preview").css("background-color", "#"+hex);
}

- (줄 3~6) r, g, b의 값을 16진수로 변환한다.

- (줄 8) 첫 번째 인자값 nr은 반복되는 번지수를 의미하고 두 번째 인자값 val은 value 값을 의미한다.

- (줄 9~10) #F410 -> #0F0410 이렇게 변환시키기 위한 코드다.

- (줄 9) === : type까지 비교

4) AutoComplete

- AutoComplete : 자동완성

var availables = [
    'Apple', 'Google', 'Facebook'
];
 
$(document).ready(function() {
    $("#tags").autocomplete({
        source: availables
    });
});

6. 인터렉티브 웹: Chart.js

1) Canvas 태그의 이해

- <canvas></canvas> : 그림판처럼 화면에 동적으로 그릴 수 있도록 도와주는 공간이다.

2) 차트 그리기

- 예제)

var dateset = {
    labels: ["red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: 'Data',
        data: [12,19,3,5,2,3],
        backgroundColor:[
            'rgba(255, 99, 132, 0.2)',
            'rgba(255, 99, 132, 0.2)',
            'rgba(255, 99, 132, 0.2)',
            'rgba(255, 99, 132, 0.2)',
            'rgba(255, 99, 132, 0.2)',
            'rgba(255, 99, 132, 0.2)'
        ],
        borderColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(255, 99, 132, 0.2)',
            'rgba(255, 99, 132, 0.2)',
            'rgba(255, 99, 132, 0.2)',
            'rgba(255, 99, 132, 0.2)',
            'rgba(255, 99, 132, 0.2)'
        ],
        borderWidth: 1
    }]
};
 
var ctx1 = document.getElementById("chart1");
var ctx2 = document.getElementById("chart2");
var ctx3 = document.getElementById("chart3");
var ctx4 = document.getElementById("chart4");
 
var barChart = new Chart(ctx1, {
    type: 'bar',
    data: dataset
});
 
var lineChart = new Chart(ctx2, {
    type: 'line',
    data: dataset
});
 
 
var radarChart = new Chart(ctx3, {
    type: 'radar',
    data: dataset
});
 
 
var pieChart = new Chart(ctx4, {
    type: 'pie',
    data: dataset
});

- (줄 31~34) : bar 차트

- (줄 36~39) : line 차트

- (줄 42~45) : radar 차트

- (줄 48~51) : pie 차트

3) D3.js의 소개

- 복잡한 데이터를 시각화하는 오픈소스