Location 객체
현재 브라우저에 표시된 html문서의 주소를 얻거나, 브라우저에 새문서를 불러올때 사용
History 객체
브라우저의 히스토리정보를 문서와 문서 상태목록으로 저장하는 객체
이두소스를 적용해서 보자
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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>
function goBack()
{
window.history.back(); //window.history.go(-1);
}
</script>
<script>
document.write("현재문서의 주소는" +location.href + "입니다.");
</script>
<br><br>
<button onclick="goBack()">이전 페이지로 가기</button>
</head>
<body>
</body>
</html>
screen 객체
screen.width screen.height window.outerWidth window.outerHeight 현재 브라우저 창의 크기를 반환
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!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>
function goBack()
{
window.history.back(); //window.history.go(-1);
}
</script>
<br><br>
<button onclick="goBack()">이전 페이지로 가기</button>
</head>
<body>
<script>
document.write("현재문서의 주소는" +location.href + "입니다.<br>");
document.write("현재 화면 너비 :" + screen.width + "픽셀입니다.<br>");
document.write("현재 화면 높이 :" + screen.height + "픽셀입니다.<br>");
document.write("브라우저 너비 :" + window.outerWidth + "픽셀입니다.<br>");
document.write("브라우저 높이 :" + window.outerHeight + "픽셀입니다.<br>");
</script>
</body>
</html>
정규표현식
모든종류의 문자열 검색을 할때 사용한다.
문법) /검색패턴/플래그
^ : 시작 $ : 끝 /d : 숫자 /s : 공백, 탭, 문자와 일치 [] : [1-9] 1부터 9까지
/abc/ : 정확히 “abc”만 일치됨 /./ : 한글자를 나타냄 /[a-z]/ : a부터 z사이의 한글자와 일치 /\w\ :한자리의 문자나 숫자 예를들어 “8”, “A” /^\d/ : 문자열시작이 한자리의숫자 “123” /\d\d$/ : 예를들면) “car01”, “product82”
수량한정자
- : 0 회이상반속 a*는 “”, “a”, “aa”, “aaa”를 나타낸다
- : 1회이상
? : 0또는 1회이상반복 {m} : m회 a{3} “aaa”만 나타낸다. {m,n} : m회이상 n회이하 a{1,3} “a”, “aa”, “aaa {ab} : 그룹화 {ab}* “”, “ab”, “abab”
/.+/ : 어떤 문자가1회이상 반복되는가 /\w/ : 어떤 문자나 숫자로 이루어진 문자열 ^[1-9][0-9]$ : 처음 숫자가 0이아니고 전체가 숫자 (가격) /^\d{6}-\d{7}$/ : 중간에 -이 있는 주민등록번호 /(Good)?Bye/ :”GoodBye”또는 “BUY”
회원가입 창 만들기
정상적으로 입력이됬을때 form이들어가는 정규표현식 만들기
onsubmit : submit버튼을 누르면 onsubmit이 실행되어 validate 함수가 실행되고 return 값이 true일 경우에만 폼을 전송합니다.
name : 서버로넘길대 값이다.
var datePattern2 = /^(19|20)\d{2}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[0-1])$/; 이것을 한번보면 , 시작두글자는 19이나 20이고 그뒤는 2글자가온다 - 09월이거나 10~12월이오고 -
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!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>회원가입</title>
<script>
// 이메일 체크 정규식
function isEmail(asValue)
{
var regExp = /^[0-9a-zA-Z]([-_\.])?[0-9a-zA-Z]*@[0-0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2.3}$/i;
//var regExp = /^[0-9a-zA-z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
return regExp.test(asValue);
}
//핸드폰 번호 체크 정규식
function isCell(asValue)
{
var regExp = /^01(?:0|1|[6-9])-(?:\d{3}|\d{4})-\d{4}$/;
return regExp.test(asValue);
}
function validate()
{
//아이디 패턴
var idPattern = /[a-zA-Z0-9_-]{6,20}/;
//비밀번호 패턴
var pwPattern = /[a-zA-Z0-9~!@#$%^&*()_+|<>?:{}]{6,20}/;
//이름 패턴
var namePattern = /[a-zA-Z가-힣]/;
//날짜 패턴
var datePattern2 = /^(19|20)\d{2}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[0-1])$/;
// 아이디 체크
if(document.form1.userid.value.trim() == "")
{
alert("아이디를 입력하세요.");
document.form1.userid.focus();
return false;
}
if(!idPattern.test(document.form1.userid.value))
{
alert("아이디는 6~20자의 영문 대소문자, 숫자와 특수기호(_,-)만 사용가능합니다.");
document.form1.userid.value = "";
document.form1.userid.focus();
return false;
}
if(document.form1.pwd1.value.trim() == "")
{
alert("비밀번호를 입력하세요.");
document.form1.pwd1.focus();
return false;
}
if(!pwPattern.test(document.form1.pwd1.value))
{
alert("비밀번호는 6~20자의 영문 대소문자, 숫자와 특수기호만 사용가능합니다.");
document.form1.pwd1.value = "";
document.form1.pwd1.focus();
return false;
}
if(document.form1.pwd2.value.trim() == "")
{
alert("비밀번호를 입력하세요.");
document.form1.pwd2.focus();
return false;
}
if(document.form1.pwd1.value != document.form1.pwd2.value)
{
alert("비밀번호, 비밀번호확인이 일치하지않습니다.");
document.form1.pwd1.focus();
return false;
}
if(document.form1.name.value.trim() == "")
{
alert("이름을 입력하세요.");
document.form1.name.focus();
return false;
}
if(!namePattern.test(document.form1.name.value))
{
alert("한글과 영문 대소문자를 사용하세요. (특수기호, 공백사용불가)");
document.form1.name.focus();
return false;
}
document.form1.action = "js_ex1.html"; //속성값을 action을 넣어서 담아주고
document.form1.submit(); //submit을 보내준다.
}
</script>
</head>
<body>
<h3>회원가입</h3>
<form name="form1" method="post" onsubmit="return validate();">
아이디(6~20 문자) :
<input type="text" id="userid" name="userid" maxlength="20"/><br>
비밀번호 : <input type="password" id="pwd1" name="pwd1"/><br>
비밀번호확인 : <input type="password" id="pwd2" name="pwd2" maxlength="20"/><br>
이름 : <input type="text" id="name" name="name" maxlength="20"/><br>
주소 : <input type="text" id="addr" pattern="{2,20}"/><br>
생일 : <input type="date" id="birthday"/><br>
이메일 : <input type="text" id="email"/><br>
휴대폰 : <input type="text" id="phone"/><br>
<br>
<input type="submit" value=" 확 인 "/>
<input type="reset" value=" 다시입력 "/><br>
</form>
</body>
</html>
비밀번호랑 비밀번호 확인이랑같은지 확인해보았다.
confirm()
사용자가 확인이나 취소를 누르면 그결과를 불리언값으로 반환함
1
2
3
4
5
6
7
8
9
10
if(confirm("회원가입을 하시겠습니까?"))
{
// 회원가입을 하시겠습니까
document.form1.action ="js_ex1.html";
document.form1.submit();
}
else
{
alert("회원가입이 취소되었습니다.");
}
확인이나 취소버튼을 누를때 comform태그를 많이 사용한다.