[js] window.open() 공지사항 창 만들기

연습용365 2021. 9. 9. 16:06

홈페이지에 들어갔을 때 왼쪽 그림의 하이퍼링크를 누르면 오른쪽에 있는 공지사항 창을 뜰 수 있도록 만든다.

<new.html>

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
	body{background:yellowgreen; color: blue;}
  </style>
 </head>
 <body>
  <h3>공지사항 입니다</h3>
  <h5>이번 코로나로 인하여 원격 수업을 할 수 밖에 없습니다.<br>
  	  다소 어려울 줄 알고 있습니다.<br>
	  우리 함께 힘 냅시다.
  </h5>
 </body>
</html>

오른쪽 그림에 있는 창부터 html로 만들어준다.

<newWindow.html>

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>공지사항 창 만들기</title>
  <script LANGUAGE="Javascript">
	function openWin(){
		var mywin = window.open("new.html", "subwin", "width=300, height=200"); 
		//window객체 open은 메소드, window.open 새로운 창을 열어라
	}
  </script>
 </head>
 <body>
  <body>
	<h3>공지사항 창 열기</h3>
	<a href="Javascript:openWin()">공지사항 열기</a> <!--하이퍼링크로 함수를 부르기-->
  </body>
 </body>
</html>

1. <a>태그를 이용해 하이퍼링크 창을 만들어준다.

누르면 "Javascript:openWin()"로 이동

--> Javascript라는 LANGUAGE 안에 있는 openWin 함수

2. 새로운 창을 열기 위해서 변수를 선언한다.

기본형은 window.open("url경로", "창이름", "옵션설정");
window는 객체, open은 메소드

주의 해야 할 점은 옵션설정 쌍 따옴표 부분 안에 다 들어가야 한다.
ex) "width=300, height=200"