name의 자료형, 정규표현식, 아이디 중복체크

Luna·2023년 1월 27일

EZEN

목록 보기

25/40

어제 내용 복습

코딩할 때는 항상 단계적으로 해야 한다. 중간 중간 console이나 alert창에 띄워본다.

문자열 -> 숫자
산술 연산을 하기 위해서 Number()를 사용
parseInt()-버림, parseFloat(), Math,ceil(), Math.floor()-버림, Math.round()-반올림

비연속데이터 비교할 때는 switch
연속 데이터 비교 할 때는 if

name의 자료형 오류

참고 : name의 자료형이 object?
-> 자료형을 var 말고 let으로 선언하면 됨. 변수명을 바꾸거나..
글로벌 영역에서 name이라는 변수를 사용하면 window.name으로 처리된다.
window.name은 toString 메서드를 사용하여 지정된 모든값을 문자열로 바꿈.
그래서 어떤 타입의 데이터를 넣어도 string타입을 반환함.

어제 소스코드 중 일부

<script type="text/javascript">
  let name;
  function ready() {
  	name = document.getElementById("name");
  }
  function checkName() {
 	alert("이름 확인" + name);
	if(!test(reg_name, name.value, reg_name_error_msg)) {
	name.value="";
	name.focus();
    };
  }
 </script>

정규표현식

문자열의 패턴 - JAVA, JS, Oracle 동일함

참고 : JavaScript Regular Expressions

JS - /정규표현식/옵션

옵션 - i(대소문자 구별없이), m(multiline), g(global)
[ ] - 안의 문자들 중에서 한개
ex) [ab] a와 b중에 한 개, [a-g] a부터 g까지 중에 한 개
( ) - 부분문자 선택. 보통 |연산자와 사용
ex) (a|b) a또는 b, ([ab]|[12]) a와 b중에 한 개 또는 1과 2중에 한 개
반복 - * 앞의 글자가 0개 이상, + 앞의 글자가 1개 이상, ? 0번 또는 1번
반복 (횟수 제한) - {시작,끝}
ex) [a-zA-Z]{4,20} 영문자로 4~20자 제한
맨처음 나오는 ^는 시작을 의미한다. 중간에 나오면 부정의 의미가 있다.
맨 마지막에 나오는 $는 끝을 의미한다.
숫자 - [0-9]+ - 중간에 숫자를 포함
/^[0-9]+$/ - 시작과 끝과 중간이 전부 숫자,
or /^\d+$/ - Vim 표현식

오늘 수업 내용

window.open() window.close() opener
event handler 대신 listener 만들기

아이디 중복 체크

window.open() window.close() opener

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>새창 열기</title>
<script type="text/javascript">
	function checkId() {
		// 새 창 열기 ("url","창의이름","창옵션")
		window.open("popup.html","idCheck","width=600, height=400, top=100, left=200");
	}
</script>
</head>
<body>
	<form action="#" name="regForm">
		아이디 : <input name="id" id="id" readonly="readonly">
		<!-- 아이디중복체크 버튼을 누르면 새 창이 열리게 한다. -->
		<button onclick="checkId();">아이디 중복 체크</button><br/>
		아이디는 아이디 중복체크 버튼을 사용하세요. 창 열기를 허용 해 주셔야 합니다.
	</form>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>pop up</title>
<script type="text/javascript">
	function selectId(id) {
		// 1.전달 받은 id를 오픈한 창의 id에 세팅한다.
		// 1-1. form과 input 태그의 name 속성을 이용해서 찾기 (name="id")
		//	   그냥 form 태그만 쓰면 안되고 form에 name 속성을 지정해서 form name을 써야 한다.
		opener.document.regForm.id.value = id; // 보통 이걸로 사용한다.
		
		// 1-2. id 속성으로 찾기 (id="id")
// 		opener.document.getElementById("id").value = id; // 선생님은 이게 편하다고 하심.
		// 2.창을 닫는다.
		window.close();
	}
</script>
</head>
<body>
<h1>아이디 중복 체크</h1>
아이디[test]는 사용이 가능한 아이디 입니다.<br/>
<button onclick="selectId('test')">아이디 사용하기</button>
</body>
</html>

Event Listener

참고 : onclick과 addEventListener 차이

두개는 같은 동작을 하지만 차이점이 있다.
onclick은 이벤트를 여러개 적용하는것이 불가능해서 새로운 onclick 이벤트를 추가하면 이후에 추가된 이벤트가 기존의 이벤트를 덮어쓴다. addEventListener를 사용할 경우 여러 이벤트를 추가하더라도 누적되어서 모든 이벤트가 다 동작을 한다.

그리고 onclick 이벤트는 모든 브라우저에서 호환이 가능하고 addEventListener는 IE 6,7,8 버전에서는 호환되지 않는다고 한다.

addEventListener는 HTML요소 뿐만 아니라 모든 DOM 요소에 대해 동작한다.
onclick 이벤트보다 더욱 세밀한 제어가 가능하다.

실습 코드

addEventListener
년월일 원하는 형태로 가져오기
년월일 시분초 원하는 형태로 가져오기
24시간이 지나면 년월일만, 안지났으면 시분초까지 가져오기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Listener</title>
</head>
<body>
	<button id="clickBtn">클릭</button>
	<div id="showClock"></div>
	<div id="showTime"></div>
	<div id="writeDate">작성일</div>
</body>
<script type="text/javascript">
	// onclick event handler 대신에 listener를 붙여서 사용할 수 있다.
	document.getElementById("clickBtn").addEventListener("click", function() {
		alert("click 버튼을 click 했다.")
	});
	
	// showDate()에서 return값에 그냥 day라고 주면 숫자가 나오므로
	// 배열을 만들어서 각 번호에 요일에 해당하는 문자열을 대체한다.
	let days = ["일", "월", "화", "수", "목", "금", "토"];
	
	// 1.현재 날짜 new Date() 객체를 parameter 값으로 showDate() 함수 호출하기
	// 2.id가 showClock인 div 태그에 넣기
	//	 - 날짜를 지정해서 넣고 싶으면 new Date("2023-01-27") 이렇게 지정하면 됨.
	document.getElementById("showClock").innerHTML = showDate(new Date());
	
	// 현재 시간 정보 가져오기 (상동)
	document.getElementById("showTime").innerHTML = showTime(new Date());
	
	document.getElementById("writeDate").innerHTML = writeDate(new Date("2023-01-25 00:00:00"));
	
	// 작성일 표시 - 24시간이 지났으면 날짜를 그렇지 않으면 시간을 출력하는 함수.
	function writeDate(dateObj) {
		// 현재시간을 가져와서 now에 저장
		let now = new Date();
		// now에 저장된 현재시간에서 시분초만 가져와서 nowTime에 저장
		let nowTime = now.getTime();
		// dateObj에 저장된 날짜에서 시간만 가져와서 writeTime에 저장
		let writeTime = dateObj.getTime();
		// 현재시간에서 가져온시간을 빼서 lastTime에 저장
		let lastTime = nowTime - writeTime;
		// lastTime을 일단위로 바꿈
		let lastDate = lastTime / 1000 / 60 / 60 / 24;
		// 작성 날짜가 1일이 지남.
		if(lastDate > 1) return showDate(dateObj);
		// 작성 날짜가 1일이 지나지 않았음.
		return showTime(dateObj);
	}
	
	// 원하는 날짜의 패턴은 yyyy-mm-dd(요일)
	function showDate(dateObj) {
		let yy = dateObj.getFullYear();
		
		// 년도 뒤에 2자리만 가져오기 - 시킨건 아니지만 궁금해서 그냥해봄 ㅋ
// 		let yy2 = yy.toString().substr(2,2);
// 		alert(yy2);	

		// getMonth()는 0~11(배열이라서 0부터 시작)만 사용하기 떄문에 1을 더해줘야한다.
		let mm = dateObj.getMonth()+1; 
		let dd = dateObj.getDate(); 
		// 요일정보 0~6(배열이라서 0부터 시작)까지의 데이터를 가져온다.
		let day = dateObj.getDay();
		
		// ((mm<10)?"0"+mm:mm) -> 10월보다 작으면 앞에 0을 붙여서 01 이렇게 표시한다.
		// ((dd<10)?"0"+dd:dd) -> 10일보다 작으면 앞에 0일 붙여서 01 이렇게 표시한다.
		return yy+"-"+((mm<10)?"0"+mm:mm)+"-"+((dd<10)?"0"+dd:dd)+" ("+days[day]+")";
	}
	
	// 원하는 시간 패턴 HH:MM:SS
	function showTime(dateObj) {
		let hh = dateObj.getHours();
		let mm = dateObj.getMinutes();
		let ss = dateObj.getSeconds();
		return ((hh<10)?"0"+hh:hh)+":"+((mm<10)?"0"+mm:mm)+":"+((ss<10)?"0"+ss:ss)
	}
</script>
</html>

오류 수정 내용

1. return

24시간이 지났을 때 년월일만 보이게 하는 코드를 작성했는데 undefined가 계속 떴다.

function writeDate(dateObj) {
	let now = new Date();
	let nowTime = now.getTime();
	let writeTime = dateObj.getTime();
	let lastTime = nowTime - writeTime;
	let lastDate = lastTime / 1000 / 60 / 60 / 24;
	if(lastDate > 1) return showDate(dateObj);
	return showTime(dateObj);
}

function writeDate() 함수의 내용을 확인 해 봤는데 처음에 if문에서 return값을 주지 않아서 undefined가 나왔다. return showDate(dateObj) 라고 써야 하는데 return을 빼먹고 showDate(dateObj)만 썼다. 밑에 showTime(dateObj)에서도 return을 안 붙였다. 함수를 호출했을때 받아야 할 리턴값이 있을 때는 return값이 있는지 꼭 확인하기.

2. 정규표현식

이렇게 input 태그를 만들어놓고 안에 값을 입력하고 정규표현식에 따라 값이 제대로 들어왔는지 확인하는 코드를 구현 했다. 다른건 다 작동이 잘 됐는데 아이디 부분에서 정규표현식에 맞게 입력하고 확인을 클릭 했을 때 한번은 통과가 됐지만 그 상태 그대로 한번 더 클릭했더니 갑자기 형식이 맞지 않는다는 알림이 떴다.
/^[a-z][a-z0-9]{3,19}$/g; 기존에 정규표현식을 이렇게 뒤에 옵션에 /g를 붙인게 원인이었다. /^[a-z][a-z0-9]{3,19}$/; 이러헥 /g를 붙이지 않았더니 정상 작동 되었다. /g가 의미하는 것이 무엇인지 구글링으로 찾아 보았고 (참고 : 정규표현식 쉽게 이해하기) 개념 자체는 이해를 했지만 저게 왜 저렇게 동작했는지는 잘 모르겠다. 선생님께 여쭤보니 /g 옵션은 잘 사용하지 않는다고 보통 옵션은 /i를 많이 사용한다고 하셨다.

오늘 궁금했던 것이랑 오류 났던거 전부 해결 되었다!