 |
 |
홈페이지에 들어갔을 때 왼쪽 그림의 하이퍼링크를 누르면 오른쪽에 있는 공지사항 창을 뜰 수 있도록 만든다.
<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"
'개발일지 > JavaScript + jquery' 카테고리의 다른 글
| [js] frame 화면나누기 복습 및 홈페이지 연결 (0) | 2021.09.09 |
|---|---|
| [js] 현재창과 바로 전 창 닫기(self.close/opener.close) (0) | 2021.09.09 |
| [js] slect문에서 다중선택 입력 및 출력하기(multiple) (0) | 2021.09.09 |
| [js] 주민번호 13자리 체크 만들기 (0) | 2021.09.09 |
| [js] eval을 이용해서 계산기 만드는 방법 (0) | 2021.09.08 |
