Web basic - 03 jQuery, Bootstrap

Web basic - 03 jQuery, Bootstrap
JavaScript, jQuery, selector, method, 동기/비동기식 통신, 데이터형식, Bootstrap

 

jQuery : selector + method

• selector
  • 전체 선택자 *
  • 태그 선택자
  • id 선택자 - #
  • 클래스 선택자
  • 구조 선택자
  • 속성 선택자
• method
  • text(), html()
  • remove(), empty()
  • addClass()
  • append(), prepend(), after(), before()

 

05_jQuery_selector.js

// jQuery CDN을 이용했기 때문에 jQuery code를 사용할 수 있다.

function my_func() {
   // alert("버튼 클릭클릭!!")

    // 1. 전체 선택자 ( universal selector )
    $("*").css("color", "red")

    // 2. 태그 선택자 ( tag selector )
    $("li").remove()

    // 3. id selector
    $("#haha").text()   // 인자가 없으면 값을 알아오라는 의미
    $("#haha").text("제주") // 인자가 있으면 값을 변경하라는 의미

    // 4. 클래스 선택자 (class selector)
    $(".region").css("background-color", "yellow")

    // 5. 구조 선택자 (자식 선택자 혹은 후손 선택자)
    $("ol > *").css("color", "skyblue")
    $("ol > li").css("color", "steelblue")  // > 자식 선택자
    $("div > li").css("color", "pink")

    // 6. 구조 선택자 ( (형제 선택자)
    //  #haha 바로 다음 li
    $("#haha + li").remove()
    // #haha 다음에 있는 모든 li
    $("#haha ~ li").remove()

    // 7. 속성 선택자
    $("[id]").css("color", "yellow")
    $("[id=haha]").css("color", "yellow")

}

 

06_jQuery_exec.js

// <input type="button" value="클릭클릭!!"  onclick="print_text()">

function print_text() {
    // 버튼을 눌렀을 때 실행할 코드를 기술
    // alert("print_text() 함수 실행!")

    // text() - tag 사이의 문자
    console.log($("#apple").text())
    console.log($("ul > li[class]").text())

    // val()  - 사용자 입력
    console.log($("input[type=text]").val())
    console.log($("ol > li.myList:nth-child(0)").text())
    console.log($("ol > li.myList:first + li").text())
    console.log($("ol > li.myList:last").text())

    // attr() - 속성 제어 메소드
    $("input[type=text]").attr("size", 10)

}


// <select onchange="my_func()">
//     <option>사과</option>
//     <option>파인애플</option>
//     <option>참외</option>
//  </select>

function my_func() {
    // alert("과일이 바뀌었어요!!")
    // select box에서 과일이 바뀌면 실행되요!

    // 1. 선택한 과일이 어떤 과일인지 알아내야 한다.
    var fruit = $("select > option:selected").text()

    var my_list = $("ul > li")
    //my_list.each("람다함수")

    my_list.each(function(idx, item) {
        // console.log($(item).text())
        if($(item).text() == fruit) {
            $(item).css("color", "red")
        } else {
            $(item).css("color", "black")
        }
    })
}

 

07_jQuery_method.js

function insert_text() {

    // text() : 문자를 그냥 가져다 넣는다. 태그 적용 X
    // html() : text()와 동일하게 적용하는데 태그 적용 O

    // $("#myDiv").text("<h1>이것은 소리없는 아우성 </h1>")
    $("#myDiv").html("<h1>이것은 소리없는 아우성 </h1>")

}

function delete_text() {
    // $("#deleteDiv").remove()    // 자신을 포함해서 후손들도 삭제
    $("#deleteDiv").empty()        // 자신을 제외한 후손들만 삭제
}

function add_list() {

    // 없는 태그 만들기
    var my_li = $("<li>></li>").text("박길동").addClass("myStyle")


    // 2.prepend() : 자식으로 붙이고 첫번째 자식으로 붙여요.
    $("ul").prepend(my_li)

    // 3.after() : 형제로 붙이고 다음 형제로 붙여요.
    $("ul > li:nth-child(3)").after(my_li)

    // 4.before() : 형제로 붙이고 바로 이전 형제로 붙여요.
    $("ul > li:last").before(my_li)

}

 

AJAX

• 서버가 제공하는 데이터를 받아서, 그 데이터를 이용해서 화면을 제어해야 한다
  • 이때, 서버로부터 데이터를 받아오는 방법 => AJAX 처리
• AJAX는 JavaScript가 가지고 있는 서버와의 비동기 통신 방법
  • 1) 동기방식 : 프로그램 처리가 쉽다 / 비효율적
  • 2) 비동기식 : 프로그램 처리가 어렵다/ 이벤트 처리 방식이라 효율적이다.

 

데이터 형식

• - 서버가 클라이언트에게 데이터를 보내주는 형식
• 1) CSV (Comma Separted Value)
  • 예) 홍길동,20,서울,김길동,30,인천,최길동,50,부산...
  • 장점
    • 많은 양의 데이터를 처리하기에 적합
    • 부가적인 데이터가 ',' 뿐이라 상대적으로 적은 편이다.
  • 단점
    • 데이터구조를 표현하기가 쉽지 않다.
    • 결국 데이터가 변경되면 데이터를 사용하는 프로그램을 같이 변경해야 함 -> 유지보수에 문제가 발생
• 2) XML(Extended Markup Language)
  • 예) 홍길동20
    서울
    ...
  • 장점 : 데이터구조를 표현하기 좋다, 사용하기 좋다.
  • 단점 : 부가적인 데이터가 너무 많다. -> 데이터가 커지면 네트워크를 이용해서 전송하기 힘들어진다.
• 3) JSON (JavaScript Object Notation)
  • 예) { name : "홍길동", age : 20, address : "서울", ... }
  • JSON은 데이터를 표현하는 표현법.
  • (프로그램 객체x 생긴것만 자바스크립트 객체)

 

---

1. 데이터 전송 과정 - 서버쪽 프로그램이 필요

• 클라이언트에게 HTML, CSS, JavaScript로 되어있는 page를 전송한다.
• 클라이언트는 이 page에 있는 버튼을 클릭해서 특정 서버 프로그램을 호출한다.
• 받은 JSON을 적절하게 처리해서 (jQuery로) 화면을 구성
• JSON Formatter
  • https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa?hl=ko

 

2. 제공받은 데이터를 이용해서 화면을 만들어야 한다.

• Bootstrap 이용 : 개발자들이 쉽게 화면을 디자인하기 위해 사용하는 framework
• Bootstrap -> example -> dashboard.html이랑 css 파일 긁어와서 사용

 

08_bookSearch.html