간단한 풀다운메뉴만들기

  안녕하세요?
  오늘은 form의 select option을 이용해서 풀다운 메뉴를 만드는 소스입니다. 풀다운메뉴란 예를들어 파일메뉴를 누르면 아래에 새파일,저장,열기등등 이렇게 다른 메뉴가 나오는 겁니다. 나중에 예제를 보시면 이해하시기 쉬울겁니다. 그럼 오늘도 소스를 보고 얘기하도록 합시다.

<script language="JavaScript">
<!--
function goTo(){
        var URL = document.form.site.options[document.form.site.selectedIndex].value;
        window.location.href = URL;
//-->
}
</script>

<form name = "form">
<select name="site" size=1 onChange ="goTo()">
<option value="">메뉴를 선택하세요
<option value="http://www.yahoo.co.kr">야후! 코리아
<option value="http://www.naver.com">네이버
<option value="http://www.dreamwiz.com">드림위즈
<option value="http://www.lycos.co.kr">라이코스 코리아
<option value="http://www.jasko.co.kr">자바스크립트 소스
</select>
</form>

중요한 부분은
function goTo(){
        var URL = document.form.site.options[document.form.site.selectedIndex].value;
        window.location.href = URL;
//-->
}
이부분인데요. URL을 선언하고 내용을 document의 form에서 여기서 form은 <form name = "form">의 name뒷부분의 form입니다. 폼의 값이죠. 이 폼은 form이라는 이름을 가지고 있다는 뜻이됩니다. 그다음에 site는 <select name="site" size=1 onChange ="goTo()">의 name="site"입니다. 즉 select박스의 이름입니다. 그 다음 options는 select아래에 option들을 얘기하고요. .value는 그 값 즉 <option value="http://www.lycos.co.kr">라이코스 코리아 이면 value의 값은 http://www.lycos.co.kr이 되겠습니다. 그 뒤에 [document.form.site.selectedIndex] 이부분은 option이 여러개 있는데 그 중에 selectedIndex즉 선택된 값의 인덱스(번호)를 가져오는 겁니다. 예를들어 yahoo.co.kr을 선택하면 그 값의 인덱스가 전달되는 겁니다. 그다음에 window.location.href=URL은 window의 location 객체입니다. 즉 위치를 나타내는 거지요. href는 주소입니다. 즉 윈도우의 주소를 URL의 값으로 하라는 겁니다. URL은 앞에서 선언하고 값을 전달받았죠. onChange ="goTo()" 에서 보면 onChange즉 값이 바뀌면 gioto()함수를 호출하라는 것입니다.

  설명이 어려웠는데 쉽게 말해서 폼에 풀다운메뉴를 만들어놓고(여기서는 콤보박스입니다) 그 값이 선택되었을때 goto함수를 호출해서 goto함수는 URL을 메뉴의 값으로 받아서 윈도우 객체를 이용해 그 값의 페이지로 이동하게 되는 겁니다.
  쉽게 설명한다고 했는데 어려우셨나요? 한번 직접 실행해보시면 이해하시기 더 빠르실 겁니다.
  그럼 실행결과를 보시면서 마치겠습니다.