2일차 JavaScript(2023-03-13)

권단비·2023년 3월 13일
JavaScript

JavaScript

목록 보기
1/4
post-thumbnail

[JavaScript 연습]

[계산 : 구구단]
<!DOCTYPE html>
<html lang="en">
<head>
<script>
    document.write("<table border=1>");

for(var i = 0; i<=9; i++){
    document.write("<tr>");
    for(var j = 2; j<=9;j++){
        if(i == 0){
            document.write("<td>" + j + "단" + "</td>");
        } else{
            document.write("<td>" + j + " * " + i + " = " + (i*j) + "</td>");
        }
    }
    document.write("</tr>");
}
    </script>
</head>
<body>
</body>
</html>
[결과값]

[계산 : js로 배열 선언후 로또 번호를 출력하시오. 단 중복을 제거 하시오.]
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <script>
        var lotto = new Array(6);
        for(var i = 0; i < lotto.length; i++){
            lotto[i] = (Math.ceil(Math.random()*45)); // 소수점 자리 버림처리
            //lotto[i] = Math.floor(Math.random()*45+1); 소수점 자리 버림처리
            for(var j = 0; j < i; j++){
                if(lotto[i] == lotto[j]){
                    i--;
                }
            }
        }
        document.write("Lotto 번호 : " + lotto);

    </script>
</head>
<body>
</body>
</html>
[결과값]

[if문 / if~else문 / if~else if문]

[계산]
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script>
// if문
var varNum = 100;
if(varNum > 50){
console.log("varNum > 50");
}
if(varNum <=50){
    console.log("varNum <=50");
}
console.log("varNum : " + varNum);

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

// if ~else if문
if(varNum > 200){
    console.log("varNum > 200");
} else if(varNum > 150){
    console.log("varNum < 150");
} else if(varNum > 100){
    console.log("varNum > 100");
} else{
    console.log("varNum <= 100");
}
</script>
</head>
<body>
</body>
</html>
[결과값]

[switch문]

[계산]
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script>
var varNum = 100;
switch(varNum){
    case 200:
    console.log("varNum : 200");
    break;

    case 150:
    console.log("varNum : 150");
    break;

    default:
    console.log("varNum : " + varNum);
    break;
}
</script>
</head>
<body>
</body>
</html>
[결과값]

[삼항연산자]

[계산]
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script>
var varNum1 = 1234;
var varNum2 = 4321;

var varResult = (varNum1 > varNum2) ? "varNum1 > varNum2" : "varNum1 <=varNum2"
console.log("varResult : " + varResult);
</script>
</head>
<body>
</body>
</html>
[결과값]

[for문]

[계산]
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <script>
//예제 1
for(var i = 0; i<10; i++){
console.log("i : " + i); // console창에 띄움
document.write(i); // 화면에 출력함
}
    </script>
</head>
<body>
</body>
</html>
[결과값]


[배열과 for문]

[계산]
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <script>
//for in문
var varArr =[1,2,3,4,5];
for(var i = 0; i < varArr.length;i++){
    console.log("varArr[" + i + "] : " + varArr[i])
}
for(var i in varArr) {
    console.log("varArr[" + i + "] : " + varArr[i])
}
    </script>
</head>
<body>
</body>
</html>
[결과값]

[continue]

[계산]
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <script>
//continue
var varResult = 0;
for(var i = 1; i < 10; i++) {
    if( (i % 2 == 0) || (i % 3 == 0) ) continue;
    console.log("i : " + i);
    varResult += i;
}
console.log("varResult : " + varResult);
    </script>
</head>
<body>
</body>
</html>
[결과값]

[break]

[계산]
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <script>
//break
var varNum = 0;
var varSum = 0;
while(varNum < 10) {
    console.log("varNum : " + varNum);
    varSum += varNum;
    varNum++;

    if(varSum > 20) {
        console.log("varSum : " + varSum);
        break;
    }
}
for(var i = 0; true; i++) {
    console.log("i : " + i);
    if(i > 50) break;
}
    </script>
</head>
<body>
</body>
</html>
[결과값]

[함수 기본 function]

[계산]
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <script>
var num = 0;

//명시적 함수 생성
function funName() { // var대신 function을 사용
console.log("명시(선언)적 함수의 기능을 실행 합니다.");
}
funName();

//익명 함수 생성
var funAnonymous = function() { // function funAnonymous()과 같음
    // 함수 자체도 하나의 객체로 취급하고 데이터 타입이다
    // function()의 첫번째 주소가 funAnonymous에 들어간다.
    console.log("익명 함수의 기능을 실행 합니다.");
}

funName();
funAnonymous();

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

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

    </script>
</head>
<body>
</body>
</html>
[결과값]

[함수 기본]

파라미터 개수는 상관없이 넘길 수 있다.

[계산]
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <script>
    function funName(x, y, z) {
    console.log("x : " + x);
    console.log("y : " + y);
    console.log("z : " + z);

    var result = x * y + z;

    return result;
    }
var varResult = 0;

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

varResult = funName(2,3,4,5); // 5는 전달되지만 할당이 안된다.
console.log("varResult : " + varResult);

varResult = funName(2,3);
console.log("varResult : " + varResult);
    </script>
</head>
<body>
</body>
</html>
[결과값]
NaN : Not a Number

[arguments]

매개변수를 데이터로 하는 배열 객체
this와 arguments가 만들어진다.

this는 굉장히 중요하면서도 어려운 개념이다. (자바 : this생성자 / this.n)
this : JS는 객체라 this가 자동으로 만들어진다.
function 함수이름(매개변수1, 매개변수2, ... 매개변수n) {
      //매개변수들을 이용한 배열 객체)
      arguments = [매개변수1, 매개변수2, ... 매개변수n]
      }
[계산]
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <script>
var varArr;
function funName() {
    return arguments;
}
varArr = funName(1,2,3,4,5,6,7);
console.log("varArr : " + varArr);
console.log("varArr.length : " + varArr.length);

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

console.log("---------------------------------------");
        varArr = funName("A", "B", "C", "D");
        console.log("varArr : " + varArr);
        console.log("varArr.length : " + varArr.length);

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

// 입력 받은 매개변수를 모두 더하는 함수
        function allSum(){
        var sum = 0;

        // for( var i in arguments){
        //     sum = sum + i;
        // }

        for(var i = 0; i< arguments.length; i++){
            sum = sum + arguments[i]
        }
        document.write(sum);
    }
    allSum(2,5,7);
    allSum(1,2,3,4,5,6,7,8,9,10);
    </script>
</head>
<body>

</body>
</html>
[결과값]

[hoisting]

함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다.

[계산]
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <script>
        //함수 실행 순서

        fun1(); // 정상 실행
        fun2(); // 오류 발생

        // 명시(선언)적 함수 생성
        // 호이스팅 : 명시적 함수는 자동으로 끌어올리기 때문에 fun1은 정상실행됨
        function fun1(){
            console.log("fun1 run!");
        }

        // 익명 함수 생성
        var fun2 = function(){
            console.log("fun2 run!");
        }
        fun2(); // 정상 실행
    </script>
</head>
<body>
</body>
</html>
[결과값]

[계산]
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <script>
function funName(){
    return function(x){
        for(var i = 1; i<10; i++){
            console.log(x + " * " + i + " = " + (x*i));
        }
    }
}
var returnFun = funName(); // function(x) 함수를 끌고 온다
returnFun(4); // 구구단 4단을 출력
returnFun(5);
    </script>
</head>
<body>
</body>
</html>
[결과값]

[클로저]

반환된 함수의 life-cycle가 종료될 때까지(내부 변수가 끝날 때까지) 호출된 함수의 life-cycle이 유지되는 것

[계산]
    <!DOCTYPE html>
    <html lang="en">
    <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>Document</title>
        <script>
            function funName(x){
                var varName = ":: 요청한 " + x + "에 대한 구구단::";

                return function(){
                    console.log(varName);
                    for(var i = 1; i < 10; i++){
                        console.log(x + " * " + i + " = " + (x*i));
                    }
                }
            }
            // 지역변수에 접근할 수 없다.(에러 발생)
            // console.log("varName : " + varName);

            var returnFun = funName(5);
            returnFun();
        </script>
    </head>
    <body> 
    </body>
    </html>
[결과값]

[내부함수]

함수 안에 함수 만들 수 있음

[계산]
    <!DOCTYPE html>
    <html lang="en">
    <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>Document</title>
        <script>
        /* 내부함수
            : 함수 안에 또 다른 함수*/

            // (width, height) =>{ 해당 함수로도 사용할 수 있음
            function outFun(width, height){
                console.log("triangle : " + triangle())}
                console.log("quadrangle : " + quadrangle());

            //삼각형 면적 계산
            function triangle() {
                return(width * height) / 2;

            //사각형 면적 계산
            function quadrangle(){
                return width * height;
            }
            }
            outFun(3,5);

        </script>
    </head>
    <body>
    </body>
    </html>
[결과값]

[콜백함수]

[계산]
    <!DOCTYPE html>
    <html lang="en">
    <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>Document</title>
        <script>
        /*콜백함수
            : 매개변수로 함수를 전달*/
        function callbackFuntion(callback){
            callback();
        }
        function eat(){ // 4byte 주소
            console.log("먹습니다.")
        }

        function drink(){ // 4byte 주소
            console.log("마십니다.")
        }

        callbackFuntion(eat);
        callbackFuntion(drink);

        function funName(funCBF, funCBP, num){
            for(var i = 1; i<=10;i++){
                console.log(num + " * " + i + " = " + (num * i));
                if(i < 10) funCBP(i);
            }
        }
        </script>
    </head>
    <body>
</body>
</html>
>>```
[결과값]

profile
권단비
다음 포스트

3일차 JavaScript(2023-03-14)

0개의 댓글