Return to Video

The window object (Video Version)

  • 0:01 - 0:03
    웹 페이지에서 자바스크립트(JavaScript)를
    사용하여 할 수 있는
  • 0:03 - 0:06
    또 다른 재미있는 방법은 시간을 조정하는 것입니다
  • 0:06 - 0:09
    하지만 먼저
  • 0:09 - 0:10
    여러분이 알아야 할 것이 있어요
  • 0:10 - 0:12
    모든 웹페이지에서 사용할 수 있는
  • 0:12 - 0:15
    window 변수입니다
  • 0:15 - 0:18
    여기에
  • 0:18 - 0:21
    console.log(window)를 입력하고 잠깐 기다릴게요
  • 0:21 - 0:23
    dev tools 확인해보세요
  • 0:23 - 0:25
    그 안에 무엇이 들어있는지 보세요
  • 0:27 - 0:31
    보이시나요? 거대해요 많은 것을 포함하고 있습니다
  • 0:31 - 0:34
    굉장하네요
  • 0:34 - 0:37
    다른 굉장한 방법을 말해줄게요
  • 0:37 - 0:38
    제가 가장 좋아하는 방법들 중 몇 가지들입니다.
  • 0:38 - 0:41
    여러분이 해볼 수 있습니다
  • 0:41 - 0:44
    window.location은 페이지의 URL에 대한
  • 0:44 - 0:46
    많은 정보를 담고 있어요
  • 0:46 - 0:50
    한번 해봅시다
  • 0:50 - 0:52
    써보도록 하겠습니다
  • 0:52 - 0:55
    멈출 필요가 없어요
  • 0:55 - 1:00
    textContent += "The URL of this page
  • 1:00 - 1:04
    is " + window.location
  • 1:04 - 1:07
    이것은 객체이니까 접근할 수 있어야 하니
  • 1:07 - 1:09
    .href를 써주면 됩니다
  • 1:09 - 1:13
    실제로 iFramed 웹페이지의
  • 1:13 - 1:15
    URL입니다
  • 1:15 - 1:18
    또 다른 방법으로 window.navigator.userAgent를 써줄게요
  • 1:18 - 1:22
    사용자를 탐색에 관련된 것입니다
  • 1:22 - 1:28
    "The user agent is" +
  • 1:28 - 1:34
    window.navigator.userAgent:
    자 됐어요
  • 1:34 - 1:37
    userAgent 는 다소 이상하게 여기실 수 있어요
  • 1:37 - 1:40
    사람이 읽을 수 있다는 걸
  • 1:40 - 1:43
    의미하는 것이 아닙니다
  • 1:43 - 1:45
    여러 이유들과 맞지도 않고요
  • 1:45 - 1:48
    그래서 많은 웹 개발자들이
  • 1:48 - 1:51
    코드들이 무엇을 의미하는지, 무엇을 작업하고 있는지를
  • 1:51 - 1:53
    이해하기 위해 libraries를 사용합니다
  • 1:53 - 1:56
    운영체제도 마찬가지입니다
  • 1:56 - 2:01
    어렵죠 그래서 어렵지 않은 방법으로
  • 2:01 - 2:05
    window.outerWidth 와
    window.outerHeight가 있어요
  • 2:05 - 2:13
    해보도록 하죠
    "This web page is" +
  • 2:13 - 2:22
    window.outerWidth + " by " +
    window.outerHeight
  • 2:22 - 2:25
    사실은 1280 x 715 사이즈이지만
  • 2:25 - 2:26
    여러분에게 화면에 보이는 것은
  • 2:26 - 2:30
    제가 말한 사이즈와는
  • 2:30 - 2:32
    다를 겁니다
  • 2:32 - 2:34
    이제 여러분에게 조금 놀라온 것을 보여줄게요
  • 2:34 - 2:38
    코드의 windonw 부분을
  • 2:38 - 2:41
    삭제해 보겠습니다
  • 2:43 - 2:48
    여전히 동작하는 것을 보실 수 있어요
  • 2:48 - 2:51
    이것은 웹 페이지 상에 있는
  • 2:51 - 2:53
    디폴트 전역 변수 때문입니다
  • 2:53 - 2:57
    여러분이 사용하고자하는 변수를 브라우저가 탐색할 때
  • 2:57 - 2:59
    window 객체에서 찾게 됩니다
  • 2:59 - 3:02
    그리고 여러분이 전역변수를 만들 때
  • 3:02 - 3:05
    window 객체는 전역변수를 값으로
  • 3:05 - 3:08
    저장하고 있습니다
  • 3:08 - 3:10
    이것은 여러분이 별도로
  • 3:10 - 3:13
    outerWidth와 outerHeight같은 변수들을
    선언하지 않아도 된다는 뜻이 됩니다
  • 3:13 - 3:16
    window에 이미
    window.outerWidth와 window.outHeight가
  • 3:16 - 3:19
    저장되어 있어요
  • 3:19 - 3:21
    일반적으로 전역변수들을 함께 모아놓는 것은 피해야 합니다
  • 3:21 - 3:23
    전역번수들과 기존의 window에 있는 변수들이
  • 3:23 - 3:26
    서로 충돌할 수 있기 때문입니다
  • 3:26 - 3:29
    좀 더 안전하게 하려면
  • 3:29 - 3:32
    전역변수 앞에 접두어를 붙일 수 있어요
  • 3:32 - 3:36
    칸 아카데미의 경우, 우리가 만들고자 하는 어떠한 전역변수 앞에
  • 3:36 - 3:40
    KA_를 씁니다
  • 3:40 - 3:42
    좋아요 이것이 window 객체입니다
  • 3:42 - 3:44
    이제 동작시키기 위해 두 개의 기능을 어떻게
  • 3:44 - 3:48
    사용하는지 살펴보도록 합시다
Title:
The window object (Video Version)
Description:

more » « less
Video Language:
English
Duration:
03:52

Korean subtitles

Revisions