[Javascript]Javascript 입문 05 (170315)

Javascript 입문 05 

• Stack과 Heap

- Stack :  변수가 저장되는 공간

- Heap : 객체가 저장되는 공간

: obj를 선언하는 순간 heap공간에는 {  } 객체가 생성되고 stack공간에는 heap의 999라는 주소값(=참조값=reference값)을 갖고 있는 obj 변수를 저장한다.

-한 번 더 복습!

: var a = {  }를 생성할 때 {  } 객체는 heap에 생성된다. 이 객체는 19라는 주소값(=참조값=reference값)을 갖고있는데 stack에 a라는 변수를 저장하며 그 변수에 주소값 19를 저장한다.

• stack과 heap 코드에 적용하기

1. var num1 은 stack에 10 객체는 heap에 객체에 대한 주소값(=키값)은 num1변수에 저장된다. 

2. var num1 과 var num2는 10 객체를 공유하여 key값 역시 같다. 

(이 때 number type, string type, boolean type은 객체가 중복되면 공유하여 사용한다)

3. 따라서 var num1 == var num2 : true;

1. var str1 은 stack에 "abcd" 객체는 heap에 객체에 대한 주소값(=키값)은 str변수에 저장된다.

2. var str1 과 var str2는 "abcd" 객체를 공유하여 key값 역시 같다.

3. 따라서 var str1 == var str2 : true;

1. var obj1은 stack에 {num:1, name:"김구라"}; 인 object객체는 heap에 객체에 대한 주소값은 obj1 변수에 저장된다.

2. var obj1과 var obj2의 객체는 다른 객체이다. (object나 function의 경우 같은 값이라고 하여도 객체를 공유하지 않는다.)

3. 따라서 var obj1 == var obj2 : false;

1. obj1.name = "이정호"를 입력하여 값을 넣는다. 이는 a와 같은 키값을 부여한다. 따라서 a == c : true;

• 참조값이 담긴 배열 생성하기

- class는 document.querySelectorAll을 이용, id는 document.querySelector를 이용한다.

- 배열 역시 heap영역에 저장된다.

**출력 결과**

  -좌측과 같이 입력하면 body영역을 hi로 바꿀 수 있다.

** 한 번에 다시보기 **

• 특정 data 지정해서 변수에 담기

- one 속 hobby의 piano객체 담기 

: one.hobby[0] = member[0].hobby[0]  (2개로 표현 가능하다)

- 변수에 담긴 참조 값 하나씩 저장했을 때 hobby 속 객체 담기

: members[3].hobby (하나로만 표현 가능하다. 특정 변수 속에 넣지 않았기 때문)

• addEventListener 이용하기

- 과거 onClick대신 좀 더 많이 사용하는 addEventListener를 이용해보자.

- 버튼을 클릭하면 addEventListener속에 있는 함수가 실행된다.

적용1.

** 출력 결과 **

적용2. 버튼 클릭시 BOX의 크기 변화

박스의 크기를 적용해 주는 것은 저번 시간에 이용했던 document.querySelector를 이용한다.

적용 3. this의 활용

 

document.querySelector 의 이용이 길고 귀찮다면 this를 이용한다.

this는 매우 유용하게 널리 사용된다! 선택된 객체를 this로 간략하게 나타낼 수 있다.

위 사진을 통해서도 알 수 있다.

** 출력 결과 **

(상자는 커졌다)

적용4. mouseover 와 mouseout

** 출력 결과 **

**복습실습**

여기서 잘못된 것은?

function() { } !

function 뒤 괄호 잊지말자!