[javascript] 11-02 생활코딩 웹브라우저 Javascript 8강/47강

2021-11-02

11-02 공부내용

  1. script load 방법
    • inline 방법은 정보(html)와 제어를 함께 보여주기 때문에 유지보수에 불리하다.
    • HTML에서 js 로드할 때는, script를 head 태그보단 body 태그 끝 쪽에 배치시키는 것이 사용자 경험 향상을 위해 좋음. body 태그에 있는 html 태그들을 모두 렌더링해주기 때문이다
  2. Object Model
    • 자바스크립트로 제어할 수 있는 모델. 객체화 시켜놓음.
    • 브라우저가 미리 준비해놓은 객체: document. 객체가 가리키는 태그를 style이라는 프로퍼티로 css 동적으로 변경할 수 있다
  3. Browser Object Model
    • 웹브라우저의 창을 프로그래밍적으로 제어할 수 있도록 제공하는 수단. window 객체의 프로퍼티와 메소드를 공부하는 것이라 해도 과언이 아님
  4. 전역객체 window
    • DOM이건 BOM이건 js의 Array들은 다 window 객체에 속해있다.
    • 전역변수를 생성하고 그냥 함수를 선언하는 것은, window라는 전역객체의 프로퍼티 및 메소드가 되는 것이다.

Location 객체

  • 문서의 주소, url 알려주는 window 객체의 프로퍼티. 주소표시줄의 url 알아낼 수 있는 방법이 location 객체

  • 현재 윈도우의 URL 알아내기

      location.toString() // 주소표시줄 url
  location.href // 주소표시줄 url -> 이게 더 선호

      console.log(location) // location 객체에 대한 정보를 console로 띄어줌
  alert(location) // 문자화 해서 보여주기 때문에. 문자화된 현재 url 보여줌 = location.toString() 으로 동작하기 때문에.
  • URL Parsing

    • location.protocol

      http, https : 웹브라우저와 웹서버 (클라이언트 서버) 간에 통신을 주고받기 위한 일종의 규칙

    • location.host

      각자의 ip, 서버 (=컴퓨터, 서비스) 를 식별하는 고유의 주소

    • location.port

      아무것도 출력이 안되면 80 port, 8080이라던지 숫자는 컴퓨터에서 돌아가는 서버 소프트웨어를 식별하는 번호 (=서버컴터에 설치되어잇는 애플리케이션을 식별하는 번호)

    • location.pathname

      웹서버가 가지고 있는 구체적인 디렉토리 및 정보를 보여주는 이름

    • location.pathname

      정보요청하기 위해 쿼리스트링으로 전달한 값들. 물음표 뒤에 따라오는 정보들. (ex: ?id=10)

    • location.hash

      문서모델(DOM)에 특정한 위치를 지정하게 되면 #를 붙힘으로서 북마크를 지정할 수 있음

  • URL 변경하기
    • 다른 url로 이동해야할 때 사용함…! location.href = ‘다른 주소’; 와 location = ‘다른 주소’; 의 동작구현은 동일하다.
    • 다시 새로고침하고싶다면 location.reload
  • 자바스크립트를 이용해서 현재 js 가 실행되고 잇는 브라우저 제품명과 버전을 알 수 있음.

    • 깨알속 브라우저 역사.

      팀버너스리가 만들었지만 Netscape라는 회사가 브라우저를 만들어 js 를 창조했음. 근데 마소가 브라우저라는게 인터넷플랫폼 중 경쟁력이 가장 높을거라 생각해서 ie를 개발해 운영체제 번들로 넣어 배포함. 이 때 브라우저 전쟁이 일어남

      예를 들면 addEventListener 와 attachEvent… w3c라는 웹표준, 표준기구가 창설되어 어느정도의 표준 기준을 마련해주었다. 하지만 여전히 브라우저별로 간극이 있는 상황. 브라우저별로 호환되는 스펙이 달라 차이점을 해결해주고 의도한대로 동일한 품질로 보여지게 하는 작업을 크로스브라우징이라고 한다.

  • navigator.appName

    appName은 그렇게 변별력이 없다. (파폭, 사파리, 크롬 다 netscape라고 나오기 때문에)

  • navigator.userAgent (=브라우저 정보)

    웹브라우저가 웹서버에게 요청할 때, WB에 대한 정보를 전달하는데 어떤 브라우저인지 알려줌

    브라우저가 서버측으로 전송하는 user-agent http 헤더의 내용

  • navigator.platform

    브라우저가 동작하고 있는 운영체제에 대한 정보