[Javascript] html 파일에 자바스크립트 삽입하기

728x90

지난 포스트에서 hello, world를 출력했습니다. 출력하는 예제에서는 <head>~</head>부분에 <script>태그를 통해서 삽입했는데요. 이처럼 html파일에 자바스크립트파일(.js 확장자)을 삽입하는 방법들을 소개하겠습니다.

이 방법은 지난 포스트에서 했던 <script>태그를 기입하고 그 사이에 자바스크립트 코드를 기술하는 방법입니다.

<script>
	자바스크립트 코드
</script>

파일이 여러개로 나뉘지 않기 때문에 문서구조가 간단해집니다. 그러나 스크립트 내용이 길어 지면 오히려 가독성을 방해하고 복잡한 구조를 형성하기 때문에 한 줄의 간단한 코드가 아닌이상에야 사용하지 않습니다.

그래서 대부분 외부파일을 임포트하는 방식을 선호하고 권장합니다.

자바스크립트 파일을 html문서 외부에 두고 임포트하여 사용하는 방식입니다.

<script src="js파일 경로"></script>

console.log("Hello, World!");

외부 파일 임포트 방식은 다음과 같은 두가지 장점을 꼽을 수 있습니다.

1. 외부를 꾸며주는 html파일과 동작 기능을 가진 js파일의 분리로 코드의 유지보수가 쉽다.

2. 스크립트가 외부파일화 되며 html파일의 가독성이 좋아지고 파악이 쉬워진다.

참고로 스크립트 기술시 다음과 같은 상황을 주의해야합니다.

<script src="js파일 경로">
	외부 임포트 사용시 이곳의 코드는 무시됩니다!!!
</script>

src속성을 사용하는 순간 <script>태그 사이의 자바스크립트 코드는 무시되므로 두 가지를 혼용할 수는 없습니다.

728x90

밤의 공간