1. 객체(Object)
변수 + 메소드 = 객체
Date 객체(가장 많이 활용되는 객체)
var 변수 = new Date();//기본 형태
var 변수 = new Date(밀리초);//입력한 밀리초를 날짜로 변환
var 변수 = new Date(날짜문자열);//"Jun 01, 2020 06:10:11"
var 변수 = new Date(년, 월, 일, 시, 분, 초, 밀리초);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>날짜/시간 처리</title>
</head>
<body>
<script type="text/javascript">
var d = new Date();
//Date 기본값 출력 화면
document.write(d + "<hr>");
// 현재 연도 출력
document.write("현재 연도: " + d.getFullYear() + "<br>");
// 현재 월 출력
document.write("현재 월: " + (d.getMonth() + 1) + "<br>");//달은 항상 현재-1월로 출력됨
// 현재 일 출력
document.write("현재 일: " + d.getDate() + "<br>");
// 현재 요일 출력(0~6 사이의 값: 0-일요일, 6-토요일)
document.write("현재 요일: " + d.getDay() + "<br>");//요일이 숫자로 표현됨
// 현재 시간 출력
document.write("현재 시간: " + d.getHours() + "<br>");
// 현재 분 출력
document.write("현재 분: " + d.getMinutes() + "<br>");
// 현재 초 출력
document.write("현재 초: " + d.getSeconds() + "<br>");
// 현재 밀리초 출력
document.write("현재 밀리초: " + d.getMilliseconds() + "<hr>");
// 설정 연도 출력
d.setFullYear(2019);
document.write("설정 연도: " + d.getFullYear() + "<hr>");
//다양한 출력 형식
var today = d.toDateString();//날짜 정보만 출력
document.write(today + "<br>");
today = d.toISOString();//표준시간(우리나라: -9시간)
document.write(today + "<br>");
today = d.toJSON();//Json 객체로 변환하는 함수 - 위에 표준시간과 동일함
document.write(today + "<br>");
today = d.toLocaleDateString();//지역(국가별) 날짜
document.write(today + "<br>");
today = d.toLocaleTimeString();//지역 시간(국가별)
document.write(today + "<br>");
today = d.toLocaleString();//지역 날짜 시간 출력
document.write(today + "<br>");
today = d.toString();//기본값
document.write(today + "<br>");
today = d.toTimeString();//기본값에서 사간만 출력
document.write(today + "<br>");
</script>
</body>
</html>
2. 문서 객체 모델(Document Object Model, DOM)
- 웹 문서를 메모리로 읽어 들여 트리구조로 변환
- 문서의 각 요소(element 또는 tag)는 요소 노드(element node), 텍스트 노드(text node)로 변환하여 처리
- 이 트리 구조를 사용하여 자바스크립트로 문서를 제어
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>객체 - 1</title>
</head>
<body>
<script type="text/javascript">
var car = {type: "Fiat", model: 500, color: "white"};//키이름: "키값(데이터)"
console.log(car);
docment.write("이름: " + car.type + "<br>");//각 요소는 .으로 접근
var person = {
name: "홍길동", //키이름: "키값(데이터)"
age: 25,
phone: "01012345678",
//객체 내부에 함수를 만들 수 있음
info: function() {
docment.write("이름: " + name+ "<br>");
docment.write("나이: " + age + "<br>");
}
};
console.log(person);
docment.write("이름: " + person.name+ "<br>");//document object로 구성됨
docment.write("나이: " + person.age + "<br>");
docment.write("연락처: " + person.phone + "<br>");
person.info();//객체 내부에 있은 함수를 담은 변수 호출
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>객체 - 2</title>
</head>
<body>
<script type="text/javascript">
//객체 생성 방법 2
var Check = { };//빈 객체 생성. ex) 계좌 정보 처리 객체
console.log(Check);
//잔액 저장용 멤버 변수 생성
Check.balance = 0;
console.log(Check);
//예금 처리용 함수 추가
Check.deposit = function(amount) {
this.balance += amount;//java의 this와 같음
};
Check.deposit(1000);
document.write("잔액 : " + Check.balance + "원<br>");
</script>
</body>
</html>
1. 문서 객체 생성
요소 생성 - createElement()
텍스트 노드 생성 - createTextNode()
요소에 요소 노드 추가 = appendChile()
2. 요소 노드 생성방법
텍스트 노드 생성 createTextNode() -> 요소 노드 생성 createElement() -> 요소 노드에 텍스트 노드 추가 -> body에 요소 노드 추가
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>요소의 동적 추가</title>
</head>
<body>
<button onclick="add()">추가</button>
<script type="text/javascript">
function add() {
//h3 요소 노드 생성
var header3 = document.createElement('h3');
//텍스트 노드 생성
var textNode = document.createTextNode('추가된 요소');
document.body.appendChild(header3);//요소에 요소 노드 추가
header3.appendChild(textNode);//요소에 텍스트 노드 추가
}
</script>
</body>
</html>
요소와 텍스트 노드가 추가되어서 요소에 적용된 텍스트가 출력됨
3. 이벤트 처리
1. 마우스/키보드의 입력에 대한 처리
이벤트의 종류
- 마우스 : 클릭, 더블클릭, 이동, 좌/우 버튼 등
- 키보드 : 키 다운, 키 업 등
- 기타 페이지가 열렸을 때, 입력 요소가 포커스를 가질 때 등
이벤트 처리 방식 1
태그에 직접 등록 -> <body onload="alert('출력')">
이벤트 처리 방식 2
태그의 이벤트 속성에 함수 이름 등록 -> event01.html
이벤트 처리 방식 3
addEventListener(event, function)
HTML 태그와 별개로 스크립트 영역으로만 처리하는 방식
event keyword
- 포커스 : focusin/focusout
- 키보드 : keydown/keyup
- 마우스 : click, dbclick, mouseenter, mouseout, mousemove, mousedown, mouseup, mouseover
실습문제1) 야구 전광판 프로그램
규칙
1.볼과 스트라이크를 선택 가능
2.볼이 4개이면 모두 초기화 된다.
3.스트라이크가 3개가 되면 1아웃이 된다.
4.아웃이 3개가 되면 게임 오버가 뜬다.
5.게임 오버가 되고 나서 재 시작 버튼을 누르면 모두 초기화가 된다.
야구 전광판 작성 요령
1. 모든 요소를 변수화 합니다.
예) strike 버튼
var btnStrike = document.getElementById('strike');
예) 전광판 요소
var strike = document.getElementById('s');
2. 각 카운트용 변수 작성
예) strike 카운트용 변수
var st = 0;
3. 버튼 클릭에 대한 이벤트리스너 작성
예) btnStrike.addEventListener('click', 처리함수);
4. 기타
버튼 비활성화
btnStrike.disabled = true;
버튼 활성화
btnStrike.disabled = false;
버튼 숨김 (예를 들어 재시작 버튼을 'btnRe'라고 하면)
btnRe.style.display = 'none';
버튼 보임
btnRe.style.display = 'inline';
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>야구 전광판</title>
</head>
<body>
<button id="strike">Strike</button>
<button id="ball">Ball</button>
<button id="restart" style="display: none">
재시작
</button>
<br>
<br>
B:<b id="b">0</b><br>
S:<b id="s">0</b><br>
O:<b id="o">0</b><br>
</body>
<script type="text/javascript">
var btnStrike = document.getElementById('strike');
var btnBall = document.getElementById('ball');
var btnRestart = document.getElementById('restart');
var strike = document.getElementById('s');
var ball = document.getElementById('b');
var out = document.getElementById('o');
var scnt = 0, bcnt = 0, ocnt = 0;
btnStrike.addEventListener('click', sclick);
btnBall.addEventListener('click', bclick);
btnRestart.addEventListener('click', rclick);
function sclick() {
scnt += 1;
if (scnt == 3) {
scnt = 0;
ocnt += 1;
alert("3 스트라이크! " + ocnt + "아웃!!");
if (ocnt == 3) {
alert("3 아웃! " + "게임 오버");
view();
}
}
document.getElementById('s').innerHTML=scnt;
document.getElementById('o').innerHTML=ocnt;
}
function bclick() {
bcnt += 1;
if (bcnt == 4) {
alert("4 볼!");
scnt = 0;
bcnt = 0,
ocnt = 0;
document.getElementById('s').innerHTML=scnt;
document.getElementById('b').innerHTML=bcnt;
document.getElementById('o').innerHTML=ocnt;
}
document.getElementById('b').innerHTML=bcnt;
}
function view() {
document.getElementById('restart').style.display='inline';
}
function rclick() {
scnt = 0;
bcnt = 0,
ocnt = 0;
document.getElementById('restart').style.display='none';
document.getElementById('s').innerHTML=scnt;
document.getElementById('b').innerHTML=bcnt;
document.getElementById('o').innerHTML=ocnt;
}
</script>
</html>
실습문제2) 자판기 프로그램
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자판기 실습</title>
</head>
<body>
<button id="coffee">커피(700원)</button>
<button id="corntea">옥수수수염차(1000원)</button>
<button id="water">물(500원)</button>
<br>
<br>
<button id="thousand">1000원</button>
<button id="fivehund">500원</button>
<button id="onehund">100원</button>
<br>
<br>
현재금액 : <b id="insert">0</b>원
</body>
<script type="text/javascript">
var btnCoffee = document.getElementById('coffee');
var btnCorntea = document.getElementById('corntea');
var btnWater = document.getElementById('water');
var btnThousand = document.getElementById('thousand');
var btnFivehund = document.getElementById('fivehund');
var btnOnehund = document.getElementById('onehund');
var insert = document.getElementById('insert');
var money = 0;
btnCoffee.addEventListener('click', clkCoffee);
btnCorntea.addEventListener('click', clkCorntea);
btnWater.addEventListener('click', clkWater);
btnThousand.addEventListener('click', clkThousand);
btnFivehund.addEventListener('click', clkFivehund);
btnOnehund.addEventListener('click', clkOnehund);
function clkThousand() {
money += 1000;
color(money);
document.getElementById('insert').innerHTML= money;
};
function clkFivehund() {
money += 500;
color(money);
document.getElementById('insert').innerHTML= money;
};
function clkOnehund() {
money += 100;
color(money);
document.getElementById('insert').innerHTML= money;
};
function clkCoffee() {
money -= 700;
color(money);
if (money < 0) {
alert("잔액이 부족합니다!!");
}
else {
document.getElementById('insert').innerHTML= money;
}
}
function clkCorntea() {
money -= 1000;
color(money);
if (money < 0) {
alert("잔액이 부족합니다!!");
}
else {
document.getElementById('insert').innerHTML= money;
}
}
function clkWater() {
money -= 500;
color(money);
if (money < 0) {
alert("잔액이 부족합니다!!");
}
else {
document.getElementById('insert').innerHTML= money;
}
}
function color(money) {
if (money >= 1000) {
btnCoffee.style.color='blue';
btnCorntea.style.color='blue';
btnWater.style.color='blue';
}
else if (money >= 700) {
btnCoffee.style.color='blue';
btnCorntea.style.color='red';
btnWater.style.color='blue';
}
else if (money >= 500) {
btnCoffee.style.color='red';
btnCorntea.style.color='red';
btnWater.style.color='blue';
}
else if (money < 500) {
btnCoffee.style.color='red';
btnCorntea.style.color='red';
btnWater.style.color='red';
}
}
</script>
</html>
<!-- https://kim-coffee.tistory.com/20#describe -->
