JavaScript

What is JavaScript?

JS는 인터프리터 혹은 just-in-time 컴파일 프로그래밍 언어로, 일급 함수를 지원합니다. 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립트 언어이지만, Node.js처럼 많은 비 브라우저 환경에서도 사용하고 있습니다.

프로토타입 기반, 다중 패러다임, 단일 스레드, 동적 언어로, 객체지향형, 명령형, 선언형(함수형 프로그래밍 등) 스타일을 지원합니다.

HTML 및 CSS는 문서에 대한 마크업을 제공하기 때문에 프로그래밍 언어가 아닌 마크업 언어라고도 합니다. 반면에 JavaScript는 수학 계산을 지원하는 동적 프로그래밍 언어로, HTML 콘텐츠를 DOM에 동적으로 추가하고, 동적 스타일 선언을 생성하고, 다른 웹사이트에서 콘텐츠를 가져오는 등의 작업을 수행할 수 있습니다.

HTML에서 JavaScript를 사용하는 방법

인라인 자바스크립트


<button onclick="alert('You just clicked a button')">Click me!</button>

내부 자바스크립트


<script>
	function(){
	    alert("I am inside a script tag")
	}
</script>

외부 자바스크립트


<!-- index.html -->
<script src="./script.js"></script>

// script.js
alert("I am inside an external file");

DOM???????????

문서 객체 모델(The Document Object Model, DOM)의 약자로, HTML, XML 문서의 프로그래밍 interface 입니다. 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당합니다. 루트에서 모든 분기까지 브라우저의 문서를 보여주는 트리 구조로 표현합니다.

쉽게 말해 DOM은 문서를 노드와 객체로 나타냅니다. 트리의 각 노드는 문서의 일부를 나타내는 개체입니다. HTML 요소의 모든 요소, 속성 및 이벤트는 DOM에 의해 개체로 구성됩니다.


<html>
  <head>
    <title>Title of document</title>
  </head>
  <body>
    <h1 style='color: red'>
      Header
    </h1>
    <a href='https://link.com'>
      Link
    </a>
  </body
</html>

웹 페이지는 일종의 문서(document)입니다. 이 문서는 웹 브라우저를 통해 그 내용이 해석되어 화면에 나타나거나 HTML 소스 자체로 나타납니다. DOM은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공합니다. DOM은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 조작할 수 있습니다.

다음과 같이 조작:

HTML 페이지에 요소(elements)를 추가

페이지에서 요소 제거

페이지의 요소 수정

요소의 스타일 변경
요소의 속성 변경

등등..

DOM은 프로그래밍 언어는 아니지만, DOM 이 없다면 자바스크립트 언어는 웹 페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 됩니다.

자바스크립트로 DOM에 접근하기

API는 DOM을 조작하는 데 사용할 수 있는 다양한 방법을 제공합니다.

document.getElementById()

이 메소드를 사용하면 id 속성이 있는 DOM에서 요소를 선택할 수 있습니다. 메서드에 전달되는 인수는 요소의 id입니다.


<body>
  <h1 id="header">Header</h1>
  <script>
    let elem = document.getElementById("header")
    elem.align = "right"
    elem.style.color = "pink"
  </script>
</body>

<script> 는 모든 요소가 로드되었는지 확인하기 위해 HTML 요소 뒤에 배치합니다. 요소가 다 생성되고 난 후에 DOM에 접근하기 때문에 불완전한 DOM을 조작할 일이 없겠죠?

스타일 속성의 값은 객체 형식으로 제공됩니다.


<tag style="property: value; property2: value">
  element
</tag>

이를 통해 CSS로 요소의 색상 속성을 조작할 수도 있습니다.

createElement(), createTextNode(), appendChild()

createElement()를 사용하면 태그 이름으로 새 요소를 만들 수 있고,

createTextNode() 는 텍스트를 만들 수 있으며 appendChild()는 요소안에 요소를 추가할 수 있습니다.


<body>
  <h1>A new element</h1>
  <script>
    let newElement = document.createElement("a")
    let newElementText = document.createTextNode("Google")
    newElement.appendChild(newElementText)
    newElement.href = "https://google.com"
    newElement.style.fontSize = "30px"
    document.body.appendChild(newElement)
  </script>
</body>