JavaScript-2
객체
객체란 프로그램에서 인식할 수 있는 모든 대상
데이터를 저장하고 처리하는 기본단위
문서 객체 모델:문서 뿐만 아니라 웹 문서 안에 포함된 이미지,링크,텍스트 필드 등을 모두 별도의 객체로 관리
브라우저 관련 객체:웹 브라우저 정보를 객체로 관리
내장 객체: 웹 프로그래밍에서 자주 사용하는 요소를 객체로 정의해놓음
사용자 정의 객체:필요할 때마다 사용자가 직접 만드는 객체
객체의 인스턴스 만들기
인스턴트:객체를 틀처럼 사용해서 같은 모양으로 찍어낸 것.
//객체 생성
const person = {
name: ['Bob', 'Smith'],
age: 32,
gender: 'male',
interests: ['music', 'skiing'],
bio: function() {
alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
},
greeting: function() {
alert('Hi! I\'m ' + this.name[0] + '.');
}
};
기본형:new 객체명
프로퍼티와 메서드
프로퍼티:객체의 특징이나 속성
메서드:객체에서 할 수 있는 동작
프로퍼티와 메서드를 표시하려면 인스턴트명 뒤에 마침표(.)를 붙이고 사용
var now = new Date();
document.write("현재 시각은 " + now.toLocaleString())
내장 객체
https://developer.mozilla.org/en-US/docs/Web/JavaScript
==>자바스크립 필드안에 built-in objects에 내장객체들이 모두 나열되어 있음
언어 선택도 가능,취소선은 더이상 사용되지 않는 메서드와 프로퍼티 ()가 없으면 프로퍼티임
Date 객체
현재 날짜로 설정할 경우:
new Date();
date 객체로 특정 날짜 나타내기
new Date("2020-02-25")
date 객체로 특정 날짜와 시간 나타내기
new Date("2020-02-25T18:00:00")
DATE 객체의 메서드
:날짜/시간 정보 가져오기(주의 월과 요일은 0부터 시작,날짜만 1에서 시작,시간이나 분,초 역시 0부터 시작))
날짜/시간 정보 설정하기
날짜/시간 형식을 바꾸기
독서 챌린지 프로그램 만들기
getTime 이용
Math 객체
수학 계산과 관련된 메서드가 많이 포함되어 있음
round():반올림
math 객체는 인스턴스를 만들지 않고 프로퍼티와 메서드 사용
<script>
var now=new Date();
var firstDay = new Date("2020-10-01");
var toNow= now.getTime();
var toFirst=firstDay.getTime();
var passdTime= toNow-toFirst;
passdTime=Math.round(passdTime/(24*60*60*1000));
document.querySelector('#result').innerText=passdTime;
</script>
브라우저와 관련된 객체
window:브라우저 창이 열릴때마다 하나씩 만들어지며 브라우저 창 안의 요소 중 최상위에 있음
document:웹문서마다 하나씩 있으며 html 문서의 정보가 담겨져 있음
navigator:현재 사용하는 브라우저의 정보
history:사용자의 방문 기록 저장
location:현재 페이지의 url 정보
screen:현재 사용하는 화면 정보
window 객체는 기본 객체이므로 window.를 생략하고 메서드 이름만 사용해도됨
새 브라우저 창을 여는 open()메서드
window.open(경로,창 이름, 창 옵션)
창 이름을 안뜨면 창이 무한반복으로 뜨기때문에 지정을 하는 것이 좋음
브라우저 창을 닫는 close()메서드
window.close()
<button onclick="javascript:window.close();">닫기</button>
location 객체
screen 객체
-availHeight:ul영역 제외한 높이
-availWidth:ul 영역 제외한 너비
가용너비-팝업창 너비에서 절반을 나누고, 가용높이-팝업창 높이에서 절반을 나누면 가운데로 오게 가능
function openCenter(doc,win,w,h){
var left=(screen.availWidth-w)/2;
var top=(screen.availHeight-h)/2;
var opt="left="+left+",top="+top+",width="+w+",height="+h;
window.open(doc,win,opt);
}
openCenter("notice.html","pop",500,400);
dom 트리
웹 문서에 있는 요소들 간의 부모,자식 관계를 계층 구조로 표시한 것
모든 html 태그는 요소 노드
웹 문서의 텍스트 내용은 요소 노드의 자식 노드인 텍스트 노드
태그의 속성은 속성 노드
주석은 주석 노드
dom 요소에 접근하고 속성 가져오기
id 선택자로 접근하는 요소명.getElementByld()메서드
-----------------------------------
요소명.getElementsByClassName()메서드
요소명.getElementsByTagName()메서드
==>반환값이 2개 이상일 수 있음
htmlcollection 객체에 저장됨
querySelector() 메서드는 한개의 값만 반환
querySelector()==>반환값이 여러 개일때 모두 반환-->노드 리스트로 저장됨
id 이름 앞에는 # 기호, class 이름 앞에는 마침표 (.) 태그는 기호 없이 태그명 사용
속성 가져오기
getAttribute() 메서드 속성 노드의 값을 가져옴
setAttribute() 메서드: 속성 노드의 값을 바꿈
dom에서 이벤트 처리하기
var cup = document.querySelector("#cup"); // id = cup인 요소를 가져옴
cup.onclick = function(){
alert("이미지를 클릭했습니다");
}
<script>
var cup = document.querySelector("#cup"); // id = cup인 요소를 가져옴
cup.onclick = changePic; // cup을 클릭하면 changePic 함수 실행
function changePic() {
cup.src = "images/cup-2.png";
}
예약어 this
==>이벤트가 발생한 대상에 접근하고 싶을 때 사용
addEventListener() 메서드
:이벤트 객체를 사용해 이벤트 처리기 연결
요소.addEventListener(아벤트,함수,캡처 여부);
이벤트:이벤트 유형을 지정
함수:이벤트가 발생하면 실행할 명령이나 함수 지정
캡쳐 여부:이벤트를 캡쳐하는 지 여부를 지정함
<script>
var cover = document.getElementById("cover");
cover.addEventListener("mouseover",changePic, false);
cover.addEventListener("mouseout",originPic);
function changePic() {
cover.src = "images/easys-2.jpg";
}
function originPic() {
cover.src = "images/easys-1.jpg";
}
------------------------
cover.addEventListener("mouseout", function() {
cover.src = "images/easys-1.jpg";
});
처럼 함수가 들어갈 자리에 함수를 직접 지정해도 ㄱㅊ
DOM에서 스타일 다루기
<script>
var myRect = document.querySelector("#rect");
myRect.addEventListener("mouseover", function() { // mouseover 이벤트 처리
myRect.style.backgroundColor = "green"; // myRect 요소의 배경색
myRect.style.borderRadius = "50%"; // myRect 요소의 테두리 둥글게 처리
});
myRect.addEventListener("mouseout", function() { // mouseout 이벤트 처리
myRect.style.backgroundColor = ""; // myRect 요소의 배경색 지우기
myRect.style.borderRadius = ""; // myRect 요소의 테두리 둥글게 처리 안 함
});
</script>
document.요소명.style.속성명을 통해 스타일도 바꿀 수 있음
dom에서 노드 추가, 삭제하기
텍스트 내용이 있는 노드 추가하기
'더보기' 클릭하면 텍스트 표시하기
요소 노드 만들기 - createElement(노드명)메서드
텍스트 노드 만들기
createTextNode(텍스트)메서드
자식 노드 연결하기-appendChild() 메서드
부모노드.appendChild(자식노드)
function addP() {
var newP = document.createElement("p");
var txtNode = document.createTextNode("DOM은 Document Object Model의 줄임말입니다.");
newP.appendChild(txtNode);
document.getElementById("info").appendChild(newP);
}
속성 값이 있는 새로운 요소 추가하기
속성 노드 만들기 - document.createAttribute(속성명) 메서드
setAttributeNode(속성노드)메서드 - 속성노드 연결하기
자식 노드 연결하기 -appendChild() 메서드
function addContents() {
var newP = document.createElement("p");
var txtNode = document.createTextNode("DOM은 Document Object Model의 줄임말입니다.");
newP.appendChild(txtNode);
var newImg = document.createElement("img");
var srcNode = document.createAttribute("src");
var altNode = document.createAttribute("alt");
srcNode.value = "images/dom.jpg";
altNode.value = "돔 트리 예제 이미지";
newImg.setAttributeNode(srcNode);
newImg.setAttributeNode(altNode);
document.getElementById("info").appendChild(newP);
document.getElementById("info").appendChild(newImg);
}
노드 삭제하기
부모노드에서 자식 노드를 삭제해야한다
노드.parentNode 프로퍼티: 현재 노드의 부모 노드에 접근
부모노드.romoveChild(자식노드):자식노드 삭제
function newRegister() {
var newItem = document.createElement("li"); // 요소 노드 추가
var subject = document.querySelector("#subject"); // 폼의 텍스트 필드
var newText = document.createTextNode(subject.value); // 텍스트 필드의 값을 텍스트 노드로 만들기
newItem.appendChild(newText); // 텍스트 노드를 요소 노드의 자식 노드로 추가
var itemList = document.querySelector("#itemList"); // 웹 문서에서 부모 노드 가져오기
itemList.insertBefore(newItem, itemList.childNodes[0]); // 자식 노드중 첫번째 노드 앞에 추가
subject.value="";
var items = document.querySelectorAll("li"); // 모든 항목 가져오기
for(i=0; i<items.length; i++) {
items[i].addEventListener("click", function() { // 항목 클릭했을 때 실행할 함수
if(this.parentNode) // 부모 노드가 있다면
this.parentNode.removeChild(this); // 부모 노드에서 삭제
});
}
}