TOMAS REIMERS: Здраво, сите. Моето име Томас Reimers. 

МАЈК Rizzo: И јас сум Мајк Rizzo. 

TOMAS REIMERS: Ние сме две од CS50s ТС. И денес ние сме водечки семинар за JavaScript и CSS за веб апликации. Ако сакате да го следат заедно, на линк е во право таму. И сакаш да го стави на компјутерот кратко? 

Тука е линк. Тоа е мал сајт, кој има линкови до сите ресурси ние ќе биде показни вас денес, а исто така има многу корисни информации напишани од страна на нас да прочитате повеќе во длабочина кога ќе се вратиш, и ти се обидуваш да се сетиш што точно се се каже, она што сте биле зборуваме, и така натаму. 

МАЈК Rizzo: Во ред. Па ајде да започне. 

TOMAS REIMERS: Значи сакате да започнете? OK. 

МАЈК Rizzo: Да. Па ние прво сакав да се започне со широка Преглед за интернет и Типови на датотеки при дизајнирање веб-сајтови. Додека оваа презентација ние сакаме да добие во во вклучите Javascript многу многу подоцна, сакавме да започнете со само, вид на, како птичја перспектива е на она што веб-сајт е и како да се размислува за дизајнирање на веб-сајт за почеток. 

Па вие момци, во овој момент - со тоа се петокот вечерта - треба да има поднесени вашиот CS50 финансии Проблемот поставува. Се надевам, дека беше добар вкус на она што веб програмирање може да биде. Но тука ние сакаме да, вид на, даде ти, друг вкус, како и. 

TOMAS REIMERS: Значи само да повториме она што се случува, кога ќе напишете вашиот URL, за да вашиот веб пребарувач, кој рачно добива погледна во компјутер. И на вашиот компјутер поврзани на друг компјутер, кој е домаќин на овој вебсајт. Добро, така што кога одите на google.com, ти си поврзани со еден на Google компјутер, кој има додадени фајлови: за google.com. 

Таа потоа бара одредена датотека. Значи, ако одите на - Не знам - example.com / index.html или / test.html, сте ќе треба да побара таа специфична датотека. И на веб-серверот ќе да се врати за вас. 

Потоа, откако ќе поминат низ таа датотека - еднаш сте компјутер добива дека датотека - тоа се случува да се започне да се изгради веб-страница. Па сега тоа го има HTML датотека, кој е вид на како структура на веб-страница. HTML датотека, исто така, би можеле да референца CSS фајлови, кои го дефинираат стилот на веб-страница. 

JavaScript датотеки, со кој се дефинира интеракција со веб-страница. Датотеки со слики, кои се само слики. И евентуално водат до други HTML датотеки, кои можете да ги посетите. 

МАЈК Rizzo: Добро, одлично. Па вие момци имаат сите, можеби, внимателно го поставите вашиот локален домаќин на вашата виртуелна машина. И дека само, вид на, е локалната домен дека вашиот компјутер е домаќин на само за тебе во вашата IP адреса. 

Тоа во рок од тоа, тогаш можете да додадете да ја направат своја веб страници. Мислам, во CS50 финансии, треба да имаат додадени некои HTML страници, кои се, вид на, завиткани во обвивка PHP. Но на крајот, она што вашите PHP страници беа Ставање беше HTML. 

Но мислејќи назад кон почетокот на PSET, моравме да го поставите на дозволи за сè, нели? Значи ова само во основа ни овозможува да знаете кој може да чита, пишува, и најверојатно изврши секој на датотеки. Па ние ќе да се направи брзо - hm? 

TOMAS REIMERS: Така ние ќе да се направи брзо демо. Па само да ве потсетам, кога ќе се поврзете со компјутер на Google - кој - и да побарате за некоја датотека, на компјутерот прво треба да бидете сигурни дека сте овластени за да всушност ја видите таа датотека или прочита дека поднесе затоа што не може само да прашам за секоја датотека на тој компјутер, нели? Тоа би било безбедносен ризик. 

Па датотеки на системи ние ги користиме, како овој CS50 апаратот, имаат три општи луѓе кои можат да имаат дозволи за да нешто. Првиот е вистински сопственик на изјави датотека. Вториот е група која датотеката припаѓа. Ние нема да се фокусира премногу за тоа. И последното нешто што е, на некој начин, како светот или како и секој друг кој е не се специфични за таа датотека и не сопственички права врз неа. 

Значи, ако имаме сопственик, група, а потоа светот. А потоа, за секоја од овие групи, ќе може да има една од трите дозволи, Добро, или повеќе од нив. Можете да ги прочитате дозволи. Можете да имаат право на дозволите. И може да имаат изврши дозволи. 

Значи во однос на вистинските типови на датотеки, да се прочита дозвола е како всушност читање на содржината на датотеката. Право дозвола е пишување да изјави датотека. На извршување дозвола е водење на датотеки како што го правите кога ќе ја стартувате една од Вашиот CS50 проекти. 

Па кога ќе се размислува за датотеки како кога ние треба да го прочитате на HTML датотека, која треба да биде свет може да се чита, нели? Веројатно, исто така, сопственикот сака да бидат во можност да ги уредувате таа датотека. Па сопственикот се случува да треба читаат и пишуваат дозволи. Тие навистина не треба да се изврши. 

Група, ние ќе треба да се третираат на исто како светот за сега. Па тие треба прочитал дозволи. Но, тие не треба запишување или изврши дозволи. И сега, ако се сетам на поранешната PSETs, она што се реализира е овие вид на изгледаат како бинарни, нели? 1 залага за Да. 0 за да нема. И ние всушност може да се преведе ова на бинарни. 

Па 110 во бинарна ќе биде 6. 100 ќе биде 4. Истото со светот. Па бројот ќе добиете за дозволи за ова ќе биде 644. 

МАЈК Rizzo: И ако мислите назад кон кога ќе chmoded нешто, верувам тие дадоа во проблемот поставите пример каде што можете да направите нешто како chmod 644 а потоа името на датотеката. На 644 тогаш, сега можете да видите директно каде што доаѓа. Па се надевам дека го прави тоа малку повеќе јасно. 

А потоа за јасност сте човек е - Oh yeah, тука ова е повторно. Па 600, тогаш само ќе биде пример ние се откажа тука каде што сопственикот има прочитате и десно дозволи, додека група и светот немаат никакви дозволи за пристап до датотеката. 

TOMAS REIMERS: И тогаш имаме брзо листа на заеднички дозволи. Па директориуми, сакате всушност chmod 711. Брзи настрана - за директориум да имаат извршна дозвола значи да се биде во можност да се отвори директориумот. Слики, CSS, JavaScript, HTML потреби 644, бидејќи, во основа, светот потреби прочитал дозволи. 

И PHP, кои вие момци го виделе иако ние нема да се зборува за тоа строго е обично chmoded со дозвола 600, бидејќи тоа е се кандидира со дозволите на сопственикот. Барем на апаратот. 

МАЈК Rizzo: Значи не ако не конкретно наведете каков тип на датотека сакаш во всушност поставување до оваа презентација - имавме проблем со тоа затоа што сè што не беше chmoded правилно - си оди за да се добие, вид на, забрането грешка дека веб-сајтот не, всушност, имаат дозвола пристап до она што датотека што сакате да пристапите. И, се разбира, тоа може да биде фиксна - како и во проблем постави - со промена на дозволи соодветно. 

TOMAS REIMERS: И последниот коментар за брзо локалниот развој е - ние уште нагоре, но ние само сакав за да го донесе повторно - ако прашате за сервер - па локалниот компјутер, на пример, com или whatever. - и не се определи одредена датотека, на датотеката што вашиот компјутер ќе да побара се нарекува index.html. Или ако тоа не постои, index.php. 

Кул. Па тоа е само реприза на сè, Се надевам, дека сме покриени во секција, а предавање, и досега во CS50. И сега ние ќе треба да почнам да зборувам за специјално библиотеки. JavaScript и CSS библиотеки за веб апликации. 

Па еден брз причината зошто имаме библиотеки е програмирање - има многу проблеми во програмирање, кој постојано никнуваат повторно, и повторно, и повторно. Може да забележите дека многу веб-сајтови треба способноста да имаат паѓачкото менија, на пример, или треба способност да имаат многу стандард копчето стил, кој не може да биде најлесната работа. Сега дека ќе почнете да се влезе во HTML, сфатат дека копчиња може да всушност изгледа навистина грди ако не прават ништо. 

Толку многу луѓе го имаат напишано наречен библиотеки. И во овој контекст, тие се исто така, повика рамки. Ние ќе се користат две мешаат. И што се е дека тие се во основа premade парчиња на код - или CSS или го вклучите Javascript - кои се далеку многу од тимот што го имате во кодирање. 

Па тие пред-дефинира еден куп на класи или пред-дефинира еден куп на функции за Случај го вклучите Javascript-, која можете да се јавите подоцна. А потоа можете да, на некој начин, се пристап до овој код без ништо да не направи. Еден пример на библиотеката беше CS50.H. Тоа беше една библиотека дадовме да ви се врати во една недела, што е дозволено да се направи работи како што GetInt и GetString без да се напише било код себе. 

МАЈК Rizzo: Во ред. Значи тука, исто како и моравме да вклучуваат во нашите в фајлови на различни библиотеки, ние исто така треба да се вклучат во нашите HTML датотеки различни библиотеки. На пример, ако сакавме да го вклучите одредена JavaScript библиотека тука, можеби, оној што ние го напишав себеси како тоа е локално домаќин наречен script.js, ние само го користите овој нотација. 

Значи ние треба скрипта тип еднаквите Го вклучите Javascript-извор еднаквите JavaScript.js. И ако мислите дека назад кон вашиот CS50 финансии проблем постави, ако погледна во header.php во папката со шаблони, треба да го виделе некои од овие се вклучени. Значи ова првиот - на скрипти - е вклучувајќи JavaScript библиотека. Вклучувајќи CSS библиотека е малку поинаква. 

Тука, наместо на сценариото таг треба врската таг. А потоа, внесете го текстот CSS е малку поинаква. Вие не секогаш треба да вклучуваат rel стил на состојба. Но, мислам дека тоа е, генерално, добра пракса. 

А потоа, конечно, HREF, кои можете веројатно виде во својата ATAGs за поврзување во различни линкови само Одредува линк од каде да се најде тоа. На пример, ако сакаме да се поврзе различни библиотека - да речеме - кои живееле на styles.css. И сакавме да се поврзе дека во тоа е хостирана на интернет, ние ќе копија од тоа. И потоа вметнете го во она што имаме токму тука, наместо. 

TOMAS REIMERS: Добро, се надевам дека момци се веќе запознаени со тоа како да се поврзе на CSS. Ти мораше да го направи тоа на вашата последна кафеава сет. JavaScript, некои од вас можеби имаат некакво искуство со. Некои од вас може да не. 

Па за сега, знам дека го вклучите Javascript-датотека е многу слично на CSS датотека во смисла дека може да водат до неа, или дека можете да ја вклучите внатрешно. И тоа ви овозможува да скрипта работи. И ние ќе ти прошетка низ малку на JavaScript подоцна. 

Па со користење на библиотека - еднаш сте го вклучени, тоа е како едноставно како што буквално се јавите на функции или додавање на имиња на класи на него. Последното нешто што сакате да разговарате за во однос на библиотека - и ова е повеќе од техничка белешка - е со отворен код за лиценцирање. Па кога ќе се најдат овие вистински библиотеки, може да се размислува на прашања се допаѓа е тоа во ред дека јас сум само користење на кодот на некој друг, особено бидејќи тоа е нешто што многу ти реков да не се направи во овој курс. 

Значи во случај на отворен код за лиценцирање, многу програмери - откако тие го напишале библиотека, кој тие мислат дека би можело да биде корисни за други луѓе - ќе го објави на веб и го даде дозвола. И дозвола во основа вели дека јас сум со ова доделување дозвола за други луѓето да користат ова парче софтвер со следниве вид на одредби. 

Ние сме вклучени линк до добар сајт за да помогне да се разбере лиценци случај да наидат на нив. Заеднички одредби се работи како вие сте добредојдени да ги користат во мојата библиотека, па додека ти ме даде кредит. Вие сте добредојдени да ги користат во мојата библиотека толку долго како и кога тоа се распаѓа не ме обвинуваат. Вие сте добредојдени да го користам мојот библиотека толку долго како што не го користат да заработат пари за себе. Овие се видови на заеднички одредби. 

За ова CS50 финалниот проект, тие не треба да биде супер важно бидејќи проекти кои вие момци користи се веројатно, а, на некој начин, позната. Но, кога всушност ќе излезе во светот и започнете да го користите библиотеки, кои може или не може да се спроведуваат како некои на повеќе популарни оние сме ќе треба да се поминува. Добро е да се биде во можност да се разбере овие дозволи и да се разбере она што тие значат. И ќе се вратам. 

МАЈК Rizzo: OK. Па сега се движи кон примери на реалните CSS. Во овој момент досега, можеби ќе не се соочуваат со овој. Но можеби ќе го сретнал во вашиот секојдневен живот, каде што нешто што изгледа еден начин на еден интернет пребарувач не може да изгледа исто Начинот на друг интернет пребарувач. 

Ова се нарекува пребарувач пребарувачот компатибилност. И се повеќе тоа е да стане повеќе и поголем проблем, особено како прелистувачи се повеќе и повеќе слободи за спроведување на работите како што тие сакаат. Така да се надмине тоа, таму всушност е голема библиотека наречена Normalize.CSS. 

TOMAS REIMERS: Ние се вклучени линк. Во овој момент, тоа е корисно ако имате вашиот лаптоп во таму во потрага на местото. И ние се даваат ова за да ви право сега едноставно затоа што конечната CS50 Проектот е всушност ќе ќе побара од вас да се имплементира Слично и преку прелистувачи. 

Па само да се задржи во задниот дел на вашиот главата, ова е прекрасен библиотека затоа што тоа ќе, на некој начин, стандардизираат работи. Во Firefox, нешто може да се покаже како еден пиксел на лево. А потоа Хром може да одлучи дека всушност она што мислев 10 пиксели на левата страна. И сакате да се стандардизираат ова. Нормализира, всушност, ќе се направи навистина добра работа за правење на сигурни дека вашиот сајт изгледа исто преку прелистувачи. 

МАЈК Rizzo: Значи, ако сакавме само да кликнете на копчето навистина брзо и шоу вас она што изгледа како, може да го симнете со помош на гигант копчето Download. Или јас ве охрабруваме да ги прочитате повеќе за него со кликање на овој линк во долниот агол во право. 

TOMAS REIMERS: И ако навистина кликнете Прочитај Повеќе право таму - клик на изворот на GitHub - вие всушност ќе се види со отворен код лиценца за LICENSE.md право таму. И ќе видите тука е многу популарна МИТ лиценца. Повторно, ако се чита преку текст, Вие ќе бидете во можност да го најдете на сајтот ние референцирани пред и да биде во можност да сфатам тоа без да се читаат преку правни жаргон. 

МАЈК Rizzo: Добро, одлично. Па тоа е се нормализираат. Сакавме да ви даде дека навистина брзо. Ох, имате прашање? 

ПУБЛИКАТА: Значи кога ќе го симнете, можете само следете кој код кој тие имаат под копчето Превземи? 

TOMAS REIMERS: Да, така кога ќе преземете - 

МАЈК Rizzo: О, тоа е голема точка. Значи, прашањето беше како да ние всушност го преземете? Значи, ако ние кликнете на линкот, гледаме тоа што всушност се појавува на изворниот код. Па да го направите ова, што би можеле да направите е само да кликнете на Save As. Зачувај како и дека треба да донесе до датотеката. А потоа ние може да избере да се спаси како normalize.CSS. А потоа ќе треба да ја водат во - 

TOMAS REIMERS: На ист начин ќе се врската во која било друга датотека. И штом ќе ја водат во она што е одлично за нормализација тоа е, всушност, ќе се грижи за сите напорна работат само по себе. Што значи дека не мора за додавање која било класа. 

Вие не треба да се направи нешто чудно. Тоа ќе се нормализира без тебе прави ништо повеќе. Да, мора да го вклучат. Гугл Хром не реагира. 

Само брз настрана - Јас забележав ние скокна во ова. Остатокот од оваа презентација е ќе биде брз преглед. Истражувањето на библиотеки. 

Во суштина, она што се. Она што го прават. Како тие се корисни. Како може да ги спроведе. Ако сакате да почнете да барате во нив, следниве заедно, и читање преку нив, Јас високо ќе ги охрабри тоа. 

Алтернативно, вие сте добредојдени, исто така, да се започне симнувањето нив, вклучувајќи и нив во поглед само да видите што тие изгледаат како или она што го прават, ако имате вашиот лаптоп пред вас. Ако не, вие сте добредојдени да се задржи слушање да ни зборува. Ние ќе продолжат да преговараат. И ние имаме време на крајот, се надевам ние всушност ќе влезе во кои Ви прикажуваат што некои од овие библиотеки изгледа. 

МАЈК Rizzo: Кул. Добро, па сега ајде да разговараме за фонт Прекрасно. 

TOMAS REIMERS: па фонт Прекрасно е навистина уредни сајт, особено за оние од нас кои се помалку уметнички талентиран. Игнорирање на име на фонт Прекрасно, тоа му дава сте еден куп на икони, кои се многу корисно. Толку многу пати ќе се имплементира икона можеби ќе сакате како убаво x така дека можете да го затворите нешто. 

Или можеби ќе сакате некој вид на копчето Уреди со молив цртеж како секој друг има. И тоа е кога ќе научат дека цртање оние икони може да биде многу досаден и тешко. Фонт страшно - ако навистина отидете на сајтот - ви дава многу икони под иконите на врвот. Да, само на врвот. Тоа ќе ви даде многу на бесплатно икони. 

Па тука ќе видите имаме работи како ѕвездичка, барови, гром, а календар, бубачка, книга, итн. Ова може да биде многу корисно. Начинот на кој вклучува ова е да го вклучите буквално на CSS датотека. И откако сте вклучени на CSS фајл, она што можете да направите е да се создаде таг наречен I. Тоа satands за икона со класа ФА стои за фонт Прекрасно. А потоа, без оглед на класата што го сакате. 

Значи, ако сакав икона на ова, плус плоштад токму тука, јас ќе им даде Дали тоа била класна ФА. А потоа ФА цртичка плус тире плоштад. 

МАЈК Rizzo: Кул, ОК. 

TOMAS REIMERS: И тогаш, последниот CSS библиотека сакаме да се добие преку сме се обидува да го задржи минимална на CSS библиотеки, бидејќи ние ја сфаќаат Насловот на оваа презентација е да го вклучите Javascript библиотеки. Но ние сметавме дека може и да ве запознаам со други библиотеки додека ние се зборува за библиотеки. 

Тоа е Google Веб Фонтови. И она што Google Веб Фонтови ви овозможува да направите е да додадете фонтови на вашиот сајт, што е навистина лесен начин да се направи тоа убава и да се направи разлика на вашиот сет од секој друг е ако има убав фонт, или ако има убав колекција на фонтови. Google Веб Фонтови е убаво за разлика од другите библиотеки, во смисла дека тоа е навистина водени инсталација. 

Значи, ако го следите линкот, тоа е google.com / фонтови, верувам. Ако го следите тоа, можете може да ги собереш вашиот фонт. Можете да изберете на левата од дебелина, аранжман, и така натаму. И тогаш, откога сте ја одбрале еден, можете да кликнете брзо употреба. Право таму. Долниот десен дел од прозорецот. 

А потоа, скролувајте надолу. Прво на сите, тие ви даде CSS дека што треба да всушност водат до него. Тоа е право таму. Можете само да копирате и залепите дека внатре И убаво нешто за ова е не, всушност дури и не треба да се преземете датотеката. 

Што е тоа се случува да направите е да се случува да се поврзат со верзија на Google на неа. Па назад кон она што значи тоа. Тоа значи дека кога корисникот преземања вашето досие - повлече вашиот HTML страница - вашиот HTML страница се случува да референца оваа датотека. 

Па тогаш, вашиот компјутер нема да видите, О, тоа е хостирана на google.com, а отколку на theirsite.com. Пушти ме побарате на Google за таа датотека. И тогаш, тоа се случува да се вклучат тоа е речиси како да е дел од вашиот сопствен сајт. 

TOMAS REIMERS: Кул. И штом еднаш ќе вклучуваат тоа, тогаш да вклучат во вашата CSS, тоа ви дава вистинската линија. Така ќе се постави на имотот на фонтот на семејството еднаква на името на вашиот фонт. 

МАЈК Rizzo: OK. Па ние само што заврши со CSS. И некои од вас може да се размислува, добро, имавме некои CSS за CS50 финансии. Но CSS библиотека беше подигање. Ние всушност вклучуваат подигање малку подоцна под вклучите бидејќи со библиотеката подигање CSS, исто така доаѓа со многу JavaScript за кои Bootstrap или Твитер - кој подигање - користи да управуваат со сите нивни CSS. 

TOMAS REIMERS: Дали некој има било прашања досега за CSS воопшто? Ние сме добри? Страшни. 

МАЈК Rizzo: Прекрасно. 

TOMAS REIMERS: Значи движат за да го вклучите Javascript-. 

МАЈК Rizzo: Значи сакаме да се зборува за jQuery да почне. Дали некој слушнал за jQuery пред или користи тоа? Да, неколку? Значи, ако само работа со мајчин JavaScript, ќе се најдете пишување многу долго селектори многу. Па што jQuery го прави е тоа што обезбедува убав обвивка за вклучите Javascript- јазик, кој ви овозможува лесно да изберете и манипулираат со различни елементи во рамките на документ објект модел на веб-страница или на ДОМ, што мислам дека вие момци сте слушнале за во Предавање на оваа точка. 

TOMAS REIMERS: Ако не сте слушнале за или ако не сте го гледале предавање Сепак, документ Object Model е во основа тоа како работите се претставени. Па HTML вид на личи на дрво кога всушност сте го извлече. Имате HTML елемент на врвот. Имате главата и телото. 

А потоа, во рок од што имаат сè друго. Тоа е познато како на ДОМ - Документ Object Model. Значи модел кој претставува објекти во документот е лесен начин да се размислува за тоа. И една од големо нешто за jQuery е тоа навистина го прави traversing дека и манипулирање со елементи во рамките на дека неверојатно едноставна. 

Толку едноставно, всушност, дека мнозинството од Го вклучите Javascript-библиотеки или ако не Мнозинството, големото мнозинство на оние ќе видите всушност бараат jQuery така дека тие можат да се кандидира едноставно бидејќи ако не имаат jQuery, можете ќе потроши многу време обидувајќи се да да дознаам како да изберете одредени елементи и како да прават други работи. И друга голема работа за jQuery е дека тоа е крстот прелистувач компатибилни. 

Значи се сеќавам назад кога ќе рече дека не сите прелистувачи се спроведе работи на ист начин? Тоа е точно дури во JavaScript. И еден од големите нешта за jQuery е дека тоа ќе се открие пребарувач и откривање на соодветен метод. 

Па ако ви треба за да изберете елемент, Internet Explorer може да се каже дека си требало да се направи на овој начин. Firefox може да се каже точниот начин е на овој начин. jQuery не се грижи. Кога ќе каже jQuery да изберете елемент ќе дознаам колку тоа е би требало да го направи во рамките на прелистувачот на корисникот е моментално во, а потоа направи на тој начин. 

МАЈК Rizzo: Значи, да не зборуваме за користење на jQuery малку. Само како PHP, jQuery има особено склоност кон доларот знак. Па ќе најдете дека секој jQuery - добро, не сите. Вие понекогаш може да го замени доларот потпише со зборот jQuery. Но, генерално, само затоа што е пократко, секогаш кога ќе види jQuery е користи тоа ќе биде со знак за долар. 

Па еве ние сме само покажува почетокот Селектор за елемент во ДОМ. Тука, имаме знакот за долар проследено со отворен загради, а потоа цитати. И во рамките на цитати одат нашите селектори за различни елементи. Исто како и во CSS, ние потребни селектори да да биде во можност да стил различни елементи рамките на страната. Оние кои се различни селектори се преведе токму во jQuery и JavaScript, во најголем дел. 

Значи тука имаме точка foo. Значи, ако се потсетиме од предавање, дот само значи класата. Па ние сме изборот елемент со класа foo. Значи, ако јас одам напред и да отворат нашите Го вклучите Javascript-конзола тука навистина брзо само да го покажат, ако јас само внесете ја знакот за долар, гледаме дека тоа е некој функција која доаѓа до. И тоа е само дефинирани со jQuery. 

TOMAS REIMERS: За оние од вас непознато, конзола е алатка во Хром, кој ви овозможува да, во основа, да го стартуваш JavaScript на тековната страница. Ова ќе најдете неверојатно корисна кога ти си, всушност дебагирање и вие треба да биде како, каква е моменталната вредноста на некои глобални променливи или она што е нешто друго? Тоа е вид на како GDB со исклучок дека всушност можете да манипулира елементи на страницата со тоа во многу полесно модата. И, исто така, не е така, во основа, проверете во со вас пред тоа го прави ништо. 

Па со оглед на GDB може да биде како, дали сте сигурни дека сакате да го стартува следниот чекор? Конзола е во реално. Така што на веб-страница е рендерирање и прави она што таа го прави, на Советот, исто така, работи заедно со него. И може да се стави импутира кодот во дека конзола, која ќе да се работи на оваа страница. 

МАЈК Rizzo: Значи да влезат во конзола, Претпоставувам дека треба накратко се спомене како да го направите тоа. Во последните проблеми кои може да имаат користи Хром увид елемент функции или да ја видите изворниот - и оние кои се достапни само со десен кликнување на страница или специфични елемент и прави или увид елемент или да ја видите страницата извор. Ние, исто така, може да пристапите до го вклучите Javascript- конзола директно од изборот увид елемент. Така, тогаш само кликнете на конзола на екстремната десница страна. 

Алтернативно, може да имаат исто така помина на горниот десен агол, кој е отсечен на овој екран каде што што има три хоризонтални шипки. И ќе оди до алатки и потоа го вклучите Javascript-конзола тука, каде што може да се види - најмалку на Windows - кратенка е за контрола на Shift Ј Па тогаш ако сакавме да изберете елемент во рамките на оваа страница, исто како и јас покажа пред, тоа го правиме знакот за долар отворен parens а потоа цитира. 

Интересна работа е, генерално, единечен наводник и двојни наводници се разменливи. Па многу луѓе само користење една наводници, бидејќи тие се побрзо да напишеш од двојни наводници затоа што не мора да го држите Shift. Па јас само ќе го направи тоа сега. 

Па сакам да го изберете нешто со класа. Сад, само затоа што знам дека нешто што е на нашата веб-страница веднаш. И јас притиснете Enter. И можеме да видиме дека тоа го избрале. Па тоа покажува дека врати тој објект. Па тоа е основен избор. Ако сакавме да всушност го манипулираат, ќе треба да се јавите нешто на тој избор, кој ние ќе се влезе во подоцна. 

TOMAS REIMERS: Значи само да се погледне во тоа повеќе во длабочина, ова не е поинаку од функциски повици што ги направивме во В Името на функцијата тука е малку чудно. Тоа е знакот за долар. Тоа е само име на функција. Нема ништо посебно за неа. 

Имаме отворена заграда. Тогаш, ние имаме еден аргумент, кој во овој случај се случува да биде стринг, кој е селектор за тоа. А потоа, ние имаме затворена заграда. Тоа е тоа. 

Тоа не е дека многу различни. Иако, тоа изгледа многу чудно. И дека може да биде, на некој начин, камен точка за многу луѓе. 

МАЈК Rizzo: Значи Слично на тоа, ако сакаме за да изберете елемент кој има проект, сега ние сакаме да изберете од Проект, наместо на класа. Тоа би било нешто слично каде што само го прават остар знак за проект. Па ние сме изборот тука сите елементи кои имаат проект бар. 

TOMAS REIMERS: И ова се протега. Дека CSS се протега. Исто како и во CSS, можете да ги изберете сите врски, кои имаат класа foo. Тука, тоа е иста работа. 

Можете да го направите a.foo, која ќе изберете сите врски со класа foo. Можете да го направите остар бар, што би одберете го линкот со ID бар и така натаму и така натаму. Секое CSS селектор е валидна jQuery селектор. 

МАЈК Rizzo: Да. Добро, па сега ајде да се влезе малку на манипулација дека можеме да направиме со нашите jQuery. Па jQuery има одреден тип на нотација, каде што само користење точка на крајот. И можете да мислам на ова како во C Како имавме различни structs. И да одат во оние structs, ќе го користите точка да се влезе во нив. 

Ова е, вид на, нешто слично. Само сега имаме функции во рамките на оваа селектор, кој можеме да го наречеме на неа. Па еве, првиот пример можете да видите е CSS селектор. И во основа, она што го прави тоа е се однесува на првиот елемент на CSS за ова нешто што сте го избрале - овој елемент, кој сте го избрале - со вредноста што. 

TOMAS REIMERS: Значи лесен превод на што ќе биде ако jQuery, во основа, само зеде foo. А потоа во CSS, рече, Црвената боја и блиски. Тоа е истата идеја. Она што е направено е тоа е одбран сите foo елементи. И тогаш тоа е применет. Вид на, имотот боја е еднаков на црвено. 

МАЈК Rizzo: Слично на тоа, ние исто така може да ја смени со содржината на она што е покажува на HTML кодот на страницата, која е навистина кул, бидејќи тоа значи дека вашиот веб страници сега може да биде целосно динамичен и не мора да бидат статични дека ќе печати од користење на PHP на самиот почеток на на страницата се вчита. Па еве, ако сакаме да ги промените Крај на HTML кодот на страницата, ние би сега јавете се на HTML функција, која потоа само инсерти што и да се определи во тој елемент што ги избрале. Значи тука сме изборот елемент со класа foo а потоа велејќи дека тоа е HTML тоа е сега Здраво светот. 

TOMAS REIMERS: А кога ќе размислите околу кои се корисни апликации на ова, ова CSS еден, првото нешто што можете да почнете да се размислува за е во однос на дури паѓачкото мени. Можете да почнете да ги правите нештата како, кога корисникот лебди над горниот дел на паѓачкото, вие сакате да бидете долниот дел видливи. Нели? 

Па во CSS, имаме својства да се направи нешто видливо. Работи како прикажување на дебелото никој ќе го направи невидливи. Дисплеј блок ќе ја направат видлива. Или дури и ако сакате да одите поедноставно, можете се работи како видливост еднаквите видливи, и видливоста еднаква скриени. 

И може да започне да го имплементира работи како паѓачкото мени право откако ќе го добиете преку идејата за тоа како може да дознаам кога тоа се отвора, кој ќе се добие преку многу кратко. Но, ние може да почнат да се види апликации од овој. Во слична смисла, ако сте биле за да се обиде и спроведување на, да речеме, разговор моторот и дека сакате да се направи малку говор меур излезе, кога сте доби нова порака, откако ќе го добиете нова порака, можете да направите малку говор меур излезе со менување HTML кодот на страницата, нели? Од додавајќи дека дополнителни говор меур со екстра текст во таму. Да? 

Публика: Значи вие ќе го вградите овој во рамките на HTML кодот во нешто налик на [Нечујни]? 

МАЈК Rizzo: Право. Да, ние ќе дојдеме до тоа во малку. Да, тоа е слично на малку во PHP. Не е точно слично. 

Еден добар разлика да направи е она што овој е, всушност, уредување, кога ние ги менувате на страница, бидејќи тоа не се случува да биде уредување на вистинскиот фајл, која е се чуваат на серверот, бидејќи светот не треба да има дозвола да ги уредувате вашите датотеки. Ова е само уредување она што е на страната и она што се прикажани во рамките прелистувачот. Значи, ако сте во ситуација да ја превчитате страница по, велат, бришење нешто што ние види можеме да направиме со отстранување повик, дека нешто тогаш ќе се појавува. 

TOMAS REIMERS: Значи еден од начините да се размислува за ова е ако сум вашиот компјутер и Мајк е, на некој начин, на серверот. Што ќе се случи е јас ќе одам да побара Мајк, еј, можам да имам копија од оваа веб-страница? И тој ќе ми даде копија од него. 

Не, тоа не е оригиналниот работа. Тоа е само копија. И тогаш тоа ќе биде како, ох, има вклучите Javascript тука. Јасно, јас треба да ја уреди страница да биде вака. И јас сум уредување на вашиот примерок. 

Но тоа не е реализирање на вистинските копија. И ако јас се да го прашам повторно обновите страницата, - еј, можам да имам друг чиста копија - тој се случува да ми даде друг чиста копија. И тогаш, јас ќе одам да го прават истото како, ох, ова js тука кој се вели дека да ја уредувате оваа. И јас одам да се задржи тоа го прават. 

МАЈК Rizzo: Значи навистина кул работа што можете да направите со jQuery е всушност додадете различни видови на анимации на вашата страница. Јас не знам дали некогаш сте виделе каде ти се обидуваш да пополни формулар онлајн и да не се пополни работите правилно. Па малку нешто слајдови надолу на врвот и вели дека не сте го направиле тоа правилно. Ве молиме обидете се повторно. И тогаш, тоа би можело да дури и само слајд. 

Излегува jQuery има изградено во функции кои го прават сето тоа анимација, навистина, навистина лесно. Па таму е првиот бледеат од функција, која можете да се јавите на нешто. И тоа е начин да се промени CSS на тој елемент во анимиран начин. Така што е потребно она што елементот вие го викате снема натаму. А потоа, полека се менува тоа е непроѕирноста додека таа оди целосно транспарентен. 

TOMAS REIMERS: Од друга популарна една е слајд надолу, која ќе го направи нешто се појави со лизгање надолу. Така што во случај на менито паѓачкото, повторно, кога дознавме како да се открие кога ова е лебдел над, може само да го кажам ова дното дел слајд надолу сега. А потоа, се чини од лизгање надолу. 

МАЈК Rizzo: И тогаш, ако само има некој вид на анимација на ум дека jQuery не мора да се обезбеди. На пример, да речеме jQuery не ви овозможи со слајд надолу и слајд нагоре. Добро, ајде да речеме дека сакав да слајд нешто од левата страна или од право вид на како CS50 главна страница не секогаш да одите на нова комисија. Ќе потоа најверојатно треба да спроведување го тоа сами со користење на анимираат функција во рамките на jQuery. 

Па слично, само се анимираат. А потоа, во рамките на тоа што е потребно речникот на различни вредности дека си требал да помине. Па еве, ако сакаме да се анимираат елемент foo така што неговата ширина или проширува или договори за 80 пиксели, во зависност од она што во моментов е. Ние само ќе мине како аргумент во неа. 

Анимираат, исто така, има некои други аргументи кои би можеле да го помине, на пример, на брзината на анимацијата кој сакате да го даде. И да го направат тоа, јас само би рекол брзо Google jQuery анимира. А потоа, носат до оваа страница, можете да види тоа доби еден куп на различни својства кои можете да го помине. 

И јас ве охрабруваме - кога ќе дојдеш среќаваме со нешто што не го направите знаете или само сакате да дознаете повеќе за особено метод кој можете да се јавите на нешто - само го Google. jQuery е исклучително добро документирани. И често пати има многу примери кои тие ги обезбедуваат за вас. Ако ние движете надолу - начин надолу - дека можеме да го користиме, како и. 

Повторно, кога инвеститорот всушност оди низ проблеми на пишување библиотека, тие најчесто сакаат некој да го користите. Па заедно ќе биде документација. И таа документација обично може да биде наоѓаат на проектот страница, која е зошто ние би ти дал дека оригиналниот сајт во на почетокот, кој ви линкови до Проектот страници, така што можете да види дека документација. 

Типично, страница на проектот во случај на [нечујни], тоа ви го кажа имињата на класите. Во случај на JavaScript, тоа му дава можете името на функции. Патем, ако ние дојдете до врвот, брз белешка страна на функции е секогаш кога ќе видите функција имплементирана вака со хард загради во средината, тоа значи дека дека тој имот не е задолжително. Само на главите нагоре. Сум видел многу прашања за тоа. 

Па тука може да се види дека живи зема својства како неопходен аргумент. И сè друго не е задолжително. Страна белешка - можете да мислам на тоа, вид на, како човек страници. Човекот страници се документацијата за C и за многу други работи, како и. 

МАЈК Rizzo: Значи сме научиле како да се промена на различни CSS на страницата, анимираат тоа, и отстранете го додадете HTML. Но, еден од навистина најмоќните работи во врска со вклучите Javascript- а особено jQuery - што ви овозможува да направите е да се одговори на различните елементи што се случуваат. На пример, тука имаме управувачот настан. И дека само значи дека секогаш кога овој Настанот се случи, ние се справи со неа во одреден начин. 

Па еве, генерички jQuery настан управувачот е точка натаму. И тогаш, прво нешто што се предвидени е она што настанот што треба се слуша за. Па еве, тоа е клик, која ние чекаме. 

TOMAS REIMERS: Алтернативно, имате на лебдат, која е многу популарна една. Па се враќам на паѓачкото мени идеја. Ќе има на врвот еден на лебдиш. А потоа можете да го промени тоа. 

МАЈК Rizzo: Право. И тогаш, кога тоа се случи, тоа само извршува оваа функција која ја даде како аргумент и дека тоа предупредува здраво или hi. 

TOMAS REIMERS: Значи во случај на JavaScript, ова е место што треба да се отстрани се од C. Ние може да всушност земе функции како аргументи. И постојат многу навистина комплексни начини да го направите тоа. Ние ќе се промовира еден начин, кој е може да се дефинира функционираат право таму. 

Значи, кога сте прашува за функцијата параметар, ти си во основа, само ќе се дефинира функција на самото место. И начинот на кој се дефинира функција во JavaScript е што буквално се каже функција. Потоа, обично, името на функција. Но, ние никогаш нема да референца оваа функција повторно. Па ние го напушти безимени. 

Тогаш заграда, тогаш кадрава загради, а потоа го кодот во рамките на тоа. Па ние го разбираме ова може да биде малку збунувачки. Па ние ви даде општа форма на што е настан управувачот личи подолу, која се наоѓа на настани. И тогаш, вашиот код во внатрешноста тоа. 

МАЈК Rizzo: Дали има некои прашања во врска со ова? Ова може да биде малку збунувачки првиот пат кога ќе го видите. 

TOMAS REIMERS: Вие всушност сакате да го отвори документот и да им покаже некои jQuery во моментов? 

МАЈК Rizzo: Да, да го направите тоа. OK. 

TOMAS REIMERS: Значи сега сме во апаратот. И она што ние го направивме е ние сме земени на слобода на создавање двете index.html датотека, која ја поврзува го вклучите Javascript-датотека. И можеме да се отвори - Да. Па, тоа се две нешта. 

Првиот е линкови до го вклучите Javascript-датотека. И ние ќе се види дека тука горе. Гледаме дека во главата на HTML документ, особено. Па ќе видите таму дека ние, во основа, велат СРЦ, која се залага за извор. И тоа е URL-то. 

Па тука може да се каже ние сме вклучени jQuery. И ние исто така се вклучени скрипти. На друг начин да се вклучат JavaScript е дека можете да го вклучите РЕГИСТРАЦИЈА скрипта таг како што ние имаме на дното, каде што вели сценариото тип е текстот го вклучите Javascript-. 

Па ние велиме, да слуша, ние сме за да го вклучите скрипта. И видот на таа скрипта е JavaScript, која е еден вид на текст. Многу едноставна. 

МАЈК Rizzo: Значи ова, вид на, добива да вашето прашање за тоа како ние го вклучите JavaScript за нашите додадени фајлови, бидејќи кога ние се PHP, правиме нешто како ова. И тогаш, имаме PHP функции - да речеме акции направите нешто со тоа - оди таму. Меѓутоа, сега имаме скрипта тагови дека ние ја даде, кои се всушност дел од HTML себе, бидејќи тоа не е faking тоа што е датотека HTML допаѓа е во PHP, бидејќи ако навистина да сте одат во и се погледне на изворот на страницата, ќе видите овие скрипта тагови таму со вклучите Javascript-се поврзани со нив во тоа. 

Па тогаш, ако сакаме да пишуваат некои го вклучите Javascript - да речеме ние сакаме да се промени на телото бидејќи сега јас немам било која друга тагови дека јас навистина може да ги уредувате покрај телото. Да речеме јас сакав да промена на CSS за тоа. Па ќе одиме напред и промена бојата на тоа на црвено. 

Па јас ја зачувам датотеката. Да се ​​вратиме на нашата веб страница, освежи, и тоа го прави автоматски поради тоа што не изгледа како тоа го чекаше на сите, бидејќи ние не се слуша за еден настан или нешто слично. 

TOMAS REIMERS: Значи, ако ние се вратиме на таквиот поднесе особено - на HTML Датотека - она ​​што се случува да се види е имаме - Запомнете дека ова е вчитан, вид на, хронолошки. Значи ние треба прво главата. го товари овие две датотеки. Потоа одиме на телото. И гледаме Здраво светот. Па ние ја даде Здраво светот. 

А потоа последното нешто што имаме е имаме сценариото таг. Така што тече сценариото таг, бидејќи тоа е не го кажувам за да чекаат за ништо. И тоа е најосновна начин да се кандидира вклучите Javascript-. 

Со тоа, вели, можат да ви стават на сценариото таг во насловот само да се покаже овој момент? И да ја стартувате тоа. Ние ќе забележите дека тоа не се промени бојата. И ова е еден од проблемите на JavaScript е дека работите се натоварени по хронолошки редослед. 

Па во тоа време дека овој код трчав, ние избрани - Оди назад - телото таг. Телото таг сеуште не постои, бидејќи JavaScript е во согласност со HTML. Така прелистувачот е како избери тело. Нема такво нешто уште. За да можеме да го игнорираме тоа. И ние продолжувам да одам. 

А потоа ние се дефинира телото таг. Но, тоа никогаш не добива ажурирани. Значи, кога сте спроведување скрипта тагови, бидете сигурни дека ќе го поставите по телото таг. Следниот слајд. 

МАЈК Rizzo: OK. Па ние го променивме нешто. Но тоа не изгледа како да одговори на ни на сите, бидејќи тоа само вид на направи го тоа веднаш штом е вчитан страната. Па сега, наместо тоа, зошто не можеме додадете настан управувачот. 

Па ајде да направиме нешто на телото повторно. И да речеме ние го направи тоа на - кликнете. Ние ќе додадеме функција. 

Промена Ајде: Tomas REIMERS тоа е боја на црвена повторно. Зошто да не? 

МАЈК Rizzo: Да, да промена нејзините "боја на црвена повторно. Во ред е. Па ајде вчитување на страната. Добро, ќе видиме - како што се очекуваше, тоа не се претвори црвено уште. Но, тогаш можеме да одиме напред и да кликнете на неа. 

TOMAS REIMERS: И тоа се претвори црвено. 

МАЈК Rizzo: И тоа го прави претвори црвено како што се очекуваше. 

TOMAS REIMERS: И ние може да се види како ние може да почнат да се изгради многу основни интеракција. Други работи ние можеби ќе сакате да направите е, ако ние не сакаме да се направи на телото Црвената боја, ајде да се направи HTML позадина црвената боја. Само така тоа е истиот CSS. 

И кога ќе ја промените, може да се види ова многу драматичен ефект на менување на целата страница. Па уште еднаш, ако сте спроведување на работите, ќе може да има една компонента кој треба да се кликне на. Да речеме копчето Exit и цела друга компонента, која е наменета да одговори. Па ќе се отстрани прозорецот кога тоа се случи. 

МАЈК Rizzo: OK. Само како пример - ви не се за да ја видите оваа порано - Јас само ќе ви покажам она што изгледа како кога ние се скрие нешто. Па јас ќе одам напред и да се слајд. 

TOMAS REIMERS: Сакате да заврши што во став тип, пред да го направите тоа? 

МАЈК Rizzo: OK. Да, зошто да не го правиме тоа само така можеме да го изберете малку повеќе. 

TOMAS REIMERS: И ајде да даде една класа. 

МАЈК Rizzo: Да. Добро, па ајде да видиме. Наместо на изборот на вистинскиот тело сега, јас само ќе одберете сè со класа здраво, кои тука ќе само треба една работа. Па ние не треба да се грижи за тоа. 

Па јас ќе го освежи. Јас ќе одам напред и кликнете на него. И тоа, на некој начин, не е чудно слајд до нешто, што не изгледа дека атрактивен. Општо земено, тие изгледаат убаво. Претпоставувам, ова - за некои причина - не. Јас само ќе се направи снема така може да се погледне во тоа премногу. Многу поубав. 

А потоа, ако јас отвори вклучите Javascript- конзола повторно и ние сакаме да видиме што тоа изгледа како кога ќе го снема внатре Сега, јас само повик бледнеат во на неа. И згаснува назад внатре 

Слично на тоа, ние би можеле да всушност исто така, поминуваат аргумент за да избледее или ги снема, кој е, вид, брзината на него. Па ајде да одиме напред и да каже сакаме таа да оди полека бледнеат внатре Па претпоставувам дека се уште се чинеше прилично брзо. Но, тоа беше побавно отколку порано. 

TOMAS REIMERS: И ако сакате да го најдете дознаете повеќе за овие работи, повторно, само отидете на jQuery документација, кои ние сме ви даде и да ги чита преку овие. Тие се документира нивните функции неверојатно добро. 

МАЈК Rizzo: OK. Па претпоставувам да се вратиме на ова. И можеме да зборуваме за нашите последната страница. Па, ние може да се заврши со подигање. А потоа ние ќе го отвори за некои прашања. И ако вие момци имате било какви идеи кои што би сакал да се обиде да се фрли и да видиме ако можеме да ги спроведе со Го вклучите Javascript-брзо. 

Па навистина брзо за подигање, што беше автоматски вклучени во вашиот последен проблем во собата во CSS папка а всушност поврзани со во вашиот header.php. Па може да се додаде класи кои се дефинирани во подигање на него. И тоа ќе се автоматски стилизирана тие работи соодветно. 

TOMAS REIMERS: Значи подигање е многу магичен нешто развиена од страна на луѓе на Твитер. И она што требаше да направам е - пред веб-сајтови беа навистина тешко да се направи изгледаат убаво, особено кога имавме многу заеднички компоненти. Толку многу копчиња на веб изгледаше исто. 

А многу текст полиња може да се направи изгледаат подобро од стандард текст поле што веројатно знаете од навистина стара веб-сајтови или навистина лошо направени веб-сајтови, кои само изгледаат како буквално текст кутии без било каква форма на текст сенка или било каков вид на убаво контури. Па што подигање направив беше тоа го рече, добро, имаме многу заеднички стилови. Зошто да не се направи еден заеднички сет на CSS и заеднички сет на JavaScript како и, кој може да го стил како што е и кој може да им даде на луѓето работи како капка down менија, кои можат да им даде на луѓето работи како modals. 

Модални е она што се појавува во текот на страница секогаш кога тоа е строго земено нешто, што го инхибира понатаму интеракција, додека не се комуницирате со неа. Нешто како ова е, дали си сигурен дека сакате да ја избришете оваа работа? Вие не може да навистина направи нешто друго додека не каже да или не. 

Таа зеде сето ова и тоа го пакуваат заедно и рече, тука ќе одиме. Луѓе сега можат да го користат овој. И можете да го најдете над на getbootstrap.com. Тоа беше автоматски вклучени во вашиот последен проблем во собата. И ти си повеќе од добредојдени да го користите на вашиот конечниот проект. И ако сакате да го следат тоа водат до Земи подигање. 

Ќе видите тука е Bootstrap CSS сајт. Ќе видите подигање. И ако се движите надолу, ќе видите како да го преземете, како да инсталирај го, и така натаму. 

МАЈК Rizzo: И можете, исто така, Интересно, ја прилагодите на биде секаков вид на теми што сакате. Знам дека е нешто што го направив за мојата финалниот проект, кога го зедов класа беше ја изберете. А поинаква верзија на подигање дека имаше поинаков шема на бои и различни форми на некои различни нешта. Па јас ве охрабруваме да си игра со тоа. Тоа е вид на забавно да се прават. 

TOMAS REIMERS: Гледајќи во склопот на врвот повторно, тоа е многу слична на фонт Одличен сајт. Многу документација ќе започне да изгледаат слично, кога сте видел доволно од него. Значи тука имаме CSS составен дел на овој. И ќе видите колку е тоа да стил нешта. Значи, ако кликнете на маси, на пример, можете веднаш да се направи маса прилично со едноставно додавање класа маса до него. 

Истите работи за копчиња. Ако едноставно додадете класа BTN и BTN стандардно или BTN основно, можете да се добие било едно од овие копчиња со овие пред-направени стилови. И тогаш, ако сте во потрага за нешто покомплексно отколку едноставно редизајн што w веќе го имаат, во текот на го вклучите Javascript-јазиче во склопот на врвот ние имаат еден куп на компоненти. 

Значи тука имаме транзиции, modals, dropdowns, јазичиња, и советите. А објаснувањето е она што се појавува под глувчето кога ти лебдиш на нешто. Popovers, сигнали, копчиња, склопувачки армоники е она што тие обично се нарекува. Вртелешки, кој флип преку, како слики. 

Значи тоа се компонентите на подигање. Јас би ве охрабруваме да ги високо одат гледам во нив. Има вклучите Javascript-компонента и CSS компонента. Се чувствуваат слободни да ги користите како сакате. Ние нема да одат премногу во нив бидејќи сметаме документацијата е навистина добро направено. И је. Дали имате било какви прашања во врска со тоа? 

МАЈК Rizzo: Значи како се навистина брзо страна, на дизајнот на овој веб страница, која ние брзо се стави заедно за оваа презентација е всушност се направи со користење подигање. Како што можете да видите, кога ќе кликнете на овие различни јазичиња, ние никогаш не сме всушност оставајќи им ја таа тековната index.html страница. Значи она што го имаме е поинаква Divs во рамките на овој index.html. А потоа, кога ќе кликнете на различни табот, тоа е само промена кој се покажува. 

Така што тоа им позиции, менува на HTML кодот на страницата, така што тековната јазичето е означен како активен, па се чини поинаку и изглед навистина убаво. 

TOMAS REIMERS: Значи тоа беше направено без нас пишување речиси секој CSS. Ние исто така ја видите насловот во склопот на врвот, кои бои се од нас. Но, вистинските тоа ставање на врвот на страната и правење на тоа дојдете беше подигање. А потоа дури и за друга библиотека - ова не е еден зборувавме, но една можете да ги Google, ако сакате. Ова се нарекува prettify.js. И тоа ќе синтаксичко вашиот код за вас користење на двете CSS и JavaScript. 

Последното нешто што сакаме да се зборува за пред да го пуштите надвор во светот да се погледне во библиотеките да дознаам како да ги користите и да, се надевам, прочитате документацијата и да се најде она што го Потребата е како да се најде библиотеки. Па првиот е само сме ќе им помогнам на Google. Одете на Google. 

Тоа е буквално она што го правиме кога ќе треба да се направи нешто е ние на Google. Дали постои JavaScript библиотека која ми дозволува да се манипулира време во Корисен начин? Значи, ако знам дека некои корисник создавање сметка тука, и ова е тековното време, како можам да се пресмета Разликата со тоа, без да се пресмета тоа самата себе? Значи ова е всушност вообичаена работа, Го вклучите Javascript-time библиотека. И тука сме Moment.js-- најпопуларниот еден. 

Ако ние треба библиотека да се манипулира нешто како боја да биде во можност да генерираат еден куп на случајни бои - евентуално, да генерира стил или нешто - ние би можеле да Google нешто како Го вклучите Javascript-боја библиотека. И сигурен сум дека ќе pop-up со илјада и една од нив. Вие сте добредојдени да се чита преку нив. 

Па повеќето работи - кога ќе ги најдете - се случува да биде домаќин на една од сајтови кои домаќин код. Тие се неколку популарни оние. Најпопуларните, од страна на далеку, е github.com. И ако одите на GitHub тоа е всушност каде домаќин беше нормализира. Значи, ако сакате да се вратиме на оној. Да им покажеме дека. 

МАЈК Rizzo: И тоа е всушност каде ова е хостиран исто така, ако сте забележале. 

TOMAS REIMERS: Да. Значи, ако одите во текот да се нормализира и да одат во Github. Беа е тоа? 

МАЈК Rizzo: Тоа малку мачка работа е симбол Github. 

TOMAS REIMERS: О. Па GitHub користи метод наречен Git за чување код. Е ти не знаеш што е тоа или тоа ви плаши, тоа е во ред. Вие не треба да се знае што Git е бидејќи GitHub има копче Превземи во долниот десен. 

Од друга корисна работа за да знаеме за GitHub е повеќето производи ќе има ме читаат. И ако тие немаат веб страна, ме читаат ќе зборуваме за тоа како можете инсталирај го, колку го користиш, она што го не, и така натаму, и така натаму, и така натаму. Она што ние сме во основа е одење вас преку. 

МАЈК Rizzo: Напуштањето интернет. 

TOMAS REIMERS: Тоа е во ред. Последните две работи сакавме да се зборува за тоа - ние разговаравме за Git - е смена на проблеми. И ова не е како релевантни за финалниот производ, како што е кога ќе го напуштите 50. И кога ќе наиде на производи спроведување библиотеки или спроведување на свој проект, си оди да имаат прашања или сте случува да се погледне за прашања. 

Повторно, го Google. Тоа е буквално она што го правиме. Ова ќе звучи глупо. Но буквално, ние го Google. И повторно, една од првите работи обично ќе се кандидира во е stackoverflow.com, која е прекрасна прашање и одговор поглед. 

Тоа е прекрасно двете затоа што можете ја објавите прашања и да бараат одговори, но исто така и поради веќе има многу претходна пополнети содржина таму. Па обично кога на Google програмски прашање во рамките на првите неколку хитови може да имате веќе се кандидира во неа за време на вашиот проблем комплети. 

А потоа, на последната навистина краток работа е JSFIDDLE, што е - денес ние сме се прават многу работа со Го вклучите Javascript-и HTML, CSS. JSFIDDLE е веб стан, што во основа Ви овозможува да се земе вашата HTML, ВАШИОТ Го вклучите Javascript-долниот лев агол, а вашиот CSS горниот десен агол. А потоа може да се создаде брз направат од неа и да видиме како тоа се поврзува. Тоа е многу корисно кога луѓето се обидуваат да се направи доказ за концепт како ова е како ќе се направи паѓачкото мени. Можеби брзо открие или whatever. 

МАЈК Rizzo: Значи, да одат напред и кликнете на ова. А брз забелешка - каде што, пред да се прави за клик. Излегува JCorey Кореја исто така има вграден во кликнете настан управувачот тоа што користи само поради тоа што бројките си ќе сакате да го направите многу нешта кога ќе сакате да кликнете на нешто. 

Слично на тоа, таа исто така има лебдиш. Но, за да се добие целосна обемот на оние, погледнете на jQuery документација и направете го тоа. Го направив нешто глупаво тука. 

TOMAS REIMERS: Значи имам навистина брзо програмата токму тука, во која се вели копчето за клик. Тогаш имаме за телефонска линија. За i е помала од 404. Тоа е само ќе да pop-up овие пораки на алармирање. 

МАЈК Rizzo: И што беше код 404 застана за во HTML? Не се сеќавам некој? Не е пронајден, во право. Хром исто така, додаде овој уредни нешто каде што можете да - 

TOMAS REIMERS: Поради луѓето како Мајк започна да прави овој многу и досадни корисници, кој им овозможува на можете да ја видите информации. 

МАЈК Rizzo: Да. 

TOMAS REIMERS: Дали имаме било какви прашања за тоа, за да го вклучите Javascript библиотеки, наоѓање на библиотеки, или Што Веб развој изглед како и во реалниот свет? Ние сме трчање против време. Па не сум сигурен што ние ќе да имаат време да се спроведе освен ако тоа е навистина брзо. Дали сме добри? 

МАЈК Rizzo: ништо вие момци би сакале за да ја видите навистина брз во, како, две минути или помалку? 

TOMAS REIMERS: ништо можеме да го разјасниме? Како да се напише во - 

ПУБЛИКАТА: [нечујни]? 

МАЈК Rizzo: Да, така that's - 

TOMAS REIMERS: Вие само може да се погоди Контрола-U на веб-сајтот. 

МАЈК Rizzo: Ох, не знаев тоа. 

TOMAS REIMERS: Мислам, да. Контрола-U. Да. 

МАЈК Rizzo: О, па тоа е код за веб-сајт. Но, ако навистина сакате да го симнете нашиот додадени фајлови: и над сè, тоа е хостиран на github.com 

TOMAS REIMERS: намали моето име - Томас Reimers - Slash CS50 цртичка семинарски. 

МАЈК Rizzo: И можете да најдете сè што постои. 

TOMAS REIMERS: Ова е она GitHub изгледа, патем. Значи, повторно, кога ќе видите отворен извор проект, обично, тие ќе бидат за читање мене таму што може да се прочита. И ако се вратиме, ќе забележите дека имате симнување ZIP, кој ќе ќе ви овозможи да го симнете изворниот код за да го вклучите производ во вашата работа. 

МАЈК Rizzo: Да, и ако ние само кликнете на index.html навистина брзо - 

TOMAS REIMERS: Ќе видиш, тука е Изворниот код за нашата веб страница. 

МАЈК Rizzo: Исто така, заборавив да им помогнам на право порано со голема маса што вклучен, но таму е исто така на маса на chmods дека ние се вклучени само за вашиот јасност. Но, ако ние дојдете сите на патот надолу кон дното, ние всушност не направи многу многу со вклучите Javascript- работи на сите со ова. Тоа е исклучиво од сè друго што имавме. 

Затоа ти благодарам момци за доаѓање и слушање. Се надеваме дека ова беше навистина од голема помош. Ако имате било какви JavaScript поврзани прашања или само сакате да се зборува за што друго, како што други кул работи можете да го направите со JavaScript, ние би сакале да разговарам со тебе. 

TOMAS REIMERS: Ако имате некое прашање за вашиот проект или ако тоа може да биде релевантни, ние најверојатно ќе се држи околу малку по ова. Но освен тоа, имаат добар викенд. 

МАЈК Rizzo: Да, уживаат. Ќе видите момци. 

TOMAS REIMERS: Се гледаме.