[33일차] 7장 자바스크립트 코어 객체와 배열

GWLEE 2022. 8. 4. 18:35

2022. 8. 4. 18:35

🍔2022-08-04🍔

ex7-01.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>객체 생성 및 활용</title>
</head>
<body>
<h3>객체 생성 및 활용</h3>
<hr>
<script>
	// Date 객체 생성
	let today = new Date();

	// Date 객체의 toLocaleString() 메소드 호출
	document.write("현재 시간 : " + today.toLocaleString() + "<br>");

	// String 객체 생성
	let mystr= new String("자바스크립트 공부하기");
	document.write("mystr의 내용 : " + mystr + "<br>");
	document.write("mystr의 길이 : " + mystr.length + "<br>");
	// mystr.length=10; // 이 문장은 오류이다.
</script>
</body>
</html>

ex7-02.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>[]로 배열 만들기</title>
</head>
<body>
<h3>[]로 배열 만들기</h3>
<hr>
<script>
	let plots = [20, 5, 8, 15, 20]; // 원소 5개의 배열 생성
	document.write("var plots = [20, 5, 8, 15, 20]<br>");

	for(let i=0; i<5; i++) { // 5 대신 plots.length로 해도 됨
		let size = plots[i]; // plots 배열의 i번째 원소
		while(size>0) {
			document.write("*");
			size--;
		}
		document.write(plots[i] + "<br>");
	}
</script>
</body>
</html>

ex7-03.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Array 객체로 배열 만들기</title>
</head>
<body>
<h3>Array 객체로 배열 만들기</h3>
<hr>
<script>
	let degrees = new Array(); // 빈 배열 생성
	degrees[0] = 15.1;
	degrees[1] = 15.4;
	degrees[2] = 16.1;
	degrees[3] = 17.5;
	degrees[4] = 19.2;
	degrees[5] = 21.4;

	let sum = 0;
	// for(let i=0; i<degrees.length; i++)
	// 	sum += degrees[i];
	for(let i of degrees){
		sum += i;
	}

	document.write("평균 온도는 " + sum/degrees.length + "<br>");
</script>
</body>
</html>

ex7-04.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>[]로 배열 만들기</title>
</head>
<body>
<h3>[]로 배열 만들기</h3>
<hr>
<script>
	let plots = [20, 5, 8, 15, 20]; // 원소 5개의 배열 생성
	document.write("var plots = [20, 5, 8, 15, 20]<br>");

	for(let i=0; i<5; i++) { // 5 대신 plots.length로 해도 됨
		let size = plots[i]; // plots 배열의 i번째 원소
		while(size>0) {
			document.write("*");
			size--;
		}
		document.write(plots[i] + "<br>");
	}
</script>
</body>
</html>

ex7-07.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>String 객체의 메소드 활용</title>
</head>
<body>
<h3>String 객체의 메소드 활용</h3>
<hr>
<script>
	let a = new String("Boys and Girls");
	let b = "!!";
	document.write("a : " + a + "<br>");
	document.write("b : " + b + "<br><hr>");

	document.write(a.charAt(0) + "<br>");
	document.write(a.concat(b, "입니다") + "<br>");
	document.write(a.indexOf("s") + "<br>");
	document.write(a.indexOf("And") + "<br>");
	document.write(a.slice(5, 8) + "<br>");
	document.write(a.substr(5, 3) + "<br>");
	document.write(a.toUpperCase() + "<br>");
	document.write(a.replace("and", "or") + "<br>");
	document.write("   kitae   ".trim() + "<br><hr>");

	let sub = a.split(" ");
	document.write("a를 빈칸으로 분리<br>");
	for(let i=0; i<sub.length; i++)
		document.write("sub" + i + "=" + sub[i] + "<br>");

	document.write("<hr>String 메소드를 실행 후 a와 b 변함 없음<br>");
	document.write("a : " + a + "<br>");
	document.write("b : " + b + "<br>");
</script>
</body>
</html>

ex7-10.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>리터럴 표기법으로 객체 만들기</title>
<script>
	//사용자 객체 만들기
	let account = {
		// 프로퍼티 생성 및 초기화
		owner : "황기태", // 계좌 주인
		code : "111", // 계좌 코드
		balance : 35000, // 잔액 프로퍼티

		// 메소드 작성
		inquiry : function () { return this.balance; }, // 잔금 조회
		deposit : function(money) { this.balance += money; }, // 저금. money 만큼 저금
		withdraw : function (money) { // 예금 인출, money는 인출하고자 하는 액수
			// money가 balance보다 작다고 가정
			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); // 10000원 저금
	document.write("10000원 저금 후 잔액은 " + account.inquiry() + "<br>");
	account.withdraw(5000); // 5000원 인출
	document.write("5000원 인출 후 잔액은 " + account.inquiry() + "<br>");
</script>
</body>
</html>

ex7-11.html

<!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) { this.balance += money; }
		this.withdraw = function (money) { // 예금 인출, money는 인출하는 액수
			// money가 balance보다 작다고 가정
			this.balance -= money;
			return money;
		}
	}
</script>
</head>
<body>
<h3>Account 프로토타입 만들기</h3>
<hr>
<script>
	// new 연산자 이용하여 계좌 객체 생성
	let account = new Account("황기태", "111", 35000);

	// 객체 활용
	document.write("account : ");
	document.write(account.owner + ", ");
	document.write(account.code + ", ");
	document.write(account.balance + "<br>");

	account.deposit(10000); // 10000원 저금
	document.write("10000원 저금 후 잔액은 " + account.inquiry() + "<br>");
	account.withdraw(5000); // 5000원 인출
	document.write("5000원 인출 후 잔액은 " + account.inquiry() + "<br>");
</script>
</body>
</html>

'비트교육 > HTML' 카테고리의 다른 글

[34일차] 9장 이벤트 기초 및 활용 (0)	2022.08.05
[34일차] 8장 HTML DOM과 Document (0)	2022.08.05
[33일차] js02 (0)	2022.08.04
[33일차] js01 (0)	2022.08.04
[33일차] 6장 자바스크립트 언어 (0)	2022.08.04

blog

[33일차] 7장 자바스크립트 코어 객체와 배열

🍔2022-08-04🍔

ex7-01.html

ex7-02.html

ex7-03.html

ex7-04.html

ex7-07.html

ex7-10.html

ex7-11.html

'비트교육 > HTML' 카테고리의 다른 글

+ Recent posts

티스토리툴바