HTML - 정보를 표현하는 언어
CSS - 정보를 꾸며준다
JavaScript - HTML을 프로그램적으로 제어
inlien
# 위의 코드는 Hello world라는 button을 클릭했을때 이벤트가 발생하여 hello world라는 경고창을 보여주는 코드이다.
여기서 onclick=""은 HTML이고 alert('Hello world')는 Javascript이다. 이런것을 inline 방식이라고 한다.
inline 방식은 태그에 직접 자바스크립트를 기술하는 방식이다. 장점은 태그에 연관된 스크립트가 분명하게 드러난다는 점이다. 하지만 정보)(html)와 제어(javascript)가 섞여 있기 때문에 정보로서의 가치가 떨어진다.
script
# script태그를 만들어서 여기에 자바스크립트 코드를 삽입하는 방식이다. 장점은 html 태그와 js 코드를 분리할 수 있다는 점이다.
외부 파일로 분리
# 왼쪽(script.js)를 같은 폴더에 만들고 오른쪽(sample.html)을 src="./script.js"를 통해 속성으로서 완전히 분리해 놨다. 그럼 브라우저에서는 src인 script.js를 로드해서 script태그안에 그 코드내용이 있는것과 동일한 효과를 낸다. 이것은 js를 별도의 파일로 분리해 보다 엄격하게 정보(html)와 제어(javascript)를 분리할 수 있다. 하나의 js 파일을 여러 웹페이지에서 로드함으로서 js의 재활용성을 높일 수 있다. 또 캐쉬를 통해서 속도의 향상, 전송량의 경량화를 도모할 수 있다.
js파일 즉 외부로 파일을 분리 했을 때 script 파일(.js)은 head 태그 보다 <body>의 하단에 위치하는것이 더 좋은 방법이다.
'Web Hacking' 카테고리의 다른 글
| PHP (GET, POST) (0) | 2018.02.20 |
|---|---|
| PHP (0) | 2018.02.19 |
| HTML(id, class, css) (0) | 2018.02.12 |
| HTML Basic (0) | 2018.02.08 |
| 웹 서버 환경 구성(httpd) (0) | 2018.02.07 |
