JavaScript4 minutes read (About 559 words)

ITWILL : js로 간단한 회원가입페이지 작성하기

ITWILL학원 : 12강 JS기초 BY 정규태강사

이때까지 배웠던 내용을 가지고 회원가입페이지를 작성해보자

회원가입페이지에서 구현해볼 기능.
1. 모든정보입력시 회원가입가능
2. 각항목의 입력값이 없을 경우 해당 요소의 알림과 함께 포커싱
3. id는 최소 4자리에서 최대10자리만 허용
4. 비밀번호확인시 두개의 값이 같은 경우 회원가입가능, 다른경우 비밀번호 확인창에 포커싱 후 경고창띄우기
5. 주민번호를 입력받으면 성별자동체크
6. 취미 선택안된경우 1번 옵션 선택
7. 과목 선택안된경우 경고창

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
<form action="itwill.com" name="fr" method="get" onsubmit="return checkall();">
	<table border="1">
		<tr>
			<td>아이디</td>
			<td><input type="text" name="id" minlength="4" maxlength="10"></td>
		</tr>
		<tr>
			<td>비밀번호</td>
			<td><input type="password" name="pw"></td>
		</tr>
		<tr>
			<td>비밀번호 확인</td>
			<td><input type="password" name="repw"></td>
		</tr>
		<tr>
			<td>이름</td>
			<td><input type="text" name="name"></td>
		</tr>
		<tr>
			<td>주민번호</td>
			<td><input type="text" name="idnum1" maxlength="6"> - <input type="password" name="idnum2" maxlength="7"></td>
		</tr>
		<tr>
			<td>성별</td>
			<td>
				<input type="radio" name="gender" value="여">여
				<input type="radio" name="gender" value="남">남
			</td>
		</tr>
		<tr>
			<td>취미</td>
			<td>
				<input type="checkbox" name="hobby" value="reading">독서
				<input type="checkbox" name="hobby" value="swmming">수영
				<input type="checkbox" name="hobby" value="breathing">침대에서숨쉬기
			</td>
		</tr>
		<tr>
			<td>좋아하는 과목</td>
			<td>
				<select name="sel">
					<option value="">선택</option>
					<option value="자바">JAVA</option>
					<option value="js">JavaScript</option>
					<option value="db">DataBase</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>하고싶은 말</td>
			<td><textarea rows="5" cols="30" placeholder ="자유롭게 입력하세요" name="txt"></textarea></td>
		</tr>
		<tr>
			<td colspan="2">
				<input type="submit" value="제출">
				<input type="reset" value="초기화">
			</td>
		</tr>
	</table>
</form>

위는 html태그이고 아래는 js태그이다

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
<script type="text/javascript">

function checkall(){ //데이터유효성체크
	let id = document.fr.id.value
	let pw = document.fr.pw.value
	let repw = document.fr.repw.value
	let name = document.fr.name.value
	let idnum1 = document.fr.idnum1.value
	let idnum2 = document.fr.idnum2.value
	let womyn = document.fr.gender[0]
	let men = document.fr.gender[1]

	if(id == ""){
		alert("아이디를 입력하세요")
		document.fr.id.focus();
		return false;
	}

	if(pw == ""){
		alert("비밀번호를 입력하세요")
		document.fr.pw.focus();
		return false;
	}

	if(pw != repw){
		alert("비밀번호가 일치하지않습니다.")
		document.fr.repw.select();
		return false;
	}

	if(name == ""){
		alert("이름을 입력하세요.")
		document.fr.name.select();
		return false;
	}

	if(idnum1 == ""){
		alert("주민번호를 입력하세요.")
		document.fr.idnum1.focus();
		return false;
	}

	if(idnum2 == ""){
		alert("주민번호를 입력하세요.")
		document.fr.idnum2.focus();
		return false;
	}

	if(womyn.checked == false && men.checked == false){
		if(idnum2.charAt(0) == 2 || idnum2.charAt(0) == 4){
		womyn.checked = true;
		return false;
		}

		if(idnum2.charAt(0) == 1 || idnum2.charAt(0) == 3){
		men.checked = true;
		return false;
		}
	}

	if(document.fr.hobby[0].checked == false 
			&& document.fr.hobby[1].checked == false
			&& document.fr.hobby[2].checked == false){
		alert("취미를 선택하세요");
		//document.fr.hobby[0].focus(); //사용자의 입력을 기다림
		document.fr.hobby[0].checked == true; //사용자입력안할시 자동으로 0번을 선택함
	}

	if(document.fr.sel.selectedIndex == 0){
		alert("과목을 선택하세요")
		document.fr.sel.focus();
		return false;
	}

	if(document.fr.txt.value == ""){
		alert("메모를 입력하세요");
		document.fr.txt.focus();
		return false;
	}

}
</script>
JavaScript7 minutes read (About 984 words)

ITWILL : 문서 객체 모델안의 if문에 return;의 역할, radio태그, checkbox태그

ITWILL학원 : 11강 JS기초 BY 정규태강사

1. if문에 return;의 역할

return : 문제발생시 다른 조건을 실행하지않는다. -> 지금 문제를 먼저 해결
예를들어 회원가입페이지의 필수항목인 아이디를 입력하지않았다면 그 다음 항목인 비밀번호는 아예 체크하지않겠다는 의미가 된다.

아래 태그는 if조건문이 연달아 있다.
첫번째 if는 아이디를 입력했는지 체크하는 조건이고 두번째 if는 비밀번호를 입력했는지 체크하는 조건문이다.

여기서 return;의 역활에 집중해보자.
아이디를 입력하지않았다면 비밀번호를 체크할 필요도 없다.
따라서 첫번째 if문에서 아이디가 없을시 return;를 주어 뒤의 비밀번호를 아예 체크하지않고 function이 종료된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function check(){
	if(inputId.length > 0){
		alert("사용자 ID : " + inputId + "\n" + userInfo.memo.value);
	}else{ // 아이디 입력값이 없을때
		alert("사용자ID를 입력하세요");
		document.userInfo.id.focus();
		return;	
	} 

	if(inputPw == ""){ //비밀번호 입력값이 없을 때
		alert("비밀번호를 입력하세요")
		document.userInfo.pw.focus();
	}
}

check();

2. 라디오 Radio 태그

라디오버튼은 동일한 name을 써야 한 그룹으로 묶인다.
value를 꼭 작성해주어여한다.

checked=”checked” 또는 checked라고 속성을 주면 해당 속성에 틱 된 상태로 출력된다.
만약 여러 태그를 다 checked한 경우, 제일 마지막 태그의 속성이 틱 된 상태로 출력된다.

아래 코드는 성별체크하는 라디오버튼이다.

1
2
3
4
5
6
7
8
<fieldset> //테두리생성되는 태그
	<form action="#" name="fr" method="get">
	<label> 성별 체크 : </label>
		<input type="radio" name="gender" value="여"> 여성
		<input type="radio" name="gender" value="남"> 남성
	<input type="button" value="성별체크유무" onclick="checkRa();">
	</form>
</fieldset>

여기서 성별을 틱하지않고 성별체크유무 버튼을 클릭하게되면
성별을 선택하라는 알림 팝업이 뜨고 난 뒤 focus()를 주는 checkRa() 함수를 만들어보자.

1
2
3
4
5
6
7
8
9
function checkRa(){ 
	let womyn = document.fr.gender[0];
	let men = document.fr.gender[1];

	if(womyn.checked == false && men.checked == false){
		alert("성별을 선택하세요")
		womyn.focus();
	}
}

알림창은 잘 뜨지만 focus()는 티가 나지않는다
이럴때 enter를 눌러보면 여성라디오버튼에 굵은 검정테두리를 통해 focus가 됨을 알 수 있다.

enter를 안누르고 티나게 하는 방법은 없을까?
기존에는 보였으나 브라우저가 업데이트되면서 그런것같다는게 강사님의 의견.
w3school에서도 동일한 현상이 나타나는 것을 보니 방법이 없나보다..

3. 체크박스 checkbox 태그

라디오버튼과 다른 점은 중복체크가 가능하다는 점이다.
또한 체그해지도 가능하다

내 코드

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
function checkRa(){ //라디오버튼체크유무
	let womyn = document.fr.gender[0];
	let men = document.fr.gender[1];

	if(womyn.checked == false && men.checked == false){
		alert("성별을 선택하세요")
//			womyn.focus(); //동일코드
//			document.forms["fr"].elements["gender"][0].focus(); //동일코드
		document.getElementsByName('gender')[0].focus();
	}else{
		checkRa = true;
	}
}

function checkCh(){ //체크박스체크유무
	if(document.fr.hobby[0].checked == false
		&& document.fr.hobby[1].checked == false
		&& document.fr.hobby[2].checked == false){
		alert("취미를 한 개이상 선택하세요")
		document.getElementsByName('hobby')[0].focus();
	}else{
		checkCh = true;
	}
}


function checkboth(){ //라디오버튼과 체크박스 둘다 체크했는지 확인
	console.log(checkRa == true)
	console.log(checkCh == true)
	if(checkRa == true && checkCh == true){
		return true;
	}else{
		return false;
	}
}

강사님 코드 => 다음시간에 다시 

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
function checkRa(){
	let womyn = document.fr.gender[0];
	let men = document.fr.gender[1];

	if(womyn.checked == false && men.checked == false){
		alert("성별을 선택하세요")
			womyn.focus();
	}else{
		checkRa = true;
	}
}

	function checkCh(){ //내코드
	if(document.fr.hobby[0].checked == false
		&& document.fr.hobby[1].checked == false
		&& document.fr.hobby[2].checked == false){
		alert("취미를 한 개이상 선택하세요")
		document.getElementsByName('hobby')[0].focus();
	}else{
		checkCh = true;
	}
}


function checkCh(){ //강사님코드
	if(document.fr.hobby[0].checked == false
		&& document.fr.hobby[1].checked == false
		&& document.fr.hobby[2].checked == false){
		alert("취미를 한 개이상 선택하세요")
		document.getElementsByName('hobby')[0].focus();
		return;
	}

	checkRa();
	document.fr.submit();
}
JavaScripta minute read (About 197 words)

ITWILL : 브라우저객체모델안의 location객체

ITWILL학원 : 9강 JS기초 BY 정규태강사

1. location객체

브라우저의 url(주소창)에 대한 정보를 가지고 있는 객체

  • location.href : 페이지이동. 현재브라우저의 주소창의 정보url를 리턴

    1
    location.href="Test2.html"

  • location.protocol : 프로토콜은 통신규약이다 어떤 방식으로 어떤 속도로 해당 통신을 할껀지 약속.

    • 웹통신을 위한 프로토콜
    • http:
    • http:// 보안이 더 강화됨

  • location.hostname

  • location.host

  • location.reload(); 페이지새로고침(F5번과 동일한 기능)

  • location.replace(url); 입력한 url로 페이지 이동

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<input type="button" value="location속성" onclick="fun1()">

function fun1(){
	alert("href : " +window.location.href 
			+ "     protocol : " +window.location.protocol 
			+ "     hostname : "+location.hostname
			+ "     host : "+location.host
			+ "     port : "+location.port
			+ "     search : " + location.search);
}

//출력값은
href : http://localhost:8088/JavaScript/JS3/Test3.html
protocol : http:     
hostname : localhost     
host : localhost:8088     
port : 8088     
search :
JavaScript4 minutes read (About 597 words)

ITWILL : 브라우저객체모델안의 Document객체 (bgColor와 fgColor사용, img태그에 접근하여 속성 사용, 랜덤 img 출력하기)

ITWILL학원 : 9강 JS기초 BY 정규태강사

1. Document 객체

해당 html문서를 객체로 표시한 것(객체화)이 여기서 말하는 document이다.

2. Document 객체 : bgColor와 fgColor사용

  • document.bgColor=”” ; 배경색상을 변경함
  • document.fgColor=”” ; 글자색상을 변경함

위를 활용하여 체크박스를 틱하고 틱을 해제함으로써 배경색과 글자색이 바뀌는 함수를 만들어보자.

1
2
3
4
5
6
7
8
9
10
11
<input type="checkbox" onclick="checkf1(this);"> 체크박스 온오프로 핑크테마<br>

function checkf1(obj){
	if(obj.checked){
		document.bgColor= '#ffbdbd';
		document.fgColor= 'white';
	}else{
		document.bgColor= 'white';
		document.fgColor= 'black';
	}
}

3. Document 객체 : img태그에 접근하여 속성 사용

img태그에 접속하여 속성을 이용해보자

  • document.images[0].name : 이미지태그 네임을 모를 경우 인덱스활용해서 name불러옥;

  • document.img1.name : 이미지태그 네임을 알경우 name불러오기

  • document.img1.src : 이미지태그 네임을 알경우

먼저 이미지태그를 만들어보자

1
2
<img src="1.jpg" name="img1">
<input type="button" value="이미지속성정보" onclick="fun1()"><br>

그리고 이 이미지태그의 속성을 알아보자
위에서 만든 버튼태그를 눌릴때마다 속성을 알아보는 방법이다.

1
2
3
4
5
6
7
8
9
10
11
function fun1(){
	alert("너의 이름은? "+document.images[0].name); 
	alert("너의 이름은? "+document.img1.name) 
	alert("너의 주소는? "+document.img1.src) 

}

//출력값은
img1
img1
file:///D:/workspace_jsp7/JavaScript/WebContent/JS3/2.jpg

4. Document 객체 : 랜덤 img 출력하기

1부터 6까지 총 6개의 이미지를 랜덤하게 가져와서 이미지태그에 보더, 가로,세로 크기를 변경하는 함수를 만들어 보자

첫번째는 랜덤함수를 이용하는 방법이다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<img src="1.jpg" name="img1" onmouseover="changeImg()" onmouseout="resetImg()"><br>

function changeImg(){ 

	let randomNum = Math.floor(Math.random()*6 + 1); //1~6까지
	document.img1.src = randomNum+".jpg" //1~6까지 

	console.log(randomNum)

	document.images[0].border = 2;
	document.images[0].width = 200;
	document.images[0].height = 150;

}

function resetImg(){
	document.img1.src = "1.jpg"
	document.images[0].border = 0;
	document.images[0].width = 80;
	document.images[0].height = 60;
}

두번째 방법은 배열이용하는 방법이다
전자보다 더 많이 사용한다

위와의 차이점은 두가지이다.

  1. imgArr이라는 배열안에 이미지를 담았다
  2. randomNum만들때 배열은 0부터 시작이고 이미지도 0부터 시작이므로 +1을 할 필요가 없다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<img src="1.jpg" name="img1" onmouseover="changeImg()" onmouseout="resetImg()"><br>

let imgArr = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg"] //0~5번까지밖에없다

function changeImg(){ 

	let randomNum = Math.floor(Math.random()*6)//0~5까지
	document.img1.src = imgArr[randomNum] //0~5까지
	
	console.log(randomNum)

	document.images[0].border = 2;
	document.images[0].width = 200;
	document.images[0].height = 150;

}

function resetImg(){
	document.img1.src = "1.jpg"
	document.images[0].border = 0;
	document.images[0].width = 80;
	document.images[0].height = 60;
}
JavaScript4 minutes read (About 544 words)

ITWILL : Array객체 (for ~ in구문, join(), reverse(), sort())

ITWILL학원 : 8강 JS기초 BY 정규태강사

1. 배열객체(Array)

내장객체 중에서 가장 활용도가 높은 것은 배열객체이다.
연속된 공간에 여러개의 데이터를 저장하는 객체이다.
배열에 들어있는 데이터를 요소(Element)라고 부른다.
배열의 index는 0부터 시작한다. 그리고 마지막 index는 (배열의 크기 - 1)이다.
배열의 요소는 변수처럼 사용가능 -> 주로 반복문에 활용해서 사용한다.
JS의 경우 모든 데이터타입을 한 배열안에 넣기 가능하다.

1
let arr = [1,2,"Hello", true, 3];

2. for ~ in 구문

변수의 값을 0부터 배열 객체의 개수만큼 반복하는 구문.
자동적으로 배열 객체의 길이를 계산한다.

1
2
3
4
for(let i in arr){
	document.write( arr[i]+ " ")
}
//출력값은 1 2 Hello true 2 JS

3. array.join();

요소들을 출력할 때 사이에 입력하여 출력하는 방법은 join()을 쓰면 쉽게 해결된다

1
2
document.write(arr.join(" "))
//출력값은 1 2 Hello true 2 JS

위의 출력값과 아래의 출력값의 차이는 딱 하나이다.
마지막 요소에 스페이스의 입력유무이다.
join()의 경우 마지막요소에 입력되지 않으니 더욱 유용하다

1
2
document.write(arr.join(","))
//출력값은 1,2,Hello,true,2,JS

4. array.reverse();

배열안의 요소를 역순으로 출력하고 싶다면 반복문을 먼저 생각해볼수있다.
반복문을 이용하면 임시값에 뒷요소부터 넣어서 반복할 수 있다.
하지만 array에 좋은 내장함수가 있다.
바로 reverse()이다
reverse()는 배열의 순서를 반대로 처리한다.

1
2
3
4
arr1 = [1,2,"hi", "a", "A", "가", "나"];
document.write(arr1.reverse())

//출력값 나,가,A,a,hi,2,1

기본적으로 콤마(,)가 함께 출력된다.
이 콤마를 없애고 싶다면 reverse후에 join을 하면 된다

1
2
document.write(arr1.reverse().join(" "))
//출력값 나 가 A a hi 2 1

5. array.sort();

낮은 순자부터 높은 숫자로 오름차순으로 출력한다.

1
2
3
4
arr2 = [1,2,"hi", "a", "A", "가", "나"];
document.write(arr2.sort())

//출력값 1,2,A,a,hi,가,나
JavaScript11 minutes read (About 1709 words)

ITWILL : String객체, 짤라오는 함수 4종류 .substring(), slice(), substr(), charAt(), .indexOf()와 .lastIndexOf()차이, .concat(), .split(), ID자릿수를 제한하는 이메일 유효성검사

ITWILL학원 : 8강 JS기초 BY 정규태강사

1. 문자열객체(String)

문자열객체는 배열처럼 데이터를 저장한다.

1
2
3
let name = new String("Hong") //문자열객체

let name2 = "Kim" //문자열데이터(문자열상수)

둘 다 문자열객체로 사용할수있다.

문자열객체는 두가지타입의 function을 가지고있다.
스타일을 지정하는 타입의 함수와 데이터를 처리하는 타입의 함수이다.

  1. 스타일을 지정하는 함수

폰트를 굵게 표시한다.
하지만 스타일을 지정하는 함수는 실제론 거의 사용하지않는다.
실무에선 스타일은 css로 지정한다
그렇지만 굳이 css를 쓰지않더라도 이렇게 스타일을 지정할 수있다는 사실을 알고있어야한다.

참고로 toUpperCase()와 toLowerCase()는 사용할 수 도 있다

1
2
3
document.write("name : " + name.bold()); //굵게 출력
document.write(name.toUpperCase()+"<br>"); //모두 대문자로 출력
document.write(name.toLowerCase()+"<br>"); //모두 소문자로 출력

체이닝기법
함수를 연결하여 한번에 사용하는 형태이다.

1
document.write(msg.fontcolor("red").fontsize("15").bold())

위의 코드를 통해 msg의 글씨색깔은 빨간색이며 폰트사이즈는 15이고 굵게 출력된다.

  1. 데이터를 처리하는 함수

아래 함수들(2번부터 ) 모두가 데이터를 처리하는 함수이다.

2. .length

길이를 구하는 함수이다

3. 짤라오는 함수 4종류 .substring(), slice(), substr(), charAt()

substring(시작인덱스,끝인덱스)는 시작부터 끝 인덱스 앞자리까지 짤라온다.
substring(인덱스) 이처럼 인덱스를 하나만 적는 경우에는 시작인덱스로 취급하여 시작인덱스부터 끝까지 다 짤라온다.

1
2
3
4
5
6
let name3 = "이번년도는 복세편살!"
document.write(name3.substring(2,6))
document.write(name3.substring(2))
//출력값 
년도는
년도는 복세편살!

이것과 비슷한 함수로는 아래 세 가지가 있다.

  1. slice(시작,끝) : 시작인덱스부터 끝인덱스의 앞자리까지 짤라오는 함수

  2. substr(시작인덱스,갯수) : 시작인덱스부터 갯수만큼 짤라오는 함수

  3. .charAt(인덱스) : 해당 인덱스에 있는 문자데이터를 가져온다.

    1
    2
    3
    4
    5
    6
    let name3 = "이번년도는 복세편살!"
    document.write(name3.charAt(0)) //첫번째글자 가져오기
    document.write(name3.charAt(name3.length-1)) //제일 끝 글자가져오기
    // 출력값
    이
    !

예시 1. 주민번호로 성별 구분 코드

짤라오는 함수를 이용하여 주민번호로 성별을 구분하는 코드를 작성해보자
총 4가지 방법의 함수로 짤라올수가 있다!

1
2
3
4
5
6
7
8
9
10
11
12
13
let num = prompt("주민번호를 -와 함께 입력하세요")
	
let checkNum = num.substring(7,8); //첫번째방법 substring사용
let checkNum = num.slice(7,8); //두번째방법 slice사용
let checkNum = num.substr(7,1); //세번째방법 substr사용
let checkNum = num.charAt(7); //네번째방법 charAt사용


if(checkNum === "2" || checkNum === "4"){
	document.write("여성입니다")
}else if(checkNum === "1" || checkNum === "3"){
	document.write("남성입니다")
}

예시 2. 전화번호 중간자리 가리기

위에서 배운 함수로 출력이 가능하나 마지막방법인 charAt는 1자리만 가져오는 것이기때문에 불가능하다.
따라서 3가지 방법으로 코드를 작성할 수 있다.

1
2
3
4
let phonenum = prompt("전화번호를 -와 함께 입력하세요")
let mobile = "010-****-" + phonenum.substring(9) //첫번째방법 substring사용
let mobile = "010-****-" + phonenum.slioce(9) //두번째방법 slice사용
let mobile = "010-****-" + phonenum.substr(9) //세번째방법 substr사용

5. .indexOf()

String안에 내가 원하는 값이 있는지 찾아보는 방법으로 indexOf()를 사용한다.
indexOf()의 괄호안에는 찾고싶은 요소를 입력한다
해당 요소가 있는 경우에는 왼쪽에서 시작해서 제일 먼저 만나는 index의 위치를 알려주고
해당 요소가 없는 경우에는 -1이 출력된다.

1
2
3
4
5
6
7
let name3 = "이번년도는 복세편살이야"

document.write(name3.indexOf("이")+"<br>")
document.write(name3.indexOf("하")+"<br>")
//출력값은
0
-1

현재 name3안에는 “이”가 2개가 있지만 첫번째 “이”의 index위치를 알려주고 있다.
중복되는 데이터의 첫번째 index 위치만 알려주기때문에 중복데이터가 있으면 그 위치가 어디인지 찾기가 어렵다.
그럴때 사용하는 함수가 아래에 있는 .lastIndexOf()이다.

6. .lastIndexOf()

String안에 내가 원하는 값이 있는지 찾아보는 방법으로 lastIndexOf()를 사용한다.
lastIndexOf()의 괄호안에는 찾고싶은 요소를 입력한다
해당 요소가 있는 경우에는 오른쪽에서 시작해서 제일 먼저 만나는 index의 위치를 알려주고
해당 요소가 없는 경우에는 -1이 출력된다.

1
2
3
4
5
6
7
let name3 = "이번년도는 복세편살이야"

document.write(name3.indexOf("이")+"<br>")
document.write(name3.indexOf("하")+"<br>")
//출력값은
11
-1

7. .concat()

괄호에 추가하고싶은 데이터를 작성하여, 데이터를 추가하는 방법에는 아래처럼 두가지가 있다.

  1. 더하기 연산자사용
  2. .concat()사용
1
2
3
4
5
6
7
let name3 = "이번년도도는 복세편살이야"
document.write(name3 + "!!!!"+"<br>")
document.write(name3.concat("!!!!")+"<br>")

//출력값
이번년도도는 복세편살이야!!!!
이번년도도는 복세편살이야!!!!

8. .split()

괄호안의 값을 기준으로 문자를 파싱(나누기)후 배열에 저장한다.

1
2
3
4
5
6
7
let name3 = "이번년도도는 복세편살이야"
document.write(name3.split(" ")+"<br>")
document.write(name3.split(" ")[0]+"<br>")

//출력값 : 괄호가 스페이스이므로 스페이스 기준으로 2개가 나누어진다.
이번년도도는,복세편살이야
이번년도도는

9. ID자릿수를 제한하는 이메일 유효성검사

userEmail.indexOf(“@”) >= 0)에서
0대신에 다른 숫자를 넣으면 해당 숫자에 따라 최소 ID의 자리수가 달라지는 로직을 만들수있다.
userEmail.indexOf(“@”) >= 8)인경우 8자리이상 ID만 true가 된다.

이런 로직을 잘 짜야지 좋은 개발자가 될 수 있다.

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
function check(userEmail){

	let check1 = false; //@유무 체크
	let check2 = false; //유효한 이메일주소 체크
	let emailArr = [".co.kr", ".com", ".net", ".or.kr", ".go.kr"]

	if(userEmail.indexOf("@") >= 0){ //숫자에 따라 최소 ID의 자리수가 달라짐 8인경우 8자리이상id필요
		check1 = true;
	}

	for(let i=0; i<emailArr.length; i++){
		//document.write(emailArr[i] + "<br>")//출력
		if(userEmail.indexOf(emailArr[i]) >= 0){
			check2 = true;
			break;
		}
	}

	if(check1 && check2){
		document.write("사용자 이메일 확인완료 : "+ userEmail +"<br>")
	}else{
		document.write("이메일주소 오류!<br>")
	}
}

check("s.co.kr")
check("s.cd")
check("s@.co.kr")
check("2@.com")
check("2@.or.kd")
check("2@.cd")

//출력값
이메일주소 오류!
이메일주소 오류!
사용자 이메일 확인완료 : s@.co.kr
사용자 이메일 확인완료 : 2@.com
이메일주소 오류!
이메일주소 오류!
Follow

Categories

Recent

Archives

Tags

APK1
Backjoon12
Book1
BookReview1
C#3
CORS1
CSRF1
ChatGPT1
Codeup10017
DBeaver1
DB설계1
DataStructure5
Discord1
Docker2
EL2
Eclipse10
Facebook1
GIT31
GeekNews1
Gson4
HTML&CSS30
Hackerrank10
Hexo5
HttpEntity1
ITWILL(JAVA)263
IntelliJ1
JAVA1
JSON2
JSTL4
JavaScript1
Journal22
Leetcode6
List11
Lombok1
MSA1
MariaDB9
Moment.js3
MyBatis6
MySQL11
NoSQL1
Node.js3
Oracle48
Port2
Programmers2
RESTfulAPI3
Redis1
RestTemplate2
Review20
SQLD2
SQL퀴즈2
STS7
SVN4
SpringBoot6
TIL359
Tomcat4
VanillaJS2
VueJS2
WEB2
Web Development1
Web Game9
Websocket3
YouTube1
ajax1
jQuery13
java.util.Calendar1
xAPI1
구글애드센스1
디자인패턴4
생활코딩5
설치1
오늘또못알아듣고말았습니다14
오류일지18
정규표현식3
차이17
패스트캠퍼스(초격차Java/Spring)12
패스트캠퍼스(파이썬웹개발)37
회고록10

Advertisement

×