웹페이지에 자바스크립트 적용하기 (비디오 버전)

이것처럼 기본적인 페이지는
HTML태그로 만들어져있어요

웹페이지에
스타일을 주고 싶을 때

CSS를
어떻게 넣을까요?

태그를
추가하면 돼요

그리고 브라우저가
'style'태그를 보면

CSS 처리기를 써서
그 태그를 처리해요

보통은 안에
태그를 넣어요

왜냐하면 브라우저가
스타일을 처리할 때

HTML태그가 오기 전에
처리하길 원하니까요

만약 여기 아래에
을 넣으면

'스.적.않.내'를
보게 돼요

'스타일이 적용되지
않은 내용'을요

그러면 사람들은 페이지가
벌거벗은 걸 보게 되잖아요!

원래 있어야 하는 곳으로
돌려 놓을게요

좋아요 이제 페이지에
스타일이 적용되었어요

만약 인터랙티브하게 하려면
자바스크립트를 어떻게 넣으면 될까요?

그러려면
태그를 넣으세요

태그를
넣을 가장 좋은 곳은

페이지의 가장 아래의
태그 바로 뒤에요

여기에 넣었는데
이따가 설명해줄게요

태그 안에는
무엇을 넣을 수 있을까요?

유효한 자바스크립트를 넣어요
'var four = 2+2;' 처럼요

하지만 아주
재미있지는 않아요

페이지 상에는
아무 일도 일어나지 않으니까요

칸 아카데미에서
공부하고 있다면

4가 2 더하기 2라는 건
이미 알고 있을거에요

이게 작동한다는 것을
보려면

이 코드를
써야해요

좋아요
아무 것도 안 보이죠?

아마 이 함수를 본 적이
없기 때문일 거에요

'console.log'는
특별한 함수인데

많은 자바스크립트 환경에서
사용할 수 있어요

브라우저를
포함해서요

그러면 자바스크립트 콘솔에
뭔가가 나올 거에요

여러분의 브라우저에서
이 콘솔을 찾을 수 있어요

Cmd+Opt+i나
Ctrl+Opt+i를 누르면 돼요

아니면 오른쪽 클릭해서
'요소 보기'를 눌러도 돼요

이 프로그램을 멈추고
개발자 콘솔을 띄워서

저 메시지가
나오는 걸 보세요

해봤어요?
좋아요!

이제 원하면
콘솔을 닫아도 돼요

자리를 많이
차지하고 있으니까요

약간 거슬릴 수도 있어요
쓰고있을 때 에러를 모두 보여주거든요

하지만 디버깅할 때는
좋은 도구에요

그러니까 도구 상자에
집어 넣어두세요

이제 자바스크립트로
뭔가를 해볼거에요

아직 무슨 뜻인지는 모르겠지만
몇 줄의 코드를 써볼거에요

'document.body.innerHTML =
"와! 네 페이지에 들어왔지롱!";'

어떻게 됐는지
봤어요?

페이지가 사라졌고
해커 메시지로 대체됐어요

이 코드가 어떻게 작동하는지는
다음에 알아볼 거에요

이 코드는 태그를 찾아서
그 속의 내용을 바꿨어요

이 태그를 넣었을 때
무슨 일이 일어날까요?

그리고 에
와 함께 넣는다면요?

작동하지 않을 거에요
왜일까요?

페이지는 태그를
먼저 검증하게 돼요

태그를
보기 전에 말이죠

그럼 페이지는 "앗 나는 아직
'document.body'를 보지도 못했어"

"근데 이걸 수정하려고 하다니!
그런 건 안 돼" 라고 하겠죠

그래서 태그를
페이지 마지막에 둬야해요

그래서 웹페이지가
를 먼저 보고

그 안의 내용을 모두 본 후
거기에다 뭔가를 하게 돼요

먼저 웹페이지가
존재하게 해야하는 거죠

그게 CSS와
다른 점이에요

태그는
처음에 넣어야해요

왜냐하면 CSS처리기가
스타일을 적용할 때는

아직 없는 것에도
가능하기 때문이죠

그게 보이면
적용할 거에요

하지만 자바스크립트
DOM은 그렇지 못해요

그러니까 여기 아래에
넣도록 해요

에 추가하는 것은
다음에 해볼 거에요

먼저 이걸 아래에
놓도록 해요

그러면 제가 이 부분에 대해
더 많이 설명해드릴게요