** 자바스크립트 이벤트 처리
1. 이벤트 종류
2. 이벤트 처리
3. 이미지 미리보기
4. scroll 이벤트
** 정규 표현식 - Regular Expression
1. 구성
2. 생성
3. 정규 표현식
4. 어떤 문자열이 존재하는지 확인
5. 문자열 객체에 존재하는 정규식 관련 메소드
6. 한정자
7. 앵커문자
8. 메타문자
9. 수량문자
10. 정규식의 용도
11. input에 숫자만 입력받도록 만들기
12. 폼의 데이터를 전송할 때 유효성 검사를 수행해서 유효성 검사를 통과하지 못하면 폼의 데이터를 전송하지 않음
** 예외 처리
1. 오류
2. Exception Handling(예외 처리)
3. 예외처리 객체의 속성
** ajax
1. 처리 방법
2. 연습 시에는 읽어올 파일을 직접 작성하지만 서버가 있으면 서버가 생성한다.
3. XMLHttpRequest(Ajax) 객체의 멤버
4. 버튼 누를 때 텍스트 파일 읽어서 출력하기
5. 첫 번째 text에서 두 번째 text로 포커스를 옮길 때 json 파일을 읽어서 출력하기
6. 버튼을 추가해서 버튼을 누르면 data/data.xml의 내용을 출력
** JavaScript 중요 사항
** 이벤트 처리
** 자바스크립트 이벤트 처리
1. 이벤트 종류
- 마우스 클릭 동작 : click, dbclick
- 키보드 동작 : keydown, keypress, keyup – 기본 동작으로 누른 키 값을 input에 출력
- 마우스 동작 : mousedown, mousemove, mouseout, mouseover, mouseup
- mousedown과 mouseup이 합쳐진 이벤트가 click이다.
- mouseup 이벤트에서 false를 리턴하면 마우스를 누르지 않은 것과 같은 효과
- move : 윈도우(브라우저)가 움직였을 때 발생하는 이벤트
- resize : 윈도우의 크기가 변경된 경우 발생하는 이벤트
- 포커스 관련 이벤트
- focus(focusin), blur(focusout)
- focusout 이벤트에서는 중복검사 동작을 수행
- focusin 이벤트에서는 스타일을 변경해서 현재 어떤 input이 포커스를 받았는지 표시
- load : window와 image 객체에서 사용
- window의 경우는 body 태그를 전부 읽어서 메모리에 로드하면 발생하는 이벤트로 이벤트 핸들러 안에는 body 태그의 내용을 전부 사용 가능
- image나 file의 경우 데이터를 읽는 동작이 비동기로 수행되기 때문에 file이나 image의 내용을 사용하려면 이 이벤트가 발생한 후에 사용해야 한다.
- 컴퓨터가 일반적인 경우 순서대로 하나씩 처리 하지만 오랜 시간이 걸리는 작업(파일을 읽거나 화면 출력 등)은 비동기적으로 처리한다.
- window의 load 이벤트를 이용하면 스크립트 코드를 head 부분에 작성할 수 있다.
- change 이벤트 : 값이 변경될 때 발생하는 이벤트
- form에 발생하는 이벤트 : submit, reset
- submit은 form의 데이터가 서버로 전송될 때 발생하는 이벤트로 유효성 검사를 해서 form의 데이터를 서버로 보낼 것인지 여부를 결정 - 보안이 중요하지 않은 데이터의 유효성 검사를 수행
- reset은 폼의 데이터를 클리어 할 때 발생하는 이벤트
- 최근에는 폼을 간소화하는 것이 유행이라서 거의 사용하지 않음
- beforeunload 이벤트 : 브라우저가 종료되기 직전에 발생
- 터치와 방향전환과 관련된 이벤트 : 모바일에서만 사용 가능
- 스크롤 관련 이벤트도 추가
2. 이벤트 처리
- 이벤트를 처리할 객체를 찾아오기
- var 변수명 = document.getElementById("아이디")
- 이벤트 처리를 하거나 조작을 할 태그에는 id를 부여해야 한다.
- 이벤트 처리
- 변수명.addEventListener("이벤트이름", function(event){
이벤트 처리 내용;
- }
- <태그 on 이벤트이름 = "스크립트나 함수이름(매개변수)"></태그>
3. 이미지 미리보기
- file 객체를 배치해서 file 객체를 누르면 이미지 파일을 선택할 수 있도록 하고 이미지 파일을 선택하면 img 태그에 이미지를 미리보기
4. scroll 이벤트
- 스크롤 바가 있을 때 스크롤 바를 아래로 드래그하면 발생하는 이벤트
- 모바일에서 데이터가 많은 경우 한 번에 출력하지 못하는 경우에 사용
- youtube의 경우는 일반 페이지에도 사용
- 실제 작업을 하는 경우에는 ajax를 이용해서 데이터를 가져오는 부분까지 구현해야 한다.
- 스크롤을 할 때 스크롤의 위치와 문서의 높이가 같으면 가장 하단에서 스크롤 한 것이라서 데이터를 가져와서 출력하면 된다.
- 웹 사이트나 모바일 애플리케이션을 만들 때 페이징 대신에 이 기능을 고려
- 무한 스크롤
1) body 태그에 id = 'body'로 설정
2) window.load 이벤트처리 함수에 추가
3) 브라우저의 스크롤 바를 하단에서 아래로 스크롤 하면서 테스트
** 정규 표현식 - Regular Expression
- 거의 모든 프로그래밍 언어에서 사용하는 문자열 표현식
- RegExp 라고 많이 사용
- java의 String 클래스의 split 메소드는 문자열이 아니고 문자열 패턴을 대입한다.
1. 구성
- Pattern : 패턴
- Modifier : 한정자
2. 생성
1) new RegExp(패턴, 한정자) : 패턴을 적을 때는 문자열처럼 작은 따옴표나 큰 따옴표와 같이 작성
2) /패턴/한정자 : 작은 따옴표나 큰 따옴표를 하지 않음
3. 정규 표현식
1) test(문자열) : 정규 표현식과 일치하는 패턴이 있으면 true 없으면 false
2) exec(문자열) : 정규 표현식과 일치하는 문자열을 리턴
4. 어떤 문자열이 존재하는지 확인
5 문자열 객체에 존재하는 정규식 관련 메소드
- replace(정규식 객체, 변경할 문자열) : 정규식에 해당하는 부분을 문자열로 치환
- search(정규식 객체) : 문자열에서 정규식 객체의 위치를 찾아주고 없으면 음수를 리턴
- split(정규식 객체) : 정규식 객체를 기준으로 문자열을 분할해서 배열로 리턴
6 한정자
- g : 전체 영역에서 비교
- i : 대소문자 구분 없이 비교
- m : 여러 줄에서 비교
- 3개는 순서와 상관없이 혼합해서 사용 가능
7. 앵커문자
- ^문자열 : 문자열로 시작하는
- 문자열$ : 문자열로 끝나는
8. 메타문자
1) . : 아무 글자나 1개
2) [문자 나열] : 문자 중 1개
- [0123456789] 숫자 중 1개
3) - : 범위
- [A-Z] : 대문자, [0-9] : 숫자, [가-힣] : 한글
- [A-Z a-z 0-9] : 영문자나 숫자
4) \d(숫자), \D(숫자는 아닌), \w(단어), \W(단어가 아닌)
9. 수량문자
1) A+ : A가 1개 이상
2) A* : A가 0개 이상
3) A? : A가 0개 나 1개
4) A{숫자} : A가 숫자 만큼
5) A{숫자1, 숫자2} : A가 숫자1에서 2만큼
6) A{숫자, } : A가 숫자 이상
10. 정규식 용도
- 사용자의 입력이 올바른 형식으로 만들어졌는지 유효성 검사하는데 이용
- 최근에는 자바 프레임워크나 파이썬 프레임워크 등에 이 정규식을 이용해서 유효성 검사를 간다하게 하는 기능들이 추가되었음
- HTML의 경우는 HTML5에서 input에 pattren이라는 속성을 이용해서 정규식을 이용한 유효성 검사를 수행하도록 해준다.
- chrome의 최신 버전에서는 이 기능이 동작을 하지 않음
11. input에 숫자만 입력받도록 만들기
- 숫자가 아닌 데이터를 입력하면 표시하지 않기
12. 폼의 데이터를 전송할 때 유효성 검사를 수행해서 유효성 검사를 통과하지 못하면 폼의 데이터를 전송하지 않음
- 폼의 데이터를 전송할 때 javascrip로 유효성 검사를 해주는 것이 좋은데 잘못된 데이터를 입력한 경우 브라우저에서 확인하지 않으면 서버에서 유효성 검사를 한 후 되돌아와야 하기 때문에 트래픽이 늘어나기 때문이다.
- 클라이언트에서 유효성 검사를 했더라도 서버에서 다시 유효성 검사를 해야 한다. 클라이언트에서 전송이 될 때는 유효성 검사를 통과했지만 서버로 넘어오는 도중에 데이터가 변경될 수 있기 때문이다.
** 예외 처리
1. 오류
1) 물리적 오류 : 코드를 작성할 때 문법에 맞지 않는 구문을 작성해서 컴파일되지 않거나 실행할 수 없는 상황
- IDE에서는 물리적 오류의 경우 빨강색 오류 표시와 메시지를 출력해준다.
2) 논리적 오류 : 문법에는 맞게 작성해서 실행이 되는데 결과가 다르게 나오는 경우
- 디버겅을 이용해서 값들을 확인해봐야 한다.
- IDE가 제공해주는 디버깅 기능을 이용해도 되고 언어의 로그 출력 함수나 메소드를 이용해서 확인
3) 예외(Exception) : 문법에는 맞게 작성되서 실행이 되다가 특정한 상황을 만나면 프로그램이 중단되는 현상
- 예외 처리 구문을 삽입하거나 예외를 찾아서 해결해야 한다.
4) 단언(Assertion)
- 정상적인 상황이지만 특정 조건을 정해놓고 이 조건을 만족하지 않으면 강제로 예외를 발생시켜서 프로그램을 중단하는 것
- 스마트 폰 프로그래밍에서는 디바이스 최저 수준이나 API의 최저 수준을 정해놓고 이 조건을 만족하지 않으면 프로그램을 실행하지 않는 것 도는 보안을 위해서 특정한 상황이 발생하면 프로그램을 중단하는 것
2. Exception Handling(예외 처리)
1) 목적
- 예외가 발생했을 때 로그를 기록하기 위해
- 예외가 발생하더라도 뒤의 작업을 계속 수행하기 위해
2) 방법
try{
예외가 발생할 가능성이 있는 코드;
}catch(예외처리 변수){
예외가 발생했을 때 처리할 내용;
}finally{
무조건 수행할 내용;
}
3. 예외처리 객체의 속성
- message : 예외 메시지
- description : 예외에 대한 설명
- name : 예외 이름
** ajax
- Asynchronous JAvasctipt XML의 약자
- 비동기적으로 자바스크립트를 이용해서 XML 데이터를 받아오는 기술
- 최근에는 XML 대신에 txt(csv), json, script, html을 사용하기도 한다.
- html 페이지 전체에서 특정 부분만 데이터가 주기적으로 변경되는 경우 이 변경되는 데이터를 출력하기 위해서 페이지 전체를 다시 출력하지 않고 데이터를 비동기적으로 받아서 페이지의 일부분만 수정하기 위해서 사용
- animation은 모양을 변경하는 것이고 ajax는 모양을 변경하는 것이 아니고 데이터를 변경하는 것이다.
1. 처리 방법
1) XMLHttpRequest 객체를 생성
2) 처리 결과를 받을 이벤트 리스너를 등록 - 콜백 메소드
3) 서버로 보낼 파라미터를 생성(Key-Value-Coding : Key와 Value를 쌍으로 설정)
4) open 메소드를 이용해서 연결 요청 준비
5) send 메소드를 이용해서 요청을 전송
6) 콜백 메소드에서 받아온 데이터를 사용
2. 연습 시에는 읽어올 파일을 직접 작성하지만 서버가 있으면 서버가 생성한다.
3. XMLHttpRequest(Ajax) 객체의 멤버
1) readyState : ajax 객체의 상태를 나타내는 속성
- 0이면 객체를 생성한 직후
- 1이면 get()을 호출한 상태
- 2이면 send()를 호출한 상태
- 3이면 응답이 오기 시작한 상태
- 4이면 서버 응답이 완료된 상태
2) status : 서버로부터의 응답 상태
- 100번대이면 처리중
- 200번대이면 정상 응답
- 300번대이면 리다이렉트 중 - 작업이 완료되고 응답을 해주는 중
- 400번대이면 클라이언트 오류 - 401(권한 없음), 404(URL 없음)
- 500번대이면 서버 오류
3) onreadystateChange : readyState가 변경될 때 호출될 콜백 메소드를 지정하는 속성
- 콜백 : 상태 변화(이벤트)가 생겼을 때 호출될 메소드
4) open(요청방식, 요청주소, 비동기 전송 여부)
- 요청 방식은 GET 또는 POST
5) send(파라미터) : 요청 전송
6) abort() : 요청 중지
7) 받아온 내용
- responseText : 서버에서 XML을 제외한 내용을 전송한 경우
- responseXML : 서버에서 XML을 전송한 경우
8) 헤더 정보 읽기
- getAllResponseHeaders() : 모든 헤더 정보를 읽기
- getAllResponseHeader(헤더 이름) : 헤더이름에 해당하는 정보를 읽기
- setResponseHeader(헤더이름, 값) : 헤더이름에 값을 설정
9) 데이터
- header(meta data) : 데이터를 위한 데이터
- body : 데이터
4. 버튼 누를 때 텍스트 파일 읽어서 출력하기
5. 첫번째 text에서 두번째 text로 포커스를 옮길 때 json 파일 읽어서 출력하기
- JSON 문자열 파싱 - JSON.parse
1) body에
6. 버튼을 추가해서 버튼을 누르면 data/data.xml의 내용을 출력
- xml은 responseText 대신에 responseXML을 이용해서 데이터를 가져온다.
- xml은 파싱을 할 때 먼저 원하는 태그를 찾는다. - getElementsByTagName(태그 이름)
- 찾은 데이터는 Node의 배열(List)
- 배열을 순회하면서 첫 번째 자식을 찾아오고 그 자식의 nodeValue를 찾으면 태그 안의 값을 가져올 수 있다.
- nodeValue 대신에 attributes를 이용하면 속성의 집합을 가져올 수 있다.
** 자바스크립트 중요
- String과 RegularExpression
- DOM 객체 찾아오기 - document.getElementById(아이디);
- DOM객체 주요 속성 : innerHTML, value, src, style 등
- DOM 객체 이벤트 처리 - 폼의 데이터 전송할 때 유효성 검사
- ajax
** 이벤트 처리
- 콜백 메소드(함수)를 지정
- 콜백 메소드를 소유한 인스턴스를 지정 : Delegate Pattern