jQuery 초기화


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
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
 
<html lang="ko">
 
<head>
 
... meta태그 설정 및 CSS 처리...
 
</head>
 
 
 
<body>
 
... HTML 태그 ...
 
<!-- jQuery 참조 -->
 
// 1) 실행 시간의 이점 때문에 script 코드는 <body>태그 종료 직전 명시
 
// 2) 웹 브라우저의 캐시 기능을 활용하기 위해서 CDN방식으로 라이브러리 참조
 
<script src="http://code.jquery.com/jquery-3.2.1.min.js">
 
 
 
<!-- 개발자 작성 영역 -->
 
// 1) HTML파일에서 직접 스크립트 구현
 
// 2) 외부 파일로 작성 --> src 속성으로 참조
 
<script type="text/javascript">
 
/** 모든 곳에서 인식할 변수 및 함수 정의 영역 */
 
 
 
/** jQuery 구현 부분 */
 
$(function() {
 
// 이 영역이 페이지 로딩이 완료된 후 실행된다.(body의 onload 이벤트 --> 프로그래밍 언어에서의 main() 역할)
 
});
 
</script>
 
</body>
 
</html>


HTML 요소 접근


HTML요소를 jQuery 객체로 생성


1
var obj = $("CSS셀렉터");


- 대상 요소를 지정할 수 있는 CSS셀렉터를 사용한다.

- jQuery에서 사용한 CSS 셀렉터가 반드시 <style> 태그에 정의되어 있어야 하는 것은 아니다.

- 혼란을 피하기 위해 CSS에서는 class 형식으로만 셀렉터를 구성하고, jQuery에서는 가급적 id속성만으로 대상을 지정한다.

* CSS : TAG나 ID속성을 사용한 셀렉터 지양.

    자손, 자식 셀렉터의 구성도 가급적 class속성만으로 구성

* jQuery : 대부분의 경우 ID속성을 사용하지만

  동시에 여러 개의 객체를 제어해야 할 경우는 class속성도 사용.


HTML요소 내의 내용 제어


html() 함수는 파라미터가 있을 경우 설정(setter), 파라미터가 없을 경우 리턴(getter)의 기능을 한다.


요소 안에 내용을 설정하기


1
$("#foo").html(설정할 내용);


요소 안의 내용을 가져오기


1
var content = $("#foo").html();


JSON 표기법


                                                                                              ┌>JSON --> 배열이나 또다른 JSON 포함 가능 
Javascript에서 사용되는 자료의 나열 방법으로 이름(key)와 값(value)의 쌍으로 구성된다.
                                                                                              └> 일반변수(string, int, boolean, float) / 배열 -> 원소 형태로 일반변수, JSON 
이름(key)에는 따옴표 사용이 자유롭다.
  - 이름에 "-"가 있는 경우는 따옴표 필수 ==> ex) background-color (x), "background-color" (o)



기본 정의 방법
1
2
3
4
5
6
7
8
9
10
11
var my_height = 175.6;
var json = {
      name : 'JS학생',                 // 문자열은 따옴표 사용
      age : 20,                           // 숫자형이나 boolean은 따옴표 사용 안함 
      height : my_height          // 다른 변수를 값으로 사용도 가능함
};
 
// 값에 접근하기
console.log(json.name);
console.log(json.age);
console.log(json.height);

배열데이터를 포함하는 경우
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var lecture = {
       start : '2017-09-06',
       end : '2018-01-31',
       subject : [ 'html', 'css', 'javascript', 'php']
                      0      1        2           3
};
 
// 값에 접근하기
console.log(lecture.subject[0]);
 
// 반복문으로 값에 접근하기
for (var i=0; i<lecture.subject.length; i++) {
        console.log(lecture.subject[i]);
}

JSON끼리의 중첩
  - 다른 JSON을  포함할 수 있다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var address = {
      postcode : '12345',
      header : '서울시 강남구 역삼동',
      footer : '123-45'
};
 
var member = {
       user_id : 'student',
       user_name : '학생',
       addr : address      // key의 이름과 value의 변수명이 동일한 경우 에러는 아니지만 코드가 혼란스러워 질 수있다.
                            // 이름에 따옴표를 붙여서 혼란을 피할수도 있지만 차선책일뿐..
};              
 
// 값의 접근
console.log(member.addr.postcode);





축약해서 표현한 경우


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var member = {
 
    user_id : 'student',
 
    user_name : '학생',
 
    addr: {
 
        postcode : '12345',
 
        header : '서울시 강남구 역삼동',
 
        footer : '123-45'
 
    }
 
}


JSON이 배열에 들어가는 경우


1
2
3
4
5
6
7
var book1 = { subject: 'html입문', price: 32000 };
 
var book2 = { subject: 'CSS활용', price: 28000 };
 
var book3 = { subject: 'jQuery실무', price: 47000 };
 
var books = { book1, book2, book3 };

축약표현


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
var books = [
 
    {
 
        subject: 'html입문', 
 
        price: 32000
 
    },
 
    {
 
        subject: 'CSS활용', 
 
        price: 28000
 
    },
 
    {
 
        subject: 'jQuery실무',
 
        price: 47000
 
    }
 
 
 
];


JSON을 포함하는 배열이 다른 JSON에 들어가는 경우


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var library = {
 
    name : '강남도서관',
 
    address : '서울시 강남구 ... ',
 
    open : '오전 09시 00분',
 
    close : '오후 06시 00분',
 
    book_list: [
 
        { subject: 'html입문', price: 32000 },
 
        { subject: 'CSS활용', price: 28000 }, 
 
        { subject: 'jQuery실무', price: 47000 }
 
    ];
 
};

접근 방법 ex) library.book_list[0].subject

=> 반복문 적용대상


JSON에 포함된 함수


Javascript에서는 변수에 함수를 참조시킬 수 있다.


1
2
3
4
5
var hello = function() {
 
    ...
 
};

JSON은 key와 value의 쌍으로 이루어진 데이터 집합.(value=변수, 값)


1
2
3
4
5
6
7
var data = {
 
    foo: 123,
 
    bar: 456
 
};

즉, value에 function이 참조될 수 있다.


1
2
3
4
5
6
7
8
9
10
11
12
13
var data = {
 
    foo: 123,
 
    bar: function() {
 
        ...
 
        console.log(this.foo);
 
    }
 
};


같은 json에 포함된 다른 변수나 함수에 접근할 경우에는 this를 사용해야 함.

'Web 관련' 카테고리의 다른 글

Javascript+jQuery+Ajax 9일차  (0) 2019.02.08
Javascript에 관한 MVC 구조의 이해  (0) 2019.02.07
Javascript+jQuery+Ajax 7일차  (0) 2019.02.01
Javascript+jQuery+Ajax 6일차  (0) 2019.01.31
Javascript+jQuery+Ajax 5일차  (0) 2019.01.30

+ Recent posts

티스토리툴바