1-2-3.여러 가지 예제
자바스크립트를 사용하면 실행중에 문서의 내용이나 스타일을 떡주무르듯이 마음대로 조작할 수 있으며 사용자와 상호
작용도 가능하다. 과연 어떤 동작이 가능한지 계속해서 예제를 만들어 구경해 보자. 여기서는 단지 스크립트로 어떤 작업이 가능한지 살펴보는 것뿐이며 구체적인 방법은 앞으로 지속적으로 학습할 것이다. 부담없이 실행해 보고 구경만 해 보자.
changetext.html
<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8">
<title>changetext</title>
</head>
<body>
<h1
id="para">나는 바보다.</h1>
<script>
document.getElementById("para").innerText
= "나는 천재다.";
</script>
</body>
</html>
이 예제는 실행중에 문서의 내용을 변경한다. 문단에는 "나는 바보다."라는 내용이 적혀 있다. 결과를 시원스럽게 볼 수 있도록 <p> 태그 대신 큼지막한
글꼴의 <h1> 태그를 사용했다. 이대로 출력하면
바보가 출력되겠지만 스크립트 코드로 para라는 id를 가지는
문단을 찾아 내용을 "나는 천재다."로
바꾸었다. 실행 직후에 문단의 내용이 바뀐다.
getElementById 메서드는 특정한 id를 가지는 태그를 찾는다. 이를 위해 조작할 대상 태그에 id 속성을 반드시 주어야 한다. 대상 태그를 찾은 후 innerText 속성에 값을 대입함으로서 내용을 바꾸었다. 이 예제는
실행 직후에 내용을 무조건 바꾸지만 원하는 시점에 원하는 값으로 변경할 수도 있다. 내용뿐만 아니라
스타일도 마음대로 바꿀 수 있다. 다음 예제는 문단의 색상을 변경한다.
changecolor.html
<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8">
<title>changecolor</title>
</head>
<body>
<h1
id="para" style="color:red;" >빨간색이다.</h1>
<script>
document.getElementById("para").style.color="blue";
</script>
</body>
</html>
para 문단의 색상에 인라인 스타일로 빨간색을 지정했다. 그러나 실행 직후에 스크립트가 문단의 style.color 속성에 "blue"를 대입하여 파란색으로 바꾸므로 파란색으로 출력된다. 물론 조건에 따라 필요할 때 원하는 색으로 변경할 수 있으며 색상뿐만 아니라
CSS의 거의 모든 속성을 마음대로 조작할 수 있다.
이번에는 이벤트를 처리하여 사용자와 상호 작용을 해 보자. 버튼을
배치하고 onClick 이벤트에 코드를 작성하면 실행중에 사용자의 명령을 입력받아 적당한 반응을 보일
수 있다. 다음 예제는 버튼을 누를 때 문단의 캡션을 변경한다.
fruit.html
<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8">
<title>fruit</title>
<script>
function
changeCaption(cap) {
document.getElementById("fruit").innerText
= cap;
}
</script>
</head>
<body>
<h1
id="fruit">과일</h1>
<form>
<input
type="button" value="Apple"
onClick="changeCaption('Apple')">
<input
type="button" value="Orange"
onClick="changeCaption('Orange')">
</form>
</body>
</html>
문단 하나와 버튼 두 개를 배치하고 버튼의 onClick 이벤트에서 changeCaption 함수를 호출한다. changeCaption 함수는 fruit라는 id를 가지는 문단을 찾아 인수로 전달받은 cap으로 내용을 변경한다. <body>에서 함수를 호출하므로 <head>에 함수를 미리 선언해 두는 것이 좋다.
두 버튼의 onClick 이벤트에서
changeCaption 함수를 호출하되 각 버튼에서 전달하는 인수가 다르다. 실행 직후에는 HTML 문서의 정적인 내용인 "과일"이 출력되어 있지만 실행중에 사용자가 버튼을 누르면 문단의 내용이
Apple, Orange로 토글된다.
웹 페이지가 마치 응용 프로그램처럼 사용자의 명령에 반응을 보이는 것이다. 실제
프로젝트에서는 버튼을 누를 때 다운로드를 시작한다거나 특정한 계산을 하도록 코드를 작성할 것이다. 어떤
이벤트를 어떻게 처리하는가에 따라 웹 페이지의 동작이 정의된다. 대화상자를 사용하면 사용자에게 질문을
할 수도 있고 보고 내용을 전달할 수도 있다.
jsdialog.html
<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8">
<title>jsdialog</title>
<script>
function
sayHello() {
var
who;
who
= prompt("이름을 알려 주세요", "김개똥");
alert(who
+ "씨 안녕하세요");
}
</script>
</head>
<body>
<p>버튼을
눌러 보세요.</p>
<form>
<input
type="button" value="Button" onClick="sayHello()">
</form>
</body>
</html>
버튼의 onClick 이벤트에서
sayHello 함수를 호출했다. sayHello는
prompt 함수를 호출하여 이름을 입력받는다. 브라우저는 입력을 위해 에디트 컨트롤을
가진 대화상자를 보여 주며 사용자는 여기에 원하는 이름을 입력한다.
대화상자에 이름을 입력한 후 확인 버튼을 누르면 입력된 문자열이 리턴되는데 이 값을 who 변수에 저장했다. 그리고
alert 함수로 또 다른 대화상자를 열어 who에게 간단한 인사를 했다. 입력 대화상자에서 취소 버튼을 누르면 null이 리턴되므로 원칙적으로는 who에 값이 제대로 저장되었는지 if문으로 점검해 보아야 한다.
실행중에 대화상자를 통해 사용자에게 질문을 하고 보고를 하는 상호 작용을 한 것이다. 아직 문법을 제대로 배우지 않아 간단한 동작만 해 보았는데 스크립트로 대충 어떤 처리가 가능한지 감이 올 것이다. HTML 문서와 스타일을 떡주무르듯이 마음대로 쪼물닥거릴 수 있으며 실행중에 문서를 만들어낼 수도 있다. 이런 자유로운 조작을 하기 위해 스크립트가 필요한 것이다.