1. Web Browser와 Window 객체
window 객체 개요
window 객체는 웹 브라우저에서 작동하는 자바스크립트의 최상위 전역객체이다.
window 객체에는 브라우저와 관련된 여러 객체와 속성, 함수가 있다.
자바스크립트에서 기본으로 제공하는 프로퍼티와 함수도 포함
BOM으로 불리기도 함
window 객체 사용
alert, confirm, prompt
window 객체의 함수를 호출하면 브라우저에서 제공하는 창을 open
alert() : 브라우저의 알림창
confirm() : 브라우저의 확인/취소 선택창
prompt() : 브라우저의 입력 창.
navigator
navigator 객체는 브라우저의 정보가 내장된 객체
navigator 정보로 서로 다른 브라우저를 구분할 수 있으며, 브라우저 별로 다르게 처리 가능.
HTML5에서는 위치 정보를 알려주는 역할 가능
console.log("브라우저 코드네임 :" + navigator.appCodeName);
console.log("브라우저 네임 :" + navigator.appName);
console.log("브라우저 버전 :" + navigator.appVersion);
console.log("브라우저 허용 :" + navigator.cookieEnable);
console.log("플랫폼 :" + navigator.platform);
console.log("유저-에이전트 헤더 :" + navigator.userAgent);
location, history
location 객체를 이용하여 현재 페이지 주소와 관련 된 정보들을 알 수 있다.
- location.href : 프로퍼티에 값을 할당하지 않으면 현재 URL을 조회하고 값을 할당하면 할당 된 URL 페이지로 이동
- location.reload() : 현재 페이지를 새로고침
history 객체는 브라우저의 페이지 이력을 담는 객체
- history.back() / history.forward() : 브라우저의 뒤로 가기 / 앞으로 가기 버튼과 같은 동작
새 창 열기
window 객체의 open() 함수를 사용하면 새 창을 열 수 있다.
window open('페이지 URL' , '창이름','특성',히스토리 대체 여부);
- 창이름 : open 할 대상 지정 혹은 창의 이름
- 특성 : 새로 열릴 창의 너비, 높이 등의 특성 지정
- 히스토리 대체여부 : 현재 페이지 히스토리에 덮어 쓸지 여부
창특성
- width : 창의 너비
- height : 창의 높이
- top : 창의 세로 좌표 위치
- left : 창의 가로 좌표 위치
- menubar : 메뉴 표시줄
- status : 상태 표시줄
- scrollbars : 스크롤바
- toolbar : 도구모음
- resizable : 창 크기 조절 가능여부
- location : 주소 입력란
창 열고 닫기
이벤트를 이용하여 특정 시점에 창을 열 수 있다.
- 페이지 로딩 완료 후 새 창 열기, 클릭할 때 새 창 열기 등
window 객체의 close() 함수로 현재 창을 닫을 수 있다.
특히 브라우저에 내장 된 창이 아닌 javascript로 제체 구현한 팝업에서 필요
부모 창 컨트롤
window 객체의 opener 속성을 이용하면 부모 창을 컨트롤 가능
- 부모 창에 값 전달.
- 부모 창을 새로 고침 하거나 페이지 이동
opener 객체는 부모 창의 window 객체
window 객체 프로퍼티
window 객체는 웹 브라우저에서 구동 되는 javascript의 전역 객체
screen 객체는 화면의 가로, 세로 크기 정보를 알 수 있다.
pageYOffset등과 scroll() 함수를 이용하면 현재 화면의 크기를 계산하여 페이지 단위로 스크롤 제어가 가능
window 객체 함수
브라우저에서 버튼을 제공하는 기능인 find, stop, print와 같은 함수도 있다.
move 함수로 현재 열러있는 창의 위치를 이동 가능
- alert() : 경고용 대화상자를 보여줌
- confirm() : 확인, 취소를 선택할 수 있는 대화상자를 보여줌
- prompt() : 입력 창이 있는 대화상자를 보여줌
- open() : 새로운 창을 오픈
- scroll() : 창을 스크롤 함
- find() : 창안에 지정된 문자열이 있는지 확인 있으면 true, 없으면 false
- stop() : 불러오기를 중지
- print() : 화면에 있는 내용을 프린터로 출력
- moveBy() : 창을 상대적 좌표로 이동, 수평방향과 수직방향의 이동량을 픽셀로 지정
- moveTo() : 창을 절대적 죄표로 이동, 창의 왼쪽 상단 모서리를 기준으로 픽셀을 지정
resize 함수로 현재 열려 있는 창의 크기 조절
window 객체에는 브라우저와 관련된 함수 뿐만 아니라 순수 javascript에서 필요한 객체나 함수 존재
- setTimeOut() 함수와 setInterval() 함수로 함수를 특정 시간 후 혹은 특정 시간 마다 호출가능
- eval() 함수는 문자열로 된 javascript 코드를 해석한 후 실행
- resizeBy() : 창의 크기를 상대적인 좌표로 재설정
- resizeTo() : 창의 크기를 절대적인 좌표로 재설정, 창 크기를 픽셀로 지정
- scrollBy() : 창을 상대적인 좌표로 스크롤. 창의 표시 영역의 수평방향과 수직방향에 대해 픽셀로 지정
- scrollTo() : 창을 절대적인 좌표를 스크롤 창의 왼쪽 상단 모서리를 기준으로 픽셀로 지정.
- setTimeOut() : 지정한 밀리초 시간이 흐른 후 함수 호출
- clearTimeOut() : setTimeout 함수를 중지
- setInterval() : 지정한 밀리초 주기마다 함수를 반복적으로 호출
- clearInterval() : setInterval 함수를 중지
- eval() : 문자열을 javascript 코드로 변환하여 실행
2. HTML과 DOM
DOM 개요
DOM은 HTML과 XML문서의 구조를 정의하는 API제공
DOM은 문서 요소 집합을 트리 형태의 계층 구조로 HTML을 표현
HTML 계층 구조의 제일 위에는 document 노드가 있다.
그 아래로 HTML 태그나 요소들을 표현하는 노드와 문자열을 표현하는 노드가 있다.
문서계층구조
Document는 HTML 또는 XML 문서를 표현
HTMLDocument는 HTML문서와 요소만을 표현
HTMLElement의 하위 타입은 HTML 단일 요소나 요소 집합의 속성에 해당하는 javascript 프로퍼티를 정의
Comment 노드는 HTML이나 XML의 주석을 표현
문서 객체 만들기
문서 객체는 text 노드를 갖는 객체와 갖지 않는 객체로 나뉨
createElement(tagName) //element node를 생성
createTextNode(text) // text node를 생성
appendChild(node) // 객체에 node를 child로 추가
객체의 속성 설정
setAttribute(name, value) // 객체의 속성을 지정
getAttribute(name) // 객체의 속성값을 가져옴
innerHTML // 문자열을 HTML 태그로삽입
innerText // 문자열을 text node로 삽입
문서 객체 가져오기
getElementById(id) // 태그의 id 속성이 id와 일치하는 element 객체 얻기
getElementsByClassName(classname) // 태그의 class 속성이 classname과 일치하는 element 배열 얻기
getElementsByTagName(tagname) // 태그이름이 tagname과 일치하는 element 배열 얻기
getElementsByName(name) // 태그의 name 속성이 name과 일히차는 element 배열 얻기
querySelector(selector) // selector에 일치하는 첫번째 element 객체 얻기
querySelectorAll(selector) //selector에 일치하는 ahems element 배열 얻기
문서 객체 제거
removeChild(childnode) // 객체의 자식 노드 제거
요약
DOM은 HTML 문서의 내용을 조작할 수 있는 API로 HTML을 계층구조 형식의 객체로 표현
DOM으로 HTML 문서의 검색과 조작을 할 수 있다.
3. 이벤트
이벤트
웹 페이지에서 여러 종류의 상호작용이 있을 때 마다 이벤트가 발생
사용자가 마우스를 클릭 하였을 때, 키보드를 눌렀을 때 등과 같이 다양한 종류의 이벤트가 존재
javascript를 사용하여 DOM에서 발생하는 이벶트를 감지하여 이벤트에 대응하는 여러 작업 수행
이벤트는 일반적으로 함수와 연결이 되고, 이 함수는 이벤트가 발생되기 전에는 실행되지 않다가 이벤트가 발생할 경우 실행 >> 이벤트 핸들로 또는 이벤트 리스너라 하며 이 함수에 이벤트 발생시 실행해야하는 코드 작성
- 웹 페이지가 로딩되었을 때
- 페이지를 스크롤 했을 때
- 브라우저 창의 크기를 조절 했을 때
- 마우스를 클릭 했을 때
- 키보드로 키를 입력 했을 때
- Form이 Submit 되었을 때
- input의 내용이 변경 되었을 때
- 마우스를 움직여 Element를 이동할 때
예제
click 이벤트는 사용자가 마우스를 클릭 했을 때 발생
특정 DOM 요소에 한하여 click 이벤트를 제어할 수 있다.
Click Me라는 문자열을 담고 있는 div 요소 영역을 클릭할 경우에만 Hello 알림창이 표시
종류
마우스 이벤트
웹 초기에는 load, click등 소수의 이벤트만 사용
마우스 이벤트는 웹 어플리케이션에서 가장 많이 사용하는 이벤트
마우스 이벤트 핸들러에 전달되는 이벤트 객체에는 마우스 위치와 버튼 상태등의 정보를 담고 있다.
onclick() // 마우스로 element를 클릭 했을 때 발생
ondblclick() // 마우스로 element를 더블 클릭 했을 때 발생
onmouseup() // 마우스로 element에서 마우스 버튼을 올렸을 때 발생
onmousedown() // 마우스로 element에서 마우스 버튼을 눌렀을 때 발생
onmouseover() // 마우스를 움직여서 element 밖에서 안으로 들어 올 때 발생
onmouseout() // 마우스를 움직여서 element 안에서 밖으로 나갈 때 발생
onmousemove() // 마우스를 움직일 때 발생
키보드 이벤트
키보드의 커서가 웹 브라우저에 나타나는 지점에서 키보드를 조작할 때 이벤트 발생
키보드 조작은 운영체제에 영향을 받으므로 특정 키가 이벤트 핸들러에게 전달되지 않을 수 있다.
키보드 커사가 나타내는 요소가 없다면 document에서 이벤트가 발생
onkeypress() // 키보드가 눌려 졌을 때 발생.
onkeydown() // 키보드를 누르는 순간 발생
onkeyup() // 키보드의 누루고 있던 키를 뗄 때 발생
Frame(UI) 이벤트
Frame 관련 이벤트는 특정 DOM 문서에 관련된 이벤트가 아니라 Frame 자체에 대한 이벤트
Frame 이벤트 중에서는 load 이벤트가 가장 많이 사용
Load는 문서 및 자원들이 모두 웹 브라우저에 탑재되면 이벤트를 수행
unload는 사용자가 브라우저를 떠날 때 이벤트가 발생하지만, 사용자가 브라우저를 떠나는 것을 막을 수는 없다
onload() // document, image, frame 등이 모두 로딩 되었을 때 발생
onabort() // 이미지 등의 내용이 로딩하는 도중 취소 등으로 중단 되었을 때 발생
onerror() // 이미지 등의 내용을 로딩 중 오류가 발생 했을 때 발생
onresize() // document, element의 크기가 변경 되었을 경우 발생
onscroll() // document, element가 스크롤 되었을 때 발생
onselect() // 텍스트를 선택 했을 때 발생
폼 이벤트
폼 관련 이벤트는 웹 초기부터 지원되어 여러 웹 브라우저에서 가장 안정적으로 동작하는 이벤트
자주 사용되는 이벤트로 폼이 전송될 때에는 submit 이벤트가 발생
폼을 초기화할 때는 reset 이벤트가 발생
submit과 reset은 이벤트 핸들러에서 취소할 수 있다.
onsubmit() // form이 전송될 때 발생
onreset() // 입력 폼이 리셋될 때 발생
oninput() // input 또는 textarea의 값이 변경 되었을 때 발생
이벤트 핸들러 등록
인라인 이벤트 핸들러
이벤트를 감지하고 대응하는 작업을 등록하는 방법은 여러가지 제공
어떤 이벤트를 처리할 작업을 등록하는 것을 이벤트 핸들러를 등록한다고 함
javascript 초기에는 HTML 요소의 내부에서 직접 이벤트 핸들러를 등록
이러한 방식은 HTML 코드를 javascript가 침번한다는 문제가 있음
이 방식의 경우 최근 사용X
여러 개의 함수를 한번에 호출 가능
<div id = 'div1' onclick = "msg1(); msg2();">클릭</div>
이벤트 핸들러 프로퍼티 방식
HTML에 직접 이벤트 핸들러들 등록하는 방법 대신 javascript에서 이벤트 핸들러를 등록하는 방법
javascript에서 이벤트 핸들러를 등록함으로써 HTML코드와 javascript 코드를 분리 할 수 있다.
이벤트 대상이 되는 특정 DOM을 선택하고 이벤트 핸들러를 등록
div1 요소에 클릭 이벤트가 발생하면 핸들러로 등록한 함수가 발생
<div id = 'div1'>클릭</div>
<script type='text/javascript'>
document.getElementById('div').onclick = function() {
alert('Hi');
};
</script>
인라인 이벤트 핸들러 방식처럼 HTML과 javascript가 혼용되어 있는 문제를 해결할 수 있는 방식
단 이벤트 핸들러 프로퍼티에 하나의 이벤트 핸들러만을 바인딩 할 수 있다는 단점
그러므로 아래의 예에서 첫번째 바인딩된 alert()는 실행 X
<body>
<button id="btn">클릭해보세요</button>
<script type="text/javascript">
const btn = document.querySelector('#btn');
// 첫번째 바인딩된 이벤트 핸들러 ==> 실행되지 않는다.
btn.onclick = function () {
alert('안녕하세요!!');
};
// 두번째 바인딩된 이벤트 핸들러
btn.onclick = function () {
btn.style.color = 'purple';
btn.style.fontSize = '30px';
btn.style.fontWeight = 'bold';
};
</script>
</body>
addEventListener 메소드 방식
addEventListener(ar1, ar2,[arg3])를 이용하여 좀더 세밀한 이벤트 제어가능
전달 인자의 첫 번째에는 이벤트 이름, 두번째에는 이벤트 핸들러, 세번째에는 캡쳐링 여부를 사용
첫번째 전달인자의 이벤트 이름에는 on을 제거한 이벤트 이름을 사용
addEventListener 메소드를 이용하여 대상 DOM요소에 이벤트를 바인등하고 해당 이벤트가 발새했을때 실행될 콜백 함수를 지정한다.
장점
- 하나의 이벤트에 대하 하나 이상의 이벤트 핸들러를 추가할 수 있다.
- 캡처링과 버블링을 지원
- HTML 요소 뿐만 아니라 모든 DOM(HTML,XML,SVG)에 대해 동작
버블링과 캡처링
캡처링 : 이벤트가 발생한 요소를 포함하는 부모 HTML로부터 이벤트 근원지인 자식요소까지 검사하는 것
- 이벤트 캡처링에서 캡쳐속성의 이벤트 핸들러가 등록되어 있으면 수행
버블링 : 이벤트 발생 요소부터 요소를 포함하는 부모요소까지 올라가면서 이벤트를 검사하는 것
- 이벤트 버블리에서 버블속성의 이벤트 핸들러가 등록되어 있으면 수행
함수의 세번째 인자 값이 true이면 캡처링 false면 버블링
이벤트 활용
하나의 DOM 엘리먼트에 복수의 이벤트 핸들러를 등록할 수 있다.
마우스가 특정 DOM 엘리먼트의 영역 안으로 들어온 경우 mousever 이벤트가 발생
반대로 마우스가 특정 DOM 엘리먼트 영역 밖으로 나간 경우 mouseout 이벤트가 발생
<span>태그에 mouseover, mouseout 2가지 이벤트 핸들러를 등록
<body>
<span id="span1" style="background: black; color: white">span입니다.</span>
<script type="text/javascript">
var span1 = document.getElementById('span1');
// mouseover 이벤트 핸들러 등록
span1.addEventListener('mouseover', mouseIn, false);
// mouseout 이벤트 핸들러 등록
span1.addEventListener('mouseout', mouseOut, false);
// mouseover 핸들러 함수
function mouseIn() {
span1.style.background = 'magenta';
}
// mouseout 핸들러 함수
function mouseOut() {
span1.style.background = 'orange';
}
</script>
</body>
4. Web storage
localStorage
WebStorage API : LocalStorage
- 데이터를 사용자 로컬에 보존하는 방식
- 데이터를 저장, 덮어쓰기, 샂게 등 조작 가능
- javascript로 조작
- 모바일에서도 사용가능
Cookie와의 차이점
- 유효 기간이 없고 영구적으로 이용 가능
- 5MB까지 사용가능 (쿠키는 4KB)
- 필요할 때 언제든 사용가능
LocalStorage 기본 구성
- key 와 value를 하나의 세트로 저장
- 도메인과 브라우저별로 저장
- 값은 반드시 문자열로 저장됨
LocalStorage에 data추가
<script>
function init(){
// localstorage data 추가 방법 3가지
localStorage.Test = "sample";
localStorage["Test"] = "sample";
localStorage.setItem("Test", "sample");
}
</script>
LocalStorage에 data 얻기
<script>
function init() {
// localstorage data 취득 방법 3가지
var val = localStorage.Test;
var val = localStorage["Test"];
var val = localStorage.getItem("Test");
// 취득 data 출력
document.querySelector("#result").innerHTML = val;
}
</script>
LocalStorage에 data 삭제
<script>
function init() {
// localStorage data 삭제
localStorage.removeItme("Test");
// localStorage data 취득
var val = localStorage.Test; // undefined
// 취득 data 출력
document.querySelector("#result").innerHTML = val;
}
</script>
LocalStorage에 data 전체 삭제
<script>
function init() {
localStorage.clear();
}
</script>
localStorage vs sessionStorage
SessionStorage와의 차이점
- localStorage - 세션이 끊겨도 사용가능
- sessionStorage - 같은 세션만 사용 가능
sessionStorage
사용법
<script>
// 세션 저장
sessionStorage.setItem("key", value);
// 세션 값 불러오기
sessionStorage.getItem("key");
// 특정 세션 삭제
sessionStorage.removeItem("ket");
// 세션 전체 삭제
sessionStorage.clear();
</script>'FRONT-END > JAVASCRIPT' 카테고리의 다른 글
| JavaScript - 1 (0) | 2021.12.07 |
|---|