Tomáš REIMERS: Saluton, ĉiuj. Mia nomiĝas Tomáš Reimers. 

MIKE Rizzo: Kaj mi certas Mike Rizzo. 

Tomáš REIMERS: Ni estas du el CS50s TS. Kaj hodiaŭ ni gvidis la seminarion pri JavaScript kaj CSS retejo apps. Se vi volas sekvi kune, la ligilo pravas tie. Kaj ĉu vi volas meti ĝin en la komputilo mallonge? 

Jen la ligilo. Ĝi estas malgranda ejo, kiu havas ligojn al ĉiuj rimedoj ni tuj estos montrante vin hodiaŭ kaj ankaŭ havas multajn utila informo skribita de ni legu pli profunde, kiam vi iros returne, kaj vi provas memori kion ekzakte ni diru, kion vi estis parolas, ktp. 

MIKE Rizzo: Bone. Do ni komencu. 

Tomáš REIMERS: Do vi volas komenci? OK. 

MIKE Rizzo: Jes. Do ni unue volis komenci kun larĝa superrigardon pri interreto kaj dosiertipoj desegninte retpaĝaroj. Dum ĉi tiu prezento ni volas eniri en JavaScript multe multe poste, ni volis dividi kun justa, speco de, kiel birda okulo vido de kia retejo estas kaj kiom pensi desegnante retpaĝaro por la komenco. 

Do you guys, je ĉi tiu punkto - kun ĝi esti vendredo nokte - devus havi prezentis viajn CS50 financo problemo aroj. Mi esperas, ke estis bona gusto de kio ttt programado povas esti. Sed ĉi tie ni volas, speco de, doni vi alian guston, kiel bone. 

Tomáš REIMERS: Do apenaŭ al Recap kio okazas, kiam vi tajpas en via URL por via retumilo, ke URL gets rigardis supren en la komputilo. Kaj via komputilo konektita al alia komputilo, kiuj gastigas tiu retejo. OK, do kiam vi iras al google.com, vi estas konektita al unu de Google komputiloj, kiuj havas la dosierojn por google.com. 

Ĝi tiam petu specifan dosieron. Do, se vi iros al - Mi ne scias - example.com / index.html aŭ / test.html, vi iras por peti ke specifan dosieron. Kaj la TTT-servilo de irante redoni ĝin al vi. 

Tiam, kiam vi iros tra tiu dosiero - iam vi estas komputila gets ke dosiero - ĝi tuj komenci konstrui retpaĝo. Do nun havas la HTML-dosiero, kio estas speco de kiel la strukturo de la TTT-pagxo. La HTML-dosiero povus ankaŭ referenci CSS dosieroj, kiuj difinas la stilo de la TTT-pagxo. 

Javascript dosieroj, kiuj difinas interago kun la retpaĝo. Bildo dosieroj, kiuj estas nur bildoj. Kaj eble ligas al aliaj HTML-dosieroj, kion vi povas tiam viziti. 

MIKE Rizzo: OK, grandaj. Do you guys havas ĉiuj, eble, pene starigita via loka gastiganto sur via virtuala maŝino. Kaj tio nur, speco de, estas la loka havaĵo, ke via komputilo akceptas nur cxar vi ĉe via propra IP-adreso. 

Do ene de tiu, tiam vi povas aldoni al ĝi vian propran ttt-paĝoj. Mi volas diri, en CS50 Financoj, vi devus havi aldonis iujn HTML paĝojn, kiuj estas, ia, envolvita en la PHP-ŝelajn. Sed fine, kio via PHP-paĝoj estis outputting estis HTML. 

Sed pensante reen al la komenco de la PSET, ni devis agordi la permesojn por ĉio, ĉu ne? Do tio nur esence lasas nin scii kiuj povas legi, skribi, kaj eble ekzekuti ĉiun de la dosieroj. Do ni tuj faros rapidan - hm? 

Tomáš REIMERS: Do ni iras fari rapidan demo. Do simple por memorigi vin, kiam vi konekti al Google-komputilo - ajn - kaj peti dosieron, la komputilo unue bezonas certigi ke vi rajtigita al reale vidi, ke la dosiero aŭ legis ke dosieron ĉar ne eblas simple demandi por ajna dosiero en tiu komputilo, ĉu ne? Tio estus sekureca risko. 

Do dosierojn sur la sistemojn kiujn ni uzas, kiel ĉi CS50 aparato, havas tri Ĝenerale homoj, kiuj povas havi permesojn por io. La unua estas la efektiva posedanto de koncerna dosiero. La dua estas la grupo kiu la dosiero apartenas. Ni ne tuj enfokusigi tro multe en tiu. Kaj la lasta afero estas, speco de, kiel la mondo aŭ kiel ĉiuj aliaj, kiuj estas Ne specifaj al tiu dosiero kaj ne havi neniun proprieton rajtojn super ĝi. 

Do, se ni havas posedanto, grupo, kaj tiam la mondo. Kaj tiam, por ĉiu el tiuj grupoj, vi povas havi unu el tri permesojn, OK, aŭ plurajn el ili. Vi povas havi legitaj permesojn. Vi povas havi rajton permesojn. Kaj vi povas havi ekzekuti permesojn. 

Do, en terminoj de realaj dosiertipoj, legi permeso estas kiel efektive legas la enhavon de la dosiero. A dekstra permeson skribi al diris dosiero. An ekzekuti permeson kuras la dosieron kiel vi faras kiam vi kuras unu el via CS50 projektoj. 

Do kiam ni pensas pri dosierojn kiel kiam ni bezonas legi HTML dosiero, kiu bezonas esti mondo legebla, right? Supozeble, same la posedanto volas por povi eldoni tiun dosieron. Do la posedanto tuj bezoni legi kaj skribi permesojn. Ili ne vere bezonas ekzekuti. 

Grupo, ni iras al trakti la samajn kiel la mondo ĝis nun. Do ili bezonas legitaj permesojn. Sed ili ne bezonas registran aux ekzekuti permesojn. Kaj nun, se ni pensas reen al iama PSETs, kion ni rimarkas estas tiuj afabla de aspektas kiel duuma, ĉu ne? 1 signifas jes. 0 por neniu. Kaj ni povas reale traduki tio al duuma. 

Do 110 en duuma estus 6. 100 estus 4. Sama kun mondo. Do la nombro kiun vi ricevas pro la permesojn por ĉi estus 644. 

MIKE Rizzo: Kaj se vi opinias reen al kiam vi chmoded io, mi kredas ili donis en la problemo starigis la Ekzemple, de kie vi povus fari iu kiel chmod 644 kaj tiam dosiernomo. La 644 tiam, vi nun povas vidi rekte kie tiu venas. Do espereble, ke faras ke iom pli klara. 

Kaj tiam por vi guy de klareco - Ho jes, tie ĉi estas denove. Do 600 tiam estus nur la ekzemplon ni rezignis tie kie la posedanto disponas legi kaj dekstra permesojn dum grupon kaj mondo ne havas ajnan permesojn aliri la dosieron. 

Tomáš REIMERS: Kaj tiam ni havas rapidan listo de komuna permesojn. Do dosierujoj, vi volas por fakte chmod 711. Rapida flanken - por dosierujo havi plenumeblan permeson signifas povi malfermi la dosierujon. Bildoj, CSS, JavaScript, HTML bezonoj 644 ĉar, esence, la mondo bezonoj legu permesojn. 

Kaj PHP, kiun vi uloj vidis kvankam ni ne povas paroli pri ĝi strikte estas tipe chmoded kun permeso 600 ĉar ĝi kuris kun la permesojn de la mastro. Almenaŭ en la aparaton. 

MIKE Rizzo: Do ​​se vi ne specife specifi kia tipo de dosiero vi volas en reale opcio tiun prezenton - ni havis problemon kun tio, ĉar ne ĉiu chmoded korekte - vi tuj akiri, speco de, malpermesita eraro, ke la retejo fakte ne havas permeson aliri ajn dosieron vi volas ĝin aliri. Kaj kompreneble, kiuj povas esti riparita - kiel en problemo starigis - ŝanĝante permesojn taŭge. 

Tomáš REIMERS: Kaj la lastan komenton por rapide loka disvolviĝo estas - ni alportis ĉi supre, sed ni nur volis alporti supren denove - se vi demandas por servilo - do loka gastiganto, ekzemple,. com aŭ kio ajn - kaj vi ne specifas specifan dosieron, la dosieron ke via komputilo tuj peti nomiĝas index.html. Aŭ, se tio ne ekzistas, index.php. 

Cool. Do tio estas nur recap ĉio, mi esperas, ke ni jam kovrita sekcio, kaj prelegis, kaj ĝis nun en CS50. Kaj nun ni tuj komencos parolante pri specife bibliotekoj. JavaScript kaj CSS bibliotekoj retejo apps. 

Do unu rapida tial ni havas bibliotekoj estas programado - tie estas multe da problemoj en programado, kiu konservi krevi supren denove, kaj denove, kaj denove. Vi eble rimarkos ke multaj retejoj bezonas la kapablon de havi falmenuo menuojn, ekzemple, aŭ bezonas la kapablon havi tre norma butono stilo, kiu ne povas esti la plej facila afero. Nun ke vi komencas eniri en HTML, vi rimarki, ke butonoj povas reale aspektas vere malbele, se vi ne fari ion. 

Do multaj homoj skribis vokis bibliotekoj. Kaj en ĉi tiu kunteksto, ili estas ankaŭ nomata kadrojn. Ni tuj uzos la du interŝanĝeble. Kaj kion ili trovas ili estas esence premade pecoj de kodo - ĉu CSS aŭ JavaScript - kiuj forprenas multon de la team vi havas en kodigo. 

Do ili pre-difinas aron de klasoj aŭ pre-difini aron da funkcioj por Javascript La kazo, kiun vi povas voki poste. Kaj tiam vi povas, ia, get aliro al tiu kodo sen devi fari ion. Ekzemplo de la biblioteko estis CS50.H. Tio estis biblioteko ni donis al vi reen en semajno, kio permesis al vi fari aĵoj kiel tiu GetInt kaj GetString sen devi skribi ajna kodo mem. 

MIKE Rizzo: Bone. Do jen, ĝuste kiel ni devis inkluzivi en niaj c Dosieroj la malsamajn bibliotekoj, ni ankaŭ devus inkluzivi en nia HTML dosieroj malsamaj bibliotekoj. Ekzemple, se ni volis inkluzivi specifa JavaScript bibliotekon ĉi tie, eble, kiu ni skribas nin kiel ĝi estas loke gastigita vokis script.js, ni nur uzi ĉi skribmaniero. 

Do ni havas skripton tipo egaluloj Javascript fonto egaluloj JavaScript.js. Kaj se vi opinias reen al via CS50 financoj problemo metita, se vi rigardis en header.php en la ŝablonoj dosierujo, Vi devus vidi, kelkaj el tiuj inkluditaj. Do tiu unua - la skriptoj - estas inkludita JavaScript biblioteko. Inkludante CSS biblioteko estas iomete malsamaj. 

Ĉi tie, anstataŭ la skripto Tag vi bezonas la ligilon etikedo. Kaj tiam, la teksto CSS tipo estas iom malsama. Vi ne ĉiam devas inkluzivi rel stilo folio. Sed mi pensas ĝi estas, ĝenerale, bona praktiko. 

Kaj poste, fine, la href, kion vi verŝajne vidis en via ATAGs por kunligi en diversaj ligiloj simple specifas la ligilo de kie trovi tion. Ekzemple, se ni volis ligi malsamaj biblioteko - ni simple diri - kiuj vivis ĉe styles.css. Kaj ni volis ligi ke en tio estas loĝigita en la retejo, ni devus kopii tion. Kaj poste algluu ĝin en iu ajn ni havas ĉi tie anstataŭe. 

Tomáš REIMERS: Bone, espereble vi infanoj estas jam konata kun kiel ligi CSS. Vi devis fari tion sur via lasta bruna aro. Javascript, kelkaj el vi eble havi iom da sperto kun. Iuj el vi eble ne. 

Do por nun, sciu ke JavaScript dosieron estas tre multa ŝatas CSS dosiero en la senco, ke vi povas ligi al ĝi aŭ ke vi povas inkluzivi gxin interne. Kaj tio permesas skripto aferojn. Kaj ni tuj iru vi per iomete da JavaScript poste. 

Do uzante biblioteko - unufoje vi jam inkludis ĝin, ĝi estas kiel simpla kiel laŭvorte nomante la funkcioj aŭ aldonante la klaso nomoj por ĝi. La lasta afero ni volas paroli pri en terminoj de la biblioteko - kaj ĉi tiu estas pli teknika noto - Estas malfermita fonto permesilo. Do, kiam vi trovos tiujn realajn bibliotekoj, eble vi pensas demandojn ŝatas estas ĝi OK, ke mi estas nur uzante aliulaj kodo, speciale ĉar tio estas io tre multe diris al vi, por ne fari en ĉi tiu kurso. 

Do, en la kazo de malfermita fonto permesilo, multe da programistoj - Tuj ili skribis biblioteko, kion ili pensas povus esti helpema al aliaj homoj - publikigos ĝin al la retejo kaj donu licencon. Kaj licencon esence diras mi maniere koncedante permeson al aliaj homojn uzi ĉi peco de programaro kun la jenaj ian estipulaciones. 

Ni inkludis ligilon al bona loko por helpas al vi kompreni la licencoj en kazo vi kuros en ilin. Komuna estipulaciones estas aĵoj kiel Vi plene rajtas uzi mian bibliotekon tiel longe kiom vi donas al mi krediton. Vi plene rajtas uzi mian bibliotekon tiel longe kiel kiam ĝi rompas Vi ne kulpas mi. Vi plene rajtas uzi mian bibliotekon tiel longa kiel vi ne uzas ĝin por fari monon cxar vi mem. Ĉi tiuj estas specoj de komuna estipulaciones. 

Por ĉi CS50 fina projekto, ili ne devus esti la super rilatajn ĉar la projektoj kiujn vi uloj uzas estas Probable ĝuste, speco de, konata. Sed kiam vi vere eliros sur la mondo kaj ekuzi bibliotekoj, kiuj Eble aŭ ne estu tiel implementado kiel kelkaj el la plej popularaj ni estas tuj iros tra. Bonas por povi kompreni ĉi tiuj licencoj kaj al kompreni kion ili signifas. Kaj irante reen. 

MIKE Rizzo: okej. Do nun movanta sur ekzemploj el reala CSS. Je ĉi tiu punkto ĝis nun, vi eble ne renkontis ĉi. Sed eble vi renkontis lin en via ĉiutaga vivo kie io kiu similas unu vojo en unu retumilo eble ne rigardu la saman vojon en alian retumilo. 

Tio estas nomata retumilo retumilo kongruo. Kaj ĉiufoje Iĝas pli kaj pli ol problemo, speciale kiel foliumiloj preni pli kaj pli da liberecoj apliki tion, kion ili volas. Do por superi tiun, tie efektive estas grandan bibliotekon nomitan Normalize.CSS. 

Tomáš REIMERS: ni inkludis la ligilon. Je tiu punkto, ĝi estas utila, se vi havas vian tekkomputilo tien rigardante la lokon. Kaj ni alportas al vi rajton nun simple ĉar la CS50 fino projekto estas vere tuj demandi vin implementarlo simile kaj tra retumiloj. 

Do simple por gardi en la dorso de via kapo, tio estas mirinda biblioteko ĉar ĝi volas, ia, normigi tion. En Firefox, iu povas montri kiel unu rastrumero maldekstren. Kaj tiam Chrome eblas decidi ke reale kion vi volis diri estis 10 rastrumeroj maldekstren. Kaj vi volas normigi tion. Normaligi efektive faras vere bonan laboron de certigi ke via ejo aspektas la sama trans retumiloj. 

MIKE Rizzo: Do, se ni volis simple klaki la ligilon vere rapide kaj spektaklo vi kion tio aspektas kiel, vi povas elŝuti ĝin uzante la giganto Elŝutu butonon. Aux mi kuraĝigas vin legi pli pri ĝi klakante tiun ligilon en la suba dekstra mano angulo. 

Tomáš REIMERS: Kaj se vi vere klaku legu pli ĝuste tie - klaki la fonto sur GitHub - vi efektive vidas la malfermita fonto permesilo en LICENSE.md rajton tie. Kaj vi vidos tie estas la tre popularaj MIT-permesilo. Denove, se vi tralegu la tekston, vi povos trovi ĝin en la paĝaro ni referencita antaŭ kaj povos kompreni ĝin sen devi legi tra la leĝa slango. 

MIKE Rizzo: OK, grandaj. Do jen normaligi. Ni volis doni al vi ke vere rapide. Ho, ĉu vi havas demandon? 

Spektantaro: Do ​​kiam vi elŝutas ĝin, vi nur sekvas tiun kodon, kiun ili havas sub la Download butonon? 

Tomáš REIMERS: Jes, tiel kiam vi elŝutas - 

MIKE Rizzo: Ho, tio estas granda punkto. Do la demando estis kiamaniere fari Ni efektive elŝuti ĝin? Do, se ni klaku la ligilon, ni vidas ke ŝi fakte popoj supren ĉe la fontkodo. Do fari tion, kion ni povis, cxu oni simple alklaku Konservi Kiel. Konservi Kiel kaj kiuj devus venigi dosieron. Kaj tiam ni povas elekti konservi ĝin kiel normalize.CSS. Kaj tiam vi havus ligi gxin en - 

Tomáš REIMERS: La sama maniero vi ligas en iu ajn alia dosiero. Kaj kiam vi ligas ĝin, kio estas granda pri normaligi estas ĝi estos reale prizorgi pri cxiuj obstinaj labori per sin. Signifo ke vi ne havas aldoni ajnan klasoj. 

Vi ne devas fari ion strangan. Ĝi estos normaligi sen vi fari ion plu. Jes, vi devas inkluzivi ĝin. Google Chrome ne respondas. 

Just a quick flanken - Mi rimarkis, ni saltis en ĉi. La resto de ĉi tiu prezento estas tuj estos rapida superrigardo. Enketo de la bibliotekoj. 

Esence, kio ili estas. Kion ili faras. Kiom ili estas utilaj. Kiel vi povus apliki ilin. Se vi volas komenci rigardante ilin, jenaj kune, kaj tralegado ilin, mi estus tre instigas, ke. 

Alternative, vi estas bonvena ankaŭ al komenci elŝuti ilin kaj inkludante ilin en vido nur por vidi kion ili aspektas kiel aux kion ili faros se vi havas via tekkomputilo antaŭ vi. Se ne, vi estas bonvenaj por subteni aŭskultas nin paroli. Ni tuj interparolas. Kaj ni havas tempon, je la fino, mi esperas ni reale preni en montrante vin kion iuj el tiuj bibliotekoj aspekti. 

MIKE Rizzo: Cool. Enorde, do nun ni parolas pri Tiparo Awesome. 

Tomáš REIMERS: tiel Tiparo Awesome estas vere neta ejo, precipe por tiuj el ni, kiuj estas malpli arte talenta. Ignorante la nomo Tiparo Awesome, donas vi faskon de ikonoj, kiuj estas tre utila. Do multe da fojoj vi devos apliki an Ikono vi eble volas kiel belan x tia ke vi povas fermi ion. 

Aŭ vi eble volas ian Redakti butono kun krajono desegno kiel ĉiuj aliaj havas. Kaj tio estas kiam vi ekscias ke desegni tiujn piktogramojn povas esti tre teda kaj malfacila. Tiparo Awesome - se vi vere iru al la retejo - donas al vi multajn piktogramojn sub la piktogramoj ĉe la supro. Jes, ĝuste la supro. Ĝi donos al vi multan de ikonoj senpage. 

Do jen vi vidas ni havas aferojn kiel asterisko, trinkejoj, fulmo riglilo, a kalendaro, cimo, libro, kaj tiel plu. Tiu povas esti tre utila. La vojo vi inkluzivi ĉi estas vi inkluzivi laŭvorte la CSS-dosiero. Kaj poste vi jam inkludis la CSS-dosieron: kion vi povas fari estas vi krei tag nomata I. Ĝi satands por Ikono kun la klaso FA staranta por tiparo Awesome. Kaj poste, kion ajn klaso vi deziras. 

Do, se mi volis ikono de ĉi plus akordi bone ĉi tie, mi donus ĝi la klaso FA. Kaj tiam la FA streketo plus streketo kvadrato. 

MIKE Rizzo: Cool, OK. 

Tomáš REIMERS: Kaj tiam, la lasta CSS biblioteko ni volas akiri per ni estas klopodi fari gxin minimuma je CSS bibliotekoj, ĉar ni ja rimarkas la titolo de tiu prezento estas JavaScript Bibliotekoj. Sed ni opiniis, ke ni plej bone enkonduki vin en la aliaj bibliotekoj dum ni parolis pri bibliotekoj. 

Estas Google Web Tiparoj. Kaj kio Google Web Tiparoj permesas vin fari estas aldonu tiparojn al via retejo, kiu estas vere facila maniero por fari ĝin belaj kaj distingi via aro el ĉiuj aliaj estas se ĝi havas belan tiparo aŭ se ĝi havas belan kolekto de tiparoj. Google Web Tiparoj estas bela malkiel aliaj bibliotekoj en la senco ke ĝi estas vere gvidis instalado. 

Do se vi sekvu la ligon, ĝi estas google.com / tiparoj, mi kredas. Se vi sekvas tion, vi povas elekti vian tiparon. Vi povas elekti sur la maldekstra el dikeco, dekliva, ktp. Kaj tiam, unufoje vi elektis unu, vi povas klaki rapida uzo. Ĝuste tie. Malsupre dekstre de la skatolo. 

Kaj tiam, rulumu malsupren. Unue, ili donos al vi la CSS ke vi bezonos efektive ligas al ĝi. Ĝi estas prava. Vi povas simple kopii kaj almeti ke in Kaj la bela afero pri ĉi tiu estas vi fakte ne eĉ bezonas elŝuti la dosieron. 

Kio ĝi estas tuj fari estas tio okazas ligi al Google-version de ĝi. Do reen al kion signifas tio. Tio signifas, kiam uzanto Elŝutoj via dosiero - Elŝutoj vian HTML-paĝo - via HTML paĝo tuj referenci tiun ĉi dosieron. 

Tial, vian komputilon tuj vidas, Ho, estas loĝigita en google.com prefere ol sur theirsite.com. Permesu al mi iri demandi Google por ke dosiero. Kaj tiam, li tuj inkluzivi ĝin preskaŭ kiel se ĝi estus parton de via propra retejo. 

Tomáš REIMERS: Cool. Kaj iam vi inkluzivas tion, tiam al inkluzivi ĝin en vian CSS, tio donas al vi la reala linio. Do vi starigis la propraĵo tiparo familio egala al la nomo de via tiparo. 

MIKE Rizzo: okej. Do ni ĵus finis kun CSS. Kaj iuj el vi povus pensi, bone, Ni havis kelkajn CSS sur CS50 Financoj. Sed CSS biblioteko estis bootstrap. Ni efektive inkluzivas Bootstrap iom poste sub JavaScript ĉar kun la Bootstrap CSS biblioteko ankaŭ venas kun amaso da JavaScript ke Bootstrap aŭ Twitter - kiu faris Bootstrap - Uzas administri ĉiujn iliajn CSS. 

Tomáš REIMERS: Ĉu iu havas iun demandojn tiom multe pri CSS ĝenerale? Ni estas bona? Awesome. 

MIKE Rizzo: Awesome. 

Tomáš REIMERS: Do movas sur JavaScript. 

MIKE Rizzo: Do ​​ni volis paroli pri jQuery por komenci. Ĉu iu aŭdis pri jQuery antaŭ aŭ uzis ĝin? Yeah, paro? Do, se vi simple labori kun denaska Javascript, vi trovos vin mem tajpi multajn longajn selectores multe. Do kio jQuery faras estas ĝi havigas belan wrapper por la Javascript lingvo kiu permesas facile elekti kaj manipuli malsamaj elementoj ene de la dokumento objekto modelo de la TTT-paĝo aŭ la DOM, kion mi kredas you guys auxdis de en prelegi ĉe tiu punkto. 

Tomáš REIMERS: Se vi ne aŭdis pri ĝin aŭ se vi ne spektis prelegon tamen, la Dokumento Objekto Modelo trovas esence kiel tion, estas reprezentitaj. Do HTML ia aspektas kiel arbo kiam vi vere tiros gxin. Vi havas la HTML elemento sur supro. Vi havas la kapon kaj korpon. 

Kaj poste, ene de kiuj vi havi ĉion alian. Tio nomiĝas la DOM - Dokumento Objekto Modelo. Do modelon kiu reprezentas objektoj en La dokumento estas facila maniero por pensi pri tio. Kaj unu el la grandaj afero pri jQuery Estas vere faras petolanta tio kaj manipulanta elementojn ene ke nekredeble simpla. 

Do simpla, fakte, ke la plimulto de Javascript bibliotekoj aŭ se ne la plimulto, la granda plimulto de tiuj, vi vidos efektive postulas jQuery tiom ke ili povas kuri sin simple ĉar se vi ne havas jQuery, vi devus malŝpari multan tempon klopodi elkompreni kiel elektu iun eroj kaj kiamaniere fari aliajn aferojn. Kaj la alia granda afero pri jQuery estas ke ĝi estas kruco retumilo kongruaj. 

Do memoru reen kiam ni diras ke Ne ĉiuj foliumiloj apliki aferojn sammaniere? Ĉi tio estas vera eĉ en JavaScript. Kaj unu el la grandaj aferoj pri jQuery estas ke gxi detektos la foliumilo kaj detekti la taŭga metodo. 

Do se vi volas elekti elementon, Internet Explorer dirus vi estas supozis fari tiamaniere. Firefox povus diri la korekta maniero estas tiamaniere. jQuery ne zorgas. Kiam vi diros jQuery selekti elemento estos eltrovi kiel ĝi estas supozis fari ĝin ene de la retumilo la uzanto estas nuntempe en, kaj tiam fari ĝin tiel. 

MIKE Rizzo: Do ​​ni ne parolas pri la uzadon de jQuery iomete. Ĝuste kiel PHP, jQuery havas apartan amon por la dolaro signo. Do vi trovos, ke iu jQuery - Nu, ne ĉiuj. Vi povas iam anstataŭos la dolaro subskribi kun la vorto jQuery. Sed ĝenerale, simple ĉar ĝi estas mallonga, kiam ajn vi vidas jQuery esti uzata ĝi estos kun dolaro signo. 

Do ĉi tie ni nur montrante komenco Elektilo por ero en la DOM. Tie, ni havas la dolaro signo sekvis per malferma krampo kaj tiam citaĵoj. Kaj ene de la citiloj iri nian selectores cxar la malsamaj elementoj. Same kiel en CSS, ni bezonis selectores al povos stiligi malsamaj elementoj ene de la pagxo. Tiuj malsamaj selectores traduki ĝuste en jQuery kaj JavaScript, plejparte. 

Do ĉi tie ni havas dot foo. Do, se vi memoras el prelego, la skalara simple signifas la klaso. Do ni elektu elemento kun klaso foo. Do, se mi iras antaŭen kaj malfermu niajn Javascript konzolo tie vere rapide nur pruvi ĝin, se mi simple tajpas la dolaro-signo, oni vidas ke ĝi estas iom funkcio kiu venas supren. Kaj ĝi estas simple difinita per jQuery. 

Tomáš REIMERS: Por tiuj el vi nekonataj, La konzolo estas ilo ene Chrome, kiu permesas al vi, esence, kuri Ĝavaskripton en la aktuala paĝo. Ĉi vi trovos nekredeble utila kiam vi fakte elpurigi kaj vi bezonas esti kiel, kia estas la nuna valoro de iu malloka variablo aux kion estas io alia? Ĝi estas speco de kiel GDB kun la escepto ke vi povas reale manipuli elementoj sur la paĝo kun ĝin multe pli facila maniero. Kaj ĝi ankaŭ ne, esence, kontrolu kun vi, antaux ol gxi faras nenion. 

Do dum kiu, GDB povus esti kiel, estas vi certas ke vi volas lanĉi la sekva paŝo? La konzolo estas en reala. Do kiel la TTT-pagxo estas prunti kaj fari kion ajn ĝi estos faranta, la konsilio de ankaŭ kurante apud ĝi. Kaj vi povas meti kulpigu kodon en ke konzolon, kiu volas, oni kuras en la paĝo. 

MIKE Rizzo: Do ​​por eniri en la konzolo, Mi supozas ke mi devus mallonge mencii kiel fari tion. En la lastaj problemojn ke vi havu uzita Chrome la inspekti elemento funkcioj aŭ rigarda paĝo vikitekston - kaj tiuj estas atingeblaj nur per dekstra klaki sur la paĝo aŭ de specifa elemento kaj farante ĉu inspekti elemento aŭ rigarda paĝo fonto. Ni povas ankaŭ aliri la Javascript konzolo rekte per elekti inspekti elemento. Do tiam vi ĵus batis konzolo sur la fora dekstra flanko. 

Alternative, vi povus esti ankaŭ foriris al la supra dekstra mano angulo, kio estas ekstermita sur tiun ekranon kie ĝi havas la tri horizontalaj stangoj. Kaj vi iros malsupren al iloj kaj tiam JavaScript konzolo tie kie povas vidi - almenaŭ sur Vindozo - la fulmoklavo estas Kontrolo Shift J. do se ni volis elekti ero ene de ĉi tiu paĝo, ĝuste kiel mi montris antaŭe, ni faru dolaro signo malferma parens kaj do citas. 

Interesa afero estas, ĝenerale, citiloj kaj duoblaj citiloj estas canjeable. Do multaj homoj simple uzi sola citaĵoj ĉar estas rapida entajpi ol duoblaj citiloj ĉar vi ne faras devas premadu Shift. Do mi nur faras tion nun. 

Do mi volas elekti ion kun klaso. Ujo, nur ĉar mi scias, ke estas iu kiu estas sur nia retpaĝo nun. Kaj mi batis Eniru. Kaj ni povas vidi ke gxi selektis ĝin. Do ĝi montras supren ke Revenis tiu celo. Do tio estas baza elekto. Se ni vere volis manipuli ŝin, vi devus voki ion sur tiu selektado, kiun ni havos enir poste. 

Tomáš REIMERS: Do simple por rigardi ke pli profunde, tio ne estas malsamaj ol la funkcio alvokojn ni faris en C. La nomo de la funkcio ĉi tie estas iom bizara. Estas dolaro signo. Ĝi estas nur nomo de funkcio. Estas nenio speciala pri tio. 

Ni havas malferma krampo. Tiam, ni havas niajn unu argumento, kiun en ĉi tiu kazo okazas esti kordo, kio estas selector por ĝi. Kaj tiam, ni havas niajn fermita parentezo. Estas tio. 

Ĝi ne estas ke ege malsamaj. Kvankam, ĝi aspektas tre stranga. Kaj tio povas esti, speco de, frotado punkto por multaj homoj. 

MIKE Rizzo: Tiel same, se ni volis elekti elemento kiu havas IRU, Nun ni volas elekti per ID anstataŭ klaso. Estus simila afero, kie ni nur faru la akra signo por ID. Do ni elektu tie la tutan elementoj, kiuj havas ID trinkejo. 

Tomáš REIMERS: Kaj ĉi etendas. Tio CSS etendas. Same kiel en CSS, vi povas elekti la tutan ligiloj, kiuj havas la klaso foo. Jen, ĝi estas la sama afero. 

Vi povus fari a.foo, kio estus elekti ĉiuj ligiloj kun la klaso foo. Vi povus fari akran stangon, kiu farus elektu la ligilon kun la ID trinkejo kaj do ktp ktp. Ajna CSS selector estas valida jQuery selector. 

MIKE Rizzo: Jes. OK, do nun ni enir iomete de manipulado, ke ni povas fari kun nia jQuery. Do jQuery havas apartan tipon de skribmaniero, kie ni simple uzos punkto ĉe la fino. Kaj vi povas pensi pri tio kiel en C kiel ni havis malsamajn structs. Kaj iros en tiuj structs, vi farus uzi dot enir ilin. 

Tio estas, speco de, simila afero. Nur nun ni havas funkcioj ene de ĉi selector ke ni povas nomi ĝin. Do jen, la tre unua ekzemplo vi povas vidi estas la CSS selector. Kaj esence, kion tiu faras, estas ĝi aplikas la unua elemento de CSS al tiu afero, kiun vi elektis - tiu elemento kiu vi selektis - kun la valoro kiu. 

Tomáš REIMERS: Do facila traduko de ke estus se jQuery, esence, nur prenis foo. Kaj tiam en CSS diris, kolora ruĝa kaj proksima. Ĝi estas la sama ideo. Kio ĝi estas farata, ĝi estas selektitaj ĉiuj foo elementoj. Kaj tiam ĝi estas aplikita. Ordigi de, la propraĵo koloro estas egala al ruĝa. 

MIKE Rizzo: Simile, ni povas ankaŭ ŝanĝi La efektiva enhavo de kio montrante sur la HTML de la paĝo, kiun Estas vere malvarmeta, ĉar ĝi signifas via retpaĝoj povas nun esti tute dinamikajn kaj ne devas esti statikaj ke vi presi uzante PHP tuj en la komenco de la paĝon esti ŝarĝitaj. Do ĉi tie, se oni volis ŝanĝi la efektiva HTML de la paĝo, ni volus nun vokas la HTML funkcio, kiu tiam nur enmetas ajn ni specifi en tiu elemento kiun ni elektis. Do jen ni elektu elemento kun klaso foo kaj tiam dirante estas HTML ĝi estas nun saluton mondo. 

Tomáš REIMERS: Kiam vi opinias pri kio estas utila aplikoj de tiu, ĉi CSS unu, la unua afero, kiun vi povas komenci pensi estas en terminoj de eĉ elgutigos menuoj. Vi povus komenci fari tion kiel, kiam uzanto ŝvebas super la supra parto de guto malsupren, oni volas fari la malsupran parton videbla. Ĝuste? 

Do en CSS, ni havas propraĵoj fari ion videbla. Aĵoj kiel ekrano dupunkto neniu farus nevidebla. Vidigu bloko farus ĝin videbla. Aŭ eĉ se vi volas iri pli simpla, vi havi aferojn kiel videbleco egaluloj videbla, kaj videbleco egalas kaŝitaj. 

Kaj vi povus starti al apliki aferoj kiel dolcxan malsupren menus dekstra post vi ricevas tra la ideon de kiel ĉu vi povas diveni, kiam tio malfermiĝas, kiun ni devos trairi tre mallonge. Sed ni povas komenci vidi aplikoj de ĉi. En simila senco, se vi estus por provi kaj efektivigu, ni diru, la babilejon motoro kaj vi volas fari iom parolado bobelo supreniru kiam vi havas havas novan mesaĝon, iam vi havos la novan mesaĝon, vi povas fari iom parolado bobelo supreniru ŝanĝante la HTML de la paĝo, dekstre? Per aldono de tiu ekstra parolado bobelo kun la ekstraj teksto en tie. Jes? 

Spektantaro: Do ​​vi devus enmeti ĉi ene la HTML-kodo en ia kiel [Inaudibles]? 

MIKE Rizzo: Ĝuste. Jes, ni ricevos por ke en iomete. Jes, estas simila a iomete al PHP. Ne precize simila. 

Bona distingo fari kion ĉi Efektive oni redaktas dum ni redaktanton la paĝon ĉar ĝi ne estas tuj estos redaktado de la reala dosiero kiu estas estante tenis ĉe la servilo pro tio la mondo ne devus havi permeson redakti viajn dosierojn. Tiu estas ĝuste redaktado kio estas sur la paĝo kaj kio esti montrata ene la retumilo. Do se vi estus al reŝarĝi la paĝon post kiam, diri, viŝante ion kiel ni Vidu, ni povas fari kun la Elpreni alvoko, ke afero devus tiam reaperas. 

Tomáš REIMERS: Do unu maniero pensi tio estas, se mi estas via komputilo kaj Mike estas, speco de, la servilo. Kio okazos Estas Mi tuj demandi Mike, hey, mi povas havi kopion de tiu retpaĝo? Kaj li donos al mi kopion de ĝi. 

Ne, tio ne estas la originalaj afero. Estas nur skribmodelo. Kaj tiam ĝi estus kiel, oh, ne estas JavaScript tie. Klare, mi devas redakti la pagxo esti kiel ĉi tio. Kaj mi redaktas vian kopion. 

Sed tio ne effecting la efektiva kopion. Kaj se mi petos lin denove refreŝigi la paĝon, - bona, mi povas havi alian pura kopio - Li tuj donu al mi alia pura kopio. Kaj poste, mi faros la samon kiel, oh, tio JS tie kiu diras redakti ĉi. Kaj mi tuj daŭre fari tion. 

MIKE Rizzo: Do ​​vere malvarmeta afero ke vi povas fari kun jQuery estas efektive aldonu malsamaj tipoj de kuraĝigojn al via paĝo. Mi ne scias se vi iam vidis kie vi provas kiel plenigi formularon linio kaj vi ne plenigu tion korekte. Do iom afero glitas malsupren ĉe la supro kaj diras al vi ne faris tion ĝuste. Bonvolu reprovi. Kaj poste, eble eĉ nur gliti supren. 

Rezultas jQuery konstruigis en funkcioj kiuj faras ĉiu el tiu kuraĝigo vere, vere facila. Do tie estas unue la fade el funkcio, kiu vi povas voki sur io. Kaj ĝi estas maniero ŝanĝi la CSS de tiu elemento en vigla maniero. Do necesas ajn elemento vi nomas ĝin fade out plu. Kaj poste, malrapide ŝanĝas ĝia opakeco ĝis ĝi iras tute travideblaj. 

Tomáš REIMERS: La alia populara estas gliti suben, kion faros io aperas por glitante ĝin malsupren. Do, en la kazo de la falmenuo, denove, kiam ni lernis kiel detekti Kiam ĉi tiu estis ŝvebis super, vi povus nur rakonti ĉi malsupro parton gliti malsupren nun. Kaj tiam, ĝi aperus per glitante malsupren. 

MIKE Rizzo: Kaj do, se vi nur havas iu tipo de kuraĝigo en menso kiu jQuery ne nepre provizas. Ekzemple, ni diru jQuery provizas vin per tobogano malsupren kaj glito supren. Nu, ni diras, ke vi volis gliti io en la maldekstra aŭ en de la dekstra klaso de kiel la CS50 ĉefa paĝo faras kiam ajn vi iru al nova panelo. Vi devus tiam probable devas apliki ĝin vi mem uzante la animi funkcion ene jQuery. 

Do simile, vi simple animi. Kaj tiam, en ĝi prenas vortaro de la diversaj valoroj ke vi supozis tion. Do ĉi tie, se ni volis animi la elemento foo tia ke ĝia larĝo ĉu ekspansiiĝas aŭ kontraktojn al 80 rastrumeroj, depende de kio nuntempe estas. Ni estus nur preterpasonta kiel la argumento en ĝi. 

Animi ankaŭ havas kelkajn aliajn argumentojn ke vi povus pasi ĝin, ekzemple, La rapido de la kuraĝigo ke vi volas doni al ĝi. Kaj fari tion, mi estus nur diru rapide Google jQuery animi. Kaj tiam, disvastigante tiun paĝon, vi povas vidu'S ricevis faskon da malsamaj propraĵoj kiuj vi povas pasi ĝin. 

Kaj mi kuraĝigas vin - kiam ajn vi venos trans ion ke vi ne faru konas aŭ simple volas lerni pli pri aparta metodo kiun vi povas nomi sur io - nur Guglas ĝin. jQuery estas ege bone dokumentita. Kaj ofte tempoj ekzistas multe da ekzemploj, ke ili provizas por vi. Se ni rulumu malsupren - vojo malsupren - ke ni povas uzi, kiel bone. 

Denove, kiam developer reale iras tra la penon skribi biblioteko, ili tipe volas ke iu uzas ĝin. Do apud tuj esti dokumentado. Kaj tiu dokumentado povas kutime esti trovita en la projekto paĝon, kiu estas kial ni donis al vi ke originala loko en la komenco, kiu ligas vin al la projekto paĝojn tiel vi povas vidi ke dokumentado. 

Tipe, la projekto-paĝon en la kazo de [inaudibles], ĝi parolis al vi la nomoj de la klasoj. En la kazo de JavaScript, tio donas vi la nomon de la funkcioj. Parenteze, se ni rulumu supren al la supro, rapida flanko noton sur funkcioj estas kiam vi vidas funkcio implementado kiel tiu kun la malmola krampoj en la mezo, kiuj per ke tiu propraĵo estas nedeviga. Nur kapoj supre. Mi vidis amason da demandoj pri tio. 

Do ĉi tie oni povas vidi, ke la animitajn prenas propraĵoj kiel necesa argumento. Kaj ĉio alia estas nedeviga. Flanka noto - vi povas pensi pri tio, varo de, kiel homo paĝoj. Viro paĝoj estas dokumentado por C kaj cxar multe da aliaj aferoj, tiel. 

MIKE Rizzo: Do ​​ni jam lernis kiel ŝanĝi malsamaj CSS sur la paĝo, animi, kaj forigi aldoni HTML. Sed unu el la vere plej potenca aferojn pri JavaScript kaj speciale jQuery - kio permesas fari estas respondi al malsamajn elementojn kiuj okazas. Ekzemple, ĉi tie ni havas okazaĵo traktilo. Kaj tio nur signifas, kiam ajn tio evento okazas, ni manipuli ĝin en certa maniero. 

Do jen, la ĝenerala jQuery okazaĵo traktilo estas la skalara plu. Kaj tiam, la unua afero, kiun vi donis estas kio okazaĵo devus esti aŭskultante por. Do ĉi tie, ĝi estas la klako ke ni atendis. 

Tomáš REIMERS: Alternative, vi havas sur ŝvebado, kiu estas tre populara. Do reen al mia falmenuo ideo. Vi havus la plej supra sur ŝvebado. Kaj tiam vi povus ŝanĝi tion. 

MIKE Rizzo: Ĝuste. Kaj tiam, kiam tio okazas, ĝi nur ekzekutu tiun funkcion, ke ni donu al ĝi kiel argumento kaj ke garde saluton aŭ hi. 

Tomáš REIMERS: Do, en la kazo de JavaScript, tio estas loko, ni bezonas forigi nin de C. Ni povas reale preni funkciojn kiel argumentoj. Kaj ekzistas amaso de vere kompleksa manieroj por fari tion. Ni iras al promocii unu vojon, kiu estas oni povas difini la funkcii ĝuste tie. 

Do, kiam vi petas por funkcio kiel parametro, vi estas esence nur tuj difini la funkcio surloke. Kaj la vojon vin difini funkcio en JavaScript estas vi laŭvorte diras funkcio. Tiam, kutime, la nomo de la funkcio. Sed ni neniam tuj referenci ĉi funkcio denove. Do ni lasos ŝin sen nomo. 

Tiam la krampoj, tiam la krispa krampoj, kaj poste la kodon ene de tiu. Do ni komprenas ĉi tedaĵo esti iom konfuza. Do ni donos al vi la ĝeneralan formon de kia okazaĵo traktilo aspektas kiel malsupre, kiu estas sur okazaĵoj. Kaj tiam, via kodo interne tio. 

MIKE Rizzo: Ĉu ekzistas demandojn pri tio? Tio povas esti iom malklara la unua fojo vi vidos. 

Tomáš REIMERS: Vi vere volas malfermi dosieron kaj montri al ili iom jQuery ĝuste nun? 

MIKE Rizzo: Jes, ni faru tion. OK. 

Tomáš REIMERS: Do nun ni estas en la aparaton. Kaj kion ni jam faris estas ni faris la libereco de krei samtempe index.html dosiero, kiu kunligas JavaScript-dosiero. Kaj ni povas malfermi la - yeah. Nu, tio faras du aĵojn. 

La unua estas ligiloj al la JavaScript-dosiero. Kaj ni vidos ke ĝis ĉi tie. Ni vidas, ke en la kapo de la HTML-dokumenton, aparte. Do vi vidos tie ni, esence, diru SRC, kio staras por fonto. Kaj tio estas la retadreso. 

Do ĉi tie oni povas diri ke ni inkludis jQuery. Kaj ni ankaŭ inkludis skriptoj. La alia maniero por inkluzivi JavaScript estas ke vi povas inkludi inline skripton tag kiel ni havas ĉe la malsupro kie Diras skripto tipo estas teksto JavaScript. 

Do ni diri, aŭskultu, ni estas pri inkludi skripton. Kaj la tipo de tiu skripto estas Javascript, kiu estas tipo de teksto. Tre simpla. 

MIKE Rizzo: Do ​​tiu, speco de, alvenas al via demando pri kiel ni inkluzivi Javascript en nia dosierojn ĉar kiam ni estis PHP, ni faru ion kiel ĉi tio. Kaj tiam, niaj PHP funkcioj - diru akcioj fari ion kun tiu - iras tien. Tamen, nun ni havas la skripto-etikedoj ke ni donu al ĝi, kiuj estas efektive parto de la HTML mem ĉar ĝi ne estas ŝajnigi esti HTML dosiero ŝatas ĝin estas en PHP ĉar se vi vere iru en kaj rigardu la fonton de la paĝo, vi vidos tiujn skripto etikedoj tien kun la Javascript asociita kun ilin en tio. 

Tial do, se ni volis skribi iun JavaScript - ni simple diri, ni volis ŝanĝi korpo ĉar ĝuste nun mi ne havas iu ajn alia etikedoj ke mi povas vere redakti krom korpo. Ni nur diras, ke mi volis ŝanĝi la CSS de tiu. Do ni iru antaŭen kaj ŝanĝo la koloro de ĝi al ruĝa. 

Do mi savu la dosieron. Ni reiru al nia retpaĝo, rekalkuli, kaj tio faras ĝin aŭtomate ĉar ĝi ne ŝajnis kiel ĝi atendis ĉe ĉiuj ĉar ni ne aŭskultas pro okazaĵo aŭ io kiel tio. 

Tomáš REIMERS: Do, se ni reiros al tiu dosiero aparte - la HTML dosiero - kion vi iras vidi estas ni havas - memori, ke tiu estas ŝarĝita, ia, kronologie. Do ni devas unue la kapo. ŝarĝas tiuj du dosierojn. Poste ni iros al la korpo. Kaj ni vidos saluton mondo. Do ni redonu saluton mondo. 

Kaj tiam la lasta afero, kiun ni havas estas ni havas la skripto etikedo. Do ĝi kuras la skripto tag ĉar ĝi estas Ne rakontante atendi nenion. Kaj tiu estas la plej baza vojo kuri JavaScript. 

Kun kiu diris, vi povas meti la skripto etiketoj en la kaplinio nur por montri ĉi punkto? Kaj kuras tio. Ni tuj rimarkos ke tio ne ŝanĝas la koloron. Kaj tio estas unu el la problemoj de Javascript estas ke aferoj estas ŝarĝita en kronologia ordo. 

Do, je la tempo, ke tiu kodo kuris, ni selektis - reiru - la korpo etikedo. La korpo etikedo ne ekzistanta ĉar Javascript estas en linio kun HTML. Do la retumilo estas kiel unuaranga korpo. Tie estas nenia tia aĵo ankoraŭ. Do ni povas ignori tion. Kaj ni plu iri. 

Kaj tiam ni difini korpo etikedo. Sed tio neniam gets ĝisdatigita. Do kiam vi efektivigo skripton etikedoj, certigu vin meti post la korpo etikedo. Sekva glito. 

MIKE Rizzo: okej. Do ni ŝanĝis ion. Sed tio tute ne aspektis kiel ĝi respondis al nin ĉe ĉiuj, ĉar ĝi nur speco de faris ĝin tiel frue kiel ĝi ŝarĝas la paĝon. Do nun, anstataŭ fari tion, kial cxu ne ni aldonu evento traktilo. 

Do ni faru ion al la korpo denove. Kaj ni diras, ke ni faru ĝin - klaku. Ni devos aldoni funkcion. 

Tomáš REIMERS: Ni ŝanĝo ĝi estas koloron al ruĝa denove. Kial ne? 

MIKE Rizzo: Jes, ni ŝanĝo ĝia 'koloron al ruĝa denove. Ĉiuj pravas. Do ni reŝarĝi la paĝon. OK, ni vidas - kiel atendita, ne rezultas ruĝa ankoraŭ. Sed tiam ni povas iri antaŭen kaj alklaku ĝin. 

Tomáš REIMERS: Kaj ĝi turni ruĝa. 

MIKE Rizzo: Kaj jes turni ruĝa kiel atendita. 

Tomáš REIMERS: Kaj ni povas vidi kiel Ni povas komenci konstrui tre baza interago. Aliaj aferoj ni volus fari estas, se ni ne volas fari la korpon kolora ruĝa, ni faru la HTML fonkoloro ruĝa. Ĝuste tiel ĝi estas la sama CSS. 

Kaj kiam ni ŝanĝas ĝin, ni povas vidi ĉi tre drama efiko de ŝanĝi la tuton de la paĝo. Do denove, se vi efektivigo aferojn, vi povas havi unu komponanto kio estas intencita al esti alklakita. Diru al Eliro butonon kaj tutan alia komponanto, kio estas intencita por respondi. Do vi devus forigi fenestron kiam tiu okazas. 

MIKE Rizzo: okej. Nur kiel ekzemplo - vi ne alvenis al vidi ĉi pli frue - Mi nur montros al vi kion ĝi aspektas plaĉas kiam oni kaŝis ion. Do mi devos iri antaŭen kaj ne gliti supren. 

Tomáš REIMERS: Volas wrap ke en alineo tipo antaŭ ol ni faras tion? 

MIKE Rizzo: okej. Jes, kial ni ne faru tion ĝuste tiel ni povas elekti ĝin iom pli. 

Tomáš REIMERS: Kaj ni donu ŝin al klaso. 

MIKE Rizzo: Jes. OK, do ni vidu. Anstataŭ elektante la efektiva korpo nun, mi nur elekti ĉiun kun klaso saluton, kiuj ĉi tie ni nur unu aferon. Do ni ne devas zorgu pri tio. 

Do mi devos refreŝigi ĝin. Mi iru antaŭen kaj alklaku ĝin. Kaj tio, ia, faris bizara slide supren afero, kiu ne aspektas ke alloga. Ĝenerale, ili aspektas bela agrabla. Mi divenas, tiu - por iuj kialo - ne. Mi nur faras fade out tiom vi povas rigardi ke tro. Multe pli bela. 

Kaj poste, se mi malfermos la Javascript konsoli denove kaj ni volas vidi, kion Ĝi aspektas kiel kiam ni forvelki it in Nu, mi simple vokas forvelki sur ĝi. Kaj ĝi velkas re-ensalutu 

Simile, ni povus efektive ankaŭ pasas argumento por forvelki aŭ fade out, kio estas, speco de, la rapido de ĝi. Do ni iru antaŭen kaj diras, ke ni volas lin iri malrapide forvelki in Do mi supozas ke ankoraŭ similis bela rapida. Sed estis pli malrapida ol antaŭe. 

Tomáš REIMERS: Se vi volas trovi pli pri ĉi tiuj aferoj, denove, nur iri al la jQuery dokumentado, kiun ni donis al vi, kaj legu tra tiuj. Ili dokumentas siajn funkciojn nekredeble bone. 

MIKE Rizzo: okej. Do mi supozas ni revenu al tio. Kaj ni povas paroli pri nia lasta paĝo. Nu, ni povas fini kun Bootstrap. Kaj tiam ni devos malfermi ĝin por kelkaj demandoj. Kaj se vi uloj havas neniun ideoj kiuj vi ŝatus provi ĵeti supren, kaj vidu se ni povas apliki ilin kun Javascript rapide. 

Do vere rapide pri Bootstrap, kiuj estis aŭtomate inkluzivita en via lasta problemo metita en la CSS-dosierujo kaj reale ligita al en via header.PHP. Do vi povus esti aldonita klasoj kiuj estas difinita ene Bootstrap al ĝi. Kaj tio estus aŭtomate styled tiuj aferoj laŭe. 

Tomáš REIMERS: Do Bootstrap estas tre magia afero estas kreita de la homo ĉe Twitter. Kaj kion ĝi signifis fari estis - antaux retejoj estis vere malfacile fari aspektas bela, precipe kiam ni havis multe da komunaj eroj. Do multe da butonoj en la retejo rigardis la sama. 

Multa teksto kampoj povas esti farita al aspektas pli bone ol la norma teksto kampo vi probable scias el vere malnovaj retejoj aŭ vere malbone farita TTT-ejoj, kiuj apenaŭ aspektas kiel laŭvorta teksto skatoloj sen ajna formo de teksto ombro aŭ ia ajn bela konturo. Do kio Bootstrap faris estis ĝi diris, estas bone, Ni havas multon komunan stiloj. Kial ni ne faru unu komuna aro de CSS kaj komuna aro de JavaScript kiel nu, kio povas stiligi ĝin kiel estas kaj kio povas doni homoj aĵojn kiel guto malsupren menus, kiu povas doni al homoj aĵoj kiel modals. 

Modala estas kion popoj super la paĝon kiam ajn ĝi estas strikte parolante io, kiu detenas plui interago ĝis vi interagas kun ĝi. Io kiel ĉi tio, ĉu vi certas vi volas forigi ĉi tiun aĵon? Vi ne povas vere fari ion alian ĝis vi diros jes aŭ ne. 

Necesis ĉion ĉi kaj tio pakitaj ĝi kune kaj diris: ĉi tie ni iru. Homoj povas nun uzi ĉi. Kaj vi povas trovi ĝin sur ĉe getbootstrap.com. Ĝi aŭtomate inkludas ene via lasta problemo metita. Kaj vi estas pli ol bonvenaj uzi ĝin en via fina projekto. Kaj se vi volas sekvi tiun ligas akiri Bootstrap. 

Vi vidos tie estas la Bootstrap CSS-ejo. Vi vidos Bootstrap. Kaj se vi rulumu suben, vi vidos kiel elŝuti ĝin, kiel instali ĝin, kaj tiel plu. 

MIKE Rizzo: Kaj vi povas ankaux, Interese, personecigi ĝin estos ajn specon de temoj ke vi deziras. Mi scias, ke estas io mi faris por mia fina projekto, kiam mi prenis la klaso Estis personigi ĝin. Malsama versio de Bootstrap ke havis malsaman koloron skemo kaj diversaj formoj de iu malsamaj aferoj. Mi do kuraĝigas vin ludi kun tio. Ĝi estas speco de amuze fari. 

Tomáš REIMERS: Rigardante tra la supron denove, ĝi estas tre simila al la Tiparo Awesome ejo. Multa dokumentado komenciĝos ŝajni simila kiam vi havas vidis sufiĉe de ĝi. Do ĉi tie ni havas la CSS komponanto de ĉi. Kaj vi vidos kiel gxi povas stiligi aferojn. Do, se vi klakas sur la tabeloj, por ekzemplo, vi povas tuj fari tablo bela per simple aldonante la klaso tablo al ĝi. 

Sama por cxi butonoj. Se vi simple aldonu la klaso BTN kaj BTN default aŭ BTN primara, vi povas akiri iun el tiuj butonoj kun tiuj antaŭ-farita stiloj. Kaj tiam, se vi serĉas ion pli kompleksa ol simple restyling kion w jam havas, trans la Javascript langeto trans la supro ni havas faskon de komponantoj. 

Do ĉi tie ni havas transiroj, modals, dropdowns, taboj kaj konsiletojn. A tooltip estas kion popoj supren sub via muso, kiam vi ŝvebi je io. Popovers, garde, butonoj, faldeblan akordionoj estas kion ili estas kutime nomata. Carousels, kiu flip tra kiel bildoj. 

Do tiuj estas la komponantoj de Bootstrap. Mi kuraĝigas vin tre iru rigardi ilin. Tie estas JavaScript komponanto kaj CSS komponanto. Sentu vin libera uzi ilin kiel vi volas. Ni ne tuj iru tro multe en ilin ĉar ni sentas la dokumentado estas vere bone farita. Kaj jes. Ĉu vi havas ajnajn demandojn pri tio? 

MIKE Rizzo: Do ​​kiel estas vere rapida flanko, la dezajno de ĉi tiu retpaĝo, ke Ni rapide kunmetis por tiu prezento estas efektive farita uzante Bootstrap. Kiel vi povas vidi, kiam oni klaku sur tiuj malsamaj langetoj, ni neniam vere lasante tiun fluon index.html paĝo. Do kion ni havas estas malsamaj divs ene de ĉi index.html. Kaj tiam, kiam ni alklakas malsamajn langeton, ĝi estas ĵus ŝanĝanta kiun onia ekmontrigxo. 

Do ĝi laŭe positions ilin, ŝanĝu la HTML de la paĝo, por ke la nunan langeton estas markita kiel aktiva tiom aperas malsame kaj rigardojn vere bela. 

Tomáš REIMERS: Por ke la tuto farita sen ni skribas preskaŭ ajnan CSS. Ni ankaŭ vidas kaplinio trans la supron, kiu la koloroj estas per ni. Sed la efektiva metante ĝin sur la supro de la paĝo kaj farante ĝi skribrulaĵon estis Bootstrap. Kaj tiam eĉ por alia biblioteko - tiu ne estas unu parolis pri nur unu vi povas Guglas se vi volas. Tio nomiĝas prettify.js. Kaj tio estos la sintaksan kolorigon via kodo cxar vi uzas ambaŭ CSS kaj Javascript. 

La lasta afero ni volas paroli pri antaŭ ol ni liberigos vin en la mondo rigardi bibliotekoj elkompreni kiel uzi ilin kaj, espereble, legu dokumentaron kaj trovu kion vi bezono estas kiel trovi bibliotekoj. Do la unua estas ke ni estas apenaŭ tuj puŝi Google. Iru al Google. 

Tio laŭvorte kion ni faros kiam ni bezonas fari ion estas ni Google. Is there a JavaScript biblioteko kiu mi permesas manipuli tempon en utila maniero? Do, se mi scias ke kelkaj uzantoj kreis konton tie, kaj tio estas la nuna tempo, kiom mi povas kalkuli la malsamojn kompare kun tio, sen devi kalkuli mem? Do tiu estas efektive komunan aferon, Javascript tempo biblioteko. Kaj tie ni Moment.js-- la plej populara. 

Se ni bezonas bibliotekon por manipuli iu kiel koloro por povi generi faskon de hazarda koloroj - eble, por generi stilo aŭ io - ni povis Guglas iu kiel Javascript koloro biblioteko. Kaj mi certas ni pop kun mil kaj unu el ili. Vi plene rajtas tralegi ilin. 

Do plej aferoj - kiam vi trovos ilin - iras esti loĝigita en unu el la ejoj kiujn gastiganto kodo. Ili estas kelkaj popularaj. La plej popularaj, per nun, estas github.com. Kaj se vi iros al GitHub ĝi estas reale kie normaligi estis gastigita. Do se vi volas reiri al tiu. Montru ilin ke. 

MIKE Rizzo: Kaj tio estas efektive kie tio estas loĝigita tro, se vi rimarkis. 

Tomáš REIMERS: Jes. Do, se vi transiras, por normaligi kaj iru al la GitHub. Ĉu estas kiu? 

MIKE Rizzo: Tio kateto afero Estas la GitHub simbolo. 

Tomáš REIMERS: Ho. Do GitHub uzas metodon nomitan Git al vendejo kodo. Ĉu vi ne scias, kio tio estas aŭ ĝi timigas vin, ke estas bone. Vi ne bezonas scii kion Git estas ĉar GitHub havas Elŝutu butono ĉe la malsupro pravas. 

La alia utila afero scii pri GitHub estas plej produktoj havos legas min. Kaj se ili ne havas retpaĝon, la legu mi reparolos pri tio, kiel vi instali ĝin, kiel vi uzas ĝin, kio faras, kaj tiel plu, kaj tiel plu, kaj tiel plu. Kion ni esence estis promenante vi tra. 

MIKE Rizzo: Interreto La lasi. 

Tomáš REIMERS: Tio estas bone. La lastaj du aferoj ni volis paroli pri - Ni parolis pri Git - Estas troubleshooting. Kaj ĉi tiu ne estas tiel gravaj por La fina produkto kiel ĝi estas kiam vi lasos 50. Kaj kiam vi kuros en produktoj efektivigo bibliotekoj aŭ efektivigo via propra projekto, vi tuj havi demandojn aŭ vi estas iri por serĉi demandoj. 

Denove, Guglas ĝin. Tio laŭvorte kion ni faros. Tiu tuj sonos stulta. Sed laŭvorte, ni Guglas ĝin. Kaj cetere, unu el la unuaj aferoj vi kutime kolizii estas stackoverflow.com, kio estas mirinda demandon kaj respondon vidpovon. 

Estas mirinda tiel ĉar vi povas sendi al la demandoj kaj serĉi respondoj sed ankaŭ ĉar gxi jam havas multajn pre-popolita enhavo tie. Do kutime kiam vi Guglas programado demando ene de la unua paro batas vi eble jam kuras en ĝin dum via problemo aroj. 

Kaj tiam, la lasta vere mallonga afero Estas JSFIDDLE, kiu estas - hodiaŭ ni estis faranta multe da laboro kun Javascript HTML CSS. JSFIDDLE estas ttt app, kiu esence permesas preni viajn HTML, VIAJ Javascript malsupro maldekstro, kaj vian CSS supre dekstre. Kaj tiam ĝi povas krei rapidajn redonu de ĝi kaj vidi kiel ĝi interagas. Ĝi estas tre utila, kiam oni provas fari pruvo de koncepto kiel jen kiel vi volas fari falmenuo. Eble rapidan malkovri aŭ kio ajn. 

MIKE Rizzo: Do ​​ni iru antaŭeniris kaj klaku ĉi. Rapida noto - dum, antaŭ ni estis faranta je alklako. Rezultas JCorey Koreio havas ankaŭ konstruita en klako eventa traktilo ke uzas nur ĉar ĝi figuras vi estas tuj volas fari multon kiam vi volas klaku ion. 

Simile, tio ankaŭ havas ŝvebado. Sed por ricevi la plenan atingon de tiuj, rigardu la jQuery dokumentado kaj agu. Mi faris iom stulta tie. 

Tomáš REIMERS: Do mi havas vere rapida programo ĝuste ĉi tie, kion diras butono sur klako. Tiam ni havas por buklo. Por i estas malpli ol 404. Ĝi estas ĝuste tuj pop up tiuj garde mesaĝoj. 

MIKE Rizzo: Kaj kio estis la kodo 404 staris en HTML? Ĉu iu memoras? Ne troviĝas, dekstre. Chrome ankaŭ aldonis ĉi neta afero, kie vi povas - 

Tomáš REIMERS: Pro homo kiel Mike komencis fari ĉi tiun multe kaj ĝena uzantoj, kiu permesas vi vidi informoj. 

MIKE Rizzo: Jes. 

Tomáš REIMERS: Ĉu ni havas demandojn pri tiu, pri JavaScript bibliotekoj, trovante bibliotekoj, aŭ kio ttt evoluo rigardojn kiel en la reala mondo? Ni kuras kontraux tempo. Do mi ne certas ni iras havi tempon por apliki krom se ĝi estas vere rapida. Ĉu ni bonon? 

MIKE Rizzo: Anything you guys ŝatus vidi vere rapidis, kiel, du minutoj aux malpli? 

Tomáš REIMERS: Anything Ni povas klarigi? Kiel skribi en - 

Spektantaro: [inaudibles]? 

MIKE Rizzo: Jes, do that's - 

Tomáš REIMERS: Vi povas nur bati Kontrolo-Aŭ en la paĝo. 

MIKE Rizzo: Ho, mi ne sciis tion. 

Tomáš REIMERS: mi pensas, jes. Kontrolo-U. Jes. 

MIKE Rizzo: Oh, tiom tio estas la kodo por la retejo. Sed se vi efektive volas elŝuti niajn dosieroj kaj ĉio, ĝi estas loĝigita sur github.com 

Tomáš REIMERS: oblikvo mia nomo - Tomas Reimers - oblikvo CS50 streketo seminario. 

MIKE Rizzo: Kaj vi povas trovi ĉiun tie. 

Tomáš REIMERS: Jen kion GitHub aspektas kiel, dum la vojo. Do denove, kiam vi vidos malfermita fonto projekto, tipe, ili devos esti legitaj Mi ekzistas, ke vi povas legi. Kaj se vi reiros, vi rimarkos, ke vi havas la elŝuta zip, kiu volas, vi permesas elŝuti la fonto kodo por inkludi la produkto en via propra afero. 

MIKE Rizzo: Jes, kaj se ni simple klaku sur la index.html vere rapide - 

Tomáš REIMERS: Vi vidos ĉi tie estas la fontkodon por nia retejo. 

MIKE Rizzo: Ankaŭ, mi forgesis premi dekstra antaŭe kun la granda tablo inkluzivita, sed estas ankaux tablo de chmods ke ni inkludis nur pro via klareco. Sed se ni rulumu tutan vojon malsupren al la fundo, ni ne vere faras tre tre kun la Javascript frandajxojn cxe cxiuj kun tio. Ĝi estas ekskluzive el ĉio alie, ke ni havis. 

Do dankon infanoj por veni kaj aŭskultante. Ni esperas ke tiu estis vere helpemaj. Se vi havas ajnan JavaScript rilatajn demandojn aux nur volas paroli pri kio alia kiel kion aliaj cool aferoj vi povas fari per JavaScript, ni amus paroli kun vi. 

Tomáš REIMERS: Se vi havas demandon pri via projekto, aŭ se tio povas esti adekvata, ni probable algluita ĉirkaŭe iom post tio. Sed alia ol tio, havi bonan semajnfinon. 

MIKE Rizzo: Jes, ĝui. See you guys. 

Tomáš REIMERS: See ya.