6. window.open 활용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="Open" onclick="winopen();" />
    <input type="text" onkeypress="winmessage(this.value);" />
    <input type="button" value="Close" onclick="winclose();" />

    <script>
        function winopen(){
            win = window.open('open.html', 'width=300px, height=500px');
        }

        function winmessage(msg){
            win.document.getElementById('sjh').innerText=msg;
        }

        function winclose(){
            win.close();
        }
    </script>
</body>
</html>

위 코드를 살펴보면,

버튼 타입의 태그 2개와 텍스트타입의 태그 1개를 만들었다.

Open 버튼 클릭 시 onclick으로 winopen() 이라는 함수가 호출되고,

텍스트필드에서 onkeypress 를 통해 텍스트 입력 시 winmessage(this.value) 함수가 호출된다.

여기서 this.value는 텍스트필드에 입력한 값이 되며 이 내용에 대한 자세한 부분은 나중에 이벤트부분에서 설명한다.

그 다음 Close 라는 버튼 클릭 시 onclick으로 winclose() 함수가 호출된다.

winopen() 함수는,

open.html 문서를 작성한 width와 height에 맞게 새 창(window)으로 연다.

정리하면, window.open 이라는 메소드를 통해서 연 새로운 창의 window 객체가 window.open의 리턴값이 되고 그 리턴값을 win 에 넣는다.

그냥 한마디로 새로 연 open.html 의 그 새 창이 win이다 라고 보면 될 듯 하다.

(이 부분도 여기서 이해 안되도 나중에 또 자세하게..)

winmessage(msg) 함수를 보면,

텍스트필드에 어떤 값을 입력할 때 마다 winmessage의 입력값에 들어가기 때문에 그 입력값이 msg가 된다.

win.document.getElementById 는 win 객체 (window.open으로 연 open.html 이라는 새 창(window)에 대한 객체) 의 document 라는 객체의 getElementById 라고 하는 메소드를 뜻한다.

그냥 편하게 새 창에 대해서 document 라고하는 객체의 getElementById 라는 메소드 라는 정도만 생각하면 된다.

(이 부분도 이해 못해도 나중에 자세하게 다룰 것임)

getElementById("sjh") 는 sjh 이라는 ID를 가진 엘러먼트를 얻는다(?) 라는 정도로만 이해한다.

win.document.getElementById("sjh").innerText=msg 는,

win 이라는 객체에서 sjh이라는 ID를 가진 엘러먼트를 얻고 안의 텍스트를 msg 값으로 넣는다.

라는 정도로만 이해하면 되겠다.

# open.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>open.php</title>
</head>
<body>
    <div id="sjh">Hello World</div>
</body>
</html>

div 영역을 만들고 해당 ID를 sjh 으로 할당한 후 안의 내용을 Hello world라 적었다.

맨 위 html 문서를 열면 이와 같은 창이 뜨고,

Open 버튼을 클릭하면 이렇게 새 창이 열린다.

텍스트필드에 "안녕하세요" 를 입력하면,

open.html 문서의 ID가 sjh인 div영역의 텍스트가 바뀌는 것을 볼 수 있다.

(문서의 title이 open.php 인 것은 상관없음..)

close를 클릭하면 winclose() 함수가 호출되며 win 객체가 close된다.

즉, Open으로 열었던 창이 닫힌다.

'Javascript' 카테고리의 다른 글

8. jQuery 기본 사용법 (0)	2021.09.09
7. getElementsByTagName / getElementsByClassName / getElementById (0)	2021.09.08
5. window.open (0)	2021.09.06
4. location 객체 (0)	2021.09.05
3. 사용자와 커뮤니케이션[alert, confirm, prompt] (0)	2021.09.04

'Javascript' 카테고리의 다른 글

티스토리툴바