[Do it! 자바스크립트+제이쿼리 입문] 5장 함수

도전 Mission!

1. 배경색 바꾸기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mission-1</title>
</head>
<body id="theBody">
    <button onclick="chColor()">배경 색상 바꾸기</button>
    <script>
        function chColor() {
            var arrColor = ["#ff0", "#6c0", "#fcf", "#cf0", "#39f"];
            var arrNum = Math.floor(Math.random() * arrColor.length); // 0 ~ 4 
            var bodyTag = document.getElementById("theBody");
            // bodyTag.setAttribute("style", "background-color: " + arrColor[arrNum] + ";");
            bodyTag.style.backgroundColor = arrColor[arrNum];
        } 
    </script>
</body>
</html>

2. 두 학생의 국어, 수학 평균 점수 출력하는 함수 - 프로토타입 사용

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mission-2</title>
</head>
<body>
    <script>
        function TestScore(name, kor, eng) {
            this.userName = name;
            this.korNum = kor;
            this.engNum = eng;
        }
        TestScore.prototype.getTestInfo = function() {
            document.write("이름: " + this.userName, "<br>");
            document.write("국어: " + this.korNum, "<br>");
            document.write("영어: " + this.engNum, "<br>");
        }
        TestScore.prototype.getAvg = function() {
            return (this.korNum + this.engNum) / 2;
        }
        var kimgun = new TestScore("김군", 80, 90);
        var ohgun = new TestScore("오군", 100, 80);

        kimgun.getTestInfo();
        document.write("평균 점수:" + kimgun.getAvg(), "<br><br>");

        ohgun.getTestInfo();
        document.write("평균 점수:" + ohgun.getAvg(), "<br><br>");
</script>
</body>
</html>

homework

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>연습문제 1</title>
</head>
<body>
	<script>
		function sumMulti(num1, num2) {
			if(num1 == num2) {
				return num1 * num2;
			} else {
				return num1 + num2;
			}
		}

		// if 문 안에 코드가 한 줄일 경우 괄호 안써도됨
		// function sumMulti(x, y) {
		// 	if (x == y) return x * y;
		// 	else return x + y;
		// }

		console.log(sumMulti(5, 10)); // 15
		console.log(sumMulti(10, 10)); // 100
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>연습문제 2</title>
</head>
<body>
	<script>
		// parseInt 함수는 괄호 안의 값을 정수형 숫자로 변환합니다.
		var num1 = parseInt(prompt("비교할 첫 번째 숫자: "));
		var num2 = parseInt(prompt("비교할 두 번째 숫자: "));
		
		compareTwo(num1, num2);

		function compareTwo(x, y) {
			if(x == y) alert(x + "(와)과 " + y + "는 같습니다.");
			if(x > y) alert(x + "(이)가 " + y + "보다 큽니다.");
			else alert(y + "(이)가 " + x + "보다 큽니다.");
		}
	</script>
</body>
</html>

저작자표시 비영리 변경금지

'🤼‍♂️ 5. Project > 5-2 연습문제 풀이' 카테고리의 다른 글

[Do it! 자바스크립트+제이쿼리 입문] 7장 제이쿼리 이벤트 (0)	2021.09.19
[Do it! 자바스크립트+제이쿼리 입문] 6장 제이쿼리 문서 객체 선택자와 조작법 (0)	2021.09.12
[Do it! 자바스크립트+제이쿼리 입문] 4장 객체 (0)	2021.09.12
[Do it! 자바스크립트+제이쿼리 입문] 3장 제어문 (0)	2021.09.12
[Do it! 자바스크립트+제이쿼리 입문] 2장 자바스크립트 기초 문법 (0)	2021.09.12