1 교시
** 자바스크립트 이벤트 처리
1. 이벤트 종류
=> 마우스 클릭 동작 : click, dbclick
=> 키보드 동작 : keydown, keypress, keyup - 기본 동작을 누른 키 값을 input에 출력
=> 마우스 동작 : mousedown, mousemove, mouseout, mousepver, mouseup
mousedown과 mouseup이 합쳐진 이벤트가 click이다
mouseup 이벤트에서 false를 리턴하면 마우스를 누르지 않은 것과 같은 효과
=> move : 윈도우(브라우저창)가 움직였을 때 발생하는 이벤트
=> resize : 윈도우의 크기가 변경된 경우 발생하는 이벤트
=> 포커스 관련 이벤트
focus(focusin), blur(focusout)
focusout 이벤트에서는 중복검사 동작을 수행(최근 id 중복검사에 이용된다)
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를 부여해야 한다.
=> 이벤트처리
변수명.addEventListemer("이벤트이름", function(event){
이벤트 처리 내용;
});
<태그 on이벤트이름 = "스크립트나 함수이름(매개변수)"></태그>
3. 이미지 미리보기
=> file 객체를 배치해서 file 객체를 누르면 이미지 파일을 선택할 수 있도록하고 이미지파일을 선택하면 img 태그에 이미지를 미리보기
2~3 교시
4. scroll 이벤트
=> 스크롤 바가 있을 때 스크롤 바를 아래로 드래그하면 발생하는 이벤트
=> 모바일에서 데이터가 많은 경우 한 번에 출력하지 못하는 경우에 사용
youtube의 경우는 일반 페이지에도 사용
=> 실제 작업을 하는 경우에는 ajax를 이용해서 데이터를 가져오는 부분까지 구현을 해야한다.
=> 스크롤을 할 때 스크롤의 위치와 문서의 높이가 같으면 가장 하단에서 스크롤 한 것이라서 데이터를 가져와서 출력을 하면 된다.
=> 웹 사이트나 모바일 애플리케이션을 만들 때 페이징 대신에 이 기능을 고려
=> 무한 스크롤
1) body 태그에 id="body"추가
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 핸들링</title>
<script>
//window에 load 이벤트가 발생 한 후
//body에 있는 내용을 전부 읽어서 메모리에 로드하고 난 후
window.addEventListener("load", function(event){
//file의 선택이 변경되면 함수를 호출
var imginp = document.getElementById("imginp");
//값이 변경되면 함수를 호출
imginp.addEventListener("change", function(event){
//함수 호출 - this는 imginp
readURL(this);
});
//스크롤이 가능하도록 태그 추가
for(var i=0; i<20; i=i+1){
document.getElementById("body").innerHTML +="<h1>Infinity Scroll</h1>"
}
//스크롤 이벤트가 발생한 경우 처리
window.addEventListener("scroll", function(event){
//스크롤 상단의 좌표 찾아오기
var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
var scrollTop = supportPageOffset ? window.pageYOffset :isCSS1Compat ?
document.documentElement.scrollTop : document.body.scrollTop;
//스크롤 하단의 좌표 찾아오기
var scrollHeight = scrollTop + window.innerHeight;
//문서의 하단 좌표 찾아오기
var documentHeight = document.body.clientHeight;
//스크롤 하단의 좌표가 문서의 하단 좌표보다 크거나 같으면
if(scrollHeight >= documentHeight){
//데이터를 가져와서 출력하는 코드
for(var i=0; i<20; i=i+1){
document.getElementById("body") .innerHTML +="<h1>Infinity Scroll</h1>";
}
}
});
});
//이벤트 처리 함수
var readURL = function(input){
//선택한 파일이 있는지 확인
if(input.files && input.files[0]){
//선택한 파일이름을 가져오기
var filename = input.files[0].name;
//파일 읽기 객체를 생성
var reader = new FileReader();
//파일 읽기 - 비동기적으로 읽음
//바로 뒤에 코드를 작성하면 파일을 읽기 전에 수행
reader.readAsDataURL(input.files[0]);
//이벤트 처리 함수를 작성 - 콜백 함수
reader.addEventListener("load", function(e){
document.getElementById("img").src =e.target.result;
});
}
}
</script>
</head>
<body id='body'>
<h2>이미지 미리보기</h2>
<form id="form1">
<!-- image 파일만 선택할 수 있도록 생성 -->
<input type="file" id="imginp"
accept="image/*" />
<img id="img" width="200"
height="200" border="1" />
</form>
</body>
</html>
3) 브라우저의 스크롤 바를 하단에서 아래로 스크롤 하면서 테스트
** 정규 표현식 - Regular Expression
=> 거의 모든 프로그래밍 언어에서 사용하는 문자열 표현식
=> RegExp 라고 많이 사용
=> java의 String 클래스의 split 메소드는 문자열이 아니고 문자열 패턴을 대입한다.
1. 구성
=> Pattern : 패턴
=> Modifier : 한정자
2. 생성
1) new RegExp(패턴, 한정자) : 패턴을 적을 때는 문자열 처럼 작은 따옴표나 큰 따옴표와 같이 작성
2) /패턴/한정자 : 작은 따옴표나 큰 따옴표를 하지 않는다.
3. 정규 표현식 메소드
1) test(문자열) : 정규 표현식과 일치하는 패턴이 있으면 true 없으면 false
2) exec(문자열) : 정규 표현식과 일치하는 문자열을 리턴
4. 어떤 문자열이 존재하는지 확인
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>정규 표현식</title>
<script>
var str = "javaScript RegExp";
// 정규식 객체 생성
var reg = /Reg/
// str에 reg가 존재하는지 확인
if(reg.test(str)){
console.log("문자열이 존재");
}else{
console.log("존재하지 않음");
}
</script>
</head>
<body>
</body>
</html>
5. 문자열 객체에 존재하는 정규식 관련 메소드
=> replace(정규식 객체, 변경할 문자열) : 정규식에 해당하는 부분을 문자열로 치환
=> search(정규식 객체) : 문자열에서 정규식 객체의 위츠를 찾아주고 없으면 음수를 리턴
=> split(정규식 객체) : 정규식 객체를 기준으로 문자열을 분할해서 배열로 리턴
4 교시
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} : 숫자1에서 2만큼
6) A{숫자,} : A가 숫자 이상
10. 정규식의 용도 (중요)
=> 사용자의 입력이 올바른 형식으로 만들어졌는지 유효성 검사하는데 이용
=> 최근에는 자바 프레임워크나 파이썬 프레임워크등에 이 정규식을 이용해서 유효성 검사를 간단하게 하는 기능들이 추가가 되었다.
=> HTML의 경우는 HTML5에서 input에 pattern이라는 속성을 이용해서 정규식을 이용한 유효성 검사를 수행하도록 해준다.
chrome의 최신 버전에서는 이 기능이 동작을 하지 않는다.
11. input에 숫자만 입력받도록 만들기
=> 숫자가 아닌 데이터를 입력하면 표시하지 않기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>정규 표현식</title>
<script>
var str = "javaScript RegExp";
// 정규식 객체 생성
var reg = /Reg/
// str에 reg가 존재하는지 확인
if(reg.test(str)){
console.log("문자열이 존재");
}else{
console.log("존재하지 않음");
}
// 문자열 치환
var result = str.replace(reg, "정규식");
console.log(result);
result = str.split(reg);
console.log(result);
</script>
</head>
<body>
숫자만 입력<input type="text" id="numberinput"/>
</body>
<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;
// 숫자가 아니면 ''로 변경
// e.target 대신에 input객체를 찾아서 사용해도 된다.
e.target.value = e.target.value.replace(/[^0-9]/g,'');
});
</script>
</html>
12. 폼의 데이터를 전송할 때 유효성 검사를 수행해서 유효성 검사를 통과하지 못하면 폼의 데이터를 전송하지 않음
=> 폼의 데이터를 전송할 때 javascript로 유효성 검사를 해주는 것이 좋은데 잘못된 데이터를 입력한 경우 브라우저에서 확인하지 않으면 서버에서 유효성 검사를 한 후 되돌아와야 하기 때문에 트래픽이 늘어난다.
=> 클라이언트에서 유효성 검사를 했더라도 서버에서 다시 유효성검사를 해야 한다.
클라이언트에서 전송이 될 때는 유효성 검사를 통과했지만 서버로 넘어오는 도중에 데이터가 변경될 수 있기 때문이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>정규 표현식</title>
<script>
var str = "JavaScript RegExp";
//정규식 객체 생성
var reg = /Reg/
//str에 reg가 존재하는지 확인
if(reg.test(str)){
console.log("문자열이 존재");
}else{
console.log("존재하지 않음");
}
//문자열 치환
var result = str.replace(reg, "정규식");
console.log(result);
//정규식을 기준으로 분할
result = str.split(reg);
console.log(result);
</script>
</head>
<body>
숫자만 입력<input type="text" id="numberinput"/>
<form action="server.jsp" id="nameform">
<div id="nameerror"></div>
이름<input type="text"
placeholder="이름은 한글 2~5로 입력하세요"
id="name" name="name" class="name" />
<input type="submit" />
</form>
</body>
<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;
//입력한 키가 숫자가 아니면 삭제
//숫자가 아니면 ''로 변경
//e.target 대신에 input 객체를 찾아서 사용해도 됩니다.
e.target.value = e.target.value.replace(/[^0-9]/g,'');
});
//nameform에서 전송버튼을 누른 경우를 처리
document.getElementById("nameform").addEventListener("submit", function(event){
//변수명으로 예약어를 사용하면 안되고
//id 와 name 같은 이름도 대부분 예약어
var name1 = document.getElementById("name");
//입력된 값 가져오기
var val1 = name1.value.trim();
if(val1.length < 1){
//메시지 출력
document.getElementById("nameerror").innerHTML = "이름은 필수입니다.";
//스타일 변경
document.getElementById("nameerror").style.color = "red";
//내용을 삭제
name1.value = "";
//포커스 옮기기
name1.focus();
//기본 이벤트 처리 하지 않음
//폼의 데이터가 전송이 안됨
event.preventDefault();
}
else{
//한글 2-5자 정규식을 생성
var reg = /^[가-힣]{2,5}$/
//정규식을 통과하지 못한 경우
if(!reg.test(val1)){
//메시지 출력
document.getElementById("nameerror").innerHTML = "이름은 한글 2 ~ 5";
//스타일 변경
document.getElementById("nameerror").style.color = "red";
//내용을 삭제
name1.value = "";
//포커스 옮기기
name1.focus();
//기본 이벤트 처리 하지 않음
//폼의 데이터가 전송이 안됨
event.preventDefault();
}
}
});
</script>
</html>
5 교시
** 예외처리
1. 오류
1) 물리적 오류 : 코드를 작성할 때 문법에 맞지 않는 구문을 작성해서 컴파일되지 않거나 실행할 수 없는 상황
IDE에서는 물리적 오류의 경우 빨간색 오류 표시와 메시지를 출력해준다.
2) 논리적 오류 : 문법에는 맞게 작성해서 실행은 되는데 결과가 다르게 나오는 경우
=> 디버깅을 이용해서 값들을 확인해봐야 한다.
IDE가 제공해주는 디버깅 기능을 이용해도 되고 언어의 로그 출력함수나 메소드를 이용해서 확인
3) 예외 (Exception) : 문법에는 맞게 적성되서 실행이 되다가 특정한 상황을 만나면 프로그램이 중단되는 현상
=> 예외처리 구문을 삽입하거나 예외를 찾아서 해결을 해야 한다.
4) 단언(Assertion) : 정상적인 상황이지만 특정 조건을 정해 놓고 이 조건을 만족하지 않으면 강제로 예외를 발생시켜서 프로그램을 중단하는 것
=> 스마트폰 프로그래밍에서는 디바이스 최저 수준이나 API의 최저 수준을 정해놓고 이 조건을 만족하지 않으면 프로그램을 실행하지 않는 것 또는 보안을 위해 특정한 상황이 발생하면 프로그램을 중단하는 것 (여기까지는 반드시 기억)
2. Exception Handling(예외 처리)
1) 목적
=> 예외가 발생했을 때 로그를 기록하기 위해서
=> 예외가 발생하더라도 뒤의 작업을 계속 수행하기 위해서
2) 방법
try{
예외가 발생할 가능성이 있는 코드;
}catch(예외처리변수){
예외가 발생했을 때 처리할 내용;
}finally{
무조건 수행할 내용;
}
3. 예외처리 객체의 속성
message : 예외 메시지
description : 예외에 대한 설명
name : 예외 이름
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>예외처리</title>
<script>
// 예외처리 구문을 이용해서 예외가 발생하면 처리를 하도록 생성
// 서버에서 데이터를 받아올 때 많이 사용
try{
var ar = new Array(4300000000);
}catch(e){
console.log(e.name);
console.log(e.description);
}
alert("메시지");
</script>
</head>
<body>
</body>
</html>
** 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. 연습을 할 때는 읽어올 파일을 직접 작성하지만 서버가 있으면 서버가 생성을 한다.
6~7 교시
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(헤더이름) : 헤더이름에 해당하는 정보를 읽기
setResponseHeaders(헤더이름, 값) : 헤더이름에 값을 설정
9) 데이터
=> header(meta date) : 데이터를 위한 데이터
=> body : 데이터
4. 버튼을 누를 때 텍스트 파일 읽어서 출력하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax - 비동기적으로 서버로부터 데이터를 받아오기</title>
</head>
<body>
<div id="disp"></div>
<input type="button" value="ajax-text" id="txtbtn"/>
</body>
<script>
// DOM 객체 찾아오기
// ineerHTML은 여는태그와 닫는태그사이의 내용
// value는 input이나 textarea 그리고 select에서 입력하거나 선택하거나 보이는 내용
var disp = document.getElementById("disp");
var txtbtn = document.getElementById("txtbtn");
// 이벤트 처리
txtbtn.addEventListener("click", function(event){
//alert("클릭");
// 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.innerHTML = request.responseText;
}
}
}
});
</script>
</html>
5. 첫번째 text에서 두번째 text로 포커스를 옮길 때 json 파일 읽어서 출력하기
=> JSON 문자열 파싱 - JSON.parse
회원가입 시 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax - 비동기적으로 서버로부터 데이터를 받아오기</title>
</head>
<body>
<div id="disp"></div>
<input type="button" value="ajax-text" id="txtbtn"/>
<input type="text" id="inputjson"/>
<input type="text" />
</body>
<script>
// DOM 객체 찾아오기
// ineerHTML은 여는태그와 닫는태그사이의 내용
// value는 input이나 textarea 그리고 select에서 입력하거나 선택하거나 보이는 내용
var disp = document.getElementById("disp");
var txtbtn = document.getElementById("txtbtn");
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);
}
}
}
});
// 이벤트 처리
txtbtn.addEventListener("click", function(event){
//alert("클릭");
// 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.innerHTML = request.responseText;
// 읽어온 데이터 파싱
var ar = JSON.parse(request.reponseText);
for(var i=0; i<ar.length; i=i+1){
var obj=ar[i];
// 데이터 출력
disp.innerHTML = obj.code + ":" + obj.value;
}
}
}
}
});
</script>
</html>
8 교시
6. 버튼을추가해서 버튼을 누르면 data/data.xml의 내용을출력
=> xml은 responseText대신에 responseXML을 이용해서 데이터를 가져온다.
=> xml은 파싱을 할 대 먼저 원하는 태그를 찾는다. (getElementByTagName(태그이름)
찾은 데이터는 Node의 배열(List)
배열을 순회하면서 첫번째 자식을 찾아오고 그 자식의 nodeValue를 찾으면 태그 안의 값을 가져올 수 있다.
nodeValue 대신에 attributes를 이용하면 속성의 집합을 가져올 수 있다.
1) 버튼을 추가
var xmlbtn= document.getElementById("xmlbtn");
2) 스크립트 코드 추가
xmlbtn.addEventListener("click", function(event){
// ajax 객체 생성
var request = new XMLHttpRequest();
//alert(request);
// 요청 경로 생성
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");
for(var i=0; i<names.length; i=i+1){
var name = names[i],childNodes[0].nodeValue;
disp.innerHTML += name + "<br/>";
}
}
}
}
})
** 자바스크립트
=> DOM 객체 찾아오기 - document.getElementById(아이디);
DOM객체 주요 속성 : innerHTML, value, src, style 등
=> DOM 객체 이벤트 처리 - 폼의 데이터 전송할 때 유효성 검사
=> ajax
** 이벤트 처리
=> 콜백 메소드(함수)를 지정
=> 콜백 메소드를 소유한 인스턴스를 지정 : Delegate Pattern