[Powered by Google Translate] [주 9, 계속] [데이비드 J. Malan - 하버드 대학교 (Harvard University)] [이 CS50입니다. - CS50.TV] 

이 CS50입니다. 이 주 9의 끝입니다. 정말 감사합니다. 마지막으로. 주 9. 내가 할게. 오늘 우리는 웹 프로그래밍에 대한 우리의 대화를 계속 최종 프로젝트쪽으로 눈을 가진, 당신은 웹 기반 뭔가를 할 필요가 없습니다 때문에 최종 프로젝트에 대한 그러나, 최종 프로젝트를위한 하나 또는 CS50 후 이건 정말 현대적인 소프트웨어가 진행되는 방향입니다. 그리고 아직 실제로 쉬운 일 아닙니다. 사실, 힘든 일 중 하나는 디자인의 측면이다. 

예를 들어, 디자인은 실제로 사용자 인터페이스를 점점 말 또는 사용자 경험 맞아. daresay I - 우리는 최근 문제 세트에서 알 당신의 몇 가지 소프트웨어의 일부 부분에 대해 보트 매어 두는 밧줄을 방송 할 때 또는 하드웨어 캠퍼스 또는 해제에 대한 여부를 당신을 infuriates 그 - 거기에 사이트의 많은 사람들이, 하드웨어의 많은, 밖에있다 의 종류됐다. 하지만 현실은 아직 사용하기 쉬운 물건을 만드는 것은 그럼에도 불구하고 강력한 것입니다 매우 어려운 도전입니다. 그래서 오늘은 내가 요셉과 토미는 여기에 저를 가입하도록 요청 우리가 대화를 할 수 있도록 모두에 대한 설계 과 사고 프로세스의 종류 생각으로 시작해야 귀하의 최종 프로젝트를 디자인 할 때, 미래의 노력. 그리고 토미의 도움으로 우리는 구현 세부 정보 중 일부 보겠습니다. 어떻게 종이에 또는 마음에 어떤 비전을 가질 수 그때 당신은 프로그래밍 방식으로 실행할 수있는 기술과 기술의 일부를 사용하여 우리는 그냥 얘기를 시작했습니다 즉 자바 스크립트와 AJAX, 비동기 자바 스크립트 즉, 심지어 새로운 무언가. 그게 당신이 사용자 인터페이스의 모든 동적 인을 만들 수 있습니다 서버에서 점진적으로 더 많은 데이터를 가져 오는으로. 그래서 우리는 오늘뿐만 아니라 그 내용 미리보기의 일부를 볼 수 있습니다. 옆으로, 당신은 컴퓨터 과학에 집중에 관심이있는 경우 또는 컴퓨터 과학 minoring 것은 알아 정오 ​​금요일 맥스웰 Dworkin 221에서 피자 이벤트가있을 것입니다 어디 컴퓨터 과학에 대해 좀 더 배울 수 있습니다. 문 나가는 길 오늘은 하버드에서 CS에 대한 비공식적 인 가이드를 수령 할 수 있습니다. 우리는 허리 높이에서 외부 쓰레기통에 놓을 게요 그래서이를 잡아 CS에 대해 좀 더 알아 보려면, 이 주 0에 있었던 것처럼 그 말은 당신을 위해있을 것입니다. 당신은 오후 1시 15분에이 금요일 CS50 점심 우리와 함께하고 싶은 또한다면, cs50.net/lunch로 향. 소동, 내가 당신에게 가르치는 동료 조셉 옹을 제공합니다. 안녕하세요. [박수] 감사합니다. 나는 디자인에 대해 배운 처음 CS179 불리는 반 이었어요. 

당시 교수는 우리에게 또 다른 교수에 대한 이야기​​를 누가 호텔에 갔다와의 수도꼭지를 사용했다. 사람이 왼쪽에있는 어떤 2​​ 개의 손잡이 말과 오른쪽 수 있을까요? [학생] 온수 및 냉수. >> 온수 및 냉수. 좋아. 당신이 일반적으로 예상 뭐, 그렇죠? 수도꼭지 사용 후이 교수는 샤워를하고 싶어, 그는이 사용하는 진행. 그는 왼손을 생각하고 오른쪽면 바로, 따뜻한 음식과 차가운위한 것입니다? 그러나 사람이 나를이 실제로 무엇을 말해 줄 수 있니? 어떤 손? [안 들리게 학생 응답] >> 하나의 제안은? [안 들리게 학생 응답] >> 온도? 그래서 그 중 하나는 온도와 다른 컨트롤을 제어하는​​? >> [학생] 물 압력. 물 압력. 좋아. 이 교수는이에 걸어, 그들은 따뜻한 음식과 차가운 음식으로 통제 생각 이 흥분, 모든 방법까지 생각하는 권리를, 변 그는 따뜻한 샤워를하고 싶어 때문입니다. 음,이 역시 일치하지 않는, 그래서 그는이 매우 재미없는 경험을 도착 의 콜드 샤워에 빠진, 우리는 모두 어떤 기분인지 알아. 이 디자인 결함의 예입니다. 그 수도꼭지에서 자신의 기대입니다이 말은 무엇입니까 샤워 나온 내용과 일치하지 못했지만, 그를 위해 불행한 종류가있는 것입니다. 그래서이 실제 생활에서 일어나는 디자인 결함의 예입니다. 그러나 우리는뿐만 아니라 다른 사람들의 모든 종류를 참조하십시오. 우리는 아마도 MBTA 시스템의 팬 아니에요. 이 말합니다 런던에서 실제로 지하철 시스템은 "이 버튼을 사용하지 않는." 왜 거기에 더입니까? 왜 우리가 신경 쓰는 거지? 나는 아이, 집에있는 기술에 정통한 한 것, 때 컴퓨터가 충돌 것이다 때마다 엄마는 나에게 와서 저에게이 화면을 보여 주며 나 한테 물어 무슨 일이 일어 났는지. 

비록이 무슨 뜻인지 모르겠어요. [웃음] 무엇입니까? [웃음] 때때로 우리는 소프트웨어 개발자 기분은 조업 회사입니다. 사용자는 우리처럼다시피 "무슨 일이야? 누군가가 알려주세요." 이 모든 디자인의 문제로 내려 온다. 디자인은 우리가 알 수있는 것처럼, 미학에 대해 순전히 없습니다 상황이 어떻게 보이는지에 대한 문제는 없습니다. 이 팝업 여기에 약간은 실제로 아주 좋은 모양 이곳을 참조하십시오. 그것은 배경에 그림자가있어, 무슨 일 국경 radiuses 있습니다. 그것은 아주 좋지. 매우 사용자 친화적하지 않기 정말 좋은 디자인 않아. 와서 그 팝업 저 작은 정말 나에게 정보를 제공하지 않습니다 무슨 일이 있는지,이 사용자로 나 한테 아무 말도하지 않습니다 그 오류로부터 복구하는 방법에 대한. 우리는 디자인이 아닌 것 일에 대해 생각하고 싶습니다. 첫째, 미학 없습니다. 또한 불필요한 기능의 톤과 앱을 채워 없어. 당신은 태국 레스토랑 경우, 당신은 아마 같은 시간에 치과 의사가되고 싶지 않습니다. 그리고 페이스 북 질문에 많은 사람들이 그것을 사용하지 않을 것을 그리고 그들이 구축했던의 핵심 정말 아니 었습니다. 그리고 너무 많은 일의 양하지에 대한 생각 좋군요 귀하의 응용 프로그램이 있지만 품질에 주력하고있는 그리고 어떻게 더 나은 해당 사용자의 경험을하고 있어요 에 의해 실제로 이미 일에 개선. 

간단히 말해서, 디자인은 우리가 구축해야하는지 우리에게 알려줍니다. 예를 들어, 우리는 우리가 일을 검색 할 수 있도록 무언가를 구축하는 경우, 구글과 같은 예를 들어, 우리는 방식으로 일을해야합니다 즉, 사용자들이 원하는대로 얻을 클릭을 많이 취할 필요 또는 우리는 Google 순간 검색이나 자동 완성과 함께 예를 들어,있는 방식으로해야 그 우리가 결과를 빠르게 얻을 수 있습니다? 토미가 실제로 구축, 당신을 보여줍니다처럼 공학, 포함한다. 디자인의 종류가 많이 있습니다. 예를 들어, 당신이 뭔가를 구축하는 경우 무언가를 배포 할 수 많은 전기 또는 많은 기술이 없다 제 3 세계 국가에서, 당신이 구축 것을 설계해야 그곳에서 쉽게 사람들에 대한 액세스를 제공하는 방법은 아니에요. 그러나 다른 디자인 결정의 종류가 어떤 건지 또는이 그런 일에 관여있을 수 있을까요? 그래. 내가 손을 참조하십시오. [안 들리게 학생 응답] >> 오른쪽. 그렇지. 접근성은 한 가지입니다. 많은 사람들이 "내 사용자에 대해?"에 대해 생각하지 않아요 두 스펙트럼의 극단처럼. 나는 생각하지 않는다는 장애인이있을 사용자가 그래서 난 그냥 일반 사용자에 대한 설계에 대해 생각하고있어. 인터넷은 오늘날 모든 사용자가 액세스 할 수 있습니다 나는뿐만 아니라 저 사람들을 위해 설계해야합니다. 당신은 다른 어떤 디자인 결정의 종류가 될 수도? 예. >> [학생] 비용. 비용. 아주 좋아. 우리가 우리의 설계 결정을 기초 수도 있습니다 또 다른 한가지는 비용을 지불해야합니다. 우리가 사업 인 경우 생산하기 위해 많은 비용을 고려하지 않습니다 무언가를 구축하려면 하지만 특히 높은 비용으로 판매하거나 우리에게 이익을 얻을 수 있습니다. 

이러한 디자인의 모든 다른 종류가 있지만 우리는 인터넷에서 뭔가를 구축 할 때 또는 우리가 아마 지금 건설별로 비용이하지 않는 무언가를 구축 할 때, 인터넷 응용 프로그램처럼 - 당신은에 많은 자본을 던질 필요 없어 실제로 작동하는 무언가를하기 위해 위해 - 우리가에 대한 자세한 걱정하는 것은 사용자 경험이다. 우리는이 사용자 중심의 디자인을 전화하십시오. 기본적으로 어떤 사용자 중심의 디자인을 포함하여 사용자의 입장이 자신을 가하고 있습니다. 제가 구축하는지에 대한 다른 사람이 가입하면, 그들은 분명히 염두에두고 목표로 내 특정 응용 프로그램에 왔어요 작업과 그것들은 완벽하고 싶습니다. 그리고 일이 그들에게 그 작업을 완료 할 수 있도록 지원뿐만 아니라 하지만 그들이 쉽고 효율적 방식으로 해당 작업을 완료 할 수 있도록하기 위해, 또, 어떤 사람은 거기 말한대로, 액세스 할 수 있습니다. 효율성은 무엇을 의미합니까? 효율이 얼마나 빨리 내 사용자가 내 인터페이스를 주어진 작업을 완료 않습니다 의미합니다. 그 한 곳에서 다른로 이동을 위해 클릭이 많이 걸리나요? 이 지루한가요? 그들은 반복적 인 작업을 많이 수행해야합니까? 우리는 가능한 한 효율적으로이 과정을 만들고 싶어 그래서 그들은 일 그 종류의 작업을 수행 할 필요가 없습니다. 사용자가 내 인터페이스를 조회하는 경우 intuitiveness에 관해서는, 그 예를 들어,이고, 그게 사람들 장소에서 장소에 도착하기 쉬운? 사람들이 내 인터페이스를 클릭해야하는지 알아내는 것이 쉬운 이루가 달성하고자하는 목표 또는 작업을 달성 하는가? 

한 사람이 거기 말한대로 그리고 마지막으로, 접근성이 매우 중요합니다. [남성 스피커] 그것은 비전 등을위한 접근성에있어서, 난 사실 눈이 사람에게 뭔가를 설계 어떻게 하시겠습니까? 오. 전혀 볼 수없는 사람들을 위해, 우리는 스크린 리더라는 게있어. 당신이해야하면 방법으로 웹 사이트를 구축 하시 즉, 예를 들어, 우리가 부르는 특정 기술 - 지금은 여러가지가 있습니다. 나는 턱라는 스크린 리더가 있다고 생각합니다. 이 많은 것들이 우리가 지역 규칙을 부르는 의지 페이지에 존재하는 어떤 사용자에게 읽기 보려면 여기를 클릭하십시오. 볼 수없는 사람들을 위해, 당신은 확실하게해야하고 그 다음 스크린 리더 실제로 페이지에있는 콘텐츠를 선택할 수 있으며, 실제로 사용자에게 표시 할 수 있습니다, 당신이 볼 수없는 경우, 적어도 당신은 여전히​​ 페이지의 내용을 이해할 수있다. 그래. 좋아요. 충분히 좋은 디자인에 대해 얘기. 나쁜 디자인에 대해 이야기 해 봅시다. 이은하지 말아야 할 일입니다. 사람이 Craigslist와의 경험에 대해 말해 수 무엇을 생각하는 것은이 디자인 그렇게 대단하지 않아요? 예. >> [학생] 내가 너무 많은 단어가 한 지역에있는 것 같아. 단어가 너무 많습니다, 그렇죠? 완전히 압도적. 이 페이지에 와서 당신은 여기까지 가지 공세로 인사하고 그 당신에게 문제가되지 않을 수 있습니다. 예를 들어,이 편지로 시작하지 않는 한 주에 살고 있습니다. 자, 당신은 텍사스거나에 살고 말한다. 

당신은에있는 위치로 갈 수있는 페이지를 아래로 모든 방법을 스크롤해야합니다. 내가 보스톤 출신인데, 그럼 내가 매사추세츠에서 찾아 보자. 매사추세츠는 어디 있지? 오, 바로 여기. 오, 보스턴이야. 좋아요. 의 보스턴 살펴 보도록하겠습니다. [웃음] 예쁜 압도적, 맞죠? 저기 어색한 일. [웃음] 자, 내가 사는 곳을 찾고 말한다. 얼마나 많은 사람들이 실제로 Craigslist 사용하셨습니까? 당신의 톤. 이것 좀 봐,하지만이 바라 보는 심하게 가지 방법이 있습니다. IMG와 그림 사이의 차이점은 무엇입니까? 아무도 말해 줄 수 있어요? 실제로 차이가 없습니다. 그들은 정확히 같은 일을 의미하지만 어떤 이유로 그들을 위해 서로 다른 라벨을 갖추고 있습니다. 나는 적이 클릭하면 이미지, 아무 페이지에 나타나지 않습니다. 사실 난 무슨 일이 일어날 다시 검색을 클릭해야합니다. 무슨 일이 수행 할 수있는 더 나은 디자인 결정 될 수? 그 필터를 클릭했다면, 아마 특정 동작에 의해 필터링 할 또는 특정 범주. 대신 다시 검색을 누릅니다 것만도, 그냥 자동으로 필터링을 할 수 그들은 즉시 그렇게 Google 스타일의 일종. [Malan]하지만 우리가 그들에게 지금까지 물리적으로 제출해야하는 본으로 형성하지 않습니다 눌러 적어도 나 버튼을 클릭 입력? 지금까지 그들을 본 적이 한, 당신은 실제로 그 일을 할 제출을 클릭해야합니다. 

그러나 토미 두 번째에 표시되므로, 실제로 당신을위한 방법이 있습니다 당신이 그를 클릭하면 자동으로 보낼 수 있도록 우리는 AJAX 요청을 전화 다시 데이터를 얻을 수 있으며 즉시 결과를 필터링 할 일. 이 인터페이스에 문제가되는 부분의 톤이 있습니다. [Malan]는 당신이 캠브리지를 검색 할 수 있나요? 당신이 캠브리지에 관심있는 약간 변형 된 것이 여기있다 그런데도 당신은 Westford, 봄 힐, 웨스트 뉴턴과 같은을 받고있어. 아마 그럴 이상적입니다. >> 아마 이상적인 없습니다. 어떻게이 특정 페이지에 사용자의 경험을 개선 할 수 있을까요? 예. >> [학생] 도움말을 참조하십시오. 좋아요. 감각의 어떤 종류의 방법? 예를 들어 [학생]도 Craigslist는 건지 모르겠어요 처음 사용자를위한 것 또는 네가 무엇을해야 모르겠어요. 맞아. 그래서 Craigslist이 페이지에인지 설명하는 것이 중요합니다. 우리는 실제로이 페이지는 사실은 무엇인지 사용자가 알 수 있습니다. 내가이를 방문한다면 난 지역의 전체 무리를 참조하십시오. 난 그들이 무슨 뜻인지 모르겠어요. 하지만 더 중요한 것은, 그냥,이 인터페이스를보고 나는 특정 커뮤니티를 찾아 가지 톤을 아래로 스크롤 있었던 걸로 기억 사실 제가이 일에 대해된다는 것을. 그 작업을 수행 할 수있는 빠른 방법은 무엇입니까? 예. [학생]를 동, 서 지역으로까지 나눈다. 좋아요 >>. 저 한테 빠른 결정하는 데 도움이 수있는 더 많은 카테고리로 나누기 수 특정 위치에 도착하는 방법. [학생] 드롭 다운 목록을 놔. >>이 맞아. 좋아요. 우리가 사물의 고정 된 세트를 가지고 있기 때문에 나는 드롭 다운 메뉴를 사용할 수 우리는 드롭 다운 메뉴에 표시 수 있습니다. 이 방법은 화면에 너무 많은 공간을 차지하지 않습니다. 하지만 그보다 더 나은, 우리는 무엇을 할 수 있습니까? 예. 다시 한번 >> [안 들리게 학생 응답] >> 말을 할 수 있습니까? >> [학생] 검색 창. 네, 검색 상자. 잘 됐네요. 우리가 슬라이드, 검색 상자를 다시 확인하면 우리가 실제로 할 수있는 것이 있습니다. 자동 완성. 당신이 알고있는 결과를 검색하는 것은 매우 쉬운 방법은 집합입니다. 나는 BO를 입력하기 시작하면, 그냥 나에게 그 중 BO 내부에있는 모든 결과를 보여줍니다. 이렇게 나는 아주 쉽게 제가 가고 싶은 특정 하나를 찾을 수 있습니다 대신이 정말 큰 목록을 스크롤해야하는. 

이 정말 낮은 교수형 과일 모든 종류의 아르 그 Craigslist 구현되어있는 사람 실제로 특정 사용자에 대한 훨씬 더 웹 사이트의 경험을 수 있도록 할 수 있습니다. 좋아요. 나쁘지는 웹 사이트에 대해 얘기. 의 페이스 북에 대해 얘기하자. 페이스 북은 나와, 특히 페이스 북 사진 때, 정확히 같은 일을 할 수있는 시간에 다른 서비스가 많이 있었다. 그들은 앨범으로 사진을 정리 수 있습니다. 당신이 할 수있는 것은 당신이뿐만 아니라 세트로 구성 할 수 있습니다. 당신은 날짜별로 정리 수 있습니다. 당신은이 특별한 일을 할 수있어. 그러나 사람이 페이스 북 사진이 릴리스 된 시간에 폭발 한는지 알아? 예. >> [학생] 태그. >> 태그. 그렇지. 우리는 CS50의 홀 치기 염색의 대형 손수건으로 우리 개 마스코트입니다 여기에 마일로 수 있습니다. 당신은 우리가 중간에서이 태그 추가 기능을 가지고 볼 수 있습니다. 그리고는 사용성 관점에서 페이스 북의 사진은 무척 재미있는 한 실제로이를 통해 사람들이 자신의 사진에 친구를 포함 할 수 있다는 것입니다. 페이스 북의 경우, 자신의 웹 사이트가 특히 사회이기 때문에하면, 는 사회 분위기가 이러한 종류의 구축에 대해입니다. 그 많은 사진의 경험을 향상 실제로 말을 시작 할 수 있기 때문에, "이 사람들 사이의 연결 아르 이러한 실제로에 관심을 가진 사람들에 대한 사진입니다. " 그것의 일부는 정렬 만족감을 얻는 것입니다. 사람들은 그런 식으로 사진과 물건에 태그를 추가 할 수 있습니다 싶어. 그 좋은 인간 특성을 필요는 없지만, 동시에 그것은 좋은 디자인 결정을 기반으로 사람들이 실제로 이런 상황에 대해 걱정 때문이다. 그래서 그런 페이스 북 사진입니다. 

그러나의 더 일반적으로 페이스 북을 얘기 해봐요. 내가 여기 많은 사람들이 페이스 북에 대한 의견을 가지고 있는게 확실해 좋은 디자인 결정과 나쁜 디자인을 결정 모두. 그러니 환기 또는 행복하길 바라지. 이리와. 난 당신이 모두가 페이스 북을 사용하는 알아요. 누군가가 말을 뭔가 나쁜 일이나 그 일에 대해 뭐라고 좋은 일을 할 수 있습니다. 예. 뉴스 피드에서 [학생] 내가 정말 상관 없어 많은가 있습니다. 뉴스 피드는 신경 않을 수도 많은 것을 보여 않습니다. 당신이 2 ~ 3 년 동안 충족되지 않은 페이스 북에 친구가있을 당신은 자신의 뉴스 검색 결과가 뉴스 피드에 등장 참조 당신은 정말 상관 없어. 페이스 북 사실, 더 낳은 서비스를 위해 노력을 만들었습니다 그리고 그들은 실제로 늦은로 뉴스 피드의 상단에 관련성이 높은 결과를 보내버 리려고 한 그래서 당신은 실제로 당신이나 당신의 가까운 친구와 관련성이 높은 친구들이 일을 참조하십시오. 또 다른 건? 예. 다시 한번 [안 들리게 학생 응답] >> 말을 할 수 있습니까? [학생] 광고가 상대적으로 눈에 거슬리지 있습니다. 무슨 의미에서 >>? [안 들리게 학생 응답] 그들은 배너처럼 화면에 빛을 필요가 없습니다. 좋아요. 좋아. 당신이 90 년대에서 인터넷을 기억하는 경우 - >> [Malan] 나는이있었습니다. >> 그는 거기에 있었어. [웃음] 당신은 반짝이는 깜박이는 GIF를 배경, 물건을 기억하고 계시 겠지만, 사물의 지오 시티 스타일 정렬. 그건 정말 좋은 디자인의 예 아닙니다 정말 콘텐츠에서 혼란이 없기 때문입니다. 자신의 배경으로 애니메이션 GIF를 사용 예일 아트 웹 사이트 그리고 당신은 페이지에 아무것도 읽을 수 없습니다 하지만 사람은 실제로 그들에게 이야기하고 지금은 조금 다른 것 같은데요. [Malan] 지금은 훨씬 낫 네요. 당신이 볼 수 있듯이 그것은 지금 훨씬 낫 네요 >>. >> [Malan] 오, 그래. 아주 좋아, 그냥 - 네. 좋아요. 

그것의 일부는 또한 페이지가 가능 매우 미니멀리즘과 매우 이해하고 있습니다 매우 논리적 인 방법으로 페이지의 흐름에 일 때문에 서로의 방식으로하지 않습니다. 다른 것들 어떤 종류는 페이스 북에 대한 좋은 나 페이스 북에 대한 나쁜입니까? 그냥 여기에 디자인 대화를 보자. 오. 어디서? 그래. [학생]의 새로운 타임 라인 시스템은 자신의 과거에 대해 그 사람의 프로필을 검색 할 수 있습니다. , 타임 라인을 우. 당신 스토킹 친구 할 수 있기 때문에 타임 라인은 훌륭한 일이야 다시는 고등학교 다닐 때. 당신이 훨씬 빨리 내용을 필터링 할 수 있기 때문에 타임 라인이 좋은 당신이 그렇지 않으면 찾을 수 당신에게 정말 오랜만 것이다 물건을 찾을 수 있습니다 단지 시간을 거슬러 가고, 위로, 위로, 위로, 위로, 위로, 위로 스크롤 아래로. 하지만 단점의 종류는 사용자 경험의 관점에서 그에게도 있습니다. 무슨 일을할까요? P-R로 시작하는 큰 단어입니다. >> [학생] 개인 정보 보호. >> 개인 정보 보호, 그렇죠? 개인 정보 보호 정책은 큰 사용자 경험의 문제입니다. 이게 지금의 페이스 북에 대한 가장 미워 것들 중 하나입니다. [웃음] [Malan]으로 지금 내가 할. 데이비드는이 실제로 어제까지 무슨 일이 있었는지 몰랐네요. 그래서 지금은 내가 그를 채팅 때마다 내가 그가 나를 무시 된 알아 냈다는 걸 알아요. [Malan]는 사실은 그에게 어색한 부분을 무시했습니다되었습니다 그리고 그 사람이 그 사람을 무시하는 걸 알고 있었어 몰랐어요. [웃음] 개인 정보 보호 정책은 큰 문제입니다. 여기 사람이 페이스 북 개인 정보 보호에 대한 나쁜 무엇인지 말해 줄 수 이 사람들이 이런 일을했다는 사실 외에? 그것은 페이스 북 개인 정보 보호와 관련하여해야 할 특히 하드 무엇입니까? 의 종류는 선도적 인 질문입니다. 예. >> [학생] 특정 사람들로부터 사진을 숨 깁니다. 맞아. 맞아요, 특정 사람들로부터 사진을 숨길 수 있습니다. 그들은 당신이 사진의 개인 정보 보호를 전환 할 수있는 오른쪽이 좀 작은 단추가 있습니다. 그들의 개인 정보 보호 옵션이 매우 메뉴의 다른 종류의 사이에 다양합니다. 

그들은 최근에 훨씬 더 늘어 놓던하지만이 사건으로 사용 당신이 보는 사진에서 친구를 방지하고 싶어 할 때마다 즉, 당신은 정말되는 매우 복잡한 5 단계 과정을 통과해야 내가이 링크를 클릭 해, 지금 다시 클릭 해, 다시 클릭 해 저 사람들이 내 사진을 볼 수없는 지정할 수 있습니다. 그래서 페이스 북의 부분에 특히 좋지 않습니다 사용자의 경험에 대해 많은 사실은 그들에게 자유를주는되기 때문에 사람들이 볼 수있는 제어 할 수 있습니다. 이 사용자 컨트롤과 자유를 호출합니다. 당신은 두지 않을 경우 사용자가 해당 효율적이고 직관적 인 방법으로, 다음 사용자 경험은 전혀 그렇게 대단하지 않아요.  너희가 페이스 북에 대해 아무 말 하시겠습니까? 어떻게이 기능을 사용하려면 어떻게해야합니까? [옹]이 기능을 사용 중지 할 수 없으며, 그 페이스 북의 부분에 큰 사용성 결함입니다. 이 기능은 - 내가 실제로 어제로 보았다 - 당신이 할 수 없다고 하던지 또는 어딘가에 아주, 아주 깊은 묻혀 페이스 북의 리 세스 전혀이 기능을 해제하는 방법을 알아낼 수 없습니다 때문입니다. [Malan]하지만 때로는 이러한 결정은 분명하지 않습니다 너희들은 다양한 CS50 응용 프로그램에 우리에게 유용한 많은 피드백을 제공했기 때문에 그리고이 과정에서 사용하는 웹 사이트. 우리는 이러한 요청과 제안을 모두 구현하지 않았습니다. 

의 일부는, 그 시간의 함수라고 많은 요청을 받고입니다 때때로 우리는 같은 의식 결정을, "제안을 보내 주셔서 감사합니다,하지만 우리는 반대." 사용자가 뭔가를해야한다고 생각한다면 그럼 당신은 실제로 당신이 어떤 결정합니까 당신은 반드시 그렇지? 경우에도 실제로 사용자가 무슨 말을 듣고 사이 좋은 균형입니다 당신이 말하는 곳 실제로, 광고의 일종을 갖는 "우리는이 사용자가 말을하지 않을 것"이라고 말했다. 그리고 특히, 저도 그렇게 생각이 일을 표현 헨리 포드에 의해 견적이 있다고 생각합니다. "나는 사람들이 원하는 사람을 물어 봤다면, 그들은 더 빨리 말을한다고 하더군요 것이다." 사람은 따옴표 정말 무슨 뜻인지 떨어져 애타게으로 정렬 할 수 있습니다? 그것은 사용자가 원하는 것을 알아야한다는 아닙니다 하지만 더 있다는거야 - [학생] 그들은 가능​​한 건지 모르겠어요. 일부 사람들은 가능​​하다 건지 모르겠어요. 그 떨어져 조금 더 애타게. 그게 무슨 뜻 이죠? [안 들리게 학생 응답] 좋아. 내가 우리가 여기서 말하고자하는 생각은 사람들이 원하는 것을 알고 있습니다. 그들은 빠른 말을 싶습니다. 그들이 진짜 원하는 건, 빠르게 이동 할 수있는 능력입니다 하지만 정말 그렇게 달성 할 수있는가 매체를 잘하지 않습니다. 당신은 사용자에게 와서 사용자가 당신에게 뭔가를 말해 때 그들은 "우리는 이러한 기능과 이러한 기능과 이러한 기능을 원하는 '말씀 당신이 필요에 대해 생각하고 싶지도 않아, "나보다 앞서 가자 "와, 그들이 명시 적으로 뭐라고 구현" 하지만 당신은 생각 할 것은 "아이디어의 종류를 그에서 얻을 수 있습니까?"입니다 실제로 원하는 게 뭐야? 

그리고 거기에서 당신이 할 수있는 일이 이러한 요청을 충족 무언가를 디자인입니다 하지만 반드시 사용자가 만족 될 것으로 예상하는 방식 인치 매우 실제 측면에서 최종 프로젝트 같은를위한, 가 더 좋은 걸을 할 때 유용한 경험적은 무슨 디자이너가 사람에 대해 교만이 특히 당신이 정렬의 가장 좋은 게 무엇인지 알게된다, 당신은 사용자의 입력이 걸릴 수 있습니다 하지만 실제로 피드백을 받고 어떻게해야할까요? 최종 프로젝트에서 매우 구체적으로, 어떻게 여기에 최적의 결과를 만들어? 어떻게 최적의 결과를 생산 - 나는 두 번째이 넘는 이동합니다 - 개발하고 테스트하고 반복의 과정입니다. 당신이 뭔가를 디자인 할 때 내가 테스트가 의미하는 것이 있습니다 그게 같은, 매우 좋은 생각 "나는 정말 대단한 디자이너입니다. 모든이를 사랑 것입니다." 그리고 당신은 보여서 사람들이 어떤 이유를 정말 싫어. 당신이해야 할 것은 사람들이 좋아하는 일의 부분을해야합니다 사람들이 안 좋아하는 물건을 개편. 그것은 매우 분명한 과정처럼 들리 겠지만,이 과정은 계속 반복 이미 건설 한 내용의 상단에 도움을주는 과정입니다 자신의 디자인 기술을 연마뿐만 아니라이 디자인을 구체화하는 데 도움이뿐만 아니라 사람들은 실제로 더 많은 사람들이 이전보다 제품을 주셔서 감사합니다 수 있도록. 

당신이 실제로 무슨 짓을 더 구체적인 예제를 갈거야. 제품의 마지막 예제의 일종으로, 카약을 살펴 보자. 가 나온 카약 매우 인기가했습니다. 사람들이 추측 할 수 있습니까? 당신이 그것을 사용하는 경우이 좋아하는 일의 종류는 무엇입니까 무엇을 당신이 마음에 들지 않는 일의 종류입니까? 예. >> [안 들리게 학생 응답] >> 좋아요. 그것도 사용자가 더 광대 한이 쿼리를 관리하게됩니다 같은 매우 제한적인 것보다, "당신의 시작 날짜를 선택해야합니다 "그리고 당신은 종료일을 선택해야합니다." 사실, 당신이 그것에 대해 유연하게 할 수 있으며 여러분에게 그 범위에서 항공편을 모두 제공합니다. 또 다른 건? [학생] 그들은 가격에 요금이 포함되어 있습니다. 그들은 가격의 비용을 포함 할. 세금과 일들이 실제로 왼쪽 상단에서 해당 가격으로 직진 따라서 귀하가 실제로 2백40달러 비행 비용을 지불한다는 생각에 속하지 정말 3백30달러 때. 또 다른 건? 예. [안 들리게 학생 응답] 실제로 당신이 그렇게하도록 내버려 있는지 확실하지 않습니다. 내가 잘못 될 수 있습니다. 당신은 특정 필터에 더 많은 무게를 넣어하려면 꽤 흥미로운 일이 될 수 있습니다 그래서 사람들이 위로 저 필터에 관한 결과를 밀어 것을. 그러나 사람이 왼쪽의 어디가 그렇게 특별하지 말 할 수 있습니까? 어떻게 전통적으로이 전에 인터넷 서비스에 항공편을 찾아 거죠? 

예. 당신은 그렇게 >> [안 들리게 학생 응답] >> 말을 할 수 - [학생] 각 항공사. >> 그래. 각 항공사는 자신의 웹 사이트가 있습니다. 이 일을 통합합니다. 그리고? [학생] 당신은 당신이 떠나는 정확히 시간을 알아요. 당신은 떠나 정확히 시간을 알고 하지만 특히 필터에 관한. 나 카약을 펼쳐 보자. 이런, 팝업. 나쁜 사용자 경험. 내가이 슬라이더를 이동하면 어떻게됩니까? [학생] 자동 업데이트. >> [옹] 자동 업데이트. 매우 중요 그게 뭐입니다. 이 전에, 당신은 비행기를보고 싶어 할 때마다, 귀하의 입력 위치, 출력 위치, 프레스 검색에 넣어했다 그게 무엇인지를 처리​​하고 결과를 표시합니다. 검색어를 변경하고자하는 경우, 당신은 두 번 다시 키를 눌러해야 처음부터 새로운 쿼리에 입력 한 다음 다시 이쪽으로 수행합니다. 이런 일에 대해 좋은 점은 중간에 매우 불륜의 현장을! 일을 사용합니다. 이 같은 작업을 수행 할 때마다, 그것은 요청을 쏘 그리고 당신에게 즉시 모든 결과를 반환합니다. 즉각적인 피드백 이런 일들이 카약이 격렬하게 인기 것이지 난 그냥 내 검색어를 변경하는 것이 정말 쉽기 때문입니다 그리고 특정 범위 주위에있는 사물을 이해할 수 저런 저런 돌아 가야 할 필요없이. 그래서이 당신​​이 웹 사이트를 디자인 할 때 생각하고 싶지도, 모든 일입니다. 내 사용자가 최선을 다하고 무엇이든을 통과하는 방법은 매우 효율적으로 할 수 있습니다 그리고 가능한 빨리 자신의 최종 목표에 도착 하는가? [Malan] 그​​리고 이전에 반드시 원하는 게 뭔지 모르면서 사용자에 대한 요셉의 관점으로, 당신들이 지금 HTML에 대해 알고있는 내용에 기초하여 당신은 체크 박스, 라디오 버튼, 선택 메뉴, 입력 필드와 같은을 가지고 어떻게 비행에 대한 시작 시간을 선택할의 개념을 구현하는 것? 

당신은 그 다양한 UI 메커니즘 중을 사용? 당신은 전에 배웠습니다 HTML의 양을 알고있는 경우 그리고 당신은 입력이 라디오 버튼, 체크 박스, 드롭 다운, 그리고 입력 상자 알고 당신의 자연 선택은 날짜를 선택 무슨 일 있었 을까? [학생] 입력. >> 입력. 아니면 심지어 드롭 다운 날짜가 모두 포함, 그렇죠? 따라서 구현할 수있는 왼쪽과 같은 더 복잡한 UI 메커니즘과, 당신은 슬라이더로이 과정이 훨씬 더 직관적 할 수 있습니다 시간이 계속하기 때문에, 사람들은 일반적으로 분리 된 덩어리의 관점에서 생각하지 않습니다. 괜찮아요. 마지막으로. 열 사용 편의성 추론. 우리가 얘기 모든 것들이 아마도 이러한 범주 중 하나에 해당. 당신은 사이트가 온라인으로 게시됩니다이 링크로 이동하는 경우 귀하의 사이트를 디자인으로 사실 수있을 겁니다, 마음에서 이러한 추론을 유지 엄지와 규칙. 당신의 프로젝트의 경우, 당신의 앱이 더 나은 설계하기 위해 당신이하는 일을 제안 먼저 종이 프로토 타이핑을 할 수 있습니다. 귀하의 응용 프로그램에 대한 생각하면, 매우 빨리 당신이처럼 보이도록 원하는 스케치 및 확인 모든 상자는 사용자가 사용하기에 매우 직관적 인 방법으로 배열되어 심지어 친구에게이 종이 프로토 타입을 보여 포커스 그룹을 시작합니다. 그냥 함께 2 ~ 3 명을하고 단지이 종이 프로토 타입을 터치하도록 요청 그리고 실제로 무슨 일이 일어나고 있는지 이해하는지 그들에게 새로운 화면을 표시합니다. 

당신이하길 원하는 것은, 해당 작업 동기를 부여, 그들에게 작업을 알려주는 불과 그들에게 응용 프로그램을 제공하고 그것을 사용할 수 있도록. 그들에게 그 이상의 설명을 제공하지 마십시오. 당신은 실제로 당신이 볼 수있는 방식으로 응용 프로그램과 상호 작용하게하려면 당신이 그들 옆에 서 있지 않았 더라면 어떻게 그것을 사용할 수 있습니다. 그래서 매우 중요합니다. 특히 것들이 주변에 점점 사람들이에 관해서 그에게 통찰력을 많이 줄 것이다 제가 의도하지 않은 방법으로? 그들은 화면에 특정 UI 메커니즘을 사용하고 계십니까 방식으로 그 hacky 일 일까? 그들이 그것을 그런 식으로 할 생각은 의도하지 않았다. 일단 당신이 그와 함께 완료, 당신은 무엇을 하시겠습니까? 귀하의 설계 바위, 그렇죠? 당신이 원하는하면 다시 할 해당 프로세스를 개발하고 싶은 것입니다. 그래서 당신이 그것을 개발 한 후 친구들에게 보여, 그것을 테스트 개발, 테스트, 개발, 테스트, 반복에 및 앞으로. 디자인은 매우 의미에 프로세스를 반복합니다. 당신은 실제로 그것에 대해 가지 일을 알게 한 후 무언가를 구축하고 있습니다 전에 실현하고 돌아가서 그에서 개선하는 것이 었죠. 이젠, 개발 부분에 대한, 그 토미는 휴식 후를 보여 무슨 일이야 그리고 어떻게 자동 완성 같은 것을 구현 할 수있을 것 상당히 간단합니다 방법 인치 [Malan]으로 토미는 질문 후, 여기에 설정합니다. 초기 웹 사이트의 많은 - 때와 요셉은 1990 년대 스타일의 웹 사이트를 말했다 그게 당신이 시작 시간을 선택하고자 할 경우 구현과 끝 시간이었습니다 말해서, 오늘 다시 하루에, 심지어 일부 웹 사이트에서, 이 작업을 수행하는 방법은, 당신이 드롭 다운에서 시간을 선택합니다 당신은, PM, 드롭 다운, 어쩌면 당신은 AM 선택에서 분을 선택 그리고 그 3 번을. 그리고 6 클릭 수와 어쩌면 일부 스크롤과 사용자가 실제로 의미에 날짜 및 / 또는 시간 범위의 일부 종류를 제공 할 수 있습니다. 

그럼 확실히 차선 아직 지금까지 우리는 표현 능력을 본적이 없어 언어 중 하나에 우리는 무언가 섹시을 할 살펴 봤는데 시작 시간과 종료 시간이 슬라이더처럼. 하지만 우리가 스크래치에 대해 얘기 할 때 주 다시 0으로 생각한다면 너무 확실히 일을 저지른 위젯이 없었습니다. 당신은 정말 그냥 루프 약관 및 같은 같은 이러한 기본했다. 그러므로 HTML의 세부 사항과는 독립적 지금 매우 추상적 사고 종류 정말 시작 시간과 종료 시간 슬라이더 같은 무슨 일 이니? 내 마우스를 이동하고는 왼쪽에 저 작은 당근 기호를 클릭하면 하고 드래그 시작 프로그램, 당신이 구현할 수 싶습니다 그렇게 해주? 어떤 질문, 물어 할 수 있도록 어떤 부울 식을 하시겠습니까? 정말 무슨 일이야? 새미? [학생] 커서의 위치는 어디 있나? >> 좋아. 커서의 위치는 어디 있지? 이것은 우리가 스크래치 다시 표현하기 위해 필요한 어떤 것이 그것은 위치 또는 색상이나 같은에 따라 여부. 당신이 월요일에 이렇게 간단히 어느 헤비급 이러한 모든 이벤트라고있었습니다 웹의 세계에서, 그래서 onclick과 onkeypress 같은 일이있어 와 onkeyup 및 onmouseover와 onmouseout. 따라서 우리가 복용 한 경우에도 이런 일이 웹에 부여 실현 당신이 모르는 경우에도 페이스 북과 Gmail과 같은 사이트와 강의에 심지어 같은 아무 것도 없기 때문에 당신이 어떻게 그걸를 구현하는 방식을 나 문제는,이 동일한 기본으로 그걸 깨달았을 7로 설정 HTTP 및 매개 변수와 GET과 POST, 우리가 지금까지 바라 보았다 한 기본 HTML 입력과 그리고 프로그래밍 메커니즘과 순간에 연합군이에 대해 소개하기위한 것으로 당신은 주 0에 그랬던 것처럼 자신을 표현하는 시작할 수 있습니다 로 매우 직관적으로 끌어서 놓기. 

그럼, 토미 MacWilliam과 웹에 대한 우리 새로운 퍼즐 조각을했다 그게. 괜찮아요. 내 이름은 토미이고 자바 스크립트에 대해 이야기 할 수있을거야. 단 면책 조항 : 나는 자바 스크립트를 최고의 프로그래밍 언어입니다 견해이다 전체 전체 세계 요. 거기에 동의 많은 사람들이 있지만, 정말 놀랍 네요. 당신이 다른 클래스 또는 다른 언어로 C를 작성해야하는 경우 일단, C로 이동 그것은 인치 속도가 느려하기가 당신이 가진 모든 낮은 수준의 세부 정말 절망적이야 지금까지 C가 작성하는 것이 얼마나 짜증나는 게 슬픈 기분이면은, 그냥 돌아가 자바 스크립트를 써주세요. 그것은 해탈의 경지입니다. 당신은 나쁜 일에 대해 훨씬 기분이 나아질거야. 자바 스크립트의 마법이 많은 물건을 조작하는 능력에서 유래 그 페이지에 이미 있습니다. 우리는 PHP 스크립트를 작성하면,이 서버에서 실행 된 결국 PHP 스크립트는 아마 HTML을 출력하는. 그 HTML은 클라이언트에 전송하고 그게이었다. PHP가 페이지에 단추를 추가하고자 할 경우, 예를 들어, 정말 그렇게 할 수 없어. 그것은 완전히 새로운 HTML 파일을 렌더링하고 브라우저에있는을 보내해야합니다. 자바 스크립트를 통해 우리가가 페이지에 이미있는 동안 우리가 물건을 업데이트 할 수 있다는 사실을 알고, 이 때문에 우리는 더 즉각적인 피드백을 제공 할 수 있습니다 이는 우리의 웹 사이트에서 사용자 경험을 향상시킬 수 있습니다. 자바 스크립트 선택자 잠깐 뉴스 레터를 살펴보세요. 우리가 HTML 페이지를 다운로드 할 때 우리는 알고, 그 DOM에 표시 할거야. 

DOM은 기억이 요소가이 대형 계층 구조에 관련되어 그냥이 큰 나무입니다. 우리가 pset 7에서 데이터베이스 일 경우, 우리가 할 방법을 알고하는 데 필요한 첫 번째 것들 중 하나는 데이터베이스를 쿼리했습니다. , 우리는이 큰 사용자 테이블을 가지고 있고, 때때로 우리가하고 싶은 말은 "나는 일부 조건을 일치하는 사용자들 중 일부를 원한다." 마찬가지로, 우리가 DOM이있을 때 우리는 그것을 쿼리의 일부 방법이 필요합니다. 우리는 말하는 방법이 필요하다 "나도 이렇게 생긴 버튼을 모두 갖고 싶어 "나 페이지에있는 모든 이미지." 그리고이 선택자은 우리가 그런 짓을 할 수 있습니다. 그러므로 빠른 뉴스 레터를 살펴보세요. 여기에 첫 번째 사람은,이 # 제출을 선택하려고하는 무엇입니까? 사람 기억 하는가? [안 들리게 학생 응답] >> 네, 맞아요. 이 제출의 ID가 페이지에 요소를 선택할 것입니다. 그리고 그렇게 해시 태그는 선택이 ID를 사용할 것입니다 말합니다. 어떻게 두 번째에 대해,이. 중심, 그게 무슨 선택합니다? 그래. >> [학생] 클래스입니다. 정확히 >>. 이 기능은 이제 클래스에 의해 선택하는 것이다. ID 여기 클래스 사이의 차이점은 ID가 고유해야합니다 일반적으로 어떤 공간 내에는 끝났 검색 중입니다. 당신은 전체 웹 페이지를 통해 검색 한면, 당신은 정말에만 제출의 경우에 따라서 특정 ID 1 개 요소가 있어야합니다. 클래스와, 다른 한편으로, 우리는 동일한 페이지에 개 이상의 요소를 가질 수 있습니다 같은 클래스가 있습니다. 이것이 내가 페이지에 중심 전부를 선택하려면 말씀에 유용 할 수 있습니다 보다는 단 1 건. 

그리고 마지막으로, 여기에 마지막으로 하나는 조금 더 복잡합니다 하지만이 DOM에서 선택 무슨 일이야? [안 들리게 학생 응답] >> 그게 뭐야? [학생] 태그의 아무거나. 우리는 여기이 부분이 >>. 두 번째 부분은, 내가 입력 태그 태그를 선택하려면 말 것입니다 입력 태그입니다 어떤 요소 때문에. 하지만 난 그냥 입력을 모두 선택하지 않으 제출 버튼 같은 뭔가가 입력 될 수 있기 때문에 및 텍스트 상자 같은 뭔가가 입력 될 수 있습니다. 그래서 말은이 대괄호로 난 단지 요소를 선택하려면 형 텍스트 말합니다. 어딘가 내 HTML 태그에 I 형이라는 속성을 가지고 그 속성의 값은 텍스트 여야합니다. 그럼 여기 첫 부분에 대해? 이 선택기의 첫 번째 단어는 그때 그때 공간이 입력 부분이 형태입니다. 그게 앞에 양식을 넣어, 무엇입니까? 이것은 기본적으로 우리의 쿼리를 제한하는 것이다. 우리가 페이지에 몇 가지 입력을 가지고있는 경우 일 수도 양식의 후손하지 않았다는 것을. 이게 할 것 건 만 원이 말 것입니다 어딘가에 위에있는 입력 태그 양식의 일부 부모 요소. 그리고 이런 방식으로 우리는이 더 많은 계층 쿼리를 만들 수 있습니다 그래서 우리는 주어진 선택 일치 모든 선택 할 필요가 없습니다. 우리는 다른 뭔가 해당 검색어의 제한 범위를 종류의 수 있습니다. 그래서 지금 우리가 페이지에서 요소를 선택하는 방법을 알고, 가 AJAX에 대해 조금 얘기 좀하자. AJAX는 비동기 자바 스크립트와 XML의 약자 여전히 유행 약자입니다. 그건 아주 XML 데이터를 표시하는 단순한 방법입니다 발생합니다. 

최근에 분실 인기의 종류, 그래서 AJAX의 X는 모든 시간을 사용하지 않습니다. 기본적으로 AJAX 우리가 수행 할 수 있습니다 어떤 HTTP 요청을 할 수 있습니다 자바 스크립트의 컨텍스트에서. 우리는 웹 브라우저에서, 우리는 페이지의 주위에 이동하고 있으며 우리가 링크를 클릭하면 그럼 우리의 브라우저가 어떻게 할 것은 우리가 어떤 링크를 클릭 HTTP 요청을합니다. 그 경우 경우, 데이빗, 말한 것처럼 있기 때문에 그러나 항상 이상적인 건 우리는 항상 사용자가 제출 버튼을 클릭하거나 링크를 클릭해야 만약 HTTP 요청을 포함 할거야 그 일을 알아 보려면 여기를 클릭하십시오. 따라서 AJAX와 함께 우리는 자바 스크립트를 대신하여 이러한 요청을 할 수 있습니다. 사용자가 페이지 나 어떤 일이와 상호 작용 할 때마다이 의미는, 우리는 실제로 우리의 웹 사이트에 다른 PHP 파일에 프로그래밍 요청을 할 수 있습니다 또는 다른 어떤 그 파일이 밖으로 침을 뱉하는 데이터를 검색합니다. 가 AJAX의 예를 살펴 보자. 이 잘하면 우리 중 누군가는 익숙되는 우리 CS50 금융 페이지입니다. 우리는이 페이지의 HTML을 보면, 우리는, 나는 몇 가지를 추가 한 것으로 볼 수 내가이 형태 ID를 부여하는 중 하나입니다. 나는 이드 = "폼 견적"고 말했다했습니다. 는 DOM에서 선택이 조금 더 쉽게 만들 수있을 거라고해서 내가 이런 짓을 한 난 그냥 아주 간단한 쿼리를 만들 수 있습니다 때문입니다. 내가 여기서하고 싶은 것은 제가 CS50 금융와 함께 문제를 해결하려는 것입니다. 우리가 finance.cs50.net로 이동하면, 제가 견적을 할 때마다, 나는이 얻기 견적 버튼을 클릭해야합니다 그리고 그 견적 버튼을 한 다음 다른 전체 페이지로 저를 소요 해. 그리고 다른 견적을 원하면, 내가 '뒤로'버튼을 누르해야하고 제가의 입력 나는 견적을 받아, 나는 '뒤로'버튼을 누르십시오. 이건 정말 최고의 사용자 경험을하지 않습니다. 이 주식 가격을 해당 속도가 느린면 누가 정말이 사이트를 사용 했 겠어요? 그래서 우리가 AJAX와 함께하고 싶은 것은 별도의 페이지로 이동의 단계를 제거 is 결과를 볼 수 있습니다 순서를 유지해야합니다. 

우리가 정말로 유일한 요구하는 것은 그 정말 작은 가격입니다 그는 데이터의 정말 작은 금액입니다. 그럼 또 다른 전체 HTML 페이지를 이동 나를 위해 필요가 없습니다 HTML의 새로운 배치를 다운로드, 아마, 좀 더 이미지를 다운로드 다른 CSS 파일을 그냥 날은 매우 간단한 질문에 대답을 위해 의 얼마나 많은이 재고 비용 않습니다. AJAX를 통해 우리는이 많은 쉽게 할 수 있습니다. 우리는 내가 quote.js라는 자바 스크립트 파일에 연결하는 건 여기를 참조하십시오. 의는 실제로 그 파일을 열어 보자. 거기가 아니야. 내 자바 스크립트 파일의 모든 HTML에 위치 거예요 되도록는 웹 브라우저에 액세스 할 수 있습니다. 그런 다음 우리는 자바 스크립트를 보시려면 여기를 별도의 디렉토리를 가지고 지금 여기 quote.js입니다. 이 파일의 상단에 내가로드 할 전체 페이지 기다리는하려는 여기 써 난 아무 짓도하기 전에. 그게 왜 필요? 내가 여기서 뭘 할거야 다음 것은 시작 요소를 찾는 것을 밝혀 그 어떤 선택 일치합니다. 이 요소가 페이지에로드하기 전에이 자바 스크립트를 어느 실행하는 경우는, 그럼 어떻게하려고 모든 성공할 수 없어 아직 없다 무언가를 선택하려고거야 때문입니다. 그래서 꼭대기이 줄은 생각은 모든로드 될 때까지 기다려야 한대 그래서 우리는 내가 찾는 모든 요소가 페이지에 실제로 있다는 보장하고 있습니다. 여기에 달러 기호는 내가 jQuery를라는 라이브러리를 사용을 의미합니다. 이 jQuery를 라이브러리는 우리가 단지 바라 보았다 이러한 선택기를 사용할 수 있습니다. 인자로 # 폼 견적을에 합격 한 후 $ 말을하면, 지금 우리가 살펴을 가지고 있다는 그 양식을 선택거야. 지금은 어떻게 든 메모리에서 해당 양식의 표현이 있습니다. 

지금은이 개체에서 양식의 표현, 지금에라는 기능을 사용하고 있습니다. 어떤이 함수가 수행하면이 이벤트 핸들러를 첨부거야입니다. 우리가 들으 려하고있는 이벤트는 제출 이벤트입니다. 따라서 버튼 또는 프레스 제출 사용자 클릭, 입력 할 때 이 이벤트는 발사 예정이다. 이 연결하겠다으로, 지금은 양식의 기본 동작을 무시할 수 있습니다. 이 자바 스크립트없이, 양식에 제출 것 어떤 PHP 파일을 우리는 액션 속성에 사용됩니다. 대신, 난 지금 잠깐, 잠깐, 잠깐, 당신이 실제로 그렇게하고 싶지 않아 말하는거야. 난 당신이 가서 PHP 파일을 제출하기 전에 이런 일이하고 싶습니다. 지금은 뭘하고 싶어요? 이 시점에서 나는 주식의 가격이 무엇인지에로드 든 AJAX를 사용하고 싶습니다. 내가 알아야 할 첫 번째 것은 사용자가 원하는 내용을 가공합니다. 나는 다른 선택기를 사용하는거야 그런 짓을합니다. 이것은 우리가 전에 바라 보았다 세 번째 선택이다. 이건 제가 폼 견적의 ID로이 양식 요소를 시작하려는 말합니다. 그런 곳에서 그 양식의 내부에 입력 요소가있을 그 심볼의 이름이 있습니다. 우리는 HTML를 다시 확인하면, 우리가 입력했던 본 [이름 = 기호]. 그게이 사용자가에 입력되는 해당 텍스트 상자를 선택 것입니다 것을 의미합니다. 그거 좋네요. 우리는 텍스트 상자가 있습니다. 이제 우리는 그 안에 알이 필요 해요. 우리는 여기에서이 메서드를 호출 할 수 있다는. 발하려면 그리고 이건 나 자기가 가지고있는 것을 텍스트 상자 알고 말합니다. 난 당신이 그 텍스트 상자에 입력 한 사용자는 걸 말해 싶습니다. 이제 우리는 사용자가 들어 입력 한대로 같다 기호라는 문자열이 그거 좋네요. 우리는 우리의 요청을하기 위해 이제 문자열을 사용할 수 있습니다. 이 녀석은 새로운 기능이며,이 $, 를 제외하고 우리는 더 이상 요소를 선택해야 할 건 우리는 jQuery를 우리에게 제공 한 다른 함수를 호출 할거야. 이 AJAX 기능은 실제로이 HTTP 요청을 할 수있어. 그래서 우리는 그에게 몇 가지 말씀이 있습니다. 제가 요청이 가고 싶은 곳 우리가이 기능을 말할 수있는 우선입니다. 어딘가에 내 프로젝트에서 나는 quote.php라는 HTML 디렉토리의 내부의 파일이 있습니다. 나는 로컬 호스트 / quote.php로 이동되면이 파일을 액세스 할 수 있습니다, 우리, 그냥 같이 보았다. 

그 페이지에 대한 요청을 할 수 내 자바 스크립트를 싶습니다. 어떤 종류의 요청 지금은? 양식이 방법 = "게시물"속성이 그 전에 우리는 본 그리고 그 방법은 우리가, POST 요청을 할 수 있다는 뜻 그래서, 대신 GET 요청보다 URL에 아무것도 넣어 않을거야 우리가 예를 들어, 웹 브라우저를 통해 페이지에 액세스하는 경우 어떤이 방금 발사 될 것입니다. 이제 내가 HTTP POST 요청을 만들고 싶어한다고 했잖아 quote.php에있는 페이지에. 우리가 양식을 제출하면, 우리는 그 양식의 내부 입력 요소를 액세스 할 수 기억 그 $ _POST 변수가 있습니다. 지금까지 이야기에서 우리는 실제로 아직 데이터가 함께 전송되지 않았습니다. 우리는 우리가 AJAX 요청을하고 있다고 한 그리고 여기서 우리가하는거야 요청의 유형입니다. 이제 우리는 실제로 페이지에 일부 데이터를 전송해야합니다. 우리가 데이터라는이 속성을 사용할 수있는 수행합니다. 이 속성의 값은 실제로 연관 배열입니다. 이것에 대한 이유는 우리가 데이터를 단 1 조각 그 이상을 보낼 수 있습니다 것입니다. 우리가이 중괄호는 여기에 다른 중괄호 안에 중첩이 이유입니다. 이러한 연관 배열의 키는 같은 일이 될거야 그 이름은 우리의 폼 요소의 속성으로. 그게 내가 기호의 핵심 함께 보내는 경우, 의미 내 PHP 페이지가 $ _POST [기호]와이 데이터에 액세스 할 수 있습니다 의미 우리가 양식을 제출했을 때 전에 그랬던 것처럼. 이제 실제 데이터는 우리가 보낼 이 연관 배열의 값을 내부가 될 것입니다. 

우리는 변수라는 상징이 텍스트를 저장 그래서 우리는 이제 기호의 키를 함께 보낼 하고 사용자가 들어 입력 한대로의 값 이제 우리는 우리의 PHP 파일이 실행 된이 HTTP 요청을했습니다 그리고 사실은이 요청을 만든 클라이언트로 이제 다시 일부 데이터를 보낼거야. 이제 우리는 서버가 우리에게 말을하던간에에 응답해야합니다. 우리가 성공 불리는이 마지막 속성이 그러합니다. 이러한 성공 키의 값은 실제로 함수가 될거야 그리고 여러분이 자바 스크립트로 할 수있는 정말 멋진 일 중 하나입니다. 뿐만 아니라 당신은 연관 배열의 값 내부로 ints 또는 배열을 할 수 있습니다 우리는 또한 기능을 할 수 있습니다. 그럼 성공을 말하면서, 이쪽은 내 핵심입니다. 결장은 값을 나오고 있다고 지금이 값이 실제로 기능입니다. 그래서 우리는이 함수에게 본질적으로 이름을 필요가 없습니다. 우리는이 몇 가지 기능이 될 것입니다 말할 수 있습니다. 그것은 1 인자를 받아 들일거야. 이 함수의 인수는 될거야 어떤 서버는 요청에서 우리를 다시 보냈습니다. 우리 브라우저가 요청을 보낼 때처럼, 서버는 다시 무언가를 보냅니다 그리고 브라우저는, 그것을 표시 우리가 요청을 한 AJAX의 맥락에서, 서버는 다시 뭔가를 보내 지금 우리는 그 문자열로 표현했습니다. 그 문자열로 그냥 페이지에 그를 표시하고 싶습니다. 나는 마지막 선택을하지 않을 수 없네요 그런 짓을합니다. 나는 ID의 가격 요소를 선택하고 싶습니다. 이것은 그냥 페이지에 만든 빈 사업부입니다 그리고 서버가 우리에게 돌려 보낸 어떤 경우가있을 수 있습니다 사업부의 내용을 설정하고 싶습니다. 사실 난 quote.php에게 조금 수정했습니다. 

오히려 렌더링 전화 및 일부 페이지를 렌더링보다 quote.php는 이제 단순히 문자열로 주식의 값을 인쇄 할 것이다. 당신은 실제로 페이지를 방문하면 그래서, 그 작은 문자열을 볼 것이다 주식 가격이 무엇이든지. 우리가 여기서 마지막으로해야 할 일이 바로이 함수가 false를 반환해야합니다 수 있습니다. 이건라는 것은 제가이 이벤트 핸들러 내부면 그 이벤트 핸들러는, 대신에 진정한 반환 false를 반환합니다 그게 내가 발사 할 수있는 원래 이벤트를 원하지 않는 것을 의미합니다. 이 경우, 우리는 자바 스크립트를 가지고하지 않은 경우 우리는 양식을 제출 웹 브라우저가 "나는, 함께 데이터를 보낼거야"라고 것입니다 그리고 그들은 다른 페이지로 보내거야. 지금 우리가 AJAX를 사용하기 때문에, 다른 페이지로 사용자를 보낼 필요가 없습니다. 우리는이 같은 페이지에 동적으로 결과를 표시 할거야. 우리는 정말로 어디서든 가고 싶지 않아, 나는 동일한 페이지에 있고 싶어. 따라서 거짓 반환하여, 우리는 양식이 그 방법을하지 않습니다 있는지 확인하십시오. 의이 실제로 어떻게 생겼는지를 살펴 보자. 우리 견적 페이지는 같은 보입니다. 우리가 무슨 일이 일어나고 있는지 볼 수 있도록 나를 여기까지 검열을 펼쳐 보자. 조금 덜 거대한합니다. 우리가 HTTP 요청을 모두 볼 수있는 우리가 네트워크 탭을 열면 기억이 있습니다 그 페이지에 일어나고 있습니다. 

기호 날은 AAPL에 입력하고 견적을 클릭 보자. 이제 우리는 애플의 점유율은 달러의 일부 숫자를 비용을 보았다 단지는 페이지에 게재하지만, URL은 전혀 변경되지 않았습니다. 사실 여기서 우리가 만든 HTTP 요청입니다. 우리는 quote.php에 POST 요청을했다. 그 말이 있습니다. 이 서버가 우리에게 돌려 보낸 것을이다. 그것은 더 이상 이미지와 그런 식으로이 거대한 HTML 문서없는 그냥 텍스트 행이고, 다음에 우리가 텍스트의 행을 표시됩니다. 우리가 헤더로 돌아가서 우리가 실제로 HTTP 요청의 내부 전송 확인할 경우는, 우리는 우리가 기호와 AAPL의 값의 키를 따라 보낸 여기에 볼 수 있습니다 이는 사용자가 들어 입력 한 내용입니다 이 좋은이지만, 여전히 성가신입니다. 난 아직도 주식 시세를 얻으려면이 버튼을 클릭해야합니다. 우리는 바쁜 사람들이고 우리는 단추를 클릭 할 시간이 없습니다. 사람들이 Google 순간 검색을 구현​​하는 경우 Google은 오래 전에이 조금 깨달았습니다. 당신이 입력 할 때 어떤 Google 순간 않는 것은 단지 당신을위한 결과를 표시 시작 그래서 당신은 더 검색을 클릭 대해 걱정할 필요가 없습니다. 사실, 재미있는 이야기가 그와 관련된. Google 순간 검색이 나온 후에 사람들이 같았 "우와,이 슈퍼 놀랍습니다." "이 너무 멋져요." 그리고 스탠포드 대학에서 학생 다운 시간에 19 살 사람 YouTube에서 즉시 호출이 사이트를했다. 모든 YouTube 즉시 효과적으로 즉시 유튜브를 검색 않습니다. 그래서 오히려 검색 YouTube.com를 누르로 이동하지보다 나는 CS50처럼 유튜브 인스턴트 식으로 입력을 시작하면, 우리는 속도가 느린 인터넷 연결하려고, 여기 볼 수 이러한 결과가 사는 웁니다. 우리가 실제로 우리 quote.js 파일에 대한 매우 간단한 수정을 할 수 있습니다 그러합니다. 폼이 제출 될 때 지금 우리는이 이벤트를 연결하고 있습니다. 우리는 정말 사용자가 더 이상 양식을 제출하기 싫어 그러니 대신이 이벤트에게 사용자가 프레스 키를 때마다 발사 보자. 하자 먼저 keyup에 제출에서 이벤트를 변경해야합니다. 오히려 양식 제출을 위해 대기보다 그 의미 그 모든 시간은 키를 누르면, 뭔가 일이 일어날 것입니다. 더 이상 전체 양식이 keyup 이벤트를 첨부하는 것이하지 않습니다. 우리가 정말 해당 검색 상자에 대해 고민하는 것이지. 

이젠, 우리는 오히려 폼 견적보다이 될 변경할 수 있습니다를 선택하려면, 폼 견적 우리는 입력해야합니다 (= 텍스트를 입력합니다) 또는 우리가 (= 기호를 이름) 말할 수 - 우리가 원하는 건 뭐든지. 이제 우리가해야 할 마지막 일이 있어요. 우리가 반환이 false했을 때 여기에 기억 우리는 우리가 기본 이벤트가 해고 싶지 않아요. 우리가 지금 사용하지 않도록 설정 한 경우하지만, 너무, 그런 일이 우리가 입력 무엇이든 더 이상 브라우저에서 표시 할 수 없습니다 그 텍스트 상자에 입력의 기본 동작 될 때문입니다. 우리는 더 이상 있으니,이 반환 거짓 파괴하도록 내버려 두지는 것을 무시하고 싶지 않습니다. 나는 AAPL을 입력하기 시작하면 우리는 그 내용을 저장하고 현재 페이지를 새로 고침하면 여기 하단에있는 주식 가격이 자동으로 완료되는 것을 볼 수 있습니다. 그래서 여기 CS50 금융 순간입니다. 유튜브 순간에 대해 실제로 재미있는 이야기 그 학생은 그냥 가지, 1 박 프로젝트로 작성합니다 그리고 다음 날은 그가 유튜브 CEO가 일자리를 제공했다. 그게 그렇게 간단하면 CS50 학생들은 최종 프로젝트는 님이 YouTube에서 일 수 있습니다. 그런 식으로, 그렇지 최종 프로젝트를위한 정말 멋진 생각이다? 우리는 우리가 통합하고 싶어하는 일부 기존 기능을했다. 우리는 사용자 경험을 좀 개선 갑자기 유튜브 순간에 뭔가를 검색하면 더 쉽게 할 수 있습니다 일반 YouTube에서 검색보다. 그래서 그게 요약하면 AJAX입니다. 

요셉이 보여주는 것을 예에서, 우리는 autocompletes을 많이 본 우리가 기억 할 필요가 없기 때문에 이들 autocompletes 정말, 정말 편리 - 예를 들어, 경우 애플의 주식 가격을 기억하지 않습니다 우리는 그냥, 오히려 나에게 무슨 말을보다 AA 뭔가 알고 "이 물건의 점유율이 많은 돈을 비용" 나는 가지 재고 AA로 시작 알고 싶습니다. 우리는 이미 포함되어 부트 스트랩 라이브러리 정말 멋지게 것을 할 수 CS50 금융의 내부. 당신이 자바 스크립트 태그에 여기 와서 Typeahead 아래로 스크롤하면 이건 그냥 누군가가 이미 우리에게 쓴 좋은 플러그인입니다 우리는 쉽게 같은 그 기능을 사용할 수 있습니다. 나는 입력 여기 A.로 시작하는 일부 주의 목록입니다 자, 내가이 정말 멋지다 생각을 말씀 있으며 내 페이지에서이 포함 할 때입니다. 그것은이 정말, 정말 간단 밝혀졌다. 가 quote3.js 여기를 뛰어 넘다 보자. 내 파일은 조금 다릅니다 보입니다. 아래에서 내 AJAX의 물건은 모두 동일합니다. 난 다른 페이지로 이동하지 않고 주식 데이터를로드하고 싶습니다. 하지만 지금은이 플러그인을 사용하고 싶습니다. 부트 스트랩 문서는 내가 그렇게 할 수있는 방법을 정확히의 훌륭한 예를 갖추고 있습니다. 내가하고 싶은 말은, "다음은, I가 자동 완성에 원하는 입력이야" 그리고 난 typeahead이라는 함수를 호출거야 그리고 우리의 Typeahead 물건을 처리 할거야. 이 목록을 초기화합니다, 우리의 필터링을 모두 할 것입니다. 그 알 필요가있는 유일한 방법은 우리가 autocompleting하는 어떤 데이터입니다. 그래서 그냥 문서를 읽고 예제를보고이 키를 알아 냈어. 내가 한 소스 키,이 키의 값을 제공하는 경우 내가이 자동 완성 싶은 것들 중 일부 배열입니다. 이 변수는 다른 파일에서 왔습니다. 나는 symbols.js를 엽니 다. 

이 symbols.js 문자열을 포함하는 그냥이 정말로, 정말로 큰 배열입니다 NASDAQ에서 이러한 주식 기호의 모든. 나는 HTML, 그래서 jharvard, vhosts, globalhost, HTML, 템플릿,로 다시 이동하려면 quote_form. 지금 quote3.js라고 그 이후로 내가 여기 포함 중 자바 스크립트 파일을 변경할. 자, quote3.js 있습니다, 그래서 그 별도의 자바 스크립트 파일에서로드 할거야 그 스트랩 자동 완성이 한. 지금은 브라우저에 다시 뛰어 내릴 때, 페이지를 다시로드, 내가 AA를 입력 시작 내 자동 완성이 있어요. 그리고 정말 간단했다. 나는 "여기가 자동 완성하려는 일이"말 코드 1 행을했다 갑자기 나는 전혀 노력하지 않는 많은로이 정말로, 정말로 좋은 기능을 갖추고 있습니다. 당신은 웹 사이트와 일 특히 프런트 엔드 쪽을 개발하고 있습니다 바와 같이, 이 사건은 정말 찾아 낼 거예요. 거기서 정말 멋진 무료로 도서관의 많은 많은 많은이 있습니다 그게 이런 일을 쉽게 슈퍼합니다. 사람은 단순히 기호의 큰 목록에 autocompleting의 단점을 생각 할 수 있습니까? 어떻게이 방법으로 가장 안 것일 수도? 그래. >> [학생] 시간, 당신은 [안 들리게] 많은 경우 그래. 지금 우리는이 거대한 자바 스크립트 파일을 다운로드하는 및 기호의 사람들이있어. 우리가 물건 톤이있는 경우 그리고,이 수 종류는 검색하지의 대기 시간을 증가 뿐만 아니라, 실제 파일을 다운로드. 좋아요. 또 다른 건? 지금의 관련성도 진정한 의미가 없습니다. 여기에 표시 A, 기업에 입력하면 A.로 시작 가장 인기있는 기업되지 않을 수 있습니다 

제가 애플에 도착하기 전에, 내가 원하는 내용을 어떻게 찾을 수 좀 더 문자를 걸릴 수 있습니다. 이 자동 완성 '관련성'의 의미를 가지고 있지 않습니다. 그냥 말거야 "나는 표시 할거야 일치든지." 대신 그, 어떻게 든 내 검색에 몇 가지 관련성을 통합하고 싶습니다. , finance.yahoo.com, 나는 야후 금융으로 가면 가면 나는 야후 금융의 페이지에 기호를 입력하려고하면 내가 GOOG를 입력하기 시작, 난 모든 걸의 좋은 목록을 수 있습니다. 야후 금융이 더 똑똑 여기서 뭔가를하고있다처럼 분명 것 같습니다. 그들은 어떤 관련이 있으며 또한 추가 정보가 주식의 이름처럼. 정말 기호의 내 재고 목록을 구할 수있는 것이 기록이다. 이를 원하고 그래서 그것을 데려 갈거야. 하자 몇 일을 그렇게 할 수 있습니다. 자, 먼저이 페이지에 검열을 열어 우리는이 페이지가 전혀로드되지 않은 것을보고, 때문에 그래서 아마도 데이터를로드 할 수 어떻게 든 AJAX를 사용하고 있어요. 우리는 로딩 무슨 자료를 찾을 수 있습니다. 내가이 네트워크 탭을 클릭하면, 이들은 해고 시작 요청을 모두가 될 것이다. 제가 사정에 입력하면 이제, 우리는 그냥 새로운 HTTP 요청을 받았 볼 수 있습니다. 데이터가 나오는 곳이있을 수 있습니다. 충분히 물론, 나는 이상하게라는 비트이 URL에서 보면, 우리는 야후로부터 데이터를 보내는 곳이 정확히 것을 볼 수 있습니다. 

나는 정신에 조회 기능을 매우 유사 suggest.php라는 별도의 파일을 만들었습니다. 원래는 야후의 URL에 검색어를 만들 수있을 거라고, 일부 데이터를 다시 그리고 나에게 다시 보낼 수 있습니다. 지금, 오히려 기호의 큰 거대한 목록을 사용하는 것보다, 나는 야후의 좋은 관련성 가지를 사용할 수 있습니다 그리고 난 그 거대한 자바 스크립트 파일을 다운로드 할 필요가 없습니다. I는 실제로 관련 주식 기호를 당길거야. 그에 뛰어 봅시다. 따라서 HTML, JS. 우리는 quote4에 지금하고 있습니다. 이제 우리는 더 이상 자바 스크립트 파일의 큰 목록을 사용하지하고 있습니다. 그러나 디자인 문제의 작은 종류가 있어요. 우리는 AJAX에서이 비동기했다했습니다. 그 말의 뜻은, 내가 AJAX 요청을 할 때이다 내 AJAX 요청이 실제로 시작되는 그래서 여기에 8 호선, 이렇게이다. 자, 이제 내가 마약 좀 할거야 그 여기 몇 가지 코드가 있다고 가정 해 봅시다 페이지의 사용자 또는 변경 무언가를 알려 좋아요. is 일은 없을거야 어떤 브라​​우저는 계속이 요청을 기다리지 않을 것이다 전에 내려 오는이 줄을 난다. 그게 비동기 부분입니다. 그것은이 요청을하면 끝이 할 때마다 "말할거야 "다시 내가 성공의 내부 전화 당신에게 말하는 것을 그 함수를 호출합니다." 우리가 사전에 모든 주식을 그냥 다운로드 할 수 있다는 것을 뜻한다. 우리는 요청을하고 돌아 오는 것을 기다리해야합니다. 전에 그 의미, 우리는 단순히 부트 스트랩을 말할 수 "다음은 I가 자동 완성으로 할 일의 목록입니다." 우리가 알고있는하지 않기 때문에 우리는 더 이상 더 이상 할 수 없습니다 우리가 실제로 자동 완성 싶은. 그 저쪽 스마트 사람들이기 때문에 다행히 스트랩이 생각 그리고 그들은 실제로 우리에게 Typeahead 플러그인을로드하는 또 다른 방법을 주었다. 전에,이 소스 속성의 값은에 자동 완성 할 일이 바로이 큰 배열했다. 

이제 소스 속성이 실제로 기능입니다 이 기능의 목적은의 자동 완성의 일이 무엇인지 파악하는 것입니다. 그렇게 알아 내는데거야 방법은 야후 금융 물어 줄 거예요 자동 완성에 최선 사항은 무엇입니까. 난 매우 유사한 AJAX 요청을 만들거야 그런 짓을합니다. 나는 suggest.php에서이 페이지를 요청거야. 난 아직도 기호 함께 보낼. 그리고 지금의 성공은, 부트 스트랩 문서가 말해 줬어요 순서에 물건의 목록을 입력 할 수 제가해야 할 모든 콜백 함수에 지금이 배열에 전달됩니다. 그러나 잠깐만 요. 이것은 배열이되어야하고 AJAX가 다시 텍스트 나 보내는 경우 어떻게 그런 일이 가능합니까? 이 JSON이라는 데이터를 교환하는 새로운 방법을 소개합니다. 이 경우 우리는 텍스트의 간단한 문자열을 다시 갈수 없어요. 이제 우리는 주식 기호의 더 복잡한 목록을 다루고 있습니다. 이러한 주식 기호는 또한 회사의 이름이나 현재의 가격 등을 포함 할 수 있습니다. 그냥 어떤 예측 방식으로 포맷되지 않은 큰 긴 문자열을 사용하여 나에게 야후의 서버에서이 데이터를 얻을 수있는 가장 좋은 방법이 될 일이 아니 나는 쉽게 이해할 수있는 방법은 아니에요. JSON은 우리가 자바 스크립트에서 연관 배열을 만드는 방법을 활용하는 기술입니다. 이것은 자바 스크립트 연관 배열처럼 생겼다 가 있기 때문에 그리고 사실입니다. JSON 자바 스크립트 객체 표기법을 의미합니다. 이것은 기본적으로 앞뒤로 데이터를 전송하기위한 형식에 동의합니다. 이 JSON 개체 또는 JSON 연관 배열 여기에 나에게 코스에 대한 데이터를 전송하고 있습니다. 

이 배열의 key는 cs50의 값이 코스 같은 일입니다 아래로 여기에 우리는 내가 배열 값을 가질 수 있습니다 것을 볼 수 있습니다. 나는 문자열 필터링과 같은 작업을 할 수 있으며, 쉼표에 보이지 않는 그리고 그런 미친 짓을. 이이 JSON 형식으로 선언되어 있기 때문에, 자바 스크립트와 jQuery를 이미 문자열을 변환 할 기능이 실제 자바 스크립트를 연관 배열에이 JSON 닮은 우리는 함께 일 할 수 있는지 확인하십시오. 그 일을하면 더 이상이 파일 suggest.php 없다는 것을 말씀처럼 간단합니다 돌아 단순히 텍스트 문자열에 파견 하지만 난 그게 다시 JSON 저를 보내 거라는 걸 알아요. 그거 JSON은 자바 스크립트 연관 배열로 변환 할 수 있다는 것을 의미합니다. 그리고 jQuery를, 당신이 날 위해 이렇게하고 싶습니다. 그런 의미 여기이 응답 매개 변수, 이 더 이상 단지 문자열이다. 우리가 jQuery를 얘기했기 때문 여기 좀 JSON을 제공 jQuery를 말할 수있을만큼 영리 될 것입니다, "당신은 JSON을 원 하나?" "나는 당신을 연관 배열로 그 변환 할거야." 우리가 quote4.js이되면의가 실제로 네트워크 탭을 살펴 보자. 우리는이을 변경하고 페이지를 다시로드합니다. 지금은 다시 - 입력 겠어. 나는 suggest.php에 몇 가지 요청을했다, 지금이 응답 한 오히려 단지 문자열보다, 그것은 JSON입니다. 그래서 열린 곱슬 브레이스, 전해지는 이야기가있다 "여기에 연관 배열이 오면을." 

이 연관 배열의 첫 번째이자 유일한 키는, 기호라고합니다 그리고 여기에 관련 기호의 모든 배열입니다 그 거대한 목록에서 야후 금융에서 지금은오고 있습니다. 그래서 내가 쉽게 자동 완성 플러그인을 채울 수 있습니다 방법 이미 정해진거야 로컬 파일에서 오지 않을거야 몇 가지 데이터를 하지만 다른에서. 그것은, 우리가 실제로 JSONP라는 기술을 활용할 수 있다는 판명 또는 보호구 JSON, 그이 suggest.php 중계를 제거합니다. 대신 여기서 그렇게,의 대신 내가이 더욱 개선 할 수있는 방법을 살펴 보자. 나는 스트랩의 Typeahead을 정말 좋아해요. 정말 좋은 데요. 그러나, 우리는 자바 스크립트를 잘지고있어 우리는 가지이 스스로하고 싶어 어쩌면이 플러그인 일을 할 수 일을 좀 봐. 그 Typeahead 일을 사용할 수 없어 더 이상하자, 과의 제안 주식 목록 우리 자신을 봅시다. 여기 quote6.php에서 우리는 같은 방법으로 시작하려고하고 있습니다. 때마다 누군가 유형 무언가를, 우리는 AJAX 요청을 만들고 싶어. 이것은 우리의 원래 CS50 금융 인스턴트와 비슷합니다. 오히려 quote.php에 대한 요청을보다 지금 우리가 이전처럼 동일한 파일에 요청을하는거야,이 suggest.php, 이는 단지 야후 금융에서 데이터를 끌어 것입니다. 

다시, 우리는 여전히 JSON을 기대하고 있지만 Typeahead 우리를 위해이 일을하지 않습니다 지금부터 우리는 또한 현재 텍스트 상자의 내부에있는 값을 함께 전송해야합니다. 이제 우리는 야후 금융을 요구할 알고 그래서 지금 여기에 우리가 요청이 완료되면 실행하고자하는 기능입니다. 우리는 우리의 목록을 만들기 위해 플러그인을 필요가 없습니다 우리가 실제로 제안 목록을 작성하는 것 어디서 왔어. 그 작업을 수행하려면 많은 PHP처럼 우리는 HTML의 이러한 큰 문자열을 합칠 그리고 우리가 그들을 인쇄, 우리는 자바 스크립트에서 동일한 정확한 일을 할 수 있습니다. 먼저 우리는, 제안이라는 문자열을 시작 할거야 이 문자열은 그냥 HTML을 포함 할 것이다. 우리는 일의 목록을되고 싶어, 그래서 우리는이 목록 태그로 시작 할거야 지금 우리는 우리에게 반환 된 기호의 전부를 반복거야. 우리가 데이터 유형 말한 있기 때문에 기억 : 'J​​SON'을,이 문자열이 아닙니다. 이 이미 우리를 위해 배열입니다. 정말 잘 됐어. 우리는 단순히 "나는 당신이 목록 요소를 추가하고 싶습니다."라고 할 수 있습니다 우리는 그런 측면에서 요소 안에 넣는 것 우리는 그게 뭔지 알 수 있도록 우리는 그것을 제안하는 클래스를 제공합니다 지금 여기서 우리가 야후 금융에서 돌아 왔을하는 기호입니다. 

일단 우리가 다시 들어온 기호 각각에 대해 요소를 만들었습니다 우리는 목록을 닫습니다 싶습니다. 이제 제안이 작은 HTML 조각을 나타냅니다 해당 페이지에 넣을 때 우리가 찾고있는 물건의 목록 될 것입니다. 지금의이 실제로 페이지에 해당 넣어 보자. 난 사실 다른 빈 div를 만든 내가 그것을 제안의 ID를 제공 한 할 수 있습니다. 우리는 주식 데이터의 가격을 표시 사업부의 내용을 설정 많은 것 우리는 이제 그냥이 문자열이 뭐든간에이 사업부의 내용을 설정하려면 이러한 기호를하는가 포함되어 있습니다. 이 HTML 방법을 사용하면,이 제안 변수,이 문자열은, HTML의 문자열입니다. 나는 당신이 HTML을 및 제안이라고 사업부의 안에 넣는 것이 좋습니다. 우리는 지금 DOM에 뭔가를 추가했습니다. 우리는 지금 우리가 페이지에 표시 할 수있는 DOM에 몇 가지 새로운 요소를 추가했습니다. 이 모양을 보자. 우리는 quote6에로드 지금 우리는 돌아 오시면 지금은 AAPL를 입력 시작할 때, 우리는 더 이상 부트 스트랩 자동 완성을가 없습니다 하지만 지금 우리는 우리 자신을 만든이 목록을 수 있습니다. 이 예를 들어, 부트 스트랩 Typeahead보다 조금 더요입니다 하지만 우리가 다른 일을 할 수 없습니다. 우리가 부트 스트랩 플러그인을 찾고 있던 때, 우리는 autocompleted 때, 자동 완성 값 중 하나가 AAPL 보았다. 정말 도움이되지 않을 수 있습니다. 사용자로, 즉시 주식 기호를 모두 인식 할 수 있습니다. 회사의 실제 이름은 제가 아마 인식 할 가능성이있어 있습니다. 그럼 정말 도움이 될 경우가 아닌 AAPL 말을하지 않을 이 애플과 같은 말을 우리가이에게 자신을 압연했기 때문에, 우리는 정말 쉽게 그렇게 할 수 있습니다. - 여기서 우리의 마지막 견적 파일을 열어 보자, quote7 때문에. 

그런 것 같아요. 나는 단지 기호보다 더 우리에게 돌아갑니다 다른 PHP 파일을 만들었습니다. 또한 우리 회사의 이름을 돌려 줄 것입니다. 그래서 우리는 같은 일을하는거야. 우리는 AJAX 요청을하고 있어요. 요청이 완료되면, 우리는 여기이 기능을 실행하는 것 이 기능은 요소의 큰 문자열을 구축하려고합니다. 하지만 이곳의 차이는이 목록의 값이 더 이상 단지의 상징 없다는 것입니다 지금의 이름입니다. 그래서 우리는 작은 문제가 있습니다. 우리는 조회를 사용하는 경우, 우리는 어떻게 든 그것을 기호를 전달해야합니다. 우리는 마이크로 소프트와 같은 조회 무언가를 전달할 수 없습니다. 우리는 MSFT를 전달해야합니다. 우리가 HTML을 작성할 때, 우리는 좋은 내장 된 속성의 많은이 있습니다. 는 그 HREF 또는 클래스와 관련된했을 수 있습니다. 하지만 우리가 정말 지금 필요한 것은 이러한 링크의 각입니다 그와 관련된 주식 기호가 있습니다. 더 내장 된 HTML 속성 주식 기호에 대한,이 없습니다 하지만 다행히, HTML5는 우리가 원하는대로 할 우리 자신의 속성을 작성할 수 있습니다. 데이터 기호를 말하여, 새로운 속성을 도입했습니다 그의 이름은 그냥 구성, 그리고이 데이터를 prefaced 있기 때문에 괜찮습니다. 이제 우리는 주식에서가의 상징 내부에 저장하는거야. 그게 의미하는 것은 우리가 회사의 이름의 값을 표시하는 경우에도 해당됩니다 우리 자동 완성의 내부에, 우리는 여전히 기호를 기억하고 그는 각 회사와 연결되어 있습니다. 우리가하는 방법은이 요소 자체의 내부입니다. 그게 우리가 한 번 더 변경해야 의미합니다. 우리가 지금 클릭하면, 우리는 실제로 심볼 속성을 활용해야 단지 그 값보다는. 우리 백업하는 경우, 우리는 제안에 이벤트 핸들러를 첨부합니다. 이러한 제안 중 하나는 현재 클릭 할 때마다 내가 뭔가를하고 싶습니다. 내가하고 싶은 것은 그 입력 상자의 값을 변경합니다. 지금은이 같은 발 기능을 설정하고 싶습니다. 

따라서 인수없이이 발 기능은 텍스트 상자에 이미 어떤로 돌아 것은 당신이에게 문자열을 제공한다면, 그 문자열을 가지고 텍스트 상자에 넣어거야. 나는 동일한 방식으로 해당 텍스트 상자를 선택거야. 이 이름은 폼 견적의 상징 안에 있습니다. 지금은 그것을 속성 데이터 심볼의 값을 보내겠습니다. 여기이 물건이 $ (이) 새로운 기능입니다. 이게을 의미하는 것은 클릭 된 요소입니다. 우리는 클릭 이벤트를 부착하지하고있는 것으로 볼 수 있습니다 개별적으로 제안의 클래스와 각 요소에 있습니다. 오히려, 우리는 다르게이 조금 접근하고 있습니다. 대신 우리는 할 때마다이 제안 사업부의 어떤 내부, 말 어떤 기억, 그 목록은 단지 컨테이너입니다 이 사업부의 안쪽에 무언가를 클릭하고 제안의 클래스를 가지고하는 경우는, 이 이벤트가 발사하고 싶습니다. 기본적으로 우리가 할 수있는 무슨 뜻인지 우리가이 같은 이벤트 핸들러를 재사용 할 수 있습니다 목록에있는 것들 모두. 그래서 우리는 첫 번째 요소에 대해 하나의 이벤트 핸들러를 할 필요가 없습니다 두 번째 요소 및 다른 이벤트 핸들러. 우리는 대신 "나도 같은 이벤트 핸들러 내 목록의 모든에 적용하고 싶습니다."라고 할 수 있습니다 그러나 우리는 어떻게 든 클릭 한 요소 알아야합니다. 이것은 "이"키워드는 그냥 나타냅니다. 이것은 단지 사용자가 클릭 된 개체입니다. 난 그냥 3 링크를 클릭하면,이, 그 세번째 링크의 요소를 나타냅니다 이는 I는 속성, 데이터 기호를 얻을 수 있다는 것을 의미합니다 우리가 알고있는 난 그냥 클릭 회사와 연결된 기호를 포함 할 수 있습니다. 우리는 우리의 금융 페이지로 돌아 이동, 경우 우리는 지금 한 번 제가 MSFT 같은 입력을 시작 것을 알 수 있습니다 우리는 단지 주식 기호를받지 못했습니다 더 이상 우리는 이제 실제 기업을지고있어. 하지만 이러한 회사 중 하나를 클릭하면, 우리는 회사의 이름으로 우리가 실제로 텍스트 상자를하지 채우지 있는지 볼 수 있습니다 하지만 그 데이터 속성의 내부 저장된 상관없이. 그리고 사실은 바로를 클릭하여 이러한 요소 중 하나를 검사하는 경우 및 요소를 검사 클릭, 우리는 실제로이 어떻게 생겼는지 볼 수 있습니다. 

이게 우리가 루프를 위해 내부 만든 것이지 기억 우리가 HTML의 문자열을 구축 때. 우리는이 데이터 기호가 훌륭 MSFT의 값이 여기에 볼 수 있습니다. 그게 우리가 기대했던거야. 그 상징이며 우리가 우리가 사용하는 데 필요한는 값을 가지고하는 방법 이 텍스트 상자의 내부. 그 지루 종류이기 때문에 그 정도면 견적 양식입니다. 그냥 포트폴리오 페이지에 일부 빠른 개선을 보자. 당신이 한동안 CS50 금융을 사용하고 있다면 당신은 주식을 많이 사고 파는 시작 결국이 표는 꽤 큰 얻을 것입니다 당신은 물론 주식 시세 표시기를 원하는거야. 테이블이 정말, 정말 큰되면, 그것은 그 위에 검색하려고 사용자에게 유용 할 수 있습니다. 제가 디즈니 같은 입력을 시작하면 검색 상자의 내부 내 미키 마우스 재고를 찾고, 우리는 테이블이 현재 필터링되는 것을 볼 수 있습니다 방금 인치 입력 한 내용에 기초하여 이 기능은 슈퍼 복잡 보이는데,하지만 정말, 정말 간단합니다 jQuery를하고 자바 스크립트로. 이 portfolio.php 파일 portfolio.js라는 JavaScript 파일이 포함되어 있습니다. 씨가를 살펴 보자. 따라서 HTML, JS, 포트폴리오. 우리가 테이블에 검색하는하고있는 곳이에요. 제가해야 할 첫 번째 것은 텍스트 상자에 이벤트 핸들러를 첨부 is 우리는 우리의 필터링 기능이 발사하려는 알고 있기 때문에 때마다 사용자가 누르는 무언가를 우리가 검색 버튼에 대한 시간이 없기 때문입니다. 우리가해야 할 첫 번째 문제는, 사용자가 무엇을 검색하는지 알아내는 처럼 우리는 전에 했어요. 이 키워드는 사용자가 상호 작용하는 현재 요소를 의미합니다. 

사용자가 검색 상자와 상호 작용하기 때문에 이 검색 창을 나타냅니다 $, 그래서 this.val는 사용자가 현재 입력되어있는 검색 상자 안에 뭐가 우리를 제공합니다. 그래서 우리가 뭘 원하는지 우리는 모든 행을 통해 반복 할 수 있습니다 우리 테이블의 내부. 우리 테이블의 모든 행을 선택하려면, 내 말은, 저 테이블에게 표 포트폴리오의 ID 준 각 행은 TR 요소로 표현됩니다 그래서 선택은 나에게 큰 배열로 돌아갈 것이다 내 테이블에있는 모든 행의. 지금은 그 배열을 통해 반복하고 싶습니다. 나는 루프에 할 수 있지만, jQuery를 실제로 우리라는 좋은 기능을 제공합니다 "를 각각." 어떤 각 수행하면, 각 하나의 인수를 사용합니다 그 인수는 기능입니다. 만약해야 할거야하면이 목록의 내부의 모든 요소에 해당 기능을 적용 할거야입니다. 이 함수는, 전자이에요 인수 걸립니다 이 함수가 실행되면이 전자는 첫 번째 행으로 대체 될 것입니다 다음 두 번째 행 다음, 세번째 줄. 이 방법으로이 루프에 대해를 실행과 같은 일이 그리고 루프에 대한의 색인 내부에 근거하여 현재의 요소를 계산. 각 반복에서, 테이블에 이러한 요소 각각에 대해, 행 내부 셀의 텍스트를 - 그 요소의 텍스트 있는지 확인하고 싶어 - 제가 검색하는 일치합니다. 명령이 큰 긴 문자열 내가 할 수있을 방법입니다. 우선, 다시이 지금을 말합니다 - 그게 새로운 기능 내부이기 때문에 - 이 이제 테이블의 현재 행입니다. 나는 테이블의 현재 행을 받고 그리고 나는 그것의 아이들의 모두를 얻을 수 싶습니다. 단, DOM은 계층 트리입니다 이는 요소가 아이들의 번호가 있다는 것을 의미합니다. 

이. 어린이 기능은 다시 나에게 모든 요소의 배열을 반환 것입니다 그이 경우, 테이블의 행에서의 자녀입니다. 이 단지 행 내부의 셀입니다. 난 단지 첫 번째 셀을 통해 검색하고 싶습니다. 이. 첫번째 기능은 내게 그 배열의 첫 번째 요소를 제공 말합니다. 그런 다음 텍스트 기능은 해당 셀의 안에 나를 정확히 얻을 말합니다 그 텍스트를 검색하려면 때문입니다. 마지막으로, 그렇게는 소문자로 변환하자 그래서 우리는 문자 대소 문자를 구분하지 쿼리를 수행 할 수 있습니다. 마지막으로, 우리는 테이블 안에 당신 문자열이 우리가 검색하는 문자열이 포함되어 있는지 확인하고 싶습니다. 자바 스크립트에서 indexOf 함수는 그냥 않습니다. 그것은이 문자열이 다른 문자열이 포함되어 있는지 여부를 우리에게 알려줍니다. 이 세포 내가 검색하는 포함 된 사실이라면, 그럼 내가이 표시된되었는지 확인하고 싶습니다. 쇼 방법은 "요소를 표시합니다."라고합니다 이 경우가 아닌 경우, 해당 내가 포함되지 않습니다 찾고있어 어떤 의미 해당 행에서, 나는 숨기려면 있으므로 사용자의 것입니다. 더 이상 우리는 전체 테이블을 볼 수 없습니다 그건 어디 그 좋은 필터링 효과를 달성합니다. 당신도이 폭탄을 만드는 방법에 관심이 있다면 우리는 온라인 소스를 게시합니다. 그러나 정말 간단합니다. jQuery를이 애니메이션과 조작 CSS의 속성에 대한 멋진 방법이 있습니다. 그래서 그것 땜에 있습니다. 

그런데 무슨 뭔가요? 당신은 몇 일 안에 볼 수 있듯이, 최종 프로젝트 제안 때문입니다. 최종 프로젝트 제안이 당신에게 몇 가지 질문을합니다 하지만 그 중 세 이정표가 될 것입니다 - 한명은 "좋은"이정표, 더 나은 이정표, 한 가장. 너희들이 도움이 정말되는 아이디어는 기대를 설정 그래서 최소한 당신은 최종 프로젝트의 출력과 행복 할 것 그리고 지금까지 당신이 염려하는 "좋은"입니다. 하지만 당신은 뭔가 조금에 도달 할 수 있을지에 관심을 더 또는 가장 일, 우리는 또한뿐만 아니라 그 방향을 밀어를 정렬합니다. CS50 해킹 - 어 - 쏜는 한편, 몇 주에 있습니다. 일반적으로, 우리는 때문에 관심 복권으로 기준으로이 작업을 수행, 하지만 아이가 우리가 하버드 광장에서 셔틀 버스에 우리의 몇 백 할게요 아르 아래 Microsoft는 aptly "왕따"라는 아름다운 시설을 갖추고 있습니다 켄달 광장 - 뉴 잉글랜드의 연구 및 개발 센터. 우리는 8 시쯤에 우리는 음식을해야 갈 수 있습니다. 오전 1시 주변 우리는 좀 더 음식을해야합니다. 약 5 아직도 깨어 있으면 우리가 캠퍼스로 돌아 IHOP 또는 가져 가보합니다입니다. 이 목표는 최종 프로젝트에 잠수하는 것입니다 같은 반 친구와 직원과 함께. 그런 다음 며칠 후 CS50 박람회입니다 너희들이 작업을 소개하기 위해 어떤이 정말 기회가 될 운명입니다 학기 및 성과 서로 어깨를 문지르며 모든 사람들이 무슨 짓을했는지의 감각을 가져 오는 동안. 그렇게 말과 함께, 토미와 요셉에게 많은 감사, 우리는 월요일에 표시됩니다.  [박수]