[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:03.80,Default,,0000,0000,0000,,윈스턴에 대한 생생한 내용을 \N알려주는 프로그램을 만들어봤어요
Dialogue: 0,0:00:03.80,0:00:07.47,Default,,0000,0000,0000,,너무 많이는 말고요\N왜냐면 윈스톤도 비밀이 있거든요\N
Dialogue: 0,0:00:07.47,0:00:11.87,Default,,0000,0000,0000,,자, 어떻게 제가 프로그램을 구성했는지 살펴봅시다
Dialogue: 0,0:00:11.87,0:00:15.33,Default,,0000,0000,0000,,윈스턴에 대한 정보를 저장하기 위해 제일 위에 변수를 만들었어요
Dialogue: 0,0:00:15.33,0:00:20.03,Default,,0000,0000,0000,,첫번째 줄부터 나이, 눈 색깔, 배열을 입력했어요
Dialogue: 0,0:00:20.03,0:00:23.96,Default,,0000,0000,0000,,네번째 줄에는 윈스턴이 좋아하는것을,
Dialogue: 0,0:00:23.96,0:00:27.91,Default,,0000,0000,0000,,다음 줄에는
Dialogue: 0,0:00:27.91,0:00:31.57,Default,,0000,0000,0000,,윈스턴이 태어난 태어난 곳을 입력했어요
Dialogue: 0,0:00:31.57,0:00:35.94,Default,,0000,0000,0000,,그러고나서 여기 아래에, text 구문에 명령어를 입력했어요
Dialogue: 0,0:00:35.94,0:00:39.70,Default,,0000,0000,0000,,물론 배열의 각 항목에 접근해야 하겠죠
Dialogue: 0,0:00:39.70,0:00:43.45,Default,,0000,0000,0000,,좋아요
Dialogue: 0,0:00:43.45,0:00:48.64,Default,,0000,0000,0000,,다섯 변수는 모두 한 가지 것에 대한 \N정보를 이야기하고 있어요. 바로 윈스톤입니다\N
Dialogue: 0,0:00:48.64,0:00:51.60,Default,,0000,0000,0000,,그러나 그 변수들은 서로 따로 따로이죠
Dialogue: 0,0:00:51.60,0:00:55.50,Default,,0000,0000,0000,,여러분들이 알다시피, 자바스크립트에서
Dialogue: 0,0:00:55.50,0:00:59.29,Default,,0000,0000,0000,,관련된 여러가지 정보를 저장하고 싶을 때에는
Dialogue: 0,0:00:59.29,0:01:03.12,Default,,0000,0000,0000,,더 좋은 방법이 있죠. 바로 '객체'입니다
Dialogue: 0,0:01:03.12,0:01:06.80,Default,,0000,0000,0000,,다섯 가지 변수가 아닌
Dialogue: 0,0:01:06.80,0:01:11.62,Default,,0000,0000,0000,,모든 정보를 담고있는 하나의 단일 변수를 만들 수 있어요
Dialogue: 0,0:01:11.62,0:01:15.17,Default,,0000,0000,0000,,윈스턴의 정보를 가지고 만들어봅시다
Dialogue: 0,0:01:15.17,0:01:18.84,Default,,0000,0000,0000,,먼저 변수를 선언하고 윈스톤이라고 부릅시다
Dialogue: 0,0:01:18.84,0:01:23.40,Default,,0000,0000,0000,,먼저, 중괄호와 세미콜론을 입력합니다
Dialogue: 0,0:01:23.40,0:01:27.11,Default,,0000,0000,0000,,객체를 구성했어요
Dialogue: 0,0:01:27.11,0:01:31.05,Default,,0000,0000,0000,,하지만 아직 객체 안에 정보가 아무것도 없죠
Dialogue: 0,0:01:31.91,0:01:35.67,Default,,0000,0000,0000,,정보를 넣으려면 속성을 추가해야 해요
Dialogue: 0,0:01:35.67,0:01:41.28,Default,,0000,0000,0000,,속성은 키와 값입니다\N나이는 age:19처럼요
Dialogue: 0,0:01:41.28,0:01:43.79,Default,,0000,0000,0000,,좋아요. 이번엔 눈 색깔을 주기 위해
Dialogue: 0,0:01:43.79,0:01:48.04,Default,,0000,0000,0000,,콤마를 쓰고 eyes:”black”을 입력합니다
Dialogue: 0,0:01:48.04,0:01:52.74,Default,,0000,0000,0000,,이제 객체 안에 두 개의 속성이 구성되었서요
Dialogue: 0,0:01:52.74,0:01:55.61,Default,,0000,0000,0000,,그리고 likes 소성은 여기 것을 가져다가
Dialogue: 0,0:01:55.61,0:02:00.08,Default,,0000,0000,0000,,여기에 복사할게요
Dialogue: 0,0:02:00.08,0:02:04.00,Default,,0000,0000,0000,,이제 세 가지 속성이 생겼네요
Dialogue: 0,0:02:04.00,0:02:07.53,Default,,0000,0000,0000,,모든 속성은 우측에 값이 표기됩니다
Dialogue: 0,0:02:07.53,0:02:12.80,Default,,0000,0000,0000,,좌측에는 key가 표기됩니다
Dialogue: 0,0:02:12.80,0:02:15.63,Default,,0000,0000,0000,,Key에 대해서는 자바스크립트의 변수 이름과 같은 규칙을 따릅니다
Dialogue: 0,0:02:15.63,0:02:20.10,Default,,0000,0000,0000,,스페이스 없이, 모든 것이 문자로 시작합니다
Dialogue: 0,0:02:20.59,0:02:22.96,Default,,0000,0000,0000,,값에 대해서는 우리가 봐왔던 그런 유형의 값입니다
Dialogue: 0,0:02:22.96,0:02:27.12,Default,,0000,0000,0000,,숫자, 문자열, 배열 등이 필요로 하겠죠
Dialogue: 0,0:02:27.12,0:02:33.37,Default,,0000,0000,0000,,부울 함수도 사용되고요, isCool이 참인지 거짓인지 해볼 수 있겠죠
Dialogue: 0,0:02:34.13,0:02:38.40,Default,,0000,0000,0000,,사실, 값은 또다른 객체가 될 수 있어요
Dialogue: 0,0:02:38.40,0:02:42.71,Default,,0000,0000,0000,,Birthcity와 BirthState는 결국 같은 것에 대한 정보이고
Dialogue: 0,0:02:42.71,0:02:46.62,Default,,0000,0000,0000,,같은 위치에 존재합니다
Dialogue: 0,0:02:46.62,0:02:51.04,Default,,0000,0000,0000,,그래서, 그것들을 하나의 객체로서 저장하는 게 어떨까 생각할 수 있어요
Dialogue: 0,0:02:51.04,0:02:54.84,Default,,0000,0000,0000,,또다른 key인 birthplace를 입력하고 중괄호를 넣어줍니다
Dialogue: 0,0:02:54.84,0:02:58.38,Default,,0000,0000,0000,,그리고 안에 city: "Mountain View" 와
Dialogue: 0,0:02:58.38,0:03:02.29,Default,,0000,0000,0000,,state: "California" 를 입력할게요
Dialogue: 0,0:03:02.29,0:03:06.77,Default,,0000,0000,0000,,이제 여려분은 객체 안에
Dialogue: 0,0:03:06.77,0:03:10.48,Default,,0000,0000,0000,,많은 정보를 저장할 수 있게 되었어요
Dialogue: 0,0:03:11.03,0:03:15.46,Default,,0000,0000,0000,,좋아요, 이제 객체 안에 윈스턴에 관련된 많은 정보를 입력할 수 있으니
Dialogue: 0,0:03:15.46,0:03:18.78,Default,,0000,0000,0000,,기존에 따로 따로 되어있던 변수들을 삭제해봅시다
Dialogue: 0,0:03:18.78,0:03:23.07,Default,,0000,0000,0000,,어라
Dialogue: 0,0:03:23.07,0:03:27.04,Default,,0000,0000,0000,,오류 메세지 창이 떴네요
Dialogue: 0,0:03:27.04,0:03:30.74,Default,,0000,0000,0000,,Text 명령어가 이전 변수를 참조하고 있기때문입니다
Dialogue: 0,0:03:30.74,0:03:34.50,Default,,0000,0000,0000,,객체에 사용된 변수들을 사용하기 위해 재설정 해야 합니다
Dialogue: 0,0:03:34.50,0:03:38.22,Default,,0000,0000,0000,,하나씩 하기 위해서 아래 세 줄을 없애버릴게요
Dialogue: 0,0:03:38.22,0:03:41.87,Default,,0000,0000,0000,,좋아요
Dialogue: 0,0:03:41.87,0:03:46.40,Default,,0000,0000,0000,,이제 WinstonAge인데요
Dialogue: 0,0:03:46.40,0:03:50.29,Default,,0000,0000,0000,,그것을 Winston으로 바꿀게요
Dialogue: 0,0:03:50.29,0:03:53.83,Default,,0000,0000,0000,,만약 이렇게 남겨둔다면, 객체 객체 뿐이지요
Dialogue: 0,0:03:53.83,0:03:57.37,Default,,0000,0000,0000,,이렇게 하면 자바스크립트가 전체 객체를 하나의 문자열\N값으로 변환하려는 것처럼 되는겁니다.
Dialogue: 0,0:03:57.37,0:04:02.11,Default,,0000,0000,0000,,그렇게 하지말고 \N그 객체안의 age만 가져오고 싶은거죠
Dialogue: 0,0:04:02.11,0:04:06.13,Default,,0000,0000,0000,,그래서 우리가 할 일은 점을 찍고,
Dialogue: 0,0:04:06.13,0:04:11.06,Default,,0000,0000,0000,,속성의 key인 age를 쓰는 것입니다
Dialogue: 0,0:04:11.06,0:04:14.90,Default,,0000,0000,0000,,우리는 이것을 "dot notation(점 표기)"라고 부릅니다
Dialogue: 0,0:04:14.90,0:04:18.28,Default,,0000,0000,0000,,우리가 쓰고자 하는 객채명을 쓰고 점을 찍고 그리고 속성키를 씁니다
Dialogue: 0,0:04:18.28,0:04:21.79,Default,,0000,0000,0000,,좀 더 해봅시다
Dialogue: 0,0:04:21.79,0:04:26.24,Default,,0000,0000,0000,,WinstonEyes 대신에 Winston.eyes를 씁니다
Dialogue: 0,0:04:26.24,0:04:29.88,Default,,0000,0000,0000,,이것도
Dialogue: 0,0:04:29.88,0:04:34.07,Default,,0000,0000,0000,,winston.likes 가 되겠지요
Dialogue: 0,0:04:34.07,0:04:37.74,Default,,0000,0000,0000,,Winston.likes[1]이 되고요
Dialogue: 0,0:04:37.74,0:04:42.50,Default,,0000,0000,0000,,그리고 이 마지막 것은 객체 안에 객체가 있어서
Dialogue: 0,0:04:42.50,0:04:45.45,Default,,0000,0000,0000,,조금 더 복잡해보일 수는 있겠네요
Dialogue: 0,0:04:45.45,0:04:48.78,Default,,0000,0000,0000,,이번엔 winston의 birthplace를 바꿔봅시다
Dialogue: 0,0:04:48.78,0:04:53.29,Default,,0000,0000,0000,,.city를 입력해주어야 합니다
Dialogue: 0,0:04:53.29,0:04:57.46,Default,,0000,0000,0000,,자, 여기에도 한번 해볼까요
Dialogue: 0,0:04:57.46,0:05:01.57,Default,,0000,0000,0000,,winston.birthplace.state
Dialogue: 0,0:05:01.57,0:05:05.79,Default,,0000,0000,0000,,이제 여러분이 객체 안에 있는 정보에 접근할 수 있게 되었어요
Dialogue: 0,0:05:05.79,0:05:09.42,Default,,0000,0000,0000,,좋아요
Dialogue: 0,0:05:10.86,0:05:13.92,Default,,0000,0000,0000,,훌륭해요. 여러분이 보신 것처럼
Dialogue: 0,0:05:13.92,0:05:17.60,Default,,0000,0000,0000,,객체는 어떤 객체에 대한 관련된 정보들을 저장하는 좋은 방법입니다
Dialogue: 0,0:05:17.60,0:05:21.41,Default,,0000,0000,0000,,나중에 만들어 놓은 객체에 접근할 수도 있지요
Dialogue: 0,0:05:21.41,0:05:25.41,Default,,0000,0000,0000,,계속 연습해보면, 객체가 얼마나 유용한지 알게 될거에요