Javascript #5

Scope

자바스크립트에서 Scope란 변수에 접근할 수 있는 범위라고 할 수 있다.

• 전역 스코프(Global Scope)
  - 전역에 선언되어있어 어느 곳에서든지 해당 변수에 접근할 수 있다는 의미
  
  
• 지역 스코프(Local Scope)
  - 해당 지역에서만 접근할 수 있어 지역을 벗어난 곳에선 접근할 수 없다는 의미
  
  
  예시

var a = 1; // 전역 스코프
function print() { // 지역(함수) 스코프
 var a = 111;
 console.log(a);
}
print(); // 111
console.log(a); // 1

---

SetTimeout() & SetInterval()

setTimeout()

• 어떤 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행해야하는 경우 setTimeout() 함수를 사용한다.

setTimeout(() => console.log("2초 후에 실행됨"), 2000);

• setTimeout() 함수는 타임아웃 아이디(Timeout ID)라고 불리는 숫자를 반환하는데, 타임아웃 아이디는 setTimeout() 함수를 호출할 때 마다 내부적으로 생성되는 타이머 객체를 가리키고 있다. 이 값을 인자로 clearTimeout() 함수를 호출하면 기다렸다가 실행될 코드를 취소할 수 있다.

const timeoutId = setTimeout(() => console.log("5초 후에 실행됨"), 5000);
clearTimeout(timeoutId);

setInterval()

• 웹페이지의 특정 부분을 주기적으로 업데이트해줘야 하거나, 어떤 API로 부터 변경된 데이터를 주기적으로 받아와야 하는 경우에 자바스크립트의 setInterval() 함수를 사용할 수 있다.
• setInterval() 함수는 어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용한다.

setInterval(() => console.log(new Date()), 2000);

--------console----------

Sun May 26 2023 12:29:06 GMT-0500 (Eastern Standard Time)
Sun May 26 2023 12:29:08 GMT-0500 (Eastern Standard Time)
Sun May 26 2023 12:29:10 GMT-0500 (Eastern Standard Time)
Sun May 26 2023 12:29:12 GMT-0500 (Eastern Standard Time)
Sun May 26 2023 12:29:14 GMT-0500 (Eastern Standard Time)
Sun May 26 2023 12:29:16 GMT-0500 (Eastern Standard Time)
Sun May 26 2023 12:29:18 GMT-0500 (Eastern Standard Time)

--- 0과 9 사이의 수를 무작위로 생성하여 2초마다 출력 ---
setInterval(() => console.log(Math.floor(Math.random() * 10)), 2000);
--------console----------
3
2
8
3
1

❗ <주의>

setTimeout() 함수와 setInterval() 함수를 사용한 후에는 반드시 clearTimeout() 함수와 clearInterval() 함수를 사용해서 타이머를 청소해야 한다.
👉 메모리 누수(memory leak)로 이어질 수 있기 때문에 !

Canvas

canvas 는 페이지에 그래픽적인 요소를 그릴 때 사용되는 html5 의 새로운 태그이다.

<!-- canvas 요소는 width와 height를 속성으로 직접 지정할 수 있다. -->
<canvas id="myCanvas" width="800" height="500"></canvas>
<script>
	//canvas 요소의 참조값
    const canvas = document.querySelector("#myCanvas");
    //canvas에 그림을 그릴 도구(context) 객체 얻어내기
    const context = canvas.getContext("2d");
</script>

• 캔버스에 어떤 요소를 그리기 위해서 가장 처음으로 getContext()를 사용하여 위치를 정의할 필요가 있다. 기본적으로 2d로 정의되며, 위 요소를 사용하면 canvas에 2d 좌표로 위치를 지정할 수 있게 된다.

  • beginPath(): 도형을 그리기 전에 지정해줌

  • closePath() : 도형의 시작점과 끝 점 사이에 직선을 그어 완성된 도형으로 만들어줌

  • fill() : 주어진 도형의 path를 채워줌 use with fillStyle

  • moveTo() : 선을 그리지 않고 좌표를 이동시킨다.

  • stroke() : 윤곽선을 이용하여 선을 그을 수 있게 해준다.

  • strokeStyle : 윤곽선의 스타일을 지정해준다.

  • lineTo(x, y) : 현재 위치에서 지정핸 위치까지 선을 그린다.

---

캔버스를 사용해서 게임 만들기
https://github.com/hyeongeunee/html-css-javascript/blob/master/javascript/Step09_example5.html

---

JSON

• JSON은 JavaScript Object Notation의 약자다.
  
  
• JSON은 사람이 읽을 수 있는 텍스트 기반의 데이터 교환 표준이다.
  
  
• JSON의 특징
  • JSON은 자바스크립트를 확장하여 만들어졌*다.
  • JSON은 자바스크립트 객체 표기법을 따른다.
  • JSON은 사람과 기계가 모두 읽기 편하도록 고안되었다.
  • JSON은 프로그래밍 언어와 운영체제에 독립적이다.
    
    
• JSON 구조
  • JSON 데이터는 이름과 값의 쌍으로 이루어집니다.
  • JSON 데이터는 쉼표(,)로 나열됩니다.
  • 객체(object)는 중괄호({})로 둘러쌓아 표현합니다.
  • 배열(array)은 대괄호([])로 둘러쌓아 표현합니다.

"데이터이름": 값
"name": "식빵"

• JSON 객체
  JSON 객체는 중괄호({})로 둘러쌓아 표현한다.
  JSON 객체는 쉼표(,)를 사용하여 여러 프로퍼티를 포함할 수 있다.

{
    "name": "식빵",
    "family": "웰시코기",
    "age": 1,
    "weight": 2.14
}

Javascript ⇄ Json

• JSON.stringify()
  JSON.stringify() 메소드는 인수로 전달받은 자바스크립트 객체를 문자열로 변환하여 반환한다.

JSON.stringify(value)

• JSON.parse()
  JSON.parse() 메소드는 JSON.stringify() 메소드와는 반대로 인수로 전달받은 문자열을 자바스크립트 객체로 변환하여 반환한다.

JSON.parse(text)

• toJSON()
  자바스크립트의 toJSON() 메소드는 자바스크립트의 Date 객체의 데이터를 JSON 형식의 문자열로 변환하여 반환합니다.

var date = new Date();   // 자바스크립트 Date 객체

var str = date.toJSON(); // Date 객체를 JSON 형식의 문자열로 변환함.