'HTML,CSS,JS,jQuery,AJAX > Related site' 카테고리의 다른 글
| jquery (0) | 2021.02.24 |
|---|---|
| 교육 - w3schools, TCPSchool (0) | 2021.02.22 |
| tag 테스트 할 수 있는 곳 (0) | 2021.02.22 |
| HTML5 자바스크립트 API (0) | 2021.02.22 |
| 교육site - 생활코딩, microsoft (0) | 2021.02.22 |
HTML,CSS,JS,jQuery,AJAX
- jQuery API사이트 - jQuery공식 사이트 2021.03.02
- 정규식 표현 2021.03.02
- jQuery - 회원가입 + 유효성 검사 2021.03.02
- js - 반복문이용한 구구단 2021.02.24
- &&(그리고)와 ||(또는)을 이용한 조건문 2021.02.24
- JavaScript 연산자-산술,후위전위증감,대입,복합,비교,배열.. 2021.02.24
- JavaScript 주석 2021.02.24
- required="required" -> 필수입력 속성 2021.02.24
jQuery API사이트 - jQuery공식 사이트
2021. 3. 2. 18:28
정규식 표현
2021. 3. 2. 18:16
https://ko.wikipedia.org/wiki/%EC%A0%95%EA%B7%9C_%ED%91%9C%ED%98%84%EC%8B%9D
정규 표현식 - 위키백과, 우리 모두의 백과사전
위키백과, 우리 모두의 백과사전. 노랑색 강조 부분은 다음 정규식을 사용했을 때 매치된 것이다. 정규 표현식(正規表現式, 영어: regular expression, 간단히 regexp[1] 또는 regex, rational expression)[2][3] 또
ko.wikipedia.org
'HTML,CSS,JS,jQuery,AJAX > etc' 카테고리의 다른 글
| 편집기 종류 (0) | 2021.02.22 |
|---|---|
| Server Side Script와 Client Side Script (0) | 2021.02.22 |
jQuery - 회원가입 + 유효성 검사
2021. 3. 2. 16:45
runtoyourdream.tistory.com/187
[HTML] 버튼(button)을 만들어서 사용해 보자!
JSP(Java Server Page) FORM 태그를 이용해서 페이지를 작성하다 보면 'INPUT' 타입이 'SUBMIT'이거나 'RESET' 인 것만 사용해봤을텐데요, 기존의 폼(FROM)태그를 이용한 방법에는 기능이 한정되어 있었..
runtoyourdream.tistory.com
CSS3 Button-스타일로 버튼만들기
인터넷 강국 대한민국은 정말 많은 웹사이트가 있습니다. 하지만 그만큼 전문성을 띠지 못하는 저품질 사이트도 굉장히 많죠. 웹표준에 어긋나는 부분 또 웹접근성에 어긋나는 부분을 지키지
nimolove.tistory.com
[JQUERY] 회원가입 유효성 검사
회원 기본 정보 아이디 4~12자의 영문 대소문자와 숫자로만 입력 비밀번호 4~12자의 영문 대소문자와 숫자로만 입력 비밀번호 확인 메일 주소 예) id@domain.com 이름 개인 신상 정보 주민
cho-coding.tistory.com
|
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Gamja+Flower&family=Indie+Flower&display=swap"
rel="stylesheet">
<title>회원가입 form</title>
<!-- jQuery + 유효성검사추가 -->
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.5.1.slim.js"></script>
<script type="text/javascript">
$(document).ready(function checks(){
var idCheck = RegExp(/^[a-zA-Z0-9]{8,15}$/); //id
var emailCheck = RegExp(/^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/); //email
//아이디 유효성 검사
$('#idcheck').click(function() { //id가 idcheck인 버튼을 누르면
if(!idCheck.test($("#id").val())) {
alert("형식에 맞게 입력해주세요");
$("#id").val(""); //초기화
$("#id").focus(); //커서가져다놓기
return false;
} else {
alert("사용가능한 아이디 입니다.");
}
});
//입력하기 버튼을 누르면
$('#submit').click(function() {
//아이디 필수입력
if($('#id').val() == "") {
alert("아이디는 필수입력");
$("#id").focus();
return false;
}
//비밀번호 필수입력
if($('#pwd').val() == "") {
alert("비밀번호는 필수입력");
$("#pwd").focus();
return false;
}
//비밀번호확인 필수 입력
if($('#pwd2').val() == "") {
alert("비밀번호확인은 필수입력");
$("#pwd2").focus();
return false;
}
//비밀번호 일치확인
if($("#pwd").val() != $("#pwd2").val()){
alert("비밀번호가 일치하지 않습니다.");
$("#pwd").val("");
$("#pwd2").val("");
$("#pwd").focus();
return false;
}
//이메일 필수입력
if($('#email').val() == "") {
alert("이메일은 필수입력");
$("#email").focus();
return false;
}
//이메일 유효성 검사
if(!emailCheck.test($("#email").val())) {
alert("이메일을 형식에 맞게 입력해주세요");
$("#email").val("");
$("#email").focus();
return false;
}
});
});
</script>
<style type="text/css">
body {
font-family: 'Gamja Flower', cursive;
}
h1 {
text-align: center;
}
table {
text-align: left;
width: 800;
}
.button {
border: 1px solid skyblue;
background-color: rgba(0,0,0,0);
color: skyblue;
padding: 5px;
border-radius:10px;
}
.button:hover {
color:white;
background-color: pink;
}
</style>
</head>
<body>
<h1> 회원가입 </h1>
<form action="" method="post">
<!-- 11행 2열 -->
<table align="center">
<tr>
<th width="170"></th>
<th></th>
</tr>
<tr>
<td>ID</td>
<td>
<input type="text" placeholder="id를 입력하세요" id="id"> 8~15자의 영문
대소문자와 숫자로만 입력 <input type="button" value="아이디확인" id="idcheck" class="button">
</td>
</tr>
<tr>
<td> 비밀번호 </td>
<td><input type="password" name="pwd" id="pwd"> </td>
</tr>
<tr>
<td> 비밀번호 확인 </td>
<td><input type="password" name="pwd2" id="pwd2"> </td>
</tr>
<tr>
<td> 이 름 </td>
<td><input type="text"></td>
</tr>
<tr>
<td> 전화번호 </td>
<td><input type="text" size="3"> - <input type="text" size="3"> - <input type="text" size="3"> </td>
</tr>
<tr>
<td> e-mail </td>
<td><input type="text" size="20" id="email"> 예)id@naver.com </td>
</tr>
<tr>
<td> 직 업 </td>
<td>
<select>
<option value="job1">주부</option>
<option value="job2">개발자</option>
<option value="job3">요리사</option>
<option value="job4">회사원</option>
<option value="job5">기타</option>
</select> <br>
</td>
</tr>
<tr>
<td> 성 별 </td>
<td>
<input type="radio" name="gender" value="F">여자
<input type="radio" name="gender" value="M">남자
</td>
</tr>
<tr>
<td> 주 소 </td>
<td>
<input type="text" size="5"> <input type="button" value="우편번호검색" id="btnClick" class="button"><br>
<input type="text" size="35"><br>
<input type="text" size="35">
</td>
</tr>
<tr>
<td> 취 미 </td>
<td>
<input type="checkbox" name="hobby" value="travel">여행
<input type="checkbox" name="hobby" value="book">독서
<input type="checkbox" name="hobby" value="walk">산책
</td>
</tr>
<tr>
<td> 자기소개 </td>
<td><textarea rows="10" cols="50"></textarea> </td>
</tr>
<tr>
<td>
<input type="submit" value="입력하기" id="submit" class="button"> <input type="reset" value="취소하기" id="reset" class="button"> </td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
|
cs |
'HTML,CSS,JS,jQuery,AJAX > code by me' 카테고리의 다른 글
| js - 반복문이용한 구구단 (0) | 2021.02.24 |
|---|---|
| html+css - 회원가입 form (0) | 2021.02.23 |
| html+css - Calendar (0) | 2021.02.22 |
js - 반복문이용한 구구단
2021. 2. 24. 23:49
|
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Function,반복문</title>
</head>
<body>
<h1>quiz1 - 구구단 출력</h1>
<button onclick="gugudan()"> 구구단 전체 출력 </button><p>
<script type="text/javascript">
for(a=1;a<11;a++){
document.write(a + "*" + a + "=" + a*a + "<br>");
}
//table생성해서 넣어보기
function gugudan() {
document.write("<h1>구구단 출력 함수</h1><br>");
for(a=2;a<10;a++){
document.write("<h2>" + a + "단</h2><br>")
for(b=1;b<10;b++){
document.write(a + "*" + b + "=" + (a*b) + "\t");
}
document.write("<br><hr>");
}
}
</script>
</body>
</html>
|
cs |
http://localhost:8080/day33_html/quiz/gugudan.html
'HTML,CSS,JS,jQuery,AJAX > code by me' 카테고리의 다른 글
| jQuery - 회원가입 + 유효성 검사 (0) | 2021.03.02 |
|---|---|
| html+css - 회원가입 form (0) | 2021.02.23 |
| html+css - Calendar (0) | 2021.02.22 |
&&(그리고)와 ||(또는)을 이용한 조건문
2021. 2. 24. 23:46
|
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>&&와 ||을 이용한 조건문</title>
</head>
<body>
<script type="text/javascript">
//&&와 ||을 이용한 조건문
var arr;
//arr이 undefined일 경우, arr|[]->arr 또는 []비어있는객체를 대입하기
//에서 비어있는 배열객체를 대입
arr = arr || []; //cf)java array: int[] arr=new int[3]; / String[] arr={"aaa", "bbb", "ccc"};
document.writeln('arr.length : ' + arr.length + '<br/>'); //화면에출력
console.log(arr); //console에 출력
arr[0]='aa';
arr[1]='bb';
arr[2]='cc';
//arr이 배열객체가 존재할 경우, arr배열의 길이를 출력함
arr & document.writeln('arr.length : ' + arr.length + '<br/>');
</script>
</body>
</html>
|
cs |
'HTML,CSS,JS,jQuery,AJAX > HTML+JavaScript' 카테고리의 다른 글
| JavaScript 연산자-산술,후위전위증감,대입,복합,비교,배열.. (0) | 2021.02.24 |
|---|---|
| JavaScript 주석 (0) | 2021.02.24 |
| button event - inline방식과 js internal방식 - alert팝업창, onclick이벤트 (0) | 2021.02.24 |
| 자바스크립트 - 특수문자(줄바꿈,탭,역슬래시,따옴표) (0) | 2021.02.24 |
JavaScript 연산자-산술,후위전위증감,대입,복합,비교,배열..
2021. 2. 24. 23:44
|
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript 연산자</title>
</head>
<body>
<h1>===JavaScript 연산자===</h1>
<script type="text/javascript">
//1.산술 연산자
document.writeln('<h2> 산술연산자 </h2>');
var num = 20; //정수
var str = '20'; //문자열
var bool = true; //boolean
var obj = {}; //빈객체
//1-1.피연산자가 숫자일 경우, 덧셈 연산을 행함
document.writeln('num + 13 : ');
document.writeln(num + 13); //=>33
document.writeln('<br/>');
//1-2.피연산자가 boolean일 경우,
//true는1로 / false는0으로 변환되어 덧셈연산실행
document.writeln('bool + 1 : ');
document.writeln(bool + 1); //=>2
document.writeln('<br/>');
//1-3.피연산자의 한쪽이 문자열일 경우,
//나머지 피연산자도 문자열도 변환되어 접합연산실행
document.writeln('str + 13 : ' + (str+13) + '<br/>'); //=>2013
//1-4.피연산자의 한쪽이 객체일 경우,
//객체는 문자열로 변환되고, 나머지 피연산자도 문자열로 변환되어 문자열 접합연산을 실행
document.writeln('obj + 13 : ' + (obj+13) + '<br/><br/><hr>'); //=>[object Object]13
//2.후위증감 연산자
//먼저 피연산자의 값을 반환하고, 피연산자의 값을 1증감시킴
document.writeln('<h2> 후위,전위증감 연산자 </h2>');
var x=3;
var y=x++;
document.writeln('x : ' + x + ', y : ' + y + "<br/>");
//2.전위증감 연산자
var x=3;
var y=++x;
document.writeln('x : ' + x + ', y : ' + y + "<br/><br/><hr>");
//3.대입 연산자
document.writeln('<h2> 대입 연산자 </h2>');
var a=5;
a += 3;
document.writeln('a += 3' + a + "<br/>");
a=5;
a -= 3;
document.writeln('a -= 3' + a + "<br/>");
a=5;
a %= 3;
document.writeln('a %= 3' + a + "<br/><br/><hr>");
//4.복합 연산자
//대입연산자와 비트연산자를 함께 사용
document.writeln('<h2> 복합 연산자 </h2>');
a = 5;
a &= 2; //비트 AND연산을 통해 a가 짝수인지 검사 가능
document.writeln('a &= 2' + a + "<br/>");
a = 5;
a |= 2; //비트 OR연산을 통해 a가 짝수인지 검사 가능
document.writeln('a |= 2' + a + "<br/>");
a = 5;
a ^= 2; //비트 XOR연산을 통해 a가 짝수인지 검사 가능
document.writeln('a ^= 2' + a + "<br/>");
a = 5;
a <<= 2; //shift연산
document.writeln('a <<= 2' + a + "<br/></br><hr>");
//5.비교연산자
document.writeln('<h2> 비교 연산자 </h2>');
var a=5;
var b=3;
var c='5';
document.write('a == b : ' + ( a==b ) + "<br/>"); //a==b : false
document.write('a == c : ' + ( a==c ) + "<br/><br/>"); //a==c : true
document.write('a != b : ' + ( a!=b ) + "<br/>"); //a!=b : true
document.write('a != c : ' + ( a!=c ) + "<br/><br/>"); //a!=c : false
document.write('a >= b : ' + ( a>b ) + "<br/><br/>"); //a>b : true
document.write('a == b : ' + ( a==b ) + "<br/>"); //a==b : false
//==연산자에서 문자열과 숫자를 비교할 경우,
//숫자가 문자열로 변환되어 비교연산 수행함
document.write('a == c : ' + ( a==c ) + "<br/><br/>"); //a==b : true
//===연산자에서 비교연산할 경우,
//데이터 타입변환을 수행하지 않음
document.write('a === c : ' + ( a===c ) + "<br/>"); //a===b : false
document.write('a !== b : ' + ( a!==b ) + "<br/><br><hr>"); //a!==b : true
//6.배열
//==연산자에서 참조형을 비교하는 겅우, 참조값이 같을 경우에만 true반환
document.writeln('<h2> 배열 연산자 </h2>');
var arr1=['aaa', 'bbb', 'ccc'];
var arr2=['aaa', 'bbb', 'ccc'];
//(heap영역에 분배된)배열의 주소가 다르기 때문에 false
document.write('arr1 == arr2 : ' + ( arr1==arr2 ) + "<br/>"); //false
//true가 나온건, 주소가 같아진것
arr2 = arr1;
document.write('arr1 == arr2 : ' + ( arr1==arr2 ) + "<br/><br><hr>"); //true
</script>
</body>
</html>
|
cs |
http://localhost:8080/day33_html/html+js/ex12_js.html
'HTML,CSS,JS,jQuery,AJAX > HTML+JavaScript' 카테고리의 다른 글
| &&(그리고)와 ||(또는)을 이용한 조건문 (0) | 2021.02.24 |
|---|---|
| JavaScript 주석 (0) | 2021.02.24 |
| button event - inline방식과 js internal방식 - alert팝업창, onclick이벤트 (0) | 2021.02.24 |
| 자바스크립트 - 특수문자(줄바꿈,탭,역슬래시,따옴표) (0) | 2021.02.24 |
JavaScript 주석
2021. 2. 24. 23:36
1 2 3 4 5 6 | //한줄주석 /* 여러줄 주석 */ | cs |
'HTML,CSS,JS,jQuery,AJAX > HTML+JavaScript' 카테고리의 다른 글
| &&(그리고)와 ||(또는)을 이용한 조건문 (0) | 2021.02.24 |
|---|---|
| JavaScript 연산자-산술,후위전위증감,대입,복합,비교,배열.. (0) | 2021.02.24 |
| button event - inline방식과 js internal방식 - alert팝업창, onclick이벤트 (0) | 2021.02.24 |
| 자바스크립트 - 특수문자(줄바꿈,탭,역슬래시,따옴표) (0) | 2021.02.24 |
required="required" -> 필수입력 속성
2021. 2. 24. 21:44
|
1
2
3
|
<!-- required반드시써야함 -->
<tr> <td>ID</td> <td><input type="text" placeholder="id를 입력하세요" required="required"> </td></tr>
<tr> <td> 비밀번호 </td> <td><input type="password" name="pwd" id="pwd" required> </td></tr>
|
cs |
'HTML,CSS,JS,jQuery,AJAX > HTML+CSS' 카테고리의 다른 글
| input + jsp / fieldset-줄로감싸기, label for="실행을원하는 input의 id명" => label안의 글자를 눌러도 해당 input이 실행 (0) | 2021.02.24 |
|---|---|
| inputType - autofocus(실행한후바로커서), pattern(들어가야할규칙), required(필수작성) (0) | 2021.02.24 |
| html 주석 (0) | 2021.02.22 |