자바스크립트 / 10

 

 

 

 

 

 

 

 

 

- 동기 : 순서를 기다리면서 일처리가 되길 기다리는것

 

- 비동기 : 기다리지않고 먼저 처리되는것

 

- 작성순서가 곧 실행순서였는데 비동기를 쓰면 그 순서를 바꿀수 있다

 

- reponse.json( ) : 비동기 함수(패치)

 

- 동기형 함수: 그 함수가 리턴될때까지 다음라인이 실행되지 않음 

 

- 비동기형 함수: 비동기 함수는 옆으로 빠지고 다음라인이 실행되기 전에 먼저 실행된다

 

- 실행 시간이 오래 걸리는 애들은 비동기로 빼야한다

 

- setInterval : 정해진 시간마다 반복되어 출력되게 하는 함수.while문으로 보면 된다.이걸  멈추게 하는 방법은 clearInterval(셋인터벌변수명)을 쓰면 한번도 실행되지 않고 끝난다

        this.#tid = setInterval(()=>{
            console.log("ㅎㅇ");
        },1000);

        clearInterval(this.#tid);

 

 

- 동시성의 문제 : 순서가 없어서 생기는 문제 

 

- 플랫폼마다 비동기의 방식은 다르지만 개념은 같기때문에 굳이 구분지어 생각할필요 없다

 

- 1초마다 계속 그려지는 사각형을 만들수 있다

        this.#tid = setInterval(()=>{
            this.#box.x+=10;
            this.#box.y+=10;
            this.paint();
        },1000);

 

 

 

- on~ : 사용자가 입력해주면 그것을 감지해, 작동되는 함수 (onclick,onmouseover....)

 

       // this.#obj.onclick = clickHandler; //함수가 대입(=함수를 위임한다.)
        this.#obj.onclick = this.clickHandler.bind(this); //내가 원하는 this를 대입하기 위해선 bind를 써줘야 한다.clickHandler가 멤버함수라서 앞에 this를 붙여줘야 한다
        //bind는 clickHandler 내부에 있는 this를 의미한다
        // this.#obj.onclick = clickHandler(); //함수의 return값이 대입된다
        //clickHandler가 정의되지 않았다는 오류가 뜸
            
    }

    clickHandler(e){ //clickHandler는 멤버 함수
        this.#box.x = e.x; //this가 다른 this로 인식된다
        this.#box.y = e.y;
    }

 

 

- 그림은 프레임에 맞춰서 그려지도록 해야한다

 

 

 

---

 

 

 

- append : 자식으로 추가..

        this.#obj = document.createElement("canvas");
        document.body.append(this.#obj);
        //body의 자식으로 obj를 넣어서 body에 canvas가 그려지게 되는것??
        //이렇게 하면 html에서 canvas를 그리지 않아도 자스자체에서 그릴수 있다

 

        this.background = document.createElement("img");
        this.background.src = "img/map.png";
        //이미지 추가 방법
        
	this.#ctx.drawImage(this.background, 100,100); //100,100 위치값
        //요 태그까지 paint함수쪽에 넣으면 이미지가 그려진다

 

 

 clickHandler(e){ 
        this.#box.vx = (e.x-this.#box.x)/15;
        //e.x는 마우스포인트가 있는 값-#box.x는 박스가 원래 갖고있던 위치값인데 이 둘을 빼주면 중간 길이가 나오고, 그걸 15로 잘게 쪼개면 움직이게 된다
        this.#box.vy = (e.y-this.#box.y)/15;
        //원거리는 더 잘게 쪼개고 근거리는 더 듬성듬성 쪼개야 등거리로 간다

    }

 

 

clickHandler(e){ //clickHandler는 멤버 함수
        let w = e.x-this.#box.x;
        let h = e.y-this.#box.y;
        let d = Math.sqrt(w*w+h*h);
        //Math.sqrt함수는 숫자의 제곱근을 반환해준다
        
        this.#box.vx = w/d;
        this.#box.vy = h/d;
        //등속도 구하기 식
    }

 

 

 

 

 

    moveTo(x,y){
        let w = x-this.#x; 
        // w 변수는 마우스 클릭 이벤트가 발생한 위치와 현재 객체의 박스의 x 좌표 사이의 거리를 나타냅니다.
        let h = y-this.#y; 
        // h 변수는 마우스 클릭 이벤트가 발생한 위치와 현재 객체의 박스의 y 좌표 사이의 거리를 나타냅니다.
        let d = Math.sqrt(w*w+h*h); 
        // d 변수는 w와 h의 제곱합의 제곱근을 나타냅니다. 이 값은 마우스 클릭 이벤트가 발생한 위치와 현재 객체의 박스와의 거리를 나타냅니다.
        this.#vx = w/d;
        this.#vy = h/d;
    }

 

 

 

 

---

 

 

 

 

 

✏️ 동기Synchronous란?

: 순서를 지켜서 처리되는것

 

✏️ 비동기Asynchronous란?

: 순서 지키지 않고 먼저 처리되는것