TOMAS REIMERS: Hi, tout moun. Non mwen nan Tomas Reimers. 

MIKE Rizzo: Apre sa, mwen se Mike Rizzo. 

TOMAS REIMERS: Nou se de nan CS50s TS. Apre sa, jodi a nou ap mennen seminè a sou JavaScript ak CSS pou apps entènèt. Si ou vle swiv ansanm, nan lyen ki dwat laba a. Epi ou vle mete l 'moute sou yon ti tan nan konpitè? 

Genyen lyen an. Li se yon sit piti, ki te gen lyen ki mennen nan tout resous ki nou pral yo dwe montre nou jòdi a epi tou li gen yon anpil nan enfòmasyon itil ekri pa nou li plis nan pwofondè lè ou ale tounen, epi ou ap eseye sonje sa egzakteman t 'nou di, ki sa ou te ap pale de, et setra. 

MIKE Rizzo: Tout dwat. Se konsa, kite a kòmanse. 

TOMAS REIMERS: Se konsa, ou vle kòmanse? OK. 

MIKE Rizzo: Yeah. Se konsa, nou premye te vle kòmanse avèk yon gwo BECA sou entènèt la ak pote kalite lè konsepsyon sit entènèt. Pandan ke prezantasyon sa a nou vle jwenn nan nan JavaScript yon anpil anpil pita sou, nou te vle kòmanse koupe ak jis, kalite, tankou gade je yon zwazo a nan sa ki yon sit entènèt se ak ki jan yo reflechi sou desine yon sou sit wèb pou kòmanse a. 

Se konsa, ou nèg, nan pwen sa a - ak li yo te Vandredi swa - ta dwe gen soumèt finans CS50 ou pwoblèm kouche. Èspere ke, sa ki te yon bon gou nan sa ki pwogram entènèt kapab. Men, isit la nou vle, kalite, bay nou yon lòt gou, kòm byen. 

TOMAS REIMERS: Se konsa, jis yo Rekapitilasyon sa ki k ap pase, lè ou tape nan URL ou a navigatè entènèt ou, ki URL vin leve je nan òdinatè a. Apre sa, nan òdinatè w lan konekte nan yon lòt òdinatè, ki gen tout pouvwa a ki sou sit wèb. OK, se konsa lè ou ale nan google.com, w ap konekte nan youn nan Google nan òdinatè, ki te gen nan dosye pou google.com. 

Li Lè sa a, mande pou yon dosye espesifik. Se konsa, si ou ale nan - Mwen pa konnen - example.com / index.html oswa / test.html, w ap ale nan mande pou ki dosye espesifik. Apre sa, sèvè a wèb la pral retounen li ba ou. 

Lè sa a, yon fwa ou ale nan ki dosye - yon fwa w ap òdinatè vin ke dosye - li an pral kòmanse yo bati yon paj entènèt. Se konsa, kounye a li gen dosye a HTML, ki se sòt de renmen an estrikti nan paj wèb la. Dosye a HTML te kapab konsilte tou Dosye CSS, ki defini nan style nan paj wèb la. 

JavaScript dosye, ki defini entèraksyon ak paj wèb la. Dosye Imaj yo, ki se jis imaj. Epi pètèt genyen lyen ak lòt dosye HTML, kote ou ka Lè sa a, vizite. 

MIKE Rizzo: OK, gwo. Se konsa, ou nèg gen tout, petèt, skrupulezman mete kanpe lame lokal ou a sou machin vityèl ou. Apre sa, ki jis, kalite, se lokal la domèn ki òdinatè w lan gen tout pouvwa a sèlman pou ou nan adrès pwòp IP ou an. 

Se konsa, nan sa, Lè sa a, ou ka ajoute nan li pwòp paj wèb ou. Mwen vle di, nan CS50 Finans, ou ta dwe gen te ajoute kèk paj HTML yo, ki se, sòt de, vlope nan pakè a PHP. Men, finalman, sa ki paj PHP ou yo te sorti te HTML. 

Men, panse tounen nan konmansman an anpil nan PSET a, nou te gen yo mete autorisations yo pou tout bagay, dwa? Se konsa, sa a jis fondamantalman pèmèt nou konnen ki moun ki ka li, ekri, epi pètèt egzekite chak nan dosye yo. Se konsa, nou ap ale nan fè yon rapid - NP? 

TOMAS REIMERS: Se konsa, nou ap ale fè yon Demo rapid. Se konsa, jis fè ou sonje, lè ou konekte ak òdinatè Google a - Nenpòt moun ki - epi mande pou yon dosye, òdinatè nan premye bezwen asire w ke ou ap otorize ki aktyèlman wè ke dosye w la oubyen li sa ranpli paske ou pa kapab jis mande pou nenpòt ki dosye sou sa òdinatè, dwa? Ki ta ka yon danje sekirite. 

Se konsa, dosye sou sistèm yo nou itilize, tankou sa a aparèy CS50, gen twa moun jeneral ki moun ki ka gen autorisations nan yon bagay. Premye a se aktyèl la pwopriyetè a di dosye-a. Dezyèm nan se gwoup la ki dosye a ki dwe nan. Nou pa pwal yo konsantre twòp sou sa. Epi bagay la pase a se, sòt de, tankou nan mond oswa tankou tout lòt moun ki nan pa espesifik ak sa yo ki dosye epi yo pa gen nenpòt dwa komen sou li. 

Se konsa, si nou gen pwopriyetè a, gwoup, ak Lè sa a lemonn. Lè sa a,, pou chak nan gwoup sa yo, ou ka gen youn nan twa autorisations, OK, oswa plizyè nan yo. Ou ka gen otorizasyon Li. Ou ka gen autorisations dwat. Apre sa, ou ka gen egzekite autorisations. 

Se konsa, an tèm de kalite dosye aktyèl, li pèmisyon, se tankou aktyèlman lekti sa ki nan dosye a. Yon pèmisyon dwa ap ekri di dosye-a. Yon egzekite pèmisyon ap kouri a ranpli tankou ou fè lè ou kouri youn nan CS50 pwojè ou a. 

Se konsa, lè nou ap panse sou dosye tankou lè nou bezwen li yon HTML ranpli, ki bezwen yo dwe mond lizib, dwa? Assume, tou mèt kay la vle pou kapab modifye ki dosye. Se konsa, mèt kay la nan ale nan bezwen li ak ekri autorisations. Yo pa reyèlman bezwen egzekite. 

Group, nou pral trete a menm jan ak mond la pou kounye a. Se konsa, yo bezwen otorizasyon Li. Men, yo pa bezwen ekri oswa egzekite autorisations. Epi, koulye a, si nou panse tounen nan ansyen PSETs, ki sa nou reyalize se sa yo kalite nan gade tankou binè, dwa? 1 kanpe pou repons lan se wi. 0 pou pa gen okenn. E nou ka aktyèlman tradui sa a binè. 

Se konsa, 110 nan binè ta dwe 6. 100 ta dwe 4. Menm ak nan lemonn. Se konsa, nimewo a ou ta jwenn pou la autorisations pou sa a ta dwe 644. 

MIKE Rizzo: Men, si ou panse tounen nan lè ou chmoded yon bagay, mwen kwè yo te bay nan pwoblèm nan mete an egzanp sou ki kote ou ta ka fè yon bagay tankou chmod 644 ak Lè sa a, pote non yo. 644 nan lè sa a, ou kapab kounye a wè dirèkteman kote ki soti nan. Se konsa, èspere ke ki fè ke yon ti kras plis klè. 

Lè sa a, pou klè ou nèg la - Oh yeah, isit la sa a se ankò. Se konsa, 600 Lè sa a, ta jis pou egzanp lan nou te moute isit la kote mèt kay la gen li ak autorisations dwa pandan y ap gwoup ak mond pa gen okenn autorisations jwenn aksè nan dosye a. 

TOMAS REIMERS: Lè sa a, nou gen yon rapid lis autorisations komen. Se konsa, repèrtwar, ou ta vle ki aktyèlman chmod 711. Quick sou kote - pou yon anyè ki gen ègzèkutabl pèmisyon vle di yo dwe kapab yo louvri anyè a. Imaj, CSS, JavaScript, bezwen HTML 644, paske, fondamantalman, mond lan bezwen li autorisations. 

Apre sa, PHP, kote ou mesye te wè malgre ke nou pa pral pale sou li estrikteman se tipikman chmoded ak pèmisyon 600 paske li te kouri avèk autorisations yo nan mèt kay la. Omwen sou aparèy la. 

MIKE Rizzo: Se konsa, pa si ou fè espesyalman presize ki kalite dosye ou vle nan aktyèlman mete moute prezantasyon sa a - nou te gen yon pwoblèm ak sa a paske tout bagay pa te chmoded kòrèkteman - w ap ale nan jwenn, kalite, yon entèdi erè ki sit entènèt la pa gen aktyèlman pèmisyon jwenn aksè nan tou sa dosye ou vle li jwenn aksè nan. Ak nan kou, ki ka fiks - tankou nan pwoblèm mete - pa chanje autorisations kòmsadwa. 

TOMAS REIMERS: Apre sa, kòmantè ki sot pase a pou devlopman byen vit lokal se - nou fè sa a leve, men nou jis te vle yo pote l 'ankò - si ou mande pou yon sèvè - lame Se konsa, lokal yo, pou egzanp, com oswa kèlkeswa sa. - epi ou pa presize yon dosye espesifik, dosye a ki se òdinatè w lan pral pou mande pou yo rele index.html. Oswa si ki pa egziste, index.php. 

Fre. Se konsa, sa se sèlman yon Rekapitilasyon nan tout bagay, èspere ke, ke nou te kouvri nan seksyon, ak konferans, ak byen lwen tèlman nan CS50. Epi, koulye a nou pral kòmanse pale sou espesyalman bibliyotèk yo. JavaScript ak CSS bibliyotèk pou apps entènèt. 

Se konsa, yon rezon ki fè rapid rezon sa a genyen bibliyotèk ki Programming - gen nan yon anpil nan pwoblèm nan pwogram yo, ki kenbe eklate moute ankò, li ankò, li ankò. Ou ka avi ke yon anpil nan sit entènèt bezwen kapasite nan gen gout desann meni, pou egzanp, oswa si ou bezwen kapasite nan gen yon bouton trè estanda style, ki pa kapab bagay la pi fasil. Kounye a ke ou kòmanse jwenn nan HTML, ou reyalize ke bouton kapab aktyèlman gade vrèman lèd si ou pa fè anyen. 

Se konsa, te yon anpil moun ki ekri rele bibliyotèk yo. Ak nan kontèks sa a, yo ap yo te rele tou estrikti. Nou pral sèvi ak nan de interchangeable. Apre sa, ki sa yo ye se yo ap fondamantalman moso premade nan kòd - swa CSS oswa JavaScript - ki pran yon anpil nan la ekip ou gen nan kodaj. 

Se konsa, yo pre-defini yon pakèt moun sou kou oswa pre-defini yon pakèt moun sou fonksyon pou Ka JavaScript a, ki ou ka rele pita sou. Lè sa a, ou kapab, sòt de, jwenn aksè nan Kòd sa a san yo pa li te gen fè anyen. Yon egzanp nan bibliyotèk la te CS50.H. Sa ki te yon bibliyotèk nou te ba w tounen nan semèn yon sèl, ki pèmèt ou fè bagay sa yo tankou ki GetInt ak GetString san yo pa gen ekri nenpòt ki Kòd tèt ou. 

MIKE Rizzo: Tout dwat. Se konsa, isit la, jis tankou nou te gen ladan yo nan nou an c depoze diferan nan bibliyotèk, nou menm tou nou ta dwe gen ladan nan HTML nou an depoze bibliyotèk diferan. Pou egzanp, si nou te vle genyen ladan yo yon JavaScript bibliyotèk espesifik isit la, petèt, yon sèl ke nou te ekri tèt nou kòm li nan lokalman anime rele script.js, nou jis itilize notasyon sa a. 

Se konsa, nou gen egal di ki kalite script JavaScript sous egal JavaScript.js. Men, si ou panse tounen nan CS50 ou pwoblèm finans mete, si ou gade nan header.php nan dosye a modèl, ou ta dwe gen pou wè kèk nan sa yo enkli ladan li. Se konsa, yon sèl sa a premye - Scripts yo - se ki gen ladan yon bibliyotèk JavaScript. Ki gen ladan yon bibliyotèk CSS se yon ti kras diferan. 

Isit la, olye pou yo script la tag ou bezwen tag nan lyen. Lè sa a,, kalite a CSS tèks se yon ti kras diferan. Ou pa toujou gen genyen ladan yo style Rel fèy. Men mwen panse ke li la, jeneralman, bon pratik. 

Lè sa a, finalman, href a, ki ou pwobableman te wè nan ATAGs ou pou ki lye ak nan lyen diferan jis Endike lyen an nan ki kote yo jwenn sa a. Pou egzanp, si nou te vle genyen lyen yon diferan bibliyotèk - kite yo jis di - ki te viv nan styles.css. Apre sa, nou te vle genyen lyen ki nan sa a, se anime sou entènèt la, nou ta kopi sa a. Lè sa a, kole li nan tou sa nou gen dwa isit la pito. 

TOMAS REIMERS: OK, èspere ke ou mesye yo deja abitye ak ki jan yo genyen lyen CSS. Ou te fè sa a sou dènye seri mawon ou. JavaScript, kèk nan nou petèt genyen yon ti eksperyans avèk yo. Gen kèk nan ou pa ka. 

Se konsa, pou kounye a, konnen ke yon dosye JavaScript sa a se anpil tankou yon dosye CSS nan sans ke ou ka genyen lyen nan li oswa ke ou ka gen ladan li intern. Apre sa, li pèmèt ou script bagay sa yo. Apre sa, nou pral mache ou atravè yon ti kras nan JavaScript pita sou. 

Se konsa, lè l sèvi avèk yon bibliyotèk - yon fwa ou te enkli li, li la kòm senp tankou literalman rele nan fonksyon oswa ajoute nan non klas li. Bagay la pase nou vle pale sou an tèm de bibliyotèk - ak sa a se plis nan yon nòt teknik - se yon sous louvri lisans. Se konsa, lè ou jwenn sa yo bibliyotèk reyèl, ou ka panse a kesyon renmen se li OK pou m 'se jis lè l sèvi avèk kòd yon lòt moun nan, espesyalman paske se sa yon bagay nou anpil te di ou pa fè nan kou sa a. 

Se konsa, nan ka a nan louvri sous lisans, yon anpil nan devlopè - yon fwa yo te ekri yon bibliyotèk, yon ki yo panse ta ka itil bay lòt moun - pral pibliye li nan entènèt la epi remèt li yon lisans. Apre sa, yon lisans fondamantalman di mwen menm Avèk prezant sa mwen bay otorizasyon nan lòt moun sèvi ak pyès sa a nan lojisyèl ak sòt ki anba la a nan estipilasyon. 

Nou te enkli yon ap mennen nan yon sit bon ede w konprann lisans yo nan ka ou kouri antre nan yo. Estipilasyon komen yo se bagay sa yo tankou w ap akeyi yo sèvi ak bibliyotèk m 'konsa lontan ke ou ban m 'kredi. Ou se Byenveni nan sèvi ak bibliyotèk m ' toutotan lè li kraze ou pa blame m '. Ou se Byenveni nan sèvi ak bibliyotèk m 'tout tan kòm ou pa sèvi ak li nan fè lajan pou tèt ou. Sa yo se kalite komen estipilasyon. 

Pou sa CS50 pwojè final yo, yo pa ta dwe super ki enpòtan paske pwojè sa yo ke ou nèg sèvi ak yo pwobableman Olye de sa, sòt de, li te ye. Men, lè ou aktyèlman al deyò nan a mond epi yo kòmanse lè l sèvi avèk bibliyotèk, ki pouvwa oswa pa pouvwa dwe kòm byen aplike kòm kèk nan yo menm ki pi popilè nou ap yo pral ale atravè tout. Li nan bon pou kapab konprann lisans sa yo ak konprann sa yo vle di. Apre sa, pral tounen. 

MIKE Rizzo: OK. Se konsa, kounye a deplase sou egzanp nan aktyèl CSS. Nan pwen sa a twò lwen, ou ka pa gen rankontre sa a. Men, ou ta ka genyen rankontre l 'nan lavi chak jou ou kote yon bagay ki sanble yon fason sou yon sèl navigatè ta ka pa gade menm bagay la tou fason nan yon lòt navigatè. 

Se sa yo rele navigatè navigatè konpatibl. Apre sa, de pli zan pli li a vin pi plis ak plis nan yon pwoblèm, espesyalman kòm navigatè pran pi plis ak plis libète aplike bagay yo jan yo vle. Se konsa, simonte sa a, gen aktyèlman se yon bibliyotèk gwo rele Normalize.CSS. 

TOMAS REIMERS: Nou gen ladan lyen an. Nan pwen sa a, li bon si ou gen laptop ou nan gen gade nan sit la. Lèfini, nou ap bay sa a ba ou dwa kounye a tou senpleman paske final la CS50 pwojè ki aktyèlman ale nan mande w aplike li Menm jan an tou ak nan navigatè. 

Se konsa, jis kenbe nan do a nan ou tèt, sa a se yon bibliyotèk bèl bagay paske li pral, sòt de, estandadize bagay sa yo. Nan Firefox, yon bagay ka montre kòm youn pixel a gòch la. Lè sa a, Chrome ka deside ki aktyèlman ki sa ou te vle di te 10 piksèl sou bò goch la. Epi ou vle estandadize sa a. Nòmalize pral aktyèlman fè yon reyèlman bon travay pou ede asire w ke sit ou sanble menm bagay la tou nan tout navigatè. 

MIKE Rizzo: Se konsa, si nou te vle jis klike sou link ki vrèman byen vit ak montre ou konnen sa ki ki sanble ak, ou ka telechaje li lè l sèvi avèk la jeyan Download bouton. Oswa mwen ankouraje ou li plis enfòmasyon sou li pa klike sou lyen sa a nan pi ba a kwen bò dwat. 

TOMAS REIMERS: Men, si ou aktyèlman klike sou Li Plis dwa gen - klike sou sous la sou GitHub - ou pral aktyèlman wè sous la louvri lisans sou LICENSE.md dwa gen. Apre sa, ou pral wè isit la se a trè popilè lisans MIT. Yon fwa ankò, si w ap li tèks la, ou pral kapab jwenn li sou sit la nou referans anvan epi yo dwe kapab konprann li san yo pa gen li nan jagon legal la. 

MIKE Rizzo: OK, gwo. Se konsa, sa a, se nòmalize. Nou te vle ba ou ki vrèman byen vit. Oh, ou gen yon kesyon? 

ODYANS: Se konsa, lè ou desann li, ou jis swiv ki Kòd yo ke yo gen anba bouton an Download? 

TOMAS REIMERS: Wi, se konsa lè ou download - 

MIKE Rizzo: Oh, sa a, se yon pwen gwo. Se konsa, kesyon an se te ki jan fè nou aktyèlman desann li? Se konsa, si nou klike sou lyen an, nou wè ke li aktyèlman Pops leve nan kòd la sous. Se konsa, yo fè sa, sa nou te kapab se jis klike sou Save Kòm. Save Kòm e ke yo ta dwe pote yo moute yon dosye. Lè sa a, nou ka chwazi pou konsève pou li kòm normalize.CSS. Lè sa a, ou ta dwe genyen lyen l 'nan - 

TOMAS REIMERS: menm jan an ou lyen an nan nenpòt ki lòt dosye. Apre sa, yon fwa ou genyen lyen l 'nan, sa ki nan gwo sou nòmalize se li pral aktyèlman pran swen nan tout difisil la travay pou kont li. Sa vle di ou pa gen ajoute nenpòt ki klas yo. 

Ou pa oblije fè anyen etranj. Li pral nòmalize san yo pa ou fè anyen pi lwen. Wi, ou bezwen mete non li. Google Chrome se pa sa reponn. 

Jis yon rapid sou kote - Mwen remake nou te sote nan sa a. Rès la nan prezantasyon sa a se pral gen yon BECA rapid. Yon sondaj nan bibliyotèk yo. 

Fondamantalman, ki sa yo ye. Ki sa yo fè. Ki jan yo ap itil. Ki jan ou ta ka aplike yo. Si ou vle kòmanse ap gade yo, sa yo ansanm, ak lekti nan yo, mwen ta trè ankouraje sa. 

Sinon, w ap akeyi tou nan kòmanse Téléchargez yo epi ki gen ladan yo nan yon je jis yo wè kisa yo gade tankou oswa sa yo fè si ou gen laptop ou nan devan ou. Si ou pa, ou se Byenveni nan kenbe koute nou pale. Nou pral kenbe pale. Epi nou gen tan nan fen a, èspere ke nou pral aktyèlman jwenn nan ki montre ou sa kèk nan bibliyotèk sa yo sanble. 

MIKE Rizzo: Cool. Tout dwa, se konsa kounye a kite a pale sou Font pè. 

TOMAS REIMERS: Se konsa, Font Awesome se yon reyèlman pwòp sit, sitou pou moun nan nou ki gen mwens atistik talan. Inyore Font la Non Awesome, li bay ou yon pakèt moun sou ikon yo, ki se trè itil. Se konsa, yon anpil nan fwa ou pral aplike yon Icon ou ka vle tankou yon x bèl Se konsa, ke ou ka fèmen yon bagay. 

Oswa ou ka vle kèk kalite Edit bouton ak yon desen kreyon tankou tout lòt moun te genyen an. Epi sa a, lè ou aprann ke desen sa yo ikon yo ka trè fatigan ak difisil. Font Awesome - si ou aktyèlman ale nan sit la - ba ou yon anpil nan ikon anba ikon yo nan tèt la. Yeah, jis tèt la. Li pral ba ou yon anpil nan ikon pou gratis. 

Se konsa, isit la ou wè nou gen bagay sa yo tankou yon asterisk yo, travès, yon boulon zèklè, yon kalandriye, yon ensèk, yon liv, et setra. Sa a kapab trè itil. Wout la ou gen ladan sa a se ou gen ladan yo literalman dosye a CSS. Apre sa, apre ou te enkli dosye a CSS, sa ou kapab fè se ou kreye yon tag rele I. Li satands pou Icon avèk klas la FA kanpe pou Font pè. Lè sa a,, kèlkeswa sa klas ou vle. 

Se konsa, si mwen te vle yon icon nan plis sa a kare dwa isit la, mwen ta bay li klas FA la. Lè sa a, FA tirè plis kare tirè. 

MIKE Rizzo: Cool, OK. 

TOMAS REIMERS: Lè sa a,, dènye CSS la bibliyotèk nou vle jwenn nan nou se ap eseye kenbe li minim sou CSS bibliyotèk paske nou reyalize nan tit nan prezantasyon sa a se JavaScript Bibliyotèk. Men, nou te panse ke nou kapab menm jan tou entwodui ou nan lòt bibliyotèk yo pandan ke nou te pale sou bibliyotèk yo. 

Li nan Google entènèt Polis. Ak sa ki Google Polis entènèt pèmèt ou dwe fè se ajoute polis yo sou sit entènèt ou a, ki se yon fason reyèlman fasil a fè l ' bèl ak yo fè distenksyon ant mete ou soti nan tout lòt moun a se si li gen yon font bèl oswa si li gen yon bèl koleksyon polis. Google entènèt Polis se bèl kontrèman ak lòt bibliyotèk nan sans ke li nan yon reyèlman gide enstalasyon yo. 

Se konsa, si ou swiv lyen ki, li nan google.com / polis, mwen kwè. Si ou swiv sa a, ou ka chwazi font ou. Ou ka chwazi sou bò gòch la soti nan epesè, pant lan, et setra. Lè sa a,, yon fwa ou te chwazi a, ou ka klike sèvi ak rapid. Dwa a. Anba dwat nan bwat la. 

Lè sa a,, desann. Premye a tout, yo ba ou CSS la ki ou bezwen aktyèlman genyen lyen ak li. Li nan dwa gen. Ou ka jis kopi epi kole ke pous Epi bagay la bon sou sa a se yon sèl ou pa aktyèlman menm bezwen Download dosye a. 

Ki sa ki li pral fè se li pral Link to vèsyon Google a nan li. Se konsa, tounen nan ki sa sa vle di. Sa vle di lè yon itilizatè downloads dosye ou - downloads paj HTML ou - HTML ou paj ki pral referans sa a ranpli. 

Se konsa, lè sa a, òdinatè w lan k ap pase yo wè, oh, li la anime sou google.com olye pase sou theirsite.com. Kite m 'ale mande Google pou sa dosye. Lè sa a,, li pral genyen ladan yo li prèske kòm si li te yon yon pati nan pwòp sit ou. 

TOMAS REIMERS: Cool. Apre sa, yon fwa ou gen ladan yo ki, lè sa a gen ladan l 'nan CSS ou a, li ba ou liy a vrè. Se konsa, ou mete fanmi an font pwopriyete egal a non an nan font ou. 

MIKE Rizzo: OK. Se konsa, nou jis fini ak CSS. Se konsa, kèk nan ou ka panse, byen, nou te gen kèk CSS sou CS50 Finans. Men, bibliyotèk CSS te demaraj. Nou aktyèlman gen ladan demaraj yon ti kras pita sou anba JavaScript paske avèk bibliyotèk la demaraj CSS tou vini avèk yon anpil nan JavaScript ki Demaraj oswa Twitter - ki te fè demaraj - sèvi ak jere tout CSS yo. 

TOMAS REIMERS: nenpòt moun ki gen nenpòt kesyon byen lwen tèlman sou CSS an jeneral? Nou sa ki bon? Pè. 

MIKE Rizzo: pè. 

TOMAS REIMERS: Se konsa, k ap deplase sou JavaScript. 

MIKE Rizzo: Se konsa, nou vle pale sou jQuery yo kòmanse avèk yo. Gen yon moun tande pale de jQuery anvan oswa te itilize li? Yeah, yon koup? Se konsa, si ou jis travay avèk natif natal JavaScript, ou pral jwenn tèt ou tape yon anpil nan seleksyon long anpil. Se konsa, sa jQuery fè se li bay yon pakè bèl pou JavaScript a lang ki pèmèt ou fasil chwazi ak manipile eleman diferan nan modèl la objè dokiman an nan paj entènèt oswa Dom a, ki mwen panse ke ou nèg te tande nan nan delivre lekti nan pwen sa a. 

TOMAS REIMERS: Si ou pa janm tande pale de li oswa si ou pa gen gade konferans ankò, Dokiman objè ki gen konpòtman egzanplè a se fondamantalman fason bagay yo ap reprezante. Se konsa, HTML sòt de sanble tankou yon pyebwa lè ou aktyèlman rale yo mete deyò. Ou gen eleman ki HTML sou tèt. Ou gen tèt la ansanm ak tout kò. 

Lè sa a,, nan ke ou gen tout lòt bagay. Sa a refere yo kòm Dom la - Dokiman objè ki gen konpòtman egzanplè. Se konsa, yon modèl ki reprezante objè ki nan dokiman an se yon fason fasil yo panse sou sa. Ak youn nan bagay an gwo sou jQuery se li vrèman fè travès ki ak manipile eleman ki nan ki ekstrèmman senp. 

Se konsa, ki senp, an reyalite, ke majorite nan JavaScript bibliyotèk oswa si se pa an majorite, majorite nan Grand nan yo menm ou pral wè aktyèlman mande pou jQuery Se konsa, yo ke yo ka kouri tèt yo tou senpleman paske si ou pa t 'gen jQuery, ou ta gaspiye anpil tan ap eseye figi konnen kouman ou chwazi sèten eleman ak kouman yo fè lòt bagay. Ak lòt bagay la sou jQuery gwo se ke li la kwa navigatè konpatib. 

Se konsa, sonje tounen lè nou te di ke se pa tout navigatè aplike bagay yo menm jan an? Sa a se vre menm nan JavaScript. Apre sa, youn nan gwo bagay sa yo sou jQuery se ke li pral detekte nan navigatè ak detekte nan ki apwopriye metòd. 

Se konsa, si ou bezwen chwazi yon eleman, Internet Explorer ka di w ap sipoze fè fason sa a. Firefox ka di repons ki kòrèk la fason se yon fason sa a. jQuery pa pran swen. Lè ou di jQuery yo ka chwazi yon eleman li pral konnen ki jan li nan sipoze fè li nan navigatè a nan itilizatè se kounye a nan, ak Lè sa a, fè li fason sa. 

MIKE Rizzo: Se konsa, kite a pa pale sou l 'a jQuery yon ti kras. Jis tankou PHP, jQuery gen yon patikilye tendres pou siy a an dola. Se konsa, w ap jwenn ke nenpòt ki jQuery - byen, se pa tout. Ou ka pafwa ranplase a an dola siyen ak pawòl Bondye a jQuery. Men, jeneralman, jis paske li nan ki pi kout, nenpòt lè ou wè jQuery ke yo te itilize li pral ak yon siy dola. 

Se konsa, isit la nou ap jis ki montre yon nan konmansman seleksyon pou yon eleman nan Dom la. Isit la, nou gen siy a an dola ki te swiv pa parantèz louvri, epi Lè sa a, quotes. E nan lespas de quotes yo ale seleksyon nou an pou eleman sa yo diferan. Jis tankou nan CSS, nou bezwen seleksyon kapab style eleman diferan nan paj la. Moun sa yo ki seleksyon diferan tradui egzakteman nan jQuery ak JavaScript, pou pati ki pi. 

Se konsa, isit la nou gen yon foo dot. Se konsa, si ou sonje soti nan konferans, dot a jis vle di klas la. Se konsa, nou ap chwazi eleman ak foo klas la. Se konsa, si mwen ale pi devan epi louvri moute nou an JavaScript konsole isit la vrèman byen vit jis montre li, si mwen jis tape nan siy dola, nou wè ke li nan kèk fonksyon ki vini leve. Apre sa, li jis defini nan jQuery. 

TOMAS REIMERS: Pou moun nan nou abitye, konsole a se yon zouti nan Chrome, ki pèmèt ou a, fondamantalman, kouri JavaScript sou la kounye a paj. Sa a ou ap jwenn ekstrèmman itil lè w ap aktyèlman debogaj epi ou bezwen yo dwe tankou, ki sa ki aktyèl la valè nan kèk varyab mondyal oswa sa ki se yon lòt bagay? Li nan kalite tankou gdb avèk eksepsyon nan ke ou ka aktyèlman manipile eleman nan paj la ak li nan yon tan pi fasil. Epi tou li pa, fondamantalman, tcheke nan avè n 'anvan li fè sa anyen. 

Se konsa, Lè nou konsidere ke, gdb ta ka tankou yo, se ou asire w ke ou vle kouri pwochen etap la? Konsole a nan reyèl. Se konsa, kòm paj wèb la se rann ak fè tou sa li ap fè, nan konsèy la tou kouri ansanm ak li. Apre sa, ou ka mete kòd prete nan ki konsole, ki pral dwe kouri sou paj la. 

MIKE Rizzo: Se konsa, yo antre nan konsole a, Mwen devine mwen ta dwe yon ti tan mansyone ki jan fè sa. Nan pwoblèm ki sot pase yo ou ka genyen itilize Chrome a enspekte eleman fonksyon oswa gade paj sous - ak moun ki gen aksè pou jis pa dwa klike sou paj la oswa yon espesifik eleman ak ap fè swa enspekte eleman oswa gade paj sous. Nou kapab tou jwenn aksè nan JavaScript a konsole dirèkteman pa w ap chwazi enspekte eleman. Se konsa, Lè sa a, ou jis frape konsole sou bò ki pi lwen dwat. 

Sinon, ou te kapab tou ale nan kwen siperyè a men dwat, ki se koupe sou ekran sa a kote li gen twa kenbe travès yo orizontal. Epi ou desann nan zouti ak Lè sa a, JavaScript konsole isit la kote ka wè - omwen sou Windows - chemen kout la se kontwòl Shift J. Se konsa, Lè sa a, si nou te vle chwazi yon eleman nan paj sa a, jis tankou mwen te montre anvan, nou fè siy dola paran louvri ak Lè sa a, quotes. 

Yon bagay ki enteresan se, jeneralman, quotes sèl ak quotes doub yo amovibl. Se konsa, yon anpil moun ki jis itilize yon sèl quotes paske yo ap pi vit tape pase quotes doub paske ou pa fè sa gen kenbe desann chanjman. Se konsa, mwen pral jis fè sa kounye a. 

Se konsa, mwen vle chwazi yon bagay ak klas la. Veso, jis paske mwen konnen sa a, se yon bagay ki sou nou yo paj entènèt kounye a. Apre sa, mwen frape Mete. Apre sa, nou ka wè ke li chwazi li. Se konsa, li montre moute ke li tounen ke objè. Se konsa, sa a, se yon seleksyon de baz yo. Si nou te vle aktyèlman manipile li, ou ta gen yo rele yon bagay sou sa seleksyon, ki nou pral jwenn nan pita. 

TOMAS REIMERS: Se konsa, jis fè yon gade nan ki plis nan pwofondè, sa a se pa diferan pase apèl yo fonksyon nou te fè nan C. Non a nan fonksyon an isit la se yon ti kras etranj. Li nan siy dola. Se jis yon non nan yon fonksyon. Pa gen anyen espesyal sou li. 

Nou gen parantèz louvri. Lè sa a, nou gen nou yon sèl agiman, ki nan ka sa a k ap pase yo yon kòd, ki se yon seleksyon pou li. Lè sa a,, nou gen nou fèmen parantèz. Sa a li. 

Li pa ke larjeman diferan. Malgre ke, li gade anpil etranj. Apre sa, ki ka, sòt de, yon rete soude pwen pou yon anpil nan moun. 

MIKE Rizzo: Se konsa, Menm jan an tou, si nou te vle yo ka chwazi yon eleman ki gen yon ID, kounye a nou vle chwazi pa ID olye pou yo klas la. Li ta yon bagay ki sanble kote nou jis fè siy nan byen file pou ID. Se konsa, nou ap chwazi isit la tout eleman sa yo ki te ba ID. 

TOMAS REIMERS: Lè sa a fin. Sa CSS fin. Jis tankou nan CSS, ou ka chwazi tout lyen yo, ki gen foo nan klas la. Isit la, li nan menm bagay la. 

Ou ta ka fè a.foo, ki ta chwazi tout nan lyen yo ak foo nan klas la. Ou te kapab fè yon bar byen file, ki ta klike sou lyen an ak ba a ID ak sa sou ak pou fè. Nenpòt seleksyon CSS se yon valab jQuery seleksyon. 

MIKE Rizzo: Yeah. OK, se konsa kounye a kite a jwenn nan yon ti kras nan manipilasyon ke nou ka fè ak nou jQuery. Se konsa, jQuery gen yon kalite patikilye nan notasyon kote nou jis itilize yon dot nan fen an. Apre sa, ou ka panse a sa a tankou nan C ki jan nou te gen strukt diferan. Apre sa, ale nan sa yo strukt, ou ta sèvi ak yon dot jwenn nan yo. 

Sa a se, kalite, yon bagay menm jan an. Se sèlman kounye a nou gen fonksyon nan sa a seleksyon ke nou ka rele sou li. Se konsa, isit la, trè premye egzanp lan ou ka wè se yon seleksyon CSS. Apre sa, fondamantalman, ki sa ki ki fè se li aplike CSS la eleman premye nan sa a bagay ke ou chwazi - sa a eleman ke ou chwazi - ak valè a sa. 

TOMAS REIMERS: Se konsa, yon tradiksyon fasil nan ki ta ka si jQuery, fondamantalman, jis te pran foo. Lè sa a, nan CSS te di, koulè wouj ak fèmen. Li nan lide la menm. Ki sa ki li fè a se li nan chwazi tout eleman foo. Lè sa a, li la aplike. Sòt de, koulè po a pwopriyete ki egal a wouj. 

MIKE Rizzo: Menm jan an tou, nou ka tou chanje sa yo reyèl nan sa ki ki montre sou HTML a nan paj la, ki se vrèman fre paske li vle di ou paj wèb kapab kounye a dwe konplètman dinamik epi yo pa gen yo dwe estatik ke ou enprime soti lè l sèvi avèk PHP nan kòmansman la anpil nan paj la ke yo te chaje. Se konsa, isit la, si nou te vle chanje a HTML aktyèl la nan paj la, nou ta kounye a rele fonksyon an HTML, ki Lè sa a, jis foure tou sa nou presize nan ki eleman ke nou chwazi. Se konsa, isit la nou ap chwazi eleman ki gen foo klas-la ak Lè sa a, li di li nan HTML li nan kounye a bonjou nan lemonn. 

TOMAS REIMERS: Men, lè ou panse osijè de ki sa yo aplikasyon pou itil nan sa a, yon sèl sa a CSS, premye bagay ki ou ka kòmanse yo reflechi sou se an tèm de menm gout desann meni. Ou te kapab kòmanse fè bagay sa yo tankou, lè yon itilizatè plan sou pati nan tèt nan yon desann gout, ou vle fè pati anba a vizib. Dwa? 

Se konsa, nan CSS, nou gen pwopriyete fè yon bagay vizib. Bagay sa yo tankou ekspozisyon kolon pa ta fè li envizib. Montre blòk ta fè li vizib. Oswa menm si ou ta vle ale pi senp, ou gen bagay sa yo tankou egal vizibilite vizib, epi vizibilite egal kache. 

Apre sa, ou ta ka kòmanse aplike bagay sa yo tankou gout desann meni dwa apre ou fin jwenn nan lide a nan ki jan ka w konnen lè sa a ouvè, ki n ap jwenn nan anpil yon ti tan. Men, nou ka kòmanse wè aplikasyon pou nan sa a. Nan yon sans ki similè yo, si ou te eseye epi mete an aplikasyon, se pou yo di, yon chat motè ak ou vle fè yon ti kras jarèt diskou vini chak fwa ou te te resevwa yon mesaj nouvo, yon fwa ou jwenn nan nouvo mesaj, ou ka fè yon ti kras jarèt diskou vini pa chanje HTML a nan paj la, dwa? Pa pandan l ajoute ke ti wonn anplis lapawòl ak tèks la anplis nan la. Yeah? 

ODYANS: Se konsa, ou ta Afiche sa a nan kòd la HTML nan sòt de tankou yon [Fèbl]? 

MIKE Rizzo: Dwa. Yeah, nou pral jwenn ak sa yo ki nan yon ti kras. Yeah, li nan menm jan an yon ti kras PHP. Pa egzakteman menm jan an. 

Yon bon distenksyon yo fè a se sa ki sa a se aktyèlman koreksyon lè nou modifye paj la paske li pa k ap pase yo dwe koreksyon dosye aktyèl la ki se ke yo te kenbe sou sèvè a paske mond lan pa ta dwe gen pèmisyon yo edit dosye ou. Sa a se jis koreksyon sa ki la sou paj la ak sa k ap parèt nan lespas navigatè a. Se konsa, si ou te Reload paj la apre, di, efase yon bagay jan nou wè nou ka fè ak apèl la retire, ke bagay ta Lè sa a, repwodwi. 

TOMAS REIMERS: Se konsa, yon fason yo reflechi sou sa a se si mwen se òdinatè w lan ak Mike se, sòt de, sèvè a. Ki sa ki pral rive se mwen pral mande Mike, hey, èske mwen kapab genyen yon kopi paj entènèt sa a? Apre sa, li pral ban m 'yon kopi li. 

Non paske se pa bagay orijinal la. Se jis yon kopi. Lè sa a, li ta tankou, oh, gen nan JavaScript isit la. Klèman, mwen ta dwe modifye nan paj yo dwe tankou sa a. Apre sa, mwen ap koreksyon kopi ou. 

Men, ki pa nan pwomès kopi a vrè. Men, si m 'te poze l' keksyon ankò rafrechi paj an, - hey, èske mwen kapab genyen yon lòt kopi pwòp - li te ale nan ban m ' yon lòt kopi pwòp. Lè sa a,, mwen pral fè menm bagay la tankou, o, sa a JS isit la ki di yo edit sa a. Apre sa, mwen pral kontinye ap fè sa. 

MIKE Rizzo: Se konsa, yon bagay vrèman fre ke ou ka fè ak jQuery se aktyèlman ajoute diferan kalite nan Animations nan paj ou yo. Mwen pa konnen si ou te janm wè kote w ap eseye nan yon ranpli yon fòm sou entènèt ak ou pa ranpli bagay sa yo kòrèkteman. Se konsa, yon ti bagay glisad desann nan tèt la ak di ou pa t 'fè sa a kòrèkteman. Tanpri eseye ankò. Lè sa a,, li ta ka menm jis glise yo. 

Vire soti jQuery te bati nan fonksyon ki fè nan tout sa animasyon reyèlman, reyèlman fasil. Se konsa, gen se premye fennen la fonksyon soti, ki ou ka rele sou yon bagay. Lè li nan yon fason yo chanje CSS la nan ki eleman nan yon fason anime. Se konsa, li pran tou sa eleman ou rele li fennen soti sou li. Lè sa a, tou dousman, chanje stupidity li nan jouk li ale konplètman transparan. 

TOMAS REIMERS: lòt yon sèl nan popilè se glise desann, ki pral fè yon bagay parèt pa glisman l '. Se konsa, nan ka a nan meni an gout desann, ankò, lè nou te aprann kòman yo detekte lè sa a ki te plane sou yo, ou ta ka jis di anba sa a pati glise desann kounye a. Lè sa a,, li ta parèt pa glisman desann. 

MIKE Rizzo: Lè sa a,, si ou jis gen kèk kalite animasyon nan tèt ou ke jQuery pa nesesèman bay. Pou egzanp, kite a di jQuery ba ou yon glise desann ak glise yo. Oke, kite la di ou te vle glise yon bagay nan soti nan bò gòch la oswa nan soti nan kalite a dwa a tankou CS50 nan paj prensipal fè chak fwa ou ale nan yon panèl nouvo. Ou ta Lè sa a, pwobableman gen aplike li tèt ou lè l sèvi avèk la enkouraje fonksyon nan jQuery. 

Se konsa, Menm jan an tou, ou jis enkouraje. Lè sa a,, nan li li pran yon diksyonè valè yo diferan ke w ap sipoze pase. Se konsa, isit la, si nou te vle enkouraje la foo eleman sa yo ki lajè li yo swa ekspansyon oswa kontra a 80 piksèl, depann sou sa ki li kounye a se. Nou ta jis pase ke kòm agiman an nan li. 

Enkouraje yo te genyen tou kèk lòt agiman ke ou ta ka pase l, pou egzanp, vitès la nan animasyon an ke ou vle ba ou li. Apre sa, fè sa, mwen ta jis di byen vit Google jQuery enkouraje. Lè sa a,, yo pote moute paj sa a, ou kapab wè li te gen yon pakèt moun sou diferan pwopriyete ke ou ka pase l '. 

Apre sa, mwen ankouraje w - chak fwa ou vini atravè yon bagay ke ou pa fè sa konnen oswa ou jis vle aprann plis sou yon metòd an patikilye ke ou ka rele sou yon bagay - jis Google li. jQuery se trè byen dokimante. Apre sa, souvan fwa gen yon anpil nan egzanp yo ke yo bay pou ou. Si nou desann - fason desann - ke nou ka sèvi ak, osi byen. 

Yon fwa ankò, lè yon pwomotè aktyèlman ale nan pwoblèm nan nan ekri yon bibliyotèk, anjeneral, yo vle yon moun ki sèvi ak li. Se konsa, ansanm ak ki pral gen yon kopi dokiman yo. Epi ki dokiman ka anjeneral dwe yo te jwenn nan paj pwojè a, ki se poukisa nou te ban nou ki sou sit orijinal nan nan konmansman an, ki lyen ou a nan paj pwojè konsa ou kapab wè ke kopi dokiman yo. 

Tipikman, paj pwojè a nan ka a nan [fèbl], li te di ou la non nan klas yo. Nan ka a nan JavaScript, li bay ou non an nan fonksyon yo. By wout la, si nou woulo liv moute sou tèt la, yon nòt bò rapid sou fonksyon se chak fwa ou wè yon fonksyon aplike tankou sa a ak difisil la parantèz nan mitan an, ki vle di ki ke pwopriyete a se si ou vle. Jis yon chèf yo. Mwen te wè yon anpil nan kesyon sou sa. 

Se konsa, isit la nou kapab wè ke an enkouraje pran pwopriyete kòm yon agiman ki nesesè yo. Ak tout lòt bagay se si ou vle. Bò nòt - ou ka panse a sa a, sòt nan, tankou paj moun. Paj nonm yo se dokiman pou C ak pou yon anpil nan lòt bagay, kòm byen. 

MIKE Rizzo: Se konsa, nou te aprann ki jan yo chanje diferan CSS sou paj la, enkouraje li, epi retire ajoute HTML. Men, yonn nan pi pwisan an vrèman bagay sou JavaScript epi espesyalman jQuery - ki sa li pèmèt ou fè se reponn a diferan eleman ki rive. Pou egzanp, isit la nou gen yon Handler evènman. Epi ki jis vle di chak fwa sa a evènman k ap pase, nou okipe l 'nan yon sèten fason. 

Se konsa, isit la, jenerik jQuery evènman an Handler se dot a sou. Lè sa a,, premye bagay la ou bay se sa ki evènman li ta dwe dwe tande pou. Se konsa, isit la, li nan klike sou la ki n ap tan pou. 

TOMAS REIMERS: Sinon, ou gen sou hover, ki se yon yon sèl trè popilè. Se konsa, tounen nan gout m 'desann lide meni. Ou ta gen yon sèl nan tèt sou hover. Lè sa a, ou ta ka chanje sa. 

MIKE Rizzo: Dwa. Lè sa a,, lè sa rive, li jis ègzekutra sa a fonksyon ke nou ba ou li kòm yon diskisyon e ke li Alerts bonjou oswa hi. 

TOMAS REIMERS: Se konsa, nan ka a nan JavaScript, sa a se yon kote ki nou bezwen retire tèt nou soti nan C. Nou kapab aktyèlman pran fonksyon kòm agiman. Apre sa, gen yon anpil nan reyèlman fason konplèks fè sa. Nou pral ankouraje yon fason, ki se ou ka defini nan fonksyone ki la a. 

Se konsa, lè w ap mande pou yon fonksyon kòm yon paramèt, w ap fondamantalman jis ale nan defini fonksyon an sou tèren an. Apre sa, wout la ou defini yon fonksyon nan JavaScript se ou literalman di fonksyon. Lè sa a,, anjeneral,, non an nan fonksyon an. Men, nou pa janm ap ale nan referans fonksyon sa a ankò. Se konsa, nou kite li nameless. 

Lè sa a, parantèz yo, lè sa a Curly a aparèy òtopedik, ak Lè sa a, kòd a nan sa. Se konsa, nou konprann sa a kapab gen yon ti kras konfizyon. Se konsa, nou ba ou fòm la an jeneral nan ki sa yon Handler evènman sanble anba a, ki se sou evènman yo. Lè sa a,, kòd ou anndan sa. 

MIKE Rizzo: Èske gen nenpòt kesyon sou sa a? Sa a kapab yon ti kras konfizyon premye fwa a ou wè li. 

TOMAS REIMERS: Ou aktyèlman vle louvri moute yon dosye epi montre yo kèk jQuery kounye a? 

MIKE Rizzo: Yeah, se pou yo fè sa. OK. 

TOMAS REIMERS: Se konsa, kounye a nou ap nan aparèy la. Ak sa nou te fè se nou te pran an libète pou kreye tou de yon index.html dosye, ki lyen ak yon dosye JavaScript. Apre sa, nou ka louvri moute - a yeah. Oke, li fè de bagay sa yo. 

Premye a se li lyen ak dosye a JavaScript. Epitou, n ap wè ke moute isit la. Nou wè ke nan tèt la nan la Dokiman HTML, patikilyèman. Se konsa, ou ap wè gen ki nou, fondamantalman, di SRC, ki vle di pou sous. Epi sa a, URL la. 

Se konsa, isit la ou ka di nou te gen enkli jQuery. Apre sa, nou te tou te gen ladann Scripts. Lòt fason a enkli ladan JavaScript se ke ou ka gen ladan yon script aliye tag jan nou gen nan pati anba a kote li di ki kalite script se tèks JavaScript. 

Se konsa, nou ap di, koute, nou sou genyen ladan yo yon script. Apre sa, ki kalite ke script se JavaScript, ki se yon di ki kalite tèks. Trè senp. 

MIKE Rizzo: Se konsa, sa a, kalite, vin kesyon ou sou fason nou genyen ladan yo JavaScript nan dosye nou paske lè nou te PHP, nou fè yon bagay tankou sa a. Lè sa a, yo, yo gen fonksyon PHP nou yo - kite a di aksyon fè yon bagay ki gen sa - ale nan la. Sepandan, kounye a nou gen etikèt yo script ke nou ba ou li yo, ki se aktyèlman yon pati nan HTML nan tèt li paske li pa faking yo te yon dosye HTML tankou li se nan PHP paske si ou aktyèlman ale nan ak gade nan sous la nan paj la, ou pral wè sa yo Tags script nan la ak JavaScript la ki asosye ak yo nan sa. 

Se konsa, lè sa a, si nou te vle ekri kèk JavaScript - kite yo jis di nou te vle chanje kò paske kounye a mwen pa gen nenpòt ki lòt Tags ke mwen kapab reyèlman modifye san konte kò. Se pou nou jis di mwen te vle chanje CSS la nan ke. Se konsa, nou pral ale pi devan ak chanjman koulè a ​​nan li a wouj. 

Se konsa, mwen sove dosye a. Se pou yo tounen nan paj entènèt nou an, rafrechir, ak li fè sa li otomatikman paske li pa t 'sanble tankou li tann nan tout paske nou pa t'ap koute pou yon evènman oswa yon bagay tankou sa. 

TOMAS REIMERS: Se konsa, si nou tounen nan pote an patikilye - HTML nan ranpli - ki sa w ap ale yo wè se nou genyen - sonje ke sa a se chaje, sòt de, kwonolojik. Se konsa, nou gen premye tèt la. li charj de dosye sa yo. Lè sa a, nou ale nan kò a. Lè nou wè mond hello. Se konsa, nou rann mond hello. 

Lè sa a, bagay la pase nou gen se nou gen tag a script. Se konsa, li kouri tag a script paske li nan pa di l 'pou ret tann pou anyen. Epi sa a, ki pi fondamantal la fason yo kouri JavaScript. 

Avèk ki te di, ou ka mete script la tag moute nan header a jis yo montre pwen sa a? Epi kouri sa a. Nou pral avi ke li pa t 'chanje koulè an. Lè sa a se youn nan pwoblèm ki gen nan JavaScript se ke bagay sa yo yo chaje nan yon lòd kwonolojik. 

Se konsa, nan tan sa a ke ke Kòd te kouri, nou chwazi - tounen - tag nan kò. Tag nan kò pa egziste ankò paske JavaScript se nan liy ak HTML. Se konsa, navigatè a, se tankou chwazi kò. Gen nan pa gen bagay sa yo ankò. Se konsa, nou ka inyore sa. Apre sa, nou kenbe prale. 

Lè sa a, nou defini yon tag kò. Men, ki pa janm vin mete ajou. Se konsa, lè w ap mete ann aplikasyon script Tags, asire w ke ou mete apre tag nan kò. Next glise. 

MIKE Rizzo: OK. Se konsa, nou chanje yon bagay. Men, li pa t 'gade tankou li reponn a nou nan tout paske li jis kalite te fè li kòm pli vit ke li chaje paj la. Se konsa, kounye a, olye pou yo fè sa a, poukisa pa nou ajoute yon Handler evènman. 

Se konsa, kite a fè yon bagay nan kò a ankò. Apre sa, kite a di nou fè l 'sou - klike sou. Nou pral ajoute yon fonksyon. 

Chanje Annou: TOMAS REIMERS li nan koulè yo wouj ankò. Poukisa nou pa? 

Chanjman Yeah, se pou yo: MIKE Rizzo koulè li yo 'yo wouj ankò. Tout dwa. Se konsa, kite a Reload paj la. OK, nou wè - jan yo espere a, li pa vire wouj ankò. Men, lè sa a nou ka ale pi devan epi klike sou li. 

TOMAS REIMERS: Epi li vire wouj. 

MIKE Rizzo: Apre sa, li fè sa vire wouj jan yo espere a. 

TOMAS REIMERS: E nou ka wè ki jan nou ka kòmanse bati anpil debaz entèraksyon. Lòt bagay nou ta ka vle fè se, si nou pa vle fè kò a koulè wouj, se pou yo fè HTML nan background koulè wouj. Jis se konsa li a menm CSS la. 

Lè nou chanje li, nou ka wè sa a efè trè dramatik nan chanje an tout paj. Se konsa, ankò, si w ap mete ann aplikasyon bagay sa yo, ou ka gen yon sèl eleman ki se vle di yo dwe klike sou. Se pou nou di yon bouton pou sòti ak yon tout lòt eleman, ki se vle di ke yo reponn. Se konsa, ou ta retire yon fenèt lè sa ki ap pase. 

MIKE Rizzo: OK. Jis kòm yon egzanp - nou pa t 'jwenn yo wè sa a pi bonè - Mwen pral jis montre w sa li sanble renmen lè nou kache yon bagay. Se konsa, mwen pral ale pi devan epi glise moute. 

TOMAS REIMERS: Vle vlope ki nan yon di ki kalite paragraf anvan nou fè sa? 

MIKE Rizzo: OK. Yeah, poukisa yo pa nou fè sa jis pou nou ka chwazi li yon ti kras plis. 

TOMAS REIMERS: Li kite yo bay li yon klas la. 

MIKE Rizzo: Yeah. OK, se konsa se pou yo wè. Olye pou yo chwazi kò a aktyèl kounye a, mwen pral jis chwazi tout bagay ak klas hello, ki isit la nou jis gen yon sèl bagay. Se konsa, nou pa ta dwe gen enkyete sou sa. 

Se konsa, mwen pral rafrechi li. Mwen pral ale pi devan epi klike sou li. Apre sa, li, sòt de, te fè yon glise etranj moute bagay, ki pa t 'gade ki atire. Anjeneral, yo gade bèl bèl. Mwen devine, sa a - pou kèk rezon ki fè - pa t '. Mwen pral jis fè yon fennen soti pou ou ka gade nan sa tou. Anpil joli. 

Lè sa a,, si mwen louvri moute JavaScript a konsole ankò, li nou vle wè sa ki li sanble lè nou fennen li pous Koulye a, mwen jis rele sispann nan sou li. Epi li disparet tounen pous 

Menm jan an tou, nou te ka aktyèlman tou pase yon agiman nou pèdi nan oswa fennen soti, ki se, kalite, vitès la nan li. Se konsa, kite a ale pi devan epi di nou vle li ale tou dousman fennen pous Se konsa, mwen devine li toujou te sanble trè rapid. Men, li te pi dousman pase anvan. 

TOMAS REIMERS: Men, si ou vle jwenn plis enfòmasyon sou bagay sa yo, ankò, jis ale nan lòt dokiman an jQuery, ki nou te ban nou, epi li nan sa yo. Yo dokimante fonksyon yo ekstrèmman byen. 

MIKE Rizzo: OK. Se konsa, mwen devine kite a tounen nan sa a. Apre sa, nou ka pale sou dènye paj nou an. Oke, nou ka fini ak demaraj. Lè sa a, nou pral louvri l ' pou kèk kesyon. Men, si ou nèg gen nenpòt ide ki ou ta renmen pou yo eseye voye jete leve, li wè si nou ka aplike yo ak JavaScript byen vit. 

Se konsa, reyèlman byen vit sou demaraj, ki te otomatikman enkli nan dènye pwoblèm ou mete nan dosye a CSS ak aktyèlman lye nan nan ou header.PHP. Se konsa, ou ta ka gen te ajoute kou ki yo defini nan demaraj nan li. Apre sa, li ta gen otomatikman estile bagay sa yo kòmsadwa. 

TOMAS REIMERS: Se konsa, demaraj se yon trè bagay majik devlope pa moun yo nan Twitter. Epi ki sa li te vle di fè te - anvan sit te reyèlman di fè gade bèl, espesyalman lè nou te gen yon anpil nan eleman komen. Se konsa, yon anpil nan bouton sou la entènèt gade menm bagay la. 

Ou ka jwenn yon anpil nan jaden tèks yo dwe fè yo gade pi bon pase tèks la estanda jaden pwobableman ou konnen soti nan reyèlman sou sit entènèt fin vye granmoun oswa vrèman mal fè sou sit entènèt, ki jis gade tankou literal bwat tèks san yo pa nenpòt ki fòm nan tèks lonbraj oubyen nenpòt kalite bèl deskripsyon. Se konsa, sa demaraj te fè li te di, byen, nou gen yon anpil diferan estil komen. Poukisa nou pa nou fè yon sèl komen ansanm CSS ak yon seri komen nan JavaScript kòm byen, sa ki ka style li kòm se epi ki kapab bay moun bagay sa yo tankou gout desann meni, sa ki ka bay moun bagay sa yo tankou modals. 

Modal se sa ki Pops sou paj la chak fwa li nan estrikteman pale yon bagay, ki inibit plis entèraksyon jiskaske ou kominike avèk li. Yon bagay tankou sa a se yo, se ou asire w ke ou vle efase bagay sa a? Ou pa ka vrèman fè nenpòt lòt bagay jiskaske ou di wi oswa non. 

Li te pran tout bagay sa a epi li pake li ansanm, li di: isit la nou ale. Moun ki kapab kounye a itilize sa a. Apre sa, ou ka jwenn li sou nan getbootstrap.com. Li te otomatikman enkli nan dènye pwoblèm ou mete. Apre sa, w ap plis pase akeyi yo sèvi ak li sou pwojè final ou a. Men, si ou vle swiv sa lyen yo ka resevwa demaraj. 

Ou pral wè isit la se a Demaraj sit CSS. Ou pral wè demaraj. Men, si ou desann, ou ap wè ki jan yo desann li, ki jan yo enstale li, et setra. 

MIKE Rizzo: Apre sa, ou ka tou, enteresan ase, Customize li nan gen tou sa kalite tèm ke ou vle. Mwen konnen sa a, se yon bagay mwen te fè sa pou m ' pwojè final lè m 'te pran klas la te Customize li. Yon vèsyon diferan nan demaraj ki te gen yon konplo koulè diferan ak fòm diferan nan kèk bagay diferan. Se konsa, mwen ankouraje w yo jwe avèk sa. Li nan kalite plezi yo fè. 

TOMAS REIMERS: Looking atravè tèt la ankò, li trè menm jan ak Font nan Awesome sit. Yon anpil nan dokiman ap kòmanse sanble menm jan an lè ou te wè ase nan li. Se konsa, isit la nou gen CSS la eleman ki nan sa-a. Apre sa, ou pral wè li montre kouman li ka style bagay sa yo. Se konsa, si ou klike sou tab, pou egzanp, ou ka imedyatman fè yon tab bèl pa senpleman ajoute tab la klas li. 

Bagay sa yo menm pou bouton ki sanble. Si ou tou senpleman ajoute bn nan klas-la ak bn default oswa bn primè, ou kapab jwenn okenn youn nan bouton sa yo ak sa yo Styles pre-fè fè yo. Lè sa a,, si w ap chèche yon bagay ki pi konplèks pase tou senpleman rèstilin sa w te deja genyen, sou sou tab la JavaScript atravè nou nan tèt gen yon pakèt moun sou konpozan. 

Se konsa, isit la nou gen tranzisyon, modals, dropdowns, onglè, ak bul. Yon enfobul se sa ki Pops leve anba ou sourit lè ou hover sou yon bagay. Popovers, alèt, bouton, effondré Accordéon se sa ki anjeneral yo ap rele. Karouzèl, ki baskile nan imaj tankou. 

Se konsa, sa yo se eleman yo nan demaraj. Mwen ta ankouraje w trè ale gade yo. Genyen yon eleman JavaScript ak yon eleman CSS. Santi yo lib yo sèvi ak yo menm jan ou pral. Nou pa pwal ale twòp nan yo paske nou santi nou lòt dokiman an se reyèlman byen fèt. Apre sa, wi. w gen nenpòt kesyon sou sa? 

MIKE Rizzo: Se konsa, kòm yon yo se reyèlman rapid bò, desen an nan paj entènèt sa a ki nou byen vit mete tèt yo ansanm pou prezantasyon sa a se aktyèlman fè lè l sèvi avèk demaraj. Kòm ou ka wè, lè nou klike sou sa yo onglè diferan, nou ap pa janm aktyèlman kite paj sa a index.html kounye a. Se konsa, sa nou genyen se div diferan nan index.html sa a. Lè sa a,, chak fwa nou klike sou yon diferan tab, li te jis chanje ki montre yon sèl la. 

Se konsa, li kòmsadwa pozisyon yo, chanje HTML a nan paj la pou ke se tab la kounye a make kòm aktif se konsa li parèt yon fason diferan ak sanble vrèman bèl. 

TOMAS REIMERS: Se konsa, sa ki te tout fè l ' san yo pa nou ekri prèske nenpòt CSS. Nou menm tou nou wè yon header nan tout tèt la, ki koulè yo yo se pa nou. Men, aktyèl la mete yo sou la anlè paj la a ak fè li woulo liv te demaraj. Lè sa a, menm pou yon lòt bibliyotèk - sa a se pa yon sèl nou te pale de men se yon sèl ou ka Google si ou vle. Se sa yo rele prettify.js. Epi li pral sentaks mete aksan sou Kòd ou pou ou lè l sèvi avèk tou de CSS ak JavaScript. 

Bagay la pase nou vle pale sou anvan nou divilge ou deyò nan a mond fè yon gade nan bibliyotèk figi konnen kouman yo sèvi ak yo ansanm ak, èspere ke, li dokiman epi jwenn sa ou bezwen se ki jan yo jwenn bibliyotèk yo. Se konsa, premye a se nou ap jis ale nan pouse Google. Ale Google. 

Sa a literalman sa nou fè lè nou bezwen fè yon bagay ki nou Google. Èske gen yon bibliyotèk JavaScript ki pèmèt m 'nan manipile tan nan yon itil fason? Se konsa, si mwen konnen ke gen kèk itilizatè kreye yon kont isit la, ak sa a se nan tan kounye a, kouman mwen ka kalkile nan diferans ak ki san yo pa gen kalkile li tèt mwen? Se konsa, sa a se aktyèlman yon bagay ki komen yo, Bibliyotèk tan JavaScript. Apre sa, isit la nou Moment.js-- youn nan ki pi popilè. 

Si nou bezwen yon bibliyotèk yo manipile yon bagay tankou koulè pou kapab jenere yon pakèt moun sou koulè o aza - petèt, nan jenere yon style oswa yon bagay - nou te ka Google yon bagay tankou JavaScript bibliyotèk koulè. E mwen panse ke nou ta pòp moute ak yon mil ak youn nan yo. Ou se Byenveni nan li nan yo. 

Se konsa, pifò bagay sa yo - lè ou jwenn yo - yo pral dwe anime sou youn nan sit ki Kòd lame. Yo ap se yon kèk moun popilè. Ki pi popilè a, pa byen lwen, se github.com. Men, si ou ale nan GitHub li la aktyèlman kote nòmalize te anime. Se konsa, si ou vle ale tounen nan ke yon moun. Montre yo sa. 

MIKE Rizzo: Epi sa a, aktyèlman kote sa a se te anime tou, si ou remake. 

TOMAS REIMERS: Yeah. Se konsa, si ou ale sou yo nòmalize epi ale nan GitHub la. Yo te se sa? 

MIKE Rizzo: bagay chat Sa ti kras se senbòl la GitHub. 

TOMAS REIMERS: O. Se konsa, GitHub sèvi ak yon metòd ki rele GIT nan kòd magazen. Èske ou pa konnen ki sa ki se oswa li efre ou, sa a, se amann. Ou pa bezwen konnen ki sa GIT se paske GitHub gen yon bouton Download nan bò dwat la anba. 

Lòt bagay la itil nan konnen sou GitHub ki pi pwodwi pral gen yon li m '. Men, si yo pa gen yon sit entènèt, nan li m 'ap pale sou fason ou enstale li, ki jan ou sèvi ak li, ki sa li fè, et setra, et setra, et setra. Ki sa ki nou te fondamantalman te ap mache ou atravè. 

MIKE Rizzo: KITE FIMEN entènèt la. 

TOMAS REIMERS: Sa se amann. De dènye bagay sa yo nou te vle pale sou - nou te pale osijè de GIT - se depanaj. Apre sa, yon sèl sa a se pa tankou enpòtan pou pwodwi final la kòm li se lè ou kite 50. Men, lè ou kouri antre nan pwodwi mete ann aplikasyon bibliyotèk oswa mete ann aplikasyon pwojè pwòp ou a, w ap ale yo gen kesyon oswa w ap ale nan gade pou kesyon yo. 

Yon fwa ankò, Google li. Sa a literalman sa nou fè. Sa a se pral pou fè son pou timoun. Men, literalman, nou Google li. Li di ankò: youn nan bagay ki premye ou pral anjeneral kouri antre nan se stackoverflow.com, ki se yon bèl bagay kesyon ak je repons lan. 

Li nan bèl bagay tou de paske ou kapab afiche kesyon yo epi gade pou repons men tou paske li deja gen yon anpil nan pre-peple kontni la. Se konsa, anjeneral lè ou Google yon pwogram kesyon ki nan premye a koup frape ou kapab te deja kouri nan li pandan kouche pwoblèm ou an. 

Lè sa a,, dènye bagay ki reyèlman kout se JSFIDDLE, ki se - jodi a nou te gen te fè yon anpil nan travay ki gen JavaScript HTML CSS. JSFIDDLE se yon app web, ki fondamantalman pèmèt ou pran HTML ou a, OU JavaScript anba kite, ak CSS ou tèt dwat. Lè sa a, li ka kreye yon rapid rann nan li epi li wè ki jan li reyaji. Li trè itil lè moun yo ap eseye fè yon prèv nan konsèp tankou sa a se ki jan ou ta fè yon gout desann meni. Petèt yon dékouvr rapid oswa kèlkeswa sa. 

MIKE Rizzo: Pito n 'al devan, epi klike sa a. Yon nòt rapid - Lè nou konsidere ke, anvan nou te fè sou klike sou. Vire soti Kore di JCorey tou te gen yon bati nan klike sou evènman Handler ke li sèvi ak jis paske li figi w ap ale nan vle fè yon bann bagay sa lè ou vle klike sou yon bagay. 

Menm jan an tou, li tou te gen yon hover. Men, yo ka resevwa sijè ki abòde lan plen nan sa yo, gade nan jQuery la dokiman ak fè li. Mwen te fè yon bagay estipid isit la. 

TOMAS REIMERS: Se konsa, mwen gen yon vrèman rapid pwogram dwa isit la, ki di bouton sou klike sou. Lè sa a, nou gen yon pou bouk. Pou mwen se mwens pase 404. Se jis ale nan pòp moute sa yo mesaj alèt. 

MIKE Rizzo: Ak sa ki te nan Kòd 404 kanpe pou nan HTML? nenpòt moun ki sonje? Pa jwenn, dwat. Chrome tou te ajoute sa a pwòp bagay ki kote ou kapab - 

TOMAS REIMERS: Paske moun tankou Mike te kòmanse fè sa yon anpil ak itilizatè anmèdan, ki pèmèt ou wè enfòmasyon. 

MIKE Rizzo: Yeah. 

TOMAS REIMERS: nou gen nenpòt kesyon sou sa, sou JavaScript bibliyotèk, jwenn bibliyotèk, oswa sanble sa ki devlopman entènèt tankou nan mond lan reyèl? Nou ap kouri moute kont tan. Se konsa, mwen pa fin sèten nou pral yo gen tan aplike sof si li vrèman rapid. Eske nou kwè nou bon? 

MIKE Rizzo: Nenpòt bagay ou nèg ta renmen yo wè vrèman rapid nan, tankou, de minit oswa mwens? 

TOMAS REIMERS: Nenpòt bagay nou ka klarifye? Ki jan yo ekri nan - 

ODYANS: [fèbl]? 

MIKE Rizzo: Wi, se konsa that's - 

TOMAS REIMERS: Ou ka jis frape Kontwòl-U sou sit entènèt la. 

MIKE Rizzo: Oh, mwen pa t 'konnen sa. 

TOMAS REIMERS: Mwen panse ke, yeah. Kontwòl-U. Yeah. 

MIKE Rizzo: Oh, se konsa sa a, se la Kòd pou sit entènèt la. Men, si ou aktyèlman vle download nou dosye ak tout bagay, li se anime sou github.com 

TOMAS REIMERS: koupe non m '- Tomas Reimers - koupe CS50 tirè seminè. 

MIKE Rizzo: Apre sa, ou kapab jwenn tout bagay la. 

TOMAS REIMERS: Sa a se sa ki GitHub sanble, nan chemen an. Se konsa, ankò, lè ou wè yon sous louvri pwojè, anjeneral, yo pral gen yon Li m 'gen ke ou ka li. Men, si ou tounen, ou pral avi ke ou gen postal lan download, ki pral pèmèt ou download sous la Kòd genyen ladan yo a pwodwi nan bagay pwòp ou yo. 

MIKE Rizzo: Yeah, epi si nou jis klike sou index.html yo reyèlman byen vit - 

TOMAS REIMERS: Ou pral wè isit la nan la Kòd sous pou sit entènèt nou an. 

MIKE Rizzo: Epitou, mwen bliye pouse dwa anvan ak tab la gwo li enkli, men gen la tou yon tab nan chmods ke nou enkli jis pou klè ou. Men, si nou woulo liv tout wout la desann nan la anba, nou pa t 'aktyèlman fè anpil anpil ankò avè JavaScript a bagay nan tout ak sa. Li nan sèlman ki soti nan tout bagay lòt bagay ki nou te genyen. 

Se konsa, di ou mèsi mesye pou vini ak tande. Nou espere sa a te reyèlman itil. Si w gen nenpòt JavaScript ki gen rapò kesyon oswa jis vle pale sou ki lòt bagay tankou sa ki lòt bagay fre ou kapab fè avèk JavaScript, nou ta renmen pou pale ak ou. 

TOMAS REIMERS: Si ou gen yon kesyon sou pwojè ou a oswa si sa a kapab ki enpòtan, n ap pwobableman bwa ozalantou yon ti kras apre sa a. Men, lòt pase sa yo, yo gen yon bon wikenn. 

MIKE Rizzo: Yeah, jwi. Wè ou guys. 

TOMAS REIMERS: Gade ya.