[JS] 2. HTML + Javascript(1)

✅HTML 속 Javascript

자바스크립트(Javascript)는 웹 개발을 위한 프로그래밍 언어이며 html과 연동해 사용할 수 있다. 연동 방법에는 2가지가 있다.

 

➰1. html 파일에 script 태그 사용하기

첫 번째 방법은 html 파일에 script 태그를 삽입하는 것이다. 코드 예시는 다음과 같다.

<script>
	let p = document.getElementsByTagName('p');
	function changeText0() {
    		p[0].innerHTML = "KIM";
	}
</script>

위와 같이 script 태그로 Javascript 코드를 감싸주기만 하면 되므로 쉽다. 하지만 코드가 길고 복잡해지면 코드 수정 및 재사용이 어렵기 때문에 좋은 방법이라고 할 수 없다.

 

➰2. script src를 사용하여 링크 걸기

두 번째 방법은 Javascript 파일을 따로 만든 후에 html 파일에 그 링크를 연결해 주는 것이다. 코드 예시는 다음과 같다.

<script src="./day2.js"></script>

위와 같이 외부 스크립트 파일의 주소를 명시하는 script 태그의 src 속성​ 이용하여 참조하는 것이다. 이 방법을 사용하면 이후에 코드의 길이와 상관없이 코드를 수정하기 어렵지 않다. 또한, 코드의 재사용성을 위해 파일마다 다른 기능을 갖도록 개발하는 것이 좋다.

 

✅DOM

DOM은 Document Object Model(문서 객체 모델)이라는 말의 약어이며, HTML 문서에 접근하기 위한 일종의 인터페이스이다. 이는 텍스트로 작성된 HTML 파일의 모든 요소를 정의하고 각각의 요소에 접근하는 방법을 트리 형태로 표현한 객체이다. DOM을 통해서 Javascript 파일과 html 파일이 연결되고, document의 객체는 DOM 트리의 최상단에 있는 객체에 접근하게 해준다.

<DOM>

➰DOM에 접근하기

Javascript를 통해 DOM에 접근하는 코드 예시는 다음과 같다.

document.getElementsByTagName('p');

위의 코드는 태그명이 p인 모든 태그를 선택할 수 있다.

 

또다른 코드 예시를 보자.

document.getElementByClassName('mandoooo');

​위의 코드는 클래스명이 mandoooo인 모든 클래스를 선택할 수 있다.

 

document객체에는 아래와 같이 다양한 메소드가 있다.

<document객체 메소드>