String객체
1.리터럴을 이용한 string (기본자료형)
2.생성자 함수를 이용한 String객체 생성(Object형)
1) str.slice( start, end) : 시작 인덱스부터 끝 인덱스 직전까지 조각내어 반환
2) substring(start,end) : slice()와 동일하나.
음수값을 줄 경우 index 0으로 간주한다.
3) substr(start, count); 사직 인덱스에서 count만큼 문자열을 추출
4) indexOf(str, [position]) : str문자열이 위치한 곳의 인덱스 번호를 반환
만약 str문자열이 없으면 -1을 반환한다.
5) lastIndexOf(str,[position]) : 뒤에서부터 문자열을 검색함
6) charAt(index) : 인덱스 위치의 문자 1개를 추출
7) split('구분문자') : 구분문자를 기준으로 문자열을 쪼개어 배열로 반환
trim(), toUpperCase(), toLowerCase(), replace() ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>String</h1>
<script>
//string형
var str="Hello JavaScript";
console.log(typeof str);
//object형
var str2=new String("hi");
console.log(typeof str2);
print("str문자열 길이: "+str.length);
print("str2문자열 길이: "+str2.length);
//1)slice
print(str.slice(0,5));
print(str.slice(6));
print(str.slice(-10));
print(str.slice(-10,-6));
function print(val){
document.write("<h3>"+val+"</h3>");
}
//2) substring(start,end) : slice()와 동일하나.
//음수값을 줄 경우 index 0으로 간주한다.
var str3 = "R과 Python을 이용한 Data Science";
print(str3.substring(3,9));
document.write("<hr color='red'>");
//3) substr(start, count); 사직 인덱스에서 count만큼 문자열을 추출
//str3에서 Data를 추출
print(str3.substr(15,4));
var str4="어머님은 짜장면이 싫다고 하셨어 짜장면을...";
//4) indexOf(str, [position]) : str문자열이 위치한 곳의 인덱스 번호를 반환
//만약 str문자열이 없으면 -1을 반환한다.
var i = str4.indexOf("짜장면",6);
print(i);
//5) lastIndexOf(str,[position]) : 뒤에서부터 문자열을 검색함
print(str4.lastIndexOf("짜장면"));
//6) charAt(index): 인덱스 위치의 문자 1개를 추출
var c= str4.charAt(5);
print(c);
//7) split('구분문자') : 구분문자를 기준으로 문자열을 쪼개어 배열로 반환
var str5= "JavaScript-jQuery-Ajax-VueJS-ReactJS";
var tokens=str5.split('-');
for(var j=0;j<tokens.length;j++){
print(tokens[j]);
}
print(str5.replace('J','j'));
</script>
</body>
</html>정규식(RegExp)객체
[A-Za-z]{1} : 알파벳이 1자 필수 입력(알파벳으로 시작)
\w: 알파벳 대소문자,숫자를 의미 (\W==>알파벳,숫자가 아니어야 함을 의미)
.,_,! : 마침표 ,_,!를 허용함을 의미
{3,7} : 3자 이상 7자 이내
[가-힣] : 한글
\s : 공백문자
+ : 패턴이 1개 이상 온다.
\b : 단어의 경계를 나타냄 정확히 패턴이 일치해야 함을 의미
\d{4}: 숫자가 4개 와햐 함을 의미
[-\/] : -나 /기호를 허용함을 의미
//RegExp객체의 함수 text() ==> 패턴에 해당하는 문자열이면 true
//아니면 false를 반환한다.
//^시작을 의미 $ 끝을 의미 a-z : 알파벳 소문자 A-Z : 알파벳 대문자
//0-9숫자를 의미 + : 패턴이 1번 이상 반복됨을 의미
<script>
function isUserid(obj){
var val = obj.value;
var pattern = new RegExp(/^[a-zA-Z]{1}[a-zA-Z0-9_!]{3,7}$/);
var b= pattern.test(val);
console.log(b);
return b;
alert(val);
}
</script>예제
외부 참조를 통해서 코드를 정리할 수 있고 재사용성이 증가한다.
<!-- ex35RegExp.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>ex35RegExp.html</title>
<style>
h1 {
color: blue;
}
span {
font-size: 12px;
color: blue;
}
sb{
color: blue;
}
tu{
font-size: 12px;
color: #cc33ff;}
</style>
<script src="js/validate.js"></script>
<script src="js/joincheck.js"></script>
</head>
<body>
<h1>회원가입</h1>
<form name="f" action="join.jsp" method="post">
<!-- table태그를 이용하여 회원가입 양식을 작성하세요 (실습이미지 참고) -->
<table align="center" width="800">
<tr>
<td colspan="2" align="left"><sb><strong>☞아이디(ID)정보</strong></sb></td>
<!--<td></td>-->
</tr>
<tr>
<td bgcolor=#fdfb93 align="right">*아이디</td>
<td><input type="text" name="userid" style="width:300px;"> <input type="button" value="중복확인" onclick="alert('사용할수 있는 아이디')">
<br><span>(4~8자 영자/숫자,!,_ 가능,한글,특수문자 ID는 사용할수 없습니다.)</span></td>
</tr>
<tr>
<td bgcolor=#fdfb93 align="right">*비밀번호</td>
<td><input type="password" name="userpwd" style="width:300px;"><span>
(4~8자 이내로 만들어 주세요.)</span></td>
</tr>
<tr>
<td bgcolor=#fdfb93 align="right">*비밀번호 확인</td>
<td><input type="password" name="userpwd2" style="width:300px;"><span>(위 번호와 같이 입력해 주세요.)</span></td>
</tr>
<tr>
<td colspan="2" bgcolor=#33ccff><sb><strong>☞개인정보</strong></sb></td>
<!--<td></td>-->
</tr>
<tr>
<td bgcolor=#fdfb93 align="right">*이름(한글)</td>
<td><input type="text" name="uname" placeholder="이름을 입력하세요"
style="width:300px;"><span>(예:박정현)</span></td>
</tr>
<tr>
<td bgcolor=#fdfb93 align="right" >생년월일</td>
<td><input type="text" name='birth'><span>날짜 형식은 yyyy--mm-dd형식</span></td>
</tr>
<tr>
<td bgcolor=#fdfb93 align="right">*주소</td>
<td><input type="text" style="width:200px;"><button>우편번호 찾기</button><br>
<input type="text" style="width:500px;"></td>
</tr>
<tr>
<td bgcolor=#fdfb93 align="right">*전화번호</td>
<td><tu>핸드폰</tu><input type="text" name="phone1"style="width:50px;">-<input name="phone2"type="text" style="width:50px;" >-<input name="phone3"type="text" style="width:50px;">
<input type="radio" name="phon" value="SKT">SKT
<input type="radio" name="phon" value="KTF">KTF
<input type="radio" name="phon" value="LGT">LGT<br>
<tu>집/회사</tu><input type="text" style="width:50px;">-<input type="text" style="width:50px;">-<input type="text" style="width:50px;"> <span>최소 한개는 입력하세요</span>
</td>
</tr>
<tr>
<td bgcolor=#fdfb93 align="right">*직업</td>
<td><select name="job">
<option value="choyse">직업을 선택하세요</option>
<option value="developer">개발자</option>
<option value="operator">운영자</option></td>
</tr>
<tr>
<td bgcolor=#fdfb93 align="right">이메일</td>
<td><input name="email"type="text" style="width:300px;"></td>
</tr>
</table>
<center> <input type="button" value="확인" onclick="check()"><input type="reset" value="다시쓰기"></center>
</form>
</body>
</html>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
js/joincheck.js
function check(){
if(!f.userid.value){
alert('아이디를 입력하세요');
f.userid.focus();
return;
}
if(!isUserid(f.userid)){
alert('아이디는 영문, 숫자,_,!로 4~8로만 가능');
f.userid.select();
return;
}
if(!isPasswd(f.userpwd)){
alert('비밀번호는 영문자로 시작하고,영문,숫자,!,_,.를 포함하고 4~8자 이내');
return;
}
if(f.userpwd.value!=f.userpwd2.value){
alert("비밀번호2 확인");
f.userpwd2.select();
return;
}
if(!isKor(f.uname)){
alert('이름은 한글만 가능');
f.uname.select();
return;
}
if(!isDate(f.birth)){
alert("1");
f.birth.select();
return;
}
if(!isPhone(f.phone1,f.phone2,f.phone3)){
alert("핸펀확인요망");
return;
}
alert(f.phon.value);
if(!f.phon.value){
alert("통신사 체크하삼");
return;
}
if(!isEmail(f.email)){
alert("이메일 형식에 맞지 않아요");
f.email.select();
return;
}
f.submit();
}
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
js/validate.js
function isUserid(obj){
var val = obj.value;
var pattern = new RegExp(/^[a-zA-Z]{1}[a-zA-Z0-9_!]{3,7}$/);
//RegExp객체의 함수 text() ==> 패턴에 해당하는 문자열이면 true
//아니면 false를 반환한다.
//^시작을 의미 $ 끝을 의미 a-z : 알파벳 소문자 A-Z : 알파벳 대문자
//0-9숫자를 의미 + : 패턴이 1번 이상 반복됨을 의미
var b= pattern.test(val);
console.log(b);
return b;
}
function isPasswd(obj){
var val=obj.value;
var pattern = new RegExp(/^[A-Za-z]{1}[\w!_\.]{3,7}$/);
var b= pattern.test(val);
console.log('ispasswd'+b);
return b;
}
function isKor(obj){
var val = obj.value;
var pattern = /^[가-힣\s]+$/;
var b=pattern.test(val);
return b;
}
function isDate(obj){
var val = obj.value;
var pattern = /^\b\d{4}[-\/]{1}\d{1,2}[-\/]{1}\d{1,2}\b$/;
var b=pattern.test(val);
return b;
}
function isPhone(obj1,obj2,obj3){
var val=obj1.value+"-"+obj2.value+"-"+obj3.value;
//핸드폰 앞자리는 숫자로 3자
var pattern=/^\b(010|011|016|019)[-]{1}\d{3,4}[-]{1}\d{4}\b$/;
var b=pattern.test(val);
return b;
}
/*
asdf-123@naver.com
asdf.my@google..com
asdf_12@daum.net
asdf12@abc.co.kr
식의 이메일 형식을 체크하는 함수를 작성하기
알파벡 대소문자, 숫자, -,.허용
@필수 입력
*/
function isEmail(obj){
var val=obj.value;
var pattern=/^[\w-_]+(\.[\w]+)*@([a-zA-Z]+\.)+[a-z]{2,3}$/;
var b= pattern.test(val);
return b;
}
'개발자 > 국비지원 SW' 카테고리의 다른 글
| 국비지원 53일차 - JS 자동차견적, 갤러리, Bootstrap/jQuery 다운로드방식, CDN방식 (0) | 2020.06.29 |
|---|---|
| 국비지원 52일차 - HTTP, POST방식, memo예시 (0) | 2020.06.26 |
| 국비지원 50일차 - JSP(Tomcat) 환경설정, server에서 class파일, GET방식 (0) | 2020.06.24 |
| 국비지원 49일차 - UML, Use Case specification, JavaScript Date객체, 달력 (0) | 2020.06.23 |
| 국비지원 48일차 - JavaScript 이벤트 종류, 이벤트 처리 (0) | 2020.06.22 |