가상변수 핸들링함수 this 명령어 - 일반 함수에서는 사용 x , class함수에서만 사용!
⚡ import <- export
<script type="module"> </script> 해당 방식으로 js파일 로드함 모든 코드가 암호화됨 , script src 보다 속도는 훨씬 빠름
- ecma_3.jsp
<body><inputtype="button"value="클릭"id="btn"></body><scripttype="module">/* import를 이용하여 외부 js파일을 로드 */import a from"./ecma_3.js";
/* {} : 호출받을 함수 */import {abc,bbb} from"./ecma_3.js";
abc("홍길동"); /* 홍길동님 */document.querySelector("#btn").addEventListener("click",bbb()); /*이벤트 핸들링 호출*/</script>
- emca_3.js
var dd = "test ecma 코드";
exportdefaultconsole.log(dd); //import에서 요청한 사항을 export를 이용하여 값을 내보냄//abc 함수를 import 호출할 수 있도록 export로 설정exportfunctionabc(data){
returnconsole.log(data + "님");
}
//이벤트 핸들링 함수exportfunctionbbb(){
this.no1 = 5; //가상변수 핸들링함수 this 명령어 사용 가능this.no2 = 20;
returnconsole.log(this.no1*this.no2);
}
⚡ 인자값 활용 export에 해당 함수 인자값을 보낼 경우는 function을 선언 후 데이터값을 인자로 이관하여 전달함
- ecma_4.jsp
<body><inputtype="text"name="mid"id="mid"><inputtype="button"value="중복체크"id="btn"><br><br><!--
응용문제..
두개의 숫자를 입력받습니다
해당 입력값 범위 안에 있는 모든 값을 더하여 결과를 출력하는 es7 code를 작성하시오.
--><inputtype="text"name="num1"id="num1"><inputtype="text"name="num2"id="num2"><inputtype="button"value="전송"id="btn2"><div>결과 : <spanclass="result"></span></div></body><scripttype="module">import {idcheck,numcheck} from"./ecma_4.js?v=1";
//export에 해당 함수 인자값을 보낼 경우는 function을 선언 후 데이터값을 인자로 이관하여 전달함document.querySelector("#btn").addEventListener("click",function(){
var obj = document.getElementById("mid").value;
idcheck(obj);
});
document.querySelector("#btn2").addEventListener("click",function(){
var n1 = document.getElementById("num1").value;
var n2 = document.getElementById("num2").value;
var rs = numcheck(n1,n2);
document.querySelector(".result").innerText = rs;
});
</script>
- ecma_4.js
//이벤트 핸들링 함수로 인자값을 받아서 처리하는 함수exportfunctionidcheck(data){
if(data == ""){
alert("아이디를 입력하세요");
}else{
alert("사용 가능한 아이디입니다.");
}
}
exportfunctionnumcheck(a,b){
var sum = 0;
var w = Number(a);
while(w <= Number(b)){
sum += w;
w++;
}
return sum;
}