잡동사니에도 사랑을

[21.09.13] exam15(JavaScript) - 이벤트 처리, 종류 본문

JAVA_EE/JavaScript

[21.09.13] exam15(JavaScript) - 이벤트 처리, 종류

luvforjunk 2021. 9. 14. 01:15
728x90
반응형

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

        function sum(x, y){ // 함수 생성

               return x+y;

        }

       

        function printResult() {

               var result = sum(10, 20);

              

               // span 태그 얻어오기 --> id가 question인 태그 가져오기

               var myTag = document.getElementById("question");

              

               // alert(myTag); - 주소값이 나옴

               // alert(myTag.tagName); // 명령을 치면 이 안에 있는 태그를 꺼내달라

              

               //myTag.innerText = result;

               myTag.innerHTML = "<font color='red'>" + result + "</font>";

        }

</script>

</head>

<body>

        <h1>10 + 50 = <span id="question" style="border: 1px solid red;">?</span></h1>

        <!-- button 클릭 시 JavaScript의 printResult() 호출 -->

        <input type="button" value="결과보기" onclick="javascript:printResult()" />

       

 

</body>

</html>

 

<!--

이벤트 처리

- 특정한 상황이 발생했을 때, 사용자가 정의하는 특정한 동작(함수)들을 호출되도록 하는 것.

- Javascript를 사용하는 이유는 <body> 안의 어떠한 태그를 사용자의 이벤트에 반응하도록 제어하기 위함이다.

 

(1) 이벤트 종류

1. onBlur - 문서나 윈도우, 프레임세트, 폼 요소에서 현재 입력 포커스가 사라질 때

2. onClick - 링크, 이미지맵 영역, 폼 요소가 클릭되었을 때

3. onFocus - 문서나 윈도우, 프레임세트, 폼 요소에서 현재 입력 포커스가 놓였을 때

4. onLoad - 이미지, 문서, 프레임이 로드될 때

5. onMouseOver - 태그의 요소 위로 마우스 커서가 들어갈 때

6. onMouseOut - 태그의 요소 위에서 마우스 커서가 빠져나갈 때

 

(2) 제어대상 지정

- 태그의 id로 제어할 특정 태그를 지정한다.

  document.getElementById("아이디") 로 자바스크립트로 태그를 가져온다.

 

  span태그는 inline

  - width, height X (들어오는 글자에 따라 크기가 달라진다)

 -->

 

728x90
반응형

'JAVA_EE > JavaScript' 카테고리의 다른 글

[21.09.14] exam22(JavaScript)  (0) 2021.09.14
[21.09.14] exam21(JavaScript) - 내장 객체  (0) 2021.09.14
[21.09.13] exam16 - showResult() / hideResult() / onmouseover / onmouseout  (0) 2021.09.14
[21.09.13] exam17 - var answer = eval(input);  (0) 2021.09.14
[21.09.13] exam18 - 스파게티 소스(에러가 발생하는 이유)  (0) 2021.09.14
'JAVA_EE/JavaScript' Related Articles more