< Return to Video

Preventing default behavior of events (Video Version)

  • 0:00 - 0:06
    이제 '이벤트'를 가지고 할 수 있는 한가지를 더 보여드리겠습니다.
  • 0:06 - 0:10
    제가 만듣 이 웹사이트가 다음 질문에 답을 줍니다.
  • 0:10 - 0:12
    "오노우가 뭐라 말하는가?"
  • 0:12 - 0:17
    더 정확하게는 당신이 그가 말하는 것을 듣는다면 그의 소리는 어떠할까? 에 대한 답을요.
  • 0:17 - 0:21
    링크를 클릭하면 MP3 파일을 받을 수 있습니다.
  • 0:21 - 0:25
    그것은 웹브라우저에서 작동되고 그 질문에 대한 해답을 줍니다.
  • 0:25 - 0:30
    어쨌든, 사용자들이 이 웹사이트를 나가지 않기를 바랍니다.
  • 0:30 - 0:33
    이 페이지에서 바로 들을 수 있어야 합니다.
  • 0:33 - 0:38
    자바스크립으로 <오디오> 태그를 사용하여 만들 수 있습니다.
  • 0:38 - 0:41
    사용자들이 링크를 클릭하자마자
  • 0:41 - 0:45
    첫번째로, 변수에 링크를 걸어봅시다.
  • 0:45 - 0:48
    (타이핑하고 있음)
  • 0:56 - 0:58
    이제 되돌리기 함수를 정의해봅시다.
  • 0:58 - 1:04
    참 재밌을 거 같아요.
  • 1:04 - 1:10
    이 되돌리기 함수에서 우리는 오디오 태그를 다이나믹하게 만들 수 있습니다.
  • 1:10 - 1:12
    (타이핑하는 중)
  • 1:16 - 1:20
    그리고 이것은 새로운 웹브라우저에서 사용가능한 멋진 새로운 태그가 될 겁니다.
  • 1:20 - 1:26
    그리고 나서 오디오 . SRC 는 동일하게... 우리는 이것을 'href' 를 여기 위애
  • 1:26 - 1:33
    오디오 태그는 이지미 태그와 많이 흡사합니다.
  • 1:33 - 1:37
    그리고 나서 `audioEl.autoplay = true`,라고 쓰고
  • 1:37 - 1:40
    이것은 우리가 이걸 이 페이지에 덧붙이자 마자 작동되게 할 겁니다.
  • 1:40 - 1:43
    마침내, 이 페이지에 붙였습니다.
  • 1:43 - 1:46
    어디에 이 태그를 붙이느냐는 상관없습니다.
  • 1:46 - 1:48
    시각화하지 않을 거니까요.
  • 1:48 - 1:52
    이제 클릭하면 오디오를 생성하고, 소스를 셑한다음,
  • 1:52 - 1:55
    자동 플레이가 되고, 이 페이지에 붙여질 겁니다.
  • 1:55 - 1:59
    마지막으로, 링크가 클릭될 때 확실하게
  • 1:59 - 2:01
    이벤트리스너가 호출되도록 합니다.
  • 2:01 - 2:04
    (타이핑 하는 중)
  • 2:08 - 2:13
    그리고 나서, 함수이름은 건너뜁시다.
  • 2:13 - 2:17
    자, 시험해봅시다.
  • 2:17 - 2:20
    허밍
  • 2:20 - 2:21
    어떻게 되었나요?
  • 2:21 - 2:26
    저한테는 이 소리가 낮고 깊은 오노우의 툴툴거리는 소리로 들립니다.
  • 2:26 - 2:30
    링크가 여전히 새 윈도우에 오픈되었네요.
  • 2:30 - 2:33
    이상적으로는 한번 소리가 플레이되면 웹브라우저는 더이상
  • 2:33 - 2:38
    사용자가 링크되지 않게 하는 게 좋아요. 이미 들었으니까요. 이렇게 하려면
  • 2:38 - 2:43
    웹브라우저에게 이 이펄트 행위를 취소하라는 명령을 하면 됩니다.
  • 2:43 - 2:47
    자, 디펄트로 사용자가 링크를 클릭하면
  • 2:47 - 2:50
    웹브라우저는 사용자가 그 링크로 가게 합니다
  • 2:50 - 2:54
    만일 자바스크립에서 그 링크로 가는 길을 중단하려면
  • 2:54 - 2:58
    웹브라우저의 그 작동을 원치 않죠.
  • 2:58 - 3:03
    이벤트 프라퍼티에 `preventDefault()`.라는 메쏘드를 사용하여
  • 3:03 - 3:05
    중단시키라고 할 수 있습니다.
  • 3:05 - 3:10
    우리가 지나온 이벤트 압젝트에다 써야합니다.
  • 3:10 - 3:16
    여기 안에다가 `e.preventDefault();`라고 씁니다.
  • 3:16 - 3:19
    이것은 웹브라우저에게 이 디펄트행동(기본행위)를 하지말라고 명령합니다.
  • 3:19 - 3:21
    이 이벤트과 연관하여.
  • 3:21 - 3:26
    자 talk-through를 멈추고 다시 시험해봅시다.
  • 3:26 - 3:28
    지금 막 소리 들으셨죠?
  • 3:28 - 3:31
    이것은 훨씬 좋은 사용자 경험입니다.
  • 3:31 - 3:35
    이것을 "progressive enhancement"--점진적 증강, 진보적 확장 이라고 합니다.
  • 3:35 - 3:40
    웹페이지를 HTML로 디펄트 브라우저 행위로 시작하는
  • 3:40 - 3:45
    그리고 자바스크립으로 좀 더 풍부한 경험을 하게 확장하는 거죠.
  • 3:45 - 3:48
    당신은 리스너가 링크되도록 클릭하게 덧붙일 때
  • 3:48 - 3:50
    종종 이 `preventDefault`를 사용하게 됩니다
  • 3:50 - 3:54
    form processing 을 할 때도 이것을 사용할 수도 있습니다.
  • 3:54 - 3:57
    서버에 서브밑하려면,
  • 3:57 - 3:59
    브라우저가 디펄트 행동을 또 해야하기 떄문에
  • 3:59 - 4:03
    사용자 경험을 명심하고 웹사이트에서 사용자 경험이 옵션이 아니라면
  • 4:03 - 4:07
    브라우저가 디펄트 행동을 또 해야하기 떄문에
  • 4:07 - 4:09
    더 좋게 만드는 방법을 찾아내야 합니다.
  • 4:09 - 4:11
    여기서 모든 것을 가르쳐줄 수는 없지만
  • 4:11 - 4:15
    인터넷에는 수천 수만가지 답이 있습니다.
Title:
Preventing default behavior of events (Video Version)
Description:

more » « less
Video Language:
English
Duration:
04:17

Korean subtitles

Incomplete

Revisions