1. 팝업띄우기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>부모창 웹페이지</title>
</head>
<body>
주소 : <input type="text" id="mpost" readonly>
<input type="button" value="주소찾기" onclick="address()">
<br>
<input type="text" id="road" readonly><br>
<input type="text" id="address">
</body>
<script>
function address() {
window.open("./pop.html","","width=500 height=500");
}
</script>
<script src="./js/web10.js?v=1"></script>
</html>
- window.open("팝업창 경로","","옵션(가로, 세로, 스크롤바, 팝업창 크기변경)");
- 해당 팝업에 대한 부모창, 자식창을 연결시 동일한 ip 또는 동일한 도메인에서 정상 작동
- 그 외에는 CORS로 인하여 데이터를 이관하지 못함
- 하나는 localhost, 하나는 ip주소로 해놔도 CORS 발생함 주의
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자식창 팝업페이지</title>
</head>
<body>
<ul>
<li onclick="addr('05421','서울시 마포구 자바동 21-1')">05421 서울시 마포구 자바동 21-1</li>
<li onclick="addr('05320', '서울시 마포구 자바2가 11')">05320 서울시 마포구 자바2가 11</li>
<li onclick="addr('05322', '서울시 마포구 자바3가 33')">05322 서울시 마포구 자바3가 33</li>
</ul>
<br><br><br>
<input type="button" value="창닫기" onclick="pop_close()">
</body>
<script>
function pop_close(){
self.close();
}
function addr(a, b){
window.opener.document.getElementById("mpost").value = a;
window.opener.document.getElementById("road").value = b;
self.close();
}
</script>
</html>
- self.close(); : 자신의 창을 강제종료
- window.opener : 부모창
2. 복합 함수
- 실무에서 복합함수 많이 사용 //함수끼리 카테고리화 시키는느낌
<input type="button" value="클릭" onclick="aaa()()">
<input type="button" value="변수 함수" onclick="bbb()">
<input type="button" value="가상 함수" onclick="m.c1()">
<!--
ES5 ~ ES6
class에 해당 메소드를 호출
아래는 함수가 아님!
-->
<input type="button" value="class" onclick="new ddd().kbox(10)">
//class 선언식
class box2 {
zbox() { //아래 zbox랑 다른 메소드
this.msg = "";
console.log(this.msg);
}
}
//class 표현식
//이건 함수가 아니라 클래스!
var ddd = class box { //box class
//가상 메소드
zbox() {
console.log("zbox 메소드 호출");
}
kbox(n) { //n의 매개변수를 이용하여 인수값을 받은 후 처리
var no = 10 * n;
console.log(no);
console.log("kbox 메소드 호출");
}
}
//가상함수로 핸들링 (ES5 버전) //자바의 추상클래스와 비슷함
function ccc(){
this.c1 = function(){ //가상 함수
var id = "hong";
console.log(id);
var name="이순신";
this.c2(name);
}
this.c2 = function(user){
console.log(user);
}
}
//인스턴스화
var m = new ccc(); //new ccc라는 함수의 연산자를 붙여서 생성하여 m 변수에 이관
//함수표현식
var bbb = function() { //변수명 함수 장착하여 핸들링
console.log("변수로 함수를 할당하여 출력하는 파트");
}
//함수선언문
function aaa() { //메인함수
var a = "홍길동";
var b = "실버등급";
var c = function() { //서브함수
var login = a + b;
console.log(login);
}
return c; //aaa()로 호출하고 c()리턴해도 같음
//c라는 변수 결과값을 재호출하여 사용
}
- ()() : 함수안에 함수
- 복합함수를 사용하는 3가지 방법
- 함수선언문 // aaa()
- 함수표현식 // bbb()
- 가상함수 //ccc()
- javascript의 문법이 아니라 ES5의 문법
- 인스턴스화 이후 사용
- html에서 사용할때도 다른형식으로 호출
- this의 역할 3가지 //이외 3가지 더있음
- 전역변수를 핸들링 => 참조변수(self)
- 객체 자신의 참조값을 가지고 올때 => this.value
- 함수명에 맞춰서 자신의 객체를 호출할때 => 가상함수에서 사용할때
😊응용문제
return 사용
사용자가 2개의 숫자값을 각각의 input태그에 입력합니다
해당되는 숫자 범위의 모든 합을 계산하는 return 함수를 코드로 작성하시오.
예시)
첫번째 : 5
두번째 : 10
결과 : 45
첫번째 <input type="text" id="no1"><br>
두번째 <input type="text" id="no2"><br>
<button type="button" onclick="calc()()">계산하기</button>
function calc() {
var n1 = document.getElementById("no1");
var n2 = document.getElementById("no2");
var sum = 0;
var d = function() {
for (var i = Number(n1.value); i <= Number(n2.value); i++) {
sum += i;
}
console.log(sum);
}
return d;
}
결제확인 버튼을 클릭시 return 함수를 이용하여 상품금액, 할인율, 적립금 사용을 모두 계산 후
최종 결제 금액이 출력되는 코드를 작성하시오
예시)
상품금액 (10000)
할인율 (20)%
적립금 5000
-----
최종결제금액 : 3000원
function price() {
var pr = document.getElementById("pr");
var sale = document.getElementById("sale");
var jl = document.getElementById("jl");
var total = document.getElementById("total");
var e = function() {
var totalprice = pr.value * (0.01 * (100 - sale.value)) - jl.value;
total.append(totalprice + "원");
}
return e;
}