**DOM(Document Object Model)
1.정의
=>웹 브라우저가 HTML이나 XML 문서를 인식하는 방식 : 문서의 구조를 트리 형태로 펼쳐 놓은 것
=>document 객체와 관련된 객체의 집합: body 태그 내에 존재하는 태그
body 태그: document.body
2.document 객체의 프로퍼티 나 메소드
document.body: body 태그
document.innerHTML: body 태그 내의 내용 - HTML을 기재하면 body 태그에 출력
document.write 나 writeln(HTML 내용): innerHTML 속성에 기재한 것과 동일한 효과
document.referrer: 이 URL에 어떻게 접근했는지를 저장하고 있는 속성, 마케팅에서 중요한 속성
=>웹 사이트의 메인 페이지에 어떻게 접속했는지 어떤 페이지에 어떻게 접속했는지를 아는 것은 웹 로그 분석에서 가장 중요한 이슈 중의 하나
이러한 데이터를 수집해서 대시보드에 출력할 수 있도록 해주는 솔루션 중의 하나가 구글 애널리틱스입니다.
3.document 객체를 이용한 문서 객체(태그) 가져오기
document.getElementById(id): id를 가진 객체 1개를 리턴 - 가장 권장
document.getElementsByName(name): name을 가진 객체를 배열로 리턴
document.getElementsByTagName(tag): tag을 가진 객체를 배열로 리턴
document.getElementsByClassName(class): class를 가진 객체를 배열로 리턴
document.폼이름.요소이름 으로 폼의 요소에 접근 - 최근에는 권장하지 않음
document.getElementById(select 의 id).options[index]를 이용해서 select의 각 옵션에 접근할 수 있고 document.getElementById(select 의 id).options[document.getElementById(select 의 id).selectedIndex]
=>최근의 html을 구현할 때 테이블에 출력할 수 있는 개수를 선택하도록 하는 경우가 많습니다.
select에서 선택한 데이터를 찾아올 수 있어야 합니다.
4.DOM 객체의 속성 사용
1)속성 변경
DOM객체.속성이름 = 값;
=>img 태그의 이미지 파일 경로 변경
img객체.src = "이미지 파일 경로";
2)스타일시트 값 변경
DOM객체.style.속성이름 = 값;
3)태그 내용 변경
DOM객체.innerHTML = 값;
4)폼의 입력 객체들의 값을 변경하거나 가져올 때는 value 속성 이용
DOM객체.value
5)body 태그의 내용을 자바스크립트에서 수정할 때는 태그의 내용이 먼저 나오고 스크립트가 나와야 합니다.
스타일시트는 body에 내용을 전부 읽고 화면에 출력할 때 적용되기 때문에 style은 body 태그의 내용이 나오기 전이나 후 상관이 없습니다.
**DOM 객체의 이벤트 처리
1.event
=>사용자나 시스템이 다른 것에 영향을 미치는 사건
=>input 객체 안에서 사용자가 키보드를 누르는 것 등
2.javascript 의 이벤트
=>마우스 이벤트
=>키보드 이벤트
=>DOM 객체 관련 이벤트
=>기타 이벤트
3.이벤트 처리 방식
1)인라인 방식
<태그 on이벤트이름="이벤트 처리 내용"></태그>
2)스크립트 안에서 작성 - 고전적 이벤트 처리
DOM객체.on이벤트이름 = function(매개변수){
이벤트 처리 내용;
}
3)스크립트 안에서 작성 - 표준 이벤트 모델
DOM객체.addEventListener("이벤트이름", function(매개변수){
이벤트 처리 내용;
});
<body>
<span id="disp">텍스트</span>
<!-- 인라인 이벤트 모델: 태그 안에서 이벤트 처리
태그에 스크립트 코드가 알아보기가 어렵고(유지보수가 어려움) 길게 작성하기가 어려움 -->
<input type="button" id="stylebtn" value="글자색상변경"
onclick="document.getElementById('disp').style.color='red';"/>
<input type="button" id="contentbtn" value="텍스트 내용 변경"/>
<input type="button" id="standardbtn" value="내용과 스타일 변경"/>
<script>
//DOM 객체 찾기
var disp = document.getElementById("disp");
var contentbtn = document.getElementById("contentbtn");
var standardbtn = document.getElementById("standardbtn");
//고전적 이벤트 처리 모델 - 이전에도 많이 사용했고 최근에도 많이 사용
contentbtn.onclick = function(e){
//태그 안의 내용 변경
disp.innerHTML = "변경된 텍스트";
};
//표준 이벤트 처리 모델 - W3C에서 권장
standardbtn.addEventListener("click", function(e){
disp.innerHTML = "표준 이벤트 모델";
disp.style.backgroundColor = "papayawhip";
});
</script>
</body>
4.이벤트 처리 함수에 넘어가는 데이터
1)this: 이벤트가 발생한 객체로 별도의 설정없이 바로 사용 가능
2)이벤트 처리함수의 매개변수
=>매개변수가 1개가 넘어가는데 이 매개변수가 이벤트 처리 객체
=>이벤트에 대한 정보를 가지고 넘어갑니다.
=>이벤트 처리 객체는 브라우저 별로 다르게 가져와서 사용합니다.
=>웹 클라이언트에서는 IE를 고려해야 합니다.
=>IE에서는 window.event로 가져오고 나머지 브라우저에서는 이벤트 처리함수의 매개변수를 이용
function(e){
//e가 true이면 e를 대입하고 아니면 window.event를 대입
//숫자 0이나 객체가 null 이면 false로 간주
//python이나 javascript 와 같은 script 계열(R, Kotlin, Swift 등)의 언어에서 많이 등장하는 방법
var e = e || window.event;
}
3)이벤트 처리 객체의 속성
=>data: 드래그 앤 드랍을 했을 때 드랍되는 데이터
=>modifier: 같이 누른 조합키
=>screenX, screeeY: 이벤트가 발생한 좌표 - 마우스 이벤트에서 이용
=>which: 키보드이벤트에서 누른 키보드의 ascii 코드 값
5.이벤트 트리거
=>객체의 이벤트를 강제로 발생시키는 것
객체.on이벤트명() 으로 이벤트를 강제로 발생시킬 수 있습니다.
6.DefaultEvent
=>일부 객체는 기본적인 이벤트 처리 코드가 포함되어 있습니다.
a 태그는 클릭을 하면 href 속성에 대입된 URL로 이동
submit 은 form의 데이터를 서버에게 전송합니다.
reset은 form의 데이터를 삭제
<button> 태그로 만들어지 버튼은 form안에 있는 경우 submit으로 동작
=>기본 이벤트 처리 코드를 동작하지 않도록 하고자 할 때는 이벤트 처리 객체가 preventDefault() 메소드를 호출하면 됩니다.
preventDefault()->이벤트를 처리안하고자 할 경우이다.
7.이벤트 버블 방지 - 버블은 겹치는 이벤트가 있을 경우 처리
없을 경우 부모것만 띄워준다.
=>포함하고 있는 객체와 포함된 객체에 이벤트 처리 코드가 모두 작성된 경우 포함된 객체에서 이벤트가 발생하는 경우 포함하고 있는 객체의 이벤트 발생을 Event Bubbling 이라고 합니다.
=>자바스크립트에서는 이벤트 버블링을 방지하기 위해서는 IE에서는 이벤트 처리 객체의 cancelBubble 이라는 속성에 true를 대입하면 되고 그 이외의 브라우저는 stopPropagation()이라는 함수를 호출하면 됩니다.
8.이벤트 종류
1)click: 마우스로 클릭
2)dblclick: 더블 클릭
3)keyboard 이벤트
=>keydown -> keypress ->keyup
=>키보드를 누르면 keydown 과 keyup이 호출
=>문자 키를 누르고 누르고 있는 경우에 keypress 이벤트가 발생합니다.
=>이벤트 객체의 which 속성이 누른 키값을 리턴하는데 이 속성이 없으면 keyCode 속성을 이용해서 누른 키값을 가져옵니다.
4)mouse 이벤트
=>mousedown, mousemove, mouseout(마우스 영역 바깥으로 나갈 때), mouseover(마우스가 영역 안으로 들어온 경우), mouseup
5)move 와 resize
=>move 나 resize는 window객체나 frame 객체에 발생하는 것으로 이동하거나 크기가 변경되었을 때 발생하는 이벤트
6)포커스 관련 이벤트
=>포커스를 가졌을 때 발생하는 이벤트: focus, focusin
=>포커스를 잃어버릴 때 발생하는 이벤트: blur, focusout - id 입력란에서 포커스를 잃어버릴 중복검사를 수행하는 경우가 많습니다.
7)change
=>선택 가능한 객체들에서 선택을 변경했을 때 호출되는 이벤트
8)unload 와 load 이벤트
=>load 는 window 나 file, image 객체들에서 내용을 읽고난 후 발생하는 이벤트
window.load는 모든 태그를 읽고 난 후 발생하는 이벤트
이 이벤트를 처리하는 코드는 모든 태그를 인식하고 난 후 수행
script를 body 위에 작성하는 경우
window.addEventListener("load", function(e){
}) 또는
window.onload = funcation(e){
}
모든 태그를 읽어냈기 때문에 document.getElementById(id)로 모든 태그를 가져올 수 있습니다.
=>file을 읽는 이벤트는 비동기적으로 동작
file의 내용을 읽어서 어딘가에 출력하고자 하는 경우 읽기 메소드를 호출하고 load 이벤트 처리 코드 안에 작성해야 합니다.
file을 읽는 메소드를 호출하고 바로 출력하는 메소드를 호출하면 파일의 내용은 아직 읽지 못한 상태일 가능성이 높아서 출력되지 않습니다.
=>window.unload는 브라우저가 닫힐 때 발생하는 이벤트
서버에서 세션과 쿠키의 개념을 사용하는데 보통 사용자가 더이상 서버에 접속되어 있지 않으면 세션을 소멸시켜야 하는데 브라우저가 강제로 닫히는 경우 서버의 이벤트로는 감지할 수 없습니다.
unload 이벤트와 ajax를 이용해서 처리해야 합니다.
9)submit 과 reset
=>form에서만 발생하는 이벤트로 submit은 submit 버튼을 누른 경우이고 reset은 reset 버튼을 누른 경우에 발생하는 이벤트
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>다양한 이벤트 처리</title>
<script>
//window가 로드 되면 function을 수행
//window가 load 된다는 것은 태그를 전부읽고 메모리에 올리고 난 후
window.addEventListener('load', function(e){
var n = document.getElementById("name");
n.value="이름을 입력하세요!"
//포커스가 생길 때
n.addEventListener("focusin", function(e){
this.style.backgroundColor = "papayawhip";
});
//포커스가 없어질 때
n.addEventListener("focusout", function(e){
this.style.backgroundColor = "white";
});
//키보드를 눌렀을 때 누른 키 값을 대화상자에 출력
n.addEventListener("keydown", function(e){
//이벤트 객체 만들기
var e = window.event || e;
//누른 키 값 가져오기
//IE가 아닌 경우는 이벤트 객체의 which 속성으로 그리고 IE 이면 keyCode 속성으로 누른 키값을 가져옵니다.
var code = e.which ? e.which : e.keyCode;
alert(code)
})
});
</script>
</head>
<body>
<input type="text" id="name" size="20"/>
<input type="text" size="20"/>
</body>
</html>
**정규 표현식(Regular Expression)
=>문자열의 패턴을 정의하는 객체
=>문자열 검색이나 가공에 사용
=>원래는 Perl에서 시작되었지만 지금은 거의 모든 언어에서 사용
=>regexp 로 표현하는 경우가 많습니다.
=>규칙은 단순한데 가독성은 떨어짐
1.객체 생성
1)new RegExp(패턴, 한정자)
2)/패턴/한정자
=>한정자는 생략 가능
2.정규식 메소드
1)test(): 정규 표현식과 일치하는 문자열이 포함되어 있으면 true 없으면 false 리턴
2)exec(): 정규 표현식과 일치하는 문자열을 리턴
<script>
var msg = "안녕하세요 1반갑습니다.";
//msg에 숫자가 포함되어 있는지 확인
//정규식 패턴을 생성
var reg = /[0-9]/;
//msg에 reg의 패턴이 존재하면
if(reg.test(msg)){
console.log("숫자가 포함되어 있습니다.");
}else{
console.log("숫자가 포함되어 있지 않습니다.");
}
msg = "문을 문이 안녕하세요 안녕문"
//정규식을 기준으로 분할해서 배열로 리턴
var result = msg.split(/문/)
for(i in result){
document.write(result[i] + "<br/>");
}
//처음 만나는 문은 삭제 아무것도 없는 글자와 치환
//gm 이라는 한정자를 사용했기 때문에 문자열의 모든 곳에서 치환
result = msg.replace(/문/gm, "")
document.write(result + "<br/>");
</script>
</head>
<body>
</body>
</html>
3.String 객체의 정규식 관련 메소드
=>match(정규식): 정규식과 일치하는 부분을 리턴
=>replace(정규식, 대체문자열): 정규식을 대체문자열로 치환
대체문자열 자리에 $& 를 설정하면 원래 문자열
=>search(정규식): 정규식이 나오는 부분의 위치를 리턴
=>split(정규식): 정규식을 기준으로 분할해서 배열로 리턴하는 함수
4.한정자(제한자, 플래그)
i:대소문자 구분하지 않고
g:끝까지 반복 수행
m:여러 줄일 때 사용
/패턴/한정자
한정자는 여러 개 사용 가능
5.앵커문자
^: 패턴 앞에 붙이면 패턴으로 시작하는
$: 패턴 뒤에 붙이면 패턴으로 끝나는
|
/^문/ |
문 으로 시작 하는
|
|
/문$/ |
문으로 끝나는 |
|
|
|
|
|
|
6.메타문자
=>. : 아무글자1개
=>[문자나열] : 문자 중 1개
[abc] abc 중에서 1개
=>[^문자나열] : 나열된 문자를 제외하고
=>[문자1-문자2] : 문자1에서 문자2 사이
[가-힣]: 한글 1자
[0-9]: 숫자 1개
[0-9a-zA-Z]:숫자나 영문 1글자
=>\d: 숫자 \D: 숫자가 아닌
=>\w:단어 \W: 단어가 아닌
=>\s: 공백문자(공백, 탭, 엔터 등) \S: 공백문자가 아닌
7.수량문자
A+: 1개 이상
A*: 0개 이상
A?: 0개 또는 1개
A{2}: 2개 이상
A{2,5}: 2-5개
A{2,}: 2개 이상
8.자주 사용되는 패턴들(email, 비밀번호, 전화번호 등)은 인터넷에 검색해도 됩니다.
정규식은 유효성 검사나 텍스트 가공에 많이 사용
=>이메일과 비밀번호가 패턴에 맞지 않으면 서버로 전송하지 않도록 하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>웹 브라우저에서의 유효성 검사</title>
<script>
window.addEventListener("load", function(e){
//body 태그 안에서 필요한 객체 찾아오기 - id를 이용해서 찾아오기
var myform = document.getElementById("myform");
var errordiv = document.getElementById("errordiv");
var email = document.getElementById("email");
var pw = document.getElementById("pw");
//이메일 정규식을 생성
var emailreg = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
//비밀번호 정규식을 생성
var pwreg = /^.*(?=^.{8,15}$)(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&+=]).*$/;
//폼의 전송 이벤트가 발생하면 유효성 검사를 수행
myform.addEventListener("submit", function(e){
//email 란에 입력된 문자열에 emailreg가 포함되지 않았다면
if(emailreg.test(email.value) == false){
//에러 메시지 출력
errordiv.innerHTML = "이메일 입력 형식이 잘못되었습니다.";
errordiv.style.color = "red";
//포커스 이동
email.focus();
//기본적으로 제공되는 이벤트 처리 코드를 제거 - 폼의 데이터가 전송되지 않음
var evt = window.event || e;
evt.preventDefault();
return;
}
if(pwreg.test(pw.value) == false){
//에러 메시지 출력
errordiv.innerHTML = "비밀번호 입력 형식이 잘못되었습니다.";
errordiv.style.color = "red";
//포커스 이동
pw.focus();
//기본적으로 제공되는 이벤트 처리 코드를 제거 - 폼의 데이터가 전송되지 않음
var evt = window.event || e;
evt.preventDefault();
return;
}
});
});
try{
//이 문장에서 예외가 발생하면 멈추지 않고 catch 구문으로 이동하기 때문에 멈추지 않습니다.
var ar = new Array(4300000000);
}catch(e){
console.log("배열 생성에 실패했습니다.")
}
alert("여기까지 수행")
</script>
</head>
<body>
<form action="server.jsp" id="myform">
<div id="errordiv"></div>
<label for="email">이메일</label>
<input type="text" size="40" id="email" name="email"/><br/>
<label for="pw">비밀번호</label>
<input type="password" size="20" id="pw" name="pw"/><br />
<label for="name">이름</label>
<input type="name" size="15" id="name" name="name"/><br/>
<input type="submit" value="전송"/>
</form>
<script>
</script>
</body>
</html>
**예외처리(exception handling)
=>Exception(예외): 문법적인 오류는 아니어서 실행은 되지만 실행 도중에 문제가 발생해서 중단되는 현상
=>Exception Handling: 이러한 예외가 발생했을 때 처리하기 위한 작업
1.예외처리의 목적
=>예외가 발생하더라도 정상적으로 코드를 계속 수행하기 위해서 : 서버에서
=>예외가 발생한 경우 그 예외 상황을 기록하기 위해서 : 문제점을 해결하거나 다음에는 이러한 예외가 발생하지 않도록 하기 위해서
2.예외처리 방법
try{
예외 발생 가능성이 있는 코드;
}catch(예외 객체 변수 이름){
예외가 발생한 경우 처리할 코드;
}finally{
예외 발생 여부에 상관없이 수행할 코드;
}
3.예외 처리 객체의 속성
message: 예외 메시지
description: 예외에 대한 설명
name: 예외 이름
=>이 속성들은 대부분 로그 파일에 출력합니다.
**ajax(Asynchronous JAvascript XML)
=>비동기적으로 도메인 내의 데이터(XML 형식)를 가져오는 기술
=>이 기술을 대부분 현재 화면 내부에서 일부분을 주기적으로 교체하기 위해서 사용했기 때문에 하나의 웹 페이지에서 전체 갱신없이 일부분의 데이터를 갱신하는 기술로 여겨집니다.
1.ajax 요청 방법
1)XMLHttpRequest 객체 생성
2)요청 후 결과가 오면 호출되는 리스너를 등록(콜백함수를 등록)
=>데이터(csv, xml, json)를 정상적으로 받아오면 수행할 내용을 작성
3)서버로 보낼 데이터(파라미터)를 생성
4)요청
2.ajax 요청 객체 생성
=>IE: ActiveXObject("Microsoft.XMLHTTP") 로 생성
=>그 이외 브라우저: new XMLHttpRequest()로 생성
3.XMLHttpRequest 객체의 속성과 메소드
=>readyState: 한자리 정수로 객체의 상태를 나타내는 속성
1이면 객체 생성 직후이고 2이면 요청을 한 상태이고 3이면 서버에서 응답이 오고 있는 상태이고 4이면 응답 완료
=>status: 응답의 상태를 나타내는 코드 - 웹 과 관련된 개발자가 될 때는 외워야 합니다.
100번대: 처리 중
200번대: 정상 응답
300번대: 리다이렉트 중 - 결과 URL로 이동 중
400번대: 클라이언트 오류
500번대: 서버 오류
=>responseText: XML 형식을 제외한 데이터
=>responseXML: XML 데이터
=>onreadstateChange: readyState가 변경될 때 호출될 콜백 메소드 지정
=>open(요청방식, 요청주소, 비동기여부): ajax 요청 옵션 설정
=>send(파라미터): 실제 전송
4.ajax에서 주의 사항
=>ajax는 도메인(현재 프로젝트) 내의 데이터만 가져올 수 있음
=>외부 데이터를 가져와서 ajax로 사용하고자 하는 경우는 proxy를 구현해야 합니다.
proxy는 서버용 언어(Java 의 HttpURLConnection 클래스)로 데이터를 가져와서 넘겨주는 형태를 구현하는 것
5.텍스트 파일에서 데이터를 읽어와서 출력하기
1)프로젝트의 WebContent 디렉토리에 텍스트 파일 1개 생성
=>data.txt
Database,Java,Web FrontEnd,Java Web Server Programming
2)ajax 요청 파일을 생성
=>ajax.html
**HTML, CSS, JavaScript
HTML: 웹 문서의 구조를 만들기 위해서 사용, 정적(만들면 변경이 안됨)
CSS: HTML 문서의 스타일을 변경하기 위해서 사용, 정적(만들면 변경이 안됨)
JavaScript: HTML 문서의 구조를 동적으로 변경하기 위해서 사용
=>HTML 과 JavaScript는 한 줄 씩 읽으면서 수행을 하고 CSS는 문서를 전부 읽고 화면에 출력되기 전에 적용을 합니다.
=>각각의 역할이 다르기 때문에 별도의 파일에 만들어서 읽어내는 구조를 취하는 것이 좋습니다.
=>최근의 Application 개발 기법에서는 대부분 화면구조를 나타내는 디자인 파일과 이 구조를 가지고 동적인 작업을 하는 소스코드를 분리해서 작업을 합니다.
Android 나 iOS(Mac OS 포함) 그리고 MS-Windows Programming이 이러한 방식을 취합니다.
이러한 방식이 만들 때는 복잡하지만 코드의 분리로 인해서 가독성이 높아져서 유지보수에 유리합니다.
'Study > html,css, javascript' 카테고리의 다른 글
| frontEnd-6 (0) | 2020.10.15 |
|---|---|
| frontEnd-4 (0) | 2020.10.12 |
| frontEnd-3 (0) | 2020.10.12 |
| frontEnd-2 (0) | 2020.10.12 |
| frontEnd-1 (0) | 2020.10.10 |