TOMAS REIMERS: Hi, kila mtu. Jina langu Tomas Reimers. MIKE Rizzo: Na mimi nina Mike Rizzo. TOMAS REIMERS: Sisi ni mbili ya CS50s TS. Na leo tuko kuongoza semina ya JavaScript na CSS kwa ajili ya programu ya mtandao. Kama unataka kufuata pamoja, kiungo ni haki zaidi ya hapo. Na unataka kuweka it up kwenye kompyuta kwa ufupi? Kuna kiungo. Ni tovuti ndogo, ambayo ina viungo rasilimali zote tunakwenda kuwa na akizungumzia leo na pia ina mengi ya habari muhimu iliyoandikwa na sisi kwa kusoma zaidi katika kina wakati wa kwenda nyuma, na wewe ni kujaribu kukumbuka kile hasa? sisi kusema, nini ulikuwa kuzungumza juu, na kadhalika. MIKE Rizzo: All wa kulia. Basi hebu kuanza. TOMAS REIMERS: Kwa hiyo unataka kuanza? OK. MIKE Rizzo: Yeah. Hivyo sisi kwanza alitaka kuanza na pana maelezo ya jumla kuhusu mtandao na faili aina wakati kubuni tovuti. Wakati mada hii hatutaki kupata katika ndani ya JavaScript mengi sana baadaye, sisi alitaka kuanza mbali na tu, aina, kama jicho la ndege mtazamo ya kile tovuti na jinsi kufikiri juu ya kubuni tovuti kwa ajili ya kuanza. Hivyo guys, katika hatua hii - na ni kuwa Ijumaa usiku - wanapaswa kuwa na in CS50 fedha yako tatizo seti. Hopefully, kwamba alikuwa ladha nzuri ya nini programu ya mtandao wanaweza kuwa. Lakini hapa tunataka, aina ya, kutoa mwingine ladha, kama vile. TOMAS REIMERS: Hivyo tu kwa kurejea nini hutokea, wakati aina katika URL yako web browser yako, kwamba URL anapata inaonekana up katika kompyuta. Na kompyuta yako kushikamana na kompyuta nyingine, ambayo majeshi tovuti hiyo. OK, hivyo wakati wewe kwenda google.com, wewe ni kushikamana na moja ya Google kompyuta, ambayo ina files kwa google.com. Ni kisha anauliza kwa ajili ya faili maalum. Hivyo kama wewe kwenda - Sijui - example.com / index.html au / test.html, wewe kwenda kuomba kwa ajili ya kwamba faili maalum. Na mtandao wa kompyuta ya kwenda kurudi na wewe. Basi, mara moja kwenda kwa njia ya faili kwamba - mara moja uko kompyuta anapata kwamba file - ni kwenda kuanza kujenga mtandao. Hivyo sasa ina HTML file, ambayo ni aina ya kama muundo wa ukurasa wa mtandao. File HTML pia inaweza kumbukumbu Files CSS, ambayo kufafanua mtindo wa ukurasa wa mtandao. JavaScript files, ambayo amefafanua mwingiliano na ukurasa wa mtandao. Files Image, ambayo ni picha tu. Na uwezekano wa zilizounganishwa na faili nyingine HTML, ambayo unaweza kisha kutembelea. MIKE Rizzo: OK, kubwa. Hivyo guys na wote, pengine, painstakingly kuanzisha jeshi lako kwenye mashine yako virtual. Na tu kwamba, aina, ni za uwanja kwamba kompyuta yako majeshi tu kwa ajili yenu kwa anwani yako mwenyewe IP. Hivyo ndani ya kwamba, basi unaweza kuongeza kwa ni mtandao yako mwenyewe kurasa. I mean, katika CS50 Fedha, unapaswa kuwa na Aliongeza baadhi ya kurasa HTML, ambayo ni, aina ya, amefungwa katika kanga PHP. Lakini hatimaye, nini yako PHP kurasa walikuwa outputting mara HTML. Lakini kufikiri nyuma ya mwanzo sana ya pset, tulikuwa na kuweka ruhusa kwa kila kitu, sawa? Hivyo hii tu kimsingi hutujulisha ambao wanaweza kusoma, kuandika, na uwezekano wa kutoa kila ya files. Hivyo sisi ni kwenda kufanya haraka - hm? TOMAS REIMERS: Hivyo sisi ni kwenda kufanya demo haraka. Hivyo tu kuwakumbusha, wakati kuunganisha kwa kompyuta Google - yeyote - na kuuliza kwa ajili ya faili, kompyuta ya kwanza Inahitaji kuhakikisha kuwa wewe ni mamlaka ya kwa kweli kuona faili hilo au kusoma kwamba faili kwa sababu huwezi kuuliza kwa ajili ya faili yoyote kwenye kompyuta kwamba, haki? Hiyo kuwa na athari usalama. Hivyo files juu ya mifumo ya sisi kutumia, kama hii appliance CS50, na tatu watu kwa ujumla ambao wanaweza kuwa na ruhusa ya kitu fulani. kwanza ni halisi mmiliki wa alisema file. pili ni kikundi file mali ya. Sisi siyo kwenda kwa kuzingatia sana juu ya hilo. Na jambo la mwisho ni, aina ya, kama dunia au kama mtu mwingine ambaye ni siyo maalum kwa file kuwa na haina haki yoyote ya umiliki juu yake. Hivyo kama sisi na mmiliki, kundi, na kisha dunia. Na kisha, kwa kila makundi haya, wewe unaweza kuwa na moja ya ruhusa tatu, OK, au nyingi wao. Unaweza kuwa na ruhusa ya kusoma. Unaweza kuwa na ruhusa ya haki. Na unaweza kuwa na kutekeleza ruhusa. Hivyo katika suala la aina halisi file, kusoma ruhusa ni kama kweli ya kusoma yaliyomo ya faili. ruhusa kulia ni kuandika na akasema file. ruhusa kutekeleza ni mbio faili kama unaweza kufanya wakati wewe kukimbia moja ya CS50 miradi yako. Hivyo wakati sisi ni kufikiri kuhusu files kama wakati tunatakiwa kusoma HTML file, kwamba mahitaji ya kuwa dunia someka, sawa? Takribani, pia mmiliki anataka kuwa na uwezo wa hariri faili hilo. Hivyo mmiliki kwenda haja kusoma na kuandika ruhusa. Wao si kweli haja nitafanya. Group, tunakwenda kutibu sawa na dunia kwa sasa. Hivyo wanahitaji ruhusa kusoma. Lakini hawana haja ya kuandika au kutekeleza ruhusa. Na sasa, kama sisi kufikiri nyuma wa zamani Psets, je, sisi kutambua ni aina hizi ya kuangalia kama binary, sawa? 1 anasimama kwa ndiyo. 0 kwa no. Na tunaweza kweli kutafsiri hii mapacha. Hivyo 110 katika binary itakuwa 6. 100 itakuwa 4. Same pamoja na ulimwengu. Hivyo idadi ungependa kupata kwa ruhusa kwa ajili ya hii itakuwa 644. MIKE Rizzo: Na kama unadhani nyuma wakati chmoded kitu, naamini walitoa katika kuweka tatizo mfano wa ambapo unaweza kufanya kitu kama chmod 644 na kisha faili jina. 644 basi, sasa unaweza kuona moja kwa moja ambapo kwamba inakuja kutoka. Hivyo hopefully kwamba inafanya kwamba kidogo zaidi ya wazi. Na kisha kwa uwazi ninyi guy ya - oh yeah, hapa hii ni mara ya pili. Hivyo 600 kisha ingekuwa tu kuwa mfano sisi akatoa hapa ambapo mmiliki ana kusoma na ruhusa haki wakati kundi na dunia hawana ruhusa yoyote kupata file. TOMAS REIMERS: Na kisha tuna haraka orodha ya ruhusa ya kawaida. Hivyo directories, unataka kwa kweli chmod 711. Haraka kando - kwa directory kuwa na ruhusa kutekelezwa maana ya kuwa na uwezo kufungua directory. Picha, CSS, JavaScript, mahitaji HTML 644 kwa sababu, kimsingi, dunia mahitaji kusoma ruhusa. Na PHP, ambayo guys tumeona ingawa sisi si kuzungumza kuhusu suala hilo madhubuti ni kawaida chmoded na ruhusa 600 kwa sababu ni kukimbia na ruhusa ya mmiliki. Angalau kwa appliance. MIKE Rizzo: Hivyo kama wewe kufanya si hasa bayana nini aina ya faili unataka katika kweli kuweka up mada hii - tulikuwa na tatizo na hii kwa sababu kila kitu si chmoded kwa usahihi - wewe ni kwenda kupata, aina, a makosa haramu kwamba tovuti Je, si kweli na ruhusa kupata file chochote unataka kupata. Na bila shaka, kwamba inaweza fasta - kama katika kuweka tatizo - kwa kubadilisha ruhusa ipasavyo. TOMAS REIMERS: Na maoni mwisho kwa maendeleo ya haraka ndani ni - sisi kuletwa hii juu, lakini sisi nilitaka kuleta it up tena - kama wewe kuuliza kwa server - jeshi hivyo serikali za mitaa, kwa mfano, com au chochote. - na huna bayana faili maalum, file kwamba kompyuta yako ni kwenda kuuliza kwa inaitwa index.html. Au kama hiyo haipo, index.php. Baridi. Ili tu kurejea wa kila kitu, hopefully, kwamba tumekuwa kufunikwa katika sehemu, na hotuba, na hivyo mbali katika CS50. Na sasa tunakwenda kuanza kuzungumza kuhusu hasa maktaba. JavaScript na CSS maktaba kwa ajili ya programu ya mtandao. Hivyo sababu moja ya haraka kwa nini tuna maktaba ni programu - kuna matatizo mengi katika programu, ambayo kushika popping up tena na tena, na tena. Unaweza taarifa kwamba mengi ya Nje haja uwezo wa kuwa na kushuka chini menus, kwa mfano, au haja uwezo kuwa na kifungo kiwango sana style, ambayo inaweza kuwa rahisi kitu. Sasa kwa kuwa wewe kuanza kupata ndani ya HTML, wewe kutambua kwamba vifungo unaweza kweli kuangalia kweli ugly kama wewe si kufanya kitu chochote. Hivyo mengi ya watu wameandika aitwaye maktaba. Na katika hali hii, wao ni pia hujulikana mifumo hiyo. Sisi ni kwenda kutumia mbili kubadilishana. Na nini ni ni wao ni kimsingi vipande premade ya maadili ya - ama CSS au JavaScript - kuchukua mbali mengi ya timu ya una katika coding. Basi kabla ya kufafanua kundi la madarasa au kabla ya kufafanua kundi la kazi kwa ajili ya Kesi JavaScript, ambayo unaweza kupiga baadaye. Na kisha unaweza, aina ya, kupata upatikanaji wa kanuni hii bila baada ya kufanya kitu chochote. mfano wa maktaba mara CS50.H. Hiyo ilikuwa maktaba sisi alimpa nyuma katika wiki moja, ambayo kuruhusiwa kufanya mambo kama hayo GetInt na GetString bila ya kuwa na kuandika code yoyote mwenyewe. MIKE Rizzo: All wa kulia. Hivyo hapa, kama sisi alikuwa ni pamoja na katika c yetu files mbalimbali maktaba, sisi pia ni pamoja na katika HTML yetu files maktaba mbalimbali. Kwa mfano, kama sisi alitaka ni pamoja na maalum JavaScript maktaba hapa, labda, moja kwamba tumekuwa imeandikwa wenyewe kama ni ndani ya nchi mwenyeji aitwaye script.js, sisi tu kutumia nukuu hii. Hivyo tuna usawa aina script JavaScript chanzo usawa JavaScript.js. Na kama unadhani nyuma CS50 yako tatizo fedha kuweka, kama wewe inaonekana katika header.php katika templates folder, unapaswa kuwa kuonekana baadhi ya haya pamoja. Hivyo hii moja kwanza - scripts - ni ikiwa ni pamoja na maktaba JavaScript. Ikiwa ni pamoja na maktaba CSS ni kidogo tofauti. Hapa, badala ya script TAG unahitaji tag kiungo. Na kisha, aina Nakala CSS ni tofauti kidogo. Huwezi daima kuwa ni pamoja na rel style karatasi. Lakini nadhani ni, kwa ujumla, mazoezi mazuri. Na kisha hatimaye, href, ambayo pengine aliona katika ATAGs yako kwa ajili ya kuunganisha katika viungo mbalimbali bayana tu kiungo wa wapi kupata hiyo. Kwa mfano, kama sisi alitaka kuunganisha maktaba mbalimbali - hebu sema tu - kwamba aliishi katika styles.css. Na sisi alitaka kuunganisha kwamba katika hiyo mwenyeji kwenye mtandao, tunataka nakala ya kwamba. Na kisha kuuweka ndani chochote tuna haki ya hapa badala yake. TOMAS REIMERS: OK, hopefully guys ni tayari ukoo na jinsi ya kuhusisha CSS. Alikuwa na kufanya hivyo juu ya mwisho brown kuweka yako. JavaScript, baadhi yenu labda na baadhi ya uzoefu na. Baadhi ya unaweza. Hivyo kwa sasa, tunajua kwamba JavaScript file ni mengi sana kama CSS faili katika maana kwamba unaweza zilizounganishwa na au kwamba unaweza ni pamoja na hiyo ndani. Na utapata mambo script. Na tunakwenda kutembea wewe kupitia kidogo ya JavaScript baadaye. Hivyo kwa kutumia maktaba - mara moja umefanya pamoja na hayo, ni kama rahisi kama literally wito kazi au kuongeza majina darasa hilo. Jambo la mwisho tunataka kuzungumza kuhusu katika suala la maktaba - na hii ni zaidi ya note kiufundi - ni leseni wazi chanzo. Hivyo wakati wewe kupata maktaba hizi halisi, unaweza kuwa na mawazo ya maswali kama ni OK kwamba mimi nina tu kutumia code ya mtu mwingine, hasa kwa sababu hiyo ni kitu sisi sana aliiambia wewe si kufanya katika kozi hii. Hivyo katika kesi ya wazi chanzo leseni, mengi ya watengenezaji - mara moja wameweza imeandikwa maktaba, ambayo wanafikiri inaweza kuwa manufaa kwa watu wengine - kutangaza habari hiyo kwa mtandao na kuwapa leseni. Na leseni kimsingi anasema mimi hili kutoa ruhusa kwa wengine watu kwa kutumia kipande hii ya programu na aina zifuatazo za masharti. Tumekuwa pamoja na kiungo kwa tovuti nzuri kwa kukusaidia kuelewa leseni katika kesi kukimbia ndani yao. Masharti ya kawaida ni mambo kama wewe ni kuwakaribisha kwa kutumia maktaba yangu ili muda mrefu kama wewe nipe mikopo. Wewe ni kuwakaribisha kwa kutumia maktaba yangu muda mrefu kama wakati wa mapumziko huna lawama mimi. Wewe ni kuwakaribisha kwa kutumia maktaba yangu kwa muda mrefu kama huna kuitumia pesa mwenyewe. Hizi ni aina ya kawaida masharti. Kwa CS50 ya mwisho ya mradi huu, wao haipaswi kuwa super husika kwa sababu miradi ambayo nyie kutumia ni pengine badala yake, aina ya, kujulikana. Lakini wakati wewe kweli kwenda kwenye dunia na kuanza kutumia maktaba, ambayo au anaweza kuwa kama vizuri kutekelezwa kama baadhi ya wale maarufu zaidi tuko kwenda kwenda kupitia. Ni vizuri kuwa na uwezo wa kuelewa leseni hizi na kwa kuelewa nini maana yake. Na kwenda nyuma. MIKE Rizzo: OK. Hivyo sasa kuingia kwenye mifano ya CSS halisi. Katika hatua hii hadi sasa, huenda si kuwa wamekutana hii. Lakini unaweza kuwa wamekutana katika maisha yako ya kila siku ambapo kitu kwamba inaonekana njia moja kwenye browser moja wanaweza kuangalia huo njia katika browser mwingine. Hii inaitwa kisakuzi ya browser utangamano. Na inazidi ni kuwa zaidi na zaidi ya tatizo, hasa kama browsers kuchukua uhuru zaidi na zaidi kutekeleza mambo kama wanataka. Hivyo kuondokana na kwamba, kuna kweli ni maktaba kubwa aitwaye Normalize.CSS. TOMAS REIMERS: Sisi ni pamoja na kiungo. Katika hatua hii, ni vema kama una Laptop yako katika huko kuangalia katika tovuti. Na sisi ni kutoa hii kwa haki yenu sasa kwa sababu tu CS50 ya mwisho mradi ni kweli kwenda kuuliza wewe kutekeleza vile vile na kwa njia ya browsers. Hivyo tu kuweka katika nyuma ya yako kichwa, hii ni maktaba ya ajabu kwa sababu itakuwa, aina ya, sanifisha mambo. Katika Firefox, kitu inaweza kuonyesha kama pixel moja upande wa kushoto. Na kisha Chrome anaweza kuamua kwamba kweli nini maana mara 10 saizi upande wa kushoto. Na unataka sanifisha hii. Kurejesha kwa kweli kufanya mzuri kazi ya kuhakikisha kwamba tovuti yako inaonekana sawa katika browsers. MIKE Rizzo: Hivyo kama sisi alitaka tu bonyeza kiungo kweli haraka na show nini kwamba inaonekana kama, unaweza unaweza kushusha ni kwa kutumia Download kifungo kubwa. Au ni mimi usome zaidi kuhusu hilo kwa kubonyeza kiungo hiki katika chini mkono wa kulia kona. TOMAS REIMERS: Na kama kweli bonyeza Read More haki pale - bonyeza chanzo juu ya GitHub - itabidi kweli kuona wazi chanzo leseni juu ya LICENSE.md haki pale. Na utaona hapa ni maarufu sana MIT leseni. Tena, kama kusoma kwa njia ya maandishi, wewe utakuwa na uwezo wa kupata kwenye tovuti sisi inatazamwa kabla na kuwa na uwezo wa kuelewa bila ya kuwa na kusoma kupitia maneno magumu ya kisheria. MIKE Rizzo: OK, kubwa. Hivyo kwamba ni kurejesha. Sisi alitaka kutoa kwamba kweli haraka. Oh, je, una swali? Watazamaji: Hivyo wakati wewe kushusha yake, tu kufuata kanuni hizo kwamba wana chini ya Download button? TOMAS REIMERS: Ndiyo, hivyo wakati kushusha - MIKE Rizzo: Oh, hiyo ni hatua kubwa. Hivyo, swali ni jinsi gani sisi kweli kushusha ni? Hivyo kama sisi bonyeza kiungo, tunaona kwamba ni kweli pops up katika kanuni chanzo. Hivyo kufanya hivyo, nini tunaweza kufanya ni bonyeza tu Save As. Save As na kwamba lazima kuleta file. Na kisha tunaweza kuchagua ila kama normalize.CSS. Na kisha wewe d na kuhusisha katika - TOMAS REIMERS: njia hiyo hiyo kiungo katika faili nyingine yoyote. Na mara moja kuhusisha katika, nini kubwa kuhusu kurejesha ni kweli itakuwa utunzaji wa wote ngumu kazi kwa yenyewe. Kwa maana ya kuwa huna kuongeza madarasa yoyote. Huna kufanya kitu chochote weird. Itakuwa kurejesha bila wewe kufanya kitu chochote zaidi. Ndiyo, una pamoja na hiyo. Google Chrome si kujibu. Tu haraka kando - Mimi niliona sisi akaruka ndani ya hii. wengine wa mada hii ni kwenda kuwa maelezo ya haraka. utafiti wa maktaba. Kimsingi, ni mambo gani. Nini kufanya. Jinsi wao ni muhimu. Jinsi unavyoweza kutekeleza yao. Kama unataka kuanza kuangalia yao, kufuatia pamoja, na kusoma kwa njia ya yao, napenda sana kuhamasisha hiyo. Vinginevyo, mwakaribishwa pia kwa kuanza kushusha yao na ikiwa ni pamoja na yao mbele ya macho tu na kuona nini wao kuangalia kama au wanafanya nini kama una Laptop yako mbele yenu. Kama siyo, wewe ni kuwakaribisha kwa kuweka kutusikiliza kuzungumza. Tunakwenda kuendelea kuongea. Na tuna muda mfupi mwishoni, hopefully tutaweza kweli kupata katika kuonyesha nini baadhi ya maktaba hizi kuangalia kama. MIKE Rizzo: Cool. Haki ya wote, hivyo sasa hebu majadiliano kuhusu herufi Ajabu. TOMAS REIMERS: hivyo herufi ajabu ni tovuti nadhifu kweli, hasa kwa wale wetu ambao ni chini ya kisanii wenye vipaji. Kupuuza jina herufi Ajabu, anatoa rundo la icons, ambayo ni muhimu sana. Hivyo mara nyingi utasikia kutekeleza icon unaweza kama x nzuri hivyo kwamba unaweza karibu kitu. Au unaweza wanataka baadhi ya aina ya Edit button na kalamu kuchora kama kila mtu mwingine ana. Na kwamba wakati wewe kujifunza kuwa kuchora icons wale inaweza kuwa tedious sana na magumu. Font Awesome - kama kweli kwenda kwenye tovuti - inakupa mengi ya icons chini ya icons juu. Yeah, tu juu. Ni nitakupa mengi ya icons kwa ajili ya bure. Hivyo hapa unaweza kuona tuna mambo kama kinyota, baa, bolt umeme, kalenda, mdudu, kitabu, na kadhalika. Hii inaweza kuwa muhimu sana. njia ni pamoja na hii ni ni pamoja na literally CSS faili. Na baada ya umefanya ni pamoja na CSS faili, nini unaweza kufanya ni kujenga tag aitwaye I. Ni satands kwa picha na darasa FA kusimama kwa herufi Ajabu. Na kisha, chochote darasa unataka. Basi, ikiwa mimi alitaka icon ya pamoja hii mraba hapa, napenda kutoa ni FA darasa. Na kisha FA hyphen pamoja na hyphen mraba. MIKE Rizzo: Cool, OK. TOMAS REIMERS: Na kisha, CSS mwisho maktaba tunataka kupata njia sisi ni kujaribu kushika ni ndogo juu ya CSS maktaba kwa sababu hatuna kutambua jina la mada hii ni JavaScript Maktaba. Lakini tulidhani kuwa inaweza pia kuanzisha wewe maktaba nyingine wakati sisi walikuwa wanazungumza juu ya maktaba. Ni Google Fonts mtandao. Na nini Google Fonts Web utapata kufanya ni kuongeza fonts na tovuti yako, ambayo ni njia ya kweli rahisi kufanya hivyo pretty na kutofautisha kuweka yako kutoka kwa kila mtu mwingine ni kama ana font nzuri au kama ana nzuri ukusanyaji wa fonts. Google Fonts Mtandao ni nzuri tofauti na wengine maktaba kwa maana ya kwamba ni kweli kuongozwa ufungaji. Hivyo kama wewe kufuata kiungo, ni google.com / fonts, naamini. Kama wewe kufuata kwamba, wanaweza kuchukua font yako. Unaweza kuchagua upande wa kushoto kutoka unene, mshazari, nakadhalika. Na kisha, mara moja umefanya, mteule unaweza bonyeza matumizi ya haraka. Haki pale. Haki ya chini ya sanduku. Na kisha, kitabu chini. Awali ya yote, wao kukupa CSS kwamba unahitaji kwa kweli kiungo yake. Ni haki huko. Unaweza nakala tu na kuweka kwamba in Na kitu kizuri juu ya mtu huyu ni si kweli hata haja ya kushusha faili. Nini ni kwenda kufanya ni itakuja kuhusisha na toleo la Google ya yake. Hivyo nyuma kwa hilo maana yake nini. Hiyo ina maana wakati mtumiaji downloads file yako - downloads HTML ukurasa wako - HTML yako ukurasa ni kwenda rejea faili hii. Hivyo basi, kompyuta yako kwenda kuona, oh, ni mwenyeji google.com badala kuliko theirsite.com. Hebu kwenda kuuliza Google kwa ajili ya faili hilo. Na kisha, ni kwenda pamoja na karibu kama ni sehemu ya tovuti yako mwenyewe. TOMAS REIMERS: Cool. Na mara moja pamoja na kwamba, basi kwa ni pamoja na katika CSS yako, anatoa line halisi. Hivyo kuweka mali font familia sawa kwa jina la font yako. MIKE Rizzo: OK. Hivyo sisi tu kumaliza na CSS. Na baadhi yenu wanaweza kuwa na mawazo, pia, tulikuwa na baadhi ya CSS juu ya CS50 Fedha. Lakini CSS maktaba mara bootstrap. Sisi kwa kweli ni pamoja na Bootstrap kidogo baadaye chini ya JavaScript kwa sababu kwa Maktaba Bootstrap CSS pia kuja na mengi ya JavaScript kwamba Bootstrap au Twitter - ambaye alifanya Bootstrap - anatumia kusimamia yote ya CSS yao. TOMAS REIMERS: Je, mtu yeyote yoyote maswali mbali kuhusu CSS kwa ujumla? Sisi ni nzuri? Kutisha. MIKE Rizzo: Ajabu. TOMAS REIMERS: Hivyo kwa kusonga kwenye JavaScript. MIKE Rizzo: Hivyo sisi alitaka kuzungumza kuhusu jQuery kwa kuanzia. Je, mtu yeyote habari za jQuery kabla au kutumika? Yeah, wanandoa? Hivyo kama wewe tu kazi na asili JavaScript, utapata mwenyewe kuandika mengi ya selectors kwa muda mrefu sana. Kwa hiyo kile jQuery gani ni inatoa nzuri kanga kwa JavaScript lugha ambayo inakuwezesha urahisi kuchagua na kuendesha mambo mbalimbali ndani ya hati kitu mfano wa ukurasa wa wavu au DOM, ambayo nadhani nyie kuwa na habari za katika hotuba katika hatua hii. TOMAS REIMERS: Kama si habari ya au kama si kuangalia hotuba Hata hivyo, Document Object Model ni kimsingi jinsi mambo kuwakilishwa. Hivyo HTML aina ya inaonekana kama mti wakati kwa kweli kuteka nje. Una HTML hiki juu. Una kichwa na mwili. Na kisha, ndani ya kuwa wewe na kila kitu kingine. Hiyo inajulikana kama DOM - Hati Object Model. Hivyo mfano ambayo inawakilisha vitu katika hati ni njia rahisi kufikiri juu ya hilo. Na moja ya jambo kubwa juu ya jQuery ni kweli hufanya apitaye kuwa na kufanyia mambo ya ndani ya kwamba incredibly rahisi. Rahisi, kwa kweli, kwamba wengi wa JavaScript maktaba au kama si wengi, wengi kuu ya wale utaona kweli wanahitaji jQuery hivyo kwamba wanaweza kukimbia wenyewe tu kwa sababu kama hakuwa na jQuery, wewe itakuwa kupoteza muda mwingi kujaribu kufikiri jinsi ya kuchagua baadhi ya mambo na jinsi ya kufanya mambo mengine. Na wengine Jambo kubwa juu ya jQuery ni kwamba browser msalaba sambamba. Basi kumbuka nyuma wakati sisi alisema kuwa si wote browsers kutekeleza mambo kwa njia hiyo? Hii ni kweli hata katika JavaScript. Na moja ya mambo makubwa kuhusu jQuery ni kwamba kuchunguza browser na kuchunguza njia sahihi. Hivyo kama unahitaji kuchagua hiki, Internet Explorer anaweza kusema wewe ni wanatakiwa kufanya kwa njia hii. Firefox anaweza kusema sahihi njia ni njia hii. jQuery haina huduma. Wakati kumweleza jQuery kuchagua hiki itakuwa kufikiri ni jinsi gani ni wanatakiwa kufanya hivyo ndani ya browser user kwa sasa ni katika, na kisha kufanya njia hiyo. MIKE Rizzo: Hivyo basi si kuzungumza kuhusu matumizi ya jQuery kidogo. Tu kama PHP, jQuery ina hasa mapendano kwa ishara ya dola. Hivyo utapata kwamba yoyote jQuery - vizuri, si wote. Unaweza wakati mwingine kuchukua nafasi ya dola saini na neno jQuery. Lakini kwa ujumla, kwa sababu tu ya mfupi, wakati wowote unaweza kuona jQuery kuwa kutumika utakuwa na ishara ya dola. Hivyo hapa sisi ni kuonyesha mwanzo tu selector kwa kipengele katika DOM. Hapa, tuna ishara ya dola ikifuatiwa na mabano wazi na kisha quotes. Na ndani ya quotes kwenda selectors yetu kwa ajili ya mambo mbalimbali. Tu kama katika CSS, sisi zinahitajika selectors kwa kuwa na uwezo wa style mambo mbalimbali ndani ya ukurasa. Wale selectors mbalimbali kutafsiri hasa katika jQuery na JavaScript, kwa sehemu kubwa. Kwa hiyo hapa tuna dot foo. Hivyo kama wewe kukumbuka kutoka hotuba, dot tu ina maana darasa. Hivyo sisi ni kuchagua hiki kwa darasa foo. Basi, ikiwa mimi kwenda mbele na kufungua wetu JavaScript console hapa kweli haraka tu kuonyesha yake, kama mimi tu aina ishara ya dola, tunaona kwamba ni baadhi kazi ambayo anakuja juu. Na ni tu inavyoelezwa na jQuery. TOMAS REIMERS: Kwa wale usio wa kawaida, console ni chombo ndani ya Chrome, ambayo inaruhusu, kimsingi, kukimbia JavaScript juu ya ukurasa wa sasa. Hii utapata incredibly muhimu wakati wewe ni kweli debugging na wewe haja ya kuwa na kama, ni nini sasa thamani ya baadhi ya variable kimataifa au nini ni kitu kingine? Ni aina ya kama GDB na ubaguzi kwamba unaweza kweli kuendesha mambo juu ya ukurasa na katika mtindo rahisi sana. Na pia haina, kimsingi, kuangalia pamoja nawe kabla ya haina kitu chochote. Hivyo ambapo, GDB inaweza kuwa kama, wewe ni uhakika unataka kukimbia hatua ya pili? console ni katika kweli. Hivyo kama ukurasa wa mtandao utoaji na kufanya chochote ni kufanya, baraza pia mbio pamoja na yake. Na unaweza kuweka kumbukumbu ya kificho katika kwamba console, ambayo itakuwa kuwa na kukimbia juu ya ukurasa. MIKE Rizzo: Kwa hiyo kuingia console, Mimi nadhani lazima kwa ufupi kutaja jinsi ya kufanya hivyo. Katika shida na matatizo mwisho kwamba unaweza kuwa na kutumika Chrome ya kukagua hiki kazi au mtazamo ukurasa chanzo - na wale ni kupatikana tu kwa haki kubonyeza ukurasa au maalum hiki na kufanya aidha kukagua hiki au mtazamo ukurasa chanzo. Sisi pia wanaweza kupata JavaScript console moja kwa moja na kuchagua kukagua hiki. Hivyo basi tu hit console upande wa mbali wa kulia. Vinginevyo, unaweza pia wamekwenda kwa juu upande wa kulia kona, ambayo ni kukatwa screen hii ambapo ina tatu baa usawa. Na kwenda chini ya zana na kisha JavaScript console hapa ambapo unaweza kuona - angalau juu ya Windows - njia ya mkato ni Kudhibiti Shift J. Hivyo basi kama sisi alitaka kuchagua kipengele ndani ya ukurasa huu, kama mimi ilionyesha kabla ya, sisi kufanya ishara ya dola wazi parens na kisha ananukuu. Jambo la kuvutia ni, kwa ujumla, quotes moja na quotes mbili ni exchangeable. Hivyo mengi ya watu tu kutumia moja quotes kwa sababu wao ni kasi ya aina kuliko quotes mbili kwa sababu huna na kushikilia chini Shift. Hivyo mimi itabidi kufanya hivyo hivi sasa. Hivyo nataka kuchagua kitu darasani. Chombo, kwa sababu tu najua kwamba kitu ambacho ni juu yetu mtandao ukurasa hivi sasa. Na mimi hit kuingia. Na tunaweza kuona kwamba aliliteua yake. Hivyo inaonyesha up kwamba akarudi kwamba kitu. Ili uteuzi msingi. Kama tulitaka kweli kuendesha yake, ingekuwa kuwaita kitu juu ya kwamba uteuzi, ambayo tutapata katika baadaye. TOMAS REIMERS: Hivyo tu kwa kuangalia kwamba zaidi katika kina, hii ni hakuna tofauti kuliko wito kazi tukiwa katika C. jina la kazi hapa ni weird kidogo. Ni ishara ya dola. Ni tu jina ya kazi. Kuna kitu maalum kuhusu hilo. Tuna mabano wazi. Basi, sisi na moja hoja yetu, ambayo katika kesi hii hutokea kwa kuwa kamba, ambayo ni selector kwa ajili yake. Na kisha, tuna yetu C. mabano. Hiyo ni. Siyo kwamba tofauti kabisa. Pamoja na kwamba, haina kuangalia weird sana. Na kwamba wanaweza kuwa, aina ya, huku uhakika kwa mengi ya watu. MIKE Rizzo: Kwa hiyo vile vile, kama sisi alitaka kuchagua hiki ambayo ina ID, sasa tunataka kuchagua na ID badala ya darasa. Itakuwa jambo kama hilo ambapo sisi tu kufanya ishara mkali kwa ID. Hivyo sisi ni kuchagua hapa mambo ambayo na ID bar. TOMAS REIMERS: Na hii hadi. CSS kwamba hadi. Tu kama katika CSS, unaweza kuchagua wote viungo, ambayo darasa foo. Hapa, kitu kimoja. Unaweza kufanya a.foo, ambayo kuchagua yote ya viungo pamoja na darasa foo. Unaweza kufanya bar mkali, ambayo kwa kuchagua kiungo na ID bar na hivyo na kadhalika. Yoyote selector CSS ni halali jQuery selector. MIKE Rizzo: Yeah. OK, hivyo sasa hebu kupata katika kidogo ya kudanganywa kwamba tunaweza kufanya kwa yetu jQuery. Hivyo jQuery ina aina fulani ya nukuu ambapo sisi tu kutumia dot mwishoni. Na unaweza kufikiria hii kama katika C jinsi tulikuwa structs tofauti. Na kwenda katika structs wale, ungekuwa kutumia dot kupata ndani yao. Hii ni aina ya, jambo kama hilo. Tu sasa tuna kazi ndani ya hii selector kwamba tunaweza kuwaita juu yake. Hivyo hapa, mfano wa kwanza sana unaweza kuona ni CSS selector. Na kimsingi, nini kwamba hana ni inatumika kwanza hiki CSS hii kitu kwamba kuchaguliwa - kipengele hiki kwamba kuchaguliwa - kwa thamani hiyo. TOMAS REIMERS: Kwa hiyo tafsiri rahisi ya kwamba itakuwa kama jQuery, kimsingi, tu alichukua foo. Na kisha katika CSS alisema, rangi nyekundu na karibu. Ni wazo moja. Nini ni kosa ni ni aliliteua foo mambo yote. Na kisha ni kutumiwa. Aina ya rangi mali ni sawa na nyekundu. MIKE Rizzo: Vile vile, tunaweza pia kubadilisha yaliyomo halisi ya nini ni kuonyesha juu ya HTML ya ukurasa, ambayo ni kweli baridi kwa sababu ina maana yako kurasa za mtandao sasa unaweza kuwa nguvu kabisa na wala si kuwa tuli kwamba magazeti kwa kutumia PHP mwanzoni mwa ukurasa kuwa kubeba. Hivyo hapa, kama sisi alitaka kubadilisha HTML halisi ya ukurasa, tunataka sasa kuwaita HTML kazi, ambayo basi tu kuwekeza chochote sisi bayana katika kwamba kipengele kwamba sisi kuchaguliwa. Hivyo hapa sisi ni kuchagua hiki kwa darasa foo na kisha kusema kwamba ni HTML ni sasa hujambo dunia. TOMAS REIMERS: Na wakati unafikiri juu ya nini ni maombi ya muhimu ya hii, moja CSS, jambo la kwanza kwamba unaweza kuanza kufikiria ni katika suala la hata kushuka chini menus. Unaweza kuanza kufanya mambo kama, wakati user hovers juu ya sehemu ya juu ya kushuka chini, unataka kufanya sehemu ya chini inayoonekana. Haki? Hivyo katika CSS, tuna mali kufanya kitu inayoonekana. Mambo kama kuonyesha matumbo hakuna bila kufanya hivyo asiyeonekana. Kuonyesha kuzuia bila kufanya hivyo inayoonekana. Au hata kama unataka kwenda rahisi, wewe mambo kama kujulikana usawa inayoonekana, na kujulikana ni sawa na siri. Na unaweza kuanza kutekeleza mambo kama kushuka chini menus haki baada ya kupata njia ya wazo la jinsi unaweza kufikiri wakati huu kufungua, ambayo tutaweza kupata njia kwa ufupi sana. Lakini tunaweza kuanza kuona maombi ya hili. Kwa maana hiyo, kama ungekuwa na kujaribu na kutekeleza, hebu sema, chat injini na unataka kufanya kidogo hotuba Bubble kuja wakati wowote wameweza got ujumbe mpya, mara moja kupata ujumbe mpya, unaweza kufanya kidogo hotuba Bubble kuja kwa kubadili HTML ya ukurasa, haki? Kwa kuongeza kuwa hotuba ya ziada Bubble na maandishi ya ziada huko. Yeah? Watazamaji: Hivyo wewe bila kuiweka hii ndani ya HTML code katika aina ya kama [Inaudible]? MIKE Rizzo: Haki. Yeah, tutaweza kupata kwamba katika kidogo. Yeah, ni sawa a kidogo ya PHP. Si hasa kama hayo. tofauti nzuri ya kufanya ni nini hii ni kweli editing wakati sisi hariri ukurasa kwa sababu si kwenda kuwa editing faili halisi kwamba ni kuwa agizo juu ya server kwa sababu dunia haipaswi kuwa ruhusa kuhariri faili yako. Hii ni editing tu nini juu ya ukurasa na nini kuwa kuonyeshwa ndani ya browser. Hivyo kama ungekuwa Reload ukurasa baada ya, kusema, kufuta kitu kama sisi kuona tunaweza kufanya na kuondoa wito, kwamba kitu gani basi kutokea tena na tena. TOMAS REIMERS: Hivyo njia moja ya kufikiria, hii ni kama mimi nina kompyuta yako na Mike ni, aina ya, server. Nini kinaendelea kutokea ni mimi nina kwenda kuuliza Mike, hey, naweza kuwa na nakala ya ukurasa wa mtandao huu? Na yeye itabidi nipe nakala yake. Hapana, si jambo la awali. Ni tu nakala. Na kisha itakuwa kama, oh, kuna JavaScript hapa. Ni wazi, ni lazima hariri ukurasa kuwa kama hii. Na mimi nina editing nakala yako. Lakini si kwamba utekelezaji wa halisi nakala. Na kama ningekuwa kumuuliza tena mahitaji ukurasa, - hey, naweza kuwa na nakala nyingine safi - yeye anaenda kunipa nakala nyingine safi. Na kisha, mimi nina kwenda kufanya kitu kimoja kama, oh, hii JS hapa kwamba anasema hariri hii. Na mimi nina kwenda kuweka kufanya hivyo. MIKE Rizzo: Kwa hivyo jambo la kweli baridi kwamba unaweza kufanya na jQuery ni kweli kuongeza aina mbalimbali ya mifano kwa michoro na ukurasa wako. Sijui kama umefanya milele kuonekana ambapo wewe ni kujaribu kujaza fomu online na huna kujaza mambo kwa usahihi. Hivyo kitu kidogo slides chini juu na anasema wewe hujafanya hili kwa usahihi. Tafadhali jaribu tena. Na wakati huo, anaweza hata tu slide up. Zinageuka jQuery imejenga katika kazi kwamba kufanya yote ya uhuishaji kweli, kweli ni rahisi. Kwa hiyo, kuna kwanza fade nje kazi, ambayo unaweza kupiga juu ya kitu. Na ni njia ya kubadili CSS ya kwamba hiki kwa njia animated. Hivyo inachukua chochote hiki simu yake kuisha juu ya. Na kisha, polepole mabadiliko hayo ya opacity mpaka unaendelea uwazi kabisa. TOMAS REIMERS: wengine maarufu moja ni slide chini, ambayo itafanya kitu kuonekana kwa sliding chini. Hivyo katika kesi ya kushuka chini menu, tena, wakati sisi kujifunza jinsi ya kuchunguza wakati huu imekuwa hovered juu, unaweza tu kuwaambia chini hii sehemu slide chini sasa. Na kisha, inaonekana kwa sliding chini. MIKE Rizzo: Na kisha, kama wewe tu na baadhi ya aina ya uhuishaji akilini kwamba jQuery siyo lazima kutoa. Kwa mfano, hebu sema jQuery haina kutoa kwa slide chini na slide up. Naam, hebu sema wewe alitaka slide kitu katika kutoka upande wa kushoto au kutoka haki ya aina ya kama CS50 ukurasa kuu gani wakati wowote kwenda jopo mpya. Ungependa basi pengine kuwa na kutekeleza wewe mwenyewe kwa kutumia hai kazi ndani ya jQuery. Hivyo vile vile, wewe tu hai. Na kisha, ndani yake inachukua kamusi ya maadili mbalimbali kwamba wewe ni zinatakiwa kupita. Hivyo hapa, kama sisi alitaka hai hiki foo kama kwamba upana wake ama expands au mikataba 80, saizi ya faili kulingana na kile sasa ni. Tunataka kupita tu kwamba kama hoja ndani yake. Hai pia kuwa baadhi ya hoja nyingine kwamba unaweza kupita, kwa mfano, kasi ya uhuishaji kwamba unataka kuwapa. Na kwa kufanya hivyo, napenda tu kusema haraka Google jQuery hai. Na kisha, kulea ukurasa huu, unaweza kuona ni got kundi la mbalimbali mali kwamba unaweza kupita. Na mimi moyo - wakati wowote kuja katika kitu ambacho si kujua au unataka tu kujifunza zaidi kuhusu njia fulani kwamba unaweza kupiga juu ya kitu - tu Google yake. jQuery ni kubwa mno vizuri kumbukumbu. Na mara nyingi kuna mengi ya mifano kwamba wao kutoa kwa ajili yenu. Kama sisi kitabu chini - njia ya chini - kwamba tunaweza kutumia, kama vile. Tena, wakati developer kweli inakwenda kupitia shida ya kuandika a maktaba, wao kawaida wanataka mtu wa matumizi yake. Hivyo pamoja na ni kwenda kuwa nyaraka. Na nyaraka kwamba unaweza kawaida kuwa na kupatikana kwenye ukurasa mradi huo, ambao ni kwa nini sisi alitoa kwamba tovuti ya awali katika mwanzo, ambayo viungo wewe kurasa mradi hivyo unaweza kuona nyaraka hiyo. Kwa kawaida, ukurasa wa mradi katika kesi ya [inaudible], ni niliwaambia majina ya madarasa. Katika kesi ya JavaScript, anatoa wewe jina ya kazi. Kwa njia, kama sisi kitabu hadi juu, haraka upande note juu ya kazi ni wakati wowote kuona kazi kutekelezwa kama hii kwa bidii mabano katikati, kwamba njia kwamba mali ni ya hiari. Tu vichwa up. Nimeona maswali mengi juu ya hilo. Hivyo hapa tunaweza kuona kwamba animate inachukua mali kama hoja muhimu. Na kila kitu kingine ni hiari. Upande kumbuka - unaweza kufikiria hii, aina wa, kama kurasa mtu. Kurasa mtu ni nyaraka kwa C na kwa mambo mengine mengi, kama vile. MIKE Rizzo: Hivyo tumejifunza jinsi ya kubadili CSS mbalimbali juu ya ukurasa, hai, na kuondoa kuongeza HTML. Lakini moja ya kweli nguvu zaidi mambo kuhusu JavaScript na hasa jQuery - nini inakuwezesha kufanya ni kujibu mambo mbalimbali kutokea. Kwa mfano, hapa tuna tukio handler. Na kwamba tu ina maana wakati wowote hii tukio hutokea, sisi kushughulikia katika baadhi ya njia. Hivyo hapa, generic jQuery tukio handler ni dot juu. Na kisha, jambo la kwanza zinazotolewa ni nini tukio ni lazima kuwa na kusikiliza kwa. Hivyo hapa, ni click kwamba tunasubiri kwa. TOMAS REIMERS: Njia nyingine, unaweza kuwa na juu ya hover, ambayo ni moja maarufu sana. Hivyo nyuma na kushuka yangu chini orodha ya wazo. Ingekuwa moja ya juu juu ya hover. Na kisha unaweza mabadiliko hayo. MIKE Rizzo: Haki. Na kisha, wakati hiyo ikitokea, ni tu executes kazi hii kwamba sisi kuwapa kama hoja na kwamba ni alerts hujambo au hi. TOMAS REIMERS: Hivyo katika kesi ya JavaScript, hii ni mahali tunahitaji kuondoa wenyewe kutoka C. Sisi unaweza kweli kuchukua kazi kama hoja. Na kuna mengi ya kweli tata njia za kufanya hivyo. Sisi ni kwenda kukuza njia moja, ambayo ni unaweza kufafanua kazi pale. Hivyo wakati wewe ni kuuliza kwa ajili ya kazi kama parameter, wewe ni kimsingi tu kwenda kufafanua kazi papo hapo. Na njia kufafanua kazi katika JavaScript ni wewe literally kusema kazi. Kisha, kwa kawaida, jina ya kazi. Lakini sisi ni kamwe kwenda kumbukumbu kazi hii tena. Hivyo sisi kuondoka majina. Kisha mabano, kisha curly braces, na kisha code ndani ya hiyo. Kwa hiyo sisi kuelewa can hii kuwa utata kidogo. Hivyo sisi kukupa aina ya jumla ya nini tukio handler inaonekana kama chini, ambayo ni juu ya matukio. Na kisha, kanuni yako ndani ya hiyo. MIKE Rizzo: Je, kuna maswali kuhusu hili? Hii inaweza kuwa utata kidogo mara ya kwanza unaweza kuona ni. TOMAS REIMERS: Wewe kweli wanataka kufungua file na kuwaonyesha baadhi jQuery sasa hivi? MIKE Rizzo: Yeah, hebu kufanya hivyo. OK. TOMAS REIMERS: Basi sasa tuko katika appliance. Na kile ambacho tumefanya ni tumekuwa kuchukuliwa uhuru wa kujenga wote index.html file, ambayo viungo kwa JavaScript file. Na tunaweza kufungua - yeah. Naam, ni gani mambo mawili. kwanza ni viungo JavaScript file. Na tutaweza kuona kwamba hapa. Tunaona kwamba katika kichwa cha HTML hati, hasa. Hivyo utaona pale kwamba sisi, kimsingi, kusema src, ambayo inasimamia kwa chanzo. Na kwamba URL. Hivyo hapa unaweza kusema tumekuwa pamoja na jQuery. Na tumekuwa pia ni pamoja na maandiko. njia nyingine ni pamoja na JavaScript ni kwamba unaweza ni pamoja na inline script tag kama tuna chini ambapo ni Anasema aina script ni Nakala JavaScript. Hivyo sisi ni kusema, kusikiliza, sisi ni kuhusu ni pamoja na script. Na aina ya kwamba script ni JavaScript, ambayo ni aina ya maandishi. Rahisi sana. MIKE Rizzo: Hivyo hii, aina ya, anapata swali lako kuhusu jinsi sisi ni pamoja na JavaScript katika files yetu kwa sababu wakati sisi alikuwa PHP, sisi kufanya kitu kama hii. Na kisha, na PHP kazi yetu - hebu sema hifadhi ya kufanya kitu na kwamba - huenda huko. Hata hivyo, kwa sasa tuna vitambulisho script kwamba sisi kuwapa, ambayo ni kweli sehemu ya HTML yenyewe kwa sababu si faking kuwa HTML file kama ni ni katika PHP kwa sababu kama kweli kwenda katika na kuangalia chanzo cha ukurasa, utaona vitambulisho haya script huko na JavaScript kuhusishwa na yao katika. Hivyo basi, kama sisi alitaka kuandika baadhi JavaScript - hebu sema tu sisi alitaka mabadiliko mwili kwa sababu sasa hivi sina tags nyingine yoyote kwamba naweza kweli hariri badala ya mwili. Hebu sema tu nilitaka kubadili CSS ya kwamba. Hivyo tutaweza kwenda mbele na mabadiliko ya rangi yake na nyekundu. Basi, mimi kuokoa faili. Hebu kwenda nyuma ya mtandao wetu ukurasa, mahitaji, na ni gani moja kwa moja kwa sababu hakuwa na kuonekana kama ni kusubiri wakati wote kwa sababu sisi walikuwa si kusikiliza kwa ajili ya tukio au kitu kama hicho. TOMAS REIMERS: Hivyo kama sisi kwenda nyuma na kwamba faili hasa - HTML faili - nini wewe kwenda kuona ni sisi na - kukumbuka kwamba hii ni kubeba, aina ya, mpangilio. Hivyo tuna kwanza kichwa. mizigo files hizo mbili. Kisha sisi kwenda mwili. Na tunaona hujambo dunia. Hivyo sisi atatoa hujambo dunia. Na kisha jambo la mwisho tuna ni sisi na tag script. Hivyo anaendesha tag script kwa sababu ni si kuwaambia ni kusubiri kwa kitu chochote. Na kwamba ni ya msingi zaidi njia ya kukimbia JavaScript. Kwa kuwa alisema, unaweza kuweka script tag up katika header tu kuonyesha hatua hii? Na kukimbia kwamba. Tunakwenda taarifa kwamba hakuwa mabadiliko ya rangi. Na hii ni moja ya matatizo ya JavaScript ni kwamba mambo ni kubeba katika mpangilio. Hivyo wakati huo kwamba kanuni alikuwa akikimbia, sisi kuchaguliwa - kurudi - tag mwili. tag mwili haipo bado kwa sababu JavaScript ni sambamba na HTML. Kwa hiyo kivinjari ni kama kuchagua mwili. Hakuna kitu kama bado ni. Hivyo tunaweza kupuuza hiyo. Na sisi kuendelea. Na kisha sisi kufafanua tag mwili. Lakini kamwe anapata updated. Hivyo wakati wewe ni utekelezaji wa script vitambulisho, kuhakikisha mahali baada ya tag mwili. Ijayo slide. MIKE Rizzo: OK. Hivyo sisi iliyopita kitu. Lakini hakuwa na kuangalia kama ni alijibu kwa sisi wakati wote kwa sababu tu ya aina ya alifanya hivyo kwa haraka kama ni kubeba ukurasa. Basi sasa, badala ya kufanya hivyo, kwa nini wala sisi kuongeza tukio handler. Basi hebu kufanya kitu kwa mwili tena. Na hebu sema sisi kufanya hivyo kwa - click. Tutaweza kuongeza kazi. Mabadiliko Hebu: TOMAS REIMERS ni rangi nyekundu tena. Kwa nini? MIKE Rizzo: Yeah, hebu mabadiliko 'rangi yake nyekundu tena. Sawa. Basi hebu upya ukurasa. OK, tunaona - kama ilivyotarajiwa, haina kurejea nyekundu bado. Lakini basi tunaweza kwenda mbele na bonyeza yake. TOMAS REIMERS: Na haina kugeuka nyekundu. MIKE Rizzo: Na ni gani kugeuza nyekundu kama ilivyotarajiwa. TOMAS REIMERS: Na tunaweza kuona jinsi tunaweza kuanza kujenga msingi sana mwingiliano. Mambo mengine sisi kutaka kufanya ni, kama hatutaki kufanya mwili rangi nyekundu, hebu kufanya HTML background rangi nyekundu. Tu hivyo ni CSS huo. Na wakati sisi mabadiliko hayo, tunaweza kuona hii makubwa sana athari za mabadiliko ya nzima ukurasa. Hivyo tena, kama wewe ni utekelezaji wa mambo, unaweza kuwa na sehemu moja ambayo ni maana ya kuwa kwavyo. Hebu sema Exit kifungo na nyingine nzima sehemu, ambayo ni maana ya kujibu. Hivyo ungependa kuondoa dirisha wakati kinachotokea. MIKE Rizzo: OK. Tu kama mfano - hakuwa kupata kuona hili mapema - Mimi itabidi kuonyesha nini inaonekana kama wakati sisi kuficha kitu. Basi, mimi itabidi kwenda mbele na wala slide up. TOMAS REIMERS: Wanataka wa kufuta kwamba katika aya ya aina kabla ya sisi kufanya hivyo? MIKE Rizzo: OK. Yeah, kwa nini sio sisi kufanya hivyo hivyo tu tunaweza kuchagua ni kidogo zaidi. TOMAS REIMERS: Na hebu kuwapa darasa. MIKE Rizzo: Yeah. OK, hivyo hebu angalia. Badala ya kuchagua mwili halisi sasa, mimi itabidi kuchagua kila kitu kwa darasa hello, ambayo hapa sisi tu jambo moja. Hivyo tunapaswa kuwa na wasiwasi juu ya hilo. Kwa hiyo nitakuwa mahitaji yake. Mimi itabidi kwenda mbele na bonyeza yake. Na, aina ya, alifanya slide weird juu ya jambo, ambao hawakuwa kuangalia kwamba kuvutia. Kwa ujumla, hawana kuangalia pretty nice. Nadhani hii - kwa baadhi sababu - hakufanya hivyo. Mimi itabidi kufanya fade nje ili unaweza kuangalia pia. Nicer sana. Na kisha, kama mimi kufungua JavaScript kuwafariji tena na sisi wanataka kuona nini inaonekana kama wakati sisi kuisha hivyo in Sasa, mimi kuwaita tu kuisha katika juu yake. Na unafifia nyuma in Vile vile, tunaweza kweli pia kupita hoja kufifia au kuisha nje, ambayo ni, aina ya, kasi yake. Basi hebu kwenda mbele na kusema tunataka ni kwenda polepole kuisha in Kwa hiyo mimi nadhani bado walionekana pretty haraka. Lakini ilikuwa ni polepole zaidi kuliko kabla. TOMAS REIMERS: Na kama unataka kupata nje zaidi kuhusu mambo haya, tena, tu kwenda nyaraka jQuery, ambayo tumekuwa kupeni, na kusoma njia hizi. Wao hati kazi zao incredibly vizuri. MIKE Rizzo: OK. Kwa hiyo mimi nadhani hebu kwenda nyuma na hii. Na tunaweza kuongea kuhusu ukurasa yetu ya mwisho. Naam, tunaweza kumaliza na Bootstrap. Na kisha tutaweza kufungua it up kwa baadhi ya maswali. Na kama wewe guys kuwa na mawazo yoyote kwamba Ningependa kujaribu kutupa up na kuona kama tunaweza kutekeleza yao na JavaScript haraka. Hivyo kweli haraka kuhusu Bootstrap, ambayo ilikuwa moja kwa moja ni pamoja na katika tatizo lako mwisho kuweka katika CSS folder na kwa kweli wanaohusishwa na katika yako header.PHP. Hivyo unaweza aliongeza kuwa madarasa ambayo hufafanuliwa ndani ya Bootstrap yake. Na ingekuwa moja kwa moja haswa mambo hayo ipasavyo. TOMAS REIMERS: Kwa hiyo Bootstrap ni sana kitu kichawi zilizotengenezwa na watu katika Twitter. Na nini ilikuwa maana ya kufanya ni - kabla ya Nje walikuwa kweli kwa bidii na kufanya kuangalia nzuri, hasa wakati tulikuwa mengi ya vipengele kawaida. Hivyo mengi ya kifungo juu ya mtandao inaonekana sawa. mengi ya mashamba Nakala zinaweza kufanywa kuangalia bora kuliko kiwango asilia shamba pengine kujua kutoka kwa kweli Nje ya zamani au kweli iliyotengenezwa vibaya Nje, ambayo tu kuangalia kama halisi masanduku Nakala bila aina yoyote ya maandishi kivuli au aina yoyote ya nzuri muhtasari. Kwa hiyo kile Bootstrap alifanya alikuwa hayo, wakasema, vizuri, tuna mengi ya mitindo ya kawaida. Mbona sisi kufanya moja ya kawaida seti ya CSS na seti moja ya JavaScript kama vizuri, ambayo inaweza style kama ni na ambayo inaweza kutoa watu mambo kama tone chini menus, ambayo inaweza kutoa watu mambo kama modals. Modal ni nini pops juu ya ukurasa wakati wowote ni madhubuti kusema kitu, ambayo huzuia zaidi mwingiliano mpaka kuingiliana na yake. Jambo kama hili, wewe ni kuhakikisha unataka kufuta jambo hili? Unaweza si kweli kufanya kitu kingine chochote mpaka kusema ndiyo au hapana. Ilichukua haya yote na vifurushi ni pamoja na akasema, hapa sisi kwenda. Watu sasa wanaweza kutumia hii. Na unaweza kupata juu ya katika getbootstrap.com. Ilikuwa moja kwa moja ni pamoja na ndani ya tatizo lako mwisho kuweka. Na wewe ni zaidi ya kuwakaribisha kwa matumizi yake juu ya mradi wako wa mwisho. Na kama unataka kufuata kwamba kuhusisha kupata Bootstrap. Utaona hapa ni Bootstrap CSS tovuti. Utaona Bootstrap. Na kama wewe kitabu chini, utaona jinsi ya kushusha ni, jinsi ya kufunga hiyo, na kadhalika. MIKE Rizzo: Na unaweza pia, Inafurahisha kutosha, Customize kuwa aina yoyote ya mandhari kwamba unataka. Najua kwamba kitu mimi kwa yangu mradi wa mwisho wakati mimi alichukua darasa ilikuwa Customize. toleo mbalimbali ya Bootstrap kwamba alikuwa alama ya mpango mbalimbali na maumbo tofauti ya baadhi mambo mbalimbali. Basi, mimi moyo kwa kucheza na hiyo. Ni aina ya furaha kufanya. TOMAS REIMERS: Kuangalia kote juu tena, ni sawa na herufi Kutisha tovuti. mengi ya nyaraka kuanza kuonekana kama hiyo wakati wameweza kuonekana kutosha yake. Kwa hiyo hapa tuna CSS sehemu ya hili. Na utaona jinsi unaweza style mambo. Hivyo kama wewe bonyeza meza, kwa mfano, unaweza instantly kufanya meza pretty kwa kifupi kuongeza darasa meza yake. Mambo sawa kwa vifungo. Kama wewe tu kuongeza darasa BTN na BTN default au BTN ya msingi, unaweza kupata moja yoyote ya kifungo haya na haya mitindo kabla ya kufanywa. Na kisha, kama wewe ni kuangalia kwa kitu ngumu zaidi kuliko tu hutengenezwa kwa mkao nini w tayari, juu ya juu ya JavaScript tab katika sisi juu kuwa na rundo ya vipengele. Kwa hiyo hapa tuna mabadiliko, modals, dropdowns, tabo, na tooltips. tooltip ni nini pops up chini ya yako panya wakati hover juu ya kitu. Popovers, alerts, vifungo, collapsible accordions ni nini wao ni kawaida kuitwa. Carousels, ambayo flip kwa njia kama images. Basi hizo vipengele ya Bootstrap. Napenda moyo sana kwenda kuangalia yao. Kuna JavaScript sehemu na sehemu CSS. Kujisikia huru kutumia yao kama wewe. Sisi siyo kwenda sana ndani yao kwa sababu sisi kuhisi nyaraka ni kweli vizuri. Na yeah. Je, una maswali yoyote kuhusu hilo? MIKE Rizzo: Kwa hiyo kama ni kweli haraka upande, mpango wa tovuti hii kwamba sisi haraka kuweka pamoja kwa mada hii ni kweli kufanyika kwa kutumia Bootstrap. Kama unaweza kuona, wakati sisi bonyeza juu ya haya tabo mbalimbali, sisi ni kweli kamwe kuacha sasa index.html ukurasa huu. Hivyo kile sisi na ni divs mbalimbali ndani ya index.html hii. Na kisha, wakati sisi bonyeza mbalimbali tab, ni tu kubadilisha ambayo kuonyesha ya mtu. Hivyo ipasavyo nafasi yao, mabadiliko HTML ya ukurasa ili tab sasa ni alama kama kazi ili inaonekana tofauti na inaonekana ni nzuri. TOMAS REIMERS: Basi hiyo ilikuwa yote kufanyika bila sisi kuandika karibu yoyote CSS. Tunaona pia header kote juu, ambayo rangi ni na sisi. Lakini halisi kuweka juu ya juu ya ukurasa na kufanya ni kitabu mara Bootstrap. Na kisha hata kwa ajili ya maktaba nyingine - hii ni mmoja kuongelea lakini moja unaweza Google kama unataka. Hii inaitwa prettify.js. Na itakuwa syntax kuonyesha code yako kwa wewe kutumia wote CSS na JavaScript. Jambo la mwisho tunataka kuzungumza juu ya kabla ya kutolewa nje katika dunia kuangalia maktaba kufikiri jinsi ya matumizi yao na, hopefully, kusoma nyaraka na kupata nini haja ni jinsi ya kupata maktaba. Hivyo kwanza ni tuko tu kwenda kushinikiza Google. Kwenda Google. Hiyo ni halisi nini cha kufanya wakati sisi haja ya kufanya kitu ni sisi Google. Je, kuna maktaba JavaScript kwamba inaruhusu mimi kuendesha wakati katika muhimu njia? Basi, ikiwa mimi kujua kwamba baadhi ya mtumiaji kujenga akaunti hapa, na hii ni wakati wa sasa, jinsi gani naweza mahesabu ya tofauti na kwamba bila ya kuwa na mahesabu yake mwenyewe? Hivyo hii ni kweli jambo la kawaida, JavaScript maktaba wakati. Na hapa sisi Moment.js-- maarufu moja. Kama tunahitaji maktaba kuendesha kitu kama rangi kuwa na uwezo wa kuzalisha kundi la rangi random - pengine, kwa kuzalisha style au kitu - tunaweza Google kitu kama JavaScript rangi maktaba. Na mimi nina uhakika sisi ingekuwa pop up na na elfu mmoja wao. Wewe ni kuwakaribisha kusoma kwa njia yao. Basi mambo zaidi - wakati kupata yao - ni kwenda kuwa mwenyeji kwenye moja ya maeneo ambayo jeshi code. Wao ni ni wachache ndio maarufu. maarufu zaidi, na mbali, ni github.com. Na kama wewe kwenda GitHub ni kweli ambapo kurejesha ilikuwa mwenyeji. Hivyo kama unataka kwenda nyuma na kwamba moja. Kuwaonyesha kwamba. MIKE Rizzo: Na hiyo ni kweli ambapo hii ni mwenyeji pia, kama wewe niliona. TOMAS REIMERS: Yeah. Hivyo kama wewe kwenda juu na kurejesha na kwenda GitHub. Walikuwa ni kwamba? MIKE Rizzo: kidogo Hiyo paka kitu ni GitHub mfano. TOMAS REIMERS: Oh. Hivyo GitHub anatumia njia iitwayo Git kuhifadhi code. Ni wewe hawajui nini kuwa ni au ni frightens wewe, hiyo ni nzuri. Huwezi kujua nini Git ni kwa sababu GitHub ina Download kifungo chini ya haki. nyingine jambo muhimu kujua kuhusu GitHub ni bidhaa nyingi itakuwa na kusoma yangu. Na kama hawana tovuti, kusoma me majadiliano kuhusu jinsi ya kufunga hiyo, jinsi gani matumizi yake, ni nini gani, nakadhalika, nakadhalika, na kadhalika. Nini tumekuwa kimsingi imekuwa kutembea wewe kupitia. MIKE Rizzo: mtandao wa kuacha. TOMAS REIMERS: Hiyo ni sawa. mambo mawili mwisho tulitaka kwa majadiliano juu - tumekuwa kuongelea Git - ni troubleshooting. Na hii ni moja ya si kama husika kwa ajili ya bidhaa ya mwisho kama ni ukiacha 50. Na wakati wewe kukimbia katika bidhaa utekelezaji wa maktaba au kutekeleza mradi wako mwenyewe, wewe kwenda kuwa na maswali au wewe ni kwenda kuangalia kwa maswali. Tena, Google yake. Hiyo ni halisi nini cha kufanya. Hii ni kwenda kwa sauti silly. Lakini literally, sisi Google yake. Na tena, moja ya mambo ya kwanza utasikia kawaida kukimbia ndani ni stackoverflow.com, ambayo ni ya ajabu swali na jibu mbele. Ni ajabu wote kwa sababu unaweza baada ya maswali na kuangalia kwa majibu lakini pia kwa sababu tayari ina mengi ya kabla ya wakazi maudhui ya huko. Hivyo kawaida wakati Google programu swali ndani ya kwanza wanandoa hits unaweza kuwa tayari kukimbia ndani yake wakati wa seti tatizo lako. Na kisha, mwisho kitu kweli kwa kifupi ni JSFIDDLE, ambayo ni - leo tumekuwa wamekuwa wakifanya kazi nyingi na JavaScript HTML CSS. JSFIDDLE ni programu ya mtandao, ambayo kimsingi utapata kuchukua HTML yako, yako JavaScript kushoto chini, na CSS yako juu kulia. Na kisha inaweza kujenga haraka kutoa yake na kuona ni jinsi gani inaingiliana. Ni muhimu sana wakati watu ni kujaribu kufanya ushahidi wa dhana kama hii ni jinsi gani ingekuwa kufanya kushuka chini menu. Labda Uncover haraka au chochote. MIKE Rizzo: Basi hebu kwenda mbele na bonyeza hii. kumbuka haraka - ambapo, kabla tulikuwa kufanya juu ya click. Zinageuka JCorey Korea pia ina kujengwa katika click tukio handler kwamba anatumia kwa sababu tu ni takwimu uko atataka kufanya mambo mengi wakati unataka bonyeza kitu. Vile vile, pia ina hover. Lakini kupata wigo kamili ya hizo, kuangalia jQuery nyaraka na kufanya hivyo. Mimi kitu kijinga hapa. TOMAS REIMERS: Kwa hiyo mimi na kweli haraka mpango wa haki hapa, ambayo inasema kifungo juu ya click. Basi tuna kwa kitanzi. Kwa i ni chini ya 404. Ni tu kwenda pop up ujumbe huu tahadhari. MIKE Rizzo: Na kile ambacho code 404 kusimama kwa ajili ya katika HTML? Je, mtu yeyote kumbuka? Hakuonekana, haki. Chrome pia aliongeza na hili nadhifu kitu ambapo unaweza - TOMAS REIMERS: Kwa sababu watu kama Mike kuanza kufanya hii mengi na watumiaji annoying, ambayo inaruhusu kuona info. MIKE Rizzo: Yeah. TOMAS REIMERS: Je, tuna maswali yoyote kuhusu hili, juu ya JavaScript maktaba, kutafuta maktaba, au inaonekana nini maendeleo ya mtandao kama katika ulimwengu wa kweli? Sisi ni mbio juu ya muda. Basi, mimi nina uhakika tunakwenda kuwa na muda wa kutekeleza kama ni kweli haraka. Je, sisi nzuri? MIKE Rizzo: kitu chochote nyie ungependa kuona kweli haraka katika, kama, mbili dakika au chini? TOMAS REIMERS: kitu chochote tunaweza kufafanua? Jinsi ya kuandika katika - Watazamaji: [inaudible]? MIKE Rizzo: Ndiyo, hivyo that's - TOMAS REIMERS: Unaweza tu hit Kudhibiti-U kwenye tovuti. MIKE Rizzo: Oh, sikujua kwamba. TOMAS REIMERS: Nadhani, yeah. Kudhibiti-U. Yeah. MIKE Rizzo: Oh, hivyo kwamba kanuni kwa ajili ya tovuti. Lakini kama kweli unataka kupakua wetu files na kila kitu, ni mwenyeji juu ya github.com TOMAS REIMERS: kufyeka jina langu - Tomas Reimers - slash CS50 hyphen semina. MIKE Rizzo: Na unaweza kupata kila kitu huko. TOMAS REIMERS: Hii ni nini GitHub inaonekana kama, kwa njia. Hivyo tena, wakati unaweza kuona wazi chanzo mradi, kwa kawaida, wao utakuwa kusoma me pale kwamba wewe unaweza kusoma. Na kama wewe kurudi nyuma, wewe utakuwa taarifa kwamba una shusha zip, ambayo itakuwa kuruhusu kushusha chanzo code ni pamoja na bidhaa katika mambo yako mwenyewe. MIKE Rizzo: Yeah, na kama sisi tu bonyeza juu ya index.html kweli haraka - TOMAS REIMERS: Utaona hapa chanzo kanuni kwa ajili ya tovuti yetu. MIKE Rizzo: Pia, I forgot kushinikiza haki kabla na meza kubwa ni pamoja, lakini pia kuna meza ya chmods kwamba sisi ni pamoja na tu kwa ajili ya ufafanuzi wako. Lakini kama sisi kitabu njia yote chini ya chini, hatukuwa kweli kufanya sana sana na JavaScript mambo wakati wote na hili. Ni peke kutoka kila kitu kingine kwamba tulikuwa. Kwa hiyo asante guys kwa ajili ya kuja na kusikiliza. Ni matumaini yetu hii ilikuwa kweli kusaidia. Kama una JavaScript yoyote kuhusiana maswali au unataka tu kuzungumza juu ya kile kingine kama mambo mengine baridi unaweza kufanya na JavaScript, tunatarajia upendo kuzungumza na wewe. TOMAS REIMERS: Kama una swali kuhusu mradi wako au kama hii inaweza kuwa husika, tutaweza pengine fimbo karibu kidogo baada ya hii. Lakini nyingine zaidi ya kwamba, kuwa na wiki mema mwishoni. MIKE Rizzo: Yeah, kufurahia. Angalia nyie. TOMAS REIMERS: Angalia ya.