수업 정리

43일차 수업정리(이벤트 처리, 예외처리, ajax)

Vita500cc 2020. 6. 8. 19:04

**자바스크립트 이벤트 처리

1. 이벤트 종류

    => 마우스 클릭 동작 : click, dbclick

    => 키보드 동작 : keydown, keypress, keyup - 기본 동작으로 누른 키 값을 input에 출력

    => 마우스 동작 : mousedown, mousemove, mouseover, mouseout, mouseup

        - mousedown과 mouseup이 합쳐진 이벤트가 click

        - mouseup 이벤트에서 false를 리턴하면 마우스를 누르지 않은 것과 같은 효과

    => move : 윈도우(브라우저)가 움직였을 때 발생하는 이벤트

    => resize : 윈도우의 크기가 변경된 경우 발생하는 이벤트

    => 포커스 관련 이벤트

        - focus(focusin), blur(focusout)

        - focusout 이벤트에서는 중복검사 동작을 수행

        - focusin 이벤트에서는 스타일을 변경하여 현재 어떤 input이 포커스를 받았는지 표시

    => load : window와 image 객체에서 사용

        - window : body태그를 전부 읽고 메모리 로드시 발생하는 이벤트

                      (이벤트 핸들러 안에는 body태그 내용 전부 사용 가능)

        - image, file : 데이터를 읽는 동작이 비동기로 수행되어 file, iamge의 내용 사용은 이벤트 발생 후 사용 가능

        - 일반적인 경우 순서대로 하나씩 처리하지만 오랜 시간이 걸리는 작업(파일읽기, 화면출력 등)은 비동기로 처리

        - window의 load 이벤트 이용시 스크립트 코드를 head부분에 작성 가능

    => change 이벤트 : 값이 변경될 때 발생하는 이벤트

    => form에 발생하는 이벤트 : submit, reset

        - submit : form의 데이터가 서버로 전송될 때 발생하는 이벤트. 유효성 검사를 통해 데이터의 서버 전송여부 결정

                     (보안이 중요하지 않은 데이터의 유효성 검사를 수행)

        - reset : 폼의 데이터를 클리어할 때 발생하는 이벤트(최근에는 폼을 간소화하는 것이 유행이라 거의 사용X)

    => beforeunload 이벤트 : 브라우저가 종료되기 직전에 발생(서버 연동시에 중요)

    => 터치와 방향전환과 관련된 이벤트 : 모바일에서만 사용 가능

    => 스크롤 관련 이벤트도 추가

 

2. 이벤트 처리

    => 이벤트를 처리할 객체를 찾아오기

        - var 변수명 = document.getElementById("아이디")

        - 이벤트 처리를 하거나 조작을 할 태그에는 id를 부여해야 함

    => 이벤트 처리

        - 변수명.addEventListener("이벤트 이름", function(event){ 이벤트 처리내용; });

    => <태그 on이벤트 이름 = "스크립트나 함수이름(매개변수)" ></태그>

 

3. 이미지 미리보기

    => file 객체를 배치하여 file객체를 누르면 이미지 파일을 선택할 수 있도록 하고, 이미지 파일 선택시 img태그에 이미지를 미리보기

 

<script>
	//window에 load이벤트가 발생한 후
	//body에 있는 내용을 전부읽어서 메모리에 로드하고 난 후 출력
	window.addEventListener("load", function(event){
		//file의 선택이 변경되면 함수를 호출
		var imginp = document.getElementById("imginp");
		//값이 변경되면 함수를 호출
		imginp.addEventListener("change", function(event){
			//함수 호출 - this는 imginp
			readURL(this);
		});
	});
	
	//이벤트 처리 함수
	var readURL = function(input){
		//선택한 파일이 있는지 확인
		if(input.files && input.files[0]){
			//선택한 파일 이름을 가져오기
			var filename = input.files[0].name;
			console.log("gg" + filename);
			//파일 읽기 객체를 생성
			var reader = new FileReader();
			//파일 읽기 - 비동기적으로 읽음
			//바로 뒤에 코드를 작성하면 파일을 읽기전에 수행
			reader.readAsDataURL(input.files[0]);
			//이벤트 처리 함수를 작성 - 콜백 함수
			reader.addEventListener("load", function(e){
				document.getElementById("img").src = e.target.result;
			});
		}
	}
</script>

<body>
	<h2>이미지 미리보기</h2>
	<form id="form1">
		<input type="file" id="imginp" accept=".jpg, .jpeg, .gif, .png"/> 
		<!-- accept="image/* 도 됨-->
		<img id="img" width="200" height="200" border="1"/>
	</form>
</body>

 

4. 스크롤 이벤트

    => 스크롤 바가 있을 때 스크롤 바를 아래로 드래그하면 발생하는 이벤트

    => 모바일에서 데이터가 많은 경우 한번에 출력하지 못하는 경우에 사용

        - youtube의 경우는 일반 페이지에도 사용

    => 실제 작업을 하는 경우 ajax를 사용하여 데이터를 가져오는 부분까지 구현 해야 함

    => 스크롤시 스크롤 위치와 문서의 높이가 같으면 최하단에서 스크롤 한 것이므로 데이터를 가져와서 출력

    => 웹 사이트나 모바일 애플리케이션을 만들때 페이징을 대신에 이 기능을 고려

    => 무한 스크롤

  1) body 태그에 id='body'로 설정

 

  2) 스크롤 이벤트 처리

//스크롤 이벤트가 발생한 경우 처리
window.addEventListener("scroll", function(event){
	//스크롤 상단의 좌표 찾아오기
	var supportPageOffset = window.pageXOffset !== undefined;
	var isCSS1Compat = ((document.compatMode || "") ==="CSS1Compat");
	var scrollTop = supportPageOffset ? window.pageYOffset : 
		isCSS1Compat ? document.documentScrollTop : 
			document.body.scrollTop;
	console.log(scrollTop);
	//스크롤 하단의 좌표 찾아오기
	var scrollHeight = scrollTop + window.innerHeight;
	//문서의 하단 좌표 찾아오기
	var documentHeight = document.body.clientHeight;
			
	//스크롤 하단의 좌표가 문서의 하단 좌표보다 크거나 같으면
	if(scrollHeight >= documentHeight){
		//데이터를 가져와서 출력
		for(var i=0; i<20; i+=1){
			document.getElementById("body").innerHTML += "<h1>Infinity Scroll</h1>";
		}
	}
});

  3) 브라우저의 스크롤 바를 하단에서 아래로 스크롤 하면서 테스트

 

**정규 표현식 - Regular Expression

    => 거의 모든 프로그래밍 언어에서 사용하는 문자열 표현식

    => RegExp라고 많이 사용

    => java의 String 클래스의 Split 메소드는 문자열이 아니라 문자열 패턴을 대입

1. 구성

    => pattern :패턴

    => Modifier : 한정자

 

2. 생성

  1) new RegExp(패턴, 한정자) : 패턴을 적을 때는 문자열 처럼 작은 따옴표나 큰 따옴표와 같이 작성

  2) /패턴/한정자 : 작은 따옴표나 큰 따옴표를 하지 않음

 

3. 정규 표현식 메소드

  1) test() : 정규 표현식과 일치하는 패턴이 있으면 true, 없으면 false

  2) exec() : 정규 표현식과 일치하는 문자열을 리턴

 

5. 문자열 객체에 존재하는 정규식 관련 메소드

    => replace(정규식 객체, 변경할 문자열) : 정규식에 해당하는 부분으 문자열로 치환

    => search(정규식 객체) : 문자열에서 정규식 객체의 위치를 찾아주고 없으면 음수를 리턴

    => split(정규식 객체) : 정규식 객체를 기준으로 문자열을 분할하여 배열로 리턴

 

6. 한정자

  1) g : 전체 영역에서 비교

  2) i : 대소문자 구분없이 비교

  3) m : 여러줄에서 비교

    => 3개는 순서와 상관없이 혼합하여 사용 가능

 

7. 앵커 문자

  1) ^문자열 : 문자열로 시작하는

  2) 문자열$ : 문자열로 끝나는

 

8. 메타문자

  1) . : 아무글자나 1개

  2) [문자나열] : 문자 중 1개 -> [0123456789] : 숫자중 1개

  3) - : 범위

    => [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에 pattern이라는 속성을 이용하여 정규식을 사용한 유효성검사 수행

        - chrome의 최신 버전에서는 이 기능이 동작하지 않음

 

11. input에 숫자만 입력받도록 만들기

    => 숫자가 아닌 데이터를 입력하면 표시하지 않기

<script>
	var numberinput = document.getElementById("numberinput");
	numberinput.addEventListener("input", function(event){
		//console.log("이벤트 발생");
		//이벤트 객체 찾아오기
		var e = event || window.event;
		//console.log(e);
		//누른 키값 가져오기
		var keyCode = (e.which)? e.which : e.keyCode;
		//console.log(keyCode);
		//입력한 키가 숫자가 아니면 ''로 변경
		//e.target 대신에 input 객체를 찾아서 사용해도 됨
		e.target.value = e.target.value.replace(/[^0-9]/g,'');
	});
</script>

12. 폼의 데이터 전송시, 유효성 검사를 수행하여 유효성 검사를 통과하지 못하면 폼의 데이터를 전송하지 않음

    => 폼의 데이터 전송시 javascript로 유효성 검사를 해주는 것이 좋음

        - 잘못된 데이터 입력시 브라우저에서 미확인시 서버에서 유효성 검사 후 되돌아와야 할 수 있음(트래픽 증가)

    => 클라이언트에서 유효성 검사를 했더라도 서버에서 재검사 해야함

        - 클라이언트 전송시에는 유효성 검사를 통과했지만, 서버로 넘어오는 도중에 데이터가 변경될 수 있기 때문 

 

**예외처리

1. 오류

  1) 물리적 오류 : 코드를 작성 할 때, 문법에 맞지 않는 구문을 작성하여 컴파일 되지 않거나 실행 할 수 없는 상황

    - IDE에서는 물리적 오류의 경우 빨강색 오류표시와 메시지 출력

  2) 논리적 오류 : 문법에는 맞게 작성하여 실행이 되지만 결과가 다르게 나오는 경우

    - 디버깅을 이용하여 값들을 확인해봐야 함

    - IDE가 제공해주는 디버깅 기능을 이용해도 되고, 언어의 로그 출력 함수나 메소드를 이용해서 확인

  3) 예외(exception) :문법에는 맞게 작성되어 실행되다가 특정한 상황을 만나면 프로그램이 종료되는 현상

    => 예외처리 구문을 삽입하거나 예외를 찾아서 해결을 해야함

  4) 단언(Assertion) : 정상적인 상황이지만 특정 조건을 정하고, 만족하지 않으면 강제로 예외를 발생시켜 프로그램 중단

    => 스마트폰 프로그래밍에서는 디바이스 최저 수준이나 API최저수준을 정해놓고 조건 불만족시 프로그램 미실행

    => 보안을 위해 특정한 상황이 발생하면 프로그램 중단

 

2. Exception Handling(예외처리)

  1) 목적

    => 예외가 발생했을 때, 로그를 기록하기 위해서

    => 예외가 발생하더라도 뒤의 작업을 계속 수행하기 위해서

  2) 방법

    => try{ 예외 발생 가능성이 있는 코드; }

         catch(예외처리 변수){ 예외 발생시 처리할 내용; }

         finally{ 무조건 수행할 내용; }

 

3. 예외처리 객체의 속성

    - message : 예외 메시지

    - description : 예외에 대한 설명

    - name : 예외 이름

 

**ajax

    => Asynchronous JAvascript 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(헤더이름) : 헤더이름에 해당하는 정보를 읽기

    - setResponseJeader(헤더이름, 값) : 헤더이름에 값을 설정

  9) 데이터

    => header(meta data) : 데이터를 위한 데이터

    => body : 데이터

 

4. 버튼을 누를 때 텍스트 파일 읽어서 출력하기

<body>
	<div id="disp"></div>
	<input type="button" value="ajax-text" id="txtbtn"/>
	<input type="text" id="inputjson"/>
	<input type="text"/>
	
</body>

<script>
	//DOM 객체 찾아오기
	//innerHTML은 여는 태그와 닫는 태그 사이의 내용
	//value는 input이나 textarea, select에서 입력, 선택하거나 보이는 내용
	var disp = document.getElementById("disp");
	var txtbtn = document.getElementById("txtbtn");
	
	//이벤트 처리
	txtbtn.addEventListener("click", function(event){
		//ajax 객체 생성
		var request = new XMLHttpRequest();
		alert(request);
		
		//요청 경로 생성
		request.open('GET', 'data/data.txt');
		//요청 전송
		request.send('');
		
		//상태 변화가 발생한 경우 처리할 콜백 메소드 생성
		request.onreadystatechange = function(){
			//정상적으로 응답이 전부 오면
			if(request.readyState == 4){
				if(request.status >= 200 && request.status < 300){
					//데이터 출력
					alert(request.responseText);
					
					//disp영역에 출력
					disp.innerHTML = request.responseText;
				}
			}
		}
		
	});
</script>

 

5. 첫번째 text에서 두번째 text로 포커스를 옮길때 json 파일 읽어서 출력하기

    => JSON 문자열 파싱 = JSON.parse

      [{"code" : "1"

  1) body에 태그 추가

<input type="text" id="inputjson"/>
<input type="text"/>

 

  2) script 코드 추가

var inputjson = document.getElementById("inputjson");
//포커스가 옮겨질때 이벤트 처리
inputjson.addEventListener("focusout", function(event){
	//ajax 객체 생성
	var request = new XMLHttpRequest();
	//요청 생성
	request.open('GET', 'data/data.json');
	//요청 전송
	request.send('');
		
	//응답이 오면 처리하는 메소드 등록
	request.onreadystatechange = function(){
		if(request.readyState == 4){
			if(request.status >= 200 && request.status < 300){
				//읽어온 데이터 확인
				alert(request.responseText);
					
				//읽어온 데이터 파싱
				var ar = JSON.parse(request.responseText);
				//배열의 요소 순회
				for(var i=0; i<ar.length; i +=1){
					var obj = ar[i];
					//데이터 출력
					disp.innerHTML = obj.code + " : " + obj.value;
				}
			}
		}
	}
});

 

6. 버튼을 추가해서 버튼을 누르면 data/tel.xml의 내용을 출력

    => xml은 responseText대신에 responseXML을 이용해서 데이터를 가져옴

    => xml은 파싱할때 먼저 원하는 태그를 찾음 - getElementsByTagName(태그이름)

        - 찾은 데이터는 Node의 배열(List)

        - 배열을 순회하면서 첫번째 자식을 찾아오고 그 자식의 nodeValue를 찾으면 태그 안의 값을 가져올 수 있음

        - nodeValue 대신에 attributes를 이용하면 속성의 집합을 가져올수 있음

  1) 버튼을 추가

var xmlbtn = document.getElementById("xmlbtn");

  2) 스크립트 코드 추가

xmlbtn.addEventListener("click", function(event){
	//ajax 객체 생성
	var request = new XMLHttpRequest();
	//요청 생성
	request.open('GET', 'data/tel.xml');
	//요청 전송
	request.send('');
		
	//응답이 오면 처리하는 메소드 등록
	request.onreadystatechange = function(){
		if(request.readyState == 4){
			if(request.status >= 200 && request.status < 300){
				var names = request.responseXML.getElementsByTagName("name");
				var parts = request.responseXML.getElementsByTagName("part");
				for(var i=0; i<names.length; i+=1){
					var part = parts[i].childNodes[0].nodeValue;
					disp.innerHTML += part + " ";
						
					var name = names[i].childNodes[0].nodeValue;
					disp.innerHTML += name + "<br/>";
				}
			}
		}
	}
});

**자바스크립트 

    => String과 RegularExpression

    => DOM 객체 찾아오기 - document.getElementById(아이디);

    => DOM 객체 주요 속성 : innerHTML, value, src, style 등

    => DOM 객체 이벤트 처리 : 폼의 데이터 전송시 유효성 검사

    => ajax

 

**이벤트 처리

    => 콜백 메소드(함수)를 지정

    => 콜백 메소드를 소유한 인스턴스를 지정 : Delegate Pattern

 

**Quick Sort

    => 기준을 설정하여 기준데이터를 정렬할 위치로 이동

        - 기준 데이터 왼쪽에는 기준데이터보다 작은 데이터, 오른쪽에는 큰 데이터를 배치

    => 위의 작업을 수행한 후 기준의 왼쪽 배열과 오른쪽 배열을 가지고 작업을 다시 수행

    => 배열의 데이터 개수가 1개가 될 때까지 수행

    => 재귀적으로 수행하기 때문에 데이터가 많으면 수행시간이 오래걸리지만 데이터의 개수가 적으면 빠름

 

tip!

1. 유효성 검사할 때 id, pw 같은 경우 SQL의 예약어는 입력할 수 없도록 해야함

    => SQL injection

정렬 : 선택, 버블, 삽입, 퀵

검색 : 순차, 이분, 피보나치

자료구조 : ArrayList, LinkedList, Stack, Queue, Deque

Tree의 순회 -> 산술연산 식 -> 괄호 맞추기

 

저작자표시 (새창열림)