공부일지
231010 (HTML)
CD가참둥그렇다
2023. 10. 10. 12:12
테스트 9. new Object()로 계좌를 표현하는 account 객체 만들기
- new Object를 이용하면 클래스처럼 객체를 생성할 수 있다.
- account.owner 처럼 클래스의 호출처럼 이용 가능.
- function으로 작성된 메소드를 객체에 넣을 수 있다. 함수형 변수라고 한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>new Object()로 사용자 객체 만들기</title>
<script>
function inquiry() { return this.balance; }
function deposit(money) { return this.balance+=money; }
function withdraw(money) { return this.balance-=money; }
//사용자 객체 만들기
let account = new Object();
//필드멤버 3개 선언
account.owner = "황기태";
account.code = "111";
account.balance = 35000;
//생성된 객체와 함수 3개의 연결
account.inquiry = inquiry;//메소드 대입. 함수형 변수. 변태다.
account.deposit = deposit;
account.withdraw = withdraw;
</script>
</head>
<body>
<h3>new Object()로 사용자 객체 만들기</h3>
<hr>
<script>
document.write("account : ");
document.write(account.owner + ", ");
document.write(account.code + ", ");
document.write(account.balance + "<br>");
account.deposit(10000);
document.write("10000원 저금 후 잔액은 "+account.inquiry()+"<br>");
account.withdraw(5000);
document.write("5000원 인출 후 잔액은 "+account.inquiry()+"<br>");
</script>
</body>
</html>
테스트 10. 리터럴 표기법으로 계좌를 표현하는 account 객체 만들기
- let 변수를 이용하고 중괄호를 사용하여 클래스 형 객체를 만들 수 있다.
- 변수명 : 내용 형태로 작성할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>리터럴 표기법으로 객체 만들기</title>
<script>
let account = {
owner : "황기태",
code : "111",
balance : 35000,
inquiry : function inquiry() { return this.balance; },
deposit : function deposit(money) { return this.balance += money; },
withdraw : function withdraw(money) { return this.balance -= money;
return money;
}
};
</script>
</head>
<body>
<h3>리터럴 표기법으로 객체 만들기</h3>
<hr>
<script>
document.write("account : ");
document.write(account.owner + ", ");
document.write(account.code + ", ");
document.write(account.balance + "<br>");
account.deposit(10000);
document.write("10000원 저금 후 잔액은 "+account.inquiry()+"<br>");
account.withdraw(5000);
document.write("5000원 인출 후 잔액은 "+account.inquiry()+"<br>");
</script>
</body>
</html>
테스트 11. 프로토타입으로 객체 만들기
- 자바의 메소드 생성과 같은 양식으로 설정 가능하다.
- this.변수명 을 이용하여 Account 내부의 변수를 선언할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>프로토타입으로 객체 만들기</title>
<script>
function Account(owner, code, balance) {
this.owner = owner;
this.code = code;
this.balance = balance;
this.inquiry = function() {return this.balance;}
this.deposit = function(money) {return this.balance+=money;}
this.withdraw = function(money) {return this.balance-=money; return money;}
}
</script>
</head>
<body>
<h3>프로토타입으로 객체 만들기</h3>
<hr>
<script>
let account = new Account("Cd", "111", 35000);
document.write("account : ");
document.write(account.owner + ", ");
document.write(account.code + ", ");
document.write(account.balance + "<br>");
account.deposit(10000);
document.write("10000원 저금 후 잔액은 "+account.inquiry()+"<br>");
account.withdraw(5000);
document.write("5000원 인출 후 잔액은 "+account.inquiry()+"<br>");
</script>
</body>
</html>
8장
테스트 1. DOM 객체의 구조 출력 : p 객체 사례
- 태그에 id를 부여하고 getElementById를 이용하면 태그의 내부 요소에 접근하는 변수를 선언할 수 있다.
- 클래스와 유사하게 p.tagName등 다양한 접근 방법을 통하여 요소를 추출할 수 있다.
- DOM객체 = Document Object Model의 약자이다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML DOM 트리</title>
</head>
<body>
<h3>DOM 객체 p의 프로퍼티, 스타일, 이벤트 리스너</h3>
<hr>
<p id ="firstP" style="color: blue; background: yellow"
onclick="this.style.color='teal'"> 이것은
<span style="color: red">문장입니다.</span>
</p>
<script>
let p = document.getElementById("firstP");
let text = "p.id = " + p.id + "\\n";
text += "p.tagName = " + p.tagName + "\\n";
text += "p.innerHTML = " + p.innerHTML + "\\n";
text += "p.style.color = " + p.style.color + "\\n";
text += "p.onclick = " + p.onclick + "\\n";
text += "p.childElementCount = " + p.childElementCount + "\\n";
text += "너비 = " + p.offsetWidth + "\\n";
text += "높이 = " + p.offsetHeight + "\\n";
alert(text);
</script>
</body>
</html>
테스트 2. <span>의 CSS3 스타일 동적 변경
- 메소드를 만들고 클릭 시 html의 요소를 변경 시킬 수 있도록 할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 스타일 동적 변경</title>
<script>
function change() {
let span = document.getElementById("mySpan");
span.style.color = "green";
span.style.fontSize = "30px";
span.style.display = "block";
span.style.width = "6em";
span.style.border = "3px dotted magenta";
span.style.margin = "20px";
}
</script>
</head>
<body>
<h3>CSS 스타일 동적 변경</h3>
<hr>
<p style="color: blue"> 이것은
<span id="mySpan" style="color: red">문장입니다.</span>
</p>
<input type="button" value="스타일 변경" onclick="change()">
</body>
</html>
테스트 3. innerHTML을 이용하여 HTML 콘텐츠 동적 변경
- innerHTML을 이용하여 태그 내부의 코드를 변경할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>innerHTML 활용</title>
<script>
function change() {
let p = document.getElementById("firstP");
p.innerHTML = "나의 <img src='media/puppy.png'>강아지";
}
</script>
</head>
<body>
<h3>innerHTML 활용 : 아래 글자에 클릭하면 예쁜 강아지가 보입니다.</h3>
<hr>
<p id="firstP" style="color: blue" onclick="change()"> 여기에
<span style="color: red">클릭하세요.</span>
</p>
</body>
</html>
테스트 4. this 활용
- 메소드를 만들고 매개변수를 지정하면 메소드를 호출할 때 매개변수를 바꿔서 동작하도록 할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>this 활용</title>
<script>
function change(obj, size, color) {
obj.style.color = color;
obj.style.fontSize = size;
}
</script>
</head>
<body>
<h3>this 활용</h3>
<hr>
<button onclick="change(this, '30px', 'red')">버튼</button>
<button onclick="change(this, '30px', 'blue')">버튼</button>
<div onclick="change(this, '25px', 'orange')">여기 클릭하면 크기와 색 변경</div>
</body>
</html>
테스트 5. document 객체의 프로퍼티 출력
- location : 현재 페이지의 주소
- url : 같다
- title : 현재 페이지의 머리에 쓰여진 제목
- head.id : head 태그의 id 요소를 가져옴
- domain : 주소창의 도메인
- lastModified : 마지막 수정 시간
- defaultView : 기본 출력 형태를 나타낸다.
- readyState : 문서의 로드가 완료된 후 readystate 가 complete로 변경된다.
- referrer : 문서 이동 전 페이지, 유입 경로를 표시한다.
- activeElement.value : 현재 포커스 된 요소의 값을 출력한다.
<!DOCTYPE html>
<html>
<head id="myHead">
<meta charset="UTF-8">
<title>document 객체의 주요 프로퍼티</title>
<script>
let text = "문서 로딩 중일 때 readyState = " + document.readyState + "\n";
</script>
</head>
<body style="background-color: yellow; color: blue; direction: rtl" onload="printProperties()">
<h3>document 객체의 주요 프로퍼티</h3>
<hr>
<a href="http://www.naver.com">네이버 홈페이지</a>
<div>이 곳은 div 영역입니다.</div>
<input id="input" type="text" value="여기 포커스가 있습니다.">
<script>
function printProperties() {
document.getElementById("input").focus();
text += "1.location = " + document.location + "\n";
text += "2.URL = " + document.URL + "\n";
text += "3.title = " + document.title + "\n";
text += "4.head의 id = " + document.head.id + "\n";
text += "5.body color = " + document.body.style.color + "\n";
text += "6.domain = " + document.domain + "\n";
text += "7.lastModified = " + document.lastModified + "\n";
text += "8.defaultView = " + document.defaultView + "\n";
text += "9.문서의 로드 완료 후 readyState = " + document.readyState + "\n";
text += "10.referrer = " + document.referrer + "\n";
text += "11.activeElement = " + document.activeElement.value + "\n";
text += "12.documentElement의 태그 이름 = " + document.documentElement.tagName + "\n";
alert(text);
}
</script>
</body>
</html>