JS] 웹사이트에 자바스크립트 추가하는 법

css 를 html 웹사이트에 넣는 방법은 3가지가 있었다

 

1. in-line CSS

    html 태그에 직접 attribute를 넣는 경우

2. internal CSS

   htmldp <styles> 영역 만들고서 그 안에 attribute를 넣는 경우

3. external CSS

   새로 페이지 만들어서 효과 

 

---

 

자바스크립트도 크게 다르지 않다.

1. in-line JS

html 태그에 직접 attribute 넣기 

downside: not very modular, difficult debug, not good practice. 

그냥 in-line은 쓰지마. 

 

그래도 연습삼아서 실행해 보기 

onload: body 태그가 로드업 될 때 onload에 있는 것도 수행이 된다.

 

큰따옴표가 여러개 있으니 브라우저가 alert(노란색)를 스트링으로 

Hello(하늘색)를 코드로 인식하고 있다.

 

진짜 스트링인 Hello를 작은 따옴표로 감싸면 된다. 

 

웹사이트를 리프레쉬하니 alert가 떴다.

 

ok를 누르니 다음 라인 Hello가 떴다.

 

 

 

 

2. Internal JS

<script> 태그를 만들고 그 안에서 attributes를 만들어 준다. 

alert

 

 

 

 

 

3. External JS

external file을 만들어서 external source로 연결한다. 

 

자바스크립트 파일에서 attributes를 넣어준다. 

 

 

---

 

 

script 태그는 body 태그 맨 끝에 들어가야한다. 

 

브라우저는 위에서 아래로 한줄한줄씩 읽어간다. 

css는 html에서 head element에 들어간다. 

다른 컨텐츠보다 먼저 읽혀서 효과를 주어야하기 때문이다. 

 

script는 반대이다. 

아래 예를 들면 h1을 찾아서 Good bye로 바꾸라는 말인데,

js

결과

 

일단 script가 head element에 있으면 h1을 찾을 수 없다. 

만약 head에 있다면 에러가 뜬다.