190624_Day51
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>이미지 테스트</title>
<script type="text/javascript">
function imageChange2(imageName) //자바 클래스와 등가, 자바스크립트 함수는 일급 객체 , 고로 메소드안에 메소드도 가능하다!
{
console.log('img3의 이미지 소스 = ' + document.img3.src);
if(imageName == 'jpg'){
document.img3.src = "ebi.jpg"
}else if ( imageName == 'hak'){
document.img3.src = "hak.png"
}else if ( imageName == 'gif'){
document.img3.src = "ebi.gif"
}
}
</script>
</head>
<body>
<h3>자바스크립트를 통한 이미지 조작</h3>
<hr>
<img
name = "img3"
src = "ebi.gif"
width="400" height="300"
onmouseover="imageChange2('jpg')"
onmouseout = "imageChange2('hak')"
onmousedown = "imageChange2('gif')"
>
</body>
</html><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>오늘의 날짜 출력</title>
<script type="text/javascript">
function printDate(){
var now = new Date();//now: 현재 날짜의 모든 정보가 저장.
var dayStr=['일','월','화','수','목','금','토'];
//dayStr의 자료형? Array배열!!
var dayStr='일월화수목금토';
// 0123456
//dayStr의 자료형? String문자열!!
var year = now.getFullYear();
var month = now.getMonth()+1;//1월~12월 :0~11
var date = now.getDate();
var h = now.getHours();
var m = now.getMinutes();
var s = now.getSeconds();
var day = now.getDay();//일요일~토요일 (0~6)
/*
document.write(year+'년 '+month+'월 '+date+'일 '+
h+'시 '+m+'분 '+s+'초 ('+dayStr[day]+'요일)');
document.write('<br>'+year+'년 '+month+'월 '+date+'일 '+
h+'시 '+m+'분 '+s+'초 ('+dayStr.substr(day,1)+'요일)');
document.write('<br>'+year+'년 '+month+'월 '+date+'일 '+
h+'시 '+m+'분 '+s+'초 ('+dayStr.charAt(day)+'요일)');
*/
var str=year+'년 '+month+'월 '+date+'일 '+
h+'시 '+m+'분 '+s+'초 ('+dayStr.charAt(day)+'요일)';
var d1 = document.getElementById('d1');
//d1의 자료형? Element ---> 속성 innerHTML
d1.innerHTML = str;
setTimeout('printDate()', 1000);
//1초후에 printDate()호출
}//printDate
</script>
</head>
<!-- today_print.html -->
<body onload = "printDate()">
<!--
body 엘리먼트의 내용이 브라우저에 전체 출력 되었을 때 실행될것 onload
-->
<H3>오늘 날짜</H3>
<hr>
<!--
<script type="text/javascript">
var now = new Date();
var dayStr = ['일','월','화','수','목','금','토'];
var dayStr = '일월화수목금토';
var year = now.getFullYear();
var month = now.getMonth();
var date = now.getDate();
var h = now.getHours();
var m = now.getMinutes();
var s = now.getSeconds();
var day = now.getDay();
document.write(year + '년' + month + '월' + date + '일' +
h + '시' + m + '분' + s + '초 (' + dayStr[day] + ')');
document.write('<br>' + year + '년' + month + '월' + date + '일' +
h + '시' + m + '분' + s + '초 (' + dayStr.substr(day,1) + ')');
document.write('<br>' +year + '년' + month + '월' + date + '일' +
h + '시' + m + '분' + s + '초 (' + dayStr.charAt(day) + ')');
//day가 요일 일(0) ~ 토(1)
</script>
-->
<div id="d1"></div>
</body>
</html><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>회원가입 폼</title>
<script type="text/javascript">
/*
등록 버튼 클릭시 validCheck() 호출 -> 유효성 검사
1. 아이디, 비번, 비번확인, 이름, 주민, 주소에 대한 빈값 체크
-> 빈값일 때 입력 메시지 (alert) 출력
2. 비번과 비번확인 일치 체크
3. 주민번호의 숫자값과 자릿수 체크'
4. 직업을 선택했는지 체크
=> 1~4 체크가 잘 되었을 때 welcom.html 페이지로 이동!
=> <form>태그의 속성 action에 명시된 url이동! -> submit()함수 사용
=> document.form명.submit();
*/
function validCheck()
{
var f = document.joinForm;
var id = f.id.value;
var pass = f.pass.value;
var pass2 = f.pass2.value;
var name = f.name.value;
var ssn1 = f.ssn1.value;
var ssn2 = f.ssn2.value;
var phone1 = f.phone1.value;
var phone2 = f.phone2.value;
var phone3 = f.phone3.value;
var addr = f.addr.value;
var job = f.job.value;
// pass, pass 2 name ssn1 ssn2 phone1 2 3 addr job
if(id == '')
{
alert("입력 안된 값이 있어요!");
f.id.focus();
}else if(pass == '' || pass2 == ''){
alert("비번 확인!");
f.pass.focus();
}else if (pass != pass2)
{
alert("비밀번호 불일치");
}else if(name == ''){
alert("이름 확인!");
f.name.focus();
}else if(ssn1 == '' || ssn2 == ''){
alert("주민번호 확인!");
f.ssn1.focus();
}else if (isNaN(ssn1) || isNaN(ssn2) || ssn1.length != 6 || ssn2.length != 7){
alert("올바르지 않은 주민번호!");
f.ssn1.value = '';
f.ssn2.value = '';
f.ssn1.focus();
}else if(phone1 == '' || phone2 == '' || phone3 == ''){
alert("휴대폰 번호 확인!");
f.phone1.focus();
}else if(addr == '' ){
alert("주소 확인!");
f.addr.focus();
}else if(job == '==선택==' ){
alert("직업 확인!");
f.job.focus();
}else{
return true;
//submit 버튼 클릭시 action속성에 명시된 url이동
}
return false; //submit실행 x
}
function juminMove()
{
console.log('ssn1의 입력값>>>'+
document.joinForm.ssn1.value);
if(document. joinForm. ssn1. value.length == 6)
//자료형 document form 엘리먼트 input엘리먼트 string
{
document.joinForm.ssn2.focus();
}
}
</script>
</head>
<body>
<center>
<h3>회원가입폼</h3>
<form name = "joinForm" action = "welcome.html">
<table cellpadding="5" bgcolor="eeeeee">
<tr align="right">
<td>I D:</td>
<td><input type="text" name="id" >
<input type="button" value="중복확인" tabindex="-1">
<!-- tabindex로 바로 tab으로 넘어갈 수 있다. -->
</td>
<!--
<input>태그의 속성
readonly ===> 읽기전용(쓰기금지) : 자바 setEditable(false)
disabled ===> 비활성화 : 자바 setEnabled(false)
-->
</tr>
<tr>
<td>비 번:</td>
<td><input type="password" name="pass"> </td>
</tr>
<tr>
<td>비번확인:</td>
<td><input type="password" name="pass2"></td>
</tr>
<tr>
<td>이 름:</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>주민번호:</td>
<td><input type="text" name="ssn1" size="6"
maxlength="6" onkeyup = "juminMove()">
-
<input type="password"
name="ssn2"
size="7"
maxlength="7">
</td>
</tr>
<tr>
<td>전화번호:</td>
<td><input type="text" name="phone1" size="4"> -
<input type="text" name="phone2" size="4"> -
<input type="text" name="phone3" size="4">
</td>
</tr>
<tr>
<td>주소</td>
<td><input type="text" name="addr"></td>
</tr>
<tr>
<td>직업</td>
<td>
<select name="job">
<option >==선택==</option>
<option >학생</option>
<option>공무원</option>
<option>언론/출판</option>
<option>군인/경찰</option>
<option>일반사무직</option>
<option>영업직</option>
<option>기술/전문직</option>
<option>보건/의료</option>
<option>자영업</option>
<option>주부</option>
<option>기타</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<!-- <input type="submit" value="등록"> -->
<button type = "submit" onclick = "return validCheck()">등록</button>
<!-- <input type="reset" value="취소"> -->
<button type="reset">취소</button>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>정규식(정규표현식) 테스트( RegularExpression )
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>정규식 테스트</title>
</head>
<body>
<h3>RegExp 테스트</h3>
<script type="text/javascript">
var str = ' script ' ; // 맨 앞 공백 3개, 뒤에 공백 2칸
//앞 뒤 공백 제거하기
str.trim();
document.write(str + " " + str.trim().length);
var str = ' script ' ;
//trim 쓰지 말고...
document.write("<br>" + str + " " + str.replace(' ', '').length);
//맨 앞에 빈칸만 없애주네...
document.write("<br>" + 'str의 문자열 길이 = ' +str.replace(/ /g,'').length);
document.write('<br>str의 문자열길이(replace)='+
str.replace(/(^\s+)|(\s+$)/g,'').length);
//패턴 검사 !! (데이터 검사 - 문자, 숫자, 길이)
//횟수 관련 부호 : ?:(0,1) *:( 0 ~ 무 한 대 ) +:( 1 ~ 무한대 )
var a = ' '; var b = []; var c = {}; var d = /표현식/;
var e = new RegExp("패턴");
// a의 자료형 String
// b의 자료형 배열
// c의 자료형 JSON{키,밸류, 키,밸류 ...}
// d,e의 자료형 RegExp객체
var str2 = 'abcA';
// str2 영문자 검사!
var regExp1 = /^[a-zA-Z]+$/
// /하고 ^ 사이에 공백 있으면 안되네...
// var regExp1 = /패턴/플래그;
// 패턴내의 '^' : 문장의 시작
// $ : 문장의 끝
// 참고) [^abc] ==> a, b ,c 문자를 제외하고~
// ^[abc] ==> a 또는 b 또는 c문자로 시작하는 ~
document.write('<br> 영문자 검사' + regExp1.test(str2) )
//str2문자열을 regExp1패턴에 검사해서 일치하면 true를 리턴!
var str3 = '12345';
var regExp2 = new RegExp('^[\\d]+$'); // ^[\d]+$ 에서 \d 가 0~9
// 따옴표 때문에 \\d 쓰는것.
document.write('<br>숫자 검사 : ' + regExp2.test(str3));
var jumin1 = '960202';
var juminPattern1 = /^[\d]{6}$/;
// {m, n} : m:최소값 n:최대값
// {3, 6} : 횟수 3이상 6이하, {6} : 6회, {3,} : 3회 이상
document.write('<br>주민번호 앞자리 검사 : ' +
juminPattern1.test(jumin1) );
// 문제 ) 아이디를 검사 할 수 있는 패턴 idPattern을 정의하시오.
// idPattern -> regExp객체
// 아이디 조건 => 8~12자리, 영문자와 숫자조합, 영문자 시작
var idcheck = 'asdfasdf';
var idcheck = 'asdfasdf12';
var idcheck = 'gil123df';
var idPattern2 = new RegExp('^[a-zA-Z]{1}[a-zA-Z\\d]{7,11}$');
document.write('<br>' + idcheck + ' 아이디 패턴을 검사! ' + idPattern2.test(idcheck));
//문제 ) 비밀번호 검사 (5자리)
var pass = 'aa!s5';
var passPattern2 = new RegExp('/(?=.*\\d)(?=.*[~`!@#$%\^&*()-+=])(?=.*[a-zA-Z]){5}$/');
document.write('<br>' + pass + ' 비밀번호 패턴을 검사! ' + passPattern2.test(pass));
</script>
</body>
</html><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>새창열기테스트</title>
<script>
function win_open(){
//window == 브라우저
//window.open('새창에보여질URL주소','타겟명','윈도우(=브라우저)특성');
//window.open(); 빈탭열기
//window.open('child_window.html','_self'); 현 브라우저에 명시된 URL열기
window.open('child_window.html','childWin',
'toolbar=yes,location=0,status=1,menubar=1,'+
'scrollbars=no,resizable=yes,width=300,height=200,'+
'top=100,left=100');
}
</script>
</head>
<!-- window_openTest.html -->
<body>
<h3>새창열기테스트</h3>
<hr>
<form name="parentForm">
이름: <input type="text" name="username">
</form>
<button onclick="win_open()">새창열기</button>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>자식창</title>
<script type="text/javascript">
// 부모창의 username값 얻어오기
// 부모 윈도우창에 대한 레퍼런스 : opener( ==open window!! )
// opener.document == 부모창의 문서, document.~ == 현재 문서
//alert('부모폼의 이름 : ' + opener.document.parentForm.username.value);
function initForm(){
//alert('부모폼의 이름:'+ opener.document.parentForm.username.value);
document.childForm.username.value
= opener.document.parentForm.username.value;
}
function toParent(){
opener.document.parentForm.username.value
= document.childForm.username.value;
}
</script>
</head>
<!-- child_window.html -->
<body onload="initForm()">
<h3>child_window(자식창)</h3>
<hr>
<form name="childForm">
이름: <input type="text" name="username">
</form>
<br>
<button onclick="toParent()">이름전달(to부모창)</button>
</body>
</html>'클라우드 기반 웹 개발자 과정 공부 > JS' 카테고리의 다른 글
| 190621_Day50 <JavaScript4> (0) | 2019.06.21 |
|---|---|
| 190620_Day49 <JavaScript3> (0) | 2019.06.20 |
| 190619_Day48 <JavaScript - 1,2> (0) | 2019.06.19 |