-
자바스크림트 - BOM프로그래밍/JavaScript 자바스크립트 2021. 9. 30.반응형
BOM은 브라우저 오브젝트 모델의 줄임말.
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><link rel="icon" href="data:;base64,iVBORw0KGgo="><script type="text/javascript">var win = null; // 전역 변수. window의 프로퍼티가 된다.function openWin() {var flag;var url = "https://www.naver.com";flag = "left=100, ";flag += "top=100, ";flag += "width=700, ";flag += "height=500";// open(url, winName, flag) : 새로운 창 만듬.(주소, 창이름, 속성)win = window.open(url, 'test', flag);}function closeWin() {if(win) {win.close(); // 창 닫기}win = null;}</script></head><body><h3>window 객체 - 팝업 창</h3><div><p> <a href="javascript:openWin();">팝업창열기</a> </p><p> <a href="javascript:closeWin();">팝업창닫기</a> </p></div></body></html>window 객체를 이용해서 팝업창을 열고 닫을 수 있다.
window.open(url, 팝업창 이름, 창의 속성) 을 이용해서 팝업창을 만들 수 있음.
닫을때는 win.close();
파일 2개를 가지고 해보기
ex02.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><link rel="icon" href="data:;base64,iVBORw0KGgo="><script type="text/javascript">function selectZip(zip, addr) {// opener : 현재 윈도우를 생성한 창(부모)// 선택한 우편번호와 주소를 부모창에 전달opener.myForm.zip.value = zip;opener.myForm.addr1.value = addr;opener.myForm.addr2.focus();window.close();}window.onload = function() {// opener : 부모창var s = opener.myForm.name.value + "님의 우편번호를 선택하세요";document.getElementById("zipTitle").innerHTML = s;}</script></head><body><h3 id="zipTitle"></h3><div><p> <a href="javascript:selectZip('1111', '서울')">1111-서울</a> </p><p> <a href="javascript:selectZip('2222', '서울')">2222-인천</a> </p><p> <a href="javascript:selectZip('3333', '서울')">3333-경기</a> </p><p> <a href="javascript:selectZip('4444', '서울')">4444-부산</a> </p><p> <a href="javascript:selectZip('4444', '서울')">5555-제주</a> </p></div></body></html>zip.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><link rel="icon" href="data:;base64,iVBORw0KGgo="><script type="text/javascript">function openZip() {var flag;var url = "zip.html";flag = "left=100, top=100, width=700, height=500";window.open(url, "zip", flag);}</script></head><body><div><form name="myForm"><p><input type="text" name="name" placeholder="이름"> </p><p><input type="text" name="zip" readonly="readonly" placeholder="우편번호"><button type="button" onclick="openZip();">우편번호</button><input type="text" name="addr1" readonly="readonly" placeholder="주소"><br><input type="text" name="addr2" placeholder="상세주소"><br></p><p><button type="button">확인</button></p></form></div></body></html>url 특성을 이용해서 폴더내 다른 html 파일에 접근 해본다.
window.open(url, "zip", flag); => zip.html에 접근
HTML 내용은 form 태그로 감싸준다.
form 태그의 name을 가지고 접근을 할거기 때문에 꼭 form을 써야 한다.
zip.html에서 opener라는게 나오는데 이건 부모창과 자식창의 텍스트 교환을 위해 쓰이는 놈이다.
zip.html에서 클릭을하면 그 값이 부모인 ex02.html 의 텍스트 박스로 들어가는 것.
color.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><link rel="icon" href="data:;base64,iVBORw0KGgo="><script type="text/javascript">function result() {var s = document.getElementById('color').value;opener.document.getElementById("layout").style.backgroundColor = s;window.close();}</script></head><body><div style="text-align: center;"><input type="color" id="color"><button type="button" onclick="result();">change</button></div></body></html>ex03.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><link rel="icon" href="data:;base64,iVBORw0KGgo="><script type="text/javascript">function change() {var url="color.html";var flag = "left=30,top=30,width=250,height=200";window.open(url,"test",flag);}</script></head><body><div id="layout" style="width: 300px; height: 150px; margin: 30px auto; border: 1px solid blue;"></div><hr><p style="text-align: center;"><button type="button" onclick="change()">변경</button></p></body></html>이것도 위의 예제와 마찬가지인 opener 개념이다.
변경 버튼을 누르면 color.html 이 불러와진다.(팝업창)
거기서 색을 바꾸고 변경 버튼을 누르면 result() 함수가 실행 되는데
이 result() 함수에 opener가 있어서 값을 ex03.html로 전송한다.
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><link rel="icon" href="data:;base64,iVBORw0KGgo="><script type="text/javascript">function sub() {// 이전 페이지로 돌아갈수 있다.(브라우저 뒤로가기 버튼)location.href="https://naver.com";}function sub2() {// 이전 페이지로 돌어갈수 없다.(브라우저 뒤로가기 버튼 사용 불가)location.replace("https://google.com");}</script></head><body><h3>location 객체</h3><p> <button type="button" onclick="sub();"> 네이버 </button> </p><p> <button type="button" onclick="sub2();"> 구글 </button> </p><p> <button type="button" onclick="location.href='https://daum.net';"> 다음 </button> </p></body></html>location 객체는 인터넷 창에서 뒤로가기의 기능을 담당하고 있다.
대신에 href 를 써야 뒤로가기가 가능해지고
replace를 쓰게 되면 뒤로가기가 불가능 해진다.
반응형'프로그래밍 > JavaScript 자바스크립트' 카테고리의 다른 글
자바스크립트 - 화면 좌표 찾기 (0) 2021.10.01 자바스크립트 - form에 접근하기 (0) 2021.10.01 자바스크립트 - JSON 데이터 객체로 변환하기 (0) 2021.09.30 자바스크립트 - apply / call / bind (0) 2021.09.30 자바스크립트 - 클래스 (0) 2021.09.30
