(JavaScript) HTML 요소이벤트

on 속성이벤트

- 모든 태그에는 접두사 on이 붙은 속성이 있다.

- 접두사 on 속성은 자바스크립트와 연계된다.
- 접두사 on 속성은 사용자의 행위에 관련된 속성이다.

- 두개이상 사용 가능

 

자주 쓰이는 이벤트

onclick : 사용자가 클릭했을 때

<div onclick="alert('클릭이벤트');"
	style="display:inline; border:3px solid #f00; padding:10px; cursor: pointer;">
    난 버튼이 아닌데
</div>
<button type="button" onclick="alert('클릭!!!');">버튼</button>
<button type="button" onclick="location.href='https://naver.com'">네이버이동</button>
<button type="button" onclick="myClick(this);" value="홍길동">함수연계</button>
<script type="text/javascript">
	function myClick(obj) {
		console.log([obj]);
	}
</script>

 

onchange : 사용자의 행위에 의해 값이 변경 되었을 시

<select onchange="myChange(this);">
	<option value=""> :: 값 선택 :: </option>
	<option value="1"> 1 </option>
	<option value="2"> 2 </option>
	<option value="3"> 3 </option>
</select>

<script type="text/javascript">
	function myChange(obj) {
		console.log(obj);
		console.log(obj.value);
	}
</script>

onblur : 커서 활성화가 없어 졌을 때

<input type="text" onblur="myBlur(this);">
<script type="text/javascript">
	function myBlur(obj) {
		console.log(obj.value);
	}
</script>

onkeyup : 키를 눌렀다가 땠을 경우

<input type="text" onkeyup="myKey(this, 'up');" onblur="myKey(this, 'blur')">
<script type="text/javascript">
	function myKey(obj, type) {
		console.log(obj.value, type);
	}
</script>

 

 

 

Form

- form 태그에 name속성에 값을 지정하면 해당 지정된 값을 윈도우 객체에 등록해준다.
- form의 하위 요소가 있다면 form객체 하위에 등록을 name 키 명칭으로 하위 요소 객체를 등록해준다.

<form name="myForm" method="post">
	<input type="text" name="userName">
	<input type="radio" name="userGender" value="남">남
	<input type="radio" name="userGender" value="여">여
</form>
<button type="button" onclick="myFormFn();">전송</button>
<script type="text/javascript">
	console.log(myForm);
	//객체 속성으로 폼 속성 값 지정하기
	myForm.action='user.jsp';
	console.log(myForm.userName);
	
	function myFormFn() {
		var f = myForm;			
		
		if(f.userName.value.trim() == ''){
			alert('값을 입력 하셔야합니다.');
			//focus() -> form 객체에 커서 활성화시
			f.userName.focus();
			return;
		}
		
		//동일한 name의 값을 가진 객체가 2개 이상 일시 배열로 받아 오게 된다.
		console.log(f.userGender);
		var cnt = 0;
		for(var i=0; i<f.userGender.length; i++){
			//체크가 되어 있다면 true 아니라면 false
			if(f.userGender[i].checked){
				cnt++;
			}
		}
		if(cnt == 0){
			alert('성별을 체크 해주세요.')
			f.userGender[0].focus();
			return;
		}
		
		//form 객체에는 submit 메서드가 있다.
		//submit메서드 실행시 action에 명시된 경로로 양식 전송
		f.submit();
	}
</script>

실습1. 계산이라는 버튼을 클릭시 n1값과 n2값을 합산하여 nSum에 적용 시켜라

<form name="shopPrice">
	<input type="number" name="n1" > +
	<input type="number" name="n2"> =
	<input type="number" name="nSum" readonly="readonly">
	<button type="button">계산</button>
</form>

풀이

<!-- 버튼에 onclick이벤트 추가 -->
<button type="button" onclick="fnSum()">계산</button> 

<script type="text/javascript">
	function fnSum() {
		var f = shopPrice;
		var n1 = Number(f.n1.value);
		var n2 = Number(f.n2.value);
			
		f.nSum.value = n1+n2;
	}
</script>

결과

 

실습2. 계산이라는 버튼을 아래의 체크박스의 체크된 대상의 가격을 합산하여 sSum에 결괏값을 출력하여라.

<form name="sPrice">
	<input type="checkbox" name="com" value="5000"> 컴퓨터 부품 : 5000
	<input type="checkbox" name="com" value="4000"> 컴퓨터 부품 : 4000
	<input type="checkbox" name="com" value="3000"> 컴퓨터 부품 : 3000
	<input type="checkbox" name="com" value="2000"> 컴퓨터 부품 : 2000
	<input type="checkbox" name="com" value="1000"> 컴퓨터 부품 : 1000<br>
	<input type="number" name="sSum" readonly="readonly">
	<button type="button">계산</button> 
</form>

풀이

<!-- 버튼에 onclick 이벤트 추가 -->
<button type="button" onclick="sPriceSum()">계산</button> 

<script type="text/javascript">
	function sPriceSum() {
		var f = sPrice;
		var sum = 0;
		for(var i=0; i<f.com.length; i++){
			if(f.com[i].checked){
				sum += Number(f.com[i].value);
			}
		}		
		f.sSum.value = sum;		
	}
</script>

결과

선생님 풀이

function sSumFn(){
	var comArray = sPrice.com;
    var sum = 0;
    for(var i=0; i<comArray.length; i++){
    	if(comArray[i].checked){
        	sum += Number(comarray[i].value;
        }
    }
    sPrice.sSum.value = sum;
}

 

실습3. 옵션 및 수량이 변경 될 경우 총가격,부가세,총 결제 금액을 계산하여 해당 영역에 출력하도록 하여라.

<form name="goodsView">
	<input type="text" name="goodsPrice" value="10000" readonly>
	<select name="goodsOption">
		<option value="0"> :: 옵션 없음 :: </option>
		<option value="1000"> 추가 a 타입 : 1000 </option>
		<option value="2000"> 추가 b 타입 : 2000 </option>
		<option value="3000"> 추가 c 타입 : 3000 </option>
	</select>
	<select name="goodsNum">
		<option value="1"> 1개 </option>
		<option value="5"> 5개 </option>
		<option value="10"> 10개 </option>
		<option value="15"> 15개 </option>
	</select><br>
	총가격 : <input type="text" name="totalPrice" value="0" readonly>
	부가세 : <input type="text" name="totalVat" value="0" readonly> <!-- 세금 10% -->
	총 결제 금액 : <input type="text" name="paymentPrice" value="0" readonly>
</form>

풀이

//select태그들에 onchange 이벤트 추가

function goodsFn() {
	var f=goodsView;
	var goodsOption = Number(f.goodsOption.value);
	var goodsNum = Number(f.goodsNum.value);
	
	/*
		총가격 : (10000 + 옵션 ) * 수량
		부가세 : 총가격 * 0.1
		총 결제 금액 : 총가격 + 부가세
	*/
	
	var totalPrice = (10000+goodsOption)*goodsNum;
	
	f.totalPrice.value = totalPrice;
	f.totalVat.value = totalPrice * 0.1;
	f.paymentPrice.value = totalPrice + (totalPrice*0.1);
}

결과

선생님풀이

function goodsPriceSum(){
	var price = Number(goodsView.goodsPrice.value);
	var option = Number(goodsView.goodsOpion.value);
	var num = Number(goodsView.goodsNum.value);
	
	var total =(price + option) * num;
	var vat = total * 0.1;
	
	goodsView.totalPrice.value = total;
	goodsView.totalVat.value = vat;
	goodsView.paymentPrice.value = total + vat;
}

 

 

정규표현식으로 숫자만 입력받기

<input type="text" onkeyup="onlyNumber(this)" onblur="onlyNumber(this)">

<script type="text/javascript">

	function onlyNumber(target) {    
    
		var regex = /[^0-9]/g; // ^:반대 , g:전체 -> 숫자(0~9)가 아닌(^) 모든(g) 값들
		var result = target.value.replace(regex, ""); //숫자가 아닌 모든 값들을 공백으로 치환
        
		console.log(target.value, 'input값');
		console.log(result, '정규표현식에 관련된 값을 공백으로 치환');
        
        target.value = result; //치환된 값을 재대입
	}
</script>