자바스크립트(2)
웹 브라우저에 경고창(alert box) 을 띄우는 예제를 보겠습니다.
<script language = "javascript">
alert("미즐 안녕 ~~");
</script>
위 예제를 확인하시면, "미즐 안녕 ~~" 라는 경고창이 나타나는 것을 볼 수 있죠.
만일, 문자열을 두 줄로 나누어서 출력하려면 아래 예제와 같이 "새로운 줄(New Line)" 을 의미하는 "\n" 기호를 문자열 사이에 써 주면 됩니다.
<script language = "javascript">
alert("미즐홈에 오신 것을\n환영합니다.");
</script>
이제, 한 단계 더 나아가서 사용자가 웹 브라우저 상에 보이는 버튼을 눌렀을 때 "Hello World" 문자열을 경고창으로 출력해보도록 하겠습니다.
<script language = "javascript">
function output() {
var string = "Hello World";
alert(string);
}
</script>
<form name = "button_form">
<input type = "button" value = "버튼 클릭" onclick = "output()">
</form>
위 예제를 좀 살펴보면, <form> .. </form> 태그 안에 <input type = "button" ..> 와 같이 버튼(button) 객체가 쓰였죠.
그 버튼(button) 객체가 쓰여진 코드를 보면, value = "버튼 클릭" 부분이 보이는데, 이 구문은 버튼에 표시될 문자열을 나타냅니다.
그리고, onclick = "output()" 구문은 그 버튼을 눌렀을 때(onclick) 자바스크립트의 output() 함수 구문을 실행하라는 의미입니다.
따라서, 그 버튼을 누르게 되면 자바스크립트의 output() 함수가 호출이 되며, 위 자바스크립트 코드에 기술된 것처럼 먼저, string 변수에 "Hello World" 라는 문자열이 저장된 뒤, 그 string 변수값이 alert() 명령어에 의해 경고창 형식으로 출력되게 됩니다.
이제, 다음 예제로 텍스트 박스에 입력한 문자열을 alert() 명령어를 사용하여 경고창으로 출력해보도록 하겠습니다.
<script language = "javascript">
function output() {
var string = document.input_form.hobby.value;
alert(string);
}
</script>
<form name = "input_form">
취미 : <input type = "text" name = "hobby">
<input type = "button" value = "확인" onclick = "output()">
</form>
위 예제에서 살펴보아야 할 코드는 var string = document.input_form.hobby.value; 입니다.
자바스크립는 웹 문서의 모든 구성 요소를 객체(object) 라는 것으로 표현하는데, 위 코드에 보이는 "document", "input_form", "hobby" 이러한 것들이 모두 객체에 해당됩니다.
그런데, 그 객체들은 모두 동등한 레벨이 아닌 종속성을 띄고 있습니다. (어렵나요..^^;)
위 코드의 경우, document 객체가 최상위 레벨의 객체이며, input_form 은 중간 레벨의 객체, hobby 는 최하위 레벨의 객체라고 할 수 있죠.
그리고, 어떤 객체를 표시하기 위해서는 그 상위 객체 모두를 써주어야 하는데,
위에 보이는 것처럼 hobby 라는 이름을 가진 텍스트 박스의 객체를 사용하기 위해서는 그 상위 객체들인 document, input_form 을 앞에 줄줄이 써주어야 합니다.
그럼, 다시 var string = document.input_form.hobby.value; 구문을 살펴보면,
위 구문은 document 객체의 input_form 객체에 포함된 hobby 객체 즉, hobby 라는 이름을 가진 텍스트 박스의 값(value) 을 string 변수에 저장하라는 의미가 되겠죠.
따라서, 위 예제를 실행하면 사용자가 입력한 문자열을 웹 브라우저상에 경고창 형식으로 출력하게 됩니다.
마지막으로, 예제 하나 더 보겠습니다.
만일 위 예제에서 사용자가 텍스트 박스에 아무 것도 입력하지 않았을 때, "취미를 입력하세요!" 라는 경고창을 띄우고, 그렇지 않을 경우 입력한 취미를 출력해보도록 하겠습니다.
<script language = "javascript">
function output() {
var string = document.input_form.hobby.value;
if(!string) {
alert("취미를 입력하세요!");
} else {
var output = "당신의 취미는 " + string + "입니다."
alert(output);
}
}
</script>
<form name = "input_form">
취미 : <input type = "text" name = "hobby">
<input type = "button" value = "확인" onclick = "output()">
</form>