アカデミー63日目-JavaScript
173219 ワード
2021.06.24
ex16_event_key.html
重要なイベント
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
textarea{ width: 500px; height: 300px; resize: none; }
</style>
</head>
<body>
<!--
키 이벤트
- 키보드의 키와 관련된 이벤트
- onkeyXXX
- 주로 폼 관련 태그에게 적용한다.(포커스를 가지지 않으면 발생하지 않기 때문에)
1. onkeydown (******)
- 키를 눌렀을 때 발생
- 물리적 키에 반응하는 이벤트
- 현재 어떤 글자를 눌렀는지 중요하지 않음 -> 어떤 물리키를 눌렀는지가 중요함!!! -> 키를 구분하는 역할
- a키를 눌렀을때 소문자인지 대문자인지 중요하지 않음. a키를 눌렀다는 자체가 중요함
- 중요 : 현재 입력값과 상관없는 일을 할 때 keydown을 사용
가이드
- 우선 onkeydown을 기본으로 사용한다.
- 지금 입력값 자체가 업무에 바로 사용된다. > onkeyup을 사용한다.
2. onkeyup (******)
- 키를 뗐을 때 발생
- 중요 : 현재 입력한 값이 관계된 일이라면.. keyup을 사용
3. onkeypress -> 제한적이라 잘 사용안함
- 키를 눌렀을 때 발생
- 문자키에 반응하는 이벤트(ASCII문자 - 영어 + 숫자 + 특수문자) -> 한글에 반응 안함.
- 영어 대소문자를 구분할 수 있지만 아스키코드에만 사용할 수 있어서 제한적이다.
-->
<h1>키 이벤트</h1>
<!--
이름 붙일때
텍스트박스 : txtName
체크박스 : cbName
라디오버튼 : rbName
셀렉트박스 : selName
-->
<form name="form1">
<textarea name="txt1">
</textarea>
<legend>키 이벤트</legend>
<fieldset>
<div>
<input type="text" name="txtOrigin" size="50">
</div>
<div>
<input type="text" name="txtCopy" size="50">
</div>
</fieldset>
</form>
<!-- <form name="form1">
<img src="images/catty01.png"
onkeydown="//alert('img');" -- 이미지에는 키 이벤트 사용 불가
onclick="alert('img');"
onmousedown="alert('img');">
<input type="text"
onkeydown="alert('text');"
onclick="alert('img');"
onmousedown="alert('img');">
</form> -->
<script>
var txt1 = window.document.form1.txt1;
var txtOrigin = window.document.form1.txtOrigin;
var txtCopy = window.document.form1.txtCopy;
// 이벤트 함수
txt1.onkeydown = function() {
// alert();
// console.log('keydown');
// event 객체
// - 이벤트가 발생할 때만 참조할 수 있는 객체
// console.log(event.keyCode); // 누른 키의 문자 코드 값
console.log(txt1.value); // 입력된 전체의 값 가져올 수 있음
};
txt1.onkeyup = function() {
// console.log('keyup');
};
txt1.onkeypress = function() {
// console.log('keypress');
// console.log(event.keyCode);
};
// -------------------------------------
txtOrigin.onkeydown = function() {
// 한발짝 느리게 복사가 된다.
// txtCopy.value = txtOrigin.value;
};
txtOrigin.onkeyup = function() {
txtCopy.value = txtOrigin.value;
};
</script>
</body>
</html>
ex17_event_key.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<h1>키 이벤트</h1>
<form name="form1">
<input type="text" name="txt1">
</form>
<script>
var txt1 = window.document.form1.txt1;
// txt1.onkeydown = function() {
// // 방향키: 좌(37), 상(38), 우(39), 하(40)
// if (event.keyCode == 38) {
// // console.log(txt1.size);
// txt1.size++;
// } else (tvent.keyCode == 40) {
// txt1.size--;
// }
// };
//즉시 반영해야해서 onkeyup 사용
txt1.onkeyup = function() {
txt1.size = txt1.value;
}
</script>
</body>
</html>
ex18_event.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// <script> 상단부, 하단부 양쪽 코딩
// 상단부 : 함수 선언
// 함수 선언
// 자바스크립트는 HTML태그의 속성에 접근하기 위해서 똑같은 이름의 프로퍼티를 제공한다.
// bgColor -> 합성어는 대문자로 연결해서 사용한다.(캐멀표기법)
function m1() {
window.document.body.bgColor = "red";
}
function m2() {
window.document.body.bgColor = "yellow";
}
function m3() {
window.document.body.bgColor = "blue";
}
// -----------------------------------------
function m4(color) {
window.document.body.bgColor = color;
}
// -----------------------------------------
function m5(btn) {
// this: 이벤트를 발생시킨 태그 자신
// alert(btn.name);
// alert(this); //window 객체
window.document.body.bgColor = btn.value;
}
// ----------------------------------------
function m6() {
// 지금 나를 호출할 버튼이 누구???
// event 객체 사용 가능
// event.srcElement - 지금 이벤트를 발생시킨 태그
// -> 3번에서 사용한 this와 동일한 표현
// alert(event.srcElement.name);
window.document.body.bgColor = event.srcElement.value;
}
</script>
</head>
<body>
<h1>이벤트(***)</h1>
<h2>7</h2>
<form name="form7">
<!--
data-XXX 속성
: 사용자 정의 속성(개발자 맘대로)
-->
<!-- 대외적으로는 value를 쓰고 내부적으로는 사용자 정의 속성을 쓴다. -->
<input type="button" value="빨강" name="btn17" data-color="tomato">
<input type="button" value="노랑" name="btn17" data-color="gold">
<input type="button" value="파랑" name="btn17" data-color="cornflowerblue">
</form>
<h2>6</h2>
<form name="form6">
<input type="button" value="red" name="btn16">
<input type="button" value="yellow" name="btn16">
<input type="button" value="blue" name="btn16">
</form>
<h2>5</h2>
<form name="form5">
<input type="button" value="red" name="btn13">
<input type="button" value="yellow" name="btn14">
<input type="button" value="blue" name="btn15">
</form>
<h2>4</h2>
<form name="form4">
<input type="button" value="red" name="btn10" onclick='m6();'>
<input type="button" value="yellow" name="btn11" onclick="m6();">
<input type="button" value="blue" name="btn12" onclick="m6();">
</form>
<h2>3</h2>
<form name="form3">
<input type="button" value="red" name="btn7" onclick='m5(this);'>
<input type="button" value="yellow" name="btn8" onclick="m5(this);">
<input type="button" value="blue" name="btn9" onclick="m5(this);">
</form>
<h2>2</h2> <!-- 매개변수로 처리하는 방법 -->
<form name="form2">
<input type="button" value="red" name="btn4" onclick='m4("red");'> <!-- 자바스크립트에서 색깔은 문자열로 표시 -->
<input type="button" value="yellow" name="btn5" onclick="m4('yellow');"> <!-- "", '' 둘 다 사용 가능 -->
<input type="button" value="blue" name="btn6" onclick="m4('blue');">
</form>
<h2>1</h2> <!-- 코드 재사용성이 없어서 안좋은 코드. -->
<form name="form1">
<input type="button" value="red" name="btn1" onclick="m1();">
<input type="button" value="yellow" name="btn2" onclick="m2();">
<input type="button" value="blue" name="btn3" onclick="m3();">
</form>
<script>
// 하단부 : 제어 코드
var btn13 = window.document.form5.btn13;
var btn14 = window.document.form5.btn14;
var btn15 = window.document.form5.btn15;
// 익명함수 - 재사용 불가
// btn13.onclick = function() {
// window.document.body.bgColor = event.srcElement.value;
// };
// btn14.onclick = function() {
// window.document.body.bgColor = event.srcElement.value;
// };
// btn15.onclick = function() {
// window.document.body.bgColor = event.srcElement.value;
// };
// 실명함수
function m7() {
window.document.body.bgColor = event.srcElement.value;
}
btn13.onclick = m7;
btn14.onclick = m7;
btn15.onclick = m7;
// -------------------------------------------------------
var btn16 = window.document.form6.btn16; // name을 똑같이 여러개 주면 배열이 반환된다.
// console.log(btn16.length);
// btn16[0].onclick = m7;
// btn16[1].onclick = m7;
// btn16[2].onclick = m7;
for (var i=0; i<btn16.length; i++) {
btn16[i].onclick = m7;
}
// 향상된 for문
btn16.forEach(function (item, index) {
item.onclick = m7;
});
// ----------------------------------------------------------
var btn17 = window.document.form7.btn17;
btn17.forEach(function(item, index) {
item.onclick = function() {
window.document.body.bgColor = item.dataset["color"];
};
});
</script>
</body>
</html>
ex19_attribute.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one {
background-color: gold;
}
.two {
background-color: cornflowerblue;
}
</style>
<script>
function m1() {
// 모든 폼태그의 자식 태그들은 form이라는 프로퍼티를 가지고 있고, 부모 폼태그를 참조한다.
// var txt1 = window.document.form1.txt1;
var txt1 = event.srcElement.form.txt1;
// Attribute 조작
// - HTML 태그가 가지는 거의 대부분 속성은 자바스크립트에서 프로퍼티로 제공한다.(사용자 경험을 살리기 위해서)
// - HTML 속성이 합성어(두단어 복합)라면 > 캐멀 표기법으로 표현
// <input value> -> txt1.value
// <input size> -> txt1.size
// -------------------------------------------------
// HTML 속성의 숫자값은 JavaScript에서도 숫자로 표시
// txt1.size = 50;
// txt1.size++;
// -------------------------------------------------
// HTML(boolean) -> JavaScript(boolean)
// txt1.readOnly = true;
// txt1.readOnly = !txt1.readOnly; //이런 버튼(역할) : Toggle Button
// txt1.readOnly면 읽기만 가능.
// if (txt1.readOnly) {
// event.srcElement.value = "읽기전용";
// } else {
// event.srcElement.value = "쓰기가능";
// }
// -------------------------------------------------
// HTML(열거형) -> JavaScript(문자열)
// txt1.type = "checkbox"; // type 조작 금지!!! -> 근원이 되는 속성이기 때문에 혼동될 수 있다.
// HTML(색상) -> JavaScript(문자열)
// window.document.body.bgColor = "yellow";
// HTML(문자열) -> JavaScript(문자열)
// txt1.value = "문자열";
// txt1.title = "하하하";
// txt1.placeholder = "이름 입력";
// ---------------------------------------------------
//모든 속성명이 그대로 사용 가능하지만, 유일하게 class만을 사용 불가능 -> class 키워드 (예약어)
txt1.className = "two";
}
</script>
</head>
<body>
<h1>JavaScript를 사용해서 HTML의 Attribute를 조작하기</h1>
<form>
<input type="text" name="txt1" class="one">
<input type="button" value="쓰기가능" name="btn1" onclick="m1();">
</form>
</body>
</html>
ex20_collection.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form name="form1">
<input type="button" name="btn1" value="btn1" onclick="m1();">
<input type="text">
<input type="checkbox">
</form>
<h1>이미지</h1>
<img src="images/catty01.png" name="cat1">
<img src="images/catty02.png" name="cat2">
<img src="images/catty03.png">
<h1>링크</h1>
<a href="http://naver.com" name="link1">네이버</a>
<a href="http://naver.com" name="link2">구글</a>
<a href="http://naver.com" name="link3">다음</a>
<h1>앵커</h1>
<a name="a1">아이템1</a>
<a name="a2">아이템2</a>
<a name="a3">아이템3</a>
<script>
//m1();
//m1;
// window.document.form1.btn1.onclick = m1; --> 함수 자체. 함수를 어딘가 넣을 때는 함수 이름을 직접 취급
// window.document.form1.btn1.onclick = function m1() {
// alert();
// };
// function m1() {
// alert();
// }
/*
JavaScript Built-in Collection
- 브라우저가 HTML 문서를 로딩하는 과정에서 자동으로 만드는 배열
1. window.document.images
- 문서내의 모든 <img> 태그 배열
2. window.document.links
- 문서내의 모든 <a href=""> 태그 배열
3. window.document.anchors
- 문서내의 모든 <a name=""> 태그 배열
4. window.document.forms
- 문서내의 모든 <form> 태그 배열
5. window.document.forms[index].elements
- 해당 폼태그의 자식 태그 배열
6. window.document.all
- 문서내의 모든 name을 가지는 태그 배열
- 예전: (images + links + anchors + forms + elements): 종합 선물 세트
- 최근: 모든 태그 배열(name을 가지지 않은 태그까지 포함)
- 비표준(MS) > 대다수 브라우저 지원
*/
// 이미지
// console.log(window.document.cat1);
// console.log(window.document.images.length);
// console.log(window.document.images[0].name); // 위치로 찾기
// console.log(window.document.images['cat1'].name); // 이름으로 찾기
// 링크
// console.log(window.document.links.length);
// console.log(window.document.link1); // X
// console.log(window.document.links[0]);
// console.log(window.document.links['link1']);
// console.log(window.document.links.link1); // 멤버접근 연산자로 접근 가능
// console.log(window.document.links['link1']); // hasmap형태로 접근 가능
// console.log(window.document.links[0]); // index로 접근 가능
// 링크와 앵커의 차이
// <a> : href속성을 가지면 링크, name을 가지면 앵커 -> 속성의 차이
//앵커(<a name="">)
// console.log(window.document.anchors.length);
// console.log(window.document.anchors[3]);
//폼
// console.log(window.document.forms.length);
// console.log(window.document.form1); //v
// console.log(window.document.forms[0]); //v
// console.log(window.document.forms['form1']);
// console.log(window.document.forms.form1);
// console.log(window.document.form1.elements.length);
console.log(window.document.all.cat1);
console.log(window.document.all['cat1']);
// console.log(window.document.all[23]); -- 위에 부터 세기 어렵다..
console.log(window.document.all.link1);
console.log(window.document.all['link1']);
console.log(window.document.all.form1);
console.log(window.document.all['form1']);
</script>
</body>
</html>
ex21_window.html
ウィンドウオブジェクト
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input[type='button'] { display: block; margin-bottom: 5px;}
</style>
</head>
<body>
<h1>window 객체</h1>
<form name="form1">
<input type="text" name="txt1">
<input type="button" value="자식창 띄우기" name="btn1">
<input type="button" value="자식창의 텍스트박스에 접근하기" name="btn2">
<input type="button" value="" name="btn3">
<input type="button" value="" name="btn4">
<input type="button" value="" name="btn5">
</form>
<script>
var txt1 = document.form1.txt1;
var btn1 = document.form1.btn1;
var btn2 = document.form1.btn2;
var btn3 = document.form1.btn3;
var btn4 = document.form1.btn4;
var btn5 = document.form1.btn5;
//window 객체
// - 최상위 객체
// - 브라우저 창 자체를 참조하는 객체
var child; // 전역변수
btn1.onclick = function() {
//open(url, name, option)
// - name: 자식 창의 중복 방지
//반환값 -> child : 새창(자식창)의 window 객체
child = window.open('child.html', 'child', 'width=300, height=300, left=0, top=0');
};
// 부모페이지 <-> 자식페이지에 접근해서 조작하기
btn2.onclick = function() {
// window.close();
// 열려있는 자식창의 window객체를 얻어내기
// (페이지를 조작할때는 페이지의 최상위 객체인 window객체를 얻어내면 밑에 있는 모든 것들을 조작할 수 있다.)
// child.close();
child.document.form1.txt1.value = "부모창에서 접근했습니다."; // -> 자식창의 텍스트 박스 조작
};
//사용자에게 허락 구함? > 팝업 광고
//window.open('child.html', 'child', 'width=300, height=300');
</script>
</body>
</html>
サブウィンドウ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>자식창</h1>
<form name="form1">
<input type="text" name="txt1">
<input type="button" value="창닫기" name="btn1">
<input type="button" value="부모창의 텍스트 박스에 접근하기" name="btn2">
</form>
<hr>
<form name="form2">
아이디: <input type="text" name="txtID">
<input type="button" value="중복검사">
<br>
<input type="button" value="사용하기" name="btnUse">
</form>
<script>
var btn1 = document.form1.btn1;
var btn2 = document.form1.btn2;
var txt1 = document.form1.txt1;
var txtID = document.form2.txtID;
var btnUse = document.form2.btnUse;
btn1.onclick = function() {
window.close(); // 자기 자신을 닫음
};
btn2.onclick = function() {
//부모창의 window 객체를 얻어내기(= opener)
opener.document.form1.txt1.value = "자식창에서 접근했습니다.";
};
btnUse.onclick = function() {
// 1. 아이디를 부모창에 복사하기
// 2. 팝업창을 닫기
opener.document.form1.txt1.value = txtID.value;
window.close();
};
</script>
</body>
</html>
ex22_screen.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
screen 객체
- window 객체의 자식 객체
- 유일한 객체 > 예약어 제공
- 화면 정보 제공
-->
<script>
// 해상도(화면크기)
// - 작업표시줄의 높이에 따라 화면 크기가 달라진다. > 작업 표시줄 영역 제외
// 사용자들마다 어떤 해상도를 사용하는지에 따라 화면 구성을 달리 만들기 위한 객체.
console.log(window.screen.availWidth); //***
console.log(window.screen.availHeight); //***
console.log(screen.colorDepth); // 24bit color. 사용하고 있는 디스플레이가 몇가지 색깔을 지원하는 지 알려줌
// type: "landscape-primary"
console.log(screen.orientation); // 모니터 가로로 보는지 세로로 보는지 확인
</script>
</body>
</html>
ex23_location.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
location 객체
- window 객체의 자식 객체
- 현재 창의 URL과 관련된 정보를 제공/조작
- 주소표시줄, 주소창에 접근해서 제어.
-->
<input type="button" value="버튼" name="btn1">
<script>
window.document.all.btn1.onclick = function() {
// console.log(location.host); //127.0.0.1:5500 - 호스트
// console.log(location.hostname); //127.0.0.1 - 호스트네임
// console.log(location.port); //5500 - 포트번호
// console.log(location.protocol); //http: - 프로토콜
// console.log(location.href); //http://127.0.0.1:5500/ex23_location.html - 현재 페이지 주소
// 자바스크립트를 사용해서 페이지를 이동하기(*****************************)
// location.href = "http://google.com";
//페이지 이동 메소드
// location.assign('http://yes24.com');
// location.replace('http://yes24.com');
// 프로퍼티
location.href = 'http://naver.com'; //*****************
// 페이지 새로고침
// location.reload(); //*
};
//window 객체에 키 이벤트를 걸면..
// - 전역 키 이벤트 > 무슨 행동을 하던지 키보드가 눌리면 항상 발생
window.onkeydown = function() {
if (event.keyCode == 71) {
location.href = "http://google.com";
} else if (event.keyCode == 65) {
location.href = "http://amazon.com";
} else if (event.keyCode == 67) {
location.href = "http://coupang.com";
} else if (event.keyCode == 68) {
location.href = "http://daum.net";
}
};
</script>
</body>
</html>
ex24_history.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
history 객체
- window 객체의 자식 객체
- 브라우저의 방문 기록을 탐색
-->
<input type="button" value="뒤로가기(-2)" name="btn1">
<input type="button" value="뒤로가기" name="btn2">
<input type="button" value="앞으로가기" name="btn3">
<input type="button" value="앞으로가기(+2)" name="btn4">
<script>
var btn1 = document.all.btn1;
var btn2 = document.all.btn2;
var btn3 = document.all.btn3;
var btn4 = document.all.btn4;
// 예제 -> 구글 -> 네이버 -> 예제(현재위치) -> 예스24 -> 쿠팡
// - 탐색기록이 남아있는 상황에서 쓸 수 있는 이동 명령어
btn1.onclick = function() {
history.go(-2);
};
btn2.onclick = function() {
//history.go(-1); //뒤로 가기
history.back(); //뒤로 가기
};
btn3.onclick = function() {
//history.go(1); //앞으로 가기
history.forward(); //앞으로 가기
};
btn4.onclick = function() {
history.go(2);
};
</script>
</body>
</html>
ドキュメントのサブアイテム
ex25_link.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>링크 조작</h1>
<form name="form1">
<a href="http://google.com" name="link1">구글</a>
<br>
<input type="button" value="확인" name="btn1">
</form>
<script>
// 새창으로 이동 불가능 > 현재창에서만 이동 가능
// location.href = URL; // 현재창에서 이동하기
// window.open(URL, name, '옵션X'); // 새창으로 이동하기
var link1 = document.links['link1'];
var btn1 = document.form1.btn1;
btn1.onclick = function() {
//<a> 태그 조작
//1. <a> 태그 자체 조작 X
//2. <a> 태그 속성 조작 O
//3. <a> 태그 PCDATA 조작 O
link1.href = "http://amazon.com";
link1.target = "_blank";
link1.title = "아마존으로 이동합니다.";
//BOM -> PCDATA 조작 기능 없음
//DOM -> PCDATA 조작 기능 있음
link1.innerText = "아마존";
//프로그램이 사용자 대신 클릭을 했다.
// - 에뮬레이터 함수
// - onclick -> on(X) -> click()
link1.click();
};
</script>
</body>
</html>
ex26_image.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>이미지</h1>
<input type="button" value="확인" name="btn1">
<hr>
<img src="images/cat01.jpg" name="cat1">
<hr>
<img src="images/dog01.jpg" name="dog1">
<hr>
<img src="images/switch_on.png" name="sw">
<!--
1. window.onkeydown
2. event.keyCode
3. img.src
-->
<h3>문제1.</h3>
<!--
1. 방향키에 따라 이미지를 변경한다.
a. 오른쪽 방향키: dog01.jpg -> dog02.jpg -> dog03.jpg
b. 왼쪽 방향키: dog05.jpg -> dog04.jpg -> dog03.jpg
2. 더 이상 이미지가 없다면 경고
a. dog05.jpg 까지 -> "더 이상 이미지가 없습니다."
b. dog01.jpg 까지 -> "처음 이미지입니다."
-->
<img src="images/dog01.jpg" name="dog2">
<h3>문제2.</h3>
<!--
누른 숫자키에 해당하는 숫자 이미지로 변경하시오.
-->
<img src="images/0.png" name="num">
<script>
var btn1 = document.all.btn1;
var cat1 = document.images['cat1'];
var dog1 = document.images['dog1'];
var sw = document.images['sw'];
btn1.onclick = function() {
// alert(cat1.src);
// cat1.src = "images/cat02.jpg";
// cat1.width = "500";
// cat1.height = "500";
// cat1.alt = "고양이"; // alt : 이미지 설명
};
//롤오버 이미지(Roll over image)
cat1.onmouseover = function() {
cat1.src = "images/cat02.jpg";
};
cat1.onmouseout = function() {
cat1.src = "images/cat01.jpg";
};
// ------------------------------------
var n = 1;
dog1.onclick = function() {
//dog01.jpg > dog02.jpg > dog03.jpg > dog04.jpg > dog05.jpg
n++;
dog1.src = "images/dog0" + n + ".jpg";
if (n >= 5) n = 0; //loop
};
// ------------------------------------
window.onkeydown = function() {
// 똑같은 숫자지만 물리키가 다름.
//상단 숫자키(1) -> 49
//우측 키패드 숫자키(1) -> 97
//alert(event.keyCode);
if (event.keyCode >= 49 && event.keyCode <= 53) {
dog1.src = "images/dog0" + (event.keyCode - 48) + ".jpg";
} else if (event.keyCode >= 97 && event.keyCode <= 101) {
dog1.src = "images/dog0" + (event.keyCode - 96) + ".jpg";
}
};
// ------------------------------------
// 토글 버튼
sw.onclick = function() {
// alert(sw.src);
// alert(sw.src.endsWith('switch_on.png'));
// endsWith : 패턴 검색
if (sw.src.endsWith('switch_on.png')) {
sw.src = "images/switch_off.png";
document.body.bgColor = "#000";
} else {
sw.src = "images/switch_on.png";
document.body.bgColor = "#FFF";
}
};
</script>
</body>
</html>
Reference
この問題について(アカデミー63日目-JavaScript), 我々は、より多くの情報をここで見つけました
https://velog.io/@hi-dae-in/학원-63일차-JavaScript
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
textarea{ width: 500px; height: 300px; resize: none; }
</style>
</head>
<body>
<!--
키 이벤트
- 키보드의 키와 관련된 이벤트
- onkeyXXX
- 주로 폼 관련 태그에게 적용한다.(포커스를 가지지 않으면 발생하지 않기 때문에)
1. onkeydown (******)
- 키를 눌렀을 때 발생
- 물리적 키에 반응하는 이벤트
- 현재 어떤 글자를 눌렀는지 중요하지 않음 -> 어떤 물리키를 눌렀는지가 중요함!!! -> 키를 구분하는 역할
- a키를 눌렀을때 소문자인지 대문자인지 중요하지 않음. a키를 눌렀다는 자체가 중요함
- 중요 : 현재 입력값과 상관없는 일을 할 때 keydown을 사용
가이드
- 우선 onkeydown을 기본으로 사용한다.
- 지금 입력값 자체가 업무에 바로 사용된다. > onkeyup을 사용한다.
2. onkeyup (******)
- 키를 뗐을 때 발생
- 중요 : 현재 입력한 값이 관계된 일이라면.. keyup을 사용
3. onkeypress -> 제한적이라 잘 사용안함
- 키를 눌렀을 때 발생
- 문자키에 반응하는 이벤트(ASCII문자 - 영어 + 숫자 + 특수문자) -> 한글에 반응 안함.
- 영어 대소문자를 구분할 수 있지만 아스키코드에만 사용할 수 있어서 제한적이다.
-->
<h1>키 이벤트</h1>
<!--
이름 붙일때
텍스트박스 : txtName
체크박스 : cbName
라디오버튼 : rbName
셀렉트박스 : selName
-->
<form name="form1">
<textarea name="txt1">
</textarea>
<legend>키 이벤트</legend>
<fieldset>
<div>
<input type="text" name="txtOrigin" size="50">
</div>
<div>
<input type="text" name="txtCopy" size="50">
</div>
</fieldset>
</form>
<!-- <form name="form1">
<img src="images/catty01.png"
onkeydown="//alert('img');" -- 이미지에는 키 이벤트 사용 불가
onclick="alert('img');"
onmousedown="alert('img');">
<input type="text"
onkeydown="alert('text');"
onclick="alert('img');"
onmousedown="alert('img');">
</form> -->
<script>
var txt1 = window.document.form1.txt1;
var txtOrigin = window.document.form1.txtOrigin;
var txtCopy = window.document.form1.txtCopy;
// 이벤트 함수
txt1.onkeydown = function() {
// alert();
// console.log('keydown');
// event 객체
// - 이벤트가 발생할 때만 참조할 수 있는 객체
// console.log(event.keyCode); // 누른 키의 문자 코드 값
console.log(txt1.value); // 입력된 전체의 값 가져올 수 있음
};
txt1.onkeyup = function() {
// console.log('keyup');
};
txt1.onkeypress = function() {
// console.log('keypress');
// console.log(event.keyCode);
};
// -------------------------------------
txtOrigin.onkeydown = function() {
// 한발짝 느리게 복사가 된다.
// txtCopy.value = txtOrigin.value;
};
txtOrigin.onkeyup = function() {
txtCopy.value = txtOrigin.value;
};
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<h1>키 이벤트</h1>
<form name="form1">
<input type="text" name="txt1">
</form>
<script>
var txt1 = window.document.form1.txt1;
// txt1.onkeydown = function() {
// // 방향키: 좌(37), 상(38), 우(39), 하(40)
// if (event.keyCode == 38) {
// // console.log(txt1.size);
// txt1.size++;
// } else (tvent.keyCode == 40) {
// txt1.size--;
// }
// };
//즉시 반영해야해서 onkeyup 사용
txt1.onkeyup = function() {
txt1.size = txt1.value;
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// <script> 상단부, 하단부 양쪽 코딩
// 상단부 : 함수 선언
// 함수 선언
// 자바스크립트는 HTML태그의 속성에 접근하기 위해서 똑같은 이름의 프로퍼티를 제공한다.
// bgColor -> 합성어는 대문자로 연결해서 사용한다.(캐멀표기법)
function m1() {
window.document.body.bgColor = "red";
}
function m2() {
window.document.body.bgColor = "yellow";
}
function m3() {
window.document.body.bgColor = "blue";
}
// -----------------------------------------
function m4(color) {
window.document.body.bgColor = color;
}
// -----------------------------------------
function m5(btn) {
// this: 이벤트를 발생시킨 태그 자신
// alert(btn.name);
// alert(this); //window 객체
window.document.body.bgColor = btn.value;
}
// ----------------------------------------
function m6() {
// 지금 나를 호출할 버튼이 누구???
// event 객체 사용 가능
// event.srcElement - 지금 이벤트를 발생시킨 태그
// -> 3번에서 사용한 this와 동일한 표현
// alert(event.srcElement.name);
window.document.body.bgColor = event.srcElement.value;
}
</script>
</head>
<body>
<h1>이벤트(***)</h1>
<h2>7</h2>
<form name="form7">
<!--
data-XXX 속성
: 사용자 정의 속성(개발자 맘대로)
-->
<!-- 대외적으로는 value를 쓰고 내부적으로는 사용자 정의 속성을 쓴다. -->
<input type="button" value="빨강" name="btn17" data-color="tomato">
<input type="button" value="노랑" name="btn17" data-color="gold">
<input type="button" value="파랑" name="btn17" data-color="cornflowerblue">
</form>
<h2>6</h2>
<form name="form6">
<input type="button" value="red" name="btn16">
<input type="button" value="yellow" name="btn16">
<input type="button" value="blue" name="btn16">
</form>
<h2>5</h2>
<form name="form5">
<input type="button" value="red" name="btn13">
<input type="button" value="yellow" name="btn14">
<input type="button" value="blue" name="btn15">
</form>
<h2>4</h2>
<form name="form4">
<input type="button" value="red" name="btn10" onclick='m6();'>
<input type="button" value="yellow" name="btn11" onclick="m6();">
<input type="button" value="blue" name="btn12" onclick="m6();">
</form>
<h2>3</h2>
<form name="form3">
<input type="button" value="red" name="btn7" onclick='m5(this);'>
<input type="button" value="yellow" name="btn8" onclick="m5(this);">
<input type="button" value="blue" name="btn9" onclick="m5(this);">
</form>
<h2>2</h2> <!-- 매개변수로 처리하는 방법 -->
<form name="form2">
<input type="button" value="red" name="btn4" onclick='m4("red");'> <!-- 자바스크립트에서 색깔은 문자열로 표시 -->
<input type="button" value="yellow" name="btn5" onclick="m4('yellow');"> <!-- "", '' 둘 다 사용 가능 -->
<input type="button" value="blue" name="btn6" onclick="m4('blue');">
</form>
<h2>1</h2> <!-- 코드 재사용성이 없어서 안좋은 코드. -->
<form name="form1">
<input type="button" value="red" name="btn1" onclick="m1();">
<input type="button" value="yellow" name="btn2" onclick="m2();">
<input type="button" value="blue" name="btn3" onclick="m3();">
</form>
<script>
// 하단부 : 제어 코드
var btn13 = window.document.form5.btn13;
var btn14 = window.document.form5.btn14;
var btn15 = window.document.form5.btn15;
// 익명함수 - 재사용 불가
// btn13.onclick = function() {
// window.document.body.bgColor = event.srcElement.value;
// };
// btn14.onclick = function() {
// window.document.body.bgColor = event.srcElement.value;
// };
// btn15.onclick = function() {
// window.document.body.bgColor = event.srcElement.value;
// };
// 실명함수
function m7() {
window.document.body.bgColor = event.srcElement.value;
}
btn13.onclick = m7;
btn14.onclick = m7;
btn15.onclick = m7;
// -------------------------------------------------------
var btn16 = window.document.form6.btn16; // name을 똑같이 여러개 주면 배열이 반환된다.
// console.log(btn16.length);
// btn16[0].onclick = m7;
// btn16[1].onclick = m7;
// btn16[2].onclick = m7;
for (var i=0; i<btn16.length; i++) {
btn16[i].onclick = m7;
}
// 향상된 for문
btn16.forEach(function (item, index) {
item.onclick = m7;
});
// ----------------------------------------------------------
var btn17 = window.document.form7.btn17;
btn17.forEach(function(item, index) {
item.onclick = function() {
window.document.body.bgColor = item.dataset["color"];
};
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one {
background-color: gold;
}
.two {
background-color: cornflowerblue;
}
</style>
<script>
function m1() {
// 모든 폼태그의 자식 태그들은 form이라는 프로퍼티를 가지고 있고, 부모 폼태그를 참조한다.
// var txt1 = window.document.form1.txt1;
var txt1 = event.srcElement.form.txt1;
// Attribute 조작
// - HTML 태그가 가지는 거의 대부분 속성은 자바스크립트에서 프로퍼티로 제공한다.(사용자 경험을 살리기 위해서)
// - HTML 속성이 합성어(두단어 복합)라면 > 캐멀 표기법으로 표현
// <input value> -> txt1.value
// <input size> -> txt1.size
// -------------------------------------------------
// HTML 속성의 숫자값은 JavaScript에서도 숫자로 표시
// txt1.size = 50;
// txt1.size++;
// -------------------------------------------------
// HTML(boolean) -> JavaScript(boolean)
// txt1.readOnly = true;
// txt1.readOnly = !txt1.readOnly; //이런 버튼(역할) : Toggle Button
// txt1.readOnly면 읽기만 가능.
// if (txt1.readOnly) {
// event.srcElement.value = "읽기전용";
// } else {
// event.srcElement.value = "쓰기가능";
// }
// -------------------------------------------------
// HTML(열거형) -> JavaScript(문자열)
// txt1.type = "checkbox"; // type 조작 금지!!! -> 근원이 되는 속성이기 때문에 혼동될 수 있다.
// HTML(색상) -> JavaScript(문자열)
// window.document.body.bgColor = "yellow";
// HTML(문자열) -> JavaScript(문자열)
// txt1.value = "문자열";
// txt1.title = "하하하";
// txt1.placeholder = "이름 입력";
// ---------------------------------------------------
//모든 속성명이 그대로 사용 가능하지만, 유일하게 class만을 사용 불가능 -> class 키워드 (예약어)
txt1.className = "two";
}
</script>
</head>
<body>
<h1>JavaScript를 사용해서 HTML의 Attribute를 조작하기</h1>
<form>
<input type="text" name="txt1" class="one">
<input type="button" value="쓰기가능" name="btn1" onclick="m1();">
</form>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form name="form1">
<input type="button" name="btn1" value="btn1" onclick="m1();">
<input type="text">
<input type="checkbox">
</form>
<h1>이미지</h1>
<img src="images/catty01.png" name="cat1">
<img src="images/catty02.png" name="cat2">
<img src="images/catty03.png">
<h1>링크</h1>
<a href="http://naver.com" name="link1">네이버</a>
<a href="http://naver.com" name="link2">구글</a>
<a href="http://naver.com" name="link3">다음</a>
<h1>앵커</h1>
<a name="a1">아이템1</a>
<a name="a2">아이템2</a>
<a name="a3">아이템3</a>
<script>
//m1();
//m1;
// window.document.form1.btn1.onclick = m1; --> 함수 자체. 함수를 어딘가 넣을 때는 함수 이름을 직접 취급
// window.document.form1.btn1.onclick = function m1() {
// alert();
// };
// function m1() {
// alert();
// }
/*
JavaScript Built-in Collection
- 브라우저가 HTML 문서를 로딩하는 과정에서 자동으로 만드는 배열
1. window.document.images
- 문서내의 모든 <img> 태그 배열
2. window.document.links
- 문서내의 모든 <a href=""> 태그 배열
3. window.document.anchors
- 문서내의 모든 <a name=""> 태그 배열
4. window.document.forms
- 문서내의 모든 <form> 태그 배열
5. window.document.forms[index].elements
- 해당 폼태그의 자식 태그 배열
6. window.document.all
- 문서내의 모든 name을 가지는 태그 배열
- 예전: (images + links + anchors + forms + elements): 종합 선물 세트
- 최근: 모든 태그 배열(name을 가지지 않은 태그까지 포함)
- 비표준(MS) > 대다수 브라우저 지원
*/
// 이미지
// console.log(window.document.cat1);
// console.log(window.document.images.length);
// console.log(window.document.images[0].name); // 위치로 찾기
// console.log(window.document.images['cat1'].name); // 이름으로 찾기
// 링크
// console.log(window.document.links.length);
// console.log(window.document.link1); // X
// console.log(window.document.links[0]);
// console.log(window.document.links['link1']);
// console.log(window.document.links.link1); // 멤버접근 연산자로 접근 가능
// console.log(window.document.links['link1']); // hasmap형태로 접근 가능
// console.log(window.document.links[0]); // index로 접근 가능
// 링크와 앵커의 차이
// <a> : href속성을 가지면 링크, name을 가지면 앵커 -> 속성의 차이
//앵커(<a name="">)
// console.log(window.document.anchors.length);
// console.log(window.document.anchors[3]);
//폼
// console.log(window.document.forms.length);
// console.log(window.document.form1); //v
// console.log(window.document.forms[0]); //v
// console.log(window.document.forms['form1']);
// console.log(window.document.forms.form1);
// console.log(window.document.form1.elements.length);
console.log(window.document.all.cat1);
console.log(window.document.all['cat1']);
// console.log(window.document.all[23]); -- 위에 부터 세기 어렵다..
console.log(window.document.all.link1);
console.log(window.document.all['link1']);
console.log(window.document.all.form1);
console.log(window.document.all['form1']);
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input[type='button'] { display: block; margin-bottom: 5px;}
</style>
</head>
<body>
<h1>window 객체</h1>
<form name="form1">
<input type="text" name="txt1">
<input type="button" value="자식창 띄우기" name="btn1">
<input type="button" value="자식창의 텍스트박스에 접근하기" name="btn2">
<input type="button" value="" name="btn3">
<input type="button" value="" name="btn4">
<input type="button" value="" name="btn5">
</form>
<script>
var txt1 = document.form1.txt1;
var btn1 = document.form1.btn1;
var btn2 = document.form1.btn2;
var btn3 = document.form1.btn3;
var btn4 = document.form1.btn4;
var btn5 = document.form1.btn5;
//window 객체
// - 최상위 객체
// - 브라우저 창 자체를 참조하는 객체
var child; // 전역변수
btn1.onclick = function() {
//open(url, name, option)
// - name: 자식 창의 중복 방지
//반환값 -> child : 새창(자식창)의 window 객체
child = window.open('child.html', 'child', 'width=300, height=300, left=0, top=0');
};
// 부모페이지 <-> 자식페이지에 접근해서 조작하기
btn2.onclick = function() {
// window.close();
// 열려있는 자식창의 window객체를 얻어내기
// (페이지를 조작할때는 페이지의 최상위 객체인 window객체를 얻어내면 밑에 있는 모든 것들을 조작할 수 있다.)
// child.close();
child.document.form1.txt1.value = "부모창에서 접근했습니다."; // -> 자식창의 텍스트 박스 조작
};
//사용자에게 허락 구함? > 팝업 광고
//window.open('child.html', 'child', 'width=300, height=300');
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>자식창</h1>
<form name="form1">
<input type="text" name="txt1">
<input type="button" value="창닫기" name="btn1">
<input type="button" value="부모창의 텍스트 박스에 접근하기" name="btn2">
</form>
<hr>
<form name="form2">
아이디: <input type="text" name="txtID">
<input type="button" value="중복검사">
<br>
<input type="button" value="사용하기" name="btnUse">
</form>
<script>
var btn1 = document.form1.btn1;
var btn2 = document.form1.btn2;
var txt1 = document.form1.txt1;
var txtID = document.form2.txtID;
var btnUse = document.form2.btnUse;
btn1.onclick = function() {
window.close(); // 자기 자신을 닫음
};
btn2.onclick = function() {
//부모창의 window 객체를 얻어내기(= opener)
opener.document.form1.txt1.value = "자식창에서 접근했습니다.";
};
btnUse.onclick = function() {
// 1. 아이디를 부모창에 복사하기
// 2. 팝업창을 닫기
opener.document.form1.txt1.value = txtID.value;
window.close();
};
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
screen 객체
- window 객체의 자식 객체
- 유일한 객체 > 예약어 제공
- 화면 정보 제공
-->
<script>
// 해상도(화면크기)
// - 작업표시줄의 높이에 따라 화면 크기가 달라진다. > 작업 표시줄 영역 제외
// 사용자들마다 어떤 해상도를 사용하는지에 따라 화면 구성을 달리 만들기 위한 객체.
console.log(window.screen.availWidth); //***
console.log(window.screen.availHeight); //***
console.log(screen.colorDepth); // 24bit color. 사용하고 있는 디스플레이가 몇가지 색깔을 지원하는 지 알려줌
// type: "landscape-primary"
console.log(screen.orientation); // 모니터 가로로 보는지 세로로 보는지 확인
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
location 객체
- window 객체의 자식 객체
- 현재 창의 URL과 관련된 정보를 제공/조작
- 주소표시줄, 주소창에 접근해서 제어.
-->
<input type="button" value="버튼" name="btn1">
<script>
window.document.all.btn1.onclick = function() {
// console.log(location.host); //127.0.0.1:5500 - 호스트
// console.log(location.hostname); //127.0.0.1 - 호스트네임
// console.log(location.port); //5500 - 포트번호
// console.log(location.protocol); //http: - 프로토콜
// console.log(location.href); //http://127.0.0.1:5500/ex23_location.html - 현재 페이지 주소
// 자바스크립트를 사용해서 페이지를 이동하기(*****************************)
// location.href = "http://google.com";
//페이지 이동 메소드
// location.assign('http://yes24.com');
// location.replace('http://yes24.com');
// 프로퍼티
location.href = 'http://naver.com'; //*****************
// 페이지 새로고침
// location.reload(); //*
};
//window 객체에 키 이벤트를 걸면..
// - 전역 키 이벤트 > 무슨 행동을 하던지 키보드가 눌리면 항상 발생
window.onkeydown = function() {
if (event.keyCode == 71) {
location.href = "http://google.com";
} else if (event.keyCode == 65) {
location.href = "http://amazon.com";
} else if (event.keyCode == 67) {
location.href = "http://coupang.com";
} else if (event.keyCode == 68) {
location.href = "http://daum.net";
}
};
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
history 객체
- window 객체의 자식 객체
- 브라우저의 방문 기록을 탐색
-->
<input type="button" value="뒤로가기(-2)" name="btn1">
<input type="button" value="뒤로가기" name="btn2">
<input type="button" value="앞으로가기" name="btn3">
<input type="button" value="앞으로가기(+2)" name="btn4">
<script>
var btn1 = document.all.btn1;
var btn2 = document.all.btn2;
var btn3 = document.all.btn3;
var btn4 = document.all.btn4;
// 예제 -> 구글 -> 네이버 -> 예제(현재위치) -> 예스24 -> 쿠팡
// - 탐색기록이 남아있는 상황에서 쓸 수 있는 이동 명령어
btn1.onclick = function() {
history.go(-2);
};
btn2.onclick = function() {
//history.go(-1); //뒤로 가기
history.back(); //뒤로 가기
};
btn3.onclick = function() {
//history.go(1); //앞으로 가기
history.forward(); //앞으로 가기
};
btn4.onclick = function() {
history.go(2);
};
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>링크 조작</h1>
<form name="form1">
<a href="http://google.com" name="link1">구글</a>
<br>
<input type="button" value="확인" name="btn1">
</form>
<script>
// 새창으로 이동 불가능 > 현재창에서만 이동 가능
// location.href = URL; // 현재창에서 이동하기
// window.open(URL, name, '옵션X'); // 새창으로 이동하기
var link1 = document.links['link1'];
var btn1 = document.form1.btn1;
btn1.onclick = function() {
//<a> 태그 조작
//1. <a> 태그 자체 조작 X
//2. <a> 태그 속성 조작 O
//3. <a> 태그 PCDATA 조작 O
link1.href = "http://amazon.com";
link1.target = "_blank";
link1.title = "아마존으로 이동합니다.";
//BOM -> PCDATA 조작 기능 없음
//DOM -> PCDATA 조작 기능 있음
link1.innerText = "아마존";
//프로그램이 사용자 대신 클릭을 했다.
// - 에뮬레이터 함수
// - onclick -> on(X) -> click()
link1.click();
};
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>이미지</h1>
<input type="button" value="확인" name="btn1">
<hr>
<img src="images/cat01.jpg" name="cat1">
<hr>
<img src="images/dog01.jpg" name="dog1">
<hr>
<img src="images/switch_on.png" name="sw">
<!--
1. window.onkeydown
2. event.keyCode
3. img.src
-->
<h3>문제1.</h3>
<!--
1. 방향키에 따라 이미지를 변경한다.
a. 오른쪽 방향키: dog01.jpg -> dog02.jpg -> dog03.jpg
b. 왼쪽 방향키: dog05.jpg -> dog04.jpg -> dog03.jpg
2. 더 이상 이미지가 없다면 경고
a. dog05.jpg 까지 -> "더 이상 이미지가 없습니다."
b. dog01.jpg 까지 -> "처음 이미지입니다."
-->
<img src="images/dog01.jpg" name="dog2">
<h3>문제2.</h3>
<!--
누른 숫자키에 해당하는 숫자 이미지로 변경하시오.
-->
<img src="images/0.png" name="num">
<script>
var btn1 = document.all.btn1;
var cat1 = document.images['cat1'];
var dog1 = document.images['dog1'];
var sw = document.images['sw'];
btn1.onclick = function() {
// alert(cat1.src);
// cat1.src = "images/cat02.jpg";
// cat1.width = "500";
// cat1.height = "500";
// cat1.alt = "고양이"; // alt : 이미지 설명
};
//롤오버 이미지(Roll over image)
cat1.onmouseover = function() {
cat1.src = "images/cat02.jpg";
};
cat1.onmouseout = function() {
cat1.src = "images/cat01.jpg";
};
// ------------------------------------
var n = 1;
dog1.onclick = function() {
//dog01.jpg > dog02.jpg > dog03.jpg > dog04.jpg > dog05.jpg
n++;
dog1.src = "images/dog0" + n + ".jpg";
if (n >= 5) n = 0; //loop
};
// ------------------------------------
window.onkeydown = function() {
// 똑같은 숫자지만 물리키가 다름.
//상단 숫자키(1) -> 49
//우측 키패드 숫자키(1) -> 97
//alert(event.keyCode);
if (event.keyCode >= 49 && event.keyCode <= 53) {
dog1.src = "images/dog0" + (event.keyCode - 48) + ".jpg";
} else if (event.keyCode >= 97 && event.keyCode <= 101) {
dog1.src = "images/dog0" + (event.keyCode - 96) + ".jpg";
}
};
// ------------------------------------
// 토글 버튼
sw.onclick = function() {
// alert(sw.src);
// alert(sw.src.endsWith('switch_on.png'));
// endsWith : 패턴 검색
if (sw.src.endsWith('switch_on.png')) {
sw.src = "images/switch_off.png";
document.body.bgColor = "#000";
} else {
sw.src = "images/switch_on.png";
document.body.bgColor = "#FFF";
}
};
</script>
</body>
</html>Reference
この問題について(アカデミー63日目-JavaScript), 我々は、より多くの情報をここで見つけました https://velog.io/@hi-dae-in/학원-63일차-JavaScriptテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol