7월10일 - JavaScript 3

JavaScript

10. JavaScript StringMethod

1. String Method

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.write(txt.length+"<br>"); //26

var str = "Please locate where 'locate' occurs!";
document.write(str.indexOf("locate")+"<br>"); //7
document.write(str.lastIndexOf("locate")+"<br>"); //21
document.write(str.lastIndexOf("John")+"<br>"); //-1
document.write(str.indexOf("locate", 15)+"<br>"); //21
document.write(str.lastIndexOf("locate", 15)+"<br>");  //7
document.write(str.search("locate")+"<br>");  //7
document.write(str.slice(7, 13)+"<br>"); //locate
document.write(str.substring(7, 13)+"<br>");  //locate
document.write(str.replace("Microsoft", "W3Schools")+"<br>"); 
//Please locate where 'locate' occurs!

2. 문자열 앞뒤 공백 제거

- String.trim()

- 아직 호환되지않는 explorer가 있기에

https://www.w3schools.com/js/js_string_methods.asp

var str = "       Hello World!        ";
alert("#"+str.trim()+"#"); //#Hello World!#
alert(str.trim().length); //12

- 정규표현식으로 공백 제거 (regular expression)

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

11. JavaScript Event

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

- <body> 에 쓴다

- 기본 이벤트 종류

EVENT	DESCRIPTION
onchange	다른 객체로 바뀌었을 때
onclick	클릭했을 때
onmouseover	객체에 마우스가 올려졌을 때
onmouseout	객체에 마우스가 나갔을 때
onkeydown	키보드를 눌렀을 때 (의 이벤트 과정↓)
	onkeydown->onkeypress->onkeyup
onload	문서 불러오는 작업이 끝났을 때
onunload	현재 문서가 종료되거나 나갔을 때

1) onclick

<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="솔데스크" onclick="location.href='http://www.soldesk.com'">

2) 마우스

<input type="button" value="마우스" onmouseover="alert('마우스over')" onmouseout="alert('마우스out')">

3) 키보드

<input type="text" onkeydown="alert('키보드누름')">
<hr>
<textarea name="5" rows="10" cols="" onkeydown="alert('키보드누름')"></textarea>

4) 커서

- 입력상자에서 커서가 들어왔을 때 onfocus
나갔을 때 onblur

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

5) 목록상자

6) submit

12. JavaScript 연습문제1 회원가입 폼 만들기

1. name tag

1) 기본 버튼 설정해준다.

2) .js파일 만들어주기

3) .js파일 import하기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>12_회원가입.html</title>
	<style>		
		.btn1{width: 100px;height: 20px;color: red;}
	</style>
	<!-- .js파일 import -->
	<script src="../js/myScript.js"></script>
</head>
<body>
	<h1>* 회원가입 *</h1>
	<hr>
	<form name="memfrm" id="memfrm" action="ok.jsp" onsubmit="return validate()">
		<input type="button" value="버튼1" onclick="test1()"> 
		<input type="button" value="버튼2" onclick="test2(5,7)"> 
		<input type="button" value="버튼3" onclick="test3('KOREA')"> 
		<input type="button" value="SOLDESK" onclick="test4()"> 
        </form>
</body>

- .js파일 생성하기

-> js폴더를 따로 생성한 후, myScript.js 파일을 만든다.

/* myScript.js */
/* charset=utf-8 */
function test3(a) {
	alert("버튼클릭~"+a);
}//test3() end

function test4(url){
	//페이지 이동
	//window.location.href
	//location
	location.href="http://www.soldesk.com";
}//test4() end

2. 아이디

1) getID()

- function getID() 에서

- window객체 : 자바스크립트 최상위 객체. 생략가능
- document객체 : HTML문서의 를 가리키는 객체

- <input type=text name=uid id=uid> 접근

<body>
	<form name="memfrm" id="memfrm" action="ok.jsp" onsubmit="return validate()">
	아이디 : 
		<input type="text" name="uid" id="uid" class="btn1">	
		<input type="button" value="ID중복확인" onclick="getID()">
		<input type="button" value="ID적용" onclick="setID('happy')">
	</form>
</body>

<script>
	function getID() {
		//1) <form>의 컨트롤 요소 접근시 name 사용
		//[object HTMLFormElement]
		alert(document.memfrm);
		//[object HTMLInputElement]
		alert(document.memfrm.uid);
		//실제값-아이디에 값을 넣었을 때 그 값이 나온다. 
		alert(document.memfrm.uid.value); 

		//2) ID로 접근
		//[object HTMLInputElement]
		alert(document.getElementById('uid'));
		//실제값-아이디에 값을 넣었을 때 그 값이 나온다. 
		alert(document.getElementById('uid').value);

		//3) tag name으로 접근 <input~~>
		//[object HTMLCollection]
		alert(document.getElementsByTagName("input"));
		//[object HTMLInputElement] -> 4번째태그 접근
		alert(document.getElementsByTagName("input")[4]);
		//실제값-아이디에 값을 넣었을 때 그 값이 나온다. 
		alert(document.getElementsByTagName("input")[4].value);
		
		//4) class 접근
		//[object HTMLCollection]
		alert(document.getElementsByClassName("btn1"));
	}//getId() end
</script>

2) setID(str)

- ID적용버튼 눌렀을 때, happy가 나오면 성공

function setID(str){
	//1) name 접근
	document.memfrm.uid.value=str;

	//2) ID로 접근 (추천)
	document.getElementById('uid').value=str;

	//3) tag name으로 접근
	document.getElementsByTagName("input")[4].value=str;
}//setID() end

3. 비밀번호, 주민번호, 약관동의 function

1) 비밀번호 & 약관동의

<form name="memfrm" id="memfrm" action="ok.jsp" onsubmit="return validate()">
	비밀번호 : <input type="password" name="upw" id="upw">
	<hr>
	약관동의 : <input type="checkbox" name="agree" id="agree">
</form>

2) 주민번호

- 주민번호 앞자리와 뒷자리의 갯수를 따로 설정해준다.

- 앞자리 6자리를 다 적은 후 자동으로 뒷자리로 커서가 넘어가는 moveCursor() function을 만들어준다.

<form name="memfrm" id="memfrm" action="ok.jsp" onsubmit="return validate()">
	주민번호 : 
 	<input type="text" name="jumin1" id="jumin1" size="6" maxlength="6"  onkeyup="moveCursor()"> -
	<input type="text" name="jumin2" id="jumin2" size="7" maxlength="7">
</form>

<script>
	//주민번호 6자리친 후 자동으로 커서 넘어가는 function만들기
	function moveCursor(){ 
		//1) 주민번호 앞칸 id=jumin1의 입력값 확인하기
		var jumin1=document.getElementById('jumin1').value;
		//alert(jumin1);

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

4. 가입 및 취소 버튼 만들기

- 가입버튼 : 아이디, 비밀번호, 주민번호 등 빈칸의 조건에 맞게 적었다면 가입성공

- 취소버튼 : 취소를 누르면 폼의 최초의 상태로 돌아감.

<form name="memfrm" id="memfrm" action="ok.jsp" onsubmit="return validate()">
	<input type="submit" value="가입">
	<input type="reset" value="취소">
</form>

5. 회원가입폼 유효성 검사

- 아이디 비번을 만족시키지 않은 상태에서 시연해보았는데, 아이디에만 에러창이 떴다. 왜 비번의 에러창은 뜨지

않았는지 생각을 해보았는데, 이는 맨처음 아이디에서 false에 걸렸기 때문에 밑으로 내려가지 못해 아이디에러창 만 뜬 이유이다.

1) 아이디 글자 갯수 8~12글자 사이인지 확인하기, 위의 조건을 만족하지 않는다면
->경고창 ->커서를 아이디를 입력할 수 있도록 해주고 ->서버로 전송하는 것을 차단

<script>
function validate(){
	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;
	}//if end
}//validate() end
</script>

2) 비밀번호 글자 갯수 5~10개 사이인지 확인

<script>
	function validate(){
		var upw=document.getElementById('upw').value;
		upw=upw.trim(); //좌우 공백제거
		if(upw.length<5 || upw.length>=11){
			alert("비밀번호를 5~10개로 입력부탁드림");
			document.getElementById('upw').focus();
			return false;
		}//if end
	}//validate() end
</script>

3) 주민번호 앞칸 글자 갯수 6개 사이인지/ 숫자인지 확인

<script>
	function validate(){
		var jumin1=document.getElementById('jumin1').value;
		jumin1=jumin1.trim(); //좌우 공백제거
		if(jumin1.length!=6 || isNaN(jumin1)){
			alert("주민번호 앞자리 6글자 숫자로 입력부탁드림");
			document.getElementById('jumin1').focus();
			return false;
		}//if end
	}//validate() end
</script>

4) 주민번호 뒷칸 글자 갯수 7개 사이인지/ 숫자인지 확인

<script>
	function validate(){
		var jumin2=document.getElementById('jumin2').value;
		jumin2=jumin2.trim(); //좌우 공백제거
		if(jumin2.length!=7 || isNaN(jumin1)){
			alert("주민번호 뒷자리 7글자 숫자로 입력부탁드림");
			document.getElementById('jumin2').focus();
			return false;
		}//if end
	}//validate() end
</script>

5) 약관에 동의했는지?

<script>
  function validate(){
      if(document.getElementById('agree').checked==true){
          return true; //서버로 전송
      }else{
          alert("약관에 동의해주세요!")
          return false;
      }//if end
  }//validate() end
</script>

저작자표시

'공부 > 화면구현 UI' 카테고리의 다른 글

7월12일 - JavaScript 5 (0)	2019.07.12
7월11일 - JavaScript 4 (0)	2019.07.11
7월9일 - JavaScript 2 (0)	2019.07.09
7월8일 - JavaScript 1 (0)	2019.07.08
7월4일 - UI 구현 CSS (0)	2019.07.04

3XL

7월10일 - JavaScript 3

JavaScript

'공부 > 화면구현 UI' 카테고리의 다른 글

티스토리툴바

7월10일 - JavaScript 3

JavaScript

'공부 > 화면구현 UI' 카테고리의 다른 글

'공부/화면구현 UI' Related Articles

티스토리툴바