JavaScript / window.open / 새 창 띄우기, 부모 창과 자식 창 사이 값 전달하기
window.open으로 새 창을 띄우고, 부모 창에서 자식 창으로, 자식 창에서 부모 창으로 값을 전달하는 방법을 정리한다.
부모 창이 parent.html, 자식 창이 child.html이다.
새 창 띄우기
문법은 다음과 같다.
window.open( url, windowName, windowFeatures );
- url : 새 창에 들어갈 문서 주소
- windowName : 윈도우 이름
- windowFeatures : 새 창의 특성
예를 들어 다음은...
window.open( "child.html", "Child", "width=400, height=300, top=50, left=50" );
child.html을 새 창으로 띄우고, 윈도우 이름은 Child, 가로 크기는 400px, 세로 크기는 300px, 위치는 화면의 위에서 50px, 왼쪽에서 50px라는 뜻이다.
새 창의 크기는 콘텐츠 영역으로, 창의 테두리, 주소 표시줄 등은 포함되지 않는다.
parent.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Parent</title>
<style>
* {
font-family: Consolas, sans-serif;
}
</style>
</head>
<body>
<h1>Parent</h1>
<p><input type="button" value="New Window" onclick="new_window();"></p>
<script>
function new_window() {
window.open(
"child.html",
"Child",
"width=400, height=300, top=50, left=50"
);
}
</script>
</body>
</html>
child.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Child</title>
<style>
* {
font-family: Consolas, sans-serif;
}
</style>
</head>
<body>
<h1>Child</h1>
</body>
</html>
화면의 가운데에 새 창 띄우기
parent.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Parent</title>
<style>
* {
font-family: Consolas, sans-serif;
}
</style>
</head>
<body>
<h1>Parent</h1>
<p><input type="button" value="New Window" onclick="new_window();"></p>
<script>
var new_window_width = 400;
var new_window_height = 300;
var positionX = ( window.screen.width / 2 ) - ( new_window_width / 2 );
var positionY = ( window.screen.height / 2 ) - ( new_window_height / 2 );
function new_window() {
window.open(
"child.html",
"Child",
"width=" + new_window_width + ", height=" + new_window_height + ", top=" + positionY + ", left=" + positionX
);
}
</script>
</body>
</html>
자식 창에서 부모 창으로 값 보내기
우편번호 조회하여 주소 입력하는 것처럼, 부모 창에서는 입력하지 못하고, 자식 창에서 조회 또는 입력한 값만 부모 창에서 사용하고 싶을 때 유용하다.
parent.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Parent</title>
<style>
* {
font-family: Consolas, sans-serif;
}
</style>
</head>
<body>
<h1>Parent</h1>
<p>
<input type="text" id="parentValue" readonly>
<input type="button" value="New Window" onclick="new_window();">
</p>
<script>
function new_window() {
window.open(
"child.html",
"Child",
"width=400, height=300, top=50, left=50"
);
}
</script>
</body>
</html>
child.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Child</title>
<style>
* {
font-family: Consolas, sans-serif;
}
</style>
</head>
<body>
<h1>Child</h1>
<p>
<input type="text" id="childValue">
<input type="button" value="Send Value" onclick="sendValue();">
</p>
<script>
function sendValue() {
window.opener.document.getElementById( "parentValue" ).value = document.getElementById( "childValue" ).value;
window.close();
}
</script>
</body>
</html>
자식 창에서 부모 창 값 가져오기
아이디 중복 검사하는 것처럼, 부모 창에서 입력한 값을 자식 창에서 검색 또는 검증할 때 유용하다.
parent.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Parent</title>
<style>
* {
font-family: Consolas, sans-serif;
}
</style>
</head>
<body>
<h1>Parent</h1>
<p>
<input type="text" id="parentValue">
<input type="button" value="Send Value" onclick="new_window();">
</p>
<script>
function new_window() {
window.open(
"child.html",
"Child",
"width=400, height=300, top=50, left=50"
);
}
</script>
</body>
</html>
child.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Child</title>
<style>
* {
font-family: Consolas, sans-serif;
}
</style>
</head>
<body>
<h1>Child</h1>
<p>
<input type="text" id="childValue">
</p>
<script>
document.getElementById( "childValue" ).value = window.opener.document.getElementById( "parentValue" ).value;
</script>
</body>
</html>
JavaScript / 요소 추가하기 / .createElement(), .createTextNode(), .appendChild()
자바스크립트를 이용하여 문서에 HTML 요소를 추가할 수 있습니다. 이 때 필요한 자바스크립트 속성은 다음과 같습니다. .createElement() .createTextNode() .appendChild() .createElement()는 요소를 만듭니다. 예를 들어 .createElement( 'h1' ) 은 다음과 같은 코드를 생성합니다. <h1></h1> .createTextNode()는 선택한 요소에 텍스트를 추가합니다. 예를 들어 .createTextNode( 'My Text' ) 는 My Text라는 문자열을 만듭니다. .appendChild()는 선택한 요소 안에 자식 요소를 추가합니다. 다음은 Click이라는 텍스트를 가진 button 요소를 추가하는 예제입니다. <!doctype html> <html ...
JavaScript / Object / document.writeln()
.writeln() .writeln()은 문서에 문자, 코드 등을 쓰는 메서드입니다. .write()와 다른 점은 줄바꿈 기호가 들어간다는 것입니다. 예제 .writeln()에는 줄바꿈 기호가 들어갑니다. 하지만 HTML 특성 상 한 칸 띄어쓴 것처럼 보입니다. pre 태그로 감싸면 줄바꿈이 제대로 표현됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <p><strong>document.write</strong></p> <script> document.write( ...
JavaScript / 대화상자 / Alert, Confirm, Prompt
자바스크립트에서 대화상자는 세가지가 있습니다. Alert, Confirm, Prompt로, 새 창을 띄운다는 점은 같으나 역할이 다릅니다. Alert Alert는 단순히 메시지를 전달하는 역할만 합니다. 반환하는 값이 없습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript | alert</title> <script> alert( 'Lorem ipsum dolor' ); ...
Uncategorized html5shiv - IE 8 이하에서 HTML5 태그 지원하게 해주는 라이브러리 imagesLoaded - 이미지가 로드되었음을 감지하는 라이브러리 Masonry - 벽돌 쌓기 모양으로 요소를 배열해주는 라이브러리 Respond.js - IE8 이하에서 미디어 쿼리(Media Query)를 사용하게 해주는 라이브러리 turn.js - 책장을 넘기는 듯한 플립(flip) 효과를 만들어 주는 라이브러리
JavaScript / Object / Date / 당월 말일 구하는 방법
다음은 2022년 3월 1일이다. Date( 2022, 2, 1 ) 날짜 자리에 0이 들어가면 전달 말일이다. 즉 다음은 2022년 2월 28일이다. Date( 2022, 2, 0 ) 이를 이용하여 현재 달의 말일을 구할 수 있다. 다음은 오늘 날짜를 출력하는 것이고... <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> ...
JavaScript / Object / Array.splice() / 배열에서 특정 범위의 값들을 추출하고, 그 자리에 새로운 값을 넣는 속성
.splice() .splice()는 배열에서 특정 범위의 값들을 추출하고, 그 자리에 새로운 값을 넣습니다. 문법 array.splice( start, count ) 예를 들어 jbAry.splice( 1, 2 )는 jbAry 배열의 두번째 값부터 2개를 추출합니다. array.splice( start, count, value1, value2, ... ) 예를 들어 jbAry.splice( 1, 2, 'abc', 'def' )는 jbAry 배열의 두번째 값부터 2개를 추출하고, 그 자리에 abc, def 두 값을 ...
JavaScript / Object / Screen / 화면 정보 가져오는 객체
Screen Screen은 화면 정보를 가져오는 객체입니다. 속성은 다음과 같습니다. screen.width 화면의 가로 크기를 가져옵니다. screen.height 화면의 세로 크기를 가져옵니다. screen.availWidth 작업 표시줄이 차지하는 부분을 제외한 가로 크기를 가져옵니다. screen.availHeight 작업 표시줄이 차지하는 부분을 제외한 세로 크기를 가져옵니다. screen.colorDepth screen.pixelDepth IE는 버전 10 이상에서 사용할 수 있습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> ...
JavaScript / Object / String.substring() / 문자열 추출하는 메서드
.substring() .substring()은 문자열에서 특정 부분만 골라낼 때 사용하는 메서드입니다. 문법 string.substring( start, end ) start와 end로 문자열에서 골라낼 부분의 처음과 끝을 지정합니다. 예를 들어 var str = '123456789'; document.write( str.substring( 1, 4 ) ); 는 234를 출력합니다. start 값은 필수이며, end 값이 지정되지 않으면 문자열의 끝까지를 의미합니다. 예제 1 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
JavaScript / Plugin / Swiper / 슬라이더 플러그인
Swiper는 널리 사용되는 슬라이더 플러그인 중의 하나입니다. 다양한 옵션을 제공하며, 해상도에 따라 다른 옵션을 줄 수 있어 반응형 사이트에 사용하기 좋습니다. 홈페이지 : https://swiperjs.com/ GitHub : https://github.com/nolimits4web/swiper Swiper는 IE를 지원하지 않습니다. 만약 IE 지원이 중요하다면, IE를 지원하는 Swiper 구 버전을 사용하거나 다른 슬라이더를 사용하세요. 기본 사용법 스크립트 파일과 CSS 파일을 연결합니다. 다음은 CDN을 이용하여 연결하는 코드입니다. <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script> <link ...
변수의 값을 어떤 값 또는 다른 변수와 비교할 때 사용하는 것이 비교 연산자(Cpmparison Operator)입니다. 비교 연산자는 8가지가 있는데, 각 연산자의 의미를 알아보겠습니다. == ==는 '같다'입니다. 변수 타입과 상관없이 값이 같으면 참입니다. 즉 5 == 5 도 참이고 '5' == 5 도 참입니다. != !=는 '같지 않다'입니다. === ===는 '엄격하게 같다'입니다. '엄격하게'의 의미는 변수 타입까지 고려한다는 것입니다. 변수의 값 뿐 아니라 ...