2015. 6. 13. 14:33
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 !'라는 내용으로 변경해라.
Comments, Trackbacks