-
[Javascript] 튜토리얼 (1) - HTML 파일에서 Javascript 사용하기FrontEnd/Javascript 2021. 6. 17. 15:05
Javascript 사용법1 - Inline 으로 사용하기
In(안) + line(줄) : 한 줄 안에서 끝내기!
HTML 파일의 태그 안에서 Javascript 함수를 attribute로 사용하는 것을 말한다.
이 예시의 설명을 위해서 alert 함수(메시지와 함께 알림 모달을 띄우는 것)를 이용하였다.
onclick은 클릭했을 때 이벤트를 말하고, alert는 파라미터로 들어온 string을 모달로 띄워주는 것을 말한다. 11번째 줄과 12번째 줄의 h1은 둘다 같은 h1이지만 밑의 h1은 onclick이벤트를 Inline으로 사용하였다.
따라서 같은 h1이지만 둘째 줄의 h1만 클릭했을 때 alert가 뜨게 된다.
장점
- 아주 단순하게 javascript 효과를 넣을 수 있다.
단점
- 태그 안이 복잡해진다.
- 같은 효과를 갖는 개체가 많아지면 일일히 추가해줘야하므로 복잡하다.
- 유지보수가 어렵다.
Javascript 사용법2 - HTML 안 Script 태그로 사용하기
HTML 태그 안이 너무 더러워지는게 싫다면...
HTML 파일의 head 태그 혹은 body 태그에 script 태그를 작성한 후, 해당 태그 안에서 Javascript 코드를 작성하는 것이다. Inline과는 다르게, querySelector 등의 선택자를 통해서 node를 선택한 후 addEventListener로 이벤트를 추가하거나, setattribute를 통해서 속성을 변경하는 등 다양한 행동을 할 수 있다.
body 안에 h1태그를 생성 한 후, script안에서 해당 h1태그를 선택한 후 click 함수를 추가하는 코드이다. 18번째 줄에서 document(문서 전체)에서 h1태그를 선택한 후, addEventListener를 통해서 click event를 달아주는 모습을 볼 수 있다.
inline에서 작성한 것과 동일한 작동을 한다. 장점
- 선택자를 잘 선택하면 같은 작업을 여러 node에 일괄 적용할 수 있다.
- HTML과 Javascript 코드가 분리되면서 가독성이 좋아지고 유지보수가 좋아졌다.
단점
- javascript 코드 자체의 재사용성은 떨어진다. 즉 다른 HTML에서도 사용하고 싶으면 또 적어야 한다.
- 코드가 길어지면 script를 보기 위해 코드 스크롤을 끝까지 내려야한다.
Javascript 사용법3 - HTML 안에 Javascript 파일 불러오기
아예 Javascript 파일을 따로 관리하고 싶다면...
HTML 파일의 <body> 태그 내부 가장 하단에서 javascript 파일을 불러오는 방식으로도 javascript를 HTML 파일 안에서 사용할 수 있다. 사용법2 에서 <script>태그 안의 코드 그대로를 .js 파일에 작성하고 불러오기만 하면 된다.
h1태그 내용을 작성한 후, 이벤트는 01.js 파일에 적고 로드하는 HTML 코드이다. 동일하게 <script> 태그를 사용하지만, 태그 안에 src="<Javascript 파일 상대 경로> 를 적어주면서 load하는 방법이다. 현재 01.js 파일이 같은 디렉토리에 있기 때문에, 상대경로로는 파일 이름만 적어줘도 된다.
같은 디렉토리에 작성된 01.js 파일. 사용법2의 script 내부 내용과 완전히 동일함을 볼 수 있다. 이렇게 HTML 파일에 Javascript 파일을 연결시키면서 HTML 파일 내부에서는 Javascript 문법을 작성하지 않아도 된다.
장점
- 유지보수가 가장 쉽다.
- 같은 Javascript 코드를 사용하는 HTML 파일이 많은 경우 같은 파일을 불러오기만 해도 되므로 재사용성이 높다.
단점
- 파일이 나눠져있으므로 한눈에 보기 어렵다. (하지만 editor split으로 창을 두개 띄운다면 해결 될 것이다.)
결론: Javascript 문법을 HTML 파일 내부에서 사용하는 방법은 3가지가 있으며, 가장 체계적이고, 재사용성과 유지보수 효율을 높일 수 있는 방법은 js 파일을 따로 작성하고 로드하는 것이다.
'FrontEnd > Javascript' 카테고리의 다른 글
[javascript] javascript 개발자가 알아야 할 핵심 개념 33가지 - (2) (1) 2021.07.10 [javascript] javascript 개발자가 알아야 할 핵심 개념 33가지 - (1) (0) 2021.07.06