[JS] 5. jQuery, UI와 API, JS 검색 키워드

참고 자료

boostcourse 생활코딩: 자바스크립트의 시작

라이브러리와 프레임워크

jQuery 설치: CDN

직접 파일을 다운 받지 않고 CDN을 이용하면 된다.

사용 예시

수업 중에 만들었던 Links 객체를 살펴보자.

var Links = {
  setColor: function (color) {
    var a_arr = document.querySelectorAll("a");
    var i = 0;
    while (i < a_arr.length) {
      a_arr[i].style.color = color;
      i++;
    }
  },
};

모든 a태그들을 선택해서 a_arr에 담은 뒤, 이 각각의 a 태그들의 문자색을 parameter의 color로 바꾸는 식으로 진행했다. 그런데 jQuery는 이를 이렇게 바꾼다.

var Links = {
  setColor: function (color) {
    // var a_arr = document.querySelectorAll('a')
    // var i = 0;
    // while(i < a_arr.length){
    //   a_arr[i].style.color=color;
    //   i++;
    // }
    $("a").css("color", color);
  },
};

충격적일 정도로 간편하고 직관적이다.

UI & API

UI

• User Interface
• 사용자가 조작할 때 사용

API

• Application Programming Interface
• 개발자가 사용자의 동작에 대응할 때 사용

검색 keyword object & method

document

• 웹 페이지에 있는 어떤 태그를 삭제하고 싶거나
• 어떤 태그에 자식 태그를 추가하고 싶을 때
• document 객체의 method를 참고할 것

DOM

• Document Object Model
• document 객체에서 원한는 것을 찾지 못했을 때 사용
• document의 넓은 범위

window

• 웹 페이지가 아닌 브라우저 자체를 조작할 때
• 현재 열려있는 웹 페이지의 주소를 확인할 때
• 새 창을 열 때
• 웹 브라우저의 화면 크기를 알아야 할 때

ajax

• webpage를 reload하지 않고 정보를 변경하고 싶을 때
• 현대 웹 어플리케이션을 만들 때 필수적

cookie

• 웹 페이지가 reload되어도 현재 상태를 유지하고 싶을 때
• 사용자를 위한 개인화된 서비스를 제공할 수 있음

offline web application

• 인터넷이 끊겨도 작동하는 웹 페이지 제작

speech

• 사용자의 음성을 인식
• 음성으로 정보를 전달하고 싶을 때

web…

• webRTC : 화상통신
• webGL : 3차원 그래픽
• webVR : 가상 현실

Chapter 05 clear