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