2021.06.25
ex27_messagebox.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>
<!--
메세지 박스
- Dialog box
1. alert() ****
- 메세지 전달
2. confirm() *****
- 메세지 전달 -> 사용자 의사 확인 -> Yes or No 선택
3. prompt()
- 사용자에게 정보 입력
- 디자인 수정 불가
-->
<h1>Message box</h1>
<form name="form1">
<input type="button" value="버튼1" name="btn1">
<input type="button" value="버튼2" name="btn2">
<input type="button" value="버튼3" name="btn3">
</form>
<script>
var btn1 = document.form1.btn1;
var btn2 = document.form1.btn2;
var btn3 = document.form1.btn3;
btn1.onclick = function() {
alert(100);
alert(true);
alert('문자열');
alert(new Date()); // 문자열
};
btn2.onclick = function() {
// confirm('메세지');
var result = confirm('정말 삭제하시겠습니까?');
console.log(result); // 반환값 boolean
if(result){
} else {
}
};
btn3.onclick = function() {
// prompt('메시지', '초기값');
var age = prompt('나이를 입력하세요.', ''); // 반환값
if (age >= 19) {
location.href = 'http://google.com';
} else {
alert('미성년자는 가입할 수 없습니다.');
}
};
// **** 결론 : 자바스크립트의 함수는 모두(100%) 객체 메소드이다.(귀속 함수)
// : 자바스크립트는 독립 함수라는 존재가 없다.
// : 자바스크립트는 전역 함수라는 존재가 없다.
// : 자바스크립트는 전역 변수라는 존재가 없다.
//★★★★★ 모든 전역 변수와 모든 전역 함수는 (자동으로) window 객체의 프로퍼티가 된다.★★★★★
// 전역변수
var num = 10;
// 함수
// alert();
// 독립함수 -> 전역함수
// 재정의
// function alert() {
// }
var obj = {
name: '홍길동', // 프로퍼티
age: 20,
// 귀속함수 > 메소드
hello: function() {
console.log(1);
console.log(this); // this == obj
}
};
// 함수도 값이기 때문에 덮어쓰기가 가능하다.
obj.hello = function() {
console.log(2);
}
// hello(); // X
obj.hello(); // O
// 객체에 변수를 추가하면 -> 프로퍼티
obj.gender = '남자'; // 프로퍼티 추가
// 전역변수 생성
var program = 'test';
// 아래와 같이 자동으로 처리
// window.program = 'test';
console.log(program);
console.log(window.program);
// 전역 함수 생성
function test() {
console.log('function test');
}
//아래와 같이 자동으로 추가
// window.test = function() {
// console.log('function test');
// };
test();
window.test();
// window는 최상위 객체이며 유일하기 때문에 생략가능*****
// window.alert(100);
alert(100); // 단독으로 사용하는 것은 대부분 window의 메소드이다.
// window.confirm();
// window.prompt();
// 전역함수에서 작성한 this는 항상 window객체를 말한다.
// this : 메소드를 소유하고 있는 객체
// window.aaa = function() {};
function aaa() {
console.log(this); // this == window
}
aaa();
</script>
</body>
</html>ex28_form.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>
body { margin-bottom: 500px; }
#tbl1 { border: 1px solid black; border-collapse: collapse; }
#tbl1 th, #tbl1 td { border: 1px solid black; padding: 5px; }
</style>
</head>
<body>
<!--
BOM
- window
- window의 자식 : screen, history, location, document
- document의 자식 : image, link, form
- form의 자식 : text, button, radio, checkbox..
-->
<h1>폼</h1>
<form name="form1">
<h2>텍스트 박스</h2>
<input type="text" name="txt1">
<input type="button" value="버튼" name="btn1">
<h2>로그인</h2>
아이디: <input type="text" name="txtID"><br>
암호: <input type="password" name="txtPW"><br>
<input type="button" value="로그인" name="btnLogin">
<h2>체크박스</h2>
<label>동의: <input type="checkbox" name="cb1"> </label>
<input type="button" value="확인" name="btn2">
<h2>약관</h2>
<fieldset>어쩌구 저쩌구..</fieldset><br>
<label>약관 동의: <input type="checkbox" name="cb2"> </label>
<input type="button" value="다음 단계로" name="btn3" disabled>
<h2>게시물</h2>
<table id="tbl1">
<tr>
<th><input type="checkbox" name="cbAll"></th>
<th>제목</th>
<th>작성자</th>
<th>날짜</th>
</tr>
<tr>
<td><input type="checkbox" name="cbItem"></td>
<td>Lorem ipsum dolor sit amet.</td>
<td>홍길동</td>
<td>2021-06-25</td>
</tr>
<tr>
<td><input type="checkbox" name="cbItem"></td>
<td>Lorem ipsum dolor sit amet.</td>
<td>홍길동</td>
<td>2021-06-25</td>
</tr>
<tr>
<td><input type="checkbox" name="cbItem"></td>
<td>Lorem ipsum dolor sit amet.</td>
<td>홍길동</td>
<td>2021-06-25</td>
</tr>
<tr>
<td><input type="checkbox" name="cbItem"></td>
<td>Lorem ipsum dolor sit amet.</td>
<td>홍길동</td>
<td>2021-06-25</td>
</tr>
<tr>
<td><input type="checkbox" name="cbItem"></td>
<td>Lorem ipsum dolor sit amet.</td>
<td>홍길동</td>
<td>2021-06-25</td>
</tr>
<tr>
<td><input type="checkbox" name="cbItem"></td>
<td>Lorem ipsum dolor sit amet.</td>
<td>홍길동</td>
<td>2021-06-25</td>
</tr>
<tr>
<td><input type="checkbox" name="cbItem"></td>
<td>Lorem ipsum dolor sit amet.</td>
<td>홍길동</td>
<td>2021-06-25</td>
</tr>
<tr>
<td><input type="checkbox" name="cbItem"></td>
<td>Lorem ipsum dolor sit amet.</td>
<td>홍길동</td>
<td>2021-06-25</td>
</tr>
<tr>
<td><input type="checkbox" name="cbItem"></td>
<td>Lorem ipsum dolor sit amet.</td>
<td>홍길동</td>
<td>2021-06-25</td>
</tr>
<tr>
<td><input type="checkbox" name="cbItem"></td>
<td>Lorem ipsum dolor sit amet.</td>
<td>홍길동</td>
<td>2021-06-25</td>
</tr>
<tr>
<td><input type="checkbox" name="cbItem"></td>
<td>Lorem ipsum dolor sit amet.</td>
<td>홍길동</td>
<td>2021-06-25</td>
</tr>
</table>
<h2>라디오 버튼</h2>
<div>
<h3>선호하는 언어를 선택하세요.</h3>
<label><input type="radio" name="rb" value="Java"> Java</label><br>
<label><input type="radio" name="rb" value="SQL"> SQL</label><br>
<label><input type="radio" name="rb" value="HTML"> HTML</label><br>
<label><input type="radio" name="rb" value="CSS"> CSS</label><br>
<label><input type="radio" name="rb" value="JavaScript"> JavaScript</label><br>
<br>
<input type="button" value="확인" name="btn4">
</div>
<div>
<h3>색상을 선택하세요.</h3>
<label><input type="radio" name="rbColor" value="tomato">빨강</label><br>
<label><input type="radio" name="rbColor" value="gold">노랑</label><br>
<label><input type="radio" name="rbColor" value="cornflowerblue">파랑</label><br>
<label><input type="radio" name="rbColor" value="white" checked>하양</label><br>
<label><input type="radio" name="rbColor" value="black">검정</label><br>
</div>
<h2>셀렉트 박스</h2>
<div>
<label>동물: </label>
<select name="sel1" multiple size="7">
<option value="1">강아지</option>
<option value="2">고양이</option>
<option value="3">병아리</option>
<option value="4">토끼</option>
<option value="5">거북이</option>
</select>
<br><br>
<input type="button" value="확인5" name="btn5">
<input type="button" value="확인6" name="btn6">
<input type="button" value="확인7" name="btn7">
<input type="button" value="확인8" name="btn8">
<input type="button" value="확인9" name="btn9">
</div>
</form>
<script>
var txt1 = document.form1.txt1;
var btn1 = document.form1.btn1;
var txtID = document.form1.txtID;
var txtPW = document.form1.txtPW;
var btnLogin = document.form1.btnLogin;
var btn2 = document.form1.btn2;
var cb1 = document.form1.cb1;
var btn3 = document.form1.btn3;
var cb2 = document.form1.cb2;
var cbAll = document.form1.cbAll; //단수
var cbItem = document.form1.cbItem; //복수 -> 배열
var btn4 = document.form1.btn4;
var rb = document.form1.rb; //복수 -> 배열
var rbColor = document.form1.rbColor; //복수 -> 배열
var sel1 = document.form1.sel1;
var btn5 = document.form1.btn5;
var btn6 = document.form1.btn6;
var btn7 = document.form1.btn7;
var btn8 = document.form1.btn8;
var btn9 = document.form1.btn9;
//텍스트 박스 조작
//1. 텍스트 박스 자체
//2. 텍스트 박스의 값 > 문자열 조작 *****
btn1.onclick = function() {
//txt1.readOnly = true; // 텍스트 박스 자체 조작
};
// 텍스트 박스의 값 조작
btnLogin.onclick = function() {
//유효성 검사
// - 유효성 검사는 되도록 유효하지 않은 걸 찾아야 로직 구현이 편하다.
//1. 아이디: 필수 입력, 4~12자 이내
//2. 암호: 필수 입력, 4~12자 이내
// 필수 입력 확인하는 방법
// 1. txtID.value == '' -> 빈문자열인지 확인
// 2. txtID.value.length == 0 -> 문자열길이가 0인지 확인
if (txtID.value.trim() == '') {
alert('아이디를 반드시 입력하세요');
txtID.focus(); //onfocus -> 텍스트 박스에 커서의 포커스가 맞춰짐.
return; // 빈리턴문. 함수 종료
}
if (txtID.value.trim().length < 4 || txtID.value.trim().length > 12) {
alert('아이디를 4자~12자 이내로 입력하세요.');
//txtID.focus();
txtID.select(); // 선택된 상태로 포커스가 맞춰짐.
return;
}
if (txtPW.value.trim() == '') {
alert('암호를 반드시 입력하세요');
txtPW.focus();
return;
}
if (txtPW.value.trim().length < 4 || txtPW.value.trim().length > 12) {
alert('암호를 4자~12자 이내로 입력하세요.');
//txtPW.focus();
txtPW.select();
return;
}
//여기에 도착~
//올바른 데이터를 입력!!
//전송~
alert('success');
};
// ----------------------------------------------------
btn2.onclick = function() {
//체크박스의 상태?
alert(cb1.checked); // 체크하면 true, 체크 안하면 false
};
//체크박스를 클릭해서 체크 상태를 변화할 때 > 어떤 이벤트?
//1. onclick
//2. onchange : 변화가 일어났는지 감지하는 이벤트 //권장
cb2.onchange = function() {
//alert(cb2.checked);
if (cb2.checked) {
btn3.disabled = false;
} else {
btn3.disabled = true;
}
};
btn3.onclick = function() {
location.href = '다음페이지';
};
// ----------------------------------------------------
cbAll.onchange = function() {
//cbItem -> for문
// if (cbAll.checked) {
// for (var i=0; i<cbItem.length; i++) {
// cbItem[i].checked = true;
// }
// } else {
// for (var i=0; i<cbItem.length; i++) {
// cbItem[i].checked = false;
// }
// }
for (var i=0; i<cbItem.length; i++) {
cbItem[i].checked = cbAll.checked;
}
};
// ----------------------------------------------------
btn4.onclick = function() {
rb.forEach(function(item, index) {
//alert(item.checked);
//alert(item.value);
if (item.checked) {
alert(item.value);
}
});
};
// ----------------------------------------------------
rbColor.forEach(function (rb, index) {
rb.onclick = function() {
//alert(rb.value);
//alert(event.srcElement.value); //권장!!!
document.body.bgColor = event.srcElement.value;
};
});
// ----------------------------------------------------
btn5.onclick = function() {
// 선택한 <option> 접근
// alert(sel1.value); //읽기
sel1.value = 4; //쓰기
};
btn6.onclick = function() {
// 선택 항목(<option>)
// - <option> 태그의 index
// alert(sel1.selectedIndex); //선택된 <option>의 index
sel1.selectedIndex = 2;
// 셀렉트 박스 > 선택 항목 조작
// 1. value
// 2. selectedIndex
};
btn7.onclick = function() {
//var flag = false;
for (var i=0; i<sel1.options.length; i++) {
if (sel1.options[i].text == '햄스터') {
//flag = true;
//break;
return;
}
}
//if (!flag) {
// <option> 동적 추가
var op = new Option(); // 생성자 함수. <option> 태그 생성
op.value = 6; // <option value="6"></option>
op.text = '햄스터'; // <option value="6">햄스터</option>
//<select>에 <option> 추가 - options 컬렉션
sel1.options.add(op);
//}
};
btn8.onclick = function() {
//<option> 삭제
//sel1.options.remove(3);
//sel1.options.remove(선택한 옵션의 index);
if (sel1.options.length > 1) {
sel1.options.remove(sel1.selectedIndex);
}
};
btn9.onclick = function() {
//다중 선택 > 선택한 항목들?
for (var i=0; i<sel1.options.length; i++) {
// 체크박스, 라디오버튼 : checked
// 셀렉트 박스 : selected
//alert(sel1.options[i].selected);
if (sel1.options[i].selected) {
alert(sel1.options[i].text + ':' + sel1.options[i].value);
}
}
};
</script>
</body>
</html>ex29.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>
<!--
다량의 태그에 일괄적으로 이벤트 적용시 생기는 상황
-->
<img src="images/cat01.jpg" name="img">
<img src="images/cat02.jpg" name="img">
<img src="images/cat03.jpg" name="img">
<script>
var img = document.all.img;
// alert(img.length);
for(var i=0; i<img.length; i++) { // <- var i = 0 전역변수
// end loop -> 3
// 이벤트를 등록하는 것. 함수는 행동이 발생했을때 실행된다.
img[0].onclick = function() { alert(i); };
img[1].onclick = function() { alert(i); };
img[2].onclick = function() { alert(i); };
// 이벤트 핸들러(역할)
// i번째 이미지 태그의 멤버 메소드(구문)
img[i].onclick = function() {
// 누가 나를 불렀나?
// - 3개의 이미지 중 어떤 이미지를 클릭했을 때 이 함수가 호출되었나?
// alert('Click');
// 지금 이벤트(onclick)를 발생시킨 주체가 누구? -> 이미지 중 하나
// alert(event.srcElement.src);
// event.srcElement.width = 500;
// Uncaught TypeError: Cannot read property 'src' of undefined
// alert(img[i].src); -> 나중에 이미지를 클릭한 이미지를 접근하기 위해서 img[i] 표현을 사용
// -> 루프 변수 i의 상태가 루프를 진행할 때 당시의 값이 아니기 때문에 사용 불가능!!
// -> event.srcElement 또는 this를 사용하자!!
// -> event.srcElement를 더 권장.
// alert(i);
//alert(this.src);
alert(event.srcElement === this);
//1. i가 왜 0,1,2가 아닌가?
// -> 시간차 때문에..사건의 발생 순서 때문에..
//2. i가 왜 있어? > i가 왜 살아있나? > Closure(클로저)
// -> 전역변수
};
}
</script>
</body>
</html>
모르면 괴롭고 알면 즐겁다.