Javascript - HTML에 Javascript삽입하기 (총 정리)

728x90

Javascript 언어를 사용하는 주된 목적 중 하나는, 품질 좋은 웹 서비스를 만들고 제공하기 위해서입니다.

즉, html에서 javascript언어로 만든 코드를 실행시킬 수 있어야 합니다.

다양한 방법으로 html에서 javascript를 실행시키는 방법을 알아보도록 합시다.

대표적으로 Javascript를 html문서에 삽입하는 방법이 존재합니다.

보통 첫 번째의 경우 간단한 스크립트 거나, 해당 html문서에만 적용하는 경우 자주 사용합니다.

간단하나, 관리측면에서는 불편한 부분이 있습니다.

두 번째의 경우 하나의 파일 형태로 보관하여 개별적인 작업이나 유지보수에 용의 할 수 있습니다.

그럼 어떻게 사용하는지 알아보도록 합시다.

<script>
	/* 필요한 코드를 직접 작성 */
</script>

간단하게 해당 태그를 이용해서 삽입할 수 있습니다.

<script src="경로 위치"></script>

직접 삽입하는 방식과 똑같습니다. 단, 직접 코드를 작성하는 것이 아닌, src속성을 위용해 외부 코드 파일의 경로를 지정해 주어야 합니다.

만든 Javascript코드를 삽입하는 방법은 간단합니다. 근데 직접 삽입해서 실행하다 보면 문제가 생기는 경우가 종종 존재하곤 합니다. 문제는 삽입하는 위치가 문제일 경우가 많습니다.

따라서 위치에 따른 javascript코드가 어떻게 동작하는지 이해할 필요가 있습니다.

브라우저가 사용자에게 화면이 생성되기 전에 코드 데이터를 가지고 옵니다.

이런 특징을 정리하자면 다음과 같습니다.

반대로 렌더링이 완료된 상태에서 코드 데이터를 가지고 옵니다.

때문에 head태그 안에 삽입되는 것보다 고려해야 되는 부분이 없고 정상적으로 동작할 수 있습니다.

단, 렌더링과정 전에 동작시키고자 하는 소스코드의 경우 정상적인 동작을 하지 않을 수 있습니다.

728x90

Javascript - 슬라이드 구현 종합 (버튼,무한,자동,드래그,멈춤) (0)	2023.06.07
Javascript - typeof 연산 ( 변수의 원형 파악하기) (0)	2022.06.09
Javascript - 요소의 추가 및 제거 하기 (+ 복사) (0)	2022.06.09
Javascript - onscroll(스크롤 이벤트 / 예제 - 스크롤 위치 찾기) (0)	2022.06.08
Javascript - 요소 선택하기 2 (Element, HTMLCollection, NodeList) (0)	2022.06.07

Popular Aricle