본문 바로가기

Web/Java Script

자바 스크립트 기본 실습 : Event Handler(이벤트 핸들러)

1.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바 스크립트 : Event Handler</title>

<script type="text/javascript">

        function checkFrm(){

               //window.alert("버튼클릭");

              

               //forms[0] = form 아무런 이름이 없을 경우 첫번째 form 의미

               //window.alert(document.forms[0].name.value);

              

               window.alert(document.frm1.name.value);

              

        }

        function overFrm(){

               window.alert("마우스오버");

        }

</script>

</head>

<body>

 

<form name="frm1">

        <!-- 동작기능 -->

        <!-- button : 디자인뿐. javascript 연결되어야 작동함

               button + 이벤트핸들러 + 함수(자바 스크립트)

         -->

        <input type="text" name="name" size=30       onmouseover="overFrm()"       />

       

        <input type="button" value="검색" onclick="checkFrm()"       />

 

</form>

 

</body>

</html>

 

 

 

출력물

 

 

 

 

 


2. text

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바 스크립트 : 브라우저객체[text], Event Handler</title>

 

<script type="text/javascript">

        function checkFrm(){

               document.frm1.data2.value = document.frm1.data1.value;

               //document.frm1.data2.focus();        //마우스 커서를 data2창에 위치

               document.frm1.data2.select();         //data2창의 값을 선택함

        }

       

        function eventBlur() {

               alert("포커스가 없어졌습니다.");

        }

</script>

 

</head>

<body>

 

<form name="frm1">

 

        데이터1 : <input type="text" name="data1" onblur="eventBlur()"       /><br />

        데이터2 : <input type="text" name="data2"     /><br />

       

        <input type="button" value="클릭하세요" onclick="checkFrm()"/>

 

</form>

 

</body>

</html>

 

 

 

출력물

 

 

 

 

 


3. checkbox

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바 스크립트 : 브라우저객체[checkbox], Event Handler</title>

 

<script type="text/javascript">

        function checkFrm() {

               //window.alert(document.frm1.c.checked);

               //document.frm1.c2.checked = true;

              

               //alert(document.frm1.c.length);

              

               var result = "";

               for(var i =0 ; i < document.frm1.c.length ; i++){

                       if(document.frm1.c[i].checked){

                              result += document.frm1.c[i].value + ", ";  

                       }

               }

               alert(result);

        }

</script>

 

</head>

<body>

 

<form name="frm1">

        <input type="checkbox" name="c" value="사과" /> 사과<br />

        <input type="checkbox" name="c" value="" /> <br />

        <input type="checkbox" name="c" value="복숭아" /> 복숭아<br />

        <input type="checkbox" name="c" value="" /> <br />

       

        <input type="button" value="확인" onclick="checkFrm()"/>

       

</form>

 

</body>

</html>

 

 

 

 

출력물

 

 


4. select - option

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바 스크립트 : 브라우저객체[select - option], Event Handler</title>

 

<script type="text/javascript">

        function checkFrm() {

               //alert(frm1.s.options.length);              //옵션의 갯수

               //alert(frm1.s.selectedIndex);        //선택되어 있는 옵션의 인덱스값(0 ~ i)

               alert(frm1.s.options[frm1.s.selectedIndex].text);

               //alert(frm1.s.options[frm1.s.selectedIndex].value);

        }

</script>

 

</head>

<body>

 

<form name="frm1">

        <select name="s">

               <option value="1">사과</option>

               <option value="2"></option>

               <option value="3">복숭아</option>

               <option value="4"></option>

        </select>

       

        <input type="button" value="확인" onclick="checkFrm()" />

       

</form>

 

</body>

</html>

 

 

 

 

출력물

 

 

 


5. select - option

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>자바 스크립트 : 브라우저객체[select - option], Event Handler</title>

 

<script type="text/javascript">

        function checkFrm() {

               frm1.s2.selectedIndex = frm1.s1.selectedIndex;

        }

</script>

 

</head>

<body>

 

<form name="frm1">

        <select name="s1">

               <option value="1">사과</option>

               <option value="2"></option>

               <option value="3">복숭아</option>

               <option value="4"></option>

        </select>

 

        <select name="s2">

               <option value="1">사과</option>

               <option value="2"></option>

               <option value="3">복숭아</option>

               <option value="4"></option>

        </select>

       

        <input type="button" value="확인" onclick="checkFrm()" />

       

</form>

 

 

 

</body>

</html>

 

 

 

출력물