Javascript 스크립트 작성 방식

프론트

Javascript 스크립트 작성 방식

짱코딩러 2022. 9. 4. 21:35

<body>
    <script>
    function printResult(){
        var x = prompt("x 값을 입력하세요", 0);
        var y = prompt("y 값을 입력하세요", 0);

        x = parseInt(x);
        y = parseInt(y);

        // alert(x+y);      //알림창 띄움
        // btnPrint.value = x+y;    //버튼에 적힌 값 바뀜
        span1.innerText = x+y;      //화면에 적힌 값 바뀜
    }
    </script>

    <input type="button" value="클릭" onclick="printResult();" id="btnPrint"><br>
    <span id="span1" onclick="alert('hello');">스팬입니다.</span>
</body>

onload이벤트를 스크립트에 넣어주면 더 깔끔하게 코드를 작성할 수 있음.

1.아래의 코드처럼 스크립트에 바로 적용할 경우에는 스크립트가 읽히면서 바로 로드되므로 스크립트를 뒤로 빼준다.

<body>

    <input type="button" value="클릭" id="btnPrint"><br>
    <span id="span1" onclick="alert('hello');">스팬입니다.</span>
    <script>
    function printResult(){
        var x = prompt("x 값을 입력하세요", 0);
        var y = prompt("y 값을 입력하세요", 0);

        x = parseInt(x);
        y = parseInt(y);

        // alert(x+y);      //알림창 띄움
        // btnPrint.value = x+y;    //버튼에 적힌 값 바뀜
        span1.innerText = x+y;      //화면에 적힌 값 바뀜
    }
    btnPrint.onclick = printResult; //함수를 호출하는게 아니라(결과값을 넣는게 아니라) 함수를 대입하는것이므로 괄호 생략

    </script>
</body>

2.윈도우가 로드될 때 실행 되도록 만들어줄 수도 있다.(윈도우는 가장 나중에 로드됨)

    <script>
        function printResult(){
            var x = prompt("x 값을 입력하세요", 0);
            var y = prompt("y 값을 입력하세요", 0);
    
            x = parseInt(x);
            y = parseInt(y);
    
            // alert(x+y);      //알림창 띄움
            // btnPrint.value = x+y;    //버튼에 적힌 값 바뀜
            span1.innerText = x+y;      //화면에 적힌 값 바뀜
        }
        function init(){
        btnPrint.onclick = printResult; //함수를 호출하는게 아니라(결과값을 넣는게 아니라) 함수를 대입하는것이므로 괄호 생략
        }
    
        window.onload = init;
        </script>
</head>
<body>
    <input type="button" value="클릭" id="btnPrint"/><br/>
    <span id="span1" onclick="alert('hello');">스팬입니다.</span>
</body>

3.객체명을 분리해주는게 올바른 방법

document : 도큐먼트가 갖고있는 수많은 태그들을 가진 보따리

    <script>
        function printResult(){
            //document에서 btn-print라는 id의 객체를 달라고 요청
            var btnPrint = document.getElementById("btn-print");

            var x = prompt("x 값을 입력하세요", 0);
            var y = prompt("y 값을 입력하세요", 0);
    
            x = parseInt(x);
            y = parseInt(y);
    
            // alert(x+y);      //알림창 띄움
            // btnPrint.value = x+y;    //버튼에 적힌 값 바뀜
            span1.innerText = x+y;      //화면에 적힌 값 바뀜
        }
        function init(){
            var btnPrint =document.getElementById("btn-print");
            btnPrint.onclick = printResult;
        }
    
        window.onload = init;
        </script>
</head>

4.스크립트 코드의 지역화

먼저 window.onload = function() 만들어주고

=> 필요한 도구들을 준비해서

=> 이벤트 코드를 작성한다.

    <script>
        //init()였던 값을 직접 입력해줌(로 감싸줌)
        window.onload = function(){
            var btnPrint =document.getElementById("btn-print");

            //printResult() 함수를 익명함수로 바꿔 값을 넣어줌
            btnPrint.onclick = function(){
                var x = prompt("x 값을 입력하세요", 0);
                var y = prompt("y 값을 입력하세요", 0);
        
                x = parseInt(x);
                y = parseInt(y);
        
                span1.innerText = x+y;
            };
        }
    </script>
</head>

5.같은 이름의 함수가 만들어 졌을 때 덮어씌워지는 것을 방지하기 위해 이벤트리스너를 사용해줌

(js코드를 따로 분리해서 이용하면서 팀원들과 협업할 때 코드가 중복될 수 있음)

        //이벤트 이름은 load
        window.addEventListener("load",function(){
            var btnPrint =document.getElementById("btn-print");

            btnPrint.onclick = function(){
                var x = prompt("x 값을 입력하세요", 0);
                var y = prompt("y 값을 입력하세요", 0);
        
                x = parseInt(x);
                y = parseInt(y);
        
                span1.innerText = x+y;
            };
        });//잘 닫아주자