JavaScript 제어문, 배열, 배열 반복, 함수, 객체1

Web/javascript

JavaScript 제어문, 배열, 배열 반복, 함수, 객체1

dustKim 2024. 4. 16. 21:16

제어문

조건문

if 문

# 사용 방법

if(조건식){
    조건식의 결과가 true일 때 실행할 문장;
    ...
}
--------------------------------------------

if(조건식){
    조건식의 결과가 true일 때 실행할 문장;
    ...
}else{
    조건식의 결과가 false일 때 실행할 문장;
}
---------------------------------------------

if(조건식1){
    조건식1의 결과가 true일 때 실행할 문장;
    ...
}else if(조건식2){
    조건식2의 결과가 true일 때 실행할 문장;
    ...
}else{
    모든 조건식의 결과가 false일 때 실행할 문장;
    ...
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>if 문</title>
</head>
<body>
    <h2>if 문</h2>
    <script>
        const age = Number(prompt("나이를 입력하세요"));

        if(age > 19){
            console.log("성인입니다.");
        }else if(age > 14){
            console.log("청소년입니다.")
        }else if(age > 6){
            console.log("어린이입니다.")
        }else{
            console.log("유아입니다.")
        }
    </script>
</body>
</html>

switch 문

# 사용 방법

switch(변수 또는 값) {
    case 값1:
        변수와 값1이 같은 경우 실행할 문장;
        ...
        break;
    case 값2:
        변수와 값2가 같은 경우 실행할 문장;
        ...
        break;
    ...
    default:
        변수와 모든 값이 다를 경우 실행할 문장;
        ...
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>switch 문</title>
</head>
<body>
    <h2>switch 문</h2>
    <script>
        let input = prompt("아동, 청소년, 성인 중 하나를 고르세요.");

        switch(input){
            case "아동":
                input += ": 입장료 무료";
                break;
            case "청소년":
                input += ": 입장료 5,000원";
                break;
            case "성인":
                input += ": 입장료 10,000원";
                break;
            default:
                alert("입력값을 확인하세요!");
                input = "입력값 확인";
        }
        console.log(input);
    </script>
</body>
</html>

반복문

while 문

# 사용 방법

while(조건식) {
    조건식의 결과가 true인 동안 반복할 문장;
    ...
}

-------------------------------------------

do {
    조건식의 결과가 true인 동안 반복할 문장;
    ...
}while(조건식);

- do ~ while 문은 조건식의 결과가 처음부터 false인 경우라도 한 번은 {}의 문장을 실행함

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>while 문</title>
</head>
<body>
    <h2>while 문</h2>
    <script>
        while(true) {
            let num = Number(prompt("숫자를 입력하세요"));
            if (num % 2 == 0) {
                console.log("짝수입니다. 프로그램을 종료합니다.");
                break;
            };
            console.log("홀수입니다. 계속 진행하세요");
        }
    </script>
</body>
</html>

for 문

# 사용 방법

for(초기값; 조건식; 증감식;) {
    조건식의 결과가 true인 동안 반복할 문장;
    ...
}

------------------------------------------

for문의 무한루프
for(;;) {
    ...
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>for 문</title>
</head>
<body>
    <h2>for 문</h2>
    <script>
        for(let i=1; i<=100; i++) {
            console.log(i);
        };
    </script>
</body>
</html>

break 문

- switch 문 또는 반복(while, for)중인 루프 내에서 사용하여 해당 문장을 완전히 종료시키고 다음에 위치한 실행문으로 이동한다.(while 문 예제 참고)

continue 문

- 반복중인 루프 내에서 사용하여 해당 루프의 나머지 부분을 건너뛰고 다음 반복문의 실행으로 넘어간다.

# 사용 방법

let num = 값;
while(num <= 값) {
    console.log(num);
    num++;
    if (num == 특정값) continue;
    ...
    ...
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>for 문</title>
</head>
<body>
    <h2>for 문</h2>
    <script>
        for(let i=1; i<=100; i++) {
            if (i % 3 == 0) {
                console.log('😀');
                continue;
            };
            console.log(i);
        };
    </script>
</body>
</html>

배열

배열(Array)

- 이름과 인덱스로 참조되는 정렬된 값의 집합이다.(자료구조)

- 배열을 구성하는 각각의 값을 배열요소라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스라고 한다.

# 사용 방법

- 배열 선언
  let 변수명;
  

- 배열 초기화
  변수명 = [요소1, 요소2, 요소3 ...];

	let arr;
	arr = [100, 200, 300];
    

- 배열 생성 함수
  let 변수명 = Array(요소1, 요소2, 요소3 ...);
  

- 배열의 접근
  let arr = [100, 200, 300];

	arr[0]  // 100
	arr[1]  // 200
	arr[2]  // 300

자바스크립트 배열의 특징

- 배열 요소의 타입이 고정되어 있지 않다.

ex)

let arr = [1, 1.5, '김사과', true]

- 배열 요소의 인덱스가 연속적이지 않아도 된다.

ex)

let arr;
    arr[0] = 1;
    arr[1] = 100;
    arr[4] = 10;
    // index 2, 3은 undefined

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>배열 1</title>
</head>
<body>
    <h2>배열 1</h2>
    <script>
        const user = [1, "apple", "김사과", 20, "서울 서초구"];
        console.log(user);

        console.log(user[0]);
        console.log(user[1]);
        console.log(user[2]);
        console.log(user[3]);
        console.log(user[4]);
        console.log(user[5]);

        user[4] = "서울 강남구";
        console.log(user[4]);

        console.log(user.length);
        console.log('----------------');

        for(let i=0; i<user.length; i++) {
            console.log(user[i]);
        };
    </script>
</body>
</html>

- 인덱스가 넘어가면 에러가 나지 않고 undefined으로 나온다.

- 인덱스 값을 바꿀 때, 인덱스 값을 새로 주면 된다.

- length를 이용하여 길이를 확인할 수 있다.

배열의 속성

push() : 배열의 요소를 추가한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>배열 2</title>
</head>
<body>
    <h2>배열 2</h2>
    <script>
        const user = [1, "javascript", "자바스크립트", 20, "서울 송파구"];
        
        user.push('자바');		 # push() : 배열의 요소를 추가
        console.log(user);
    </script>
</body>
</html>

pop() : 배열의 마지막 인덱스 번호에 있는 값을 제거한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>배열 2</title>
</head>
<body>
    <h2>배열 2</h2>
    <script>
        const user = [1, "javascript", "자바스크립트", 20, "서울 송파구"];

        let temp = user.pop();		# pop() : 배열의 마지막 인덱스 번호에 있는 값을 제거
        console.log(user);
        console.log(temp);
    </script>
</body>
</html>

shift() : 배열의 첫 번째 인덱스 번호에 있는 값을 제거한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>배열 2</title>
</head>
<body>
    <h2>배열 2</h2>
    <script>
        const user = [1, "javascript", "자바스크립트", 20, "서울 송파구"];

        console.log(user);
        temp = user.shift();		# shift() : 배열의 첫 번째 인덱스 번호에 있는 값을 제거
        console.log(user);
        console.log(temp);

    </script>
</body>
</html>

concat() : 두 배열의 요소를 합친다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>배열 2</title>
</head>
<body>
    <h2>배열 2</h2>
    <script>
        const user = [1, "javascript", "자바스크립트", 20, "서울 송파구"];

        const profile = ["자바", "A형", "istp"]
        result = user.concat(profile);		# concat() : 두 배열의 요소를 합침
        console.log(result);

    </script>
</body>
</html>

join() : 배열 요소 사이에 원하는 문자를 삽입한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>배열 2</title>
</head>
<body>
    <h2>배열 2</h2>
    <script>
        const user = [1, "javascript", "자바스크립트", 20, "서울 송파구"];

        result = user.join('😀');		# join() : 배열 요소 사이에 원하는 문자를 삽입
        console.log(result);
        console.log(typeof(user));
        console.log(typeof(result));
    </script>
</body>
</html>

sort() : 배열의 요소를 오름차순으로 나열한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>배열 2</title>
</head>
<body>
    <h2>배열 2</h2>
    <script>
        const arr = ['a', 'z', 'c', 'f', 'r'];
        
        arr.sort();			# sort() : 배열의 요소를 오름차순
        console.log(arr);
    </script>
</body>
</html>

reverse() : 배열의 요소를 역순으로 배치한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>배열 2</title>
</head>
<body>
    <h2>배열 2</h2>
    <script>
        const arr = ['a', 'z', 'c', 'f', 'r'];

        arr.reverse(); 		# reverse() : 배열을 역순으로 재배치
        console.log(arr);
    </script>
</body>
</html>

배열을 이용한 반복

const arr = [10, 20, 30];
const user = [userid:"javascript", name:"자바스크립트", age:20];

for in 문

- 변수에 배열 인덱스 또는 객체의 key가 저장되며 반복한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>배열 3</title>
</head>
<body>
    <h2>배열 3</h2>
    <script>
        const userArray = [1, 'javascript', '자바스크립트', 20, '서울 송파구'];
        const userObj = {userid:'javascript', name:'자바스크립트', age:20};

        # for in 배열
        for(let i in userArray) {
            console.log(`i:${i}, userArr[${i}]: ${userArray[i]}`);
        };


        # for in 객체
        for(let i in userObj) {
            console.log(`i:${i}, userObj[${i}]: ${userObj[i]}`);
        };
    </script>
</body>
</html>

for of 문

- 변수에 배열 value가 저장되며 반복한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>배열 3</title>
</head>
<body>
    <h2>배열 3</h2>
    <script>
        const userArray = [1, 'javascript', '자바스크립트', 20, '서울 송파구'];
        const userObj = {userid:'javascript', name:'자바스크립트', age:20};

        # for of 배열
        for(let v of userArray) {
            console.log(`v:${v}`);
        };
    </script>
</body>
</html>

forEach 문

- 배열에서만 사용가능하며 요소의 개수만큼 반복한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>배열 3</title>
</head>
<body>
    <h2>배열 3</h2>
    <script>
        const userArray = [1, 'javascript', '자바스크립트', 20, '서울 송파구'];
        const userObj = {userid:'javascript', name:'자바스크립트', age:20};

        userArray.forEach(function(v, i, arr){
            console.log(`v:${v}, i:${i}, arr:${arr}`);
        });
    </script>
</body>
</html>

함수

사용자 정의 함수(function)

- 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록으로, 필요할 때마다 해당 작업을 반복 수행할 수 있다.

- 코드를 재활용하기 위한 목적이 있다.

함수 선언식

# 사용 방법

function 함수명(매개변수1, 매개변수2, ..) {
    함수가 호출되었을 때 실행할 문장;
    ...
    return 값;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>함수</title>
</head>
<body>
    <h2>함수</h2>
    <script>
        function func1() {
            console.log(`func1() 호출!`);
        }

        func1();
        func1();
    </script>
</body>
</html>

함수 표현식

# 사용 방법

const 변수명 = function(매개변수1, 매개변수2, ..) {
    함수가 호출되었을 때 실행할 문장;
    ...
    return 값;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>함수</title>
</head>
<body>
    <h2>함수</h2>
    <script>
        function func4(){
            return '🍔';
        }

        func4();
        console.log(func4());
        const presents = func4();
        console.log(presents);
    </script>
</body>
</html>

디폴트 매개변수

- 매개변수의 값을 설정한다.

- 매개변수의 값을 정하지 않으면 기본값을 변수에 저장한다.

# 사용 방법

function 함수명(매개변수1=값1, 매개변수2=값2, ...) {
    함수가 호출되었을 때 실행할 문장;
    ... 
    return 값;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>함수</title>
</head>
<body>
    <h2>함수</h2>
    <script>
        function func5(num1=1, num2=1) {
            console.log(`num1의 값: ${num1}, num2의 값: ${num2}`);
            console.log(`${num1} * ${num2} = ${num1 * num2}`);
        }

        func5(10, 3);  
        func5(10);
        func5();
    </script>
</body>
</html>

나머지 매개변수

- 생략 접두사(...)를 사용하여 특정 위치의 인수부터 마지막 인수까지 한 번에 지정할 수 있다.

# 사용 방법

function 함수명(매개변수1, ...매개변수2) {
    함수가 호출되었을 때 실행할 문장;
    ...
    return 값;
}

# 들어가는 값 위치
함수명(값1, 값2, 값3, 값4);

매개변수1: 값1
매개변수2: 갑2, 값3, 값4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>함수</title>
</head>
<body>
    <h2>함수</h2>
    <script>
        function func6(...x) {
            console.log(`x의 값: ${x}`);
            console.log(`x의 타입: ${typeof(x)}`);

            for(i in x){
                console.log(`i의 값: ${i}, x[${i}]: ${x[i]}`);
            }
        }

        func6(30, 50, 80, 100, 40);
        func6(50, 80);
    </script>
</body>
</html>

호이스팅

- 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것이다.

- var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화한다.

- let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다.

화살표 함수

- function 키워드를 사용하여 함수를 만드는 것보다 간단하게 표현한다.

- 화살표 함수는 항상 익명이고, return은 생략하며, 모든 화살표 함수는 return형이다.

# 사용 방법

const 변수명 = function(){
    ...
}					# 화살표 함수 사용하지 않은 모습

# 매개변수가 없는 경우
const 변수명 = () => {
    ...
}

const 변수명 = () => 문장;


# 매개변수가 있는 경우
const 변수명 = 매개변수1 => {
    ...
}

const 변수명 = (매개변수1, 매개변수2, ..) => {
    ...
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>화살표 함수</title>
</head>
<body>
    <h2>화살표 함수</h2>
    <script>
        const func1 = () => console.log("안녕하세요. 자바스크립트!");
        
        func1();

        console.log('-------------');

        const func2 = x => x * x;
        const result = func2(10);
        console.log(`10의 제곱:${result}`);

        
        const func3 = (x, y) => {
            let sum = 0;
            for(let i=x; i<=y; i++) {
                sum += i;
            }
            return sum;
        }
        const total = func3(1, 100);
        console.log(`1부터 100까지의 합: ${total}`);

        console.log('-------------');

        let age = Number(prompt("나이를 입력하세요"))
        const isAdult = (age > 19) ? () => console.log("성인입니다.") : () => console.log("미성년입니다.");
        isAdult();
    </script>
</body>
</html>

객체

객체(Object)

- 하나의 주체를 가지고 관련있는 프로퍼티(Property)를 가지고 있는 집합이다.

프로퍼티(Property)

- 이름과 값으로 구성된 정렬되지 않은 집합이다.

- 프로퍼티 함수도 저장할 수 있다.(프로퍼티 메서드)

객체를 생성하는 방법

리터럴 표기법

# 사용 방법

const 변수명 = {
    프로퍼티명1:값1,
    프로퍼티명2:값2,
    ...
    프로퍼티명n:function(){
        ...
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>객체 만들기</title>
</head>
<body>
    <h2>객체 만들기</h2>
    <script>
        // 리터럴 표기법
        const Rucy = {
            name: '루시',
            age: 14,
            color: 'white',
            birthday: '20091210',
            getBirthday: function() {
                return this.birthday;
            }
        }

        console.log(Rucy.name);
        console.log(Rucy.age);
        console.log(Rucy.color);
        console.log(Rucy.birthday);
        console.log(Rucy.getBirthday);
        console.log(Rucy.getBirthday());
    </script>
</body>
</html>

생성자를 이용한 표기법

- 객체를 만드는 함수이다.

- new 연산자를 사용하여 객체를 생성하고 초기화할 수 있다.

- 같은 형태의 객체를 여러개 생성할 때 좋다.

# 사용 방법

function 함수명(매개변수1, 매개변수2 ...) {
    this.프로퍼티1 = 값1;
    this.프로퍼티2 = 값2;
    ...
    this.프로퍼티n = function(){
        ...
    }
}

const 변수1 = new 함수명(값1, 값2, ...);
const 변수2 = new 함수명(값1, 값2, ...);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>객체 만들기</title>
</head>
<body>
    <h2>객체 만들기</h2>
    <script>
        //생성자를 이용한 객체
        function Dog(name, color) {
            this.name = name;
            this.color = color;
            this.eat = function() {
                return `${this.name} 사료를 먹습니다.`;
            }
        }

        const PPomi = new Dog('뽀미', '흰색');
        console.log(PPomi.name);
        console.log(PPomi.color);
        console.log(PPomi.eat());
    </script>
</body>
</html>

클래스를 이용한 표기법

- ECMA Script6에 추가된 객체 생성 방법으로 내부적으로 생성자를 이용한 객체 생성 방법과 동일하게 작동한다.

# 사용 방법

const 클래스명 = class {
    constructor(매개변수1, 매개변수2, ...) {
        this.프로퍼티1 = 값1,
        this.프로퍼티2 = 값2,
        ...
    }

    메소드명(매개변수1, 매개변수2, ...) {
        ...
    }
}

const 변수명1 = new 클래스명(값1, 값2, ...);
const 변수명2 = new 클래스명(값1, 값2, ...);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>객체 만들기</title>
</head>
<body>
    <h2>객체 만들기</h2>
    <script>
        // 클래스를 이용한 객체 생성
        const Student = class {
            constructor(name, hp, age) {
                this.name = name;
                this.hp = hp;
                this.age = age;
            }
            getName() {
                return `이름은 ${this.name} 입니다.`;
            }
        }

        const apple = new Student('김사과', '010-0000-0000', 20);
        console.log(apple.name);
        console.log(apple.hp);
        console.log(apple.age);
        console.log(apple.getName);
        console.log(apple.getName());

    </script>
</body>
</html>

프로토타입(Prototype)

- 모든 객체는 프로토타입이라는 객체를 가지고 있고, 프로토타입으로부터 프로퍼티와 프로퍼티 메서드를 상속받는다.

- 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며, 상속되는 정보를 제공하는 객체를 프로토타입이라고 한다.

# 예시

const animal = new Animal();		# Animal.prototype, Object.prototype

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>프로토타입</title>
</head>
<body>
    <h2>프로토타입</h2>
    <script>
        function Dog(color, name, age) {
            this.color = color;
            this.name = name;
            this.age = age;
        }

        const Rucy = new Dog('흰색', '루시', 14);
        console.log(Rucy);
        console.log(`이름: ${Rucy.name}`);
        console.log(`색상: ${Rucy.color}`);
        console.log(`나이: ${Rucy.age}`);
        Rucy.family = '포메라니안';
        Rucy.getFamily = function() {
            return this.family;
        }
        console.log(`종: ${Rucy.family}`);
        console.log(`getfamily: ${Rucy.getFamily()}`);

        const PPomi = new Dog('흰색', '뽀미', 6);
        console.log(`이름: ${PPomi.name}`);
        console.log(`색상: ${PPomi.color}`);
        console.log(`나이: ${PPomi.age}`);
        console.log(`종: ${PPomi.family}`);
        // console.log(`getfamily: ${PPomi.getFamily()}`);


        Dog.prototype.owner = '김사과';
        Dog.prototype.run = function() {
            return this.name + ' 달립니다.';
        }

        console.log(`Rucy 소유자: ${Rucy.owner}`);
        console.log(`PPomi 소유자: ${PPomi.owner}`);

        console.log(`Rucy run(): ${Rucy.run()}`);
        console.log(`PPomi run(): ${PPomi.run()}`);
    </script>
</body>
</html>

Math 객체

min() : 가장 작은 수를 반환한다. 매개변수가 전달되지 않으면 Infinity를 반환한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Math 객체</title>
</head>
<body>
    <script>
        # min() : 가장 작은 수를 반환. 매개변수가 전달되지 않으면 infinity를 반환
        console.log(Math.min());
        console.log(Math.min(1, 10, -10, 1000, 0, '-100'));
        console.log(Math.min(1, 10, -10, '마이너스천', 0, '-100'));
    </script>
</body>
</html>

max() : 가장 큰 수를 반환한다. 매개변수가 전달되지 않으면 -Infinity를 반환한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Math 객체</title>
</head>
<body>
    <script>
        # max() : 가장 큰 수를 반환. 매개변수가 전달되지 않으면 -Infinity를 반환
        console.log(Math.max());
        console.log(Math.max(1, 10, -10, 1000, 0, '-100'));
        console.log(Math.max(1, 10, -10, '마이너스천', 0, '-100'));
    </script>
</body>
</html>

round() : 소수점 첫 번째 자리에서 반올림하여 그 결과를 반환한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Math 객체</title>
</head>
<body>
    <script>
        # round() : 소수점 첫 번째 자리에서 반올림하여 그 결과를 반환
        console.log(Math.round(10.49));
        console.log(Math.round(10.5));
        console.log(Math.round(-10.5));
        console.log(Math.round(-10.51));
    </script>
</body>
</html>

floor() : 소수점을 버림 하여 그 결과를 반환한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Math 객체</title>
</head>
<body>
    <script>
        # floor() : 소수점을 버림
        console.log(Math.floor(10.49));
        console.log(Math.floor(10.5));
        console.log(Math.floor(-10.5));
        console.log(Math.floor(-10.51));
    </script>
</body>
</html>

ceil() : 소수점 첫 번째 자리에서 소수점을 올림 하여 그 결과를 반환한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Math 객체</title>
</head>
<body>
    <script>
        # ceil() : 소수점 첫 번째 자리에서 소수점을 올림
        console.log(Math.ceil(10.49));
        console.log(Math.ceil(10.5));
        console.log(Math.ceil(-10.5));
        console.log(Math.ceil(-10.51));
    </script>
</body>
</html>

random() : 0보다 크거나 같고 1보다 작은 무작위 소수를 반환한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Math 객체</title>
</head>
<body>
    <script>
        # random() : 0보다 크거나 같고 1보다 작은 무작위 소수를 반환
        const ram = Math.random();
        console.log(ram);

        const number = Math.ceil(Math.random() * 10);
        console.log(number);
    </script>
</body>
</html>

상속

- 클래스 기반의 객체지향 언어와 다르다. 자바스크립트는 프로토 타입 기반의 객체지향 언어이다.

문제

가위바위보 게임 만들기

게임 방식

가위, 바위, 보 중 하나를 입력하세요. 가위

    컴퓨터: 바위, 유저: 가위 -> 패

    가위, 바위, 보 중 하나를 입력하세요. 바위

    컴퓨터: 가위, 유저: 바위 -> 승

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>가위바위보 게임</title>
</head>
<body>
    <h2>가위바위보 게임</h2>
    <script>
        let computer;
        const number = Math.ceil(Math.random() * 10);
        if (number > 6){
            computer = '가위';
        }
        else if(number <= 6){
            computer = '바위';
        }
        else if(number < 3){
            computer = '보'
        }
        for(;;){
            let str = prompt("가위, 바위, 보 중 하나를 입력하세요");
            if (str == computer){
                console.log(`컴퓨터: ${computer}, 유저: ${str}  -> 비겼습니다.`)
            }
            else if((str == '가위' && computer == '바위') || (str == '바위' && computer == '보') || (str == '보' && computer == '가위')){
                console.log(`컴퓨터: ${computer}, 유저: ${str}  -> 유저 패`)
            }
            else{
                console.log(`컴퓨터: ${computer}, 유저: ${str}  -> 유저 승.`)
                break;
            }
        }
        console.log("프로그램을 종료합니다.")
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>가위바위보 게임</title>
</head>
<body>
    <h2>가위바위보 게임</h2>
    <script>
        while(true){
            const com = Math.ceil(Math.random()*3);
            user = prompt("가위바위보 중 하나를 입력하세요");
            
            if(user == '가위'){
                if(com == 1){
                    console.log("컴퓨터: 가위, 유저: 가위 -> 비겼습니다.");
                }else if(com == 2){
                    console.log("컴퓨터: 바위, 유저: 가위 -> 졌습니다.");
                }else if(com == 3){
                    console.log("컴퓨터: 보, 유저: 가위 -> 이겼습니다.");
                    break;
                }
            }else if(user == '바위'){
                if(com == 1){
                    console.log("컴퓨터: 가위, 유저: 바위 -> 이겼습니다.");
                    break;
                }else if(com == 2){
                    console.log("컴퓨터: 바위, 유저: 바위 -> 비겼습니다.");
                }else if(com == 3){
                    console.log("컴퓨터: 보, 유저: 바위 -> 졌습니다.");
                }
            }else if(user == '보'){
                if(com == 1){
                    console.log("컴퓨터: 가위, 유저: 보 -> 졌습니다.");
                }else if(com == 2){
                    console.log("컴퓨터: 바위, 유저: 보 -> 이겼습니다.");
                    break;
                }else if(com == 3){
                    console.log("컴퓨터: 보, 유저: 보 -> 비겼습니다.");
                }
            }
        }
        console.log("프로그램을 종료합니다.")
    </script>
</body>
</html>

로또번호 뽑기 프로그램 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로또번호</title>
</head>
<body>
    <h2>로또번호</h2>
    <script>
        const lotto = [0, 0, 0, 0, 0, 0];
        for(let i=0; i<lotto.length; i++){
            lotto[i] = Math.ceil(Math.random() * 45);
            for(let j=0; j<i; j++){
                if(lotto[i] == lotto[j]){
                    i--;
                }
            }
        }
        lotto.sort(function(p, c){return p-c})
        console.log(lotto);
    </script>
</body>
</html>

'Web > javascript' 카테고리의 다른 글

Node.js buffer, stream, pipe (0)	2024.04.25
Node.js (비)동기, Promise, JSON, fetch, module, import... 등 (0)	2024.04.23
Node.js 이터레이터, 이터러블, 스프레드 연산자 (0)	2024.04.23
JavaScript 정규표현식, 이벤트 (1)	2024.04.22
JavaScript 변수, 데이터 타입, 타입변환 함수, 연산자 (1)	2024.04.15

현재글JavaScript 제어문, 배열, 배열 반복, 함수, 객체1

하루하루 개발하기

Today :
Yesterday :

하루하루 개발하기