웹 8일 (23.03.13)

1. 조건문

1-1. if문

    <script>
        var num = 100;
        if (num > 50) {
            console.log("varNum > 50");
        }

        if (num <= 50) {
            console.log("varNum <= 50");
        }

        console.log("varNum : " + num);
    </script>

1-2. if~else

    <script>
        var num = 100;

        if (num <= 50) {
            console.log("varNum <= 50");
        } else {
            console.log("varNum > 50");
        }

        console.log("varNum : " + num);
    </script>

1-3. if~else if~else

    <script>
        var num = 100;

        if (num > 200) {
            console.log("varNum > 200");
        } else if (num > 150) {
            console.log("varNum > 150");
        } else if (num > 100) {
            console.log("varNum > 100");
        } else {
            console.log("varNum <= 100");
        }
    </script>

1-4. switch / case

    <script>
        var num = 100;

        switch (num) {
            case 200:
                console.log("varNum : 200");
                break;

            case 150:
                console.log("varNum : 150");
                break;
            default:
                console.log("varNum : " + num);
                break;
        }
    </script>

1-5. 3항 연산자

    <script>
        var num1 = "1234";
        var num2 = "4321";

        var result = (num1 > num2) ? "num1이 크다" : "num2가 크다";
        console.log("result : " + result);
    </script>

2. 반복문

2-1. for문

    <script>
        for (var i = 0; i < 10; i++) {
            console.log("i : " + i);
        }
    </script>

2-2. 배열과 for문

    <script>
        var varArr = [1, 2, 3, 4, 5];
        document.write("<h3>index for</h3>");

        for (var i = 0; i < varArr.length; i++) {
            document.write("varArr[" + i + "] : " + varArr[i] + "<br>");
        }

        document.write("<h3>enhanced for</h3>");

        for (var i in varArr) {
            document.write("varArr[" + i + "] : " + varArr[i] + "<br>");
        }

    </script>

2-3. continue

    <script>
        var result = 0;
        for (var i = 1; i < 10; i++) {
            if ((i % 2 == 0) || (i % 3 == 0)) continue;
            // 2의 배수이거나 3의 배수이면 반복문을 continue 한다.
            console.log("i : " + i);
            result += i;

        }

        console.log("result : " + result);

    </script>

• 1부터 9까지 도는 for문
• 2의 배수이거나, 3의 배수이면 continue (밑의 내용을 패스하고 다시 for문의 첫 부분으로)
• 2의 배수가 아니거나, 3의 배수가 아닌 수가 콘솔에 기록되고 result에 더해진다.
• 마지막에는 result 값이 출력

2-4. break

    <script>
        var num = 0;
        var sum = 0;


        document.write("<h3>while ~ break</h3>");
        while (num < 10) {
            document.write("varNum : " + num);
            document.write("<br>");
            sum += num;
            num++;

            if (sum > 20) {
                document.write("varSum : " + sum);
                document.write("<br>");
                break;
            }
        }

        for (var i = 0; true; i++) {
            console.log("i : " + i);
            if (i > 50) break;
        }
    </script>

• for문에서 true를 쓸 수 있다. (무한 반복)
• i가 51이면 break된다. (console에는 0부터 52까지 출력)

3. 함수

3-1. 함수 생성하기

• 명시적 함수 : 함수 자료형을 가진 형태
  위에서 아래부터 시작되지만, 명시적 선언이 있으면 실행된다. (호이스팅 관련)
• 익명 함수 : 변수 안에 함수 선언

        function funName() {
            console.log("명시(선언)적 함수의 기능을 실행 합니다.");
        }

        // 익명 함수 생성
        var funAnonymous = function () {
            console.log("익명 함수의 기능을 실행 합니다.");
        }

        funName();
        funAnonymous();

        console.log("funName함수 보기 : \n");
        console.log(funName);
        console.log("funName함수 실행 : \n");
        console.log(funName());

        console.log("funAnonymous함수 보기 : \n");
        console.log(funAnonymous);
        console.log("funAnonymous함수 실행 : \n");
        console.log(funAnonymous());

• 이름만 적으면 function의 모습을 출력
  (console.log 안에 console.log 선언하면 undefined로 나오므로 따로 쓰기)
• 함수로 적으면 function 안의 내용 출력

---

        fun1(); // 정상 실행
        func2(); // undefined error

		// 주석 처리하고 실행	

        function fun1() {
            console.log("function 1 실행");
        }

        var fun2 = function fun2() {
            console.log("function 2 실행");
        }

        fun1(); // 정상 실행
        fun2(); // 정상 실행

3-2. 매개변수와 리턴 값

• 매개 변수에 자료형 선언 안해도 된다.
• 매개변수에 맞게 보내주는 것이 좋다.
  많이 넣어서 보내면 저장은 되지만 함수 실행은 정해진 개수대로만 된다.
  적게 넣어서 보내면 부족한 부분은 undefined로 선언되어 결과를 낸다.
  (숫자 + undefined = NaN > Not a Number )

        function funName(x, y, z) {
            console.log("x : " + x + ", y : " + y + ", z : " + z);
            var result = x * y + z;
            return result;
        }

        var result = funName(2, 3, 4);
        console.log("result : " + result);

        var result = funName(2, 3, 4, 5);
        console.log("result : " + result);

        var result = funName(2, 3);
        console.log("result : " + result);

3-3. arguments

        function funName() {
            return arguments; // 매개변수를 데이터로 한다.
        }

        var Array = funName(1, 2, 3, 4, 5, 6, 7);
        console.log("varArr : " + Array);
        console.log("varArr.length : " + Array.length);

        for (var i in Array) {
            console.log("varArr[" + i + "] : " + Array[i]);
        }

---

        // 입력받은 매개변수 모두 더하기

        function allSum() {
            var sum = 0;
            for (var i = 0; i < arguments.length; i++) {
                sum += arguments[i];
            }
            document.write(sum + "<br>");
        }

        allSum(2, 5, 7); // 14
        allSum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); // 55

3-4. 함수 리턴 함수

• return 값에 함수를 넣고, 변수에 할당해서 쓸 수 있도록 한다.

        function funName() {
            return function (x) {
                for (var i = 1; i < 10; i++) {
                    console.log(x + " * " + i + " = " + (x * i));
                }
            }
        }

        var returnFun = funName();

		/*
        var returnFun = function (x) {
                for (var i = 1; i < 10; i++) {
                    console.log(x + " * " + i + " = " + (x * i));
                }
            }
        */

        returnFun(4);

3-5. 클로저

• 함수 안의 변수는 함수가 끝나기 전까지는 살아 있다.

        function funName(x) {
            var name = x + "에 대한 구구단";
            return function () {
                console.log(name);
                for (var i = 1; i < 10; i++) {
                    console.log(x + " * " + i + " = " + (x * i));
                }
            }
        }

        var returnFun = funName(5);
        returnFun();

3-6. 함수 안의 함수

        function outFun(width, height) {
            console.log("triangle : " + triangle());
            console.log("rectangle : " + rectangle());

            function triangle() {
                return (width * height) / 2;
            }

            function rectangle() {
                return width * height;
            }
        }
        outFun(4, 5);

3-7. 콜백 함수

• 매개변수에 전달된 함수를 실행한다.

        function callbackFunction(callback) {
            callback();
        }

        function eat() {
            document.write("먹습니다." + "<br>");
        }

        function drink() {
            document.write("마십니다." + "<br>");
        }

	// callbackFunction(eat()); >> TypeError
        callbackFunction(eat);
        callbackFunction(drink);
		

---

        function funName(funCBF, funCBP, num) {

            for (var i = 1; i <= 10; i++) {
                console.log(num + " * " + i + " = " + (num * i));
                if (i < 10) funCBP(i);
            }

            funCBF();

        }

        function funCallBackProgress(n) {

            console.log((n * 10) + "% 진행 완료!");

        };

        function funCallBackFinish() {

            console.log("서버 작업 종료!");

        };

        funName(funCallBackFinish, funCallBackProgress, 7);

4. 로또 번호 생성하기

• Math.round, Math.floor, Math.ceil
• parseint