[Грає музика] 

Девід Малан: Це CS50. Це початок тижня дев'ятій. І це те, що матиме був 200-річчя г Буля. Так що це хлопці кому ми згадували досить кілька разів про використання Логічні змінні істинні і помилкові, 1 і 0 тощо. І це було Google, данину з ним сьогодні. Він перетворився б 200. Так що, якщо ви хочете, щоб приєднатися до нас на обід CS50, поглянути на посилання на веб-сайті курсу. І такі особи, як і друзі це чекає вас тут, в Кембриджі. Особи, як вони чекають Вас в Нью-Хейвені. І справді, Кен Нью-Гейвен люб'язно те, що називається Анімовані GIF Ілая тут недавно lunch-- GIF ще інший графічний формат файлу, з якою ви familiar--, що виглядає трохи щось подібне. Так просто послідовність of-- ОК. Тут ніхто в Кембриджі чи не сміється. Але в Нью-Хейвені, це це дійсно смішно, чи не так? Добре. 

Так що приєднуйтесь до нас там. Тут, в Гарварді, Зокрема, це середа, якщо ви студент-другокурсник або першокурсник even-- або навіть junior-- мислення рішень перемикач в комп'ютер наука, знати, що там буде Будьте CS консультування справедливо це Середа, незабаром після класу в 4:00 вечора в комп'ютері наука будівлю Максвелл Дворкін. Ми поставити це на курс-х сайт завтра, як добре. Пончики, я сказав, буде поданий. 

Добре. Так смішно story-- я тикати навколо в Інтернеті, і я знайшов деякі старі архіви мого колишнього сайту. І виходить out-- навколо цього Час, здається, дуже своєчасно так я розумію, що вибори UC близько готуватися знову. Так що я побіг за UC, втратив нещасно. І, може бути, це було в частині, чому. Так що це був мій веб-сайт в той час. З якоїсь причини, я думав, що це було гарна ідея, перш, ніж говорити людям, що моя платформа була, і чому вони повинні голосувати за мене, що у них є натиснути, щоб увійти, щоб знайти, що інформація, яка в ретроспективі це вид моторошний. Я дійсно не знаю, що це було. 

Але це, звичайно, не допомогти моїй кампанії. Я також виявив, що старший год-- мене була ця календар Маппет. Маппет-шоу були почасти в моді в той час. Або, може бути, вони не були. Я був календар Маппет тоді. І я думав, що це було б здорово, щоб ім'я мій комп'ютер в мережі Гарварда frogman.student.harvard.edu. У той час, ми все однозначно ідентифікуються імена хостів. А ви могли б вибрати кілька марнославство ім'я замість свого імені. І я пішов з плавця з деяких причин. 

І тоді я started-- я провів багато часу натискання через ці посилання цього ранку. І це була моя сторінка о, який в даний час вид здається чарівні. Але це також свідчить про те, щоб просто як далеко технологія прийшла. Я маю на увазі, тому в день, 486 було щось. У ці дні, це супер, супер, супер повільно і добре менш ніж ви могли б мати у своєму власні кишені в ці дні. Там більше там, що був ще більш ніяково. Тому я залишаю його на що. Але це був мій перший набіг в web-- про, немає. Це не було. Мій перший реальний набіг в веб-програмуванні був цей сайт, який я просто забув. У якийсь момент, я дізнався, як зробити повторювані фонові зображення. І так я знайшов це черепиця ефективно, як хокеїста, футбол, гольф і куля, або що б це не для сайту Фрош IMS. І це було насправді, дійсно перший веб-проект на основі я взяв on-- Я думаю, що, може бути, студент-другокурсник рік, молодший год-- після того, CS50 і CS51, один із загальних подальших по класах. Я помітив, дивлячись у в архівах що один з моїх наступників і друзі, Лі, начебто змінилося авторське право до себе. Але це було дійсно те, що Я повинен володіти замішання. Але в той час, це був перший сайт, як я сказав кілька тижнів тому, за допомогою якого міг першокурсник зареєструватися очної спорту тут. І так виходить, що фонові зображення так не така хороша ідея. Але полотно було новим, і все, що ми експериментували. І це те, що я мабуть, зробив в той час. Добре. Так що без подальших церемоній, ми перемикаємо Шестерні сьогодні, щоб дати вам, насправді, заключна частина, що ви могли б знайти особливо корисно для кінцевих проектів але також, що почне зробити весь світ павутину відчуваю себе трохи більш зрозумілим. Справді, ми збираємося представити ще одну мову програмування називається JavaScript, що схоже і відрізняється по-різному від мовах ми дивилися на досі. 

Так C, нагадаємо, це компільований мову. Ви повинні запустити його через компілятор. Ви вихідний код об'єкта Код, або нулів і одиниць. І ті й нулі ті, які ваш процесор, Центральний процесор, насправді зрозуміти. PHP, навпаки, не компільований мову. Це що? Це інтерпретована мова. Так що якась програма називається інтерпретатор, який повинен прочитати it-- зверху знизу, зліва right-- і з'ясувати, що всі ваш синтаксис робить і означає, чи є це петля або стан або будь-яке інше число програмування будує. Так ось це інтерпретована мова. 

Тоді ми ввели HTML. І HTML навіть не мова програмування. Ми б назвали це що? Мова розмітки, який знаходиться всього свого роду химерний спосіб сказати це не програмне конструкції, такі як ми бачили, навіть назад в день нуля. Там немає петель. Там немає умов. Це справді є мова про розмітку даних і форматування або структурування його в деякому роді. 

УС, тим часом, аналогічно не є мовою програмування. Це навіть більш естетично орієнтованої. І це дозволяє сортувати тонкої настройки такі речі, як розмір шрифту і кольору та розміщення, і все, що. Тоді ми мали 

SQL. Так SQL дійсно програмування мову в деякому розумінні, хоча з урахуванням спеціально для баз даних. Але навіть якщо ми тільки познайомити вас з вибрати і вставити і видалити і оновити і кілька інших, Виявляється, можна насправді написати функції або процедури, оскільки вони називається, в SQL, які виглядають і діють зовсім як функції PHP і C. Так знаєте, що існує. Але ми навіть не возитися з ними як ми тільки що подряпати поверхню тут. І тоді JavaScript, останній з наші мови офіційно представила. Так JavaScript, теж інтерпретована мова. І тих, хто знайомий, зробити Ви хочете, щоб відрізнити його з деякими характеристика і від C і PHP? Чим вона відрізняється? 

АУДИТОРІЯ: Це не складено. 

Девід Малан: раз сказати? 

АУДИТОРІЯ: Це не складено. 

Девід Малан: Це не складено. Так що, теж інтерпретується. Так що це не складено. Але що робить його трохи як PHP. Але він як і раніше відрізняється від PHP в деякому вражаючим чином принаймні, в тому, як ми будемо його використовувати. Так? 

АУДИТОРІЯ: Це працює на стороні клієнта. 

Девід Малан: Вона працює на стороні клієнта, зазвичай. Це дійсно відмінна характерно для нас прямо зараз. С була на стороні сервера в тому сенсі, що ми зробили все, що в CS50 IDE. PHP цих пір було серверний оскільки як це, теж, отримує interpreted-- не складений, але interpreted-- всередині CS50 IDE, що, звичайно, просто сервер або сервери в хмарі. 

Але в JavaScript, навіть хоча вам ви збираєтеся щоб почати писати його, скажімо, PSET вісім і, можливо, остаточне projects-- ви збирається вірно це в CS50 IDE і зберегти його файлів, що знаходяться CS50 IDE, IDE CS50 і, у свою чергу, хмара серверів на якому він розміщується, не збирається інтерпретувати або виконувати код. Швидше за все, це буде відправлено у незмінному вигляді до браузері. І це те буде І.Є. або Chrome або Firefox або Safari або щось насправді інтерпретує, що це зверху вниз, зліва направо. Так Основними відмітними характерно для сьогоднішнього дня є те, що JavaScript є стороні клієнта і PHP, наприклад, Був на стороні сервера. Тепер, це має цікаві наслідки для, як, інтелектуальної власності і хто можете побачити код. І справді, ви можете піти в Інтернеті і подивитися, найбільш будь-який код, який хтось написано в JavaScript. Іноді це читається, іноді це затемнений. Але про це в свій час. 

Так JavaScript, досить красиво, це супер схоже, синтаксично, щоб С. І так само, як PHP, немає Основна функція. Якщо ви хочете, щоб почати писати Код JavaScript, як ви побачите сьогодні, Ви просто почати писати. Але це, ви побачите, зокрема, корисно в контексті веб-браузерів. Тим не менш, мій маленький disclaimer-- зазвичай earlier-- було сказати, що ви можете більш сьогодні використання JavaScript на стороні сервера за допомогою фантазії рамки під назвою Node.js що деякі з власних додатків CS50 в написані на. Перевірте 50 фактично використовує Node.js. Але ми збираємося зосередитися на JavaScript на стороні клієнта тут на. 

Так ось набір умов в PHP. На жаль, насправді in--, що Заява, теж правильно. Тут же набір умови в JavaScript. Синтаксично це ідентична С і PHP. Вирази г Буля є, Аналогічно, синтаксично ідентичні як C і PHP. У нас також є перемикачі в JavaScript, що виглядають ідентично. У нас є для петель, які структуровані однаково, в той час як петлі, робити, поки петлі. 

Цей трохи відрізняється. PHP мав для кожної конструкції що ви могли б використовувати або будуть використовувати в PSET сьомій, може бути. JavaScript має цю спеціальну версію для того, де ви в буквальному сенсі щось сказати як для змінної ключ в об'єкт, який дуже коротким способом сказати, якщо я отримав object-- і ми говорити про них ще раз в moment-- і я хочу, щоб перебрати всі з пар ключ-значення всередині, Я не повинні з'ясувати, як чисельно індексувати їх з нуля, однієї, два, три. 

Я можу сказати, що це в буквальному сенсі. І на кожній ітерації, JavaScript для мене буде оновлювати ключ змінної щоб бути першим ключем, то в наступному ключ, то наступний ключ, то наступний ключ, і так далі. І я можу отримати на його вартості обробкою об'єкт в JavaScript, як ми побачимо, неначе що це Асоціативний масив в PHP. Справді, якщо ви, нарешті, загорнутий ваш проти того, що навколо асоціативний масив в PHP, ви можете думати про нього, як зараз ідентичні об'єкта в JavaScript. Але це трохи спрощення. 

Масиви дивіться, досить красиво, ідентичні в PHP для одного символу, за винятком. Там одна річ, вистачає тут що ми бачили минулого тижня з PHP. Що опущений? Так? Немає знак долара. Так ми повернулися до більш нормальним світ, де змінні не мають знаки долара. Але ви префікс їх з Вар, зазвичай. І вар означає змінну. І так само, як PHP є вільно typed-- якої є види, Є числа і рядки і плаває і так forth-- JavaScript аналогічно має види. Але це слабо типізований, що ми, програмістам не потрібно вказувати їх. Ми просто повинні бути в курсі що існують різні типи. 

Змінні, meanwhile-- ось як ми могли б оголосити "привіт, світ" у вигляді рядка. Зверніть увагу, що це збігається з PHP, але не знак долара. І це те, що ми почати бачити більше сьогодні, в результаті чого у вас є об'єкт з ключами і значеннями. І якщо ви хочете, щоб спробувати вивести з останнього week-- синтаксис трохи відрізняється. Але трохи розсудливості check-- скільки ключі це об'єкт, здається, є? Так я бачу чотири. Я бачу два. 

Так це насправді два. Так що це колекція з двох пар ключ-значення. Ключ символ, значення якого FB. Ключ ціна, значення якого 101.53. Так що ті дві пари ключ-значення. І пам'ятайте, PHP-- і це знову тільки вид синтаксичної різниці. Це не все, що інтелектуально цікавим. PHP міг би написати це ж річ, як follows-- цитатою, дорівнює. І я змінити їх на квадратні дужки. І тоді я можу змінити це в лапках слово, "ціна." І тоді я не використовувати двокрапку. Що я використовую минулого тижня? Так, знак рівності стрілка фанки позначення. 

І тоді я зробив те ж саме тут. Те ж саме тут. І це все. Так що це нормально, якщо це не має дійсно затонув в пам'яті тільки ще й тому, що це дійсно інтелектуально нецікавим. Це просто синтаксичні відмінності. Але ідеї точно те ж саме. Усередині цієї змінної цитата JavaScript це колекція пар ключ-значення, один з яких є символом, одна з яких є ціна. І я можу отримати при тих значеннях з наступним синтаксисом. Так само, як в PHP, я міг зробити щось like-- нехай мені зробити це вікно трохи більше. Так само, як в PHP, я міг зробити this-- о, чорт візьми. Давай. 

Так само, як в PHP-- Добре, ми просто використовувати Дарувальник нотатки. Так само, як в PHP, я можу зробити $ цитата $ цитата ["символ"], і це допоможе мені значення "символ". У JavaScript, це буде ідентичні, в результаті чого я можу просто зробити це. Єдине, що це вистачає знак долара. 

Так досить добре, те, що є не все, що багато нового синтаксису. Так що сьогодні ми орієнтуємося на, дійсно, деякі з ідей і додатків. І перший такий додаток, що ви могли б бачили, якщо ви пірнули в PSET сім уже цей синтаксис. Таким чином, в PSET сьомій, якщо у Вас є бачив або не бачив ще, знаю, що є файл, який ми даємо Ви назвали config.json-- JavaScript Object Notation. Чому? Ми хотіли, щоб бути в змозі надати Вам з шаблон з деяких пар ключ-значення. Ми хотіли, щоб бути в змозі дати вам список хоста, назва сервера. Ми хотіли, щоб дати вам Місце для вашого імені користувача і заповнювач для вашого пароля. Якщо ви не бачите це ще не про що турбуватися. Докладніше про це в PSET сьомій [? спекуляція ?] І потім, Очевидно, ми хочемо вас заповнити в-DOS тому що, коли ви входите в CS50 IDE, кожен з вас мати свій власний логін і пароль. 

Таким чином, ми могли б використовувати півтора десятка або більше різних форматів файлів. Ми могли б використовувати файл .txt. Ми могли б використовувати файл CSV с. Ми могли б використовується INI-файл, XML-файл, ціла купа більше Скорочення, що Ви не могли б коли-небудь чув. Це свого роду довільне в кінці дня. Але супер популярні в ці дні є текст формат, званий JSON-- JavaScript Object Notation--, що виглядає як це. Це трохи загадковим, але зверніть увагу, шаблони. Ви починаєте з відкритим кучерявого дужка, і ви в кінцевому з тим же. Всередині щось, що. Це пара ключ-значення. Так що це об'єкт, який я дивлячись на на екрані тут який має один ключ, який має одне значення. І тільки виведення на основі попередня модель, що ключовим тут? База даних, річ, щоб лівий товстої кишки. 

Тепер, значення буває а кілька рядків на цей раз. Але значення починається з кучерявим готуватися і закінчується з фігурної дужки. Так що ви могли б запропонувати це Тип значення бази даних? Словник або просто більш лаконічно, об'єкт. Вірно? Це свого роду структури даних, можна використовувати й інші структури в собі. Так що, якщо все це справа ми Виклик object-- і об'єкт це всього лише купка ключ-значення pairs-- значення самої бази даних є об'єктом. Значення бази даних має цілий букет з пар ключ-значення, перший з яких це господар, то назвати, то ім'я користувача, пароль, то, кожен з яких значення, між тим, це просто нудно рядок в подвійних лапках. 

Таким чином, навіть якщо це не супер ясно тільки поки, знаю, що це всього лише стандарт, досить нудно спосіб зберігання даних в стандартному форматі. Але загальні помилки, які ви може зробити, навіть в PSET сьомій, маленькі дурні речі, як, якщо вас випадково опустити кому там. Це збирається привести у файлі не обов'язково бути читаним. Якщо ви випадково опустити речі, як котирування, він не збирається бути читаним. Так що це досить nitpicky формат, але це той, який дуже часто. І ми вирішили використовувати його, хоча Ви не використовувати будь JavaScript в іншому випадку, в PSET сім. 

Добре. Так що пам'ятайте цю картину. Ми говорили, в HTML, що код може виглядати наступним чином. Це мова розмітки гіпертексту [Нерозбірливо] для всього "Hello, World". Але тоді ми запропонували Деякий час тому, що, якщо це допоможе, Ви могли б почати думати про це вже у вигляді дерева. Справді, поглиблення що ми використовувати тільки заради читаності в або заради стилю в на ліва можете вид бути переведені в цьому дереві, де ви є спеціальний кореневий вузол, який ми зазвичай називають документ, нижче якого корінь HTML-елемент або тег, HTML, який потім два діти, голова і тіло. 

А потім, у свою чергу, глава має назву. І назву має текстове значення. І тіло подібно має текстове значення. Так що, якщо ви відчуваєте себе комфортно приказка що так, ви могли б взяти цю HTML і намалювати картину, як це, права сторона хороший ментальна модель, тому що тепер що у нас є JavaScript, програмування мова, яка браузери виконувати і інтерпретувати для вас, Виявляється, що те, що ми збираємося зробити в коді це почати маніпулювати це Структура дерева в памяти. Ми не повинні будувати дерево в пам'яті. Ми не повинні робити вигляд Структура даних PSET п'ять-стиль Складність. Браузер, досить красиво, на інтерпретації HTML зверху вниз, вліво або вправо, буквально збирається передати нам еквівалента покажчик до цього всього дереву безкоштовно. Це робить всю важку роботу. Це те, що Mozilla і Apple, та інші зробили для нас. 

І з JavaScript ми будемо бути в змозі контролювати і змінювати і робити цікаві речі що дерево, інакше відомий як DOM або об'єктної моделі документів. Які речі? Ну, виходить, що в JavaScript, є цей список прання події, які можуть мати місце. І ми дійсно не використали, що Слово з тижня нулю і PSET нулю, коли ми говорили про порожньому. Більшість з вас, ймовірно, не використовувати подія у вашому подряпин проекту. Але ви, можливо, пам'ятаєте простий Марко Поло Наприклад, коли у нас було два спрайт, один з яких сказав, Марко. Інший з яких потім, при прослуховування і чути, що подія, сказав, Поло. Якщо ні, не соромтеся озирнутися назад, що далеко назад. 

Але це просто кажуть, і ви можете вид вивести з назв цих речі, JavaScript, виявляється, збирається дати нам можливість слухати для миші спускаючись або миші підійшовши або ключ спускаючись або клавішу вгору або onsubmit onselect або щось onresizing. Іншими словами, будь-яка фізична дія що людина може взяти з браузером що ви робите кожен день, ви можете написати Код для який слухає тих подій а потім робить щось підходяще. 

Наприклад, якщо ви використовуєте Google Maps, що станеться, якщо клацнути і перемістити миша, як правило ,? Якщо ви клацніть і перетягніть? Так? Точно. Карта починає рухатися. Таким чином, ви можете сортувати, бачать те, що тут, що там. І як Google реалізувати це? Ну, мабуть, вони використовуючи пару цих події слухачі, один, що говорить, слухайте на миші down-- тому, коли користувач фізично штовхає його трекпад або його або її мишкою вниз І тоді ми шукаємо щось на зразок руху або який-небудь інший випадок, який дозволяє захопити опору. І справді, це так само перетягнути в цьому точка точка точка список можливих варіантів. 

Таким чином, це буде потужним спосіб почати відповідати користувачеві навіть перш, ніж він чи вона насправді кліків то явне, як представити. Але ми збираємося представити пара теми потрапити. Але спочатку, давайте перехід в якийсь реальний код. Так що я збираюся піти вперед і відкрити будинок-0, який є дуже простий приклад тут, що якщо я просто збільшити має цей вхід тут для мене. І я збираюся йти вперед і ввести в "Давид" на моє ім'я і натисніть кнопку Надіслати. 

А потім, хоча начебто дешево, я Тобто це запрошення, яке з'являється, що говорить, "привіт, Девід!" Так що це свого роду як наш "привіт, світ" що ми зробили деякий час тому в C і навіть в PHP, тому що я динамічно виводиться моє ім'я. Я можу зробити ім'я когось іншого тут. Я міг би просто змінити це, як Ханна, натисніть кнопку Надіслати. І справді, маленькі спливаючі зміни. 

Тепер, спливаючі вікна є одним з найпоширенішим особливості в Інтернеті. І справді, ще в в день спливаючі блокатори увійшли в моду, тому що ви буде йти в якийсь website-- можливо, під питанням place-- що б потім раптом почати закидати екран з цілою купою спливаючих вікон. І так ця здатність вискакувати Вікна в перед користувачем була особливо добре прийнятий людством. Так ось чому ви бачите це запобігти саме, який тільки робить все це справа некрасиво. Отже, ми збираємося, щоб потребувати кращий спосіб, щоб спонукати користувача. Але зараз, що, здається, працює. Так що просто інтуїтивно, що Здається, що тут відбувається? Я йду вперед і натисніть кнопку Надіслати, а то щось відбувається, ясно. Але те, що не відбувається, що трапилося Минулого тижня в будь-який час я натиснув уявити? Що не відбулося на екрані? На жаль? Оновити. URL-адреса не зміниться. Я сказав, що це був будинок-0, і я все ще в Будинку-0. Як правило, ми отримати змінилося в іншій Посилання, як register.php або тому подібне. 

Але навіть коли я звільнити ця річ, натиснувши кнопку ОК, Зверніть увагу, що URL залишається повністю на місці. І, справді, якщо я трохи скептично, дозвольте мені відкрити Chrome. Дозвольте мені відкрити вкладку Мережа. І зауважте, це порожній на даний момент. Дозвольте мені йти вперед і повторно Марію. Там немає мережевого трафіку взагалі. Так ні HTTP. 

Так насправді, якщо я дивлюся на вихідному коді для this-- дозвольте мені закрити це вікно і перейти до Переглянути Source. Цікаво. Схоже, є деякі Нові мітки, серед них сценарій. Отже, давайте поглянемо протягом CS50 IDE саме те, що я послав до користувача. 

Так от давайте is-- зосередитися на тільки HTML. Ось в нижній половині Дом-0.html. І зауважте, що він отримав назву, голова тег, тег тіла, форма тега. Але те, що вискакує вам як різні, особливо якщо ви ніколи не написано будь JavaScript самостійно. Дозвольте мені трохи прокрутите щоб прямо тут. Я отримав вхід, інший вхід для уявити. Я отримав ідентифікатор, який є свого роду новий. Але ми бачимо це CSS. Що ще, безумовно, новий? Так? Ніцца. 

Добре. Так, де він говорить onsubmit, зауважити, що, здається, слід. Це є атрибутом в HTML номенклатури. Його значення це рядок в лапках тут. І це виглядає трохи дивно на перший погляд. Це не HTML. Це не CSS. Це, як ви вже могли здогадатися, JavaScript. Так що, схоже, що вбудований в цей Веб-сторінка є функцією називається Вітаю. І я просто виведення що бо це слово, вітаю. Він отримав відкриту Хлопець, Закрити Хлопець, крапка з комою. Схоже, функції C, виглядає як функції PHP. 

І справді, він збирається функція JavaScript. Потім я повертаюся хибним. Ми повернемося до що в хвилину. Але де ця функція визначена? Ну дозвольте мені прокручування вгору у верхній частині файлу. І хоча це довга лінія, це відносно проста. Дозвольте мені масштабу тут і зосередити увагу на цих чотирьох ліній. 

Таким чином, в JavaScript, просто як PHP, ви просто скажімо, в буквальному сенсі, слово "функція", ім'я функції, а потім дужки з будь-яким НЕ arguments-- жодних аргументів в цьому випадку. І повернення тип в JavaScript, так само, як PHP. Так що це трохи слабкіше, ніж С. Відкрити фігурна дужка, недалеко фігурна дужка. Вбудований в JavaScript є function-- не рекомендується function-- а функція називається оповіщення чия єдина мета в житті це підтягнути, що досить потворні підкажіть що ми бачили хвилину тому. 

Тепер це свого роду ковтком. Що тут відбувається? Отже, давайте почнемо з виділити всі тут. Це той же самий аргумент, щоб попередити. І що відбувається? Це виглядає просто як рядок. І виявляється, на відміну від PHP і на відміну від С, не має значення, в JavaScript якщо ви одинарні лапки або подвійні лапки. Вони будуть еквівалентні. І, чесно кажучи, це просто популярні в ці дні для програмістів JavaScript, щоб завжди використовувати одинарні лапки для якоїсь причини. Це тільки те, що робити. Але ми могли б використовувати подвійні лапки, а також. 

Так плюс новий персонаж. Але ті з вас, які зробили це раніше, що робить плюс на увазі? Так. Об'єднати. Таким чином, ми бачили це в PHP. Там просто точка оператор в PHP, що об'єднуватиме два рядки разом. З біль у шиї, щоб зробити це. Нагадаємо, з PSET шостій, який був особлива біль у шиї, Ви повинні були б використовувати щось на зразок strcat після виділення пам'яті в стеку або в купі. Ви мали стрибати через обручі просто з'єднати два рядки. У JavaScript, це супер просто. Просто використовуйте оператор плюс між ними. 

Таким чином, комплекс виду що, здається, це бо врешті Вся ця рядок, я просто об'єднати на знаком оклику. Так що, якщо те, що було вискакувати був "привіт, Девід," "привіт, Ханна," "привіт, Марія", і так далі, ясно що середній річ між двома плюси повинні дати мені доступ до чого? Що там напевно? Так. Так що я буду робити вигляд, тут відповісти на їхні ім'я, чи не так? Таким чином, їх ім'я вискочило у фіналі Результат. Отже, що ж це означає? Ну, я запропонував раніше в тому, що картина, так званий DOM має цей спеціальний кореневий елемент спосіб нагорі називається документ. А тепер, виявляється, що відбувається як особливий глобальної змінної в JavaScript, вбудований в якої є ціла купа корисних функцій. Серед корисна функціональність є Можливість отримати в будь нащадок вузла. Ці квадрати або прямокутники або еліпси тільки вузли в дереві, так би мовити. 

Так що виходить, що вбудований в Документ об'єкт в JavaScript є функцією, інакше відомий як Метод, який називається getElementById. Синтаксис для виклику функція в JavaScript що знаходиться всередині об'єкта або змінна тільки з точковою нотації. І ми бачили це в C те, що синтаксис структурою. Ви бачите це в PSET сьомій, начебто, начебто, коли ви бачите CS50 :: запит. Двокрапка двокрапка в PHP це ще один спосіб виклику функції, що це усередині якого-небудь об'єкта. 

Але зараз в JavaScript, це просто крапка. І тому ця функція, досить красиво, вид каже, що це does-- отримати елемент за ідентифікатором. Елемент це просто інша назва для тега або вузла в DOM. І тому отримати елемент, ID "ім'я" означає this-- ось мій HTML. І на основі цього HTML, те, що вузол або що HTML-теги це я збирається програмно бути передані по телефону document.getElementById? 

Так, саме так. Я йду, щоб отримати вхід елемент існує, чий ідентифікатор "ім'я." Так зокрема, ви можете думаю, цієї функції, getElementById, як спосіб дати резервне покажчик на цей конкретний вузол в дереві. Ми не тягне це дерево, але це спосіб отримання доступу до, що прямокутник або прямокутник, що за унікальною ідентифікації його за допомогою своєї ID. 

Тепер, чому це корисно? Ну, це виявляється що як тільки ви отримали що вузол, що прямокутник з картина, що вузол всередині нього, у свою чергу, має цілий букет пари properties-- ключ-значення або дані, одна з яких називається значення. Так буквально, це добро з рот, щоб пояснити все це. Але в кінці дня, все це робить, це дати вам рядок, що користувач ввів в в цьому ієрархічному порядку. Але я не люблю пара з цих речей. Або, скоріше, є деякі цікавість ще. Все, що здавалося, на роботу. Чому ви думаєте, я повернувся ложно після виклику вітати? Це виглядає трохи негарно, що У мене є дві заяви розділених крапкою з комою. Візьміть здогад. Якщо я видалив повернутися помилковим, те, що може статися, тільки інстинктивно? На жаль, ще раз кажу? 

Відкрийте купу Windows. Так, може бути, щось потенційно як це буде відбуватися. Що ще? Може подати заявку де? Для тій же сторінці. Так, справді, це, що ближче відповісти тут, хоча на відміну від в минулому, я не вказано атрибут дії, які, як правило, ми повинні зробити. Виявляється є за замовчуванням. Якщо ви не вкажете дії, це, як кажуть цитату, кінець цитати або назва самого файлу, який в цьому випадку буде бути як Будинок-0.html. Це просто якась висновок, або, скоріше, мається на увазі. 

І тому, якщо я не роблю це, давайте помічати. Дозвольте мені зберегти це. І я видалив повернення помилкове. Дозвольте мені повернутися до цього прикладом і силою перезавантажити його. І ви могли бачити мені запропонувати це на CS50 Обговорити купу разів. Якщо що-небудь коли-небудь діючи в стилі фанк і браузеру не веде, як ви очікуєте, часто ви хочете провести Зрушення і натисніть Оновити. Це змусить кожен файл, щоб перезавантажити і не використовувати локальний кеш браузера або копія, так що тепер, дозвольте мені йти вперед і Відкрити мій інспектор, перейдіть на вкладку Мережа. Я збираюся натисніть Заповідник Вхід бо я не хочу, щоб видалити рядки Як тільки я отримаю відвезли в іншому місці. 

Дозвольте мені йти вперед тут і введіть Andi, натисніть кнопку Надіслати. Добре. Це, здається, як і очікувалося. Він каже: "привіт, Енді." Дозвольте мені натисніть кнопку ОК. Цікаво. Зверніть увагу, що сторінка змінилася, хоча на вихідну сторінку. Зверніть увагу на URL вид змінився. Він додав, знак питання, який зазвичай є показником що ми намагалися представити щось. І тоді на дні, ще більш явно, тут актуальний запит HTTP, який отримав відповідь, що 200 привів мене сюди. 

Так що це не те, що ми хочемо зробити, правильно? Тому що я не хочу, щоб перезавантажити всю сторінку. Я замість хотів повернутися ложно таким чином, щоб коротке замикання поведінка за умовчанням браузера, який було, звичайно, уявити сторінку. 

Отже, давайте поглянемо на незначно краще приклад. Це будинок версія одного. І зверніть увагу на наступне. Це нормально, якщо ви не звертав уваги всі рядків коду. Але те, що в корені відрізняється про реалізацію цього? Я обумовити це поводиться те ж саме, робить те ж саме. Що я, очевидно, зробили по-іншому? Так? 

АУДИТОРІЯ: [нерозбірливо]. Девід Малан: Так. Таким чином, функція визначена differently-- іншими словами, відсутніх з форми, там на лінії 7-- або мало, лінія 8-- більше не я маю onsubmit атрибут. У попередньому прикладі, я повинен був це. А потім я буквально написав свою код тут. І тоді я сказав повернутися помилковим. І якщо це не терти Ви неправильно все ж, вона повинна почати остільки а, як і в HTML, коли ми почали співпрацювати поспілкуватися його з CSS в атрибути стилю, він просто почав отримувати трохи брудний або відчувати себе трохи неправильно. 

Аналогічно тут, якщо Ви почнете приймати HTML, і потім ви автоматично грюкнути код JavaScript в середині рядка в лапках, це НЕ буде дуже супроводі. Вірно? Це навіть не очевидно на перший місце, де код JavaScript, є. Так що було б дійсно добре, як принцип кращого дизайну, давайте тримати наш HTML повністю відокремити від нашої JavaScript. 

Таким чином, щоб зробити це, те, що ми зробити ось following-- ми просто використовуємо HTML для розмітки тільки. І так у версії з цього, всі У мене є форма з унікальним ідентифікатором. А потім сюди, я, користуючись спеціальної особливістю JavaScript в результаті чого я можу мати те, що називається анонімної функцією. Так що виходить, що якщо я буду називати document.getElementById з "демо" це як давати мені покажчик цей вузол в моєму дереві, елемент форми, так би мовити. 

Тепер, я просто знаю, від знаючи трохи HTML Тепер ми, прочитавши деякі онлайн довідник, що елемент форми підтримує ціла купа listeners-- подій в Іншими словами, список пральня події слухачі, які ми бачили хвилину тому. Я знаю, від читання документації що onsubmit є дійсним подією слухач для елемента форми. 

Тому, як тільки я знаю, що, це безпечно для мене, щоб зробити following-- отримати цей вузол з дерева, елементи форми, і отримати доступ до так званих onsubmit власності. Таким чином, точка просто означає, це властивість, як особливу цінність всередині нього. І те, що тип даних це я призначення, мабуть, щоб onsubmit, що ефективно змінна всередині цього вузла в дереві? Це поле всередині цієї структури. Що тип даних? 

Функція, так. Так що виходить, що PHP має це. І хоча ми не сказати вам про це, С також має покажчики на функції, в здатність передавати і призначити функції а самі значень змінних. І ми не збираємося регресувати назад до C. Але зараз, виявляється, що на правій стороні тут, навіть якщо це виглядає трохи фанки, це означає, ей-браузер, дати мені функції. Я не збираюся навіть турбуватися даючи це ім'я, тому що я буквально я збирається призначити давайте називати його адресу цієї функції негайно onsubmit. Іншими словами, браузер, вам не потрібно знати, що називається ця функція. Вам просто потрібно знати, де він знаходиться в пам'яті. І так достатньо просто є знак рівності є і не турбувати назвавши це, як Foo чи вітати або будь-яке інше слово. А тепер це просто стилістична річ. Я міг би перемістити цю фігурну дужку на the-- sorry-- наступному рядку як ми зазвичай робимо CS50. Але в JavaScript, це насправді стилістично загального просто тримати фігурну дужку, то Перший, на цій першій лінії. 

Але далі, є нічого цікавого. Це відкрита фігурна дужка тільки розмежовує початок моєї функції. Функція тепер ідентичні, за винятком мене є включені повернутися помилковим всередині цієї функції. Бо виходить out-- і ви б тільки знаю, що це від читання documentation-- що якщо функції, що ви призначаєте до onsubmit обробник повертає брехня, браузер просто знає та погоджується з тим, не уявляти форму на сервер. Якщо вона повертає правда, вона представить це до сервера з причин, які ми побачимо корисні в хвилину. 

А потім, після коми фігурна дужка є тільки означає, що я зроблено визначенні функції. Ви знаєте, що, як тільки зателефонувати як ви чуєте уявлення. Добре. Це як і раніше можливо вид некрасиво. Так що ще ми можемо зробити? 

Ну, це виявляється то в другої версії, яка є last-- і ми просто погляд на це. На ризик прийняття це уродливее, виявляється що є бібліотека світ називається JQuery. І JQuery це супер Бібліотека JavaScript популярним це так популярні, що більшість будь JavaScript-- це не рідкість для людей, щоб заплутати JQuery з JavaScript. Чому? Сам JavaScript має дуже багатослівні способи ведення things-- document.getElementById, dadadadadada. Ви в кінцевому підсумку, дуже довгі рядки коду. 

Таким чином, людина на ім'я Джон Resid, хто насправді працює на старті до цих днів, вийшов з цією бібліотекою років назад, що багато людей внесли свій внесок щоб назвати JQuery, який змінює синтаксис наступним чином. І тільки так ви бачили це, тому що ви будете незмінно побачити це, якщо робити Остаточний проект веб-інтерфейсом, це було б рівнозначно спосіб реалізації цієї ж функції, використовуючи це спеціальна бібліотека. 

Тепер, замість дражнити це один від одного в повному обсязі, давайте просто подивимося на деякі зразки. Цей синтаксис, здається, є скільки анонімні функції або безіменні функції або лямбда-функції AKA? По-друге, чи не так? І ви знаєте, що, навіть якщо Ви не супер зручні з цим, просто той факт, що говорить функція () двічі. 

І виходить, що те, що цей код doing-- і ми будемо посилатися на інтернет-посилань, в кінцевому рахунку, з якоїсь допомогу в цьому. Це просто означає, що, коли документ готовий, йти вперед і зареєструватися наступна функція як представити обробнику HTML елемент, унікальна ідея є демо. А потім, коли це відбудеться, називати ці два рядки коду. І це, на жаль, більш детальний спосіб сказати повернутися помилковим. І ми говорили про це тільки тому, що Ви побачите код, як це онлайн. І це нічого не лякайтеся. Але замість того, майте на увазі, що те, що буде поширений в JavaScript це парадигма. І ось чому ми показуємо його зараз. Добре. Так, не зупиняючись занадто багато на цьому синтаксисі, чи є які-небудь питання по ці приклади та ідеї досі? Добре. Отже, давайте використовувати це для чогось корисного. Створення веб-сторінки, просто говорить привіт, так і так не все, що цікаво, НЕ underwhelm. Цей не збирається бути красивим, але це буде робити щось корисне. Дозвольте мені повернутися до моєї директорії тут і відкрити, припустимо, форма-0.html. 

Отже, нехай це першокурсник очний спортивні сторінці реєстрації без CSS або якомусь сенсі дизайну. І я хочу, щоб йти вперед і Зареєструйтеся тут з паролем. І я збираюся погодитися з умовами та умови і натисніть Register. І тепер веб-сайт говорить, "Ви зареєстровано! (Ну, не зовсім.) " Це здається, що це працює, але дозвольте мені йти вперед і змусити перезавантаження. 

І дозвольте мені сказати, ні, ви не потрібен мій фактична адреса електронної пошти. Або, може бути, ми просто скажемо, пошту там. Пароль буде, як, 12345. А потім, тільки тому, що я ідіот, тепер це 123456789. І я не збираюся, щоб перевірити вашу коробку. 

Хм. Добре. Так що кілька можливостей для поліпшення тут. І ви знаєте, або буде побачити в PSET сім то ви можете написати code-- і ви будете мати, щоб написати код в PHP-- захищати проти цих видів користувача помилки, тому що користувач явно не співпрацює. І він або вона не дала вам все цінує ви хотіли або навіть у форматі що ви хотіли їх. Таким чином, ви побачите в PSET сім то ми могли б, звичайно, є деякі якщо умови, які говорять Якщо адреса електронної пошти НЕ username@something.edu, Ми могли б просто сказати, вибачте, і вибачитися перед користувачем багато, як ви могли б бути в PSET сім. Або, якщо вони не перевірили цю коробку, Виявляється в PHP, ви можете виявити, що, теж. І, звичайно, якщо паролі не збігаються, як у register.php для PSET сьомій, ви можете виявити, що. Але це біль в шия, що зараз вони просять нам пройти весь шлях до сервера. Користувач інформується про помилку. І принаймні, якщо ви не використовуєте деякі химерні методи, тепер у них є, щоб натиснути стрілку назад. Не було б приємно, як багато веб-сайтів сьогодні, якщо у вас більше безпосереднє зворотний зв'язок миттєво? 

Іншими словами, дозвольте мені перейти до версії Один з них, який збирається бути не красивіше. Але у нього є ця функція. Малан, 12345, 123456789, що не збирається прапорець, зареєструйтесь. Паролі не збігаються. Таким чином, навіть якщо це спливаюче вікно ugly-- ми можемо замінити це в кінцевому підсумку щось на зразок Bootstrap, який ви побачите в PSET сьомій є дуже популярним library-- я виявити, що паролі не збігаються. Добре. Ну, дозвольте мені виправити як користувач. Дозвольте мені йти вперед і сказати, 12345 12345. Тим не менш, не перевіряючи угоду. Ви повинні погодитися на правила та умови. Так чому? 

Якщо ми вже покладено що є спосіб, і ми зобов'язані вам в PSET сьомій виявити помилку Умови, як це серверний, чому я повинен обтяжувати також робити це в JavaScript? Що таке аргумент у послуга додавання, що Ви збираєтеся, щоб побачити, як some-- є додаткова складність. 

Може бути, немає ніг. Що б це могло бути? АУДИТОРІЯ: [нерозбірливо]. Девід Малан: О, цікаво. Потенційні подвиги. Так, що, якщо ви не обробляє неправильне введення користувача, що великий, може бути, це все краще, якщо це навіть не досягти ваш сервер. Я б відсунути там і скажімо, ви повинні, ймовірно, вирішити обидві ці проблеми. Але це справедливо. Що ще? 

АУДИТОРІЯ: [нерозбірливо]. 

Девід Малан: Так. Цей код, як ми вже говорили раніше, інтерпретуються на стороні клієнта. Це не турбує сервер, що означає, що ні вплинути навантаження сервера або пропускну здатність. А тепер, для маленької старої мене, це не має ніякого значущого впливу тому що у мене один користувач прямо зараз. 

Але якщо ви будь сайт пристойного розміру, особливо великий, як Facebook, тим більше ви можете тримати людей від вашого сервера краще тому сервері, звичайно, має тільки кінцеве кількість оперативної пам'яті, кінцеве число гігагерц, кінцеве число речей він може зробити в одиницю часу. Так що, якщо є більше людей в світ удару сервер, випадково реєстрації неправильно, як добре, якщо ви може зберегти це навантаження сервері. Крім того, особливо на рухомий device-- якщо ви коли-небудь увійти в my.harvard або NetID Єльського і т.п., там це затримка з великою кількістю сайти, як те, завдяки чому він займає, як, чертовски секунду або дві, іноді. А потім, мій Бог, якщо ви помилилися при введенні, то ви повинні завдати у відповідь удар і переробляти. Так що затримка, особливо на повільних мережних підключень. Але в JavaScript, бо він працює на клієнта і не потрібно йти вперед і назад по потенційно повільним інтернетом підключення, ви можете отримати миттєва зворотний зв'язок майже. 

Отже, давайте подивимося на це. Дозвольте мені відкрити форма-0 і подивитися на HTML тут. І давайте подивимося, що відбувається. Це форма якого дію register.php. Я тільки за допомогою отримати так що я міг побачити адресу. Але для паролів, ми, безумовно, хочемо щоб змінити це, щоб створювати в реальності. Ось поле введення типу тексту. Ось ще один вхід поле типу пароля. Ось, якщо ви ніколи не бачили, вхід типу прапорець. 

Але немає JavaScript тут взагалі. Це тільки HTML, що йде register.php. Але у версії однієї, де я почав отримувати ці спливаючі вікна, давайте подивимося, що насправді тут відбувається. У версії одного, те, що Я збираюся see-- I Я думав, може паралізувати достатньо з досить слів, але я вибіг. 

У версії одно-- ми йдемо. У версії однієї, зверніть увагу на following-- і не краща реалізація, але це мій перший. Зверніть увагу, що нижче Форма, у мене є сценарій тег. І сценарій тег означає, агов, браузер, ось приходить код в, зазвичай JavaScript. А тепер зверніть увагу, що я роблю. На line-- я можу ледве прочитати it-- лінії 32, він говорить, вар form-- так що дайте мені змінна називається форма. А потім отримати document.getElementId з "реєстрації". Що це? Ну, дозвольте мені назад тут. І зауважте, ах, я дав вид елемента довільна, але описовий ідея реєстрації. Так що це дає мені змінна, дозволяє мені захопити цей вузол, що прямокутник в дереві називається форму. form.onsubmit кошти, гей-браузер, реєстрації Прослуховувач події в цій формі. Іншими словами, коли ця форма представлені, виконати наступний код. Це не потрібно, тому що ім'я чому ви повинні знати ім'я? Вам просто потрібно знати, що для виконання, отже це анонімний або лямбда функції. І, що функція всі з цих рядків тут. І тепер, щоб бути чесним, навіть якщо ви можливо, не коли-небудь написаних JavaScript перш, це просто С і PHP логіка. Так що, якщо form.email.value == "" - так що якщо поле порожнім електронна пошта, кричати на користувача з "Ви повинні свою адресу електронної пошти ". Інакше, якщо form.password.value порожній крик у користувача, "Ви повинні вказати свій пароль." 

Більш цікаво логічно, якщо form.password.value НЕ одно form.confirmation.value-- куди підтвердження прийшли? Дозвольте мені назад. Ну, я назвав цей вхід поле тут пароль. І я назвав цей тут підтвердження. Я міг би назвати його пароль два або що-небудь ще. Я просто логічно перевірки що ці два є однаковими. Else-- виявляється, що це пан Буль again-- логічне значення, прапорець. Так що, якщо я кажу, знак point-- якщо не form.agreement.checked, кричати на користувача, а також. 

Так цей синтаксис ви бачите дуже поширені в JavaScript, де у вас є цей точками. Ви починаєте з об'єкта тут. Ви пірнати глибше, щоб до властивість, як пароль. І тоді ви отримаєте на його фактичної вартості. І знову, тут вхід. Ось це ім'я пароль. І його значення незалежно від людина насправді набрали в. 

Так у всіх з них випадки, я повернувся помилковими. Але якщо ні, я повернуся правда. І ось тепер ми бачимо переконливим використання при Ви повернеться хибним зупинити те, що робить користувача і зробити його або її вибір знову або введіть ще раз. В іншому випадку, ми повертаємося правда. 

І дозвольте мені представити одного Інший варіант це просто щоб насіння його деяке розуміння. Ну, у версії 2 цього форм-2-- Я зроблю це з помахом руки. Це для тих, цікаво, версія JQuery, тих з вас, хто хотів би плескатися в цій конкретній бібліотеці. Але давайте start-- і будь-які питання? Дозвольте мені зупинитися на мить, бо Це було швидко і багато. 

Але хороша річ тут є те, що всі коду в значній мірі те ж саме. Новий матеріал, що є будинок? Які ці прямокутники? Які ці вузли? Що таке анонімні функції? Що таке обробник події? Але, на щастя, більшість того, що це просто повне коло, скажімо, нульовий тижня. Добре. Так щось трохи більш цікавим? Ну, в першу чергу, дозвольте мені перейти вперед і відкрити Google Maps. І ви помітите, що для момент, на частку секунди, зауважити, що відбувається, коли Я натисніть досить швидко. І цей зв'язок в Гарварді так швидко, що ви навіть не помічаєте його. Але те, що ви ніби як би побачити якщо я натисніть і перетягніть дуже швидко? Ті з вас перегляду онлайн, якщо ви уповільнити це швидкість 0,5 ×, Ви можете побачити це краще. 

Що відбувається просто перш, ніж я натиснув і тягли? Дозвольте мені спробувати here-- зробимо щось ще, як 90210. Давайте далеко. Це було дуже швидко, занадто. Як щодо Disney World? Там ми йдемо. ДОБРЕ. Що ви бачите на частки секунди? Просто, як, квадратів, вірно? Заповнювачі для плитки? 

Ну, що тут відбувається? Google Maps є гарним прикладом ця технологія, що називається AJAX. І це, де ми почнемо використовувати JavaScript зокрема заманливо шлях. Назад в день, було Цей сайт називається MapQuest. І я повинен був прийнято Скріншот цього з 1990-х років, де, якщо ви хочете, щоб шукати тут, на карті, Ви буквально натисніть стрілку нагорі, що показав вам, інший квадрат карті. Якщо ви хочете, щоб рухатися вліво, ви натиснув стрілку, який показав вам інший квадрат карті. А деякі веб-сайти досі це сьогодні. Але навіть MapQuest отримав краще, як Google Maps. 

Замість того, що краще них дні сайти, які використовують AJAX. AJAX-- інакше відомий як Асинхронний JavaScript і XML і яка є просто химерний спосіб сказати технологія або метод, який дозволяє, використовуючи браузер JavaScript зробити додаткові запити HTTP після сторінка була завантажена. Отже, що ж це означає? Ну, це було б свого роду дратує в Gmail якщо кожен раз, ви хотіли перевіряти пошту, Ви буквально вдарив управління R або- Команда-R або натисніть кнопку Reload і сторінка цілому штопати б перезавантажити. Вірно? Було б блимати білим ймовірно, секунду. Ви б бачили дурні індикатор. І просто щоб подивитися, якщо у вас є новий пошта, вся веб-сторінка і URL Ви знаходитесь на доведеться перезавантажити. 

Але це не те, що відбувається в Gmail. Вірно? Коли ви отримуєте нову електронну пошту в Gmail, те, що відбувається на екрані? Це просто показує, вгору, вправо? Це просто чарівно з'являється як нового рядка в таблиці. Це насправді залучає пристойну кількість складності. Справді, якщо ви думаєте про це дерево, які, хоча є простим тут, Gmail--, і я повинен дивитися на код, щоб бути sure-- ймовірно, має HTML таблицю або, може бути, невпорядкований список, що робить кожного з ваших поштових скриньках листи як. 

І тому, якщо ви собі це є це дерево в пам'яті, коли ви за допомогою Gmail, який виглядає вид роду як це, коли Google розуміє, ох, у вас є нове повідомлення електронної пошти, це не хочу, щоб відновити всі дерево. Швидше за все, він хоче, щоб знайти вузол в дерево, яке представляє вашу поштову скриньку і просто вставити новий вузол. 

Так дуже схожий на Pset п'ять, де ви довелося вставити вузли в хеш-таблицю, аналогічно робить Google, за допомогою Код JavaScript, що він написав, траверс цього дерева, з'ясувати, де є те, що входять до складу вікна, а потім вставити новий рядок. І нова рядок просто означає одне або більше нові вузли в дереві. 

І так AJAX ця техніка що дозволяє саме це. Після того як ви відвідали URL, Однак з розуму довго це, і після того, як сторінка має був завантажений, ви все ще можете захопити більше даних з internet-- Чи це по електронній пошті або плитка з map-- схопити його за лаштунками а потім вставте його в сторінку таким чином, що людина насправді не повинні чекати. 

Facebook Посланник працює точно так само. Будь-яка кількість інший websites-- ой, насправді, навіть це. Я маю на увазі, це, чесно кажучи, вид дратує особливість в ці дні. Якщо я починаю пошук cats-- це це свого роду жахливої ​​користувацького досвіду. Це просто починає шукати для мене. Ну те, що він робить? URL-адреса дійсно не змінився так як я почав друкувати. Але те, що відбувається поперек wire-- ОК, хм цікаво. Що відбувається поперек дроти тут просто отримує більш дивним. 

ДОБРЕ. Отже, дозвольте мені йти вперед і перевірити елемент і перейдіть на вкладку Network і спробувати зробити це технічна і менше про кішок. Оскільки я друкую, в буквальному сенсі, кішки і-- що відбувається per-- Я не збираюся натисніть що. Добре. Так тут, що відбувається кожного раз я введіть символ, мабуть? Як, низький рівень? Те, що відбувається з кожним з тих, символи я друкую на клавіатурі? Так? АУДИТОРІЯ: [нерозбірливо]. 

Девід Малан: Точно. Кожен з цих символів збирається Google, по одному. Вони будують рядок на своєму сервері, який представляє все, що я набрав в досі. І кожен раз, коли я типу ще один персонаж, вони використовувати їх секретний соус з Алгоритм пошуку і з'ясувати, він мав на увазі цю сторінку кішки або цю сторінку кішка або т.п.? Таким чином, в певному сенсі, це дає мені з краще досвід, що я навіть не потрібно завершити свою думку. І справді, це корисний річ, автозаповнення в цілому. Якщо їх алгоритми досить добре і якщо мої пошуки достатньо очевидно, Я не доведеться набирати ціле слово. Вони збираються, щоб сказати мені, що це є насправді я шукав. Так що Google називає миттєво Пошук тільки за допомогою AJAX, за допомогою коду, який дозволяє їм запитувати додатковий контент через веб-браузер за лаштунками з використанням цього Нова мова, JavaScript. Отже, ми маємо пару хвилин залишилося. І дозвольте мені викликати мого приятеля Колтон на сцену, так здавалося Особливо весело востаннє ввести технологію що деякі з вас висловили зацікавленість в остаточних проектів. Ми думали, що це буде весело, щоб принести до добровольцем, хоча, сьогодні щоб показати вам додаток до це дозволяє, що you-- да, Я бачив цю руку першому. Давай до. Дуже добре зроблено. Хороша робота. Я збираюся цього проекту на екран в хвилину. Ваше ім'я для всіх? 

ОДВ: Я Ефа. 

Девід Малан: етанольне? 

ОДВ: Ефа. 

Девід Малан: Ефа? 

ОДВ: Так. 

Девід Малан: Приємно бачити вас. Добре. Дозвольте мені отримати це готові. Приходьте до посередині з Колтон тут. Що Колтон має у своїх руках сьогодні пульт дистанційного керування. Таким чином, замість просто стояти там в тривимірний світ озираючись як це зробив Колтон, тепер Ефа може насправді ходити, піднімаючись, вниз, вліво і вправо, як у Nintendo або Xbox контролер. ОДВ: Я збираюся падати на сцену. Девід Малан: я буду стояти приблизно тут. Але це ризик. ДОБРЕ. Так що вперед і покласти на тих ,. Дозвольте мені йти вперед і перейти до екрану тут. Дозвольте мені тьмяне світло. І Колтон, дозвольте мені прийти стенд поруч з вами. 

Ви хочете, щоб пояснити тут з мікрофоном, що ми робимо? Тут ви йдете. 

Колтон: Звичайно. Так що зараз ми погрузка на Окулус, Я думаю, operating-- не працює системи, але основна програма, де Ви можете отримати доступ всі ігри і програми, які знаходяться у вашій бібліотеці. Так що зараз, він повинен сказати Тачпед почати. Сенсорна панель буде на права сторона гарнітури. Так що вперед і tap-- ОДВ: О, людина. Девід Малан: Так, там ви йдете. Якість Ефа бачить набагато більш високу якість. Це тільки Wi-Fi тут. Колтон: Так що ви збирається хотіти зробити це подивитися в бік верхньої правій частині екрана. Так, це гра на дуже верхньому правому куті. А потім, коли ви обираєте це, Тачпед знову. Я думаю, що його Dreadhalls. А потім тут A-- тут, нехай мені тримати ваші окуляри для вас. 

Так що я просто дав йому контролер. Так що тепер він може контролювати гру. Він може пересуватися тощо. Так йдуть вперед і дивляться на вершині. Ви повинні побачити нову гру. Так що вперед, і ви можете зробити це. Тепер, ви повинні бути в змозі контролювати самостійно з контролером, а також, як тільки гра завантажує тут. Це може бути трохи страшно. 

ОДВ: Тепер ви скажіть мені. ДОБРЕ. 

Колтон: Гаразд. Так підтвердити, що ви можете пересуватися. ДОБРЕ. Ви можете пересуватися. Ідеальний. Так що, якщо ви подивіться вниз, у вас є карта. Карта показує вам, де ви знаходитесь. Ви можете подивитися навколо кімнати. Ви можете повністю розвернутися. Так, саме так. Поверніться. 

Так що дивіться на ваш зліва. Я думаю, що є щось ви можете забрати на бочці в кімнаті. 

ОДВ: Як я можу отримати намітити шляхи? Колтон: Подивіться. Просто подивіться вгору. Добре. Ось так. Тепер йти вперед і просто розвернутися. Так що дивіться далі наліво. Продовжуйте рухатися вліво. Продовжуйте дивитися наліво. Продовжувати йти. Так. 

ОДВ: О, це так. 

Колтон: Так. Підійдіть до нього з контролером. Ось так. Тепер він повинен сказати забрати його. Ось так. Забрати його. Добре. Тепер, давайте вийти з цієї кімнати. Ідіть вперед і йти до тієї двері. Таким чином, ви будете hold-- він говорить утримуйте кнопку, щоб змусити його відкритим. Так що вперед і утримуйте кнопку. Так, змушуючи його відкрити. Добре. Хороша робота. Тепер ми йдемо з кімнати. Так що я збираюся залишити інші до Вам і бачити те, що ви дізналися. ОДВ: Я не збираюся в темній кімнаті. Ой, почекайте. Тепер я повинен йти по темному коридору? ОК, я збираюся назад [нерозбірливо]. Колтон: Гаразд. Деякі інші елементи, щоб забрати. Схоже, кілька монет. Це відмичку. Так що, якщо ви знайдете замкнений двері, ви можете використовувати. Ви боїтеся? 

ОДВ: Поки немає. Колтон: ОК. 

Pretend-- так. Просто вид ви насправді стояв. І якщо ви дозволите around-- Ви повинні звикнути до нього. Але це має сенс. Девід Малан: І в той час Ефа продовжує грати, так як ми могли б зробити це протягом усього дня, ми всі можемо навшпиньках тут. Але у нас є два інших пар, якщо ви хочете, щоб підійти і грати. В іншому випадку, ми побачимо ви наступного середу. Спасибі нашому добровольцем сьогодні. [Оплески] 

[МУЗИКА - "Seinfeld ТЕМА"] СПІКЕР 1: Ну, я покласти новий PL змонтувати на. Я тільки що змінив OLPF-- 

СПІКЕР 2: Так що саме ви робите? 

СПІКЕР 1: Ну, кожен з these-- тут, я покажу вам цей тут. Ви можете бачити це прямо тут. 

СПІКЕР 3: я думаю, що я добре з цим. Ви хочете ще? 

СПІКЕР 4: Ні, я добре. [Нерозбірливо]. 

СПІКЕР 3: Ні, [нерозбірливо]. У деяких з них. СПІКЕР 1: Різні кольори. СПІКЕР 2: ОК. СПІКЕР 1: Так в кінцевому рахунку те, що його робить це регулює колір of--