2022-09-01 국비지원 웹개발 18일차

<강사님>

개발자는 반드시 사용자의 실수를 커버할 수 있도록 코딩해야 해요.

사용자가 실수로 페이지를 이탈해서 작성중이던 내용이 초기화 되면 "사이트를 뭐 이렇게 만들었어"라며 불평할거에요.

---

이벤트 등에 대해 배웠다.

---

미션. 폼태그를 사용하여 수량, 단가를 입력받고 수량이나 단가가 수정되면 즉시 금액을 계산하여 output 태그에 출력.

---

1. onfocus, onchage, onblur, onclick

 

(1) onfocus(): 객체가 포커스를 받았을 경우

 

(2) onblur(): 객체가 포커스를 잃었을 경우

 

(3) onchange(): 내용을 변경하였을 경우

 

(4) onclick(): 객체를 클릭했을 경우

 

2. mouseover

 

mouseover(): 마우스 포인터가 있을때

 

그외에도 

mousemove(): 마우스를 이동시킬 때

mouseout(): 마우스 포인터가 벗어났을때

mouseup(): 마우스 버튼을 놓았을 때

mousedown(): 마우스 버튼을 눌렀을 때

가 있다.

해당 이미지에 마우스를 올리면 상단에 크게 출력된다.

 

3. keyevent

 

keyUp(): 사용자가 실수할 경우를 대비해 가장 안정적인 방법이다.

키가 눌렸다 떼질때 발동한다.

 

keyPress(): 키를 누를때 발동한다.

돌이킬 수 없어서 안정성이 떨어진다.

 

keyDown(): 키가 눌렸을때 발동한다.

 

4. event 객체

 

발생한 이벤트의 정보를 기억하는 개체다.

IE 브라우저에서는 window.event

표준 브라우저에서는 function func(e)로 사용한다.

이벤트가 발생한 태그의 이름

이벤트가 발생한 태그의 x값, y값

이벤트 타입

이벤트가 발생한 태그의 타입

 

5. 이벤트 취소

 

(1) 전송취소1 버튼이 클릭되었을 때 chk1 함수의 리턴값이 false면 이벤트 취소. true면 이벤트 발생.

 

(2) 전송취소2 버튼이 클릭되었을 때 chk2 함수가 실행되는데 chk2 함수는 이벤트를 무조건 취소하는 코드가 들어 있다.

 

(3) 전송취소3 버튼이 클릭되었을 때 1회성으로 실행되고 이벤트가 제거된다.

 

6. 기타

 

(1) if문에 isNaN 활용:

if ( isNaN(parseInt(f.cnt.value)) || isNaN(parseInt(f.price.value)) ) {

  f.value.value = '숫자 값을 입력하시오.';

}else{

  f.value.value = parseInt(f.cnt.value) * parseInt(f.price.value);

}

 

(2) innerHTML을 안써도 value에 직접 값을 입력 가능하다.

 

(3) 콜백함수: document.frm.btn.onclick = func;

만약 document.frm.btn.onclick = func(); 으로 적으면 func를 실행한 값이 된다.

 

(4) label for: 

텍스트를 누르면 텍스트박스로 커서가 이동한다.