[Javascript] document.getElementById("abc").innerHTML="" 사용법

JavaScript(자바스크림트)란

JavaScript는 모든 웹 개발자들이 반드시 배워야할 3가지 언어 중 하나이다.

● HTML은 웹페이지의 컨텐츠를 정의한다.

● CSS는 웹페이지의 레이아웃 및 디자인을 지정한다.

● JavaScript는 웹페이지의 동작을 프로그래밍 한다.

현재 JavaScript는 전 세계에서 가장 많이 사용하는 프로그래밍 언어이다.

자바스크립트 대표 예제 1번 -> document.getElementById(' ').innerHTML=' '

JavaScript는 "웹페이지의 동작을 프로그래밍 한다"는 말이 처음 접하는 사람에게는 와닿지 않는다.

자바스크립트는 사용자가 클릭, 입력 등을 하면 웹페이지의 내용, 디자인을 변경 하고 특정 결과물이 발생하도록 만들어 준다. 즉 정적인 웹페이지를 동적으로 만들어 준다.

구체적으로 느껴 보기 위해 JavaScript가 웹페이지에서 할 수 있는 대표적인 4가지 기능을 예제로 공부해 보자.

오늘은 대표 예제 1번에 대하여 기록 한다.

● 1번 ● 자바스크립트는 HTML 컨텐츠를 변경할 수 있다.

▼ 1번 풀이 ▼

<p id="abc">JavaScript는 HTML 컨텐츠를 변경할 수 있다. 아래 것을 Click !</p>

<button type="button" onclick="document.getElementById('abc').innerHTML='JavaScript can change HTML content !'">Click !</button>

* 위 코딩에서 오렌지색이 JavaScript 이다. HTML의 <button>태그 안에 자바스크립트가 삽입되어 있다.

* <button>태그는 위 그림처럼 버튼을 만들어 준다. 버튼 안에는 'Click !'라는 텍스트가 있다.

* onclick="" 속성은 사용자가 클릭 했을 때의 현상을 정의하여 준다.

* onclick="" 속성의 값으로 자바스크립트를 사용하였다.

* 자바스크립트 풀이

  - document는 HTML문서를 말한다.

  - getElementById('abc')는 아이디가 'abc'인 HTML 요소를 갖고 와라.

  - innerHTML='~~~'은 갖고 온 요소의 내용(JavaScript는 HTML 컨텐츠를 변경할 수 있다. 아래것을 Click !)을 'JavaScript can change HTML content !'라는 내용으로 변경해라.

출처: http://meaningone.tistory.com/301 [의미 하나]