Home » 웹 표준 -4. Java Script (2)

웹 표준 -4. Java Script (2)

4.5. Java Script 사용자 정의 함수

  • 내장 함수들이 존재하여 이용할 수 있지만 개발자에게 필요한 모든 것을 지원하고 있지는 않다.
  • 그렇기 때문에 개발자가 직접 자신이 원하는 기능을 하는 함수를 만들 수도 있다.

함수의 기본 형태
[php]
function 함수이름(인자1, 인자2, …….) {
기능 구현부
}
[/php]

  • 함수라는 것을 의미하는 function을 적어주고 함수의 이름 그리고 ( ) 가 들어가는데 괄호 안에 보내주어야 하는 값이 있다면 인자의 이름을 정의하여 보내 줄 수 있다.

<js/week2/customFunction.js>

결과 확인 : http://localhost/WebStandardTutorial/index.html -> week2메뉴 -> 사용자 정의 함수

4.6. Java Script 이벤트 핸들러

  • Java Script의 이벤트를 다루는 방법은 대표적으로 3가지가 있다.
  • HTML에 inline으로 등록하는 방법, element의 onload 속성을 이용하여 등록하는 방법, addEventListener / attachEvent를 이용한 등록 방법이 있다.

HTML에 inline으로 등록

<week2/event.html>

번호 설명
(1) onclick(클릭했을 때 이벤트)로 alert(경고/알림 창)가 실행
  • 초창기 인터넷 넷스케이프 2 당시부터 사용하던 이벤트 핸들러 방식이다. 전통적인 방법으로 오랫동안 사용 해 왔으며, 아직도 많이 사용 되어지고 있다.
  • 하지만 HTML은 오로지 document를 표시 해 주는 역할을 취하기 위해서 아래 두 방법이 최근 웹 개발자들 사이에 자주 이용되고 있다.

element의 onload 속성을 통한 등록

<js/week2/event.js>

<week2/event.html>

번호 설명
(1) document가 모두 준비 되었을 때 (window.onload) event 메소드 실행
(2) document 내의 myButton이라는 id를 가진 element를 찾아 onclick시 실행 될 메소드 지정
(3) button에 이벤트를 등록하기 위해 id 지정
  • inline으로 등록하는 방법보다는 입력해야 할 소스가 많아졌지만 HTML과 Java Script가 완전히 분리 되어 더욱 깔끔해졌으며, 더 높은 접근성을 획득한다.

addEventListener / attachEvent를 이용한 등록

<js/week2/event.js>

<week2/event.html>

번호 설명
(1) document 내의 myButton2라는 element를 찾아 이벤트 리스너 등록.
인자로 이벤트의 이름, 이벤트가 일어났을 때 실행 될 함수, 이벤트 캡쳐링의 사용여부가 들어간다.
추가로 만약 id 대신 name으로 지정한 경우에는 getElementById 대신 getElementByName을 쓰면 된다.

결과 확인 : http://localhost/WebStandardTutorial/index.html -> week2메뉴 -> 이벤트 핸들러

  • attachEvent는 IE10의 하위 버전에서의 호환을 위해 사용한다.
    • document.getElementById(“id”).attachEvent(“onclick”, myFunction)의 형식이며, 이벤트의 이름 부분에 addEventListener와는 다르게 on이 붙이도록 되어 있다.
  • 이벤트 캡쳐링
    • addEventListener에서 세 번째 매개 변수(useCapture)를 true로 설정하면 이벤트의 처리 순서가 하향식이 된다.
    • 즉, DOM 트리에서 지정 된 이벤트에 대해 둘 이상의 요소에 속하는 이벤트 처리기가 있는 경우 트리에서 가장 높은 요소에 속하는 처리기가 먼저 호출되고 하위 요소에 속하는 처리기가 그 다음에 호출된다.
    • false로 설정하면 대상 요소에 속하는 처리기가 먼저 호출되고, 상위 요소에 속하는 처리기가 그 다음에 호출 됩니다.

Java Script 이벤트 함수 목록

  • addEventListener에서 쓰일 때는 on을 뺀다. ex) onclick -> click
  • 붉은 색으로 표시 된 것들은 자주 쓰이는 함수이다.
    이름 설명
    onabort 이미지의 다운로드를 중지할 때(브라우저의 중지 버튼)
    onactivate 개체가 활성화 될 때 발생
    onafterprint 문서가 출력되거나 출력하기 위해 불력 미리 보기를 한 후에 발생
    onafterupdate 데이터영역 개체에서 발생하는 이벤트로 데이터 소스 오브젝트내의 데이터가 업데이트 되었을 때 발생
    onbeforeactivate 개체가 활성화 상태로 되기 바로 직전에 발생
    onbeforecopy 선택 영역이 시스템의 클립보드로 복사되기 바로 직전에 발생
    onbeforecut 선택 영역이 지워지기 바로 직전에 발생
    onbeforedeactivate 부모 문서에서 현재 개체에서 다른 개체로 activeElement가 바뀔 때 발생
    onbeforeeditfocus 편집 가능한 개체 내부에 포함 된 개체가 편집 활성화 된 상태가 되거나 혹은 편집 가능한 개체가 제어를 위해 선택 될 때
    onbeforepaste 시스템의 클립보드에서 문서로 붙여 넣기 될 때 대상 개체에서 발생
    onbeforeprint 문서가 출력 되거나 혹은 출력하기 위해 출력 미리 보기 직전에 발생
    onbeforeunload 페이지가 언로드 되기 직전에 발생
    onbeforeupdate 데이터 영역 개체에서 발생하는 이벤트로 데이터 소스 오브젝트 내의 데이터가 업데이트 되기 전에 발생
    onblur 개체가 포커스를 잃었을 때
    onbounce 마퀴 태그에서 alternate 상태에서 스크롤이 양 사이드에서 바운드될 때 발생
    oncellchange 데이터 제공 개체에서 데이터가 변화할 때 발생
    onchange 개체 혹은 선택 영역의 내용이 바뀔 때 발생
    onclick 개체 위에서 마우스의 왼쪽 버튼을 누를 때 발생
    oncontextmenu 클라이언트 영역에서 사용자가 마우스 오른쪽 버튼을 눌러 콘텍스트 메뉴를 열 때 발생
    oncontrolselect 사용자가 개체의 제어 영역을 만들 때 발생
    oncopy 시스템의 클립보드에 선택 영역 혹은 개체를 복사할 때 소스 개체로부터 발생
    oncut 시스템의 클립보드에 선택영역 또는 개체를 잘라낼 때 소스 개체로부터 발생
    ondataavailable 비정기적으로 데이터를 전달하는 데이터 소스 개체로부터 데이터가 도착할 때마다 정기적으로 발생
    ondatasetchanged 데이터 소스개체의 변화에 의해 데이터가 노출 된 상태로 될 때 발생
    ondatasetcomplete 데이터 소스 개체로부터 모든 데이터가 유용한 상태로 표시될 때 발생
    ondblclick 사용자가 개체에 더블 클릭 할 때 발생
    ondeactivate 부모 문서에서 현재 개체에서 다른 개체로 activeElement가 별할 때 발생
    ondrag 드래그 상태가 지속되는 동안 소스 객체로부터 발생
    ondragend 드래그 상태가 끝날 때 소스 객체로부터 발생
    ondragenter 사용자가 개체를 드래그하여 드롭 가능 위치로 지정 된 영역으로 이동할 때 타겟 개체에서 발생
    ondragleave 사용자가 개체를 드래그하여 드롭 가능 위치로 지정 된 영역을 떠날 때 타겟 개체에서 발생
    ondragover 사용자가 개체를 드래그하여 드롭 가능 위치로 지정 된 영역 내에서 드래그할 때 계속적으로 타겟 개체에서 발생
    ondragstart 선택 된 개체 혹은 텍스트 영역에서 사용자가 드래그를 시작할 때 발생
    ondrop 드래그 앤 드롭 자용에서 상태가 진행되는 동안 개체가 타겟 개체에 드롭 되었을 때 타겟 개체에서 발생
    onerror 개체가 로드 되는 동안 발생하는 이벤트
    onerrorupdate 데이터 소스 개체 내에 데이터가 업데이트 되는 동안 에러가 발생할 때 데이터 영역 개체에서 발생
    onfilterchange 비주얼 필터의 상태가 바뀌거나 트랜지션이 완료되었을 때 발생
    onfinish 마퀴 개체의 loop가 완료 되었을 때 발생
    onfocus 개체가 포커스를 받았을 때 발생
    onfocusin 개체에 포커스가 세팅 되기 바로 직전 개체에 대해 발생
    onfocusout 포커스가 다른 개체로 이동한 후에 포커스를 가고 있는 현재 개체에서 발생
    onhelp 브라우저가 활성화 되어 있는 동안 F1키를 눌렀을 때
    onkeydown 사용자가 키를 눌렀을 때
    onkeypress 기능키를 제외한 키를 눌렀을 때 발생
    onkeyup 사용자가 키를 놓았을 때 발생
    onlayoutcomplete 소스 문서로부터 콘텐드를 가지는 객체가 미리 보기나 출력을 할 때 현재 LayoutRect 개체를 모두 채우는 것이 끝났을 때 발생
    onload 브라우저가 개체를 로드 한 후에 발생
    onlosecapture 개체가 마우스 캡쳐를 잃었을 때 발생
    onmousedown 개체 위에 마우스 버튼을 누를 때 발생(좌우 어느 버튼이든)
    onmouseenter 개체 안으로 마우스 포인터가 들어올 때 발생
    onmouseleave 개체의 경계 밖으로 마우스 포인터가 이동할 때 발생
    onmousemove 개체 위에서 마우스가 움직일 때 발생
    onmouseout 개체 밖으로 마우스 포인터가 빠져 나갈 때 발생
    onmouseover 개체 위로 마우스 포인터가 들어올 때 발생
    onmouseup 마우스가 개체 위에 있는 동안 마우스를 누른 상태에서 해제될 때 발생
    onmousewheel 마우스 휠이 돌아갈 때 발생
    onmove 개체가 움직일 때 발생
    onmoveend 개체가 움직임이 끝날 때 발생
    onmovestart 개체가 움직이기 시작할 때 발생
    onpaste 문서에 클립보드로부터 데이터가 전송될 때 타겟 개체에서 발생
    onpropertychange 개체의 속성이 바뀔 때 발생
    onreadystatechange 개체의 상태가 변화할 때 발생
    onreset Form을 사용자가 리셋 할 경우 발생
    onresize 개체의 크기가 바뀔 때 발생
    onresizeend 제어영역에서 개체의 크기가 사용자에 의해 변화가 끝날 때 발생
    onresizestart 제어영역에서 개체의 크기가 사용자에 의해 변화되기 시작할 때 발생
    onrowenter 데이터 소스 내에서 현재 열이 변화되거나 개체에 새로운 유용한 데이터가 입력될 때 발생
    onrowexit 데이터 소스 컨트롤이 개체 내의 현재 열을 변화시킬 때 발생
    onrowsdelete 레코드 셋에서 열이 삭제될 때 발생
    onrowsinserted 현재 레코드 셋에 새로운 열이 추가된 후에 발생(데이터 개체에서)
    onscroll 사용자가 개체 내의 스크롤 바를 스크롤 할 때 발생
    onselect 현재 선택 된 영역이 바뀔 때 발생
    onselectionchange 문서의 선택 영역의 상태가 바뀔 때 발생
    onselectstart 개체가 선택되기 시작할 때 발생
    onstart 마퀴 개체에서 루프가 매 번 시작될 때 발생
    onstop 사용자가 stop 버튼을 눌렀을 경우 혹은 페이지를 떠날 때 발생
    onsubmit 폼이 전송되기 직전에 발생
    onunload 개체가 언로드 되기 직전에 발생

4.7. Java Script Proto Type

프로토 타입 기반 프로그래밍이란?

  • 객체의 원형인 프로토 타입을 이용하여 새로운 객체를 만들어내는 프로그래밍 기법이다. 이렇게 만들어진 객체 역시 자기자신의 프로토 타입을 갖는다.
  • 이 새로운 객체의 원형을 이용하면 또 다른 새로운 객체를 만들어 낼 수도 있으며 이런 구조로 객체를 확장하는 방식을 프로토 타입 기반 프로그래밍이라고 한다.

Java Script의 프로토 타입이란?

  • Java Script의 모든 객체는 자신을 생성한 객체 원형에 대한 숨겨진 연결을 갖는다. 이때 자기 자신을 생성하기 위해 사용된 객체원형을 프로토 타입이라 한다.
  • 자바스크립트의 모든 객체는 Object 객체의 프로토 타입을 기반으로 확장 되었기 때문에 이 연결의 끝은 Object 객체의 프로토 타입 Object 다. 즉 어떠한 객체가 만들어지기 위해 그 객체의 모태가 되는 녀석을 프로토 타입이라고 한다.

<js/week3/prototypeExam.js>

번호 설명
(1) Person 생성자
(2) prototype을 이용한 getName이라는 함수 생성
(3) john이라는 객체 생성
(4) getName 호출
(5) prototype을 이용한 새로운 함수 추가
(6) 새로 추가한 sayMyName 호출

<js/week3/prototypeExam.js>

번호 설명
(1) prototype을 이용한 Person을 상속
(2) 상속받은 sayMyName 함수 호출
(3) 새로운 함수 추가(setter)
(4) 새로운 함수 추가(getter)
(5) setAmountDue 호출, 인자로 2000을 넘겨준다.
(6) getAmountDue 호출
(7) setAmountDue는 Customer에 추가 된 함수로 john(Person 객체)에는 추가가 되지 않았으므로 error가 난다.

결과 확인 : http://localhost/WebStandardTutorial/index.html -> week3메뉴 -> JavaScript ProtoType

4.8. Java Script 정규식

  • 문자열에서 특정한 캐릭터 조합(character combination)을 찾아 내기 위한 패턴(pattern).
  • 특정 문자나 문자열로 문자열을 다루는 것에 문자뿐 만이 아니고 특수 문자로 다룰 수 있고 이들을 조합하여 다룰 수 있는 조건 식(pattern)을 제공하여 더 세밀한 방법으로 문자들을 검색할 수 있게 한다.

정규식 표

정규식 설명
* 0또는 그 이상 횟수로 매치
? 0또는 1회 매치
+ 1회 또는 그 이상 횟수로 매치
{m} 정확히 m회 매치
{m,} 최소한 m회 매치
{m,n} 최소한 m회 최대한 n회 매치
| OR 를 의미함
^Auto 첫 번째 문자가 반드시 Auto로 시작함을 의미
Auto$ 마지막 문자가 반드시 Auto로 끝남을 의미
\d [0-9] 숫자
\D [^0-9] 숫자가 아닌 것
\s [\t\n\x0B\f\r] 공백
\S [^\s] 공백이 아닌 것
\w [a-zA-Z_0-9] 문자
\W [^\w] 문자가 아닌 것
^ 시작부분
$ 끝부분
\b 글자인 범위
\B 글자가 아닌 것의 범위
? 0 혹은 1
X* 0 이상
X+ 1 이상
X{n} n 개
X{n,} n 이상
X{n, m} n 이상 m 이하
X|Y X or Y
(X) 묶음(그룹화)
  • 예시
    [php]
    /^[a-zA-Z0-9]{8,20}/ 소문자 대문자 숫자로 시작하면서 8~20자로 구성
    /[a-z]/; 영어 소문자로 구성
    /[A-Z]/ 영어 대문자로 구성
    /\d/ 숫자로 구성
    . 아무 문자나 한 문자
    /[0-9]/; 숫자만 허용
    /^([0-9a-zA-Z_-]+)@
    ([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/ 이메일 형식 체크
    [/php]

  • 간단한 예제

번호 설명
(1) 체크 할 문자열
(2) 이메일 형식 체크를 위한 정규식
(3) test(문자열) 함수를 통해 검사. 정해진 이메일 형식과 일치하면 true 일치하지 않으면 false를 리턴한다.