export 단점 : field 안에 전역변수 사용시 핸들링이 어렵다
⚡ 인증번호 전송 es7 class로 제작
constructor : 즉시실행 메소드
get 메소드명(){} : getter
set 메소드명(){} : setter (set 굳이 안붙여도 됨)
- ecma_5.jsp
<body> 연락처 : <input type="text" id="tel1" maxlength="3"> - <input type="text" id="tel2" maxlength="4"> - <input type="text" id="tel3" maxlength="4"> <input type="button" value="인증번호 받기" id="btn"> </body> <script type="module"> import {tels} from "./ecma_5.js"; document.querySelector("#btn").addEventListener("click",function(){ this.result = new tels(); //가상변수 result로 class 호출 this.result.tel_check(); }); </script>
- ecma_5.jsexport class tels{ constructor(){ //class 호출시 즉시 실행되는 메소드 console.log('test'); } tel_check(){ this.tel1 = document.querySelector("#tel1").value; this.tel2 = document.querySelector("#tel2").value; this.tel3 = document.querySelector("#tel3").value; this.total = this.tel1 + this.tel2 + this.tel3; if(isNaN(this.total)==false){ alert("인증번호가 발송되었습니다.") this.tel_random(); //class 내 타 메소드 호출 }else{ //숫자아님 alert("정상적인 휴대폰 번호가 아닙니다."); } } tel_random(){ //난수생성 메소드 this.w = 1; this.code = ""; while(this.w<7){ this.code += Math.floor(Math.random()*10); this.w++; } console.log(this.code); } }this 사용 가능!!
⚡ 로그인 - input button type="submit" 핸들링
⭐submit 핸들링시
form에 addEventListener
function에 인자값을 필수로 입력 후 preventDefault()를 이용하여 action이 작동되지 않도록 설정함 ⭐ 필수
return false 안먹음
var,this
var은 constructor에서 전역변수로 활용 불가능하지만 가상변수는 활용 가능함
( this로 선언된 가상변수 는 static 적용된 사항과 같음! )
var일 경우 아예 class밖에 빼면 전역변수로 활용 가능
=> constructor 안에서 this 가상변수로 전역변수 선언시 아래 메소드에서 자유 자재로 가져다 사용 가능
constructor(...data)
setter역할 ( ...data : 인자값을 받겠다 => 배열로 받음)
- ecma_5.jsp
<body> <form id="frm" method="post" action="./ecmaok.do"> 아이디 : <input type="text" name="mid"><br> 패스워드 : <input type="password" name="mpass"><br> <input type="submit" value="로그인"> </form> </body> <script type="module"> import {login} from "./ecma_5.js"; //로그인 document.querySelector("#frm").addEventListener("submit",function(z){ z.preventDefault(); var mid = this.mid.value; //frm 이벤트 안에 있어서 this활용 가능 var mpass = this.mpass.value; new login(mid,mpass).login_check(); }); </script>
- ecma_5.js//로그인 class export class login{ constructor(...data){ //constructor 내에서 전역변수로 활용 - 해당 전역변수에 인자값으로 받아온 값 할당 this.mid=data[0]; this.mpass=data[1]; } login_check(){ if(this.mid =="" || this.mpass ==""){ alert("아이디 및 패스워드를 입력해주세요"); }else{ frm.submit(); } } }
'CLASS > HTLML,CSS,JS' 카테고리의 다른 글
| #11-4 / ECMA 로 data insert,select (0) | 2024.07.16 |
|---|---|
| #11-2 / ECMA Script (함수 사용법) - ES7 (1) | 2024.07.16 |
| #11-1 / ECMA Script (함수 사용법) - ES6:class,class 상속 (0) | 2024.07.16 |
| #10-2 / js중급 - 키보드 이벤트 핸들링 (0) | 2024.06.11 |
| #10-1 / js중급 - 자식노드핸들링,시간함수 (0) | 2024.06.11 |