[Day40][Javascript] join / 팝업창 / 우편번호 검색

3) join

 

chap3 02.html javascript goJoin()

var nameArr = ["홍길동","이순신","윤봉길","유관순","엄정화"]
var names = nameArr.join("/"); 

console.log(names);

 

 

 

chap3 02.html javascript goJoin()

names = nameArr.join();
console.log(names);

 

 

-- join(",")과 동일하다.

 

 

chap3 02.html javascript goJoin()

names = nameArr.join("");	
console.log(names);

 

---

goSplit()에서 구했던 sum을 숫자를 세 자리마다 콤마를 찍어서 문자열 타입으로 반환시켜 보자.

 

chap3 02.html javascript goSplit()

sum = sum.toLocaleString('en');
console.log("sum의 데이터타입: " + typeof sum);
console.log(sum);

 

 

---

 

chap3 02.html body

<button type="button" onclick="goQuiz1()">퀴즈1</button>

<div id="snack">
	<span style="color: red;">새우깡,감자깡,고구마깡,빼빼로,초코파이,후레쉬베리</span>
</div>
	
<div id="result"></div>

 

 

문제1 ▷▷ 위의 snack을 퀴즈1을 누르면 div di="result"에 파란색 글씨로 순서 있는 리스트에 넣어 출력해 보자.

 

chap3 02.html javascript goQuiz1()

var divSnack = document.getElementById("snack");
		
var snackArr = divSnack.innerText.split(",");
		
var val = "<ol style='color: blue;'>";
for(var i=0; i<snackArr.length; i++) {
	val += "<li>"+snackArr[i].trim()+"</li>";
}
	val += "</ol>";
		
document.getElementById("result").innerHTML = val;

 

 

---

 

문제2 ▷▷ 총액계산하기 버튼을 누르면 총액이 나타나도록 하세요.

 

chap3 02.html body

<div>
  <ul>
      <li>모니터 : <span id="monitor">250,000</span>원</li>
      <li>휴대폰 : <span id="phone">1,200,000</span>원</li>
      <li>카메라 : <span id="camera">300,000</span>원</li>
  </ul>
  <button type="button" onclick="calcSum()">총액계산하기</button>
  <br/>
  총액 : <span id="sum">0</span>원
</div>
	
<div id="result"></div>

 

 

▷ 첫 번째 방법(id)

 

chap3 02.html javascript calcSum()
	
var moniArr = document.getElementById("monitor").innerText.split(",");
var phoArr = document.getElementById("phone").innerText.split(",");
var camArr = document.getElementById("camera").innerText.split(",");
		
var monitor = moniArr.join("");
var phone = phoArr.join("");
var camera = camArr.join("");

var result = parseInt(monitor) + parseInt(phone) + parseInt(camera);
result = result.toLocaleString('en');
		
document.getElementById("sum").innerHTML = result;

 

 

▷ 두 번째 방법(id)

 

chap3 02.html javascript calcSum()

var sum = 0;
		
for(var i=0; i<3; i++) {
	var money = document.getElementById("money"+i).innerText; 

	var strMoney = ""; 
	money = money.split(",");
	for(var j=0; j<money.length; j++) {
		strMoney += money[j];
	}
	sum += parseInt(strMoney);
}
sum = sum.toLocaleString('en');

document.getElementById("sum").innerHTML = sum;

 

▷ 세 번째 방법(Class)

 

chap3 02.html body

<div>
	<ul>
		<li>모니터 : <span class="price">250,000</span>원</li>
		<li>휴대폰 : <span class="price">1,200,000</span>원</li>
		<li>카메라 : <span class="price">300,000</span>원</li>
	</ul>
	<button type="button" onclick="calcSum2()">총액계산하기2</button>
	<br/>
	총액 : <span id="sum2">0</span>원
</div>

 

chap3 02.html javascript calcSum2()

var priceArr = document.getElementsByClassName("price");
		
var sum=0;
for(var i=0; i<priceArr.length; i++) {
	sum += parseInt(priceArr[i].innerText.split(",").join(""));	
}
sum = sum.toLocaleString('en');
document.getElementById("sum2").innerHTML = sum;

 

---

-- Folder(chap4)와 Html File(CheckBoxTest) 생성

 

 

checkbox 단일 선택

 

chap4 CheckBoxTest.html javascript 

function onlyOneCheck(obj) {	
	var checkboxArr = document.getElementsByName("product_old");
		
	for(var i=0; i<checkboxArr.length; i++){
		if(checkboxArr[i] != obj){
			checkboxArr[i].checked = false;
		}
	}
}

 

 

모두 선택 / 해제

 

chap4 CheckBoxTest.html javascript 

function fun_allCheck(bool) {
	var checkboxArr = document.getElementsByName("product_china");
		for(var i=0; i<checkboxArr.length; i++){
			checkboxArr[i].checked = bool;
		}
}

 

---

Ⅰ. 팝업창

 

-- Folder(chap5)와 Html File(01) 생성

-- chap5에 Folder(css, images) 생성

-- images에 이미지 2개(cam, monitor) 저장

-- css에 css File(style) 생성

 

chap5 01.html body

<div align="center">
	<h2 id="underline">상품선택</h2>
		
	<table>
		<tr align="center">
			<td width=50%;>
				<img class="productimg" src="images/monitor.jpg" alt="모니터" onclick="openWin('images/monitor.jpg');"/>
			</td>
				
			<td width=50%;>
				<img class="productimg" src="images/cam.jpg" alt="캠코더" onclick="openWin('images/cam.jpg');"/>
			</td>
		</tr>
			
		<tr align="center">
			<td>
				<span class="productname">LCD모니터</span>
				<span class="productprice" id="price1">200,000원</span>	
			</td>
				
			<td>
				<span class="productname">캠코더</span>
				<span class="productprice" id="price2">700,000원</span>
			</td>
		</tr>
			
		<tr align="center">
			<td>
				<label for="choiceMonitor">[선택]</label>
				<input type="radio" name="choice" id="choiceMonitor" onclick="choice('1');"/>	
			</td>
				
			<td>
				<label for="choiceCam">[선택]</label>
				<input type="radio" name="choice" id="choiceCam" onclick="choice('2');"/>	
			</td>
		</tr>
			
		<tr align="center">
			<td colspan="2">
				<span class="money">[배송비포함 주문금액]</span>
				<input type="text" id="orderPrice" size="10"/>원
			</td>
		</tr>
	</table>
		
</div>

 

chap5 01.html head

function choice(val){
		
	var strPrice="";
	switch(val){
	case "1":
		var strPrice = document.getElementById("price1").innerText.split(",").join("");
		break;
		
	case "2":
		strPrice = document.getElementById("price2").innerText.split(",").join("");
		break;
		
	default:
		break;
		
	}
		
	var price = parseInt(strPrice)+5000;
	strPrice = price.toLocaleString('en');
		
	document.getElementById("orderPrice").value = strPrice;
		
}
	
function openWin(imgFileName) {

	var win = window.open("", "myPopup", "left=100px, top=100px, width=400px, height=350px");
		
	win.document.writeln("<html>");
	win.document.writeln("<head><title>제품이미지" +imgFileName+ " 확대보기</title></head>");
	win.document.writeln("<body align='center'>");
	win.document.writeln("<img src='"+imgFileName+"'/>");
	win.document.writeln("<br/><br/><br/>");
	win.document.writeln("<button type='button' onclick='window.close();'>팝업창닫기</button>");
	win.document.writeln("</body>");
	win.document.writeln("</html>");
		
}

 

---

Ⅱ.  DAUM을 이용한 우편번호 검색

 

-- Folder(chap6)와 Html File(daumAddressSearch) chap4의 CheckBoxTest 복사하여 생성

 

chap6 daumAddressSearch head

function openDaumPOST() {
		new daum.Postcode({
			oncomplete: function(data) {
			    document.getElementById("postnum1").value = data.postcode1;
			    document.getElementById("postnum2").value = data.postcode2;
			    document.getElementById("addr1").value = data.address;
			    document.getElementById("addr2").focus();
			}
		}).open();
	}