1주차 스터디 정리

멋쟁이 사자처럼에서도 웹에 대해 공부했지만 이번에 한이음을 하면서 스파르타 코딩에서 한번 더 웹에 대해서 배울수 있었다. 

 

HTML은 뼈대, CSS는 꾸미기 그렇다면 멋사에서는 배우지 못했던 js에 대해서 정리하고 시작하려고 한다.

자바스크립트(js)는 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어이다.

 

Q. 왜 브라우저는 Javascript만 알아들어요? HTML안에다 파이썬, Java 같은 언어를 써서 주면 안되나요?

A. 불가능한 이야기는 아닙니다. 다만, 이 "역사적인 이유 & 이미 만들어진 표준"이기 때문에, 모든 브라우저는 기본적으로 Javascript를 알아듣게 설계되어있고, 모든 웹서버는 HTML+CSS+Javascript를 주게 되어있죠.

 

• jQuery 란?
• • HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리!
    1. 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서, jQuery라는 라이브러리가 등장하게 되었다.
  • Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만
• jQuery와 Javascript - 코드 비교해보기
  • jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드입니다. 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것임을 기억해주세요! (그렇게 때문에, 쓰기 전에 "임포트"를 해야합니다!) 

  • document.getElementById("element").style.display = "none";
    //자바스크립트

  • $('#element').hide();
    //Jquery

• Ajax
  • Ajax는 jQuery를 임포트한 페이지에서만 동작 가능합니다.
  • 즉, http://google.com/ 과 같은 화면에서 개발자도구를 열면, jQuery가 임포트 되어있지 않기 때문에 아래와 같은 에러가 뜹니다.
  • Uncaught TypeError: $.ajax is not a function → ajax라는 게 없다는 뜻

  • $.ajax({
      type: "GET", // GET 방식으로 요청한다.
      url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
      data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
      success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
        console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
      }
    })