728x90
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>screen 객체</title>
</head>
<body>
<p>공지창 스크림의 중앙에 배치하기</p>
<script type="text/javascript">
function openCenter(doc, win, w, h) {
//UI 영역을 제외한 영역의 가로 너비 - 팝업창의 가로 너비/2
let left = (screen.availWidth-w)/2; //팝업창의 왼쪽 좌표
//UI 영역을 제외한 영역의 세로 너비 - 팝업창의 세로 너비/2
let top = (screen.availHeight-h)/2; //팝업창의 오른쪽 좌표
let opt = ("left = " + left + ", top = " + top + ", width = " + w + ", height = " + h);
window.open(doc, win, opt);
}
//함수 호출 : 문서명 ,창이름, 팝업창 너비, 팝업창 높이
openCenter("open_window.html", "pop", 300,300);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>현재 시간</title>
</head>
<body>
<p>현재 시각 <span id="current" class="display"></span></p>
<script type="text/javascript">
setInterval(displayNow, 1000); //1초마다 시간 계산 함수 실행
function displayNow() {
let now = new Date();
let currentTime = now.toLocaleTimeString();
document.querySelector("#current").innerHTML = currentTime;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>현재 시간</title>
</head>
<body>
<button>현재 시간 보기</button>
<script type="text/javascript">
function openCenter(doc, win, w, h) {
//UI 영역을 제외한 영역의 가로 너비 - 팝업창의 가로 너비/2
let left = (screen.availWidth-w)/2; //팝업창의 왼쪽 좌표
//UI 영역을 제외한 영역의 세로 너비 - 팝업창의 세로 너비/2
let top = (screen.availHeight-h)/2; //팝업창의 오른쪽 좌표
let opt = ("left = " + left + ", top = " + top + ", width = " + w + ", height = " + h);
window.open(doc, win, opt);
}
//함수 호출 : 문서명 ,창이름, 팝업창 너비, 팝업창 높이
openCenter("time_1.html", "pop", 300,300);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>현재 시간(공지창 호출)</title>
<style type="text/css">
#container{
width:200px;
margin : 50px auto;
}
button{
border: 1px dotted #ccc;
padding : 20px 30px;
}
</style>
</head>
<body>
<div id="container">
<button onclick="display_show()">현재 시간 보기</button></div>
<script type="text/javascript">
function display_show(){
let left = (screen.availWidth-400)/2;
let top = (screen.availHeight-200)/2;
let opt = ("left = ", left , ", top = ", top , ",width = ", 400 , ", height = ", 200);
window.open("time_2.html", "time", opt);
}
</script>
</body>
</html>문서 객체 모델(DOM)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document 객체</title>
</head>
<body>
<script type="text/javascript">
function fun1() {
alert(document.title);
}
function fun2() {
//문서제목변경 document.title변수에 값을 변경 => "문서제목"
document.title="문서제목";
}
function fun3() {
document.bgColor="yellow";
}
function fun4(a) {
alert(a);
document.bgColor=a;
}
</script>
<input type="button" value="문서제목출력" onclick="fun1()">
<input type="button" value="문서제목변경" onclick="fun2()">
<input type="button" value="배경색변경" onclick="fun3()"><br>
<input type="radio" name="ra" value="green" onclick="fun4(`green`)">green
<input type="radio" name="ra" value="skyblue" onclick="fun4(`skyblue`)">skyblue
<input type="radio" name="ra" value="pink" onclick="fun4(`pink`)">pink
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document 객체</title>
</head>
<body>
<p>1. 정적 생성 : html 문서에 태그로 직접 작성하여 생성하는 방법</p>
<h1>제목 태그1</h1>
<hr>
<p>2. 동적 생성 : 자바스크립트로 문서 객체 요소를 생성하는 방법<br>
document.write()메소드</p>
<script type="text/javascript">
document.write("<h2>제목 태그2</h2>")
</script>
<hr>
<p>createElement()메소드</p>
<script type="text/javascript">
let h2 = document.createElement("h2");
h2.innerHTML = "제목 태그3"
document.body.appendChild(h2);
</script>
</body>
</html>
728x90
'KDT > JavaScript' 카테고리의 다른 글
| 240219 자바스크립트 jQuery (0) | 2024.02.19 |
|---|---|
| 240207 자바스크립트 (0) | 2024.02.07 |
| 240205 자바스크립트 (0) | 2024.02.05 |
| 240201 자바스크립트 (0) | 2024.02.01 |
| 240131 자바스크립트 (0) | 2024.01.31 |