window open
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>새창(새탭) 열기/닫기, 새창/새탭 금지(웹브라우저 설정)</title>
<style>
#container {
width: 300px;
margin: 20px auto;
}
button {
border: 1px solid #222;
padding: 15px;
font-size: 0.8em;
margin-right: 20px;
}
</style>
</head>
<body>
<div id="container">
<button onclick="openWin()">팝업 창 열기</button>
<button onclick="closeWin()">팝업 창 닫기</button>
</div>
<script src="./js/01_window_open.js"></script>
</body>
</html>
notice html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>공지사항</title>
<style>
#content {
border: 2px double skyblue;
border-radius: 10px;
padding: 10px;
}
ul {
margin-left: 15px;
list-style-type: none;
}
ul li {
margin: 10px 5px;
}
button {
position: absolute;
bottom: 20px;
right: 20px;
}
</style>
</head>
<body>
<div id="content">
<h1>공지사항</h1>
<ul>
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
<li>항목 4</li>
<li>항목 5</li>
</ul>
<button onclick="window.close();">닫기</button>
</div>
</body>
</html>
js
// 새창(새탭) 열기/닫기, 새창/새탭 금지(웹브라우저 설정)
function openWin() {
let opt = "width=400, height=350"; // 새창 크기
// myWin : let(예약어 없음 : 전역변수, 추천하지 않음)
myWin = window.open("notice.html", "doit", opt);
}
function closeWin() {
myWin.close(); // 새창 띄우고 리턴된 변수를 사용
}
결과
공지사항 창의 닫기버튼이나 팝업 창 닫기 버튼 누르면 창이 닫힘
location back
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Location.href 함수 페이지 이동방법</title>
</head>
<body>
<button onclick="movePage()">공지사항 이동</button>
<!-- 간단한 코드라 js파일없이 아래에서 script 작성 -->
<script>
// 함수 정의
function movePage() {
// 페이지 이동
// 사용법 : location.href = "이동할페이지 내부 경로"
location.href = "./notice.html";
// // // 페이지 이동
// // // 사용법 : location.href = "이동할페이지 외부 프로토콜(http) 경로"
// // // 프로토콜(http://) : 인터넷 문서 전송 규칙
}
</script>
</body>
</html>
결과
공지사항 이동 버튼을 클릭하면 네이버 홈페이지로 이동한다
location replace
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Location.(href&replace)</title>
</head>
<body>
<button onclick="moveNaver()">네이버 이동</button>
<button onclick="moveGoogle()">구글 이동</button>
<!-- 간단한 코드라 js파일없이 아래에서 script 작성 -->
<script>
// 함수 정의
function moveNaver() {
// location.href
// 웹 브라우저 기본 기능(방문한 페이지는 자동 저장됨)
// 페이지 이동 : 이력(histoy)을 남기면서 이동(뒤로가기 가능)
// 네이버 페이지로 이동 후 뒤로가기가 가능
// 사용법 : location.href = "이동할페이지 외부 프로토콜(http) 경로"
}
// location.replace
// 페이지 이동 : 이력(histoy)을 남기지 않음(뒤로가기 불가능)
// 구글 페이지로 이동 후 뒤로가기 불가
// 사용법 : location.replace = "이동할페이지 외부 프로토콜(http) 경로"
function moveGoogle() {
}
</script>
</body>
</html>
결과
네이버 이동 버튼을 누른 후 다시 저 창으로 뒤로가기는 가능하지만
구글 이동 버튼을 누르면 뒤로가기 안됨
screen size
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>화면 해상도 사이즈 표시</title>
<style>
img {
max-width: 30vw;
height: auto;
}
</style>
</head>
<body>
<h1>화면 설명</h1>
<img src="./img/screen.png" alt="화면설명" />
<h2>screen</h2>
<h3>컴퓨터 화면의 해상도 가로, 세로를 표시합니다.</h3>
<p>
screenWidth : <span id="screenWidth"></span><br />
screenHeight : <span id="screenHeight"></span><br />
</p>
<h2>browser</h2>
<h3>웹 브라우저 화면의 가로, 세로를 표시합니다.</h3>
<p>
browserWidth : <span id="browserWidth"></span><br />
browserHeight : <span id="browserHeight"></span><br />
</p>
<h3>html 페이지의 가로, 세로를 표시합니다.</h3>
<p>
pageWidth : <span id="pageWidth"></span><br />
pageHeight : <span id="pageHeight"></span><br />
</p>
<p>
참조 :
</p>
<!-- 간단한 코드라 js파일없이 아래에서 script 작성 -->
<script>
// TODO: 모니터
// 화면의(모니터, 해상도) 가로 크기
let screenWidth = screen.width;
// 출력
document.querySelector("#screenWidth").innerHTML = screenWidth;
// 화면의 세로 크기
let screenHeight = screen.height;
// 출력
document.querySelector("#screenHeight").innerHTML = screenHeight;
// TODO: 웹브라우저
// 웹브라우저의 가로 크기(메뉴 등은 제외한 부분)
let browserWidth = window.innerWidth;
// 출력
document.querySelector("#browserWidth").innerHTML = browserWidth;
// 웹브라우저의 세로 크기(메뉴 등은 제외한 부분)
let browserHeight = window.innerHeight;
// 출력
document.querySelector("#browserHeight").innerHTML = browserHeight;
// TODO: html 문서
// html 문서의 가로 크기
let pageWidth = document.documentElement.scrollWidth;
// 출력
document.querySelector("#pageWidth").innerHTML = pageWidth;
// html 문서의 세로 크기
let pageHeight = document.documentElement.scrollHeight;
// 출력
document.querySelector("#pageHeight").innerHTML = pageHeight;
</script>
</body>
</html>
결과
https://www.delftstack.com/ko/howto/javascript/javascript-get-screen-size/
JavaScript에서 화면, 창 및 웹 페이지 크기 가져 오기
이 자습서에서는 JavaScript에서 화면, 창 및 웹 페이지 크기를 가져 오는 방법을 살펴 봅니다.
www.delftstack.com
scroll
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>지정된 좌표로 강제 이동</title>
<style>
body {
width: 100%;
/* 스크롤 가능하게 크게 세로 지정 */
height: 2000px;
}
p {
font-size: 3em;
}
button {
margin: 10px;
width: 200px;
height: 200px;
font-size: 2em;
}
</style>
</head>
<body>
<!-- 예제 : 지정된 자표로 강제 이동 -->
<button onclick="myScrollTo()">scrollTo()</button><br />
이동 좌표 : <span id="absolute"></span>
<!-- 간단한 코드라 js파일없이 아래에서 script 작성 -->
<script>
function myScrollTo() {
// 사용법 : window.scrollTo(x좌표, y좌표);
window.scrollTo(0, 100);
// window.scrollY : 웹브라우저에서 y축기준 스크롤된 위치값
document.querySelector("#absolute").innerHTML = window.scrollY;
}
</script>
</body>
</html>
결과
클릭 시
'HTML > JavaScript' 카테고리의 다른 글
| [JavaScript] children, parent, siblings, before after, remove, classList, forbidden, char num, date (0) | 2023.08.23 |
|---|---|
| [JavaScript] DOM querySelector, onclick, mouseover, setInterval, addEventListener (0) | 2023.08.22 |
| [JavaScript] 함수, 객체 (0) | 2023.08.21 |
| [JavaScript] 배열, 배열함수, 내장함수, 반복문 (if switch, for, for while, array,document) (0) | 2023.08.18 |
| [JavaScript] for문, 반복문 예제 (0) | 2023.08.17 |