수업/자바스크립트
유수봉 교수의 WEB- 보강
seung_ho_choi.s
2024. 6. 11. 13:11
728x90
[BOM] window.open()으로 새로운 창을 열고 조정해 보기
<!DOCTYPE html>
<html>
<head>
<title>[BOM] 새로운 창을 열고 조정해 보기</title>
<script>
function load(URL) {
window.open(URL, "mySon", left = 0, top = 300, width = 400, height = 300);
}
</script>
</head>
<body>
<h3>[BOM] window.open()으로 새로운 창을 열고 조정해 보기</h3>
<hr>
<a href="javascript:load('2019E7184_2.html')"> 새로운 창을 만들어 주세요.</a><br>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>[myson.html] 새로운 창을 열고 조정해 보기</title>
</head>
<body>
<h3>윈도우의 위치와 크기를 조절해 봅시다.</h3>
<hr>
<button onclick="window.moveBy(-10, 0)">left</button>
<button onclick="window.moveBy(10, 0)">right</button>
<button onclick="self.moveBy(0, -10)">up</button>
<button onclick="moveBy(0, 10)">down</button>
<button onclick="resizeBy(10, 10)">+</button>
<button onclick="resizeBy(-10, -10)">-</button>
</body>
</html>
[BOM] window.open()으로 새로운 창을 열고 조정해 보기
<html>
<head>
<style>
.depth1 {
font-size: 15pt;
color: rgb(39, 2, 248);
position: absolute;
width: 300px;
height: 300px;
background-color: red;
text-align: center;
}
.depth2 {
font-size: 15pt;
color: rgb(225, 249, 8);
position: absolute;
width: 200px;
height: 200px;
background-color: green;
}
.depth3 {
font-size: 15pt;
color: white;
position: absolute;
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<h2>Let’s go on a trip to DOM Tree.</h2>
<hr>
<!-- 빨간색 -->
<div class="depth1">
depth1<br>
<!-- 초록색 -->
<div class="depth2">
depth2<br>
<input type="button" value="# Check Point #" id="check">
<br>
<!-- 파란색 -->
<div class="depth3">
depth3<br>
</div>
</div>
</div>
</body>
<script>
var check = document.getElementById("check");
for (let elem of document.querySelectorAll('*')) {
elem.addEventListener("click",
e => {
alert(`[Capturing]\n -.TAG : ${elem.tagName}\n -.CLASS : ${elem.className}\n -.CHECK_POINT : ` + check.value);
if (elem.className == "depth2") {
check.value = "<< go >>";
alert("## Bingo !!! \n[Capturing....]\n New Value : " + check.value);
}
}, true);
elem.addEventListener("click",
e => {
alert(`[Bubbling]\n -.TAG : ${elem.tagName}\n -.CLASS : ${elem.className}\n -.CHECK_POINT : ` + check.value);
if (elem.className == "depth2") {
check.value = ">> back <<";
alert("## Bingo !!! \n[Bubbling....]\n New Value : " + check.value);
}
}
);
}
</script>
</html>
키 리스너와 키 이벤트 객체의 프로퍼티
<!DOCTYPE html>
<html>
<head>
<title>키 이벤트</title>
<script>
function whatKey(e) {
var str = "";
var div = document.getElementById("div");
str += "<br>" + e.code + " 키가 눌려졌습니다."
div.innerHTML = str; // div 객체에 문자열을 출력한다.
}
</script>
</head>
<body>
<h3>키 리스너와 키 이벤트 객체의 프로퍼티</h3>
<hr>
텍스트 창에서 키를 누르면 키 이름을 표시합니다.<br>
(Alt, Shift, Ctrl 키도 가능합니다.)
<hr>
<form>
<input type="text" style="width:250px;" value="?" id="text"
onkeyup="whatKey(event)"
onkeydown="whatKey(event)">
<hr>
<div id="div" style="background-color:skyblue; width:250px; height:50px">
</div>
</form>
</body>
</html>
마우스 관련 이벤트 리스너
<!DOCTYPE html>
<html>
<head>
<title>마우스 관련 리스너</title>
<script>
var width = 1; // 테두리 두깨
function reset(obj) { width=1; obj.style.borderWidth = width + "px"; }
function down(obj) { obj.style.fontStyle = "italic"; }
function up(obj) { obj.style.fontStyle = "normal"; }
function over(obj) { obj.style.borderColor = "violet"; }
// 테두리 폭이 0일 때 색은 보이지 않는다.
function out(obj) { obj.style.borderColor = "lightgray"; }
function wheel(e, obj) { // e는 이벤트 객체
if (e.wheelDelta < 0) { // 휠을 아래로 굴릴 때
width = width - 1; // 폭 1 감소
if (width < 0) { width = 0; } // 폭이 0보다 작아지지 않게
}
else { // 휠을 위로 굴릴 때
width++; // 폭 1 증가
}
obj.style.borderStyle = "ridge";
obj.style.borderWidth = width + "px";
}
</script>
</head>
<body>
<h3>마우스 관련 이벤트 리스너</h3>
<hr>
<div>마우스 관련
<span
onmousedown="down(this)"
onmouseup="up(this)"
onmouseover="over(this)"
onmouseout="out(this)"
onclick="reset(this)"
onwheel="wheel(event, this)"
style="display:inline-block">
<strong>이벤트</strong>
</span>가 발생합니다.
</div>
</body>
</html>
마우스 드래그 금지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>컨텐츠 복사 금지</title>
</head>
<script>
document.onselectstart = function () {
alert("마우스 드래그 금지");
return false;
} //마우스 드래그 방지
document.onclick = function () {
alert("마우스 좌클릭 금지");
return false;
} //마우스 클릭 방지
document.oncontextmenu = function () {
alert("마우스 우클릭 금지");
return false;
} // 우클릭 방지
document.ondragstart = function () {
alert("이미지 드래그 금지");
return false;
} //이미지 복사 드래그 방지
document.onkeydown = function () {
alert("키보드 사용 금지");
return false;
} //키보드 단축키 복사 방지
</script>
<body>
<h2>[javascript] 마우스/키보드 사용 금지</h2>
<hr>
<pre style="font-size : 20;">
<xmp>
1. <head></head> 사이에 script 코드를 삽입.
<script type="text/javascript">
document.oncontextmenu = function () { return false; }
</script>
2. <body> 아래에 html 코드를 삽입.
<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false"
onkeydown="return false">
3. 명칭
oncontextmenu = "return false" : 우클릭 방지
onseletstart = "return false" : 마우스 드래그 방지
ondragstart = "return false" : 이미지 복사 드래그 방지
onkeydown = "return false" : 키보드 단축키 복사 방지
</xmp>
</pre>
</body>
</html>
js_001 : 기존 페이지에 내용 변경/추가하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>최승호(2019E7184) : 기존 페이지에 내용 변경/추가하기</title>
</head>
<body>
<h3>js_001 : 기존 페이지에 내용 변경/추가하기</h3>
<hr>
▶데이터1 : <input id="data1" type="text" size="10"><br>
▶데이터2 : <input id="data2" type="text" size="10">
<hr>
<button type="button" onclick="F1()">작업1</button>
<button type="button" onclick="F2()">작업2</button>
<button type="button" onclick="F3()">작업3</button>
<button type="button" onclick="F4()">작업4</button>
<hr>
<p id="result1">result1</p>
<hr>
<p id="result2">result2</p>
<hr>
<p id="result3">result3</p>
<hr>
</body>
</html>
<script>
let data1 = document.getElementById("data1");
let data2 = document.getElementById("data2");
let result1 = document.getElementById("result1");
let result2 = document.getElementById("result2");
let result3 = document.getElementById("result3");
function F1() {
var X = "";
X += "최승호 만세<br>";
X += "데이터1 = " + data1.value;
result1.innerHTML = X;
}
function F2() {
var X = "";
if (data2.value.length > 0) {
X += "최승호 만만세<br>";
X += "데이터2 * 2 = " + (data2.value * 2);
}
else {
X += "(확인) 입력값이 없습니다.";
}
result2.innerHTML = X;
}
function F3() {
var X = "";
X += "입력 자료 확인\n---------------"
X += "\n데이터1 = " + data1.value;
X += "\n데이터2 = " + data2.value;
confirm(X);
}
function F4() {
var X = "";
X += "<table border=1>";
X += "<tr>";
X += "<td>입력값</td>";
X += "<td>";
X += prompt("데이터를 입력하시오.")
X += "</td>";
X += "</tr>";
X += "</table>";
result3.innerHTML = X;
}
</script>
jsEx_03 : 로컬 스토리지 사용하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>유수봉(202301001) - 로컬 스토리지 사용하기</title>
</head>
<body>
<h3>jsEx_03 : 로컬 스토리지 사용하기</h3>
<hr>
▶학번 : <input id="sid" type="text" size="10">
▶이름 : <input id="name" type="text" size="10"><br>
▶전공 : <input id="major" type="text" size="10">
▶교양 : <input id="culture" type="text" size="10"><br>
▷합계 : <input id="total" type="text" style="background-color: lightgray; text-align:center;" size="10">
▷평균 : <input id="average" type="text" style="background-color: lightgray; text-align:center;" size="10"><br>
<hr>
<button type="button" id="save" style="background-color: lightgreen; height: 50px; width: 111px"
onclick="store()">저장</button>
<button type="button" id="retrieve" style="background-color: lightgreen; height: 50px; width: 111px"
onclick="retrieve()">검색</button>
<button type="button" id="listAll" style="background-color: lightgreen; height: 50px; width: 111px"
onclick="listAll()">전체보기</button>
<hr>
<p id="result"></p>
<hr>
<script>
let sid = document.getElementById("sid");
let name = document.getElementById("name");
let major = document.getElementById("major");
let culture = document.getElementById("culture");
let total = document.getElementById("total");
let average = document.getElementById("average");
function store() {
if (sid.value.length > 0) {
localStorage.setItem(sid.value, name.value + "," + major.value + "," + culture.value);
}
else {
alert("<확인> 입력값이 없습니다");
}
}
function retrieve() {
var val = localStorage.getItem(sid.value);
if (val == null)
alert(sid.value + " 는 등록되어있지 않습니다.");
else {
name.value = val.split(',')[0];
major.value = val.split(',')[1];
culture.value = val.split(',')[2];
total.value = parseInt(val.split(',')[1]) + parseInt(val.split(',')[2]);
average.value = parseFloat(parseInt(total.value) / 2).toFixed(2);
}
}
function listAll() {
var str = "<table border=1>";
for (N = 0; N < localStorage.length; N++) {
str += "<tr>";
str += "<td>" + localStorage.key(N) + "</td>";
item = localStorage.getItem(localStorage.key(N));
for (L = 0; L < item.split(',').length; L++) {
str += "<td>" + item.split(',')[L] + "</td>";
}
str += "<tr>";
}
str += "</table>";
result.innerHTML = str;
}
</script>
</body>
</html>
jsEx_04 : 로컬 스토리지 사용하기2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>최승호(2019E7184) - 로컬 스토리지 사용하기-2</title>
</head>
<body>
<h3>jsEx_04 : 로컬 스토리지 사용하기-2</h3>
<hr>
▶학번 : <input id="sid" type="text" size="10">
▶이름 : <input id="name" type="text" size="10"><br>
▶전공 : <input id="major" type="text" size="10">
▶교양 : <input id="culture" type="text" size="10"><br>
▷합계 : <input id="total" type="text" style="background-color: lightgray; text-align:center;" size="10">
▷평균 : <input id="average" type="text" style="background-color: lightgray; text-align:center;" size="10"><br>
<hr>
<button type="button" id="save" style="background-color: lightgreen; height: 50px; width: 80px"
onclick="store()">저장</button>
<button type="button" id="retrieve" style="background-color: yellow; height: 50px; width: 80px"
onclick="retrieve()">조회</button>
<button type="button" id="update" style="background-color:yellow; height: 50px; width: 80px"
onclick="update()">수정</button>
<button type="button" id="remove" style="background-color: yellow; height: 50px; width: 80px"
onclick="remove()">삭제</button>
<button type="button" id="init" style="background-color: lightgreen; height: 50px; width: 80px"
onclick="init()">초기화</button>
<hr>
<button type="button" id="listAll" style="background-color: lightgreen; height: 50px; width: 80px"
onclick="listAll()">전체보기</button>
<button type="button" id="listSort" style="background-color: lightgreen; height: 50px; width: 80px"
onclick="listSort()">이름순</button>
<button type="button" id="listRank" style="background-color: yellow; height: 50px; width: 80px"
onclick="listRank()">성적순</button>
<button type="button" id="listGraph1" style="background-color: lightgreen; height: 50px; width: 80px"
onclick="listGraph1()">그래프-1</button>
<button type="button" id="listGraph2" style="background-color: yellow; height: 50px; width: 80px"
onclick="listGraph2()">그래프-2</button>
<hr>
<p id="result1"></p>
<p id="result2"></p>
<canvas id='graph' width='0' height='0' style='background-color:lightblue'>
</canvas>
<hr>
<script>
let sid = document.getElementById("sid");
let name = document.getElementById("name");
let major = document.getElementById("major");
let culture = document.getElementById("culture");
let total = document.getElementById("total");
let average = document.getElementById("average");
function store() {
if (sid.value.length > 0) {
localStorage.setItem(sid.value, name.value + "," + major.value + "," + culture.value);
result1.innerHTML = sid.value + " 의 성적 자료를 저장하였습니다.<hr>";
}
else {
alert("<확인> 입력값이 없습니다");
}
result2.innerHTML = "";
}
function retrieve() {
var val = localStorage.getItem(sid.value);
if (val == null)
alert("' " + sid.value + " ' 는 등록되어있지 않습니다.");
else {
name.value = val.split(',')[0];
major.value = val.split(',')[1];
culture.value = val.split(',')[2];
total.value = parseInt(val.split(',')[1]) + parseInt(val.split(',')[2]);
average.value = parseFloat(parseInt(total.value) / 2).toFixed(2);
}
result1.innerHTML = sid.value + " 의 성적 자료를 조회하였습니다.<hr>";
result2.innerHTML = "";
}
function update() {
result1.innerHTML = sid.value + " 의 성적 자료를 수정하였습니다.<hr>";
result2.innerHTML = "";
}
function remove() {
result1.innerHTML = sid.value + " 의 성적 자료를 삭제하였습니다.<hr>";
result2.innerHTML = "";
}
function init() {
localStorage.clear();
localStorage.setItem("202301055","최승호,95,81");
localStorage.setItem("202202044","김승호,84,92");
localStorage.setItem("202103033","양승호,73,93");
localStorage.setItem("202204022","백승호,62,94");
localStorage.setItem("202305011","정승호,51,85");
result1.innerHTML = "(웹 스토리지를 초기화 하였습니다)<hr>";
result2.innerHTML = "";
}
function listAll() {
var str = "<h3 align=center>(웹스토리지) 전체 보기</h3>";
str += "<table border=1>";
str += "<tr><th width=50>학번</th><th width=50 >이름</th><th width=50 align=center>전공</th><th width=50>교양</th><th width=50>합계</th><th width=50>평균</th><th width=50>석차</th></tr>"
for (N = 0; N < localStorage.length; N++) {
str += "<tr>";
str += "<td>" + localStorage.key(N) + "</td>";
item = localStorage.getItem(localStorage.key(N));
for (L = 0; L < item.split(',').length; L++) {
str += "<td align=center>" + item.split(',')[L] + "</td>";
}
str += "<tr>";
}
str += "<tfoot><tr><td colspan=7 align=center>작성자 : 최승호(2019E7184)</td></tr></tfoot>";
str += "</table>";
result1.innerHTML = "(웹 스토이지) 전체 데이터를 출력하였습니다.<hr>";
result2.innerHTML = str;
}
function listSort() {
var str = "<h3 align=center>(웹스토리지) 학번순으로 출력하기</h3>";
str += "<table border=1>";
str += "<tr><th width=50>학번</th><th width=50 >이름</th><th width=50 align=center>전공</th><th width=50>교양</th><th width=50>합계</th><th width=50>평균</th><th width=50>석차</th></tr>"
if (localStorage.length > 0) {
var arr = new Array();
for (N = 0; N < localStorage.length; N++) {
arr[N] = localStorage.getItem(localStorage.key(N)) + "," + localStorage.key(N);
}
}
var sortedarr = arr.sort();
for (N = 0; N < arr.length; N++) {
str += "<tr>";
str += "<td align=center>" + arr[N].split(',')[3] + "</td>";
str += "<td align=center bgcolor=Yellow>" + arr[N].split(',')[0] + "</td>";
str += "<td align=center>" + arr[N].split(',')[1] + "</td>";
str += "<td align=center>" + arr[N].split(',')[2] + "</td>";
str += "<tr>";
}
str += "<tfoot><tr><td colspan=7 align=center>작성자 : 최승호(2019E7184)</td></tr></tfoot>";
str += "</table>";
result1.innerHTML = "(웹 스토리지) 데이터를 이름순으로 출력하였습니다.<hr>";
result2.innerHTML = str;
}
function listRank() {
var str = "";
result1.innerHTML = "전체 데이터를 성적순으로 출력하였습니다.<hr>";
result2.innerHTML = "성적순으로 정돈된 보고서는 누가 만들어주나 ??????";
}
function listGraph1() {
var canvas = document.getElementById("graph");
var context = canvas.getContext("2d");
if (canvas.width > 0) {
canvas.width = 0;
canvas.height = 0;
result1.innerHTML = "그래프 감추기<hr>";
}
else {
canvas.width = 400;
canvas.height = 300;
context.clearRect(0, 0, 500, 300);
// 컨텍스트 리셋
context.beginPath();
context.font = "30px 'Tahoma'";
context.strokeText("성적표(평균) 그래프", 20, 50);
context.font = "10px 'Tahoma'";
for (N = 0; N < localStorage.length; N++) {
data = localStorage.getItem(localStorage.key(N))
S = (parseInt(data.split(',')[1]) + parseInt(data.split(',')[2])) / 2;
context.fillText(data.split(',')[0], (N * 50) + 20, 270); // 이름 출력
context.strokeRect((N * 50) + 20, 250 - S, 30, S); //점수 그래프
context.fillText((S.toFixed(1)).toString(), (N * 50) + 25, 240 - S); // 점수 출력
}
result1.innerHTML = "평균 점수를 그래프로 그렸습니다.<hr>";
}
result2.innerHTML = "";
}
function listGraph2() {
result1.innerHTML = "그래프-2 를 표시하시오.";
var canvas = document.getElementById("graph");
canvas.width = 0;
canvas.height = 0;
result1.innerHTML = "여기에는 무엇을 그려야하나 ???<hr>";
result2.innerHTML = "그래프는 누가 만들어주나 ??????";
}
</script>
</body>
</html>
728x90