>> [Музички]
>> Дејвид MALAN: Ова е CS50.
Ова е почеток на неделата девет.
И тоа е она што ќе треба е 200-от роденден г-дин Бул е.
Значи ова е соработници на кои ние сме се алудира
сосема извесно време за користење Буловите променливи вистински и лажни,
1 0 и такви.
И тоа беше на Google почит на него денес.
Ќе наполнеше 200.
Значи, ако сакате да ги ни се придружат за CS50 ручек,
да ги разгледаме во врската на веб-страницата на курсот.
И такви лица и пријатели, како тие чекаат на вас овде во Кембриџ.
Лица како овие ве чекаат во Њу Хејвен.
И дека, всушност, Кен во Њу Хевн љубезно се направи
она што се нарекува анимиран GIF на Илија на неодамнешната lunch-- на GIF е уште
друг графички формат на датотека, со кои сте familiar-- дека
изгледа малку нешто како ова.
Па само низа of-- ОК.
Никој тука во Кембриџ се смее.
Но, во Њу Хевн, овој е навистина смешно, нели?
Во ред.
>> Па не ни се придружите таму.
Тука на Харвард, Поточно, оваа среда,
ако сте сафомор или Новак even-- или дури junior-- размислува за правење
прекинувач во компјутерот науката, знаете дека постојат Ќе
се на ЦС советува фер ова Среда, кратко време по класа
во 04:00 во компјутерот науката зграда Максвел Дворкин.
Ние ќе се стави тоа на на курсот веб-страница од утре, како и.
Крофни, јас сум изјави, ќе се служи.
>> Во ред.
Толку смешно story-- бев ѕиркаа околу на интернет,
и го најдов некои стари архиви на поранешниот мојот вебсајт.
И тоа се врти околу оваа out-- време, се чини многу навремено
бидејќи јас се соберат дека изборите УЗ се за да се подготвуваат повторно.
Па налетав на УЗ, изгубени очајно.
А можеби и ова е делумно зошто.
Па ова беше мојот веб-сајт во тоа време.
Поради некоја причина, јас мислев дека тоа е добра идеја, пред да им кажува на луѓето
она што ми беше платформа и зошто треба да гласаат за мене, дека тие имаат
да кликнете за да влезат за да дознаете дека информации, кои во минатото е
вид на гаден.
Јас навистина не знам што е тоа.
>> Но, тоа секако не им помогне на мојата кампања.
Јас, исто така, утврди дека со високи year-- имав овој Muppet календар.
Muppets беа вид на во мода тогаш.
Или можеби тие не се.
Имав Muppet календар тогаш.
И јас мислев дека ќе биде кул за името мојот компјутер на мрежата на Харвард
frogman.student.harvard.edu.
Во тоа време, сите ние требаше уникатно препознатливи имиња домаќин.
И можете да изберете некои суета името, наместо на вашиот сопствено име.
И јас отидов со леководолаз поради некоја причина.
>> И јас тогаш started-- Поминав многу период кликнување преку овие линкови
ова утро.
И тоа беше мојата За-страница, кој сега вид на изгледа симпатична.
Но, тоа, исто така, е доказ дека само колку далеку технологија дојде.
Мислам, во тоа време, на 486 беше нешто.
Овие денови, тоа е супер, супер, супер бавно и добро помалку
отколку што можеле да имате во вашата сопствените џебови, овие денови.
Има повеќе од таму дека беше дури и повеќе срамно.
Па јас ќе го оставиме тоа.
Но, тоа беше мојот прв упад во web-- О, не.
Тоа не беше.
Мојот прв вистински упад во веб програмирање беше овој сајт, што јас само заборавив.
Во одреден момент, научив како да се направи повторувачки слики во позадина.
И така го најдов овој облицовка ефективни, како хокеар, фудбал, голф
топка, или што и да е за веб-сајтот на Frosh Инстант пораки.
И тоа беше, всушност, навистина не на Првиот веб базирана на проектот Зедов on--
Мислам дека можеби сафомор година, помлади year--
по преземањето CS50 и CS51, еден на заедничката следење на наставата.
Јас забележав во потрага низ архивите
дека еден од моите наследници и пријатели, Ли, вид на променети
на авторските права на самиот себеси.
Но, навистина ова е нешто што Јас треба да ги поседува во срам.
Но, во тоа време, овој беше првиот веб-сајт,
како што реков пред неколку недели, со кои би можеле да Новак
регистрирате за интрамурален спортови тука.
И така, се покажа кои ги позадинските слики
како што не се толку добра идеја.
Но на интернет е нова, и сите бевме експериментирање.
И тоа е она што очигледно не во тоа време.
Во ред.
Значи без понатамошно ado, ние го вклучите запчаници денес за да ви даде, навистина,
последното парче, кои може да најдете особено корисно за конечниот проекти
но и дека ќе почне да се направи целиот World Wide Web,
чувствуваат малку повеќе разбирливо.
Навистина, ние ќе треба да се воведе уште еден програмски јазик
вика дека го вклучите Javascript-е слично и различни на различни начини
од јазиците кои ги гледаше во досега.
>> Па C, да се потсетиме, дали е ова Составувач јазик.
Имаш да се пушта и преку компајлерот.
Ќе го добиете изворниот код на приговор кодот, или нули и оние.
И оние кои се нули и оние кои процесорот, централната единица за обработка,
и го разбираат.
PHP, од друга страна, не е Составувач јазик.
Тоа е она што?
Тоа е препознаена јазик.
Значи има некоја програма повика толкувач кој
мора да се прочита it-- врвот до дното, лево кон right--
и да дознаам што сите Вашиот синтаксата не и значи,
дали тоа е јамка или состојба или било кој друг број на програмски
конструира.
Значи тоа е препознаена јазик.
>> Потоа воведовме HTML.
И HTML не е дури и програмски јазик.
Она што ние би го нарекуваат?
Маркап јазик, што е само еден вид на фенси начин да го кажувам
нема програмирање конструкти како видовме дури и назад во текот на денот на нула.
Нема петелки.
Не постојат услови.
Тоа навистина е јазикот за означување на вашите податоци
и форматирање или тоа структурирање на некој начин.
>> CSS, пак, на сличен начин не е програмски јазик.
Тоа е дури и повеќе естетски ориентирана.
И ви овозможува да се најде решение за фино нагодување работи како големина на фонт и бои
и поставување и сето тоа.
Потоа моравме
>> SQL.
Па SQL е навистина програмирање јазикот во извесна смисла,
иако прилагодена конкретно на бази на податоци.
Но, и покрај тоа што само ќе се воведе на изберете и вметнување и бришење и надградба
и неколку други, Излегува всушност можете да
пишуваат функции или процедури, како што тие се
нарекува, во SQL кои изгледаат и делуваат доста како PHP и C функции.
Па се знае дека тие постојат.
Но, ние дури и не се мачи со нив како што ние само гребење на површината тука.
А потоа да вклучите, последниот од официјално воведен нашите јазици.
Така да вклучите, исто така, е толкува јазик.
И оние кои се запознаени, дали сакате да се направи разлика
со некои карактеристични од двете Ц и PHP?
Што го прави различен?
>> ПУБЛИКАТА: Тоа не се состави.
>> Дејвид MALAN: еднаш се каже?
>> ПУБЛИКАТА: Тоа не се состави.
>> Дејвид MALAN: Тоа не се состави.
Така што, исто така, се толкува.
Па тоа не се состави.
Но дека тоа малку како PHP прави.
Но, тоа е уште различно од PHP во некои зачудувачки начин,
барем во начинот на кој ние ќе го користите.
Да?
>> ПУБЛИКАТА: Се работи на клиентска страна.
>> Дејвид MALAN: Таа работи клиентска страна, обично.
Тоа е навистина битните карактеристично за нас во моментов.
С е од страна на серверот, во смисла дека сме направиле сé што е во CS50 ИРО.
PHP досега е од страна на серверот, доколку
како што, исто така, добива interpreted-- не состави, но interpreted--
внатре во CS50 ИРО, што секако е само еден сервер или сервери во облак.
>> Но го вклучите Javascript, дури и и покрај тоа што сте ќе треба
да почне да го пишува за, да речеме, pset осум и можеби конечниот projects-- сте
случува да го право во CS50 ИРО и зачувајте
во датотеки во CS50 ИРО, CS50 ИРО и, за возврат, облак сервери
на која беше домаќин, не се случува да го протолкува или извршување на вашиот код.
Напротив, тоа се случува да се испраќаат во неизменета форма сведува на прелистувачот.
А тоа е, тогаш ќе биде на IE или Хром или Firefox или Safari
или што и кои, всушност, го толкува тоа, врвот до дното, лево кон десно.
Така клучна разлика Карактеристично за денес
е тоа што го вклучите Javascript-е клиент-страна и PHP, на пример,
е од страна на серверот.
Сега, ова има интересни импликации за, како, на интелектуална сопственост
и кој всушност може да се види вашиот код.
И, навистина, може да се оди на интернет и да се види поголемиот
било код дека некој има напишан во JavaScript.
Понекогаш тоа е да се чита, Понекогаш тоа е криење.
Но повеќе за тоа во догледно време.
>> Така да вклучите, доволно убаво, е супер слични, синтаксички, В.
И многу како PHP, нема главната функција.
Ако сакате да почнете да пишувате JavaScript код, како што ќе видите денес,
само на проектот пишување.
Но, тоа е, ќе се види, особено корисно во контекст на веб прелистувачи.
Сепак, моето мало disclaimer-- обично earlier--
беше да се каже дека може да се повеќе употреба и денес го вклучите Javascript-серверот
користење на фенси рамка наречена Node.js дека некои од сопствени апликации CS50 е
се напишани.
Проверете 50 всушност користи Node.js.
Но, ние ќе треба да се фокусира на Го вклучите Javascript-клиент-страна тука надвор.
>> Значи тука е збир на услови во PHP.
Жал ми е, in-- всушност, дека изјава, исто така е точно.
Тука е, исто така, во собата на услови во JavaScript.
Синтаксички, тоа е идентичен со C и да се PHP.
Изрази г. Бул се, Слично на тоа, синтаксички
идентичен со двете C и PHP.
Ние исто така имаме прекинувачи во JavaScript за кои изгледаат идентично.
Имаме за јамки кои се структурирани идентично,
додека петелки, се направи додека петелки.
>> Ова ми е малку поинаква.
PHP имаа за секоја конструкција кои можеби ќе биде со користење на
или ќе го користи во pset седум, можеби.
Го вклучите Javascript-има оваа специјална верзија на за каде што буквално се каже нешто
како за варијабилен клучот во објектот, кој е многу концизен начин да се каже,
ако имам една object-- и ние ќе зборувам за тие повторно во moment--
и сакам да iterate во текот на сите на клучните вредност парови во внатрешноста,
Јас не мора да дознаам како да се бројно индекс на нив со нула, еден,
два, три.
>> Јас буквално може да го кажам ова.
И на секој повторување, го вклучите Javascript- за мене ќе се ажурира на клучна варијабла
да биде првиот клуч, а потоа следниот клуч, тогаш следниот клуч, а потоа следниот клуч,
и така натаму.
И јас може да се добијат на неговата вредност со третирање објект во JavaScript, како што ќе видиме,
како и покрај тоа е асоцијативна низа во PHP.
Навистина, ако конечно завиткан вашиот ум околу она што е асоцијативна низа
во PHP, можете да мислам на тоа, за сега како идентична со објект во JavaScript.
Но, тоа е малку симплификација.
>> Низи изгледа, доволно убаво, идентични во PHP со исклучок на еден лик.
Има едно нешто недостасува овде што видовме минатата недела со PHP.
Она што се исфрлени?
Да?
Нема знак за долар.
Па ние сме назад кон понормален свет каде
променливи немаме долар знаци.
Но вие не ги како префикс со вар, обично.
И var значи променлива.
И многу како PHP е лабаво typed-- при што постојат типови,
Постојат броеви и стрингови и плови и така forth--
Го вклучите Javascript-слично има типови.
Но тоа е лабаво отчукува во што ние програмерите не треба да ги наведете.
Ние само треба да бидат свесни кои постојат различни типови.
>> Променливи, meanwhile-- еве како ние би можеле да прогласат "Здраво, свет"
како стринг.
Известување дека е идентична со PHP, но нема знак за долар.
И ова е нешто што ќе се започнете да гледате повеќе денес,
при што ќе се има некој објект со клучеви и вредности.
И ако сакате да се обиде да заклучиме од минатата week--
синтаксата е малку поинаква.
Но малку здрав разум check-- колку клучеви значи овој објект се чини дека има?
Па гледам четири.
Гледам две.
>> Така, тоа е, всушност, два.
Значи ова е збирка на два пара клучните вредност.
Клучот е симбол чија вредност е полн пансион.
Клучот е цената чија вредност изнесува 101,53.
Значи тоа се два пара клучните вредност.
И запомнете, PHP-- и ова е повторно само вид на синтаксички разлика.
Тоа не е сè што интелектуално интересна.
PHP може да го имаат напишано ова исто нешто како follows-- цитат, рамноправни.
И јас да ги промените овие квадратни загради.
И јас тогаш го промените ова котирана збор "цената".
И тогаш јас не го користат две точки.
Што сум користите минатата недела?
Да, знак за еднаквост arrow фанки нотација.
>> А потоа јас го направи истото овде.
Истото се тука.
И тоа е се.
Така, тоа е во ред, ако тоа не е навистина да потонат во меморија само
сепак, бидејќи тоа е навистина интелектуално неинтересни.
Тоа е само синтаксички разлики.
Но идеите кои се потполно исти.
Во внатрешноста на оваа променлива Цитат на JavaScript
е збирка на парови клучните вредност, од кои еден е симбол, од кои еден
е цената.
И може да се добие во тие вредности со следнава синтакса.
Исто како и во PHP, можев направи нешто like-- дозволувајте
ме направи го ова поле за малку поголем.
Исто како и во PHP, можев направи this-- ох, мајката.
Ајде.
>> Исто како и во PHP-- Добро, ние ќе само користење на презентер белешки.
Исто како и во PHP, можам направи цитат ["симбол"] $ цитат $,
и тоа ќе ме однесе вредноста на "симбол".
Во JavaScript, тоа се случува да биде идентични, при што, јас само може да го направите тоа.
Единственото нешто што е недостасува е знакот за долар.
>> Значи доволно убаво, тогаш, има не се сите толку многу нови синтакса.
Значи она што денес ќе се фокусира на, навистина, е некои од идеите и апликации.
И прв ваков апликација која можеби ќе
видовме ако се нурна во pset седум веќе е оваа синтакса.
Па во pset седум, ако сте види или не видел досега,
знаеме дека постои датотеката што ја даваме те повика config.json-- вклучите Javascript-
Објектно нотација.
Зошто?
Сакавме да се биде во можност да ви обезбеди со шаблон со некои парови клучните вредност.
Сакавме да се биде во можност да ви даде листа на земјата-домаќин, името на серверот.
Сакавме да ви даде резервирано место за Вашето корисничко име
и случаеви за вашата лозинка.
Ако не го гледате ова сеуште, не се грижи.
Повеќе за ова во pset седум [? спец. ?] И потоа,
очигледно, ние што го сакате да се пополни во Задачи
затоа што кога ќе се логирате во CS50 ИРО, секој од вас
имаат свој корисничко име и лозинка.
>> Па ние би можеле да го користат половина дузина или повеќе различни формати на датотеки.
Ние би можеле да се користи исто .txt фајл.
Ние би можеле да се користат CSV датотека.
Ние би можеле да го користи Ini-датотека, XML-датотека,
еден куп повеќе акроними кои вие не би можеле да слушнам.
Тоа е вид на произволни на крајот на денот.
Но супер популарни овие денови е текст формат наречен JSON-- JavaScript Објектно
Notation-- што изгледа вака.
Тоа е малку криптичната, но информации на обрасци.
Ќе почнете со отворен кадрава се подготвуваат, а ќе заврши со истите.
Внатре во тоа е нешто.
Тоа е комбинација на клучните вредности.
Значи ова е објект што сум гледајќи на екранот овде
која има еден клуч, кој има една вредност.
Inferring и само врз основа на претходниот модел, што е клучот овде?
База на податоци, нешто што треба да на левата страна на дебелото црево.
>> Во овој момент, вредност се случува да биде на повеќе линии тоа време.
Но вредноста започнува со кадрава подготвуваат и завршува со кадрава голема заграда.
Па што ќе ви предложиме е тип на вредноста на база на податоци?
Речник или, само повеќе посочно, како предмет.
Нели?
Ова е вид на податочна структура која можат да се користат и други структури во себе.
Значи, ако целата оваа работа сме нарекувајќи object-- и објект
е само еден куп на клучните вредност pairs-- на вредноста на самата база на податоци е објект.
Вредноста на база на податоци има цел куп на клучните вредност парови, првиот на кој
е домаќин, а потоа името, а потоа корисничко име, лозинка, тогаш,
секој од чии вредности, во меѓувреме, тоа е само досадна стринг со двојни наводници.
>> Па дури и ако тоа не е супер јасен само уште,
знам дека ова е само еден стандард, прилично здодевен начин
на складирање на податоци во стандарден формат.
Но заеднички грешки, ти може да го направи, дури и во pset седум,
се малку глупави работи, како и ако случајно се изостави запирка таму.
Што ќе резултира во датотека не мора да бидат читливи.
Ако случајно сте ја изостави работи, како на цитати, тоа не се случува да се чита.
Така, тоа е прилично nitpicky формат на датотека, но тоа е она што е супер заедничко.
И да се случи да го користи, иако што не се употребуваат никакви JavaScript поинаку,
во pset седум.
>> Во ред.
Па се сеќавам оваа слика.
Ние разговаравме за тоа, во HTML, кои го кодот може да изгледа вака.
Ова е HyperText Markup Language [Беззвучен] за само "Здраво, свет".
Но, тогаш ние предложи време назад дека ако тоа им помага,
можеби ќе сакате да почнат да размислуваат за ова веќе како дрво.
Всушност, вовлекувањето дека ние користат само за доброто на читливост
или за доброто на стил е од лево да вид на
да бидат преведени на ова дрво, каде што имаат некои посебни коренот јазол дека ќе
генерички се нарекува документ, под која е коренот HTML елемент или ознака, HTML,
кои потоа има две деца, главата и телото.
>> А потоа за возврат, шеф има наслов.
И наслов има текст вредност.
И тело слично има текст вредност.
Значи, ако сте удобно поговорка дека да, можете да ги искористат овој HTML
и нацрта слика како ова, десната рака на
е убав ментална модел бидејќи сега дека имаме JavaScript, програмирање
јазик кој прелистувачи може да изврши и интерпретираат за вас,
излегува дека она што ние сме за да се направи во кодот
се почне да се манипулира со оваа дрво структура во меморијата.
Ние не треба да се изгради дрвото во меморијата.
Ние не треба да се направи еден вид на податочна структура pset пет стил
комплексност.
Прелистувачот, доволно убаво, по толкување на HTML врвот до дното,
лево или десно, буквално се случува да се ни го предаде еквивалент на покажувач
да дека целото дрво за слободни.
Тоа го прави сите на напорна работа.
Тоа е она што на Mozilla и Apple и другите имаат направено за нас.
>> И со вклучите Javascript-се дојде до да може да се контролира и да се промени и да се направи
интересни работи да се тоа дрво, инаку познат
како ДОМ или документ Object Model.
Какви видови на нештата?
Па, излегува дека во JavaScript, има
ова перење листа на настани кои може да се одржи.
И ние не сме навистина се користи дека зборот од неделава нула и pset
нула кога зборувавме за гребење.
Повеќето од вас веројатно не го користат настан во вашиот Скреч проект.
Но може да се сети од проста Марко Поло
на пример, каде што имаме две sprites, а еден од нив рече, Марко.
Другите од кои тогаш, по слушање и слухот тој случај, вели, Поло.
Ако не, можете слободно да погледне назад, кои далеку назад.
>> Но, ова е само за да велат, и можете да вид на
заклучиме од имињата на овие работите, JavaScript, што излезе,
ќе ни даде еден начин да се слуша глувчето за заоѓа или глушец ќе нагоре
или копчето заоѓа или клуч ќе нагоре или onsubmit onselect
или onresizing нешто.
Со други зборови, било физичка активност што човек може да се земе со интернет пребарувач
што го правите секој ден, можете да напишете код за која слуша за овие настани
а потоа се прави нешто соодветно.
>> На пример, ако имате потреба при користење на Google Maps, што ќе се случи ако кликнете и потег
глувчето, обично?
Ако кликнете и влечете?
Да?
Токму така.
Картата почнува да се движи.
За да можете да вид на се види она што е овде, што е таму.
И Како Google го спроведе тоа?
Па, веројатно, тие се со помош на неколку од овие настан
слушатели, која што зборува, слуша за на глушецот
down-- па кога корисникот физички турка неговиот топчето или неговите глувчето
надолу.
А потоа ние сме во потрага по нешто како движење
или некој друг настан кој ни овозможува да го фати повлечете.
И всушност, влечи е слично на овој точка точка точка листа на можни опции.
>> Па ова ќе биде моќен начин да се почне да се одговори на корисник
дури и пред тој или таа всушност ќе кликне нешто како експлицитна достават.
Но, ние ќе треба да се воведе неколку теми за да одам таму.
Транзиција, но прво, да се на некои вистински код.
Па јас ќе одам да се оди напред и да се отвори ДОМ-0,
кој е многу едноставен пример тука дека ако зумирате едноставно
има овој влез тука за мене.
А јас ќе одам да се оди напред и да внесете "Давид" на името Мое и кликнете Прати.
>> А потоа, иако вид на евтино, јас те прашува што се појавува, кој вели:
"Здраво, Давидов!"
Значи ова е вид на како нашите "Здраво, свет"
да сме направиле некое време назад во C и дури и во PHP затоа што сум се динамички
outputted моето име.
Јас може да се направи име на некој друг тука.
Јас едноставно би можеле да го промените ова, како, Хана, кликнете на Прати.
И, навистина, малку скокачки промени.
>> Сега, pop-up прозорци се една од повеќето злоупотребуваните карактеристики на веб.
И всушност, назад во денот pop-up блокатори
дојде во мода бидејќи вие ќе одат на некои website--
можеби дискутабилна place-- кои би потоа одеднаш
почне peppering вашиот екран со целиот куп на pop-up прозорци.
И така оваа способност да се појави прозорци во предниот дел на корисникот
не била особено добро примен од страна на човештвото.
Па тоа е причината зошто гледате ова се спречи нешто,
кои едноставно ве тераат целата оваа работа грди.
Значи ние се случува да треба подобар начин да го извести корисникот.
Но, за сега, што се чини дека да се работи.
Па само интуитивно, она што чини дека се случува овде?
Одам напред и да кликнете Submit и тогаш нешто се случува, јасно.
Но, она што не се случува што се случи минатата недела во секое време јас кликна поднесе?
Што не се случи на екранот?
Жал ми е?
Вчитај ја страната повторно.
URL-то не се промени на сите.
Се вели дека ова е ДОМ-0, и сè уште сум на ДОМ-0.
Нормално, ние ќе се менува и некои други URL-то, како register.php или слично.
>> Но, дури и кога ќе се отпушти ова нешто со кликнување на OK,
забележите дека URL останува целосно се стави.
И дека, всушност, ако јас сум малку скептични, дозволете ми да се отвори Хром.
Дозволете ми да се отвори на јазичето мрежа.
И ќе забележите дека е празно во моментот.
Дозволете ми да оди напред и да поднесете повторно Марија.
Нема мрежниот сообраќај она.
Па нема HTTP.
>> Значи, навистина, ако јас гледам на изворниот код за this-- дозволете ми да се затвори го овој прозорец
и да си одат за да ја видите изворниот код.
Интересно.
Тоа изгледа како да има некои нови ознаки, меѓу кои и сценариото.
Па ајде да ги разгледаме во CS50 ИРО токму она што го испрати до корисникот.
>> Па еве is-- ајде се фокусира само на HTML.
Тука е долниот дел на ДОМ-0.html.
И ќе забележите дека тоа е се здобија со звање, глава ознака, ознака тело, форма таг.
Но, она што се издвојува за вас, како различни, особено ако никогаш не сум
напишано било JavaScript за себе.
Дозволете ми да се движите малку овде кон десно.
Јас имам еден влез, уште еден влез за покорат.
Јас имам лична карта, која е вид на нов.
Но ние го забележи со CSS.
Што друго е дефинитивно ново?
Да?
Убаво.
>> Во ред.
Значи, каде што вели onsubmit, забележи она што се чини дека го следат.
Ова е особина во HTML номенклатура.
Неговата вредност е ова цитирани тука низа.
И ова изгледа малку чудно на прв поглед.
Тоа не е HTML.
Тоа не е CSS.
Ова е, како што претпоставувате JavaScript.
Па се чини дека се вградени во овој веб-страница е на функција наречена поздрави.
И јас сум inferring дека само затоа што тоа е еден збор, го поздрават.
Тоа доби отворен paren, блиску paren, точка-запирка.
Личи на функцијата Ц, личи на PHP функцијата.
>> И навистина, тоа се случува да да биде функција на JavaScript.
Тогаш јас сум враќање лажни.
Ние ќе се вратам на дека во само еден миг.
Но, каде се дефинира оваа функција?
Па нека ме скролувајте нагоре на врвот на датотеката.
И иако тоа е една долга линија, тоа е релативно јасна.
Дозволете ми да зумирате од тука и да се фокусира на овие четири линии.
>> Па во JavaScript, само како PHP, само
да речеме, буквално, зборот "функција" името на функцијата,
а потоа се загради со било arguments-- без аргументи во овој случај.
И нема враќање тип во JavaScript, исто како и PHP.
Така, тоа е малку полабава од В. Отворен кадрава голема заграда, во близина кадрава голема заграда.
Вградени во JavaScript е function-- не е препорачливо function--
но функција наречена алармирање чија единствена цел во животот
е да се повлече до кои прилично грдо извести дека видовме пред еден миг.
>> Сега ова е вид на еден залак.
Што се случува овде?
Значи, да почнеме да нагласи сè овде.
Тоа е истиот аргумент за да го предупреди.
И она што се случува?
Ова само изгледа како стринг.
И што излезе, за разлика од PHP и за разлика од Ц, тоа не е важно во JavaScript
ако единечен наводник или двојни наводници.
Тие ќе бидат еднакви.
И искрено, тоа е само популарна овие денови
за програмери секогаш да го вклучите Javascript- Користете единечен наводник поради некоја причина.
Тоа е само нешто што треба да се направи.
Но, ние би можеле да користат двојни наводници, како и.
>> Па плус е нов лик.
Но оние од вас кои го направиле тоа порано, што значи плус значи?
Је.
Concatenate.
Па ние го виде тоа во PHP.
Има само дот оператор дека во PHP
ќе concatenate две жици заедно.
С е болка во вратот за да го направите тоа.
Потсетиме од pset шест, што беше посебната болка во вратот,
вие ќе треба да се користи нешто како strcat
по доделување меморија на магацинот или грамада.
Ти мораше да скокаат преку карики само за да concatenate две жици.
Во JavaScript, тоа е супер едноставен.
Само користење на операторот на плус меѓу нив.
>> Па комплексот изглед нешто што се чини дека е ова
бидејќи на крајот на целата оваа низа, јас само
concatenate на фантастичен точка.
Значи, ако она што се појавуваат се "Здраво, Дејвид", "Здраво, Ана"
"Здраво, Марија", и така натаму, јасно дека нешто во средината меѓу двете
предности што мора да ми даде пристап во што?
Она што е таму за сигурни?
Је.
Па јас ќе се преправа тука одговори на нивното име, нели?
Па нивното име се појави во финалето резултат. Па што значи тоа?
Па, јас предложи порано во таа слика дека т.н. ДОМ
има овој посебен корен елемент пат до врвот наречен документ.
И сега, што се испоставува, кој ќе да биде специјален глобалната променлива
во JavaScript, вградени во која е еден куп корисни функционалност.
Меѓу корисни функционалност е Способноста да се добие во секое потомок јазол.
Оние квадрати или правоаголници или елипса се само јазли во дрво, така да се каже.
>> Значи излегува дека се вградени во Документ објектот го вклучите Javascript-е
е во функција, инаку познат како метод, што се вика getElementById.
Синтаксата за повикување функција во вклучите Javascript-
дека е во внатрешноста на некој предмет или променлива е само со нотација точка.
И видовме ова во C што синтаксата на struct.
Ќе го видите ова во pset седум, вид, на некој начин, кога ќе видите CS50 :: пребарување.
Дебелото црево дебелото црево во PHP е уште еден начин на повикување на функција која е
во внатрешноста на некој предмет.
>> Но сега за сега во JavaScript, тоа е само една точка.
И така на оваа функција, доволно убаво, вид на
вели дека она што does-- добие елемент по проект.
Елемент е само друго име за ознака или јазол во ДОМ.
И така да добијат елемент по проект "името" значи this-- тука е моето HTML.
И врз основа на овој HTML, што јазол или она HTML таг Јас сум
програмски ќе бидат предадени со повикување document.getElementById?
>> Да, точно.
Одам да се добие на влез елемент таму чиј проект е "името".
Значи конкретно, може да се мислам на оваа функција,
getElementById, како начин на давање се врати на покажувачот во тој специфичен јазол
во стеблото.
Не сме подготвени ова дрво, но тоа е начин
на добивање на пристап до тие правоаголник или правоаголник
со уникатно го идентификуваат преку својот проект.
>> Сега, зошто е ова корисно?
Па, излегува дека еднаш сте добиле
тој јазол, дека правоаголник од слика, тој јазол во него,
пак, има еден куп properties-- парови клучните вредност
или податоци, од кои едната се вика вредност.
Значи буквално, тоа е вид на залак за да се објасни целата работа.
Но, на крајот на денот, сето тоа не е да ви даде
стринг кој на корисникот внесе во во оваа хиерархиска модата.
Но не ми се допаѓа неколку од овие работи.
Или подобро кажано, има некои љубопитност уште.
Сето тоа се чинеше да работат.
Зошто мислиш дека се вратив лажни после повикот поздрават?
Ова изгледа малку грдо, дека Имам две изјави таму
разделени со точка-запирка.
Претпоставете.
Ако јас отстрани return false, она што може да се случи, само инстинктивно?
Жал ми е, да речеме пак?
>> Отвори еден куп на Windows.
Така потенцијално можеби нешто како тоа ќе се случи.
Што друго?
Може да поднесе барање, каде?
На истата страница.
Така, всушност, тоа е тоа поблиску се одговори тука,
и покрај тоа што, за разлика од во минатото, јас не сум
одредено атрибутот акција, кои нормално ќе треба да направиме.
Излегува има стандардно. Ако не наведете акција,
тоа е како да кажеш цитат unquote или на името на датотеката себе,
кој во овој случај би било како ДОМ-0.html.
Тоа е само вид на заклучи, или подобро кажано, се подразбира.
>> И така, ако јас не го сторат тоа, ајде да се забележи.
Дозволете ми да се спаси ова.
И јас сум отстрани враќање лажни.
Дозволете ми да се вратиш на овој пример и сила ја превчитате.
И можеби сте виделе ми сугерираат ова на CS50 Разговараат еден куп пати.
Ако нешто некогаш постапувајќи фанки и навигаторот не е да се однесуваат како што се очекува,
Честопати ќе сакате да се одржи Shift и кликнете Освежи.
Што ќе ги принуди секоја датотека за да ја превчитате и да не ги користат локалните кешот на прелистувачот
или копија, така што сега, дозволете ми да оди напред и отвори мојот инспектор, јазичето мрежа.
Одам да кликнете Вклучи се зачува, бидејќи јас
не сакаат тоа да го избришете редови еднаш ми биде однесен далеку на друго место.
>> Дозволете ми да оди напред и тука тип во Анди, кликнете Прати.
Во ред.
Што се чини дека како што се очекуваше.
Таа вели: "Здраво, Анди."
Дозволете ми да кликнете OK.
Интересно.
Забележите дека страницата се менува, иако кон оригиналната страница.
Известување на URL вид на променети.
Се додава знак прашалник, кој обично е показател
дека се обидовме да ги достават нешто.
А потоа на дното, дури и поексплицитно,
тука е вистинската HTTP барање, кој доби одговор дека од 200
Ме врати тука.
>> Значи ова не она што е сакаме да го направи тоа, нели?
Затоа што не сакаат да Вчитај ја страната повторно целата страница.
Јас наместо тоа сака да се врати лажни за да краток спој
стандардно однесување на прелистувачот, што беше, се разбира, да ги достават на страницата.
>> Па ајде да ги разгледаме во маргинално подобар пример.
Ова е еден дом верзија.
И ќе забележите следново.
Тоа е во ред, ако не grok сите линии на код.
Но, она што е фундаментално различно во врска со оваа имплементација?
Ќе се уредуваат таа се однесува на исто, го прави истото.
Што сум очигледно направиле поинаку?
Да?
>> ПУБЛИКАТА: [Беззвучен].
Дејвид MALAN: Да.
Па функција е дефинирана differently-- со други зборови, не присуствувале на формата,
таму на линија 7-- или Наместо тоа, на линија 8-- веќе не
имам на onsubmit атрибут.
Во претходниот пример, го имам ова.
И јас тогаш буквално напишав мојот код овде.
И тогаш реков return false.
И ако тоа не се фаќа сеуште на погрешен начин,
тоа треба да почне да се дотолку како што е, исто како и во HTML,
кога почнавме да го ко-мешаат со CSS во атрибути стил,
тоа само што почнав да се добие малку неуредна или се чувствуваат малку погрешно.
>> Слично на тоа тука, ако да започнете со употреба на HTML,
и тогаш автоматски паднала некои JavaScript код
во средината на котирана стринг, тоа е не се случува да биде многу одржување.
Нели?
Тоа не е дури очевидни на почеток место каде што на JavaScript код е.
Па тоа ќе биде навистина убаво како принцип на подобар дизајн,
ајде да ги одржуваме нашите HTML целосно одвои од нашиот JavaScript.
>> Па да се направи тоа, она што ние сме направено овде е following--
ние едноставно се користат HTML само Селектирај.
И така во една верзија на ова, сите Имам е форма со единствен број.
А потоа надолу тука, јас искористување на посебна карактеристика на JavaScript
при што јас може да има што е наречен анонимен функција.
Значи излегува дека ако јас се јавите document.getElementById на 'демо'
тоа е како да ми дава покажувач овој јазол во мојот дрво, формата елемент,
така да се каже.
>> Сега, јас само знам од знаејќи малку на HTML
сега ние ја прочитате некои онлајн референца, таа форма на елементот поддржува
целиот куп на настанот listeners-- во други зборови, на перење листа на настан
слушатели дека видовме пред еден миг.
Знам од читање на документација дека onsubmit е валидна настан
слушателот за форма на елементот.
>> Па откако знам дека, дека е безбедно за мене да се направи
на following-- добие тој јазол од дрво, формата елемент,
и нејзиниот пристап т.н. onsubmit сопственост.
Па дот само значи ова е имот,
како посебна вредност во него.
И она што на податоци тип сум давање, очигледно,
да onsubmit, што е ефикасно променлива внатре
на тој јазол во дрвото?
Тоа е област внатре во тоа struct.
Што е типот податоци?
>> А функција, да.
Значи излегува дека PHP има ова.
И иако ние не ви кажам за тоа,
Ц, исто така, има функција покажувачи, на можноста да помине и да го додели функции
како и самите вредности варијабли.
И ние нема да одам назад во В.
Но, за сега, се покажа дека на десната рака овде,
иако тоа изгледа малку фанки, тоа значи, еј прелистувач,
дај ми функција.
Јас не одам за да се грижат ниту давање тоа име, бидејќи јас сум буквално
ќе му ја додели ајде да го наречеме адреса на оваа функција
веднаш да onsubmit.
Со други зборови, прелистувач, вие не треба да да знаат што на оваа функција се нарекува.
Вие само треба да знаете каде што е во меморијата.
И така доволно е само да се има знак за еднаквост таму
и да не се мачат именувањето на оваа, како и foo или поздрават или со друг збор.
А сега ова е само нешто стилски.
Можев да се движи оваа кадрава голема заграда врз the-- sorry-- следната линија
како што обично го прават CS50.
Но во JavaScript, тоа е всушност стилски заеднички
да се задржи само на кадрава голема заграда, на Првиот, на првата линија.
>> Но оној свет, има ништо интересно.
Дека отворените кадрава подготвуваат само демаркира почетокот на мојата функција.
Функцијата е сега идентични, освен што сум
вклучени враќањето лажни во внатрешноста на оваа функција.
Затоа што се покажува out-- само и ти би
знам од читање на documentation--
дека ако на функцијата што ја додели до onsubmit управувачот враќа false,
прелистувачот само знае и се согласува не да ги достават форма на серверот.
Ако таа се враќа точно, тоа ќе ги достават тоа со некој сервер од причини што ќе видиме
се корисни во само еден миг.
>> А потоа и точка-запирка после кадрава подготвуваат таму само
значи јас сум се направи дефинирање на функција.
Знаеш што да се јавам штом што ќе чуете поднесување.
Во ред.
Ова е уште веројатно вид на грдото.
Па што повеќе можеме да направиме?
>> Па, излегува потоа во верзија две, што е last--
и ние само ќе се загледувам во ова.
На ризикот од правење тоа погрда, излегува
дека има библиотека светот наречен jQuery.
И jQuery е супер популарни JavaScript библиотека
тоа е толку популарна што повеќето било JavaScript-- тоа не е
невообичаено за луѓето да се збуни jQuery со JavaScript.
Зошто?
Го вклучите Javascript-се има многу опширниот начини на вршење на things--
document.getElementById, dadadadadada.
Ви заврши имаат многу долги линии на код.
>> Значи колега по име Џон Resid, кои всушност се работи за стартување
до овие денови, излезе со оваа библиотека години
Пред тоа што многу луѓе придонесоа да се нарече jQuery што се менува
синтаксата на следниот начин.
И само да го видел ова, бидејќи ќе секогаш
види ова, ако се прави веб-базирани на финалниот проект,
тоа би било еквивалент на начин на спроведување на истата функција со користење на
оваа специјална библиотека.
>> Сега, наместо да закачам освен тоа во целост,
ајде да погледнеме некои модели.
Оваа синтакса се чини дека има колку анонимни функции
или безимени функции или АКА Ламбда функции?
Две, нели?
И знаеш дека, дури и ако вие не сте супер удобен со ова,
само од страна на фактот дека тоа вели дека функцијата () двапати.
>> И излегува дека што овој код е doing--
и ние ќе се однесува на онлајн референци, во крајна линија, за некаква помош со ова.
Ова само значи дека кога документот е подготвен,
оди напред и да се регистрирате следниве функција
како на управувачот достават за HTML елемент чија единствена идеја е демо.
И тогаш, кога тоа се случи, нарекуваме овие две линии на код.
И ова е трагично, повеќе опширниот начин да се каже return false.
И ние го спомнале тоа само затоа што ќе видите кодот вака онлајн.
И тоа не е ништо да се обесхрабрени од.
Но, наместо тоа, имајте на ум дека она што е ќе биде честа појава во вклучите Javascript-
е оваа парадигма.
И така тоа е причината зошто ние да го покаже тоа за сега.
Во ред.
Значи без живеалиште премногу многу на таа синтакса,
се има било какви прашања во врска со овие примери и идеи досега?
Во ред.
Па ајде да го користите овој за нешто корисно.
Изработка на веб страница, која само вели здраво, така и така не е толку интересно,
да не underwhelm.
Оваа една нема да биде убава, но тоа се случува да се направи нешто корисно.
Дозволете ми да се вратам во мојата листа тука и да се отвори, да речеме, форма-0.html.
>> Па претпоставувам дека ова е Новак интрамурална спортови регистрација страница
CSS или без никакво чувство за дизајн.
И сакам да се оди напред и да Регистрирајте се тука со лозинка.
А јас ќе одам да се согласувате со условите и условите и кликнете на Register.
И сега на веб-сајтот вели: "Вие сте регистрирана! (Па, не баш.) "
Што се чини како да работи, но дозволете ми да оди напред и да ги принуди Reload.
>> И дозволете ми да кажам, не, ти не треба вистински мојот е-мејл адреса.
Или можеби ние само ќе кажам пошта во таму.
Лозинка ќе биде, како, 12345.
И тогаш, само затоа што сум идиот, сега тоа е 123456789.
И јас не одам да се провери вашата кутија.
>> Хм.
Во ред.
Па има неколку можности за подобрување тука.
А ти знаеш, или ќе видиме во pset седум, кои можете да го напишете code--
и ќе мора да се напише код во PHP-- да се брани
против овие видови на корисник грешки, бидејќи корисникот јасно
не соработувале.
И тој или таа нема да ви даде сите вредности што си сакал, па дури и во формат
кои ви ги сакаше.
Така што ќе видите во pset седум дека ние, секако, може да има некои
ако условите кои велат Ако e-mail адреса
не е username@something.edu, Ние може само
се извини и да се извини за корисникот многу, како што може да биде во pset седум.
Или ако тие не се провери таа кутија, Излезе во PHP, може да се открие дека,
исто така.
И, секако, ако лозинки не се исти како и во register.php
за pset седум, може да се открие тоа.
Но, тоа е болка во вратот во кои сега ги бара
нас да одат сите на патот до серверот.
Корисникот е информиран за грешка.
И најмалку освен ако не користите некои познавач техники,
сега тие треба да кликнете на задната страна на тастатурата.
Зарем не би било убаво, како многу веб-сајтови денес,
ако сте имале повеќе непосредни повратни информации, веднаш?
>> Со други зборови, дозволете ми да оди на верзијата еден, кој се случува да биде нема поубава.
Но, тоа не ја имаат оваа функција.
MALAN, 12345, 123456789, а не случува да се провери кутија, регистар.
Лозинките не се совпаѓаат.
Така, иако овој pop-up е ugly-- можеме да го замени тоа на крајот
со нешто како подигање, кој ќе ја видите во pset седум
е многу популарна library-- го направив детектира дека лозинки не се совпаѓаат.
Во ред.
Па, дозволете ми да го поправите тоа како корисник.
Дозволете ми да оди напред и да каже 12345, 12345.
Уште не проверка на договорот.
Мора да се согласувате со правила и услови.
Па зошто?
>> Ако ние сме веќе утврден дека има начин,
и ние ќе се бара во pset седум за откривање на грешка
услови вака од страна на серверот, зошто ќе ми
исто така, да се мачи го ова за да вклучите?
Што е аргумент во корист на додавање она
вие сте за да се види како some-- има дополнителни комплексност.
>> Можеби и не постои наопаку.
Што би можело да биде?
ПУБЛИКАТА: [Беззвучен].
Дејвид MALAN: Ох, интересно.
Потенцијални злоупотреби.
Толку сигурен, ако не сте ракување погрешни корисник влез таа голема,
можеби тоа е сите на подобро, ако тоа дури не се постигне вашиот сервер.
Јас би им помогнам назад таму и да речеме, веројатно ќе треба да
поправат и двете од овие проблеми.
Но тоа не е фер.
Што друго?
>> ПУБЛИКАТА: [Беззвучен].
>> Дејвид MALAN: Да.
Овој закон, како што веќе рековме, е толкувани на клиент-страна.
Тоа не им пречи на серверот, што значи дека тоа не се случи
оптоварување или да влијаат на капацитетот на серверот.
И сега, за малку стар мене, ова нема никаква поважна ефект
бидејќи имам еден корисник во моментов.
>> Но, ако сте било веб-страница на пристојна големина,
особено од најголемите, како што се Фејсбук, на повеќе можете да ги задржи луѓето надвор
на вашиот сервер подобро бидејќи на серверот, се разбира,
има само ограничен износ на RAM меморија, ограничен број на гигахерци,
ограничен број на работите тоа може да се направи по единица време.
Па ако има повеќе луѓе во светот притискање на вашиот сервер,
случајно да влезете погрешно, само како и ако
може да го задржи дека товарот од вашиот сервер.
Плус, особено на мобилен device-- Ако некогаш сте се
влези во my.harvard или Netid Јеил или слично,
има оваа латентност со многу веб-сајтови како што каде што е потребно,
како, проклето секунда или две понекогаш.
И тогаш, мојот Бог, ако mistype, тогаш ќе мора да го возврати ударот и го повтори.
Значи има латентност, особено на побавно мрежни врски.
Но, JavaScript, бидејќи Таа работи на клиентот
и не треба да се оди напред и назад низ потенцијално бавен интернет
конекција, може да се добијат речиси моментален фидбек.
>> Значи, да се погледнеме во овој.
Дозволете ми да се отвори форма-0 и се погледне на HTML тука.
И ајде да видиме што се случува.
Ова е еден вид чија акција е register.php.
Јас сум само со помош се толку што можев да видам на URL-то.
Туку и за лозинки, би сигурно сакате да го измени ова за да ја објавите во реалноста.
Еве еден поле за внес на текст тип.
Еве уште еден влезен поле од типот лозинка.
Еве, ако никогаш не сум видел, внесување на видот наога.
>> Но, нема да вклучите тука она.
Ова е само HTML дека оди register.php.
Но, во една верзија, каде што започна да се оние pop-up прозорци,
Да видиме што навистина се случува овде.
Според верзијата на еден, што Одам да see-- јас
Мислев дека може да ја закочи доволно со доволно зборови, но јас истрча.
>> Во верзија one-- таму ќе одиме.
Во една верзија, забележуваат following-- и не е најдобар имплементација,
но тоа е мојот прв.
Забележи дека под форма, имам таг скрипта.
Или ознака сценариото значи, еј, интернет пребарувач, тука
доаѓа некој код во, Обично, на JavaScript.
И сега, се забележи она што јас го правам.
На line-- Одвај можам читај it-- линија 32, што се вели,
var form-- па ми даде променлива наречена форма.
А потоа се дојде document.getElementId на "Регистрација".
Што е ова?
Па, дозволете ми да ја премотам касетата до тука.
И известување, ах, дадов форма елемент произволна, но описен идеја
на регистрација.
Па ова ми дава променлива која ми дозволува да го зграби што јазол,
дека правоаголникот во дрво наречено форма.
form.onsubmit средства, еј прелистувач, зачленете слушателот настан
во овој формулар.
Со други зборови, кога оваа форма е поднесено, извршување на следнава код.
Тоа не треба име, бидејќи зошто ви е потребна да се знае името?
Вие само треба да знаете што треба да се изврши, ergo
тоа е анонимно или ламбда функција.
И таа функција е сите од овие линии.
И сега, да бидам искрен, иако не би се некогаш напишани вклучите Javascript-
пред, тоа е само Ц и PHP логика.
Па ако form.email.value == "" - па ако полето за e-mail не е празно,
развикам на корисникот со "Мора обезбеди вашата e-mail адреса. "
Друго ако form.password.value не е празно развикам на корисникот,
"Мора да се обезбеди вашата лозинка."
>> Повеќе интересно логично, ако form.password.value не
еднакви form.confirmation.value-- каде дојде потврда од?
Дозволете ми да ја премотам касетата.
Па, се јавив овој влез поле овде лозинка.
И се јавив овој овде потврда.
Можев да го нарече лозинка две или било што друго.
Јас сум само логично проверка дека овие две се исти.
Else-- излегува ова е г-дин Бул again-- Булова вредност, наога.
Па ако кажам фантастичен point-- ако не form.agreement.checked,
развикам на корисникот, како и.
>> Значи оваа синтакса ќе видите е многу честа појава во JavaScript,
каде што имаш овој нотацијата.
Ќе почнете со објект овде.
Да нурне во подлабок на до имот како лозинка.
А потоа ќе добиете на неговата вистинска вредност.
И повторно, тука е на влез.
Тука е лозинката за името.
И неговата вредност е без оглед на всушност луfе ја внесе внатре.
>> Така што во сите овие случаи, се вратив лажни.
Но ако не, ќе се вратам вистина.
Па сега можеме да видиме една огромна употреба на кога
ќе return false да го спречат она што корисникот ќе го прави
и да го направи или да ја изберете повторно или впишете повторно.
Инаку, ние врати вистина.
>> И дозволете ми да се воведе еден друга варијанта на оваа само
да семе некои разбирање за тоа.
Па, во верзијата 2 од овој, форма-2-- Јас ќе го направам со бран на раката.
Ова е, за оние кои се љубопитни, на jQuery верзија,
оние од вас кои би сакале да плискам во кои особено библиотека.
Но, ајде да start-- и било какви прашања?
Дозволете ми да пауза за момент, бидејќи тоа беше брзо и многу.
>> Но убаво нешто овде е дека сите на кодот е прилично многу исти.
Новиот материјал е она што е ДОМ?
Што се овие правоаголници?
Што се овие јазли?
Што е анонимен функција?
Што е настан управувачот?
Но, за среќа, повеќето од тоа е само полн круг од, да речеме, нула недела.
Во ред.
Така нешто малку поинтересна?
Па, прв од сите, да си одам напред и да се отвори во Google Maps.
И ќе забележите дека за момент, на дел од секундата,
забележи она што се случува кога Кликнувам доволно брзо.
И врска со ова на Харвард е толку брзо што навистина не го забележите.
Но, она што вид на вид на видите ако јас кликнете и влечете навистина брзо?
Оние од вас гледа на интернет, ако забави оваа брзина 0.5x,
можете да го видите ова подобро.
>> Она што се случуваше само пред да се кликне и влечени?
Дозволете ми да се обиде here-- дозволете ми да се направи нешто друго, како 90210.
Ајде да одиме далеку.
Тоа беше навистина брзо, премногу.
Како за Дизни Ворлд?
Таму ќе одиме.
ВО РЕД.
Што виде за дел од секундата?
Само, како, плоштади, нели?
Резервирани места за плочки?
>> Па, она што се случува овде?
Google Мапи е убав пример на оваа технологија, која се вика AJAX.
И ова е местото каде што ќе почнете да користете го вклучите Javascript-во особено
примамливи начин.
Во тоа време, имаше овој веб-сајт се нарекува MapQuest.
И јас треба да се преземат скриншот на оваа од 1990 година,
каде што ако си сакал да изгледа до тука на мапата,
вие буквално ќе кликнете на стрелката на врвот што ја покажавте
различен квадратни на мапата.
Ако сакаше да се помрднам лево, можете кликнато стрела што ја покажавте
различен квадратни на мапата.
И некои веб-сајтови сеуште го направите ова денес.
Но, дури и MapQuest има добивано подобро, како Google Maps.
>> Наместо тоа, она што е подобро овие дена е AJAX веб-сајтови кои ги користат.
AJAX-- инаку позната како Асинхрони вклучите Javascript-и XML,
која е само фенси начин да се каже технологија или техника која
им овозможува на пребарувачот користејќи JavaScript да вложи дополнителни HTTP барања
по страница е вчитан.
Па што значи тоа?
Па, тоа ќе биде вид на досадни во Gmail
ако секој пат кога ќе сакаше за да се провери вашата пошта,
вие буквално погоди контрола-R или Команда-R или кликнете на копчето Освежи
и целата страница ебам ќе ја превчитате.
Нели?
Тоа ќе белата боја на блицот веројатно за секунда.
Ќе ја видиш глупаво напредокот бар.
И само за да се види дали ќе има нови пошта, на целата веб-страница и URL-то
ти си во ќе мора да ја превчитате.
>> Но тоа не е она што се случува во Gmail.
Нели?
Кога ќе добие нов е-мејл во Gmail, она што се случува на екранот?
Тоа само покажува нагоре, нели?
Тоа само магично се појави како нов ред во табелата.
Кои, всушност, подразбира пристоен износ на сложеност.
Всушност, ако мислите дека за ова дрво, кој иако е едноставна тука,
Gmail-- и јас ќе треба да се погледне во кодот да биде sure--
веројатно има HTML табела или можеби неподреден список, кој тоа го прави
секоја од вашите пораки како поштенските кутии.
>> И така, ако се замисли ова постојат е дрво во меморијата кога сте
користите Gmail дека изгледа вид на вид на како овој, кога Google ќе сфати, ooh,
имате нов е-мејл, тоа не се случи сакате да ги обноват целото дрво.
Наместо тоа, таа сака да се најде на јазол во дрвото што го претставува вашиот inbox
и само да се вметне нов јазол.
>> Толку многу слична pset пет, каде што мораше да вметнете јазли во хаш табелата,
Слично на тоа што Google, преку JavaScript код кој го има напишано,
напречни ова дрво, дознаам каде е дека сандаче дел од прозорецот,
и потоа вметнете нов ред.
И нов ред само значи еден или повеќе нови јазли во дрво.
>> И така AJAX е оваа техника кој овозможува токму тоа.
Откако сте ја посетиле URL-то, сепак луд долго е,
и еднаш на страница има натоварен, сеуште можете да
зграби повеќе податоци од internet-- без разлика дали е
е-маил или плочка на map-- го грабне зад сцената
и потоа вметнете ја во страницата со цел човекот навистина не
мора да чекаат за тоа.
>> Фејсбук Messenger работи на истиот начин.
Било кој број на други websites-- ох, всушност, дури и оваа.
Мислам, ова е, искрено, вид на досадни функција, овие денови.
Ако јас почнат да бараат за cats-- ова е вид на страшно корисничко искуство.
Тоа едноставно се започнува со пребарување за мене.
Па она што го прави тоа?
URL-то навистина не се промени откако почнав да пишувате.
Но, она што се случува во целиот wire-- Добро, хм интересно.
Што се случува во целиот жица тука само добива почуден.
>> ВО РЕД.
Па дозволете ми да оди напред и да ја испита елемент и да одат на јазичето мрежа
и да се обидат да се направи ова технички и помалку за мачки.
Како што типот, буквално, мачки and-- она ​​што се случува
per-- Јас не одам за да кликнете на тоа.
Во ред.
Па долу тука, она што се случува на секои време сум тип на карактер, очигледно?
Како, ниско ниво?
Што се случува во секоја од овие карактери јас сум пишување на мојата тастатура?
Да?
ПУБЛИКАТА: [Беззвучен].
>> Дејвид MALAN: Токму така.
Секоја од овие ликови е одење на Google, едно по едно време.
Тие се натрупуваат низа на нивните сервери, што претставува
сето она што го внеле во досега.
И секој пат кога ќе напишеш друг карактер, тие
користат своите тајната сос на пребарување алгоритам и да дознаам,
значи тоа оваа мачка страница или оваа мачка страница или слично?
Па во извесна смисла, тоа ми дава со подобро искуство со тоа, јас дури и не
треба да се заврши мојата мисла.
И навистина, тоа е корисна работа, AutoComplete воопшто.
Ако нивните алгоритми се доволно добри и ако моите пребарувања се доволно очигледно,
Јас не мора да напишеш целиот збор.
Тие се случува да ми кажеш што е е јас сум всушност барате.
Значи она што Google го нарекува инстант Пребарувањето е само со користење на AJAX,
користење на кодот кој им дозволува да побараат дополнителни содржини преку веб прелистувачот
зад сцената со користење на овој странски јазик, го вклучите Javascript-.
Па ние имаме остави неколку минути.
И дозволете ми да се јавам до мојот другар Колтон ја преминало на сцената,
бидејќи тоа се чинеше особено забавно последен пат
да се воведе технологија дека некои од вас
изразија интерес во за конечниот проекти.
Ние мислевме дека ќе биде забавно да се донесе Регистрација волонтер, иако, и денес
да ви покажам еден прилог тоа што им овозможува на you-- је,
Првпат го видов овој рака.
Качи.
Многу добро направено.
Добра работа.
Одам да се проектираат на овој на екранот во само еден миг.
Што е вашето име за сите?
>> ЕФА: Јас сум ЕФА.
>> Дејвид MALAN: Etha?
>> ЕФА: ЕФА.
>> Дејвид MALAN: ЕФА?
>> ЕФА: Да.
>> Дејвид MALAN: Убаво да ви се види.
Во ред.
Дозволете ми да се добие оваа подготвена.
Дојди до средината со Колтон тука.
Што Колтон има во своите раце денес е далечинскиот управувач.
Така, наместо само стојат таму во тридимензионален свет бараат околу
како Колтон не, сега можеш ЕФА всушност, се шетаат со одење нагоре,
долу, лево и десно како Нинтендо или Xbox контролер.
ЕФА: Одам да се падне на сцената.
Дејвид MALAN: Јас ќе стојат околу овде.
Но, тоа е ризик.
ВО РЕД.
Така одат напред и да се стави оние на.
Дозволете ми да оди напред и да префрлат на екранот овде.
Дозволете ми да придуши го светла.
И Колтон, дозволете ми доаѓаат стојат до тебе.
>> Дали сакате да се објасни тука со микрофон она што го правиме?
Еве ти.
>> COLTON: Секако.
Па сега сме вчитување на Oculus,
Претпоставувам operating-- не работат систем, но во главната програма, каде што
можете да пристапите сите игри и апликации кои се во вашата библиотека.
Па токму сега, тоа треба да се каже допрете го екранот со допир да се почне.
Touchpad се случува да биде на десната страна на слушалката.
Така одат напред и tap--
ЕФА: О, човеку.
Дејвид MALAN: Да, таму да одите.
Квалитетот ЕФА е гледањето е многу повисок квалитет.
Ова е само за Wi-Fi тука.
COLTON: Па што си ќе сакате да го направите
се погледне кон врвот десната страна на екранот.
Да, тоа игра на самиот врв во право.
А потоа кога сте изборот тоа, допрете го екранот со допир повторно.
Мислам дека неговата Dreadhalls.
А потоа тука е a-- тука, ајде ме држи вашите очила за вас.
>> Па јас само му даде контролер.
Па сега може да го контролира играта.
Тој може да се движи наоколу и да работи како што.
Така одат напред и се погледне до врвот.
Треба да го видите Нова игра.
Така одат напред и можете да го направите тоа.
Сега, вие треба да бидат способни да ги контролираат себе си со контролорот,
како и, штом играта вчитува до тука.
Ова може да биде малку страшно.
>> ЕФА: Сега можете да ми кажете.
ВО РЕД.
>> COLTON: Во ред.
Така потврди дека можете да се движите наоколу.
ВО РЕД.
Можете да се движите наоколу.
Совршен.
Значи, ако се погледне надолу треба мапа.
Мапа ви покажува каде се наоѓате.
Може да се погледне низ собата.
Не може целосно да се сврти.
Да, точно.
Сврти се.
>> Па погледнете на вашиот лево.
Мислам дека постои нешто што може да ги собереш на барел во собата.
>> ЕФА: Како да ја добиете планирам на кој начин?
COLTON: погледот.
Само да се погледне нагоре.
Во ред.
Ете ти.
Сега одиме напред и само да се сврти.
Па гледам подалеку на вашиот лево.
Да се ​​движат лево.
Задржи во потрага лево.
Продолжи да одиш.
Је.
>> ЕФА: Ах, на тој начин.
>> COLTON: Да.
Одат кон тоа со контролерот.
Ете ти.
Сега тоа треба да се каже да го собереш.
Ете ти.
Подигни го.
Во ред.
Сега, ајде да се излезе од оваа соба.
Оди напред и да одиме до таа врата.
Па ви се случува да го кажува hold-- држете го копчето за да го принудат отворен.
Така одат напред и држете го копчето.
Да, принудувајќи го отворите.
Во ред.
Добра работа.
Сега ние сме одење надвор од собата.
Па јас ќе одам да го напушти останато за вас и да видиме што ќе се дознае.
ЕФА: Јас не одам во темна соба.
Ох почекај.
Сега морам да одат надолу по темни сала?
Добро, јас сум да се вратам [Беззвучен].
COLTON: Во ред.
Некои повеќе предмети да ги собереш.
Изгледа како некои монети.
Тоа е рецептот за заклучување.
Па ако најдете заклучена врата, можете да го користите.
Дали сте исплашени?
>> ЕФА: Сè уште не.
COLTON: Во ред.
>> Pretend-- је.
Само се преправаме дека сте всушност стои таму.
И ако го around-- имаш за да се навикнеш на него.
Но, тоа го прави смисла.
Дејвид MALAN: И додека ЕФА продолжува да игра, бидејќи ние би можеле да го направите тоа на целиот ден,
можеме да сите врвот пети од тука.
Но ние имаме две други парови, ако сакате да се излезе и да игра.
Во спротивно, ќе видиме ви следната среда.
Ви благодариме на нашите волонтери денес.
[Аплауз]
>> [Музика - "Seinfeld тема"]
ЗВУЧНИЦИ 1: Па, јас сум поставување на нова PL монтира.
Јас само го смени OLPF--
>> ЗВУЧНИЦИ 2: Па што точно правиш?
>> ЗВУЧНИЦИ 1: Па, секој од these-- тука, јас ќе ви покажам еден тука.
Можеш да го видиш во право тука.
>> ЗВУЧНИЦИ 3: Мислам дека сум добар со овие.
Сакате нешто повеќе?
>> ЗВУЧНИЦИ 4: Не, јас сум добро. [Беззвучен].
>> ЗВУЧНИЦИ 3: Не, [Беззвучен].
Има некои.
ЗВУЧНИЦИ 1: Различна боја.
ЗВУЧНИЦИ 2: Во ред.
ЗВУЧНИЦИ 1: Значи, на крајот она што не е тоа прилагодување на бојата of--