>> [Раздел 9 - малко удобни]
[Nate Hardison - Harvard University]
[Това е CS50. - CS50.TV]
>> Добре. Така че, последният раздел на семестъра.
За да започнете, аз знам, че е имало някои викове да се направят някои Ajax,
но има ли други теми, които ние трябва да се прави на първо място?
Позволете ми да премина към IPAD, така че ние имаме -
Позволете ми да използвам черен вместо портокал.
Аякс е в менюто. Всеки друг?
Всякакви други теми, които хората искат да видят? Чух DOM твърде рано.
[Ученик] Jquery. >> Jquery. Добре.
Jquery. Ние можем да направим хладно оръжие на това също.
[Ученик] XML. >> XML. >> [Ученик] JSON. >> XML, JSON. Добре.
PHP? Всичко добро? С? Всичко добро? >> [Ученик] Тя не би навредило да поговорим за PHP.
Hash таблици? Опитва? Свързани списъци?
[Ученик] О, на теста от миналата година, има маса за омегата и големия O.
Да. >> [Ученик] тъй като времето за различните видове версии и илюзии.
Може ли да поговорим за това? >> Да. Ще говорим за малко на структури от данни.
[Ученик] Да. >> [Ученик] Опитва. >> [Hardison] Структури от данни.
Ние ще говорим за някои опити за сигурен.
[Ученик] Можем ли да имаме CSS малко? >> Да, ние можем да направим малко CSS.
Всякакви други теми? Сам? >> [Ученик] Обхват в PHP. >> [Hardison] Обхват.
Обхват в PHP. >> [Ученик] HTTP.
HTTP. Awesome.
Предполагам, че един от начините да направите това е да се организира всичко вид хронологично
и да започне със структури от данни, тъй като тези, които са били по-рано.
Или можем да присвоите тези някакъв приоритет претегляне и отидете от там.
Така че това, което мисля, че момчета?
Има ли нещо, което всеки умира, за да видите?
Нека да направим рейз на ръце. Какво ще кажете за Ajax?
Колко от вас искат да знаят за Ajax?
Колко от вас са като: "Човече, Ajax, Държа те"? Никой. Добре.
Така че Аякс е доста висок. Нека звезда, която човек.
Какво ще кажете за DOM? Всички готови за рок DOM? Не? Добре. Ще звезда, която също.
JQuery?
Queryless. Да. Добре.
Няколко души за Jquery, но все пак хората са малко по-хладен с това. Добре.
XML? XML. >> [Ученик] Използвате ли, че повече, отколкото в контекста на Аякс?
В смисъл, че - Да.
Искам да кажа, той е ключов компонент на Ajax, така че предполагам, че можем да се обединят с Ajax,
Забавление за цялото това нещо там.
JSON? Какво е JSON? Добре, охлади.
Структури от данни? Хората се чувстват доста добре там?
Вие знаете вашите свързани списъци, хеш таблици знаете вашите?
Как Speller отиде за всички? Това беше готви, нали? Да. Добре.
Да, можем да поговорим малко за тези, но отново, не толкова важно.
CSS?
Осъществяване вашия уеб сайтове изглеждат доста. Добре.
Обхват в PHP? Една голяма ръка там. Две големи ръце, три. Добре.
Може би средно ръка. >> [Ученик] Повече от 2.
Да. Сам води кампания. Вдигни си ръцете.
HTTP? Добре.
>> Така че нека да видим. Тя изглежда определено като Ajax и DOM са за грайфери.
Така че нека да започнем с това.
Предполагам, че ние имаме няколко възможности тук.
Един от тях е някак да направим една рекапитулация на това, което са Ajax и XML
тъй като ние наистина не разполагат с време, за да направи това в раздел или в проблема задава.
Другото нещо е да се потопите в някои проблеми от викторини предходни години
и да видим какво става там.
Всяко предпочитание между 2? >> [Ученик] Мисля, че конкретни примери ще бъдат по-полезни.
Конкретни примери по-полезно? Добре.
Всякакви такива по-специално, тези от вас, от екипа на Аякс?
Всички проблеми, които искате да погледнете?
[Ученик] е събитие манипулатор свързани с Ajax изобщо? Мисля, че това е. -
JavaScript обработчици на събития не е задължително да са свързани с Ajax. Те могат.
[Ученик] Да, това е друга идея, която аз не се получи в действителност. >> Добре.
[Ученик] Но мисля, че в теста от миналата година има един голям проблем
в по-късните части на теста, който е свързан с Ajax и синтаксиса, че аз не съм наистина -
Добре. И Ella?
[Ученик] Имам чувството, че знам какво е Ajax, но аз не знам как да го използвам.
Добре. >> [Ученик] Имам чувството, че не знам какво е Ajax или как да го използвате. [Смях]
Добре. Това работи доста добре.
Нека да видим. Да може би изглежда най-добър пример за Ajax първи.
>> Добре дошли, добре дошли. Надявам се да са добре пред камерата.
Ако не, можете да се мотае в гърба.
>> Добър пример за Аякс.
Позволете ми да премина към моя лаптоп.
Тук ние сме в Google.com.
Колко от вас някога играе забавно "How Do I?" игра на Google?
Как да направя - и ще получите, за да видите всички най-забавните неща, които идват -
слагам тази музика на моя Tumblr?
И можеш да продължиш напред и да получите всичко това сортиране на забавни неща.
Какво се случва тук?
Докато пишете в полето заявката на Google, резултатите в реално време актуализирате.
Така че сложи това - и забележите, че всички резултати започне актуализиране на интернет страницата на Google.
Това не е нещо, което се случва на вашия компютър.
Мрежата е замесен в това. Google се занимава с това.
Оказва се, че всеки път, когато натиснете бутон, като кажа, G или L,
и резултатите от търсенето обновяване, това, което се случва
е, че има някои JavaScript на страницата, която е откриване, че сте натиснали бутона,
и който се прави заявка за мрежа за Google.com, за да заредите всички от най-новите резултати
който най-добре пасва на заявката, която сте въвели до момента.
За съжаление, аз вярвам, че ако бяхме да разгледаме това -
Отивам да гледам при източника - голямата част от тази Аякс или JavaScript код тук
е всичко minified и често бъркани малко прекалено.
The minification буквално е програма, можете да стартирате свой JavaScript код чрез
и той се променя всички ваши имена на променливи и го прави напълно нечетим
но се опитва да направи своя JavaScript възможно най-кратък
така че, когато изпращате вашите файлове джава по мрежата
вие не се налага да се зареди или изпрати големи файлове.
Така че тези неща е доста трудно да се чете,
но погребан тук, какви правомощия тази typeahead - модерна дума за това -
е искания Аякс.
>> Какво прави искане Ajax-различно от всеки друг вид на искане на мрежата?
Сам? >> [Ученик] Вие не променят адреса. >> [Hardison] Right. Точно така.
Можете да забележите, докато пиша ", как мога да си сложа челюстна кост в режим на сдвояване?" [Подсмихва]
Винаги има някои забавно - Да.
Можете да забележите, че този URL тук на върха не се променя,
и цялата страница не е освежаващо.
Така че, ако се вгледаме в този вид неща чак до тук, тази лента в горната част, това Google,
и след това черната лента до тук, което често се нарича хром на дадена уеб страница,
че не се променя. Цялата страница не е освежаващо.
Искането на Аякс се използва, за да обновите само резултатите на страницата,
Просто една малка част от страницата, така че не сте се налага да отидете напълно различен URL на,
съвсем различен файл, и да заредите, че в паметта.
Така че, когато чуете хора, които говорят за динамичен Web 2.0 типа на революцията,
това е зад много от него.
Това е, което ви дава възможност да пишат на стената пост на Facebook, удари Post,
и са поста яви без целия Facebook страницата освежаващо
или преминете през куп снимки и да заредите снимките динамично,
защото колко ще го смуче, ако отиде да си Facebook страница,
кликнали върху снимки, и след това трябваше да седи там и да чакат
докато всички няколко хиляди от вашите Facebook снимки заредени в паметта?
Това е един огромен товар.
Но с Ajax можете да направите това асинхронно,
и това е асинхронен част на Аякс.
>> Добре.
Добри ли сме? Дали всеки вид разбере приблизително какво прави Ajax?
Това е направено от JavaScript, това е направено вид динамично и асинхронно
след като страницата е заредена.
Той често идва след като вид на отговор на събитие,
който е или щракване с мишката или натискане на клавиш или нещо подобно.
И след това го прави за повикване обратно до сървъра, независимо дали сте на Google.com
или Facebook.com, извлича някои ново съдържание към тогава покажете или обновяване
или нещо подобно.
>> Cool. Добре.
Нека да разгледаме няколко примера от предишни години.
Ние ще отидем на викторини.
И тогава Charlotte, вие споменахте Quiz 1 от 2011 година. >> [Ученик] Да.
Едно нещо, което ще се повишено внимание, че в търсенето на викторини предходни години
ще видите тези неща, наречен XHR често с връзка с Ajax.
XHR и XML HttpRequest е вид на суров начин на правене на Ajax, ако щете.
Тази година ние сме преминали към почти изцяло с помощта на тази библиотека JQuery.
Jquery е библиотека на помощни JavaScript функции и класове и всякакви екстри,
и Jquery вид резюмета на сурово XHR неща далеч от вас
така че това е много по-лесно да се направи действителната Ajax неща.
Така че, както сте превъртате чрез викторини тези от предходни години
и вие виждате неща, които казва XHR и нови XML HttpRequest,
всички такива неща, можете да игнорирате това.
Вместо това ние отиваме точно по начина, JQuery.
Ние не очакваме да знаеш XML HttpRequest.
Но е добре да знаете, че това е синоним на тази идея на Ajax,
Asynchronous JavaScript този привлекателен XML или JSON или каквото и през мрежата.
Но първоначално е свързана с XML или свързан с XML.
>> Добре.
Нека да превъртите надолу. Спомняте ли си, който проблем по-специално, Шарлот?
Беше ли тази страница, че аз гледам точно тук? >> [Ученик] Да, така мисля.
[Hardison] Ах, аз го имам. Добре. Да.
Нека поговорим за това наистина бързо.
Начинът, по който работи е Ajax имаш някои JavaScript файл на вашия компютър,
и наистина това е тичане вид в контекста на вашия уеб браузър.
Така че, ако крайната си проект е да се направи - не знам - нов сайт за запознанства за хора от Харвард
и вие искате вашия сайт за запознанства, за да има възможност за изпращане на анонимни съобщения
от човек на човек или анонимни Facebook стена като мнения
и искате да използвате Ajax в които по някакъв начин, така че когато публикувате съобщение
тя не се обновява, за целия сайт,
в JavaScript код, който ще създаде нова Ajax повикване.
Аз съм обсъждане за това дали или не да се направи това на лаптопа.
Най-важната част за обаждането Ajax е, че този вид asynchronicity да го
в смисъл, че - нека да се върнете обратно към моя IPAD -
в смисъл, че ако имам код, който ще каже направят някои Ajax,
тогава аз не мога още на следващия ред на моя JavaScript код
Очакваме, че Аякс ще са завършили.
Какво се случва, е, че като си код работи последователно в JavaScript,
когато правите този призив Ajax, вие сте по същество разклоняване на разстояние
и изпращане на искане до интернет за някои сървър тук,
което е това поле аз рисувам и очевидно не го съставяне много добре.
Вие сте разклоняване от този разговор на сървъра, че ще отнеме известно време
тъй като тя отива към Интернет и си отива и удря този сървър
и си отива, и призовава, че PHP скрипт, който сте написали в задния край
действително да се констатира, че анонимен съобщение във вашата база данни или нещо подобно.
Така че това ще отнеме известно време, и след това в крайна сметка, когато сървърът се извършва обработката
Вашата заявка Ajax, той ще се върне към вашия JavaScript код,
но наистина не знам къде, в кой момент в изпълнението
ти започваш да получите този отговор.
Как това работи в JavaScript?
Това е мястото, където става дума в този проблем, че ние не говорим за на лаптопа
, където можете да регистрира манипулатор, като се регистрирате функция специално JavaScript
да тече от момента на искането Ajax е завършен.
Не може просто да направите вашия Ajax повикване и след това в следващия ред код
Предполагам, че обаждането Ajax е завършил.
Част от красотата на това е, което искате вашият JavaScript, за да продължи да се движи
, след като е направена поканата Ajax, защото може да се разклони от този отделна заявка
и поддържа обработка на други неща.
Имаш този вид едновременност става тук, където ви JavaScript продължава да работи
и продължаваш да правиш други забавни неща, може да продължи да се върти други искания Аякс.
Вашите искания Аякс просто излизат на мрежата и след това да се върне, когато те се върнат,
но когато се регистрирате този манипулатор функция,
това е, когато знаеш, че си Ajax разговор се е върнал, защото тази функция се нарича получава.
Така че, вместо да се налага този път изпълнението последователно, че ние сме свикнали в C,
Имате ли какво е по-близки до това, което видяхме в Scratch в началото на семестъра
къде имате тези предавания
и тогава ще трябва тези "когато зелен флаг кликнали" или "когато получа това събитие."
Това е по същество това, което се случва тук в JavaScript с тези искания Аякс.
>> За отговора на този въпрос по линия 20,
"В контекста на Ajax, какво прави този ред на код правим?"
Може ли някой вид перифразираме това, което току-що казах, за да потвърдите разбиране?
[Ученик] Съжалявам. Какво означава лявата половина на го кажа?
[Hardison] xhr.onreadystatechange. Извинете. Получавам отсече?
Това е, че XHR синтаксис, че ние няма да се налага да се справят с.
Вие имате подобна концепция с JQuery.
Да отидем в Source Code, сряда, индекс.
Нека да разгледаме това. Добре. Взех го.
Ето, че Ajax синтаксис, че ние не говорим за.
Тук сте се посочва искането Ajax.
Казваш: "Това е URL адресът, който искам да изляза и да пинг."
"Искам да използвам POST, за разлика да се получат."
И тогава типът на данните е "Искам JSON да бъдат върнати."
Отново, XML е вид на нещо традиционно.
Но това, което търсим, е, че функцията.
Това е, че точно тук.
Тази функция (отговор) е, че onreadystatechange.
Това е водачът. Това е, което ще се изпълни, когато тази молба се връща.
Така че можете да забележите, че тази функция, че Томи е писал тук
че ние говорихме за в лекция в сряда е всичко за създаване, че забавно typeahead за нас.
Можете да забележите, че това, което той прави е, че е изграждането на искането Ajax
и след това няма нищо след искането на Аякс.
Той не е обработка на отговор на искането на Аякс след обаждането е направено.
Той го прави само в този манипулатор функция
, който ще бъде наречен най-скоро отговорът се върне.
>> Sam. >> [Ученик] Да искания Аякс трябва да бъде от тип POST или да го бъде ли?
Те могат да бъдат един от двамата. >> [Ученик] Как би тази работа, ако не сте промяна на URL адреса?
Как ще работи, че ако не сте промяна на URL адреса?
Просто зависи от това къде на данните става.
Така че въпросът е може искания Аякс бъдат POST или GET?
Това е мястото, където тя може да бъде един от двамата. Това е просто наистина семантична разлика между POST и GET.
GET обикновено означава, че сте само четеше нещо от сървъра
и вие не променя нищо, докато POST обикновено предполага
че сте на запис на данни или пишеш нещо за даден сървър.
Често можете да използвате POST, когато се опитвате да се промени състоянието някъде.
Ето защо влизания винаги излизат с HTTP POST,
има предвид, че Google прави един куп заявки GET.
Всъщност, ако се върнем към нашия Google например и ако се вгледаме в нашите инструменти за разработчици тук,
нека да разгледаме инструментите за разработчици тук на дъното и да се отворят мрежата.
Както можем да започнете да пишете, можете да видите всички от тях GET заявки, идващи инча
Виждаш ли всички тези искания GET тук в долната част на екрана
които са всички тези XJS.
Това е искането на Аякс се върне.
И ако трябва да кликнете върху него, можем да видим какво казва и какво му е отговор.
Това ни дава цялата тази информация за отговора, който имаме
когато ние изпратихме до Google заглавията, които са били тук.
Нека да видим, ако има - ще имаме нашата заявка низ някъде.
Искане URL. Да.
Original заявка, игнорирайте лошо заявка, втори пас, как м -
Както и да е, някъде тук можете да намерите тази заявка "как I m"
в искането, отправено към сървъра.
И тогава отговорът се върне е това, което виждаме.
Така че, да, той може да бъде или GET или POST.
Тя има тенденция да бъде само семантична разлика. Ние може да покрие, че с HTTP. Да, Ела?
>> [Ученик] е разликата между JSON и XML точно това JSON е по-модерен?
Е разликата между JSON и XML, че JSON е по-модерен?
XML и JSON са само два различни начини за кодиране на данни.
XML е Extensible Markup Language.
HTML е подмножество на XML.
Така например, нека да спра TextEdit.
XML е просто определя като данни, които се затварят в една поредица от тагове.
Така че HTML, / HTML, тези момчета са валидни тагове.
Нека да взриви този размер тук и да я направи по-разбираемо.
здравей!
XML просто дефинира етикет като нещо подобно
където имате отваряща счупена скоба, името на етикет,
и след това на произволен брой атрибути, които в HTML ние често не разполагат с атрибути.
Но например, ако имахме таг скрипт, често има вид на текст, JavaScript.
А вътре на таговете е данни.
В истински XML всъщност можете да определите тези тагове, за да бъде каквото си искате.
Това е просто начин на структуриране на информацията си.
Така например, ако исках да се кодира семейството ми в XML,
Бих могъл да направя нещо подобно, като баща и след това пуснати информация за него
и брат и публикувате информация за брат ми.
Само по този начин на структуриране на вашите данни е XML.
JSON, от друга страна, следва Обект нотация JavaScript,
следователно J-S-О-N, JSON.
Така че вместо да пишете с този вид тагове, затворен тип етикет формат,
ние, вместо да го напиша като обект на JavaScript.
Така обект на JavaScript има фигурна скоба, за да отворите неща
а след това и къдрава скоба, за да затворите неща.
Позволете ми да намалите малко, увеличение инча
И тогава какво сте са имената на полета, така че "баща":
и след това можех да публикувате информация за него
и след това "брат", и информация за брат ми.
И разбира се всичко тук е -
Предполагам, че това, което е хубаво за JSON, за разлика от XML
е така, защото JSON обект е в този обект нотация, че JavaScript е.
JavaScript може наистина лесно дръпнете, че в паметта и го третират само като обект на JavaScript
прав, когато я получи обратно от сървъра.
Няма никаква разбор, че наистина трябва да се направи, че е тежък режим или вдигане на тежки предмети,
докато с XML, което трябва да използва или плъгини или някакъв вид -
В зависимост от това какво точно сте предаване
и това, което използвате, за да получите XML, може да се наложи да се направи малко повече работа разбор,
има предвид, че този JavaScript неща, ако сте само писмено с JavaScript
а вие получавате JavaScript назад, това е много лесно да се работи.
Другото нещо, което хората ще споменават понякога
е, че с XML имате всички тези отворени тагове и близки тагове,
така той може да получи голяма, тя може да се получи малко раздута.
Така че има някои, които ще говорим за това как с JSON
не е нужно всички тези отворени тагове и близки тагове, така че е по-сгъстен.
Причината, че това е важно, е, че когато трябва да се зареди неща по мрежата
когато говориш с отдалечен сървър,
толкова по-малко, че трябва да бъде предавана чрез интернет, по-бързо, всичко върви.
Както и да е, ключовият храна за вкъщи тук е, че те са само два различни начини за структуриране на данните,
форматирането на вашите данни.
>> Добре.
Други въпроси? Шарлот?
[Ученик] Мога ли да задам един последен въпрос за синтаксиса на Аякс? >> Разбира се.
[Ученик] Ако се върнем на пример код и просто отдалечите малко,
има само един ред с код по-горе.
Не може ли просто да отиде?
на ("keyup", функция ()
Дали този набор от празни скоби след по ("keyup" се позовава на функцията след успех?
[Hardison] Не.
Няколко неща тук.
на ("keyup", това е начин на правене на равностойността в Scratch
на, когато се натисне клавиш и вдигнете нагоре изключване на ключа.
Всъщност, в JavaScript имате на ("keydown", относно ("keyup", и на ("натискане",
и можете да направите неща, за всеки от тези три различни събития.
Това се е регистрирал за манипулатор на събитие всяко време ключов идва,
и след това тази функция е цялото това нещо
по целия път до там.
Тази функция все още няма име.
Нещо странно.
Всички наши функции, които сме правили в C и PHP са всички имали имена.
Това е, което ние наричаме анонимен функция. Има смисъл, нали? Без име. Anonymous.
Какво е удобен за анонимния функцията?
Ясно е, че не можем да наричаме тази функция никъде другаде в нашия код.
Как бихме нарекли тази функция на друго място в нашия код? Ние не можем.
Няма по име. Не мога да кажа: "О, да, наричаме тази функция, която ви казах с по (" keyup "."
Какво е удобен за него обаче е, че в JavaScript
когато ние сме постоянно регистриране на тези обработчици на събития -
това е, което това се нарича; сте регистриране тази функция като манипулатор, когато ключов идва -
е това е наистина хубаво да бъде в състояние само да определи тези функции вид инлайн и просто да кажем,
"Когато keyup е натиснат, не забравяйте, тази функция, че аз отивам да се определи точно тук,
и тя ще запомни тази функция и след това ще направя тази функция
когато ключът идва.
Ще говорим за това още веднъж можете да получите повече във функционални програмиране.
Това е малко по-малко от вкуса на тази, в която ние сме по същество преминава функция около
като обект, почти толкова, ако го бяхме като променлива.
Вместо да премине низ или ПНА, подминаваме функция.
Това е вид на нещо странно, но това, което е хубаво е, че всички променливи в тук,
във вътрешността на тази функция, въпросите за обхват са приятни
защото, ако имате променлива до тук, можете да се обърнете към тази променлива вътре на тази функция
тъй като тази функция е обявен във вътрешността на тази друга функция.
Така че можете да получите да има ползи като това.
Отново, това е нещо, което е по-мета. Ще го покрие в бъдещите класове.
>> Да. >> [Ученик] Тъй като функцията е анонимен, може да се използва някъде другаде?
Или може да се използва само в рамките на тази функция?
[Hardison] Той се използва само в рамките на тази функция. Да. Да?
>> Има ли нещо общо с факта, че това е обектно-ориентиран език?
[Hardison] Има ли нещо общо с факта, че това е обектно-ориентиран?
Бих казал, че това има повече общо с факта, че това има функционални аспекти.
Ние говорим за обектно-ориентирано програмиране на парадигмата,
и това е вид на един от тези аспекти на функционална парадигма на програмирането
където вие правите функции, които са съставени от други функции
и преминават функции наоколо.
>> [Ученик] Така че JavaScript е също език функция.
Тя има елементи от нея, да. Да.
JavaScript и много -
PHP има някои от това също, Python има същия този вид неща,
Ruby има този вид неща, както и, и това е често срещана в повече от тези модерни езици.
Вие наистина се тези скриптови езици, които са вид на Джак-на-всички-продажби.
Това е като голяма мастна Swiss Army ножа, този, който не може дори да сложи в джоба си
защото е твърде широк.
Това е вид на това как някои от тези езици са станали.
>> Някакви други въпроси? Добре.
Как сте, момчета чувстваш?
Нека да се върнем към този тест наистина бързо и да видим дали можем да отговорим на 21 и 20.
Ние говорихме за 20, тъй като ние регистрирано тази манипулатор.
Този въпрос тук, "Какво би бил ефектът, ако ние написахме тази линия с чифт скоби?"
можете да видите разликата, колко нагоре към върха не са налице скоби
и тук има скоби след името на функцията?
Едно нещо, което е важно да се отбележи,
Тук сме, отнасящи се до дадена функция.
Това не е анонимна функция. Това е било дадено име, манипулатор,
докато в нашия Ajax тук, че ние просто гледаш,
всички функции, които ние минавахме около всички бяха анонимен: не име на функция,
без име функция.
Така че това е обичайна практика да се определят тези функции вид инлайн като анонимни функции
за някои от ползите за обхват.
Вие може много добре да сте определили тази функция тук или този на (функция "keyup".
Можеше да се дефинира този човек като функции с имена на други места в JavaScript код,
и след това, вместо на определяне на функцията тук, ще премине на името на функцията
точно в това място.
Едно нещо е да се отбележи, е, че вие ​​не бихте искали да използвате скоби
ако сте били преминаване на името на функцията,
защото, когато използвате скоби, вие намеквате "наричаме тази функция,"
като има предвид, вместо тук, ние просто искаме да се премине на името на функцията.
Ако се вгледаме в това, което става тук, голямата разлика е, че този най-горния ред от код казва
ефективно, поддържа указател към функция, наречена манипулатор,
и когато разговорът приключи Ajax, обадете се на тази функция,
всъщност изпълнява функцията, щепсела в аргументите, вършете всичко на тази работа,
има предвид, че тази линия тук долу казва вместо поддържането на показалеца
на функция, наречена манипулатор, това onreadystatechange поле
ще се проведе в резултат на функция, наречена на манипулатор,
така че ще оцени манипулатор, това ще всъщност наричаме манипулатор точно сега -
не, когато разговорът приключи Ajax но точно сега,
, което не е това, което искате да направите, ако пишете нещо
да се справят с покана Аякс, който е завършен.
>> Добре. Въпроси за това? Това е една малка разлика.
Това е една малка разлика.
Едно нещо, което със сигурност ще предложи това, ако не сте го направили -
защото това е ново нещо, тя отнема известно време, за да наистина потъват в
ако наистина не напишете някои от тези неща -
Бих Ви препоръчваме да мине през изходния код
че Tommy представени в лекция в сряда
защото той определено премина през много неща, нещо като в мъгла.
Аз всъщност ще се опита да го напишете вън.
Опитайте кодиране някои неща нагоре.
Направете файл. JS. Въведете кода от себе си. Недейте просто да копирате и поставяте.
Не просто стартирайте CP.
Опитайте се прави, че просто някак да размърдате JavaScript мускул.
Виж какви неща са.
Например, тук гледам quote7.js в изходния код от лекция в сряда.
Опитайте се случва в и вместо просто да направи всички тези функции анонимен,
Копирайте този код, буквално слизат този успех код,
копирате това, да го поставите в друга функция, и да му дадете име,
и след това се опитайте преминаване на името и да видим какво ще стане.
[Ученик] Възможно ли е това да е в отделен файл или в същия файл?
Тя може да бъде в отделен файл, ако правилно го включи.
Едно нещо, което няма да бъде -
Номерът е да се тази функция се отнасят към някоя от променливите, които са извън нея?
И аз мисля, че това се отнася само до отговор.
Да.
Можете да назове това.
Можете да го извадя, можете да му се даде име, и след това можете да се премине на името тук.
Така че аз ще дам, че пробвам, виждам как това работи.
>> Добре. Въпроси? Въпроси? Обичам въпроси.
Аз не знам за вас момчета, но аз ги харесвам.
Как сте, момчета предчувствие за това?
Има вид на това: "О, глупости" настроение в стаята. [Студенти непохватен]
Това ли е вид как вие се чувствате? >> [Ученик] Да. >> Да? Да, Даниел?
>> [Ученик] Мисля, че разбирам вид на общите понятия, които вие говорите,
като анонимни функции и всички тези неща,
но аз не разбирам половината от синтаксис, че е там точно сега,
като това, което ул. средства, Ли, тези различни етикети.
Аз не мисля, че ще бъде в състояние да код нещо с JavaScript. >> Fair.
Е, че една обща чувство, общ настроения, това звучи като? Добре.
[Ученик] Ще трябва да? >> Ще имаме нужда да се кодира?
Трябва да бъдете подготвени да дисекция нещо подобно, бих казал.
Аз не съм този, пишете на изпита,
но аз определено бих казал, че ако това е често срещано чувство,
вид, че много от този синтаксис тук изглежда като: "Какво, по дяволите, става тук?"
"Аз съм напълно плуване", тогава нека да говорим за това и да се определи това.
Добре звучи, нали?
Добре.
>> И така, какво става тук? Нека да вземем този ред по ред.
Нека се опитаме става из стаята.
Отивам да се обадя на хората един с 1, и да ми даде най-добрия си предположение.
Ние ще го направим бързо. Имаш 5 секунди, за да отговори.
Ако не отговорите, ние се премине към следващия човек.
И това не е голяма работа, защото знам, че това е лудост неща.
Ще започнем отначало тук. Charlotte, какво означава тази линия направя?
[Ученик] Това е създаване на променлива, наречена предложения
и определяне на това, равна на каквото и ул. е. >> [Hardison] Right.
>> Джими, какво е ул.?
[Ученик] Аз не знам. >> [Hardison] Добре, хладно. Шарлот беше напълно прав.
Тази линия на код, който съм подчерта точно тук декларира променлива наречена предложения,
променлива JavaScript.
Имаме тази VAR дума пред който гарантира, че променливата остава местно
с обхвата, че това е инча
И този ул. нещо, което не сме виждали преди наистина,
нека да видим, ако има добър - Позволете ми да се върнете обратно към моя IPAD.
Нова страница.
Сигурен съм, че вие, момчета, сте видели UL преди.
Това е неподреден списък.
Така че, виждали ли сте някога на дадена уеб страница, където ще трябва куршумите
и имате Thing 1, Thing 2, и така нататък и така нататък?
Това е неподреден списък.
Начинът, по който ще се кодира това в HTML се, че ще започне с отворен етикет
, който се отваря на неподреден списък, можете да го затворите с близък маркер, който се затваря с неподредените списъци,
и след това в средата ще трябва да се изброят елементи, Li.
И вътре в Ли ще бъде текста, за да се покаже, така Thing Thing 1 и 2.
След това ние ще затворим списък т. тагове.
Неподредените списъци са супер идеални, защото това е един чудесен начин да се получи същия стил
прилага към ред на нещата.
Така че, ако се вгледате в, например, 7 код PSET,
много от хапчетата навигация, хапчетата за навигация, които са били използвани за различните връзки
за покупка, продажба, Quote, история, всичко това, тези, които са реализирани като неподредените списъци,
и те да се използват CSS да се премахнат тези подточки
и вид на промени нещата леко.
Това е вид на силата на CSS е, че HTML описва структурата.
Имаме списък на елементи от списъка.
Това е неподреден. Няма по първия, втория или третия. Това е просто един списък.
И така, по подразбиране тя ще го направи само с куршуми.
Ако вместо това беше написал ол, така че аз няма да променям това към списъка на ол
за разлика от ул., какво би, че правя?
Тя ще се отървете от тези куршуми, и по подразбиране, вместо да бъде номериран списък
защото сега имаме поръчка.
Стилът на списъка е тогава това, което си поиграете с в CSS,
и това е, когато хората, които са писали библиотеката Bootstrap за CSS играе около
със стайлинга на неподреден списък, за да го да показва тези хубави малки хапчета NAV.
Ако се вгледаме в Google, например, нека да погледнем на този човек.
Обратно към "как I m майка си" - звучи вид на немски език.
Обичам немски език. Това звучи толкова забавно.
Съжалявам, ако има някакви германски хора гледат, които се чувстват обидени.
Във всеки случай, ако се вгледаме в тези връзки тук в горната
и ние да видим какво става там, ние можем да го инспектира използването на този човек.
Аз съм надолу тук в ъгъла.
Инструменти за разработчици на Chrome е страхотно.
Ако вие, момчета започват да си поиграете с него и не търсете уроци за нея, тя ще помогне много
ако правиш уеб-базирани проекти.
I кликнете малката ми инспектор. Отивам, за да превъртите обратно тук.
Отивам да видя какво всички тези момчета са.
Аз я увеличите инча Отивам да кликнете върху тях.
След това мога да я увеличите назад и да видим какво всъщност е в HTML чак дотук.
Тя изглежда като Google го е вложен в подреден списък.
Така че ние имаме този период, който казва + Вие, и това е вложен вътре етикет котва,
така че това е, което го прави кликване и тя го свързва с моя Google+ страница.
Той е вложен вътре елемент от списъка,
и това е вложен вътре в този подреден списък.
И сега, ако аз действително кликнете опцията в списъка, тя ще го маркирате за мен там.
Ако маркирате неподреден списък, ще видите как фокусът отива на върха.
Той измества нагоре и ми показва цялата нареди списъка.
Така че Google е просто играе наоколо с стайлинга, за да получите тези списъци, за да се появи такова.
Това е достатъчно забавно със списъци. Върнете се в теста или тези неща.
Сега ние знаем какво неподреден списък е - да се надяваме.
>> Нека да говорим за това следващия ред код, за (VAR аз в response.symbols). Ella.
[Ученик] Нямам представа. >> [Hardison] Нямам представа.
Добре. Вие сте виждали за линия и преди, аз предполагам. >> [Ученик] Да.
[Hardison] Спомняте ли си правиш за всеки в PHP? >> [Ученик] Да.
[Hardison] Това е точно това.
Това е за всеки цикъл в JavaScript.
Това е по-кратък начин, отколкото прави за (VAR I = 0; и <response.symbols.length, аз + +),
които бихме могли да направим,
но това е по-кратък начин да го пиша.
Едно нещо е да бъдете внимателни в JavaScript е, че това не е задължително да следват реда.
Ако response.symbols е вероятно масив,
VAR аз ще бъда индекс в този масив, но това не е задължително 0 и след това на една
и след това на 2, а след това 3.
Те казват за употреба (VAR I = 0), ако те е грижа за подредбата.
Предполагам, че другото, което да се отбележи, е, че когато ние използвахме за всеки в PHP,
ние е посочено името на масива и след това имахме като ключова дума
и тогава ние определено стойността, която ние искахме да извлечете от масива.
Или можем да се задава едновременно ключа и стойността, която ние искахме да извлечете от масива.
Тук сме само за да се индекса.
Ние не получавате действителната самия елемент.
Така че виждате, че когато слезем тук ние всъщност се налага да изтеглите Ith елемент
От response.symbols обект.
Другото нещо, което е лудост за това е, можете да използвате това, за да линия над обекти в JavaScript
и извличане на всяка от свойствата на този обект 1 от 1.
Ако се върнахме, че JavaScript Object Notation изображение на моето семейство
където беше буквално тези фигурни скоби и баща, брат, майка, всичко това,
бихте могли да използвате за линия за обхождане, че както
и извличане на свойствата 1 от 1.
Kind на луд.
Така че това, което правим, изглежда, е, че ние сме изграждане на HTML низ
точно като този коментар се казва, "изграждане на HTML низ за списък с предложения."
Ние ще започнем с нашия отворен таг за нашия неподреден списък
, в която ние се предположи, че ще съхранява всички предложения като елементи от списъка.
След това отиваме в примка върху всички символи в отговора
защото не забравяйте, че това е typeahead за CS50 финансите,
така че ние сме дърпа символите фондови 1 от 1.
И тогава ние добавяме към нашия предложения низ какво?
>> Джаред, какво ти прилича?
[Ученик] Изглежда, като че ли е измъкна от някакъв вид база данни
каквото и писмо, което пишете в,
оставяйки някакво предложение какво дума - >> [Hardison] Да.
Искането на Аякс вече действително отиде и вземете това. Това е нашият отговор.
Това е всъщност, след като съм намерила отговор от базата данни, от сървъра.
>> И така, какво е това? Какво означава това единствено нещо цитат обозначи?
[Ученик] апостроф? >> [Hardison] Да. Това е просто низ, нали?
И така, какво е това занаяти?
Това е низ и ние поставяме нещата в низа. И това, което е низ прилича?
[Ученик] Само предположението, че we're - >> [Hardison] Да, точно така.
Това е предположението, вложен вътре етикет котва,
и че също така е закотвен в един елемент от списъка, така че тя ще отиде вътре в списъка.
Буквално всичко, което правим тук, е, че ние просто изграждане на голям HTML низ.
Ние просто го изгражда буквално като низ в паметта.
Ние не правим нищо измислено.
Ние не създаваме нови възли в DOM или нещо подобно.
Ние сме буквално изграждане на низ като, ако ви се налага да напиша, например,
на вашия IPAD, че имам - в случай, че вие ​​имате един IPAD и като писане HTML на вашия IPAD -
ти си просто за написването на голям дълъг низ, който е като ул., Li, а ...
и след това ние, разбира се, няма да го прекрати с този ул..
Така че това е всичко, което става, е един голям, огромен низ.
А вътре има един Ли и един за всеки от символите, които открихме.
>> И сега, продължавайки нататък, какво прави тази линия направя, Стела, точно тук?
Какво означава тази линия направя точно тук?
[Недоловим отговор студент]
[Hardison] Да. Това е просто добавяне на този човек.
Ние просто приключва нашия списък. Точно така.
>> И тогава тази финална линия - и това изглежда някак шантаво -
Съжалявам. Аз не знам името ти в червено суитчър. Знаеш ли какво прави това?
Или отиваш да се реши не?
А ти? >> [Ученик] Той призовава Jquery върху него, но аз не знам точно коя функция е то.
[Hardison] Да. Той призовава Jquery.
Какво ще кажеш за някой тук през по левия фланг на мен?
Смятате ли, че това, което прави тази линия? Какво означава това да изглежда като го прави, ако трябваше да предполагам?
[Ученик] Подаване на HTML списъка с предложения, или тя е -
Да. Какво искаш да кажеш с подаване?
[Ученик] Казвайки за HTML, което ние просто разглежда в JavaScript
Сега определено е само HTML. >> [Hardison] Да.
Това е едно чудесно начало.
Нека дисекция това малко повече.
Това е точно това, тази част се прави точно тук.
[Ученик] Кой аспект от него става ясно, че това е JQuery?
[Hardison] Jquery е този знак за долар човек.
Всеки път, когато пишеш Jquery, ще видите този знак за долар навсякъде.
Това току-що е било използвано в Jquery като вид на специален символ.
Той прави цял куп неща.
В контекста на това точно тук, в тази част на линията, тя е селектор.
Това е избор Jquery, и се избере HTML елемент
че има предложения за самоличност.
Помниш ли как на HTML елементи могат да имат, че ID атрибут
, където можете да имате точка маркер, който има ID предложения?
Това Jquery селектор ще вземете този елемент
защото този елемент трябва да съществува някъде в паметта.
JavaScript е в състояние да определят точно вид на този елемент и да кажа,
"О, добре, вие сте на параграфа, който има тази ID"
и след това. HTML казва: "Добре, замени сегашната HTML вътре в теб
"С тази нова поредица, този нов HTML, че аз ще ти дам."
Така че, ако ние погледнем назад в IPAD - ха, ха, си спомних за да преминете този път -
често вмъкнете в неща като Divs, така представете си имахме Разделения че трябваше ID = "предложения";
Отиваме, за да затворите тага Разделения тук.
Когато използваме селектора Jquery да вземете елемент в DOM
че е идентификацията на предложения, тя буквално избира целия този Разделения точно тук,
и след това на метода на HTML казва: "Замяна на всички тези неща точно тук
"Точно в този ул., че неподреден списък, който ние просто изградена."
Буквално, ако сте били разглеждате низ целия HTML файл в паметта,
вие просто ще каже: "Идете в това място и удрям силно в този ул. неща"
и след това да актуализирате страницата, така че сега виждате неподреден списък там.
И така, какво прави ефективно е Тя е динамично актуализира тази DIV.
Кодът, който току-що видяхме на лаптопа е обновявал този Разделения
за провеждане на нови предложения, които са били изтеглени от сървъра някъде.
[Ученик] Кои предложения представя нови предложения и старите предложения?
Новите предложения и старите предложения.
[Ученик] Какво представлява кой се заменя и коя прави замяната?
[Hardison] Разбрах.
Виж тук, този човек е низ.
Това определя ID на елемент - ние го наричаме в DOM -
което буквално означава, че някои HTML елемент, който е някъде се показва
на уеб страницата.
Ако бяхме да разгледаме това, ако се върнем към нашата страница за Google,
ние виждаме всички тези Divs и тези ол е и тези на Ли и тези на А.
Всички те представляват HTML елементи, които понастоящем съставляват тази страница.
Те всички корелира отделните елементи на страницата.
И ако трябва да се промени това, вие ще гледате промяна на DOM,
и можете да видите на този вид преместване.
Така че, ако бяхме да въведете Харвард, ще видите DOM започнат да се променят
И списъкът елементи започват да се промени тук.
Това е всъщност това, което се случва.
>> Да видим дали можем да намерим някои от тези неща точно тук.
Нека да разгледаме тази връзка. Нека да разгледаме тази връзка Harvard Wikipedia, и ние ще гледаме да го промените.
Ние можем да видим, че както съм избрана тази, то съответства на тази DIV точно тук,
което също е част от списък елемент, който е в непосредствена близост до друг списък елемент,
, която е част от неподреден списък тук.
Сега какво ще стане, ако ние търсим за нашата малка училищна малко надолу на юг?
Това сега се променя.
Така че ние загубихме нашия дръжка на тази дивизия и този списък елемент
защото сега имаме различни елементи в нашата DOM,
различни списък елементи, различни елементи от списък, различни дължини, всичко това.
Така че този HTML документ се актуализира динамично.
Старите елементи биват изтрити, се добавят нови елементи.
Back тук ние просто се уточнява този елемент, който вероятно ще бъде стабилен
цялата ни актуализация typeahead,
защото в противен случай, ако Jquery не може да намери един елемент, който има ID на предложения,
тя просто ще се срине в този момент.
И тогава ние актуализираме своята вътрешна HTML.
Така че това е тези елементи от списък, тези анкерни етикети, които непрекъснато ще се актуализира и освежават, докато пишете.
Има ли, че свърши по-добра работа? >> [Ученик] Това помага много. >> [Hardison] Добре.
Синтаксисът, че вие ​​ще видите много - знаете какво този човек прави.
Знайте селектора Jquery.
Това Jquery селектор с хеш таг пред предполага ID.
Този човек казва: "Дайте ми елемент, който има предложения за самоличност."
Този човек тук също казва: "Вземи ме, че един и същ елемент с ID предложения."
Този човек под нея е малко по-сложна.
Това казва: "Вземи ме на елемента с форма ID-цитат,
", Но след това влезе вътре тази форма и да намерят детето" -
така че това пространство тук означава, че отиваме на едно дете елемент, вложен елемент.
"Намери формата, която има този ID и след това се намери на входа вътре в тази форма, чието име е символ."
Това е определено в лекционните слайдове на Томи, тези различни видове Jquery селектори.
Трябва да знаете какви видове елементи те са извличане.
Например, нека да се върнете към IPAD наистина бързо.
Ако имахме форма елемент с идентификатор = "форма-цитат" -
разбира се, че е изчезнал на метод = POST или GET метод = и атрибути действие, както и
че трябва да има върху форми, но само за този пример форма, както знаете, има входове,
и че кода, който току-що видяхме ще получите вход елемент
че е имал име = "символ".
Това е важно, когато се опитвате да попълните различни области във вътрешността на вашия формуляр.
Ето как работи автоматично попълване.
>> Да, Ела?
[Ученик] Каква е разликата между ID и клас? >> An ID и клас? Да.
A клас се използва за целите на прически.
An ID се използва за това, което звучи като: еднозначно идентифициране на даден елемент.
Така че в рамките на една HTML страница, можете да имате само един елемент с определена ID.
Има само една форма с ID форма котировка.
Въпреки това, навигация хапчета клас или класа на НСА е вероятно нещо, което сте използвали
възможно или видял в контекста на вашия проблем Set 7 код.
A клас се използва за прилагане на специално стайлинг на един куп от различни елементи.
Например, в старите дни на HTML, преди имаше стилове,
преди да има CSS, тези Cascading Style Sheets,
ако искате да центрирате един абзац или центрирате текст в Div,
че ще има Разделения и след това ще имате нещо като подравняване на текста = "център"
както като атрибут в рамките на вашата дивизия.
Това не е добър.
Причината хората не харесват това е така, защото тогава, когато исках да се актуализира
как стоят нещата, показани на вашия сайт, вие трябваше буквално да отидат в всяка страница
и всеки HTML файл и вижте промените всички stylings на всички различни елементи,
и това беше огромна болка, защото често сте искали да имате един куп Divs
че всички бяха центриран или поберат по определен начин.
Така че разтворът да е клас.
Сега имаме Разделения където имаме класа, определен да бъде каквото и да искате да го наречете.
Можете да го наречете "центриран"; и затворите Разделения някъде тук
и имате всичките си забавни неща там.
И тогава някъде във вашия стил лист бихте посочи конкретен стил
, че ще се прилага за този клас.
Това не трябва да бъде само DIV, че е центрирано.
Може да има и други, които също са Divs центриран текст.
>> Да, Шарлот? >> [Ученик] Ако се върнем към цитата, какво означава точката предвид?
Какво е точката? >> [Ученик] Да.
Обратно към лаптопа, искаш да кажеш? >> [Ученик] Да. >> Добре.
[Ученик] Например, в този ред означава ли това, че там е тази променлива, наречена Вал
вътрешността на формата? >> Да.
Нотация точката в JavaScript върши няколко неща.
В този случай се обаждате функция, чието име е Вал.
Това е един метод.
Това е мястото, където ние влезем в обектно-ориентирани неща, които ние говорим за, Сам.
Това е мястото, където обект - в този случай на въвеждане на елемент - има функция или метод, наречен Val
която основно се казва, "Хей, задайте си стойност за да стане това нещо."
Представете си, че вместо това бръщолевене бяхме писмено числото 7 или низ 7.
Това ще се промени стойността на този вход елемент да бъде 7.
[Ученик] елемент вход е всичко в предната част на точката?
[Hardison] елемент на входа, точно, като на елемент в рамките на HTML,
в рамките на DOM, който съвпада с тази заявка.
[Ученик] Така че това е вход функция елемент. И след това каква трябва да бъде тази стойност.
[Hardison] Точно така. >> [Ученик] Добре.
И вие също да използвате този достъп до свойства.
Така че, ако погледнем назад в кода, който ние вървяхме през ред по ред
където имаме response.symbols [I] име.,
ние не се обаждате функция тук.
Не са открити скоби.
Едно нещо, което просто трябва да държи в ума, като се откъснете чрез този код,
когато видите, скоби, това означава, извикване на функция.
Функцията се нарича,
и името на тази функция е това, което предхожда тези скоби.
Така че в този случай по-долу, това е Вал. В този случай, точно тук е HTML.
В този случай, точно тук, на името на функцията е буквално $,
и ние просто знам, че това е най-селектора Jquery,
това е функцията, която е избор на каквото и да е този човек.
И тогава, когато не виждате скоби, като тук или тук,
това, което вместо да влизате е собственост на обекта.
Това е като с помощта нотация масив.
Това е алтернатива на използването на нотацията на масива.
Това е просто една стенография.
Така че ние сме достъп до областта на символи на обекта на отговор.
>> Ние сме направили много от Аякс, DOM, някои HTML, CSS не е много.
Смятате ли, момчета, искате да прекарате последните 15 минути, или така по този въпрос?
Предполагам, че ние наистина трябва около 10 минути, преди да трябва да започнем да приключи.
Или може би трябва да се върнем и да поговорим за някои от другите неща в нашия списък?
Нека да видим.
Ако се върнем към началото, ние да премина към моя IPAD отново, така че вие ​​може да видите това,
ние сме направили много Ajax, което сме направили някои JQuery,
ние сме направили някои JSON, което сме направили някои XML, което сме направили някои DOM,
ние сме направили някои - Не, не HTTP. Зарежи.
Не е много по обхват. Ние нещо като говорихме за CSS - не съвсем.
Смятате ли, момчета се чувстват добре на Аякс? Искате ли да прекарват повече време в Аякс?
Покажи на ръце. Добре.
DOM? Някой иска да прекара повече време на DOM?
Най-лесният начин наистина да получат представа за това какво се случва с DOM -
хората говорят за DOM и хвърлят наоколо, "О, DOM това, DOM, че."
Наистина на DOM е просто начина, по който всички тези HTML елементи се съхраняват в паметта.
и това е просто обяснение - това е какво е то.
Той е структуриран като дърво, и можете да получите достъп до отделни HTML елементи
с които Jquery селектор, че знака за долар нещица.
Можете да манипулират нещата. Можете да добавяте елементи на DOM.
Може да се добави нов параграф елемент на DOM,
Вие не може да отнеме на Разделения елемент от DOM, ако искате.
Това е всичко. Това е просто вид на представителство в памет на вашия HTML файл.
Това може да бъде манипулирана и се премества.
Какво ще кажете за Jquery и че селектор? Да, Сам?
>> [Ученик] Означава ли това, че DOM включва всички ваши CSS и JavaScript?
[Hardison] The DOM включва тези възли, да.
[Ученик] То включва HTML, че тези други спомагателни документи изход?
Ако JavaScript променя HTML като го е правил в този Google -
Опа, съжалявам, аз не се върна на това.
Помниш ли как JavaScript ще променят списъка с резултати на Google?
Ако JavaScript променя това, тогава тези нови списък елементи вече са част от DOM.
Те бяха инжектирани в DOM.
И се оказва, че скриптовете и стил самите листове
наистина са част от DOM.
Виждате ли тук, че ние имаме тези скриптове възли и тези в стил възли.
JavaScript може да добавяте и изтривате тези също.
Ето защо това е толкова лошо да има зловреден JavaScript на вашата страница
е, че сега тя може да започне привеждане в други JavaScript от други места.
Така че можете да започнете само с един JavaScript файл,
но след това тя може да започне дърпа в други файлове с JavaScript.
Можете да използвате Ajax да се зареди в JavaScript и динамично да има нов JavaScript
тичане на вашата уеб страница.
Така че това е един наистина мощен нещо, че нашите браузъри са в състояние да се вид на постоянно отново направи
и повторно адаптира каквото се генерира от JavaScript.
>> [Ученик] Тези стил тагове, които са включени в CSS?
Нека да погледнем в това. Да.
Това CSS, отново можете да видите къде Jquery получава своето селектор от.
Имаме тази # GB, която се казва: "Този стил се отнася до един елемент с ID GB."
"Елемент с ID GB ще има такъв размер на шрифта с това семейство на шрифта,
"Безсерифен; височина."
>> Добре.
Обратно към IPAD.
Как около структури от данни - опита, свързани списъци?
Вие искате ли да направим един бърз опреснителен за това, или са момчета усещат -
Да? Nay? Кой иска структури от данни? Вдигнете ръка.
Кой мрази структури от данни? >> [Ученик] Искам само опита. >> Че искат само да се опитва.
Добре.
Никой ли не иска си опит? Дали всички подобни, "Мразя опита. Аз го направих. Опитах го."
[Ученик] Аз просто искам да знам за омегата и голям O.
Добре. Ние определено може да отиде над това.
Това звучи като нещо, което искаме да направим като група? Да? Нещо? Не?
>> Какво ще кажете за HTTP? Ли това, че изглежда като нещо повече хора искат да правят?
Или си вид, "Eh." Нека да направим първата HTTP.
Колко от вас са виждали Давид абсурдно страхотно HTTP кратко? Има ли някой?
Виждал съм го един куп.
Той беше един от първите, които направихме, и така тя беше като нашия демо това лято.
Дан го е видял един куп прекалено, Dan Човекът се върна там.
HTTP и тогава там е това HTTPS нещо, което ние сме били говорим за малко.
Какво трябва да знаете за HTTP?
Това е буквално само протокола за взаимодействие с уеб сървър.
Когато искате да говорите с Google.com, че говориш на друг компютър от мрежата,
С какво се занимаваш?
Да може би направи това.
Позволете ми да спра терминал.
Тук е моят прозорец малко терминал.
Ние можем да направим нещо като Telnet, което ни позволява всъщност да стартирате връзка с Google.com.
Това не е нещо, което трябва да знаете,
но това е само за да илюстрира това, което се случва с HTTP.
www.google.com, порт 80.
Какво е това правиш?
Това прави интернет връзка между моя компютър и Google.
И това е всъщност свързване към 173.194.75.99, което е около компютъра,
някои Google сървъра живее някъде вероятно тук,
макар че може да е по целия път обратно в Калифорния.
Сега съм свързан.
Добре, че всичко е наред.
Но когато отидете на Google.com, обикновено очакваш Google.com,
някои HTML, за да се покаже, нали? Не само това.
Проблемът е, че аз искам да кажа, "Дайте ми GOOGLE.COM" или нещо такова.
Но ако кажа, че нищо не се случва.
В действителност, ако аз хит Въведете няколко пъти, тя се връща и казва:
"Това беше лош поискване."
Това се казва: "Не, не, не, не, не, не, не, не, не."
"Не може просто да сложи неща инча Вие всъщност трябва да говорим HTTP за мен."
"Трябва да форматирате вашата заявка като заявка за HTTP, като GET или POST
"Или нещо подобно."
"И тогава аз ще се върне на правилното HTML за вас."
Така че виждате какво ми даде в този случай.
Това ми даде HTML, че ако го копирате и аз TextEdit HTML, ако го сложа тук,
и аз го запишете като test.html--о, хайде.
Web страница. Ето.
Сега, ако си отворя Downloads / test.html, сега тя ми даде лошото -
Това не е съвсем го направи като HTML.
Тя изглежда като тя не го затворите. Ето, нека да видим.
Nope. Добре.
Това няма да стане. Както и да е, няма да го разбереш.
Но така или иначе, това, което той прави е, че е връщане към мен на HTML,
но го казва по същество, "Ти не ми даде правилното искане HTTP."
Така че това, което ни е нужно да знаем за HTTP?
Това е начинът на форматиране на заявления за уеб сървъри, за да получите, обикновено, HTML в отговор.
>> Другото нещо е да се отбележи, е, че когато се прави заявка към уеб сървъра,
трябва да зададете метода на HTTP, който искате да използвате.
Ние говорихме за това малко по-рано, когато две големи такива, които виждаме
са GET и POST.
Има и един куп други такива.
Има HEAD и PUT и DELETE и всички тези други неща,
но GET и POST са две основни тези на.
Къде виждате тези култури нагоре? Когато пишеш форми.
Когато пишете HTML форми, трябва да се уточни методът за HTTP
от която искате, че данните за формуляри, които се предават.
И след това го виждате на сървъра страна, когато пишете PHP код
когато боравите с данните, а вие трябва да погледнете в супер-POST
или GET супер-за извличане на данни, която е била подадена от потребителя.
И разликата между GET и POST е, че GET променя действителният
и в по-голямата част можете да видите какви параметри са преминали на заявка за GET
много лесно само като се погледне в URL адреса, докато с искане за POST
че няма да предадете на параметрите на искането в URL адреса.
Но те не са криптирани или нищо, ако ти започваш през HTTPS.
Параметрите на POST са само част от -
Те не отиват в URL адреса, ефективно.
Ние сме склонни да просто вид семантично отделят 2,
които просто казва, че наистина можете да направите същото и с GET, че можеш с POST.
Можете да направите същото. Това е просто, че ние ги използват в различни ситуации.
Ние използваме GET, когато ние се опитваме просто да прочетете нещо и ние сме просто казвам,
"Дайте ми тези данни."
И ние използваме POST обикновено, когато се опитваме да се актуализира нещо на сървъра.
Ето защо всеки път, когато отидете на Google.com и правехме, че typeahead
видяхме всички тези искания GET
защото бяхме буквално просто извличане на информация от Google,
като има предвид, ако сте допуснали Facebook стена пост, ти започваш да се използва,
най-вероятно, метод на HTTP POST, за да изпратите тези данни и да направи промяна в Facebook
във вашата стена, стена на вашия приятел.
Нека да видим.
Предполагам, че разликата с HTTPS е, че тя е HTTP, но криптирана.
[Подсмихва] Secure.
Да. И там са много забавни подробности за това.
>> Въпроси?
Ние трябва да започнем да приключи, и така ние ще направим някои структури от данни от страната. Шарлот?
[Ученик] Какво е включено в HTTP заглавни файлове от домакина на метода
и метода и номера? >> Ah.
Най-добрият начин да го погледнете е да отидете на раздела Network
и просто да видим какво се случва, когато просто отидете на Google.com.
Можеш да дойдеш тук и можете да видите всички различни HTTP заявки, които са били направени.
Google.com.
Първата беше, че се опитах да отида в Google.com и го каза,
"О, Google.com не съществува в действителност."
"В случаите, когато наистина искате да отидете е да www.google.com."
Така че аз имам пренасочени тук.
Това е, когато аз имам това 301 след това аз имам 200 OK.
Така че това, което е тук, във вашите заглавията?
Той казва, че това е адреса на който съм направил искането, методът на поискване,
и след това кода на състоянието.
Това са три Biggies.
Другите неща в тук, бисквити,
бисквитките са удобни за фигуриращ на сесията, ако някой е влязъл или не.
Те са също така удобни за проследяване на хора. Това е как уеб сайтовете, които следят навсякъде.
Те поставят бисквитки на вашия компютър.
Те са обучени да разпознават други уеб сайтове, бисквитки ", ако могат.
И след това има други неща, които казва на потребителския агент точно тук.
Този низ потребителски агент определя моя компютър, за да Google.com и казва:
"Google.com, само да знаеш, някои пич вървят този браузър
"На Intel Mac 10_8_2 просто отиде до Google.com."
И тогава тези Приемете нещата просто казват: "Какъв е моя компютър,
"Каква е моята уеб браузър готови да приемат?"
Тя може да приеме, HTML, тя може да приеме XML, всички други неща.
Какъв характер кодировки няма да го приема?
Има ли го приемам Генерирай архивирана сгъстен неща?
Понякога сайтове ще компресирате неща, за да стане по-бързо, за да изпрати по мрежата.
>> Cool. Добре.
Мисля, че това е за сега. Ще закрият, но ще остане за въпроси.
>> [CS50.TV]