HTML안의 JavaScript

1. inline 방식

C++의 inline함수 아니고

이렇게 input 태그의 onclick이라는 html코드 안에

alert라는 JS코드가 오는것을 inline방식이라고 하는데

이것의 장점은 태그와 연관된 스크립트가 분명하게 드러난다?

(onclick의 key값으로는 JavaScript가 오도록 약속되어있다. 이런 html 속성들이 있다)

하지만, 정보와 제어가 섞여 있기 때문에 정보로서의 가치가 떨어진다는 단점이있다.

(html은 웹사이트의 '정보'를 표현하는 언어이고 JS는 '제어'하는 언어인데)

2. script방식

장점은 html태그와 JS코드를 분리 할 수 있다는 점이다.

이런식으로 <script>와 </scirpt> 태그 사이에 JS코드가 들어간다

내용은 대충 9행에서 button은 하나 만들어줬는데 id값이 hw고 value(버튼이름)이 Hello world이다

10행에서 getElementById라는 함수를 실행하는데 id값이 hw인것을 가져온다는건데

여기서 Element는 태그랑 같은뜻이고 따라서 id값이 hw인 위에 9행의 input태그를 가져와서

document즉 문서로 함수를 실행한걸 var hw. hw라는 변수를 선언해서 담는다

그 다음줄에서 hw.addEventListener함수로 대충 click했을때

옆에 함수가 실행되도록 한다 함수내용은 경고창에 Hello world를 띄우는 함수다

결국 1번 inline 방식과 기능은 똑같다

JS코드는 여기서 별로 중요하지않고 중요한건 script태그 사이에 있는 코드들은

브라우저가 JS코드로 인식한다는거고 script 닫히는 태그를 만나면 그 이후로부터는 다시 html 코드로 해석하기 시작한다는것이다.

이렇게 html과 JS를 구별하게 되면 가독성이 좋아진다.

여기서 <script>태그는 html의 문법이다

3. 외부 파일로 분리

아예 js코드를 외부 파일로 분리해버리는 방식이다. 당연히 확장자는 .js

5행의 <script>태그의 src(source)속성은 소스파일이 어딨는 알려주는 속성으로 값으로 그 파일의 위치와 이름을 넣어주면(위치를 지정하지않으면 현재 코드파일의 폴더내에서 찾는다)

웹 브라우저한테 js소스파일이 거기있다고 알려주게되고 가져와서 2번방식과 똑같은 코드가 된다.

그리고 크롬 개발자도구의 network탭을 보게되면

이런식으로 script.html 파일이 다운받아져서 열리고 그 파일의 script태그의 src속성으로 인해

script.js파일도 다운받아졌다는것을 알 수 있다

이렇게 html과 js파일을 따로 분리하게되면

장점은 보다 엄격하게 정보(html)과 제어(js)를 분리할 수 있다.

하나의 js파일을 여러 웹페이지에서 로드함으로서

js의 재활용성과 유지보수의 편의성(중복의 제거)을 높일 수 있다.

캐쉬를 통해서 속도의 향상, 전송량의 경량화를 도모할 수 도 있다.

가령, js코드에 버그가 생겼을 때

하나의 js파일을 여러 html파일에 적용시키고 있었으므로 그 파일 하나만 고쳐주면 모든 버그가 해결되게된다

또 다운로드도 서버로부터 js파일 한개만 받으면 돼서 시간도 비용도 절약이 가능하다

이렇게 script태그의 src속성을 이용해서 js파일을 따로 빼내는 방법까지 알아봤다.

KPlay의 코딩 그리고 잡동사니