POPULAR POSTSMORE POST

    -

ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [jQuery] 제이쿼리 1일차 요점정리
    Frontend 2019. 2. 17. 22:09

    [1] jQuery 초기화

    <!DOCTYPE html>
    <html lang="ko">
    <head>
        ...meta 태그 설정 및 CSS처리...
    </head>

    <body>
        ...html 태그...
        <!-- jQuery참조-->
        <script src ="http://code.jquery.com/jquery-3.2.1.min.js"></script>
        <!-- 개발자 작성 영역 -->
        <script type="text/javascript>
        /* 모든 곳에서 인식할 변수 및 함수 정의 영역*/

        /* jQuery 구현 부분 */
        $(function() {
            //이 영역이 페이지 로딩이 완료된 후 실행된다.
        });
        </script>
    </body>
    </html>



    [2] HTML 요소를 jQuery 객체로 생성

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

    1. 대상 요소를 지정할 수 있는 CSS 셀렉터를 사용한다.
    2. jQuery에서 사용한 CSS 셀렉터가 반드시 <style>태그에 정의되어 있어야 하는 것은 아니다.
    3. 혼란을 피하기 위해 CSS에서는 class 형식으로만 셀렉터를 구성하고, jQuery에서는 가급적 id 속성만으로 대상을 지정한다.
      1. CSS: TAG나 ID 속성을 사용한 셀렉터 지양. 자손, 자식 셀렉터의 구성도 가급적 class 속성만으로 구성.
      2. jQuery: 대부분의 경우 ID 속성을 사용하지만 동시에 여러 개의 객체를 제어해야 할 경우는 class 속성도 사용.




    [3] HTML요소 내의 내용 제어
    html() 함수는 파라미터가 있을 경우 설정(setter), 파라미터가 없을 경우 리턴(getter)의 기능을 한다.




    [4] 요소 안에 내용을 설정하기
    ...javascript
    $("#foo").html(설정할 내용);
    ...



    [5] 요소 안의 내용을 가져오기
    ...javascript
    var content = $("#foo").html();
    ...




    [6] JSON 표기법

    Javascript에서 사용되는 자료의 나열 방법으로 이름(key)과 값(value)의 쌍으로 구성된다. 이름(key)에는 따옴표 사용이 자유롭다.

    ...javascript
    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);
    ...

    • 이름을 정할 때 my_name같은 경우 따옴표를 사용할 필요가 없지만 "my-name"의 경우에는 따옴표를 사용해야 함. (자바스크립트 변수 이름 정하는 규칙에 어긋나기 때문임)




    [7] 배열 데이터를 포함하는 경우

    ...javascript
    var lecture = {
        start: '2017-09-06',
        end: '2018-01-31',
        subject: ['html', 'css', 'javascript', 'php']
    };

    //값에 접근하기
    console.log(lecture.subject[0]);

    //반복문으로 값에 접근하기
    for (var i=0; i<lecture.subject.length; i++) {
        console.log(lecture.subject[i]);
    }
    ...




    [8] JSON끼리의 중첩

    다른 JSON을 포함할 수 있다.

    ...javascript
    var point = {x: 10, y: 20};

    //중심은 point이고 반지름은 5인 원을 표현
    var circle = {
        center: point,
        radius: 5
    }

    //값의 접근
    console.log(circle.center.x);
    ...

    ...javascript
    var address = {
        postcode: '12345',
        header: '서울시 강남구 역삼동',
        footer: '123-45'
    };

    var member = {
        user_id: "student",
        user_name: '학생',
        addr: address
    };

    //값의 접근
    console.log(member.addr.postcode);
    ...

    위 경우를 축약)
    ...javascript
    var member = {
        user_id: 'student',
        user_name: '학생',
        addr: {
            postcode: '12345',
            header: '서울시 강남구 역삼동',
            footer: '123-45'
        }
    };
    ...




    [9] JSON이 배열에 들어가는 경우

    ...javascript
    var book1 = {
        subject: "html입문", price: '32000'
    };

    var book2 = {
        subject: "CSS활용", price: '28000'
    };

    var book3 = {
        subject: "jQuery실무", price: '47000'
    };

    var books = [book1, book2, book3];
    ...

    위 경우를 축약)
    var books =[
        { subject: "html입문", price: '32000' },
        { subject: "CSS활용", price: '28000' },
        { subject: "jQuery실무", price: '47000' }
    ];




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

    var books =[
        { subject: "html입문", price: '32000' },
        { subject: "CSS활용", price: '28000' },
        { subject: "jQuery실무", price: '47000' }
    ];

    var library = {
        name: '강남도서관',
        address: '서울시 강남구...',
        open: '오전 9시',
        close: '오후 6시',
        book_list: books
    };

    var library = {
        name: '강남도서관',
        address: '서울시 강남구...',
        open: '오전 9시',
        close: '오후 6시',
        book_list: [
            { subject: "html입문", price: '32000' },
            { subject: "CSS활용", price: '28000' },
            { subject: "jQuery실무", price: '47000' }
        ]
    };






    [11] JSON에 포함된 함수

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

    ...javascript
    var hello = function() {
        ...
    };


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

    ...javascript
    var data = {
        foo: 123,
        bar: 456
    };
    ...


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

    ...javascript
    var data = {
        foo: 123,
        bar: function() {
                ...
                //이 함수 안에서 같은 JSON에 속한 다른 자원(변수, 함수)은 this로 접근한다.
                console.log(this.foo);
            }
    };
    ...








    반응형
    저작자표시 비영리 변경금지

    'Frontend' 카테고리의 다른 글

    [jQuery] 제이쿼리 3일차 요점정리  (0) 2019.02.17
    [jQuery] 제이쿼리 2일차 요점정리  (0) 2019.02.17
    [JS] 자바스크립트 7일차 요점정리  (252) 2019.02.17
    [JS] 자바스크립트 6일차 요점정리  (251) 2019.02.17
    [JS/DOM] 바닐라 자바스크립트로 간단한 To Do List 만들어보기 - 피드백추가  (254) 2019.02.16

    RELATED POSTS MORE

    COMMENT

티스토리툴바