[javascript] step02. event

    <button onclick = "removeAll()">삭제</button>
    <script>

        let removeAll = function(){
            let isDelete = confirm("정말로 삭제하시겠습니까?")
            
            // 웹브라우저야 만약에 isDelete 에 true가 있으면 아래의 한줄을 수행하고
            // false가 들어있으면 수행하면 안된다.
            if(isDelete == true){
                console.log("모든 자료를 삭제했습니다.");
            }
        };
        ///let first = 10;
        ///let second = 20;
        // 두 개의 숫자를 전달받아서 합계를 console에 출력하는 함수 
        let showSum = function(first, second){
            // 1. 함수에 전달된 두 개의 숫자를 더한 결과를 얻어낸다.
            let result = first + second;
           
            // 2. 결과 값을 console 창에 출력한다.
            console.log(result);
        };
    </script>

이전 수업의 마지막 예시이다.

global 영역 (전역) : script가 실행되는 가장 바깥영역.
local 영역 : 함수 등의 안쪽 영역.

만약 함수의 매개변수 first를 a라고 고친다면, 함수 안쪽에 있는 first는 global 영역에서 선언된 변수를 가리킨다. 그리고 local 영역 안쪽의 내용은 바깥에서 직접 참조할 수 없다. 만약에 바깥에서 참조하고 싶다면 따로 뽑아내주어야 한다. (예를 들어 바깥쪽에 변수를 만들어주고, 그 변수에 대입하는 방식으로 가능하겠다.)

사실 이 예시에는 문제가 있다. 현재는 javascript가 엄청나게 늘어나는 추세라고 했다. 만약에 여러 사람이 코딩을 하는데 변수의 이름이 중복된다면 어떤 일이 발생할까? 혼동이 생길 것이다. 때문에 global 영역에 resource(자원)을 만드는 것을 자제해야 한다.

예시를 보면 removeAll 이라는 global 자원을 강요하도록 되어있는 것이다. 때문에 (function( ){ })( ); 와 같이 로딩과 동시에 함수를 호출하는 것이 맞는 표현이라고 한다. 하지만 removeAll을 function 안에 만들면 또 호출이 불가능하다. function 안에서 다룬 내용을 그냥 바깥쪽에서 사용할 수는 없기 때문이다. 그렇다면 어떤 방식으로 global 변수를 사용하지 않으면서 함수를 호출할 수 있을까?

step02. 01~02. event

    <h1>event 처리</h1>
    <button id="one">눌러보셈</button>
    <button id="two">눌러보셈2</button>
    <script>
        let oneBtn = document.querySelector("#one");
        oneBtn.addEventListener("click", function(){
            console.log("버튼을 눌렀네요?");
        });

        // id가 two인 버튼에 "click" 이라는 event가 발생하면 호출될 함수를 등록
        document.querySelector("#two").addEventListener("click", function(){
            console.log("버튼을 눌렀네요2?")
        });
   </script>

<h1></h1>, <button></button>. 각각의 줄이 heap 영역이다.
때문에 해당하는 번호를 알아야 불러올 수 있다.
지난 시간에 미리 봤었던 document.querySelector("xxx")의 꼴. 이렇게 해당 번호를 참조할 수 있다.
document : 기본 object이다.
querySelector("#one") : 함수이다.
addEventListener( ) : 함수이다. 함수에 함수를 넣을 수도 있다. 함수 안에 여러 줄의 javascript도 가능하다.
"click" : 클릭, mouseover : 마우스 위로, mousemove : 마우스 무빙, mousedown : 마우스 누르면, mouseup : 떼면...
```
function test(a, b){
	b();
}
```
함수 자체를 전달해서 내부적으로 알아서 호출하는 방식이라고 했다. (ex - test("kim", function( ){ })

    <style>
        /* class 속성의 값이 box인 요소에 적용할 css */
        .box{
            width:500px;
            height:500px;
            border-style:solid; /* solid 실선 dotted 점선 dashed 저엄 선*/
            border-width:1px;
            border-color:red;
        }
    </style>
</head>
<body>
    <div class="box" id="myDiv">div1</div>
    <script>
        document.querySelector("#myDiv").addEventListener("mousedown", function(){
            console.log("mousedown!")
            document.querySelector("#myDiv").style.backgroundColor="yellow";
        });

        document.querySelector("#myDiv").addEventListener("mouseup", function(){
            console.log("mouseup!")
            document.querySelector("#myDiv").style.backgroundColor="white";
        });

        document.querySelector("#myDiv").addEventListener("mousemove", function(event){
            console.log("mousemove!")
            // function에 event 객체가 전달된다.
            console.log(event);
            // 좌표를 얻어낸다.
            let x = event.offsetX;
            let y = event.offsetY;
            // 얻어낸 값을 console에 출력해보기
            //let info = "x : "+x+" | y : "+y
            let info = `x:${x} y:${y}`; // back tick의 활용
            console.log(info);

            // id 가 myDiv 인 element의 innerText를 info 로 출력해보세요
            document.querySelector("#myDiv").innerText = info;
        });
    </script>

addEventListener 함수에 전달하는 함수에 event 객체를 전달할 수 있다. console 창에 노출시키면 여러가지 data를 확인할 수 있다.
web 상에서 좌표계는 좌상단을 기준으로 우측으로 x축, 아래쪽으로 y축이다. screenX, Y가 screen 기준, pageX, Y가 page 기준, offsetX, Y가 해당 요소 기준이다.
back tick과 ${ }를 이용하면 back tick 바깥의 변수를 참조할 수 있다. 변수를 포함하는 문자열을 만들어낼 수 있다. 번거롭게 문자열을 + 로 이을 필요가 없다.
사실 예시의 function과 console에 event가 빠져도 정보가 전달된다. 이것은 dummy variable이다.

'뒷북 정리 (국비 교육) > javascript' 카테고리의 다른 글

[javascript] step04. loop (0)	2021.12.09
[javascript] step03. canvas (그림판 예제) (0)	2021.12.08
[javascript] step01. datatype : function (0)	2021.12.08
[javascript] step01. datatype : object (plane object, array) (0)	2021.12.08
[javascript] step01. data type : boolean (0)	2021.12.08