본문 바로가기
Frontend

07월 10일 수 | UI 화면구현 06 - Javascript 기초문법Ⅲ

by 구라미 2019. 7. 10.

Javascript 기초문법Ⅲ

6. Javascript의 String Method

1) trim()

var str = "       Hello World!        ";
alert(str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''));

 

2) 정규표현식

if (!String.prototype.trim) {
  String.prototype.trim = function () {
    return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
  };
}
var str = "       Hello World!        ";
alert(str.trim());

 

참고: https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/%EC%A0%95%EA%B7%9C%EC%8B%9D

 

 

7. Javascript의 event

자바스크립트는 주로 이벤트를 발생시킨 후 관련 함수를 호출함으로써 실행한다.

이벤트는 어떤 특정 상황이 발생하는 것이다.

 

1) 네트워크이벤트

online 브라우저가 네트워크 접근을 얻었을 때.
offline 브라우저가 네트워크 접근을 잃었을 때.

2) 포커스이벤트

focus 엘리먼트가 포커스를 받았을 때(버블링하지 않음).
blur 엘리먼트가 포커스를 잃었을 때(버블링하지 않음).

3) 웹소켓이벤트

open 웹소켓 연결이 수립되었을 때.
message 웹소켓을 통해 메시지를 받았을 때.
error 웹소켓 연결이 어떤 문제로 닫혔을 때(예로, 일부 데이터가 전송되지 못했을 때).
close 웹소켓 연결이 닫혔을 때.

4) 폼이벤트

reset 리셋버튼이 눌려졌을 때
submit 제출버튼이 눌려졌을 때

5) 마우스,키보드 그 외 이벤트

onchange HTML 요소가 변경되었을 때
onclick HTML 요소를 클릭했을 때
onmouseover HTML 요소에 마우스가 올려졌을 때
onmouseout HTML 요소위의 마우스가 벗어났을 때
onkeydown 사용자가 키를 눌렀을 때
onload 페이지 로드가 완료되었을 때
onunload 현재문서가 종료되거나 나갔을 때

 

참고: https://developer.mozilla.org/ko/docs/Web/Events

 

 

 

마우스 이벤트

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <style>
    .btn1{width: 50px; height: 30px; background: #f0f0f0; color: #000;}
  </style>
	<title>자바스크립트 이벤트</title>

</head>
<body onload='alert("어서와");' onunload='alert("잘가");'>
 	<div id="demo">

 	</div>

      <form name="myform" id="myform" action="ok.jsp" method="get">
       <input type="button" value="버튼1" name="btn1" id="btn1" class="btn1" onclick="alert('버튼1클릭');">
       <input type="button" value="버튼2" name="btn2" id="btn2" class="btn2" onclick="location.href='https://seaweedisland.tistory.com/'" >
       <input type="button" value="마우스" onmouseover="alert('마우스over')" onmouseout="alert('마우스out')" >

      </form>

  	<script>  		
  	</script>

</body>
</html>

 

 

커서 이벤트

입력상자에

커서가 들어왔을 때 onfocus

커서가 나갈 때 onblur

<input type="text" onfocus="alert('커서들어옴')" onblur="alert('커서나감')">

 

목록에서 change이벤트 많이 사용

<select onchange="alert('다른목록 변경!')">
  <option value="" selected>서울</option>
  <option value="" >부산</option>
  <option value="" >제주</option>         
</select>

 

onsubmit 이벤트, 폼전송

해당폼이 서버로 전송될 때 return값이 true일 때 해당폼이 전송된다.

<form name="myform" id="myform" action="ok.jsp" method="get" onsubmit="">

 

기본속성이 서버로 submit되는 요소

<button>전송</button>
<input type="submit" name="" value="">
<input type="image" name="" value="" placeholder="">

 

 

frond-end(UI, VIEW)단에서 서로 다른 문법(HTML,CSS,Javascript 등)간의 데이터를 교류하기 위해 Javascript, JQuery를 활용한다.

 

 

 

회원가입예제

window객체: 자바스크립트 최상위 객체, 생략할 수 있다. 

document객체: HTML문서의 <body>를 가리키는 객체.

 

 

input에 접근하기

1) <form>의 컨트롤요소 접근시 name 사용

<script>
function getID(){
		//[object HTMLFormElement]
		alert(document.memfrm);

		//[object HTMLInputElement]
		alert(document.memfrm.uid);

		//값이 없어서 빈 화면의 alert창이 뜬다. 실제값
		alert(document.memfrm.uid.value);
	}
</script>

 

2) id 속성으로 접근

<script>
function getID(){
	//id 속성으로 접근
	alert(document.getElementById("uid"));
	alert(document.getElementById("uid").value);
	}
</script>

내부 value값 접근할때는 id가 제일 낫다.

 

 

3) tag name으로 접근

<script>
function getID(){
	//3)tag name으로
	//input 태그 중 4번째에 접근
	alert(document.getElementsByTagName("input")[4]);
	alert(document.getElementsByTagName("input")[4].value);
    }
</script>

 

4) class로 접근

은 할 수 있지만 안함.

 

 

 

input에 접근한 다음 값넣기

1) name 접근

function setID(str){
	document.memfrm.uid.value=str;
}

 

2) id 속성으로 접근

function setID(str){
	document.getElementById("uid").value=str;
}

 

3) tag name으로 접근

function setID(str){
	document.getElementsByTagName("input")[4].value=str;
}

 

 

회원가입 예제

1) 주민번호 다음 커서로 넘기기

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <style>
    /* .btn1{width: 50px; height: 30px; background: #f0f0f0; color: blue;} */
  </style>
  <script src="../js/myScript1.js"></script>
  <title>회원가입</title>

</head>
<body>
	<form name="memfrm" id="memfrm" action="ok.jsp">

	아이디: <input type="text" name="uid" id="uid">
	<input type="button" class="btn1" value="ID중복확인" onclick='getID()'>
	<input type="button" value="ID적용" onclick='setID("happy")'>
	<hr>
	비밀번호:
	<input type="password" name="upw" onclick=''>
	<hr>
	주민번호:
	<input type="text" name="jumin1" id="jumin1" onclick='' size="6" maxlength="6" onkeyup="moveCursor()">-
	<input type="text" name="jumin2" id="jumin2" onclick='' size="7" maxlength="7">
	<hr>
	약관동의:
	<input type="checkbox" name="agree" id="agree" value="">
	<hr>
	<input type="submit" value="가입">
	<input type="reset" value="취소">
	</form>

<script>
	function getID(){
		/*//[object HTMLFormElement]
		//1) <form>의 컨트롤요소 접근시 name 사용
		alert(document.memfrm);

		//[object HTMLInputElement]
		alert(document.memfrm.uid);

		//값이 없어서 빈 화면의 alert창이 뜬다.
		alert(document.memfrm.uid.value);

		//2) id속성
		//[object HTMLInputElement]
		alert(document.getElementById("uid"));
		alert(document.getElementById("uid").value);*/

		//3) tag name으로
		alert(document.getElementsByTagName("input")[4]);
		alert(document.getElementsByTagName("input")[4].value);
	}

	function setID(str){
		//document.memfrm.uid.value=str;
		//document.getElementById("uid").value=str;
		document.getElementsByTagName("input")[4].value=str;
	}

	function moveCursor(){
		//1) 주민번호 앞칸 id=jumin1의 입력값 확인
		//moveCursor
		var jumin1 = document.getElementById('jumin1').value;
		// alert(jumin1); 잘실행되었나 확인하는 알럿창

		//2) junmin1변수값의 글자갯수가 6개와 동일하다면
		//커서를 id=jumin2로 이동한다.
		if(jumin1.length==6){
			document.getElementById('jumin2').focus();
		}
	}

</script>

</body>
</html>

 

 

 

회원가입 유효성 검사하기

회원가입할 때 자주 겪어봤을 것이다.

유효성 검사는 아이디, 비밀번호, 주민번호(현재는 법 때문에 수집 하지 않으나 연습용) 등을 진행한다.

 

폼 영역

<form name="memfrm" id="memfrm" action="ok.jsp" onsubmit="return validate()">

아이디: <input type="text" name="uid" id="uid">
<input type="button" class="btn1" value="ID중복확인" onclick='getID()'>
<input type="button" value="ID적용" onclick='setID("happy")'>
<hr>
비밀번호:
<input type="password" name="upw" id="upw" onclick=''>
<hr>
주민번호:
<input type="text" name="jumin1" id="jumin1" onclick='' size="6" maxlength="6" onkeyup="moveCursor()">-
<input type="text" name="jumin2" id="jumin2" onclick='' size="7" maxlength="7">
<hr>
약관동의:
<input type="checkbox" name="agree" id="agree" value="">
<hr>
<input type="submit" value="가입">
<input type="reset" value="취소">

</form>

 

 

유효성 검사 메소드

function validate(){
		//회원가입 유효성 검사 
		//1) 아이디 글자 갯수가 8~12글자 사이인지 확인. 
		//위의 조건을 만족하지 않는다면 
		//-> 경고창
		//-> 커서를 아이디를 입력할 수 있도록 해주고
		//-> 서버로 전송하는 것을 차단
		var uid = document.getElementById("uid").value;
		uid = uid.trim(); //좌우공백 제거
		if(uid.length<8 || uid.length>=13){
			alert("아이디는 8~12글자 사이여야 합니다.")
			document.getElementById("uid").focus();
			return false;
		}

		//2) 비밀번호 글자 갯수 5~10인지 확인
		var upw = document.getElementById("upw").value;
		upw = upw.trim();
		if(upw.length<5 || upw.length>=10){
			alert("비밀번호는 5~10글자 사이여야 합니다.")
			document.getElementById("upw").focus();
			return false;
		}

		//3) 주민번호 앞칸 글자 갯수 6인지 확인
		var jumin1 = document.getElementById("jumin1").value;
		jumin1 = jumin1.trim();
		if(jumin1.length!=6){
			alert("주민번호 앞 글자는 6글자여야 합니다.")
			document.getElementById("jumin1").focus();
			return false;
		}

		//4) 주민번호 뒷칸 글자 갯수 7인지 확인
		var jumin2 = document.getElementById("jumin2").value;
		jumin2 = jumin2.trim();
		if(jumin2.length!=7){
			alert("주민번호 뒷 글자는 7글자여야 합니다.")
			document.getElementById("jumin2").focus();
			return false;
		}
        
        //5) 약관동의 여부 확인
		//라디오버튼은 체크 or 체크안됨 뿐이므로 불린으로 확인한다.
		if(document.getElementById("agree").checked==true){ //라디오버튼 체크확인
			return true;
		}else {
			alert("약관에 동의하셔야 합니다.")
			document.getElementById("agree").focus();
			return false;
		}

	}

 

 

회원가입 정리본

정리하기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8"> 
  <style>
  	body {font-size: 16px; letter-spacing: -0.8px;}
  	input {height:25px; border: 1px solid #ccc; border-radius: 5px;}
  	.btn_join { width: 80px; height: 30px; border: 1px solid skyblue; border-radius: 20px; background: #4ebfec; color: #fff;}
  	.btn_reset { width: 80px; height: 30px; border-radius: 20px; }
  	hr {border: 1px dotted #ddd;}
  </style>

  <title>회원가입</title>

</head>
<body>
  <div id="demo">

  </div>
	<form name="memfrm" id="memfrm" action="ok.jsp" onsubmit="return validate()">
		아이디: <input type="text" name="uid" id="uid">
		<input type="button" class="btn1" value="ID중복확인" onclick="getID()">
		<input type="button" class="btn1" value="ID자동생성" onclick="setID('sample')">
		<hr>
		비밀번호:
		<input type="password" name="upw" id="upw" onclick="">
		<hr>
		주민번호:
		<input type="text" name="jumin1" id="jumin1" size="6" maxlength="6" onkeyup="moveCursor()">-
		<input type="text" name="jumin2" id="jumin2" size="7" maxlength="7">
		<hr>
		약관동의:
		<input type="checkbox" name="agree" id="agree" value="">
		<hr>
		<input type="submit" class="btn_join" value="가입">
		<input type="reset" class="btn_reset" value="취소">
	</form>

<script>

	function getID(){		
		//정말 중복확인 기능을 사용하려면 jsp해야한다.
		var userID = document.getElementById("uid").value
		if(userID==0){
			alert("아이디를 입력하세요.")
		}else {
			alert(userID +"는 사용가능합니다.");	
		}
	}

	function setID(str){
		document.getElementById("uid").value=str;		
	}

	function moveCursor(){
		//1) 주민번호 앞칸 id=jumin1의 입력값 확인
		//moveCursor
		var jumin1 = document.getElementById('jumin1').value;
		// alert(jumin1); 잘실행되었나 확인하는 알럿창

		//2) junmin1변수값의 글자갯수가 6개와 동일하다면
		//커서를 id=jumin2로 이동한다.
		if(jumin1.length==6){
			document.getElementById('jumin2').focus();
		}
	}

	function validate(){
		//회원가입 유효성 검사 
		//1) 아이디 글자 갯수가 8~12글자 사이인지 확인. 
		//위의 조건을 만족하지 않는다면 
		//-> 경고창
		//-> 커서를 아이디를 입력할 수 있도록 해주고
		//-> 서버로 전송하는 것을 차단
		var uid = document.getElementById("uid").value;
		uid = uid.trim(); //좌우공백 제거
		if(uid.length<8 || uid.length>=13){
			alert("아이디는 8~12글자 사이여야 합니다.")
			document.getElementById("uid").focus();
			return false;
		}

		//2) 비밀번호 글자 갯수 5~10인지 확인
		var upw = document.getElementById("upw").value;
		upw = upw.trim();
		if(upw.length<5 || upw.length>=10){
			alert("비밀번호는 5~10글자 사이여야 합니다.")
			document.getElementById("upw").focus();
			return false;
		}

		//3) 주민번호 앞칸 글자 갯수 6인지, 숫자인지 확인
		var jumin1 = document.getElementById("jumin1").value;
		jumin1 = jumin1.trim();
		if(jumin1.length!=6 || isNaN(jumin1)){
			alert("주민번호 앞 글자는 6글자이고 숫자여야 합니다.")
			document.getElementById("jumin1").focus();
			return false;
		}

		//4) 주민번호 뒷칸 글자 갯수 7인지 확인
		var jumin2 = document.getElementById("jumin2").value;
		jumin2 = jumin2.trim();
		if(jumin2.length!=7 || isNaN(jumin2)){
			alert("주민번호 뒷 글자는 7글자이고 숫자여야 합니다.")
			document.getElementById("jumin2").focus();
			return false;
		}

		//5) 약관동의 여부 확인
		//라디오버튼은 체크 or 체크안됨 뿐이므로 불린으로 확인한다.
		if(document.getElementById("agree").checked==true){
			return true;
		}else {
			alert("약관에 동의하셔야 합니다.")
			document.getElementById("agree").focus();
			return false;
		}

		//6) 위 조건들을 만족하면 제출하기
		//<input type=submit>과 동일한 기능의 자바스크립트 메소드
		//폼컨트롤요소가 가지고 있던 최초의 상태 복귀
		var frm = document.memfrm;
		frm.submit();
	}
</script>

</body>
</html>

 

이런식의 양식이 만들어지는 코드이다.

 

순서대로 해석을 하자면

...더보기

1. html 기본구조를 짜고 캐릭터셋을 utf-8 설정 해준다.

2. style 태그에는 좀 예쁘게 꾸미고 싶어서 폰트와 버튼스타일을 변경해주었다.

3. div id가 demo인 div안에 form태그를 선언하고 onsubmit을 validate()를 리턴하는 것으로 해준다.

4. 아이디, 비밀번호, 주민번호, 약관동의 등 적절한 input text,password,checkbox태그와

   버튼역할을 하는 input button, submit,reset 태그를 선언해준다.

5. ① script영역에 기능을 할 함수들을 작성해준다.

5-1 getID : 아이디 영역의 value값을 불러와 비어있는지 판별한 후 alert.

5-2 setID : 아이디 영역의 value값에 주어진 sample이란 문자열을 집어넣음.

5-3 moveCursor : 주민번호 앞칸의 value값이 6개가 다 채워졌는지 확인 후 포커스를 주민번호 뒷칸으로 옮김

6. script영역에 이어서 유효성 검사를 할 함수를 작성해준다.

6-1 아이디 글자수 확인: 아이디 영역의 value값을 불러와 좌우공백제거한다. 8~12글자 사이인지 판별.

6-2 비밀번호 글자수 확인: 비밀번호 영역의 value값을 불러와 5~10글자 사이인지 판별.

6-3 주민번호 앞칸 글자수 확인: 주민번호 앞칸의 글자수가 6글자인지, 숫자인지 확인한다.

6-4 주민번호 뒷칸 글자수 확인: 주민번호 뒷칸의 글자수가 7글자인지, 숫자인지 확인한다.

6-5 약관동의여부 확인: 약관동의에 체크되어있는지 확인한다.

6-6 제출: 위 조건들을 만족한다면 제출(submit)하기

 

저작자표시 비영리

'Frontend' 카테고리의 다른 글

07월 12일 금 | UI 화면구현 08 - Javascript 기초문법Ⅴ  (0) 2019.07.12
07월 11일 목 | UI 화면구현 07 - Javascript 기초문법Ⅳ  (0) 2019.07.11
07월 09일 화 | UI 화면구현 05 - Javascript 기초문법Ⅱ  (0) 2019.07.09
07월 08일 월 | UI 화면구현 04 - Javascript 기초문법Ⅰ  (0) 2019.07.08
HTML/CSS - 가상선택자  (0) 2019.07.05

관련글

댓글

티스토리툴바