DAVID J. 마란 : 좋아, 그래서 이곳에 묘 암입니다 밴드, 몇 그 중 우리 CS50 최종 프로젝트에 있습니다. 그리고 우리가 대기 데모였다 미리 위치를 본질적으로 당신까지 이 꽤 단단한 팔은 여기 밴드 당신의 근육의 움직임을 청취 다음 소프트웨어에 매핑되는 여기 콜튼의 노트북에있는 했다 iTunes 및 그 노래는 이미 대기. 오히려 날이를 시연하고보다 콜튼은 실험실에서있었습니다 분명히 모든 주 데모를 점점 한 용감한 자원 봉사에 대 한 준비. 누군가가 와서하고 싶은 경우 전혀 우리가 먼저 손을 보았다. 올라 와요. [00:01:09] 좋아. 그리고 당신의 이름은 무엇입니까? 

[00:01:13] 청중 : 어, 마리아. 

[00:01:14] DAVID J. 마란 : 마리아, 당신을 볼 좋은. 여기에 오세요. 내가 콜튼을 소개하겠습니다. 콜튼이 마리아입니다. 

[00:01:21] 콜튼 : 안녕하세요, 만나서 반갑습니다. 

[00:01:23] DAVID J. 마란 : 모든 바로, 우리가있어, 한 단계 가는 당신은 넣어 가지고하는 당신의 팔에에이 꽤 있다고 그렇게 팔꿈치 근처까지 꽉. 그리고 한편의가하자 우리의 구글 글래스에 넣어 우리는 오늘 기술을 혼합합니다. 

[00:01:33] 콜튼 : 처음에 우리는에있을 것이다 일에이 후크. 

[00:01:36] DAVID J. 마란 : OK. 사실,의​​가로 팔을 넣어 보자 가능한 한이 케이블에 가까운 그래서 우리는 먼저 그것을 동기화 할 수있다. 

[00:01:41] 콜튼은 :이 해 보자. 

[00:01:42] DAVID J. 마란 : 그리고 그 사이에, 그래서 모두가 가까이 눈을 얻을 수 있습니다, 우리는 앤드류의 카메라를 던져 것 이 화면에. 그래서 우리의 USB 케이블이 마리아의 완장에 연결된다. 그리고 나를 콜튼의 화면을 던져 보자 다음 프로젝터의 최대. 

[00:02:00] 그래서 콜튼 장치를 등록하고 묘는이 케이블에 연결되어 지금과 같이. 그리고 지금 무엇 마리아의 순간적으로 할 것 실제로 통해 도보 교정 단계 소프트웨어를 가르쳐 어떻게 그녀의 근육 응답 그녀가 할 때 특정 미리 정의 된 소프트웨어가 이해하는 몸짓. 당신이에 가고 싶다면 스크린 앞. 확인을 계속 시도. 

[00:02:30] 콜튼은이 같은 이동합니다. 그리고 그 같은. 그리고 오른쪽에있는 모든 방법. 다시 이동합니다. 

[00:02:35] DAVID J. 마란 : OK. 다른 관점. 그것은 당신이 아니다. 그것은 우리를합니다. 

[00:02:40] 마리아 : OK. DAVID J. 마란 : 호 의 높은 최대가 그래서 이동하자 팔꿈치에 가까운, 또는 단단한. 좋아. 

[00:02:52] 여기에 우리가 간다. 이 CS52X을위한 좋은 시간이 될 것입니다. 우리가 이동합니다. 

[00:02:57] 아주 좋은. 확인을 클릭합니다. 엄지 손가락은 새끼합니다. 

[00:03:02] 아주 좋은. 손가락을 확산. 좋은. 바로 웨이브. 그것은 호기심 보이고 왼쪽 손안에하면 

[00:03:17] 콜튼 : 그래, 그 이상한입니다. DAVID J. 마란 님의 웨이브 오른쪽 앞으로 이동합니다. 빨리 감기는 건너 뛰거나 옆. 즉 OK 웨이브 권리입니다. 

[00:03:25] 마리아 : 나는 대기가 아니요. 

[00:03:26] DAVID J. 마란 : 일부 도움이 필요하십니까? 

[00:03:28] 콜튼 : 그래서 당신은 다음과 같이 될 것입니다. 마리아 : 그것은 돌고 다른 것은, 비록. 콜튼 : 그것은이다. DAVID J. 마란 : 그래, 나도 몰라 왜 당신에게 leftie을 보여주는 것. 콜튼 : 왜 try--하지 않습니다 다만이 같은 것보십시오. 

[00:03:38] DAVID J. 마란 : 아니? 어쩌면 당신의 팔에 도달 좀 똑바로 밖으로 이 같은 더 급격한합니다. 그래, 그래, 좋아. 

[00:03:48] 마리아 : 미안 해요. DAVID J. 마란 : 그것은 당신의 잘못이 아니다. 콜튼 : 괜 찮 아 요. DAVID J. 마란 : 좋아. 글쎄 ... 

[00:03:56] 마리아 : 우리는이 작업을 건너 뛸까요? DAVID J. 마란 : 그래,하자 오프 훅을 수 있습니다. 사람을 좋아하면 이렇게 이 절단 날을 사용하여 최종 프로젝트 하드웨어, 실현 그냥 수도 익숙해 조금 걸릴. 그리고 이런것 현실은 이것이다 실제로 매우 가장자리 출혈이다. 

[00:04:10] 이라고 무엇인가 개발자 키트, 어떤 본질적으로 시험판하기위한 것입니다 그래서 사람들은 정확하게 할 수있는 그것으로 싸움이 겁니다, 그림 밖으로 어떻게 사람의 몸이 작동 기술. 당신이 원한다면 이후, 강의 후, 우리는 당신이 오게 할 수 있으며 그것을 다른 자상을. 박수 그러나 그렇지 않으면, 라운드, 경우 우리는 최대에와 주셔서 마리아, 수있다. 

[00:04:26] 마리아 : 감사합니다. 

[00:04:28] DAVID J. 마란 : 감사합니다. 우리는 좀해야하지만, 우리는 줄 것이다 당신 ... 어떻게 여기에 스트레스 볼 어떻습니까? 아, 그리고 ... 그렇다 니 네, 감사합니다. 좋아. 당신이 있었다 호기심 들어, 그래서 소리의 선택에 익숙 우리가 만든 그 이전, 놀라운 TV 보여 당신은 절대적으로해야 과음 관찰 넷플릭스에있을 여기 하나입니다. 

[00:04:51] 스피커 1 : 신사 숙녀 여러분, 조쉬라는 이름의 마술사. 

[00:05:04] DAVID J. 마란 : 그리고 분명히, 그건 일이 지금은 강의 중에 텍스트 날 수 있습니다. 나는 것을 말해주는거야 마리아 어제 생일이 있었다. 에서 그래서 생일 마리아 CS50뿐만 아니라. 

[00:05:18] 그래서 당신은 최근 한 달에 읽고있다 그 여기 여러분, 스티브 실제로이었다 발머, 대학에서 1977 클래스, 최근 마이크로 소프트에서 은퇴했다. 그는 여기에 학부했다 다음 몇 년 후 에서 자신을 발견 스탠포드 비즈니스 스쿨 그는 전화를받을 때 자신의 친구로부터 전화 복도를 살았다 여기 하버드에서 그를에서. 그 친구의 이름은 빌이었다 게이트, 및시, 그는 수 스티브을 모집하려고했다 첫 번째 비즈니스 사람, 정말, 작은 회사에서 마이크로 소프트의 이름을 지정합니다. 

[00:05:45] 긴 이야기를 짧게, 스티브 궁극적으로 이상 수상했다, 때 마이크로 소프트에 합류 30 명의 직원이 있었다. 그리고 시간에 의해 그 아주 최근에 은퇴, 이 회사는 10 명의 직원이 있었다 지난 몇 년 동안. 그리고 웹 사이트는 직전으로 알려져 비디오에이 공물을 준비 우리는 우리가 거​​라고 생각했다 당신을 제공하는 공유 얼마나 많은 에너지 스티브의 의미 그가 제공하는 프리젠 테이션을 제공합니다. [동영상 재생] - 마이크로 소프트는 네 번째 아이처럼. 아이들은 집을 떠나 않습니다. 이 경우, 같아요 나는 집을 떠날거야. 빌 이봐, whazzap? 

[00:06:23] -Wazzap? 

[00:06:24] - 이봐, wazzap? 우리가 맡았어요 엄청난 기회를 제공합니다. 빌은 우리에게 그 기회를주었습니다. 그 빌 감사드립니다. 난 당신이 너무하고 싶다. 혁신의 속도 느리게 않을 것입니다. 

[00:06:42] 그것은 더 빠르게 얻을 것입니다. 약간의 경쟁이있을 수 있습니다 그 불행하게도 제거! 

[00:06:54] 나는이 회사를 사랑 해요. 예! 나는 PC이다, 나는이 회사를 사랑 해요! 

[00:07:08] 개발자, 개발자, 개발자, 개발자, 개발자, 개발자, 개발자, 개발자. 예! 웹 개발자! 

[00:07:19] 웹 개발자! 웹 개발자! 들어 다른 무엇 추가 비용없이 얻을! 

[00:07:28] MS-DOS 임원, 약속 달력, 카드 파일, 노트 패드, 시계, 제어판. 그리고, 당신은 그것을 믿을 수 있습니까? Reversie! 

[00:07:35] CD로 구울! MSN에 게시! 당신은 친구들에게 메일을! 

[00:07:40] 한 번의 클릭으로 모든! 하나는 마이크로 소프트, 하나의 전략, 하나 team-- 훈련, 전문, 집중, 우리가하는 모든 일에 전문가. 저 오래된 영화에서 선을 사용하자. 

[00:07:52] 관계는 상어처럼. 그들은 앞으로 이동하거나 죽어. 실제로 기술을 생각한다 기업은 동일하다. 

[00:08:01] [END 동영상 재생] DAVID J. 마란 : 그래서 우리는 너무 기쁘게 생각합니다 스티브는 우리에 합류 할 것이라고 발표 여기 CS50의에서 다음 주 수요일 보통의 장소와 시간을 여기. 공간 가능성이 제한됩니다. 그리고, 사람이 우리를하시기 바랍니다 가입 잠시 후 오늘 머리 또는 cs50.harvard.edu/register합니다. 

[00:08:22] 우리는에 의해 따를 것 화요일 지점을 확인. 그 다음에 기대 CS50의 강의 동안 수요일. 이제, 다른 뉴스에서, 나는 일어난 크림슨이 건너 단지 다른 날. 

[00:08:34] 이 CS50의 직원 중 하나 밝혀 그리고 CS50의 학생 중 적어도 하나 현재 UC에 대한 실행 대통령과 부통령, 어느 날 다시 가져 내 자신의 일에 다시 때 비참 UC 선거를 잃었다. 그러나 실버 라이닝 점에서 나는 항상 이야기가 있다는 것입니다 이야기 I 중 하나는 확실 해요 여러 가지 이유가 내가 잃어버린 선거는 완전한 부족했다 대중 연설에 대한 재능. 그리고 솔직히, 그것을 저를 몰고, 그 경험 내 학년이, 실제로 서명을 생각한다 하버드 컴퓨터 학회, 최대있는 그룹은 캠퍼스입니다 다양한 기술 회담을 보유 다른 것들. 그리고 나는 그들의 가르침을 인수했다 세미나 때문에 , 기회를 가졌다 좋은 기회, 정확히이 작업을 시작합니다. 뿐만 아니라, 나는 기회를 가졌다 이 경험을하는 동안 자신을 더욱 HTML을 가르 칠 수 있습니다. 그래서 나는 지난 밤 미루 HTML 기반의 웹 사이트를 통해보고 나는를 들어, 1997 년과 같은 98을에서 만든 내 여기에 다음과 같습니다 캠페인. 나는 알고있다. 

[00:09:29] 왜냐면 물론, 통지 1998 년에이 놀라운 디자인 결정 또는 이것 저것. 당신이 원하는 첫번째 것은 사용자 당신의 웹 사이트를 방문에해야 할 일 다른 링크를 바로 클릭해야하는 것입니다 스님과 함께 여기에 귀하의 웹 사이트를 입력 뒤에 곳 가려져 커튼처럼 분명히 캠페인 플랫폼이었다. 그리고 이것은 당신이 얻을 것이다 모든 것 오늘은 스크린 샷입니다. 하지만, 같은 통해 읽고 있었다 캠페인 포스터 지난 밤에 내 플랫폼입니다. 

[00:09:50] 그리고 당시 화가였다. 흥미 었는데 내 플랫폼입니다. 그래서 그 이후로 진정했다. 그러나 언젠가, 내가 다시 실행하고 이 시간 떨어져 잘하면 더 나은. 

[00:10:03] 그래서 HTML, 내가 만든있는 해당 언어 당신은 말야 ... 그것은 곧 많은 안해 ... 만들어 줄게 우리가 봤는데 뭔가 후반의 이야기 크게 위해 지금 부여 복용 것을 우리는 다른 언어로 이동했습니다. 그러나 그냥 잠시 일시 정지하자 상황에서 이러한 일들의 일부를 넣어. 그래서 문장에서, HTML은 무엇입니까? 

[00:10:18] 또는 무엇을 사용합니까? 누구? 예. 

[00:10:20] 청중 : 웹 사이트에 대한 마크 업. DAVID J. 마란 : 웹 사이트에 대한 마크 업. 그래서 마크 업 언어이다 그 사용자가 웹 페이지를 구성 할 수 있습니다. 헤더는 여기 간다, 제목 간다, 몸은 여기에 표시됩니다. 이것은이가, 볼드체로 세부의 종류를 italics--. 

[00:10:33] 좋아, 좋아. 그래서 CSS는 당신 ... 나는를 할 수 있습니다 몇 가지 자유를했다 굵은 직면하고 이탤릭체 때문에와 그 더 나은이 구현입니다. CSS는 어떤 친구는 ...? 문장으로 말한다. 누구든지 전혀. 그래. 

[00:10:46] 청중 : 꾸밈음과 그것을 디자인하는 방법 같은 것들. DAVID J. 마란 : OK, 좋은. 당신을 허용 꾸밈음 를 설계하거나 스타일 화하기 굵은와 같은 것들과 이탤릭체 및 색상과도 더 잘 요소의 세분화 된 위치. 그것은 일종의 당신이 일을 할 수 있습니다 라스트 마일 (last mile) 예를 들어, 그 그렇다면, Pset7, 당신은에 눈치 챘을 수도있는 포트폴리오 페이지를이 시점에 있다면 이미 기본 테이블이 당신 사용자의 주식 보유를 표시 할 수 있도록 현금은 아마 꽤 끔찍한 보인다 공백이 없습니다 기본적으로. 벼락치기의 모든 종류의 함께 행과 열의. 

[00:11:18] 음,의 비트와 함께 CSS, 당신이 생각하는 수 있으므로, 당신은 실제로 그것을 꼬집고 그것을 만들 수 있습니다 훨씬 더 친숙하고 많은 것을 예쁘게 볼 수 있습니다. 그래서 CSS는에 관하여이다 웹 사이트의 양식입니다. 그러나 우리는 또 다른 소개 우리가 무엇을 할 수 있습니다 언어, PHP,? 

[00:11:36] 그냥 무엇을하자? 사람. 이상 벤처있어 처음 몇 행. 그래. 

[00:11:40] 청중 : 동적 콘텐츠를 생성합니다. DAVID J. 마란 : 완벽한. 동적 콘텐츠를 생성합니다. 그리고 당신은이 작업을 수행 할 수 있습니다 언어의 수. 우리는 때문에 PHP를 사용하는 일이 C 문법에 아주 유사한 부분. 

[00:11:50] 하지만 PHP는 바로이를위한 기능을 제공합니다. 그것은 당신이 동적으로 출력을 생성 할 수 있습니다. 그리고 그 출력의 일부가 될 수있다 HTML, 우리는 일반적으로 해왔있다. 이 때문에 그리고 그것은 또한이다 프로그래밍 언어이며, 메커니즘 어떤 통해 우리는 데이터베이스로 이야기 할 수 있습니다. 

[00:12:03] 그리고 우리는 쿼리를 만들 수 있습니다 Yahoos 같은 다른 서버 프로그래밍 방식으로 작업을 수행 정말 그렇지 않으면 수도 할 수있는 컴퓨터를 강요 할. 그래서 PHP는 우리가 시작할 수 있습니다 동적으로 내용을 출력한다. 이 논리에 의해 그래서, 나는하지 않았다 1998에서 동적 웹 사이트. 

[00:12:16] 그냥 정적 웹 페이지입니다. 내 콘텐츠에 의해 변경되어야했다 수동으로의 gedit 또는 일부 동등한. 하지만 PHP는 우리가 사용 또는 무엇인가 사용할 수도, 오히려, 같은 뭔가 신입생 인스턴트 웹 사이트, 어떤 등록을하기로하고, users-- 것들의 목록을 관리하는 실제로 이상 변화 우리는 일이 있더라도 시간, 펄, 다른를 사용하는 당시 언어. 

[00:12:35] 그리고 마지막으로, 우리는 도입 SQL-- 쿼리 언어를 구조화. 그래서 또 다른 언어 그는 무엇을 위해 사용되는? 무엇에 사용? 우리는 slight-- 모험을 할 수 OK, 우리는하지 않을거야 훨씬 더 얻을 수 여기에 오케스트라보다. 청중 : 그것은 프로토콜이다 데이터베이스에 이야기하는 데 사용됩니다. DAVID J. 마란 : 프로토콜 데이터베이스에 이야기하는 데 사용됩니다. 저를 조정할 수 있습니다. 이는 사용 된 자연 언어 야 databases-- 선택에 얘기 및 삽입과 삭제 업데이트 실제로 더 많은 기능이 우리는 심지어 다이빙하지 않은 로하지만, 당신은 explore-- 할 수 있습니다 말하자면, 대한 최종 프로젝트를 탐험. 그래서 이러한 여러 가지가있다. 

[00:13:09] 그리고 희망 Pset7, 비록 그 사양은 꽤 긴 당신을 걸을 의도적으로 길어 어떻게 이러한 일들이 모든 수를 통해 함께 입력 할 수. 이제 월요일 우리에 우리의 마지막 언어를 도입 우리는 공식적으로 소개하고 있다고 자바 스크립트입니다 course--. 이것은, PHP와 같은 인 해석 언어. 

[00:13:25] 그러나 키가되는 차이 월요일에 제안 PHP 반면 실행 또는 점이다 서버에서 해석되고있는 이 경우 CS50 어플라이언스는, 또는 일부 상용 웹 수 있습니다 인터넷에서 서버, 자바 스크립트를 일반적으로 클라이언트 측에서 실행되는 언어입니다 브라우저에서하지 서버 side-- 그래서. 어느 그냥 내가 열 때처럼 말을하는 것입니다 페이스 북의 소스 코드까지 모두 발견 그 js의 파일로, 암시했다 당신은 페이스 북이나 방문 때 가장 웹 사이트 요즘, 당신은 얻을 뿐만 아니라 HTML뿐만 아니라 CSS, 하지만 자바 스크립트의 전체 무리 자주의 .js 파일의 형태로 코드. 그리고, 그것은 browser-- 자신의 그 코드를 실행 Mac 또는 PC--. 

[00:14:03] 그러나 브라우저가이를 실행합니다. 당신은 샌드 박스의 종류에 생각할 수 있습니다. 자바 스크립트 코드가 가지 않도록 컴퓨터에있는 파일을 삭제할 수. 그것은 할 수 없어야 사용자를 대신하여 메일을 보낼 수 있습니다. 를 제한의 브라우저 종류 당신은 무엇을 할 수 있습니다. 

[00:14:17] 그래서 그런 의미에서, 그것은 약간의 덜 강력한, 아마도보다 C. 그러나 자바 스크립트를 할 수있는 등 별도로, 서버에서 사용될, 우리는 이야기하지 않는 경향이 있습니다하지만 그 맥락에서 약. 그래서 지금의이 함께 이들을 묶어 보자. 주 플러스 전, 우리는 약간의 HTML을 발표 left-- 슈퍼 지루한 웹 페이지에. 

[00:14:34] 그냥 인사 세계는 말한다. 그리고 난에 제안 바로 우리는 종류의 아이디어를 훔칠 수 우리의 논의에서 C의 데이터 구조 방법이 계층에 대해 생각 왼쪽에있는 마크 업 언어 그린 또는 메모리에서 구현 될 수있다 노드 실제 트리 구조로서 포인터와 세부 사항의 그 종류. 오른쪽에, 우리는 전화 DOM-- 문서 그 이는 단지입니다 Model-- 객체 나무를 말하는 멋진 방법입니다. 

[00:14:56] 지금, 왜이 유용하다 이 방법으로 생각? 지금에 있기 때문에 자바 스크립트, 우리가 가지고 있기 때문에 이 놀이에 도착 코드 환경의 실제 HTML 브라우저로 전송되어 이미 이미있다 에 의해 메모리에로드 된 컴퓨터의에서 나무에 브라우저 이 같은 RAM, 우리는 자바 스크립트를 사용할 수 있습니다 실제로에 통과, 산책, 검색 또는 DOM 트리 그러나 우리가 원하는 것을 변경합니다. 그래서 사실, 당신이 생각하는 경우 대한 facebook.com, 당신이 채팅 기능을 사용할 경우, 경우 Gmail을 사용하고 gchat 기능, 당신이 아무것도 또 다시 오는 메시지 다시, 그 메시지는 아마 같은, LI 태그, 목록 항목 태그, 아마. 

[00:15:35] 아니면 그들은 그저 계속 표시 div의 때마다 당신은 인스턴트 메시지가 표시됩니다. 그리고 그것은 단지 무엇을 의미 페이스 북이나 구글은하고있다 언제든지 당신을 얻을 수있다 서버에서 메시지, 그들은 아마 자바 스크립트를 사용하는 또 다른 노드를 추가하는 이이 또 다른 노드를 tree-- 육안으로 만 보이는 나무 화면에 텍스트의 새로운 라인 등을들 수있다. 그러나 그들은 삽입하고 데이터 구조로. 

[00:15:57] 같은 클래스에 따라서 CS124과 다른 사람, 당신은거야 사실에 대한 더 많은 코드를 작성 이 같은 데이터 구조. 하지만 지금은 자바 스크립트에 대한, 우리는 가정합니다 우리는이 모든 기능을 얻을 언어 자체에서 무료로. 그럼 예를 살펴 보자. 

[00:16:09] 나를 form.html라는 파일을 열어 보자. 그것은 매우 간단합니다. 그냥 다음과 같습니다. 

[00:16:15] 어떤 CSS하지, 미학에 대한 생각없이. 그것은 순수하게 기능이다 분명히 난 이메일을 요청, 암호, 다시 암호 다음 수표 일부 이용 약관에 동의합니다. 이것이 소스 코드 아마 뭔가처럼 보인다 당신은으로 짐작 지금 생각 좀. 여기 폼 태그를 가지고있다. 

[00:16:32] 액션은 분명히에 가고 register.php라는 파일로 이동합니다. 내가 사용하는거야 방법을 얻을 수있다. 그리고 나서 텍스트를 가지고 이름이 이메일입니다 필드. 

[00:16:40] 나는 암호 필드있어 암호는 누구의 이름입니다. 나는 다른있어 이름이 암호 필드 다소 임의로 확인이다. 그것은 또 다른 HTTP 매개 변수입니다. 

[00:16:49] 그리고 우리는 우리를 제외하고 이러한 사용하지했습니다 신입생 IMS는 class--에서 데모 이후 있는 체크 박스 단지 유형 검사와 동일합니다. 그리고 그 계약을 전화 할게. 그래서 나는했습니다 종류의 임의하지만 편리이 필드를 지명했다​​. 이 양식을 얻을 지금 때 그래서 제출의가 어떻게되는지 보자. 내가 malan@harvard.edu을 할 경우, 나는 진홍색의 암호를 할 수 있습니다. 나는 아무것도의 암호를 할 수 있습니다. 의 협력하지 말자. 

[00:17:10] 그리고 상자를 확인하지 않습니다. 나 등록을 클릭하자. 그리고 그것은 흠, 당신은 등록하고, 말한다. 정말. 

[00:17:16] 그러나 URL이 변경되었습니다. 그래서이 양식은 명확하게 허용되었다 register.php에 제출하는 방법. 그러나 아마도, 내가해야 이러한 오류 중 일부를 잡기. 이제, Pset7 및 일부 우리의 강의 예제, 우리는 일반적으로 인쇄 할 것 여기에 큰 빨간색 오류 메시지 말 이름 누락, 또는 암호가 없습니다. 우리는과하기 전에 우리가했다고 했어 완료 서버 측 에러 검출. 

[00:17:37] 그러나 많은 웹 사이트 요즘 클라이언트 측에서 에러 검출을 수행 여기서 URL은 변경되지 않습니다. 전체 페이지가 새로 고쳐지지 않습니다. 당신은 즉시 피드백을 얻을 브라우저에서. 아마 뭔가 붉은 간다. 

[00:17:48] 어쩌면 당신은 팝 업을 얻는다. 하지만 당신은에 보내는 시간을 낭비하지 말라 불완전 서버 데이터. 그래서 우리가 어떻게 수도 보자 뿐만 아니라 그 기능을 달성한다. 

[00:17:56] 나를 form1.html 가자 이는 같은 보인다. 하지만 이번에 내가 할 경우 malan@harvard.edu 나는 진홍색을 입력 나는 더 협조하지 않습니다 하지만 등록을 클릭, 지금 알 수 있습니다. 그것은 가장 매력적인 솔루션이 아니다. 나는 적어도이 오류를 발견했습니다. 그리고 경고를 사용했습니다 JavaScript--의 기능 하는 우리는 수업 시간에 사용하고 있습니다. 일반적으로, 당신이 사용하지 말아야 매우 신속하게 얻을 수 있기 때문에 제어. 그러나 일치하지 않는 암호는 오류입니다. 

[00:18:19] 내가 가서 확인을 클릭하자. 그러나 여기서 중요한 테이크 아웃 URL이 변경되지 않은 것입니다. 그래서 방해하지했습니다 낭비 서버의 시간을 요구 내가 가질 수있는 질문 자신에 대한 답을 알아. 

[00:18:30] 그리고 사용자, 비록 이것에 대해 얘기 사용자의 이상 이것에 대해 생각하는 것, 즉각적인 피드백을해야 할 것입니다. 더 대기 시간이 없다 네트워크 연결. 그럼이 소스 코드를 살펴 보자. 

[00:18:40] Form1.html 외모 여기에 구조적으로 유사한. 형태는 사실상 동일하다. 그러나의 내가 여기까지 무슨 짓을했는지 보자. 그리고이 작업을 수행하는 여러 가지 방법이있다. 그리고 가장 직선을했습니다 아직 가장 우아한 방법을 추종자가 아니라. 나는 스크립트 태그를 가지고있다. 그때 전화 에서 document.getElementById ( '등록'). 그리고 그 값을 저장 형태, 변수입니다. 

[00:19:04] 그래서 무슨 짓을 한거야? 당신은 생각할 수 document.getElementById를 인 것으로 특수 기능이 자바 스크립트는 당신을 제공합니다 말 그대로 손이 노드 중 하나에 대한 포인터 이 나무 또는 사각형. 그래서 지금은 무엇을 우리의 양식 변수입니다 자바 스크립트에 실제로 가리키는. 

[00:19:21] 그래서 지금 구문은 다른 C. 그러나 우리는 여기에 몇 가지 일을하고 있습니다. 하나는,이 조금 이상하다 C.에 비해 확실히 찾고 그러나 35 행을 확인합니다. 왼쪽 form.onsubmit에 따라서. 그 onsubmit가 리콜 구조체의 필드처럼. 폼 변수를 생각한다면 단지 C 구조체되고있다, 그것은 일부 필드가있을 수 있습니다. 

[00:19:42] 그 시절에, 우리는 학생들의 이름을했다, 아이디, 주택, 필드 그런 종류의. 그냥 다른 필드로 onsubmit 생각합니다. 그러나 때문에 특별한 필드의 브라우저가 기대하는 사전 프로그램 .onsubmit는 값되지 않았을 수 숫자 나 문자열과 같은, 하지만 실제로 기능 할 수 또는 함수의 주소 컴퓨터 메모리. 

[00:20:02] 그리고 사실, 그게 무슨이다 이 키워드는 여기에 않습니다. 이것은 나에게 새로운 기능을 제공 말한다. 그러나 그것의 이름은 무엇입니까 분명히 될 것? 

[00:20:09] 월요일에 다시 생각. 이것의 이름은 무엇입니까 이 구문에 따라 기능? 아니, 내 말은, 분명히있다 어떤 이름은 확실히 associated-- 없습니다 아니 내가 여기서 강조했는지에. 

[00:20:21] 그러나 사실 확인을합니다. 이 익명 함수, 또는 를 호출 할 수있는 몇 가지로 람다 함수. 그리고 그건 그냥 의미 여전히 기능입니다. 그것은 당신이 이름을 호출 할 수 없습니다, 그냥. 하지만 괜찮아요. 다시하기 때문에, 브라우저는왔다 구글과 같은 회사에 의해 미리 프로그램 Microsoft 또는 Mozilla 또는 다른 사람에게 또는 단지 알고 .onsubmit 필드 경우 폼 요소를 가지고 안쪽 값은 function--로 처리 함수 포인터, 만약 당신이 것입니다. 폼이 제출 될 때 그리고 전화. 

[00:20:46] 그래서 코드가 실행되어야한다 때 폼이 제출? 분명히, 모든 중괄호의 내부. 그리고 이것은 단지 문체입니다. 

[00:20:53] 당신은 같은이 작업을 수행 할 수 우리는 CS50에서하는 경향이있다. 그러나 자바 스크립트에서, 대부분의 사람들 동일한 행에 유지하는 경향 그냥 더 명확하게 때문에 키워드 기능과 연관. 그래서 지금 무엇을 나는하고 있는가? 

[00:21:03] form.email.value은 등호 동일한 경우 빈 문자열 또는 아무것도, 여기 내가 무슨 말을하려고 해요 경고, 당신은, 당신의 이메일 주소를 제공해야합니다 다음 false를 돌려줍니다. 그리고 그 반환 거짓이다 그 제출되는 양식을 방지 할 수 있습니다. 한편, 암호 값이면 빈, 나는 사용자 소리 치지거야 당신이 암호를 제공해야합니다,라고. 

[00:21:21] 한편 일들이 점점 여기에 약간의 애호가. form.password.value하지 않는 경우 동일 form.confirmation.value, 다른 필드에 소리 사용자는 해당 암호 그들은으로 일치하지 않습니다 좀 전에하지 않았다. 그리고이 하나의 조금 섹시 나는 때문에 나는 개념적으로 알고 알고 검사는 체크 박스의 이름입니다. 

[00:21:40] 그래서 난 그냥 느낌표를 사용할 수 있습니다 검사가 아닌 경우 포인트는 대답 checked--는 부울이다 true 또는 false-- 값, 나는 그 이유에 대한 사용자 소리 치지 것이다. 그렇지 않으면, 우리는 통과하는 경우 이러한 조건이 모두, 그냥 true를 돌려 보자. 양식을 제출하자. 그리고이 후 발생합니다. 

[00:21:56] 진홍색을 입력하자. 의 박스를 확인하자, 회원 가입을 클릭합니다. 지금은 목적지로 통과. 지금, 거기에 어떤 데이터베이스가 없습니다. 흥미있는 것은 아무 것도 없다 register.php에서. 난 그냥 뭔가가 필요 실제로 이야기합니다. 그래서 내가 여기에 일시 중지 할 수 있습니다. 우리가 무슨 짓을했는지에 대한 질문 또는이 새로운 구문의 일부는 무엇인가? 그래, OK? 

[00:22:17] 청중 : 그래서 어떤 체크 박스 자동 부울입니다. 당신은 그런 식으로 선언 할 필요가 없습니다. 

[00:22:21] DAVID J. 마란 : 수정합니다. 에서 발송 상관 없음 확인란 자바 스크립트 코드로 HTML 양식 로, 예, 처리됩니다 부울 true 또는 false value--. 그것은 좋은 질문입니다. 다른 값 반면,의 물론, 텍스트, AKA 문자열왔다. 

[00:22:36] 좋아, 그렇게하겠습니다 조금 더 뒤로. 이것의 요점은 무엇입니까? 그냥 명확합니다. 마찬가지로, 우리는 이미도 Pset7에서, 알고 심지어 지난 주 강의에서 우리가 분명히 확인할 수 예, 사용자가 우리에게 줄 경우 $ _GET $ _POST 참조 빈 값. PHP에서 빈 함수를 기억하십시오. 

[00:22:54] 그러니 무엇을, 명확하게 우리는 또한 이유 중 하나 이 오류 검사를 수행 할 브라우저의 내부? 여기 동기는 무엇입니까? 그래. 

[00:23:06] 청중 : 빠른, 당신은하지 않습니다 서버에 쓸모없는 데이터를 전송합니다. DAVID J. 마란 : 좋은. 이 빠릅니다. 당신은 쓸모없는 전송하지 않습니다 서버에 데이터. 

[00:23:12] 그래서 더 돌아 가야 즉각적인 응답. 그리고 전반적으로, 사용자 경험이 더 낫다. 대안에 대해 생각합니다. 

[00:23:17] Gmail-- 및 경우 몇 년 전 경우. 새 이메일을 자신의 Gmail 리라 곤 생각 계정하지만 유일한 방법 관통 즉 같은,이다 보려면, 전체 페이지를 다시로드하십시오. 또는 당신은 클릭있는 것으로한다 링크는 이메일을 읽을 수 있습니다. 

[00:23:29] 모든 그래서 다시로드해야 당신은 이메일을 볼 수있다. 또는 당신은 채팅 메시지가 Facebook--. 당신이 다시로드 될 때까지 당신은 그것을 볼 수 없어 페이지 또는 일부 링크를 클릭합니다. 

[00:23:36] 마찬가지로,이 지독하게 될 것입니다 성가신 사용자 경험을 제공합니다. 그리고 이것은,이 같은 무엇입니다 명확하게, 다시 나는 UC에 출마 할 때 그리고 웹은 훨씬 동적이었다 대중화로 자바 스크립트는 아니었다 로 지금이다. 그리고 일이 많이지고있다 보다 역동적이고 훨씬 더 그런 의미에서 클라이언트 측. 

[00:23:49] 그러나이 함정은 여기, 그리고 이 성가신 잡았다 가지입니다. 그냥 당신이 클라이언트 측을 추가하기 때문에 이 같은 검출은 의미하지 않는다 당신은 또는 포기해야 할 수 있습니다 서버 측 감지. 당신은 기본적으로 당신을 데려 가고 싶다는 두 곳 모두에서 오류 검사. 하나 무엇 때문에 배운 교훈 기사에서 좀 발췌를 읽고 이 바보 CMS의 외 시스템과에서 이었다 콘​​텐츠 관리 외 시스템 그 인증 시스템을 구현 어떤 메커니즘을 통해 자사의 로그인? 자바 스크립트. 

[00:24:20] 청중 : 자바 스크립트. DAVID J. 마란 : 자바 스크립트, 정확하게, 맞죠? 그것은 자바 스크립트를 사용했다. 문자 그대로, 너희들이 아마 조금 연주 크롬의 경위와. 나는 그것을 찾을 수 있다면, 요소를 검사합니다. 

[00:24:30] 내가 할 이상 가자 크롬의 모든 옵션. 그리고 그것이 얼마나 쉽게 브라우저에서 자바 스크립트를 비활성화합니다. 더 이상 자바 스크립트를 확인합니다. 

[00:24:38] 그래서 공정성에, 많은 요즘 웹의 해서 휴식 것입니다 Gmail 및 다른 sites-- 가정 Facebook-- 자바 스크립트를 사용할 수 있습니다. 하지만 당신은 바보 같은 일을하는 경우 같은 사용자 만 입력의 유효성을 검사 그리고 그것을 확인 클라이언트 측에서 에러, 공격자는 쉽게 할 수 있습니다. 그리고 심지어 스마트 너희들 같은 상대 지금 텔넷이나 컬을 사용할 수 있습니다 아니면 그냥 명령 줄 명령 실제로 서버에 메시지를 보내 그와 유사하게 확인하지 않은 오류. 

[00:25:05] 그래서이의 더 사용자 인터페이스 결정 이 기술 실제보다 improvement-- 구현 이 같은 클라이언트 쪽. 그래서 지금 빠른 눈,하지만 나는 온라인 도보로 연기하기 이 하나를 통해. 양식이, 우리는 실제로 겪었 및 코드를 조금 정리. 그러나 나 하나 연기하자 동영상의 우리는 가능성이거야 당신을 보여줍니다 Pset8에 포함 라는 라이브러리를 사용하여 유사한 구문 슈퍼, 슈퍼입니다 jQuery를, 자바 스크립트에서 인기있는 라이브러리 그 솔직히 대부분의 사람들 다만 요즘 사용 심지어 같은 혼란 자바 스크립트가 자체. 

[00:25:37] 그리고 그것은 포함하는 경향이있다 일부 달러 기호 및 문서와 같은 키워드 여기에 괄호. 그러나 다시, 나에게 연기하자 온라인 약간 느린 자습서 보다는 단지 구문에 묶여 얻을. 의는로 이동하자 작은 쿨러 무엇인가 이러한 응용 프로그램의 측면에서. 

[00:25:50] 특히 그래서, 내가 가자 앞으로 여기에이를 엽니 다. 어서. 우리가 이동합니다. 

[00:25:59] 내가 여기이 사진을 열어 보자. 불필요하게 복잡한 찾고 있지만, 이라는 기술을 설명 AJAX-- 비동기 자바 스크립트와 XML, XML에 대한 X는 실제로 더 이상 정말 사용하지 않습니다. 이 것을 사용하는 경향이있다 다른 JSON을했다. 

[00:26:13] 그러나 여기 방법 뭔가처럼 구글 맵이나 구글 어스 작동합니다. 의 실제로 즉시 해보자. 내가 가서 열어 보자 브라우저 최대 크롬. 

[00:26:21] 그리고, 나에게로 가자 , maps.google.com을 말한다. 실제로, 당신은 늙었 경우 무엇을 기억하기에 충분한, 같은, 맵 퀘스트는 하루에 다시 같았다 어쩌면 그들은 여전히​​ 다음과 같이 작동합니다. 당신은 그 어떤 것도 검색하는 데 사용하는 경우 33 옥스포드 스트리트 (Oxford Street), 캠브리지, 질량, 의 이일 당신을하자 실제로 것, 당신이 경우 최대 팬 싶었다 상하 좌우 당신은 같을 것이다 큰 상단에 화살표를하고, 당신이 다른을 보여 주 시겠어요 여기까지지도의 프레임. 또는 당신은 당신에게 왼쪽을 클릭 것 여기에 가서, 또는 다른 클릭 것 당신은 여기에 갈 것입니다. 하지만 그 대신이 일, 우리 물론 단지 우리가 갈 수 있다는 것을 당연시 캠브리지 주위에 꽤 빨리 그냥 클릭하고 드래그하여. 그러나 일부 결함이있다 확인할 수 있습니다. 

[00:26:59] 내가 충분히 빨리이 작업을 수행 할 경우, 무슨 일이 일어나고있는 것 같다 내가 드래그 너무 빨리 컴퓨터 유지하기 위해? 당신은 무엇을 보는가? 그래. 

[00:27:07] 청중 : 픽셀이 새로 고쳐지지 않습니다. DAVID J. 마란 : 픽셀은 새로 고쳐지지 않습니다. 그러니까 ... 당신을있다 실제로,이를 볼 수 있었다, 당신이 온라인으로 일시 정지보고있는 경우 이 또는 실제로는 느려진다 once-- 당신이 있다는 것을 볼 수 있습니다 타일​​, 정사각형, 또는 직사각형 그 지도에서까지 누락 분할 초 후, 더 많은 데이터, 실제로 더 많은 이미지 화면에 나타납니다. 그리고 사실, 우리는 찾고하여이 작업을 수행 할 경우 이제, Chrome--를 가정 해 봅시다 Chrome's--까지 어디 보자. 우리는 할 수 없습니다. 

[00:27:31] 아차, 오. 의는 maps.google.com을 열어 보자. 다시 한번 창을 더 만들어 보자. 

[00:27:36] 다시 33 옥스포드 스트리트 (Oxford Street)로 이동합니다. 나는 최근에 있던 웹 사이트는 무엇입니까? 나는이 같은 개인 호언 장담을했다 자신은 그때 인스턴트 메시지 거라고 온라인 중이던 친구 누가 그것을 듣고 싶었다. 일부 웹 사이트가있다. 나는 그렇게 Comcast-- 생각 매우 큰 미국 ISP. 당신은 새로운 케이블을 위해, 가입 때 모뎀 서비스 또는 케이블 TV 서비스, 그들은 매우 합리적으로 형태가 여기서 그들이 당신의 주소를 요청합니다. 그리고이 놀라운이 자동 완성이라는 기능, 구글과 같은, 즉 차기 시작 질문에 대한 대답. 

[00:28:04] 문제점은 자동 완성을 수행한다 사용자가 입력하는 최초의 것들에. 그래서 당신은 (33)에 입력을 시작하면, 그것을 모든 집 말 그대로 표시됩니다 미국에서 그 시작 수 (33) 계속하기 전에 당신이 더 많은 입력 할 전망이다. 옥스포드 (33)을 입력한다면, 그것은 당신에게 모든 거리를 보여줍니다 미국에서 33 옥스포드가 그 에 관계없이 도시의 이름, 당신은에 걸. 

[00:28:25] 그리고 당신은 입력을 계속합니다. 그리고 마지막으로, 그들이 그렇지 않은 것을 실현 캠브리지에있는 당신의 가정에 제공하는 서비스 또는 그런 일. 그러나이 점은, 가장이다 자동차의 나귀 구현 이제까지 완료합니다. 

[00:28:34] 그리고 난 그냥 오프거야 이 접선에 다시. 그러나 좋은 방법이 있습니다 자바 스크립트와 나쁜 방법을 사용합니다. 그리고 반드시 최고의 하나 아니다. 

[00:28:40] 그러나이 전에 여기 포인트, 장황한 연설, 도구를 여기로 개방했다 그리고, 개발자 도구를 엽니 다 우리가 전에 권장 한대로, 및 네트워크를 볼 탭 정말 빠른 클릭으로. 그리고 왕창주의 의 요청이 있었 얻을. 내가 끌고 있기 때문에이 모든 일이. 

[00:28:57] 그리고 가장 가능성, 참으로 이러한 행 많이 지금 이미지 슬래시 JPEG입니다 MIME 유형 또는 콘텐츠 형식. 무엇을하고 있는지 크롬 때문이다 내가 클릭하고 드래그 할 때마다 클릭 그리고, 나는 그것이 오, 실현의 드래그입니다 타일​​ 구글에게 물어 갈 필요가 여기의지도, 신속하게 HTTP를 통해 다운로드, 다음 소위 DOM에 추가 메모리 트리에서 웹 브라우저에 표현 사용자 있도록, 나, 업데이트 된 타일을 본다. 그리고이 때문에입니다 AJAX라는 기술. 위로 하루에, 그것은 정말 그 경우였다 당신 경우 화면에 무슨 변경을 원했습니다, 당신이 클릭 할 것, 아래, 왼쪽, 권리. 그리고 새로운 페이지가 열릴 것입니다. 그러나 요즘, 모든 더 동적입니다. 그것은 우리 인간이하는 방법과에서 일어나는 실제로 대화 형 것이라고 희망한다. 그리고 이것을 달성 이라는 기술의 방법 아마도 가장 좋습니다 AJAX, 예제를 통해 설명했다. 첫째, 내가 앞서 가자 그리고 파일을 열어 에 quote.php라고 오늘의 분배 코드. 

[00:29:53] 그리고 나를 symbol-- 으악 해 보자. 나 기호를하자 = GOOG 그냥 주식. 또는 사실의이 해 보자 Pset에 무료로 하나. 입력합니다. 

[00:30:05] 그리고 지금 내가 돌아올 것을 알 수 있습니다. 그래서 이것은 정말 짧은 PHP 파일이 I 단순히 코드를 빌려 썼다 Pset7의 검색 기능에서 이 중괄호를 사용하여 뱉어과 시세 및 콜론 표기법, 분명히, 현재 주식의 가격 당신이 얻을 통해 전달할 회사입니다. 그래서이 다르다 우리가했습니다 무엇의 대부분에서 난 그 통지에서 수행 말 그대로 뱉어 어떻게 자바 스크립트 코드처럼 보인다. 

[00:30:27] 사실, 이것은 JavaScript 객체이다. 사실, 그냥 더 명확하게 JSON-- Notation-- JavaScript 객체 당신이 말하는 단지 멋진 방법입니다 많은 자바 스크립트 데이터를 나타낼 수있다 같은 당신은 PHP에서 할 수 있습니다 키 값 쌍을 사용. 내가 선언하기를 원한다면 이렇게 자바 스크립트의 변수 에은을 위해, Zamyla을 나타냅니다 Zamyla--에 대한 구조체를 instance-- 우리는 그것을 전화 할게 학생이 변수. 그녀 ID는 집이고, 하나 윈스 롭, 그리고 이름은 Zamyla입니다. 

[00:30:53] 그러나 나는 또한 객체의 배열을 가질 수 있습니다. 그래서 내가 실제로하고 싶어하는 경우 포함 된 자바 스크립트의 배열 여러 이러한 객체,이 시간은 직원을 대표하는 나는이 세 가지가있을 수 있습니다 다시 코드의 덩어리 이들에 대해 다시 다시하는 세 전직 직원. 그래서 구문, 꽤 PHP에 both-- 유사합니다. 그러나 이것은 특히 자바 스크립트입니다. 그것은 객체 표기법입니다. 그래서이 유용 무엇인가? 

[00:31:17] 내가 코드를 작성하는 경우 그 뱉어 JSON-- 물건 Notation-- JavaScript 객체 그 이 또는 물건처럼 보이는 , Zamyla의 구조처럼 보인다 사실은이를 사용할 수 있습니다 프로그램에서 나는 쓰기. 나를 ajax0.html 가자. 그리고이 훨씬하지를 너무 ... 미학에 주어진 생각했다. 그러나 어떤 일이 일어 났는지. 

[00:31:34] 내가 가서 여기에 무료로 입력 할 수 있습니다. 견적을 가져 오기를 클릭합니다. 그리고 URL이 변경되지 않은 알 수 있습니다. 하지만 분명히으로 팝업을 얻었다 $ 0.15의 오늘의 페니 주식 가격. 그래서 모든 나쁘지 않다. 그러나 차이점은, 그 여하튼 이 데이터는 직접 나에게 돌아왔다. 그러나 이제 방향으로 조치를 취할 수 있도록 더 익숙한 뭔가. 이 버전에서, 저를 보자 견적을 가져 오기를 클릭, 무료 다시 입력 아 지금은 -이이었다 실제로 jQuery를 버전. 내가하지 않았다는데 ... 이렇게하자 아주 충분히 빨리 감기. 저 버전 두 가지로 가자 이는 내가 원하는 곳입니다. 내가 여기에 무슨 짓을했는지 알 수 있습니다. 나는 웹 슈퍼 page--이 웹 페이지의 간단한 버전 당신은 텍스트 필드와 오늘을 사용할 수 있습니다 여기에 무료로하고 명백하게 단지 텍스트. 

[00:32:14] 이것은 분명히, 여기에 양식을하지 않습니다. 하지만 클릭하면 얻을 인용, 내 웹 페이지를 발견 나는 것처럼 변경에 대한 인 단지 새로운 인스턴트 메시지를 받았습니다 또는 그냥 이동 것처럼 지도와 더 많은 데이터를 얻을 필요 웹 페이지에 동적으로 추가 URL을 변경하고 사용자없이 경험이 중단지고. 사실, 난 아직이야 동일한 휴양지를 ajax2.html. 

[00:32:35] 그래서이 예제 만 살펴 보자 그리고 이런 일이 방법을 참조하십시오. 나를 ajax2.html로 가자. 먼저 양식을 알 수 있습니다. 

[00:32:44] 여기선 내가겠다 자동 완성 끕니다. 때때로 가져 브라우저가있는 경우 성가신 당신을 보여주기 위해 노력하고있다 전체 역사. 그래서 당신은에 의해 HTML에서이 작업을 수행 할 수 있습니다 다만 자동 해제 완료라고. 

[00:32:53] 나는이 텍스트 필드를 준 symbol-- 기호가 아니라, ID. 그리고 지금,이 흥미로운 기능입니다. 우리는 범위에 대해 얘기하지 않은 하지만 당신은 그것에 대해 생각 할 수 있습니다 단락 태그 또는 DIV 태그있다. 그것은라고있는 일이지 인라인 소자, 어느 당신은 단락을받지 않습니다 의미 위하고 아래 휴식. 그냥없이 인라인 머물 것 입력에 해당하는 타격. 그래서 HTML의이 덩어리를 준 고유 식별자를 결정한다 내가 임의로 가격이라는 것을. 그리고 난 제출 버튼을 가지고있다. 

[00:33:21] 지금 이곳에이이기 때문에 실제로 슈퍼 놀라운 방법 작은 코드 당신은 어떻게 쓸 수 있습니다 계속 물건 상대적으로 깔끔한 알 나는 경우 여기에 무슨 짓을했는지 이 페이지의 머리까지 스크롤합니다. 내가 처음에 포함 시켰습니다 내 머리 스크립트 태그 실제로 참조 자바 스크립트는 다른 파일입니다. 이것은 조직 내지 즉, jQuery를 씁니다 이것은 당신에게 최신을주고있다 자신의 jQuery 라이브러리의 버전. 

[00:33:42] 그래서이 날카로운 같은 종류의 것입니다 C에 포함 또는 PHP에 필요합니다. 당신은 스크립트 태그를 사용하여 소스 속성을 가진. 하지만 지금은 내 자신의 코드입니다 여기에 바로 될 것. 

[00:33:52] 내가 함수라는 지수를 확인할 수 있습니다. 그리고 그것은 조금 보인다 언뜻보기에 애매. 그러나 이제이 떨어져 애타게 할 수 있습니다. 나에게 변수라는 URL을 제공합니다. 말 그대로이 문자열을 할당합니다. 그래서, 작은 따옴표, 큰 따옴표 자바 스크립트는 나에게 문자열을 제공합니다. 플러스 기능은 무엇입니까? 연결. 

[00:34:08] 그래서 이제 jQuery를 구문은 이는 익숙해 조금 걸립니다. 그러나 이것은 단지 나에게 DOM 가서 의미 누구의 고유 식별자 상징 노드. 이 의미 해시 태그 고유 식별자 기호. 

[00:34:21] 에 달러 기호 다만 의미 괄호,이 포장 비밀 소스의 jQuery를의 종류 그래서 당신은 추가 기능을 얻을. 그리고 .val는 분명히있다 함수, 또는 우리가 지금 말하는대로, 이 노드의 내부 방법 그것은 단지 당신에게 가치를 제공합니다. 짧은 추하고 혼란에 따라서 이 먼저 눈에 보이는대로, 이것은 방금 입력 한 사용자와 얻을 의미 에서, 문자열의 끝에 넣어 를 연결하여. 그게 다야. 

[00:34:43] 그래서 지금, 마지막 세 줄. 당신은 많은 수 있겠 어 세 개의 라인에서 기능. 등이 달러 기호, 옆 단지 별명 특별한 전역 변수에 대한 jQuery를 그대로라고합니다. 

[00:34:55] 달러 기호는 멋진 보인다. 그래서 jQuery를 커뮤니티 단지 종류 자신의 특수 기호로 사용. 그것은 PHP에서 무엇을 의미하는지 의미하지 않는다. 자바 스크립트, 달러 기호입니다 단지 알파벳의 편지 같은 또는 변수의 수. 

[00:35:07] 당신은 이름으로 할 수 있습니다. 그냥 멋진 보인다. 지역 사회 그래서 별명으로 채택 jQuery를라는 자신의 라이브러리. 

[00:35:13] 그리고 그것은 매우 인기. 그래서 JSON가 정확히 얻을. 이 함수의 그 jQuery를에 사람들은 쓴 그 server--에서 JSON을 가져옵니다 자바 스크립트 객체 표기법. 어떤 URL에서 그것은 것입니다 그 정보는 어디에서 얻을 수 있습니까? 분명히 여기에이 URL에서. 

[00:35:27] 그리고 브라우저로 무엇을해야합니까 그것은이 응답을 얻을 마자? 그리고 이것은 AJAX의 마법에, 그래서이다 XML에 speak-- 비동기 자바 스크립트. 이 같은으로보기 힘들었 지요 우리가 여기에 있었다으로 간단한 예. 

[00:35:41] 그러나 이것은 비동기했다 감각이 내 코드 때 에 메시지를 보내 실행 서버는 좀 JSON을 얻을 이동합니다. 그리고 슈퍼 순식간에 일어난 일 제가 응답을 얻었다. 그러나 흥미로운 것은이 때문이다 코드의 라인은 컴퓨터를 끊지 않았다. 

[00:35:55] 나는 회전 아이콘이 표시되지 않았다. 난을 잃지 않았다 내 마우스를 이동하는 능력. 브라우저 실제로 완벽하게 정상적으로이었다. 

[00:36:01] 방법은 자바 스크립트를 처리하므로 다음과 같이 서버로부터의 응답이다. 당신은 당신이라고 부르는 등록 콜백 함수 어느 다만, 헤이, 자바 스크립트를 의미한다. 즉시 서버로 JSON으로 응답, 이 익명의 함수를 호출하십시오. 

[00:36:18] 그리고이 함수에 전달하십시오 어떤 문자열 서버가 뱉어 인수는 데이터를 불렀다. 그래서 다른, 즉, 경우 동적으로 조립 해요 이 전달 URL의 quote.php 무료 또는 GOOG 또는 이것 저것 같은 기호, 그럼 내가 말하는거야 자바 스크립트는 해당 URL을 가서. 브라우저 기억 뭔가를 반환 할 것입니다 우리가 이것을 earlier-- 본 것처럼 그 보인다. 

[00:36:42] 그리고 무엇을 두 번째 인수 여기에 JSON이 말하는 얻을 수 이 함수를 호출한다 때 서버가 돌아 오기 이 10 밀리 초 여부 지금 또는 지금 10 초. 그리고 바로 당신이로, 페이지에 가격을 추가합니다. 이 구문 여기에 단지 노드를 가서 의미 누구의 고유 식별자 트리에서 우리가 이전에 보았던 그 범위 price--입니다. 

[00:37:01] HTML이라고하는이 방법 다만, 대체 이동 말한다 data.price에있다 HTML. data.price은 무엇입니까? 음, 브라우저, 기억, 날이 돌아오고 있었다. 따라서이 데이터입니다. 

[00:37:14] 그리고 그것은 조금 애매이다 쉼표를 여기에서 볼 수 있습니다. 하지만 사실, 내가이 작업을 수행 할 수 있습니다. 나 그냥이 붙여 보자 정말 빨리의 gedit로 우리가 보여 주었다처럼이 보여 이전 Zamyla의 구조. 

[00:37:27] 어떤 서버가 다시 보내는 것은 이처럼 보이는 작은 물체. 그리고 data.price입니다 단지 나에게 0.1515을 제공합니다. 이동 그래서 많은 부품 여기에 한 번에. 

[00:37:39] 그러나 키 테이크 아웃입니다 우리는이 능력을 가지고 있음 추가 HTTP를 만들기 위해 자바 스크립트를 사용하여 요청 페이지를 다시로드하지 않고. 그리고 우리가 실제로 할 수있는 즉석에서 웹 페이지를 변경합니다. 그리고 그것은 밝혀 자바 스크립트와 다른 언어 지금 사용할 수 있습니다뿐만 아니라, 웹 페이지를 돌연변이, 실제로 소프​​트웨어를 작성할 실제 컴퓨터에서, 다만 크롬 등으로 국한되지. 

[00:38:00] 사실, 당신을 콜튼을 것 그렇다 니 우리를 여기에 다시 가입하려면 랩 코드, 장과와? 의에 대해 이야기하는 데, 앞서 가자 익명 함수 및 콜백 정말 여기에 운명을 유혹 출혈 라이브 데모와 최신 기술 중 하나 이러한 엘리트 운동 장치. 자,이 장치, 리콜, 작은 USB 장치는 그뿐만 아니라이 아름다운 여성의 ... 그 얘기 그게 당신의 USB 포트에 연결합니다. 

[00:38:25] 그리고 다음은 입력을 제공 인간 제스처의 형태 적외선 광선을 사용하여 검출함으로써, 본질적으로, 팔의 움직임. 그래서 마리아 뭘하려 반면, 에 전에, 근육이었다 실제로 변경 무슨 느낌 팔이 기반 적외선입니다. 그래서 내 움직임을 찾고 발 정도의 구형의 종류 장치 자체의. 

[00:38:46] 그래서 내가 왜하지 않습니다 이 처음에는 자상? 그리고 이제 가서 던져 보자 여기에 오버 헤드에 당신까지. 그래서 여기 콜튼의 노트북을 만들어 보자. 우리는 TV에 앤드류 있어요. 그리고 당신은 내가 먼저 무엇을하고 싶습니까? 

[00:39:00] 콜튼은 : 앞서 바로 가기 이 사람 위에 손을 올려 당신은 어떤 멋진 반짝이를 볼 수 있습니다. 

[00:39:04] DAVID J. 마란 : 아주 좋은. 이 모든 실시간으로 일어나고있다. 확인을 클릭합니다. 좋아하고, 네. 그래서 좋은. 좋아, 우리는 다른 무엇을 할 수 있습니까? 

[00:39:15] 콜튼은 : 다음 화면으로 이동하여 참조하십시오. 

[00:39:17] DAVID J. 마란 : 좋아. 

[00:39:19] 콜튼 : 재미 작은 게임 어디 로봇을 얻을. 

[00:39:21] DAVID J. 마란 : 좋아요,이 무엇을 나에게 보여주는 가짜 손입니다. 콜튼 : 네 그래서 가서 상기 블록들 중 하나를 잡아 그 로봇의 몸 위에 넣어. DAVID J. 마란 : 아, 내 손이있다. 오. OK, 사​​랑 스럽다. OK, 잠깐. 우리가 이동합니다. 

[00:39:41] 콜튼 : 나는 사고에 하나를했다. 

[00:39:43] DAVID J. 마란 : OK, 나는이 남자를 얻을 수 있습니다. 젠장! 우리는이 마지막 연습 때 밤, 당신은이에 양도 알아? 

[00:39:51] 이처럼. 확인을 클릭합니다. 다음 하나? 

[00:39:55] 콜튼 : 물론. 

[00:39:56] DAVID J. 마란 : 좋아, 그리고 세 번째가있다. 좋아. 콜튼 : 그리고이 하나, 당신은 어떻게 .. 얻을 DAVID J. 마란 : 아, 이 하나의 아름다운. 콜튼 : --yeah,이 꽃을 따로 선택합니다. DAVID J. 마란 : OK. 아니? 놓쳤​​다. 

[00:40:14] 콜튼 : 아, 거기 당신은 간다. 

[00:40:15] DAVID J. 마란 : 아, 저것 좀 봐. 아주 좋은. 글쎄, 왜 우리가 취할 '말아 여기에 자원 봉사 아웃 누가 올라오고 싶습니다. 방법에 대한 권리가 녹색, 그것은 무엇입니까? 

[00:40:27] 좋아,와의 드 니스, 니가 보자 대신 당신의 그 어떤 일을 이 게임을 알고있을와 ... 아마도, 밧줄을 잘라? 어디 보자. 우리는 여기에 우리의 안경을 가지고? 

[00:40:37] 확인을 클릭합니다. 감사합니다. 당신의 이름은 무엇입니까? 

[00:40:39] 청중 : 로라. 

[00:40:40] DAVID J. 마란 : 로라? 반가워요. 당신은 퍼팅 괜찮다면 안경을 통해 구글 유리합니다. 이 콜튼입니다. 

[00:40:46] 콜튼 : 안녕하세요. 만나서 반가워요. 

[00:40:48] DAVID J. 마란은 : OK, 주변에 온다. 좋아요, 당신이가는 건지 여기 전에이 연주 한, 위에 손을 넣어 여기에 립 모션. 그리고 지금 당신의 화살표를 이동해야합니다. 아니, 오. 

[00:40:57] 청중 : 호 

[00:40:58] DAVID J. 마란 : 우리 아직 종료하지 않습니다. 확인을 기다립니다. 여기 야. 당신이 보유 그래서 알 당신의 뭔가 이상 손가락, 마우스를 녹색으로 이동하기 시작, 어느를 클릭하는 방법입니다. 

[00:41:06] 그래서 플레이를 가리 키십시오. 그리고 단 하나의 손가락은 괜찮습니다. 그리고 지금 작은 클릭 왼쪽에 녹색 남자. 이 녹색을 채울 때까지 그리고 지금 보유. 좋은. 지금 같은, 최고 레벨 업 하나. 

[00:41:16] 청중 : 그래, 우리가 원하는 여기에 레벨 1,. 

[00:41:20] DAVID J. 마란 : 좋은. OK, 그래서 모든 당신은 밧줄을 절단 할 수 있습니다. 커서가 거기 흰색 하나입니다. 

[00:41:28] 아주 좋은. 좋아, 그것은 더 열심히 얻을 약입니다. 그래서 다음에 지금에 손가락을 누르고 있습니다. 좋은. 이 사람은 어렵다. 

[00:41:39] 청중 : 젠장. 확인을 클릭합니다. 그것은 그 길을 가고 싶어. 젠장, 거기 있었고 

[00:41:44] DAVID J. 마란 : 그래. 보조 목표는 모든 별을 얻을 수 있습니다. 좋아, 다음. 

[00:41:53] 이 세 번째를 얻을 수 있는지 보자. 좋은. OK, 거기 이동합니다. 

[00:42:06] 물론. 오, 아주 좋은. 좋아. 

[00:42:11] 그럼 왜 우리는 오늘 여기에 휴회하지? 사람이 놀고 싶어하는 사람들까지 보내줬. 우리의 자원 봉사 로라에 너무 감사합니다. 그리고 우리는 월요일에 볼 수 있습니다. 

[00:42:18] 청중 : 당신은 아마이를 다시 할 수 있습니다. 

[00:42:21] SPEAKER 2 : 다음에서 CS50--