ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 이벤트,예외처리_210409(금)
      JAVASCRIPT 2021. 7. 22. 00:48

      EVENT

      onclick : 마우스 클릭 이벤트

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="UTF-8">
          <title>Insert title here</title>
          <script>
              window.onload = function() {
                  var header1 = document.getElementById('header1');
                  var header2 = document.getElementById('header2');
                  
                  header1.onclick = function() {
                      alert('header1을 클릭했습니다.');
                  };
                  
                  
                  function whenClick() {
                      alert('header2를 클릭했습니다.');
                  }
                              
                  header2.onclick = whenClick;
                  
                  // 이벤트를 제거
                  header2.onclick = null;
              };
          </script>
      </head>
      <body>
          <!-- h1#header{Click}*2 -->
          <h1 id="header1">Click</h1>
          <h1 id="header2">Click</h1>
          <h1 onclick="alert('header3를 클릭했습니다.')">Click</h1>
          <h1 onclick="whenClick">whenClick</h1>
      </body>
      </html>
      		 cs
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="UTF-8">
      <title>Insert title here</title>
       
      <script>
          window.onload = function() {
              document.getElementById('header').onclick = function() {
                  alert(this);
                  this.style.color = 'orange';
                  this.style.backgroundColor = 'red';
              }
       
              //이벤트 목록
              document.getElementById('header1').onclick = function(e) {
                  var event = e || window.event;
                  document.body.innerHTML = '';
                  for ( var key in event) {
                      document.body.innerHTML += '<p>' + key + ' : ' + event[key] + '</p>';
                  }
              }
          }
      </script>
      </head>
      <body>
          <h1 id="header">Click</h1>
          <h1 id="header1">Click</h1>
      </body>
      </html>
      		 cs

      onsubmit : form 태그가 전송될 때 이벤트

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="UTF-8">
          <title>Insert title here</title>
          
          <script>
          
              // 비밀번호가 같으면 '로그인성공!!!'
              // 아니면 '비밀번호가 틀립니다! 다시 입력하세요!'
              // form에서 submit버튼을 클릭하면 onsubmit이벤트가 발생
              
              window.onload = function () {
                  document.getElementById('my-form').onsubmit
                      = function () {
                          var pass = document.getElementById('pass').value;
                          var passCheck = document.getElementById('pass-check').value;
                          
                          // 비밀번호확인
                          if(pass==passCheck) {
                              document.write('<h3>로그인성공!!</h3>');
                          } else {
                              document.write('<h3>비밀번호가 틀립니다! 다시 입력하세요!!</h3>');
                          }
                  }
              }    
              
              function whenSubmit() {
                  document.write('<h3>인라인이벤트 onsubmit</h3>');
              }
          </script>
      </head>
      <body>
       
          <form action="" id="my-form">
              <label for="name">이름</label><br>
              <input type="text" id="name" name="name"><br>
              
              <label for="pass">비밀번호</label><br>
              <input type="password" id="pass" name="pass"><br>
                      
              <label for="pass-check">비밀번호확인</label><br>
              <input type="password" id="pass-check" name="pass-check"><br>
              
              <input type="submit" value="확인">    
          </form>
          
          <form onsubmit="whenSubmit()">
              <label for="name">이름</label><br>
              <input type="text" id="name" name="name"><br>
              
              <label for="pass">비밀번호</label><br>
              <input type="password" id="pass" name="pass"><br>
                      
              <label for="pass-check">비밀번호확인</label><br>
              <input type="password" id="pass-check" name="pass-check"><br>
              
              <input type="submit" value="확인">    
          </form>
      </body>
      </html>
      		 cs

      EXCEPTION ( 예외처리 )

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="UTF-8">
      <title>Insert title here</title>
       
      <script>
          window.onload = function() {
              try {
                  //willException.test(); //예외가 발생할 곳에 넣어 확인 가능
                  //var val = 10 / 0;
                  alert('정상처리')
              } catch (exception) {
                  alert('예외가 발생')
              } finally { //예외가 있던 없던 실행됨
                  alert('무조건 수행될 로직')
              }
       
          }
      </script>
       
      </head>
      <body>
       
      </body>
      </html>
      		 cs

      'JAVASCRIPT' 카테고리의 다른 글

      체인코드,jQuery: filter,addclass등 함수_210412(월)  (0) 2021.07.22
      jQuery:선택자,ready(),val(),setTimeout(),each()_210409(금)  (0) 2021.07.22
      배열,객체,BOM,DOM_210408(목)  (0) 2021.07.22
      해지구달&랜덤영어날라다니기 실습_210409(금)  (0) 2021.07.22
      형변환,함수,객체,BOM_210407(수)  (0) 2021.07.22

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바