Tomáš REIMERS: Hi, kulħadd. Jisimni Tomas Reimers. MIKE RIZZO: U jien Mike Rizzo. Tomáš REIMERS: Aħna huma tnejn mill CS50s TS. U llum aħna qed iwasslu s-seminar dwar JavaScript u CSS għall apps web. Jekk inti tixtieq li ssegwi tul, il- link huwa dritt hemmhekk. U inti tixtieq li tqiegħed lilha up fuq il-qosor tal-kompjuter? Hemm il-link. Huwa sit żgħir, li għandu rabtiet ma r-riżorsi kollha aħna qed tmur biex tkun tipponta inti llum u wkoll għandha ħafna ta ' informazzjoni utli bil-miktub mill magħna biex aqra aktar fil-fond meta inti tmur lura, u int tipprova tiftakar liema eżattament ma ngħidu, dak li kienu inti jitkellem dwar, eċċetera. MIKE RIZZO: Kull dritt. Mela ejja tibda. Tomáš REIMERS: Allura inti tixtieq li tibda? OK. MIKE RIZZO: Yeah. Allura aħna l-ewwel riedet tibda bil wiesgħa ħarsa ġenerali dwar l-internet u fajl tipi meta tfassil websajts. Filwaqt li din il-preżentazzjoni aħna ma jridux jsibu rwieħhom fis JavaScript ħafna ħafna aktar tard, ridna li tibda off ma ' biss, tip ta ', bħal fehma a għasfur għajnejn ta 'dak website u kif biex jaħsbu dwar tfassil ta ' websajt għall-bidu. Allura inti guys, f'dan il-punt - magħha jkunu Ġimgħa bil-lejl - għandu jkollhom sottomessa finanzi CS50 tiegħek problema settijiet. Nisperaw, li kien togħma tajba ta 'dak programmazzjoni web jista' jkun. Iżda hawnhekk irridu, tip ta ', jagħtu inti togħma oħra, ukoll. Tomáš REIMERS: Allura biss biex terġa liema jiġri, meta inti tip URL tiegħek biex web browser tiegħek, li URL gets sorveljata fil-kompjuter. U l-kompjuter tiegħek konnessi kompjuter għall-ieħor, li tospita din il-websajt. OK, hekk meta inti tmur google.com, int konnessi ma 'waħda Google kompjuters, li għandha l- fajls għall google.com. Imbagħad jitlob għal fajl speċifiku. Mela jekk inti tmur - I do not know - example.com / index.html jew / test.html, int ser jistaqsu għal dan il-fajl speċifiku. U s-server tal-web għaddej li jirritornaha lill inti. Imbagħad, ladarba inti tmur permezz dan il-fajl - darba int kompjuter gets li fajl - li għaddej biex tibda li jibnu web page. Allura issa hija għandha l-file HTML, li huwa tip ta bħall- istruttura tal-paġna web. Il-fajl HTML jista 'wkoll referenza Fajls CSS, li jiddefinixxu l- istil tal-paġna web. JavaScript fajls, li jiddefinixxi interazzjoni ma 'l-web page. Fajls immaġini, li huma biss immaġini. U possibilment link għal fajls oħra HTML, li tista 'mbagħad żżur. MIKE RIZZO: OK, kbir. Allura inti guys jkollhom kollox, forsi, painstakingly twaqqaf ospitanti lokali tiegħek fuq magna virtwali tiegħek. U li biss, tip ta ', huwa l-lokali dominju li l-kompjuter tiegħek tospita biss għalik fl-indirizz IP tiegħek stess. Hekk fi żmien dak, allura inti tista 'żżid lilha paġni web tiegħek stess. I tfisser, CS50 Finanzi, inti għandu jkollhom miżjuda xi paġni HTML, li huma, tip ta ', imgeżwer fil-tgeżwir PHP. Iżda fl-aħħar, liema paġni PHP tiegħek kienu outputting kien HTML. Imma taħseb lura għall-bidu nett tal-PSET, kellna biex jistabbilixxu il-permessi għal kollox, id-dritt? Allura dan biss bażikament tikri us know li jistgħu jaqraw, jiktbu, u possibilment tesegwixxi kull wieħed mill-fajls. Allura aħna qed tmur biex tagħmel quick - hm? Tomáš REIMERS: Allura aħna qed tmur biex jagħmlu demo malajr. Hekk biss biex infakkarkom, meta inti jgħaqqdu l-kompjuter Google - min - u li jsaqsi għal fajl, il-kompjuter ewwel jeħtieġ li tagħmel żgur li int qed awtorizzat li attwalment tara dan il-fajl jew taqra li fajl għaliex inti ma tistax staqsi għal kwalunkwe fajl fuq li l-kompjuter, id-dritt? Dan ikun ta 'periklu tas-sigurtà. Allura fajls fuq is-sistemi li nużaw, bħall- dan appliance CS50, tliet nies ġenerali li jista 'jkollhom permessi għal xi ħaġa. L-ewwel hija l-attwali sid ta 'istess fajl. It-tieni huwa l-grupp li il-fajl jappartjeni. Aħna mhux se tiffoka wisq fuq dak. U l-aħħar ħaġa hija, tip ta ', bħall- dinja jew bħal kulħadd li l- mhumiex speċifiċi għal dan il-fajl u ma jkollhom ebda drittijiet ta 'pussess fuq dan. Mela jekk ikollna sid, grupp, u mbagħad dinja. U mbagħad, għal kull waħda minn dawn il-gruppi, inti tista 'jkollha waħda minn tliet permessi, OK, jew multipli minnhom. Inti jista 'jkollhom permessi jinqara. Inti jista 'jkollhom permessi dritt. U inti tista 'tesegwixxi permessi. Allura f'termini ta 'tipi ta' fajls attwali, moqri permess huwa simili attwalment qari il-kontenut tal-fajl. Permess dritt huwa miktub li qal fajl. An tesegwixxi permess tkun qed taħdem il- fajl simili tagħmel meta inti tmexxi waħda proġetti CS50 tiegħek. Allura meta aħna qed jaħsbu dwar fajls simili meta għandna bżonn biex jaqra HTML fajl, li jeħtieġ li jiġi dinja tinqara, right? Preżumibbilment, wkoll sid irid biex ikunu jistgħu jeditjaw dan il-fajl. Allura l-proprjetarju għaddej biex bżonn jaqraw u jiktbu permessi. Huma ma verament bżonn tesegwixxi. Grupp, aħna qed tmur biex jikkura l- istess kif id-dinja għal issa. Sabiex ikunu jeħtieġu permessi jinqara. Iżda dawn ma bżonn write jew tesegwixxi permessi. U issa, jekk naħsbu lura lill-ex- PSETs, dak li aħna jirrealizzaw dawn it-tip tal look like binarju, id-dritt? 1 stands għall iva. 0 għall-ebda. U nistgħu ngħidu tittraduċi dan binarja. Allura 110 binarja tkun 6. 100 tkun 4. Istess dinja. Allura n-numru inti se tikseb għall- permessi għal dan ikun 644. MIKE RIZZO: U jekk taħseb lura għal meta inti chmoded xi ħaġa, nemmen huma taw fil-problema jistabbilixxu l- eżempju ta 'fejn inti tista' tagħmel xi ħaġa bħal chmod 644 u mbagħad fajl isem. Il-644 allura, inti issa tista tara direttament fejn li tiġi minn. Hekk nisperaw li jagħmel dan ftit aktar ċara. U mbagħad għal ċarezza inti Guy - oh yeah, hawnhekk dan huwa ġdid. Allura 600 imbagħad ikun biss l-eżempju aħna taw up hawn fejn is-sid għandu jaqraw u permessi dritt filwaqt li grupp u fid-dinja ma jkollhom ebda permessi aċċess għall-fajl. Tomáš REIMERS: U allura aħna għandna malajr lista ta 'permessi komuni. Allura direttorji, inti tixtieq li attwalment chmod 711. Quick annullament - għal direttorju li jkollhom permess eżekutibbli tfisser li tkun kapaċi li tiftaħ il-direttorju. Immaġini, CSS, JavaScript, ħtiġijiet HTML 644 minħabba li, bażikament, id-dinja bżonnijiet taqra permessi. U PHP, li inti guys raw għalkemm aħna mhux se jitkellem dwar dan strettament hija tipikament chmoded ma permess 600 għaliex dan huwa run l-permessi tas-sid. Mill-inqas fuq l-appliance. MIKE RIZZO: Mela jekk inti ma speċifikament tispeċifika liema tip ta 'fajl trid fil-fatt iffissar up din il-preżentazzjoni - kellna problema ma 'dan minħabba kollox ma kienx chmoded korrett - int ser tikseb, tip ta ', żball projbit li l-websajt fatt ma għandekx permess għall-aċċess kwalunkwe fajl inti tixtieq li l-aċċess. U ovvjament, li jista 'jiġi stabbilit - bħal fil-problema stabbilit - billi jinbidlu permessi xieraq. Tomáš REIMERS: U l-aħħar kumment għal iżvilupp malajr lokali - aħna ressqet dan up, iżda aħna biss riedu biex dan jilħaq mill-ġdid - jekk inti ssaqsi għal server - ospitanti hekk lokali, per eżempju, com jew ikun x'ikun. - u inti ma jispeċifikawx fajl speċifiku, l-fajl li l-kompjuter tiegħek huwa għaddej li jistaqsu għal tissejjaħ index.html. Jew jekk dak ma jeżistix, index.php. Kessaħ. Allura dak biss terġa 'kollox, nisperaw, li aħna stajt koperti taqsima, u lecture, u s'issa fil CS50. U issa aħna qed tmur biex tibda titkellem dwar speċifikament Libreriji. JavaScript u CSS libreriji għall apps web. Allura raġuni waħda malajr għaliex għandna libreriji huwa l-ipprogrammar - hemm ħafna ta 'problemi fil- programmazzjoni, li jżommu popping up għal darb'oħra, u għal darb'oħra, u għal darb'oħra. Tista 'tinnota li ħafna ta' websajts bżonn l-abbiltà li jkollhom drop down menus, per eżempju, jew jeħtieġu l-ħila li jkollhom buttuna standard ħafna stil, li ma jistax ikun l-eħfef ħaġa. Issa li inti tibda tikseb fis HTML, inti tirrealizza li buttuni jistgħu attwalment tfittex verament ikrah jekk inti ma tagħmel xejn. Allura ħafna nies bil-miktub imsejħa libreriji. U f'dan il-kuntest, dawn qed imsejħa wkoll oqfsa. Aħna ser tuża l- tnejn minflok xulxin. U liema huma hija li qed bażikament biċċiet premade ta 'kodiċi - jew CSS jew JavaScript - li jieħdu bogħod ħafna ta 'l- tim għandek fil kodifikazzjoni. Allura dawn qabel jiddefinixxu mazz ta 'klassijiet jew pre-definiti mazz ta 'funzjonijiet għal Każ JavaScript, li inti tista 'sejħa aktar tard. U allura inti tista ', tip ta', jiksbu aċċess għal dan il-kodiċi mingħajr jkollhom jagħmlu xejn. Eżempju tal-librerija kien CS50.H. Dan kien librerija aħna taw lilek lura fil-ġimgħa, li ppermetta li tagħmel affarijiet bħal dik GetInt u GetString mingħajr ma jkollhom jiktbu kwalunkwe kodiċi yourself. MIKE RIZZO: Kull dritt. So here, bħad kellna biex jinkludu fil ċ tagħna fajls l differenti libreriji, aħna wkoll għandha tinkludi b'mod HTML tagħna fajls libreriji differenti. Per eżempju, jekk ridna li jinkludu a JavaScript librerija speċifika hawn, forsi, wieħed li konna bil-miktub lilna nfusna kif huwa ospitat lokalment imsejħa script.js, aħna biss jużaw dan notazzjoni. Allura aħna għandna ugwali tip iskrittura Ugwali JavaScript sors JavaScript.js. U jekk taħseb lura għall-CS50 tiegħek problema finanzi stabbiliti, jekk inti ħarsu header.php fil-folder templates, għandek raw xi wħud minn dawn inklużi. Allura dan l-ewwel wieħed - l-iskripts - huwa inkluż librerija JavaScript. Inklużi librerija CSS huwa xi ftit differenti. Hawnhekk, minflok l-iskrittura TAG għandek bżonn l-tag link. U mbagħad, it-tip CSS test huwa xi ftit differenti. Inti mhux dejjem ikollhom biex jinkludu karta tal-istil rel. Imma naħseb huwa, ġeneralment, prattika tajba. U mbagħad finalment, l-HREF, li inti probabbilment raw ATAGs tiegħek għall-irbit fl links differenti biss jispeċifika il-link ta 'fejn issib li. Per eżempju, jekk ridna li jgħaqqad librerija differenti - ejja biss jgħidu - li għexu styles.css. U ridna li link li f'dik l- ospitati fuq il-web, aħna se kopja li. U mbagħad paste fis x'ikun għandna dritt hawn minflok. Tomáš REIMERS: OK, nisperaw li int guys huma diġà familjari mal-mod kif jgħaqqad CSS. Inti kellha tagħmel dan fuq aħħar sett kannella tiegħek. JavaScript, xi wħud minnkom forsi jkollhom xi esperjenza. Xi wħud minnkom ma jistgħux. Allura għal issa, taf li fajl JavaScript hija simili ħafna fajl CSS fl -sens li inti tista 'rabta lilha jew li inti tista 'tinkludi dan internament. U dan jippermetti li inti affarijiet iskrittura. U aħna qed tmur biex jimxu miegħek permezz ta ' ftit ta 'JavaScript aktar tard. Hekk billi tuża librerija - ladarba inti stajt inklużi dan, huwa kif sempliċi kemm litteralment sejħa tal- funzjonijiet jew żżid il- ismijiet klassi għalih. L-aħħar ħaġa li rridu nitkellmu dwar f'termini ta 'librerija - u dan huwa aktar ta 'nota teknika - huwa liċenzjar sors miftuħ. Allura meta inti ssib dawn libreriji attwali, inti tista 'tkun ħsieb ta' mistoqsijiet simili huwa OK li jien biss jużaw kodiċi xi ħadd ieħor, speċjalment għaliex dan huwa xi ħaġa li aħna ħafna qallek li ma tagħmel f'dan il-kors. Allura fil-każ ta 'liċenzjar sors miftuħ, ħafna ta 'żviluppaturi - ladarba ħadthom miktub librerija, li jaħsbu jista 'jkun utli għal nies oħra - se tippubblika lill-web u tagħtiha liċenzja. U liċenzja bażikament jgħid I am hawnhekk jingħata permess għall-oħra persuni li jużaw din il-biċċa ta 'softwer mal-tip ta 'wara istipulazzjonijiet. Imxejna inkludew link għal sit tajjeb biex jgħinek tifhem il-liċenzji każ li inti run fis minnhom. Stipulazzjonijiet komuni huma affarijiet simili inti qed jilqgħu biex tuża librerija tiegħi hekk Sakemm inti tagħti me kreditu. Inti qed jilqgħu biex jintuża librerija tiegħi sakemm meta pawżi inti ma tort lili. Inti qed jilqgħu biex jintuża librerija tiegħi sakemm kif inti ma tużah biex jagħmlu l-flus għalik innifsek. Dawn huma tipi ta 'komuni istipulazzjonijiet. Għal dan il-proġett finali CS50, huma ma għandhomx ikunu relevanti super minħabba il-proġetti li inti guys użu huma probabbilment pjuttost, tip ta ', magħrufa. Imma meta inti attwalment tmur barra fil- dinja u tibda tuża libreriji, li jistgħu jew ma jistgħux jiġu implimentati kif ukoll uħud mill-aktar popolari aħna qed ser tkun għaddejja. Huwa tajjeb li jkunu jistgħu jifhmu dawn il-liċenzji u biex jifhmu dak li jfisser. U li jmorru lura. MIKE RIZZO: OK. Allura issa jimxu fuq eżempji tal CSS attwali. F'dan il-punt sa issa, inti tista ' ma jkunu ltaqgħu magħhom din. Imma inti jista 'jkollok jiltaqgħu magħhom fil- ħajja ta 'kuljum tiegħek fejn xi ħaġa li jistenna mod wieħed fuq il-browser wieħed ma tista 'tħares l-istess mod ieħor browser. Din tissejjaħ browser browser kompatibilità. U dejjem huwa dejjem aktar u aktar ta 'problema, speċjalment fir- browsers jieħdu aktar u aktar libertajiet li timplimenta l-affarijiet kif jixtiequ. Allura biex jingħeleb dan, hemm attwalment hija librerija kbira imsejħa Normalize.CSS. Tomáš REIMERS: Aħna inklużi l-link. F'dan il-punt, huwa utli jekk għandek laptop tiegħek fil hemm tħares lejn is-sit. U aħna qegħdin jagħtu dan lilek dritt issa sempliċement minħabba l-finali CS50 proġett huwa attwalment għaddejjin biex nitolbok biex jimplimentawha bl-istess mod u permezz browsers. Hekk biss li jżomm fil-dahar tal tiegħek ras, din hija librerija isbaħ għaliex se, tip ta ', jistandardizzaw affarijiet. Fl Firefox, xi ħaġa tista 'turi bħala pixel wieħed lejn ix-xellug. U mbagħad Chrome tista 'tiddeċiedi li fil-fatt dak li fisser kien 10 pixels lejn ix-xellug. U inti tixtieq li jistandardizzaw din. Jinnormalizzaw fatt se jagħmlu verament tajba xogħol li jiżgura li sit tiegħek jistenna l-istess madwar browsers. MIKE RIZZO: Mela jekk ridna biss ikklikkja l-link verament malajr u juru x'għandek li qisu, inti tista 'tniżżel billi tuża l- buttuna Download ġgant. Jew I ninkoraġġukom biex taqra aktar dwar dan billi tikklikkja din ir-rabta fil-parti t'isfel lemin kantuniera. Tomáš REIMERS: U jekk inti fil-fatt ikklikkja Read More hemm dritt - ikklikkja l-għajn fuq GitHub - inti ser attwalment ara l-open source liċenzja fuq LICENSE.md hemm dritt. U tkun taf tara hawnhekk huwa l- liċenzja MIT popolari ħafna. Għal darb'oħra, jekk inti taqra permezz-test, inti ser tkun tista 'ssib fuq is-sit aħna referenzjata qabel u jkunu jistgħu jifhmu mingħajr ma jkollhom biex taqra permezz tal-lingwaġġ legali. MIKE RIZZO: OK, kbir. Allura dak jinnormalizzaw. Ridna li jtik li verament malajr. Oh, do għandek xi mistoqsija? UDJENZA: Allura meta inti niżżlu, inti biss issegwi dan il-kodiċi li jkollhom taħt il-buttuna Download? Tomáš REIMERS: Iva, hekk meta inti download - MIKE RIZZO: Oh, li l-punt kbir. Għalhekk il-kwistjoni kienet kif do aħna fil-fatt niżżlu? Allura jekk aħna ikklikkja l-link, naraw li fil-fatt pops up lejn il-kodiċi sors. Allura biex tagħmel dan, dak li nistgħu tagħmel huwa biss ikklikkja Save As. Save As u li għandhom irabbu l-fajl. U allura nistgħu jagħżlu li jiffrankaw bħala normalize.CSS. U allura inti d jkollhom rabta fil - Tomáš REIMERS: Il istess mod inti rabta fi kwalunkwe fajl oħra. U ladarba inti link fil, x'hemm kbir dwar jinnormalizzaw huwa fil-fatt se jieħdu ħsieb ta 'l-hard xogħol minnu stess. Li jfisser li inti ma għandekx li żżid xi klassijiet. Inti ma għandekx tagħmel xejn stramb. Hija se innormalizza mingħajr ma inti tagħmel xejn aktar. Iva, inti għandek tinkludi dan. Google Chrome ma jkunx jirrispondi. Just a quick annullament - I ndunat aħna qabża fis dan. Il-bqija ta 'din il-preżentazzjoni hija se jkun ħarsa ta 'malajr. Stħarriġ tal-libreriji. Bażikament, dak li huma. Dak li jagħmlu. Kif dawn qed utli. Kif inti tista 'jimplimentawhom. Jekk inti tixtieq li tibda tħares lejn minnhom, wara flimkien, u l-qari permezz minnhom, nixtieq ħafna jinkoraġġixxu dan. Alternattivament, inti qed jilqgħu wkoll għall- tibda tniżżil u tinkludihom minnhom fil-vista biss biex tara dak li dehra jew dak li tagħmel jekk ikollok laptop tiegħek quddiem tal inti. Jekk le, inti qed jilqgħu biex iżommu jisimgħu lilna nitkellmu. Aħna ser iżommu jitkellem. U għandna ħin fl-aħħar, wieħed jittama aħna ser attwalment tikseb fis turi li inti dak li xi wħud minn dawn il-libreriji look like. MIKE RIZZO: Kessaħ. Kull dritt, hekk issa ejja nitkellmu dwar Font biża. Tomáš REIMERS: hekk Font biża hija sit verament pulita, speċjalment għal dawk minna li huma anqas artistikament talent. Jinjora l-isem Font biża, hija tagħti inti mazz ta 'ikoni, li huma utli ħafna. Allura ħafna drabi inti ser timplimenta ikona inti tista 'tixtieq qisha x sbieħ hekk li inti tista 'qrib xi ħaġa. Jew inti tista 'tixtieq xi tip ta' buttuna Edit bi tpinġija bil-lapes bħal kulħadd ikollu. U li meta inti jitgħallmu li tpinġija dawk ikoni jista 'jkun ħafna tedious u diffiċli. Font biża - jekk inti fil-fatt tmur għall-sit - jagħtik ħafna ta 'ikoni taħt l-ikoni fil-quċċata. Yeah, biss il-quċċata. Huwa se jagħtik ħafna ta 'ikoni b'xejn. Allura hawnhekk tara għandna affarijiet simili ta ' asterisk, bars, bolt sajjetti, a kalendarja, bug, ktieb, eċċetera. Dan jista 'jkun utli ħafna. Il-mod kif inti jinkludu dan huwa inti jinkludu litteralment l-fajl CSS. U wara li tkun ħadthom inklużi l-fajl CSS, x'tista 'tagħmel huwa inti toħloq tag imsejħa I. satands għal ikona mal-klassi FA permanenti għall Font biża. U mbagħad, tkun xi tkun il-klassi trid. Mela jekk jien ridt ikona ta 'din plus kwadru dritt hawn, I jagħti din il-klassi FA. U mbagħad sing FA plus kwadru sing. MIKE RIZZO: Kessaħ, OK. Tomáš REIMERS: U mbagħad, l-aħħar CSS librerija irridu jiksbu permezz aħna jippruvaw li jżommha minimu fuq CSS libreriji għaliex aħna realizzata l- titolu ta 'din il-preżentazzjoni huwa JavaScript Libreriji. Iżda ħsibna li aħna jistgħu ukoll jintroduċu inti l-libreriji oħra waqt li konna nitkellmu dwar libreriji. Huwa Google Web Fonts. U dak Google Web Fonts jippermettilek tagħmel hu li żżid fonts għall-website tiegħek, li huwa mod verament faċli biex jagħmlu dan pretty u biex jiddistingwuh stabbiliti tiegħek minn kulħadd huwa jekk ikollha font sbieħ jew jekk għandha sbieħ ġbir ta 'fonts. Google Web Fonts huwa sabiħ b'differenza oħra libreriji fis-sens li huwa installazzjoni verament ggwidati. Mela jekk inti ssegwi l-link, huwa google.com / fonts, nemmen. Jekk inti ssegwi dan, inti tista 'pick font tiegħek. Tista 'tagħżel fuq ix-xellug mill- ħxuna, slant, eċċetera. U mbagħad, ladarba inti għażilt waħda, inti tista 'ikklikkja użu malajr. Hemm dritt. Lemin t'isfel tal-kaxxa. U mbagħad, iscroll. L-ewwelnett, huma jagħtuk l CSS li għandek bżonn biex attwalment link għal dan. Huwa hemm dritt. Tista 'biss kopja u paste dan pulzieri U l-ħaġa sbieħ dwar dan huwa wieħed inti ma attwalment biss jeħtieġ li tniżżel il-fajl. X'hemm li għaddej biex tagħmel hu li għaddej link għal verżjoni Google ta 'dan. Allura lura għal xi jfisser. Dan ifisser meta utent downloads fajl tiegħek - downloads paġna HTML tiegħek - HTML tiegħek paġna se referenza dan il-fajl. Mela allura, il-kompjuter tiegħek għaddej biex tara, oh, huwa ospitat fuq google.com pjuttost milli fuq theirsite.com. Let me go staqsi Google għal dan il-fajl. U mbagħad, li għaddej biex jinkludu kważi daqs li kieku kienu parti ta 'sit tiegħek. Tomáš REIMERS: Kessaħ. U ladarba inti jinkludu li, imbagħad tinkludih fl CSS tiegħek, tagħtik il-linja attwali. Allura inti jistabbilixxu l-familja font proprjetà ugwali għall-isem tal-font tiegħek. MIKE RIZZO: OK. Allura aħna biss lest ma CSS. U xi wħud minnkom jista 'jkun ħsibijiet, ukoll, kellna xi CSS fuq CS50 Finanzi. Iżda librerija CSS kien bootstrap. Aħna attwalment jinkludu bootstrap ftit aktar tard taħt JavaScript għaliex ma il-librerija bootstrap CSS tiġi wkoll bil-lott ta 'JavaScript li Bootstrap jew Twitter - li għamlu bootstrap - juża biex jimmaniġġjaw kollha ta 'CSS tagħhom. Tomáš REIMERS: Hawn xi ħadd li jkollu xi mistoqsijiet s'issa dwar CSS b'mod ġenerali? Aħna qed tajba? Tal-biża '. MIKE RIZZO: biża. Tomáš REIMERS: So jiċċaqilqu fuq JavaScript. MIKE RIZZO: Allura ridna li nitkellmu dwar jQuery li tibda bil. Has xi ħadd semgħu jQuery qabel jew użati? Yeah, koppja? Mela jekk inti biss taħdem ma native JavaScript, inti ser issib ruħek ittajpjar ħafna seletturi twal ħafna. Allura dak jQuery ma huwa jipprovdi karta tat-tgeżwir sbieħ għall-JavaScript lingwa li ihallik faċilment tagħżel u timmanipula elementi differenti fi ħdan il-mudell tad-dokument oġġett tal- paġna web jew l-DOM, li naħseb inti guys smajt fil- lecture f'dan il-punt. Tomáš REIMERS: Jekk int ma semgħu jew lecture jekk int ma jarah għadhom, il-Mudell Għan Dokument hija bażikament kif l-affarijiet huma rappreżentati. Allura HTML tip ta 'qisu siġra meta inti attwalment tiġbed out. Inti għandek l-element HTML fuq nett. Inti għandek l-ras u l-ġisem. U mbagħad, fi żmien li inti jkollhom kollox. Li imsejħa DOM - Għan Mudell dokument. Allura mudell li jirrappreżenta l-oġġetti fil- id-dokument hu mod faċli biex jaħsbu dwar dan. U waħda mill-ħaġa kbira dwar jQuery huwa verament jagħmel traversat dan u elementi timmanipula fi ħdan li oerhört sempliċi. Tant sempliċi, fil-fatt, li l-maġġoranza tal- JavaScript libreriji jew jekk mhux l- maġġoranza, il-maġġoranza grand ta 'dawk tkun taf tara fil-fatt jeħtieġu jQuery hekk li tista 'taħdem infushom sempliċement għaliex jekk inti ma kellhiex jQuery, inti jaħlux ħafna ħin jippruvaw figura kif jagħżlu ċerti elementi u kif jagħmlu affarijiet oħra. U l-ħaġa kbira oħra dwar jQuery hija li huwa browser transkonfinali kompatibbli. Mela ftakar lura meta aħna qal li mhux browsers kollha jimplimentaw affarijiet bl-istess mod? Dan huwa minnu anki fil-JavaScript. U waħda mill-affarijiet kbar dwar jQuery hija li se jikxfu l- browser u jikxfu l- metodu xieraq. Mela jekk għandek bżonn biex jagħżlu l-element, Internet Explorer jista 'jgħid int suppost tagħmel dan il-mod. Firefox jista 'jgħid l-korretta mod huwa b'dan il-mod. jQuery ma care. Meta inti tgħid jQuery biex jagħżlu l- element se figura kif huwa suppost tagħmel dan fi ħdan il-browser l- utent huwa bħalissa, u mbagħad do dan il-mod. MIKE RIZZO: Mela ejja ma nitkellmux dwar l-użu ta jQuery ftit. Eżatt bħal PHP, jQuery għandha partikolari fondness għas-sinjal dollaru. Allura inti ser issib li xi jQuery - ukoll, mhux kollha. Inti xi kultant tista 'tissostitwixxi l-dollaru sinjal bil-kelma jQuery. Iżda ġeneralment, sempliċiment għaliex dan huwa iqsar, kull meta inti tara jQuery tkun użat dan ser ikun b'sinjal dollaru. Allura hawnhekk aħna qed juru biss bidu selettur applikabbli għal element fil-DOM. Hawnhekk, aħna għandna l-sinjal dollaru segwit billi parentesi miftuħa u mbagħad kwotazzjonijiet. U fil-kwotazzjonijiet go seletturi tagħna għall-elementi differenti. Eżatt bħal fil CSS, għandna bżonn seletturi biex tkun tista 'stil elementi differenti fi ħdan il-paġna. Dawk seletturi differenti tittraduċi eżattament fis jQuery u JavaScript, għall-parti l-kbira. Allura hawnhekk għandna tikka foo. Mela jekk inti recall minn lecture, il-dot biss tfisser il-klassi. Allura aħna qed tagħżel element mal-klassi foo. Hekk jekk I aqbad u jiftħu tagħna JavaScript console hawn verament malajr biss juruha, jekk I biss tip- sinjal dollaru, naraw li huwa xi funzjoni li taqa up. U huwa biss definit mill jQuery. Tomáš REIMERS: Għal dawk tal inti familjari, il-console huwa għodda fi Chrome, li tippermetti li inti, bażikament, run JavaScript fuq il- paġna kurrenti. Dan inti ser issib oerhört utli meta int fil-fatt debugging u int jeħtieġ li jkun simili, dak li huwa l-kurrent valur ta 'xi varjabbli globali jew dak hija xi ħaġa oħra? Huwa tip ta bħall GDB bl-eċċezzjoni li inti tista 'attwalment jimmanipula elementi fuq il-paġna ma dan b'mod ħafna aktar faċli. U wkoll ma, bażikament, tivverifika fil miegħek qabel tagħmel xi ħaġa. Allura billi, GDB jista 'jkun simili, int żgur li trid tmexxi l-pass li jmiss? Il-console huwa fil reali. Hekk kif il-paġna web huwa tirrendi u tagħmel dak kollu li qed jagħmel, l- tal-kunsill running wkoll flimkien ma 'dan. U inti tista 'tpoġġi kodiċi imputata in li console, li se jitmexxew fuq il-paġna. MIKE RIZZO: Allura biex jidħlu fil-console, I raden I għandu qosor isemmu kif għandek tagħmel dan. Fl-aħħar problemi li jista 'jkollok Chrome użati jispezzjona element funzjonijiet jew sors paġna ħsieb - u dawn huma aċċessibbli biss bi dritt tikklikkja fuq il-paġna jew speċifika element u tagħmel jew jispezzjona element jew sors paġna ħsieb. Nistgħu wkoll aċċess għall-JavaScript console direttament minn jagħżlu jispezzjonaw element. Console hekk allura inti biss hit fuq in-naħa lemin. Alternattivament, inti tista 'wkoll żdiedu għall-rokna tal-lemin, li hija maqtugħa fuq dan l-iskrin fejn hija għandha tliet bars orizzontali. U inti jinżlu għal għodod u imbagħad JavaScript console hawn fejn tista 'tara - inqas fuq Windows - l-shortcut huwa Kontroll Shift J. Mela allura jekk ridna li jagħżlu l-element fi ħdan din il-paġna, bħad I wera qabel, nagħmlu sinjal dollaru parens miftuħa u mbagħad kwotazzjonijiet. Ħaġa interessanti hija, ġeneralment, kwotazzjonijiet uniku u kwotazzjonijiet doppja huma skambjabbli. Allura ħafna nies biss użu wieħed kwotazzjonijiet għaliex qed aktar mgħaġġel tip minn kwotazzjonijiet doppja għaliex inti ma għandek biex iżommu r Shift. So I ser biss tagħmel dan id-dritt issa. So I trid tagħżel xi ħaġa ma 'klassi. Container, sempliċement minħabba naf li xi ħaġa li fuq tagħna paġna web dritt issa. And I hit Ikteb. U nistgħu naraw li hija għażlet dan. Allura dan juri up li lura dak l-oġġett. Allura dak għażla bażiku. Jekk ridna li attwalment jimmanipulaw, inti għandek sejħa xi ħaġa fuq dik l-għażla, li aħna se jsibu rwieħhom aktar tard. Tomáš REIMERS: Hekk biss li tħares lejn dak aktar fil-fond, dan huwa differenti milli l-funzjoni sejħiet li għamilna fl C. L-isem tal-funzjoni hawnhekk hija ftit stramb. Huwa sinjal dollaru. Huwa biss l-isem ta 'funzjoni. M'hemm xejn speċjali dwar dan. Għandna parentesi miftuħa. Imbagħad, aħna għandna argument wieħed tagħna, li f'dan il-każ jiġri li jkun string, li huwa selettur għaliha. U mbagħad, għandna tagħna parentesi magħluqa. Thats it. Dan m'huwiex ferm differenti. Għalkemm, dan ma tfittex stramb ħafna. U li jista 'jkun, sort ta', teħel punt għal ħafna nies. MIKE RIZZO: Allura bl-istess mod, jekk ridna biex jagħżlu l-element li għandu identità, issa irridu li jagħżlu minn ID minflok klassi. Ikun xi ħaġa simili fejn aħna biss tagħmel l-sinjal qawwi għall-ID. Allura aħna qed tagħżel hawn kollha elementi li għandhom bar ID. Tomáš REIMERS: U dan jestendi. Li CSS testendi. Eżatt bħal fil-CSS, inti tista 'tagħżel kollha rabtiet, li għandhom l foo klassi. Hawnhekk, huwa l-istess ħaġa. Inti tista 'tagħmel a.foo, li jagħżel kollha tar-rabtiet mal-foo klassi. Inti tista 'tagħmel bar qawwija, li kieku tagħżel l-konnessjoni mas-bar ID u għalhekk fuq u ibqa 'sejjer hekk. Kull selettur CSS huwa validu selettur jQuery. MIKE RIZZO: Yeah. OK, hekk issa ejja jsibu rwieħhom ftit ta 'manipulazzjoni li nistgħu nagħmlu ma' tagħna jQuery. Allura jQuery għandha tip partikolari ta 'notazzjoni fejn aħna biss użu tikka fl-aħħar. U inti tista 'taħseb dan bħal fil- C kif kellna structs differenti. U li jmorru lejn dawk structs, inti tuża dot biex tikseb ġo fihom. Dan huwa, tip ta ', ħaġa simili. Biss issa għandna funzjonijiet fi ħdan dan selettur li nistgħu sejħa fuqha. Allura hawnhekk, l-ewwel eżempju tista 'tara huwa selettur CSS. U bażikament, dak li ma huwa japplika l-ewwel element CSS għal dan ħaġa li inti magħżula - dan l-element li inti magħżula - mal-valur li. Tomáš REIMERS: Allura traduzzjoni faċli ta ' li tkun jekk jQuery, bażikament, biss ħa foo. U mbagħad fl CSS qal, kulur aħmar u qrib. Huwa l-istess idea. Dak li għandu jsir huwa huwa magħżul elementi kollha foo. U allura huwa applikat. Sort ta ', il-kulur proprjetà hija ugwali għal aħmar. MIKE RIZZO: Bl-istess mod, nistgħu wkoll jibdlu il-kontenuti attwali ta 'dak li huwa juri fuq l-HTML tal-paġna, li huwa verament jibred għaliex dan ikun ifisser tiegħek paġni tal-web tista 'issa tiġi kompletament dinamiku u ma għandhom ikunu statika li tistampa bl-użu PHP fil-bidu nett ta ' il-paġna qed titgħabba. Allura hawnhekk, jekk ridna li jbiddel il- HTML attwali tal-paġna, nixtiequ issa sejħa tal-funzjoni HTML, li allura biss inserts irrispettivament għandna jispeċifikax li element li aħna magħżula. Allura hawnhekk aħna qed tagħżel element ma klassi foo u mbagħad qal huwa HTML huwa issa bonjour dinja. Tomáš REIMERS: U meta taħseb dwar liema huma applikazzjonijiet utli ta ' dan, dan wieħed CSS, l-ewwel ħaġa li inti tista 'tibda biex jaħsbu dwar huwa f'termini ta 'anki drop down menus. Inti tista 'tibda tagħmel affarijiet simili, meta utent hovers fuq il-parti ta 'fuq ta 'isfel qatra, inti tixtieq li tagħmel il-parti t'isfel viżibbli. Dritt? Għalhekk fl CSS, għandna proprjetajiet biex jagħmlu xi ħaġa viżibbli. Affarijiet simili xejn kolon display jagħmilha inviżibbli. Blokk Display jagħmilha viżibbli. Jew anke jekk inti tixtieq li tmur aktar sempliċi, inti jkollhom affarijiet simili ugwali viżibilità viżibbli, u l-viżibilità ugwali moħbija. U inti tista 'tibda biex jimplimentaw affarijiet bħal drop down menus dritt wara li inti tikseb permezz tal-idea ta 'kif inti tista 'ċifra barra meta dan jiftaħ, li aħna ser jiksbu permezz-qasir ħafna. Iżda nistgħu tibda tara applikazzjonijiet ta 'dan. F'ċertu sens simili, jekk ġejt biex tipprova u jimplimentaw, ejja ngħidu, chat magna u inti tixtieq li tagħmel ftit bużżieqa diskors toħroġ meta inti ħadthom ltqajna messaġġ ġdid, ladarba inti tikseb l- messaġġ ġdid, inti tista 'tagħmel ftit bużżieqa diskors toħroġ billi jbiddlu l-HTML tal-paġna, right? Biż-żieda li bużżieqa diskors extra mat-test żejjed fil hemmhekk. Yeah? UDJENZA: Allura inti ssodata dan fi l-HTML code fil-tip ta 'prodotti simili [Inaudible]? MIKE RIZZO: Dritt. Yeah, aħna ser jiksbu għal dak fi ftit. Yeah, huwa simili ftit li PHP. Mhux eżattament simili. A distinzjoni tajba li jagħmlu huwa dak li din huwa attwalment editjar meta aħna jeditjaw il-paġna għaliex mhuwiex ser ikun editjar fajl attwali li qed miżmuma fuq is-server aliex id-dinja m'għandux ikollhom permess biex jeditjaw fajls tiegħek. Dan huwa biss editjar x'hemm fuq il-paġna u dak li qed jintwerew fi il-browser. Mela jekk ġejt biex rikarigu-paġna wara, ngħid, tħassir xi ħaġa kif aħna tara nistgħu nagħmlu mas-sejħa tneħħi, li ħaġa mbagħad jerġgħu jitfaċċaw. Tomáš REIMERS: Allura mod wieħed biex jaħsbu dwar dan huwa jekk jien kompjuter tiegħek u Mike huwa, tip ta ', l-server. X'hemm jiġri huwa jien ser jistaqsu Mike, ħej, jista 'jkolli kopja ta' din il-paġna web? U huwa ser jagħti me kopja ta 'dan. Le, mhux il-ħaġa oriġinali. Huwa biss kopja. U allura jkun simili, oh, hemm JavaScript hawn. Ovvjament, I għandu jeditjaw il- paġna li jkun bħal dan. U jien editjar kopja tiegħek. Iżda li mhux effettwar il-kopja attwali. U jekk I kienu jistaqsu lilu mill-ġdid jġedded il-paġna, - ħej, jista 'jkolli kopja nadif ieħor - huwa għaddej biex tagħti me kopja nadif ieħor. U mbagħad, jien ser jagħmlu l-istess ħaġa simili, oh, din JS hawn li tgħid li jeditjaw dan. U jien ser iżommu tagħmel dan. MIKE RIZZO: Allura ħaġa verament jibred li inti tista 'tagħmel ma jQuery huwa attwalment iżidu tipi differenti ta animazzjonijiet għall-paġna tiegħek. I do not know jekk inti stajt qatt rat fejn inti qed tipprova timla formola online u inti ma jimlew l-affarijiet b'mod korrett. Allura ħaġa ftit slides isfel fil-quċċata u tgħid li inti għadhom ma għamlux dan b'mod korrett. Jekk jogħġbok erġa 'pprova. U mbagħad, jista 'anki sempliċement slide up. Jinstabx jQuery bniet fil-funzjonijiet li jagħmlu kollha ta 'dak animazzjoni tassew, tassew faċli. Allura l-ewwel hemm il-fade funzjoni out, li inti tista 'sejħa fuq xi ħaġa. U huwa mod biex jibdlu l-CSS ta ' li element b'mod animati. Sabiex tieħu kwalunkwe element inti sejħa hija fade out fuq. U mbagħad, bil-mod bidliet opaċità huwa tal sakemm din tmur kompletament trasparenti. Tomáš REIMERS: L-oħra popolari huwa slide stabbiliti, li se tagħmel xi ħaġa tidher billi jiżżerżaq isfel. Allura fil-każ tal-menu drop down, għal darb'oħra, meta aħna tgħallimna kif jiġu individwati meta dan ikun ġie hovered fuq, inti tista 'biss tgħid dan qiegħ parti slide stabbiliti issa. U mbagħad, jidher billi jiżżerżaq isfel. MIKE RIZZO: U mbagħad, jekk inti biss għandek xi tip ta 'animazzjoni f'moħħu li jQuery mhux neċessarjament tipprovdi. Per eżempju, ejja ngħidu jQuery ma jagħtuk slide isfel u slide up. Well, ejja ngħidu li inti ridt li tiżżerżaq xi ħaġa mix-xellug jew mill- it-tip ġust ta bħall-CS50 paġna prinċipali ma kulmeta inti tmur lil panel ġdid. Inti mbagħad probabbilment ikollhom jimplimentaw it yourself bl-użu janimaw funzjoni fi ħdan jQuery. Allura bl-istess mod, inti biss janimaw. U mbagħad, fi ħdanu hija tieħu dizzjunarju tal-valuri differenti li int suppost biex jgħaddu. Allura hawnhekk, jekk ridna li janimaw il- foo element tali li wisa 'tiegħu jew tespandi jew kuntratti għal 80 pixels, jiddependi fuq dak li attwalment. Aħna biss jgħaddu li bħala l-argument fi ħdanu. Janimaw wkoll xi argumenti oħra li inti tista 'tgħaddiha, per eżempju, il-veloċità ta 'l-animazzjoni li inti tixtieq li tagħtiha. U biex tagħmel dan, nixtieq biss jgħidu malajr Google jQuery janimaw. U mbagħad, trabbi din il-paġna, inti tista ' tara huwa ltqajna mazz ta 'differenti proprjetajiet li inti tista 'tgħaddi dan. U I ninkoraġġukom - kull meta inti tidħol madwar xi ħaġa li inti ma jafu jew biss jixtiequ jitgħallmu aktar dwar partikolari metodu li inti tista 'sejħa fuq xi ħaġa - biss Google. jQuery huwa estremament dokumentati tajjeb. U spiss drabi hemm ħafna ta ' eżempji li huma jipprovdu għalik. Jekk aħna iscroll down - mod isfel - li nistgħu nużaw, kif ukoll. Għal darb'oħra, meta l-iżviluppatur fatt tmur permezz l-inkwiet tal-kitba ta ' librerija, huma tipikament jixtiequ xi ħadd jużah. Allura flimkien se jkun dokumentazzjoni. U li d-dokumentazzjoni tista 'normalment tkun jinstabu fuq il-paġna tal-proġett, li huwa għaliex aħna ħadt dak is-sit oriġinali il-bidu, li jgħaqqad inti l- paġni tal-proġett sabiex inti tista ' tara li d-dokumentazzjoni. Tipikament, il-paġna tal-proġett fil-każ ta [inaudible], hija qallek l- ismijiet tal-klassijiet. Fil-każ tal-JavaScript, hija tagħti inti l-isem tal-funzjonijiet. Mill-mod, jekk aħna iscroll sal-quċċata, nota naħa quick fuq il-funzjonijiet hija kull meta inti tara funzjoni implimentati bħal dan mal-hard parentesi fin-nofs, dak il-mezz li dik il-proprjetà hija fakultattiva. Just a up irjus. Stajt tidher ħafna mistoqsijiet dwar dan. Allura hawn nistgħu naraw li l- janimaw jieħu proprjetajiet bħala argument meħtieġ. U kull ħaġa oħra huwa fakultattiv. Nota naħa - inti tista 'taħseb dan, sort tal, bħal paġni bniedem. Paġni bniedem huma dokumentazzjoni għall C u għal ħafna affarijiet oħra, kif ukoll. MIKE RIZZO: Allura aħna ħadthom tgħallmu kif bidla CSS differenti fuq il-paġna, janimaw dan, u neħħi żid HTML. Iżda wieħed mill-aktar qawwija verament affarijiet dwar JavaScript u speċjalment jQuery - dak li ihallik tagħmel huwa twieġeb għal elementi differenti li jiġri. Per eżempju, hawnhekk għandna avveniment handler. U dan ifisser biss kull meta dan avveniment jiġri, aħna jimmaniġġjaw dan fil- b'ċertu mod. Allura hawnhekk, l-avveniment jQuery ġeneriku handler huwa l-dot fuq. U mbagħad, l-ewwel ħaġa li għandek provduta huwa dak avveniment suppost tkun qed tisma għall. So here, huwa l-click li aħna qed jistennewk. Tomáš REIMERS: Alternattivament, inti għandek fuq imbagħad jerġgħu, li hija waħda popolari ħafna. Allura lura għall-drop down tiegħi idea menu. Inti għandek l-waħda fuq fuq imbagħad jerġgħu. U allura inti tista 'bidla li. MIKE RIZZO: Dritt. U mbagħad, meta dan iseħħ, hija biss tesegwixxi din il-funzjoni li aħna tagħtiha bħala argument u li allerti bonjour jew hi. Tomáš REIMERS: Allura fil-każ ta ' JavaScript, dan huwa post għandna bżonn li neħħi lilna nfusna minn C. Nistgħu attwalment tieħu funzjonijiet argumenti. U hemm ħafna ta 'verament modi kumplessi biex tagħmel dan. Aħna ser jippromwovu mod wieħed, li hija tista 'tiddefinixxi l- jiffunzjonaw hemm dritt. Allura meta inti qed tistaqsi għal funzjoni bħala parametru, int bażikament biss ser jiddefinixxu l-funzjoni fuq il-post. U l-mod inti tiddefinixxi funzjoni fl JavaScript huwa inti litteralment jgħidu funzjoni. Imbagħad, normalment, l-isem tal-funzjoni. Iżda aħna qed qatt ser referenza din il-funzjoni mill-ġdid. Allura aħna jitilqu minnu nameless. Imbagħad il-parentesi, allura l-kaboċċi braces, u allura l-kodiċi f'dak. Allura aħna nifhmu dan jista jkun ftit konfuża. Allura aħna nagħtuk l-forma ġenerali ta ' liema avveniment handler Dehra hawn taħt, li hija fuq l-avvenimenti. U mbagħad, kodiċi tiegħek ġewwa dan. MIKE RIZZO: Hemm xi mistoqsijiet dwar dan? Dan jista 'jkun ftit konfuża l-ewwel darba tara dan. Tomáš REIMERS: Inti fil-fatt tixtieq li jiftħu fajl u juru lilhom xi jQuery dritt issa? MIKE RIZZO: Yeah, ejja tagħmel dan. OK. Tomáš REIMERS: Allura issa aħna qed fl-appliance. U dak li aħna ghamilt hija aħna ħadt l- libertà tal-ħolqien kemm index.html file, li links għal fajl JavaScript. U nistgħu tiftaħ il - yeah. Ukoll, huwa ma żewġ affarijiet. L-ewwel huwa torbot il-fajl JavaScript. U aħna ser tara li up here. Naraw li fil-kap tal- Dokument HTML, partikolarment. Allura inti taf tara hemmhekk li aħna, bażikament, jgħidu SRC, li stands għall-sors. U dak l-URL. Allura hawn inti tista 'tgħid konna inklużi jQuery. U konna wkoll inklużi skripts. Il-mod ieħor biex jinkludu JavaScript huwa li inti tista 'tinkludi iskrittura inline tag kif għandna fil-qiegħ fejn jgħid tip iskrittura huwa test JavaScript. Allura aħna qed tgħid, jisimgħu, aħna qed dwar li tinkludi iskrittura. U t-tip ta 'dik iskrittura huwa JavaScript, li huwa tip ta 'test. Sempliċi ħafna. MIKE RIZZO: Allura dan, it-tip ta ', gets biex mistoqsija tiegħek dwar kif aħna jinkludu JavaScript fil-fajls tagħna għaliex meta aħna kien PHP, nagħmlu xi ħaġa bħal din. U mbagħad, jkollhom funzjonijiet PHP tagħna - ejja ngħidu ħażniet tagħmel xi ħaġa ma 'dak - tmur fil hemm. Madankollu, issa għandna l-tags iskrittura li aħna tagħtiha, li huma attwalment parti tal-HTML innifsu għaliex mhuwiex faking jkunu ta 'file HTML bhalu huwa PHP għaliex jekk inti fil-fatt imorru fil- u ħarsa lejn is-sors tal-paġna, tkun taf tara dawn it-tags iskrittura fil hemm mal-JavaScript assoċjata ma minnhom f'dak. Mela allura, jekk ridna li jiktbu xi JavaScript - ejja biss jgħidu ridna ibiddel il-korp għaliex dritt issa I ma jkollhomx kwalunkwe tags oħra li I jistgħu verament jeditjaw minbarra korp. Ejja ngħidu biss I riedu jibdlu l-CSS ta 'dak. Allura aħna ser jimxi 'l quddiem u l-bidla il-kulur ta 'dan għal aħmar. So I tiffranka l-fajl. Ejja ħa mmorru lura għall-paġna web tagħna, jġedded, u tagħmlu awtomatikament minħabba li ma jidhirx bhalu stenniet fil-livelli kollha għaliex aħna ma kinux jisimgħu għal avveniment jew xi ħaġa bħal dik. Tomáš REIMERS: Mela jekk immorru lura għal dak fajl b'mod partikolari - il-HTML fajl - dak li int ser biex tara hija li għandna - ftakar li dan huwa mgħobbi, tip ta ', kronoloġikament. Allura aħna għandna l-ewwel ir-ras. tagħbijiet dawn iż-żewġ fajls. Imbagħad immorru l-korp. U naraw bonjour dinja. Allura aħna jirrendu bonjour dinja. U allura l-aħħar ħaġa li għandna huwa aħna għandna l-tag iskrittura. Għalhekk hija tiġġestixxi l-tikketta iskrittura għaliex dan huwa ma javżak li tistenna għal xejn. U dak l-aktar bażika mod jiddekorri JavaScript. Ma 'dak imsemmi, inti tista' tpoġġi l-iskrittura tag up fil-header biss biex juru dan il-punt? U run dan. Aħna ser avviż li huwa ma jibdlu l-kulur. U dan huwa wieħed mill-problemi ta ' JavaScript huwa li l-affarijiet huma mgħobbija f'ordni kronoloġika. Allura fil-mument li dan il-kodiċi kien għaddej, aħna magħżula - jmorru lura - l-tikketta ġisem. Il-lametta korp s'issa ma jeżistix minħabba JavaScript huwa konformi mal-HTML. Allura l-browser huwa simili ġisem tagħżel. M'hemm l-ebda ħaġa bħal din s'issa. Allura nistgħu ninjoraw dan. U aħna iżommu għaddejjin. U allura aħna jiddefinixxu tag korp. Iżda dan qatt gets aġġornata. Allura meta inti qed jimplimentaw script tags, aċċerta ruħek li tpoġġi wara l-tikketta ġisem. Slide li jmiss. MIKE RIZZO: OK. Allura aħna mibdula xi ħaġa. Iżda ma look like hija rrispondiet għall us-livelli kollha għaliex biss tip ta ' ma kien hekk kif mgħobbija il-paġna. Allura issa, minflok tagħmel dan, għaliex ma aħna żid avveniment handler. Mela ejja nagħmlu xi ħaġa lill-korp ġdid. U ejja ngħidu nagħmlu dan fuq - ikklikkja. Aħna ser żid funzjoni. Bidla Ejja: TOMAS REIMERS huwa kulur aħmar mill-ġdid. Għaliex le? Bidla Yeah, ejja: MIKE RIZZO "kulur tagħha għal aħmar mill-ġdid. Kull dritt. Mela ejja rikarigu-paġna. OK, naraw - kif mistenni, ma dawran aħmar s'issa. Imma allura aħna tista 'tmur quddiem u ikklikkja dan. Tomáš REIMERS: U dan ma dawran aħmar. MIKE RIZZO: U ma dawran aħmar kif mistenni. Tomáš REIMERS: U nistgħu naraw kif nistgħu jibdew jibnu bażika ħafna interazzjoni. Affarijiet oħra, aħna tista 'tixtieq tagħmel hu li, jekk aħna ma jridux jagħmlu l-korp kulur aħmar, ejja jagħmlu l-HTML isfond bil-kulur aħmar. Just hekk huwa l-istess CSS. U meta aħna jibdlu, nistgħu naraw dan effett daqshekk drammatiku ħafna tal-bidla tal- paġna kollha. Għalhekk għal darb'oħra, jekk inti qed jimplimentaw l-affarijiet, inti jista 'jkollhom komponent wieħed li huwa maħsub biex jiġu għafast fuq. Ejja ngħidu buttuna Exit u komponent ieħor kollu, li huwa maħsub biex jirrispondi. Allura inti tneħħi tieqa meta dan iseħħ. MIKE RIZZO: OK. Just bħala eżempju - inti ma jiksbu biex tara dan preċedenti - I ser biss jurik dak li jidher simili meta aħna jaħbu xi ħaġa. So I ser imorru quddiem u ma slide up. Tomáš REIMERS: Trid wrap li fil- paragrafu tip qabel nagħmlu dan? MIKE RIZZO: OK. Yeah, għaliex ma nagħmlu li biss hekk nistgħu tagħżel ftit aktar. Tomáš Reimers: u ejja tagħtiha klassi. MIKE RIZZO: Yeah. OK, so ejja ara. Minflok għażla tal-korp attwali issa, I ser jagħżlu biss kollox ma klassi hello, li hawnhekk aħna biss għandhom ħaġa waħda. Allura aħna ma għandu jkollhom tinkwieta dwar dan. So I ser jġedded. I ser imorru quddiem u ikklikkja dan. U, tip ta ', għamlet slide stramb up ħaġa, li ma tfittex li attraenti. Ġeneralment, dawn ma tfittex pretty sbieħ. I raden, dan - għal xi raġuni - ma. I ser biss tagħmel fade out hekk inti tista 'tħares lejn li wisq. Ħafna nicer. U mbagħad, jekk I tiftaħ il-JavaScript console darb'oħra u irridu naraw liema jidher qisu meta aħna fade hija pulzieri Issa, I biss sejħa fade fuqha. U tgħib lura pulzieri Bl-istess mod, nistgħu attwalment jgħaddi wkoll argument li fade fi jew fade out, li huwa, tip ta ', il-veloċità ta' dan. Mela ejja imorru quddiem u jgħidu li rridu li jmorru bil-mod fade pulzieri So I raden huwa xorta deher pretty malajr. Iżda kien aktar kajman minn qabel. Tomáš REIMERS: U jekk inti tixtieq li ssib af aktar dwar dawn l-affarijiet, għal darb'oħra, biss jmorru għall-dokumentazzjoni jQuery, li konna tak, u aqra permezz ta 'dawn. Huma jiddokumentaw funzjonijiet tagħhom oerhört ukoll. MIKE RIZZO: OK. So I raden immorru lura għal dan. U nistgħu nitkellmu dwar page aħħar tagħna. Well, nistgħu finitura ma bootstrap. U allura aħna ser tiftaħ it up għal xi mistoqsijiet. U jekk inti guys xi ideat li tixtieq tipprova tarmi up u ara jekk nistgħu jimplimentawhom mal- JavaScript malajr. Allura verament malajr dwar bootstrap, li ġiet awtomatikament inklużi fil aħħar problema tiegħek stabbiliti fil-folder CSS u fil-fatt marbut fl tiegħek header.php. Allura inti jista 'jkollhom klassijiet miżjud li huma definiti fil bootstrap lilha. U kien awtomatikament styled dawk l-affarijiet xieraq. Tomáš REIMERS: Allura bootstrap huwa ferm ħaġa maġika żviluppati mill-poplu fuq Twitter. U dak li kien maħsub biex tagħmel kien - qabel websajts kienu verament diffiċli li jagħmlu tfittex sbieħ, speċjalment meta kellna ħafna ta 'komponenti komuni. Allura ħafna ta 'buttuni fuq il- web ħarsu l-istess. A lott ta 'oqsma tat-test jista' jsir biex tħares aħjar mit-test standard qasam you know probabbilment minn verament websajts qodma jew verament sar ħażin websajts, li tfittex biss bħal litterali kaxxi test mingħajr l-ebda forma ta 'test dell jew kwalunkwe tip ta 'kontorn sbieħ. Allura dak bootstrap ma kien qal, ukoll, għandna stili komuni lott. Għaliex ma we jagħmlu sett wieħed komuni ta 'CSS u sett komuni ta 'JavaScript kif ukoll, li tista 'stil huwa kif u liema tista 'tagħti liż affarijiet simili drop down menus, li tista 'tagħti liż affarijiet simili modals. Modali huwa dak li pops fuq il-paġna kull meta huwa strettament ħaġa, li jinibixxi aktar interazzjoni sakemm inti jinteraġixxu miegħu. Xi ħaġa bħal din hija, inti żgur inti tixtieq li tħassar dan il-ħaġa? Inti ma tistax verament tagħmel xi ħaġa oħra sakemm inti tgħidli iva jew le. Hija ħadet dan kollu u ppakkjati dan flimkien u qal, here we go. Nies issa jistgħu jużaw dan. U inti tista 'ssib dan matul fil getbootstrap.com. Kien awtomatikament inklużi fi aħħar problema tiegħek stabbiliti. U int aktar minn welcome biex użu fuq proġett finali tiegħek. U jekk inti tixtieq li ssegwi dik link li tikseb bootstrap. Int ser ikollok tara hawnhekk huwa l- Bootstrap sit CSS. Int ser ikollok tara bootstrap. U jekk inti iscroll, tkun taf tara kif tniżżel dan, kif tinstallahx, eċċetera. MIKE RIZZO: U inti tista 'wkoll, Interessanti biżżejjed, customize jkun kwalunkwe tip ta 'temi li tixtieq. Naf li xi ħaġa I għamlet għall tiegħi proġett finali meta ħadt il-klassi kien customize. Verżjoni differenti ta bootstrap li kellhom skema ta 'kulur differenti u forom differenti ta 'xi affarijiet differenti. So I ninkoraġġukom biex tilgħab ma 'dak. Huwa tip ta 'gost li jagħmlu. Tomáš REIMERS: Looking madwar l-quċċata għal darb'oħra, huwa simili ħafna għall-Font Sit tal-biża. A lott ta 'dokumentazzjoni se tibda li jidhru simili meta inti ħadthom raw biżżejjed ta 'dan. Allura hawnhekk għandna l-CSS komponent ta 'dan. U tkun taf tara kif tista 'stil affarijiet. Mela jekk tikklikkja fuq tabelli, per eżempju, inti tista istantanjament tagħmel tabella pretty sempliċiment billi żżid il-mejda klassi għalih. Istess affarijiet għall-buttuni. Jekk inti sempliċiment żid il BTN klassi u BTN inadempjenza jew BTN primarja, inti tista ' tikseb xi wieħed minn dawn il-buttuni ma 'dawn l-istili qabel magħmula. U mbagħad, jekk inti qed tfittex xi ħaġa aktar kumplessi minn sempliċiment restyling dak w diġà għandhom, fuq fuq il-tab JavaScript madwar l-quċċata aħna mazz ta 'komponenti. Allura hawnhekk għandna tranżizzjonijiet, modals, dropdowns, patti, u tooltips. A tooltip huwa dak pops up taħt tiegħek maws meta inti imbagħad jerġgħu fuq xi ħaġa. Popovers, twissijiet, buttuni, kollassabbli akkordjanijiet huwa dak dawn qed normalment imsejħa. Karużelli, li flip permezz ta 'immaġini simili. Għalhekk dawn huma l-komponenti ta bootstrap. Nixtieq ninkoraġġukom biex ħafna tmur tħares lejn lilhom. Hemm komponent JavaScript u komponent CSS. Ħossok liberu li tużahom kif inti se. Aħna mhux se jmorru wisq ġo fihom għax aħna nħossu d-dokumentazzjoni isir verament tajjeb. U yeah. Għandek xi mistoqsijiet dwar dan? MIKE RIZZO: Allura bħala huma verament malajr naħa, id-disinn ta 'din il-paġna web li aħna malajr jitqiegħdu flimkien għal din il-preżentazzjoni hija attwalment isir użu bootstrap. Kif tistgħu taraw, meta aħna ikklikkja fuq dawn tabs differenti, aħna qatt ma attwalment jħallu din il-paġna index.html kurrenti. Allura dak li għandna huwa divs differenti fi ħdan dan index.html. U mbagħad, meta aħna ikklikkja differenti tab, huwa biss tinbidel li turi wieħed. Għalhekk jixraq pożizzjonijiet tagħhom, bidliet l-HTML tal-paġna sabiex il-tab kurrentilivell huwa mmarkat bħala attiv sabiex jidher b'mod differenti u jistenna tassew sbieħ. Tomáš REIMERS: Allura li kien kollu jsir mingħajr us miktub kważi kull CSS. Naraw ukoll header madwar l-quċċata, li l-kuluri huma mill us. Iżda l-attwali tqegħid fuq il- quċċata tal-paġna u jagħmlu dan scroll kien bootstrap. U mbagħad anke għal librerija ieħor - dan mhuwiex wieħed tkellimna dwar iżda wieħed inti tista 'Google jekk inti tixtieq. Din tissejjaħ prettify.js. U se sintattiku tenfasizza kodiċi tiegħek għalik użu kemm CSS u JavaScript. L-aħħar ħaġa li rridu nitkellmu dwar qabel aħna rilaxx inti out fil- dinja tħares lejn libreriji biex insemmu kif jużawhom u, wieħed jittama, aqra dokumentazzjoni u ssib dak li bżonn huwa kif issib libreriji. Allura l-ewwel hija aħna qed biss se timbotta Google. Mur Google. C'est litteralment dak li nagħmlu meta aħna bżonn tagħmel xi ħaġa hija aħna Google. Hemm librerija JavaScript li tippermetti lili biex jimmanipulaw darba fi mod utli? Mela jekk jien taf li xi utent ħolqien kont hawn, u dan huwa l- ħin kurrenti, kif nista 'tikkalkula l- differenza ma 'dak mingħajr ma jkollhom jikkalkulaw myself? Allura dan huwa attwalment ħaġa komuni, JavaScript time librerija. U hawn aħna Moment.js-- l-aktar waħda popolari. Jekk għandna bżonn librerija li jimmanipulaw xi ħaġa simili kulur li tkun tista ' jiġġeneraw mazz ta 'kuluri każwali - possibilment, jiġġeneraw stil jew xi ħaġa - nistgħu Google xi ħaġa simili JavaScript kulur librerija. U jien ċert aħna se pop up ma ' elf u wieħed minnhom. Inti qed jilqgħu biex taqra permezz tagħhom. Allura ħafna affarijiet - meta issib minnhom - ser tkun ospitata fil waħda mill- siti li kodiċi ospitanti. Huma qed huma dawk popolari ftit. L-aktar popolari, billi s'issa, huwa github.com. U jekk inti tmur GitHub huwa attwalment fejn jinnormalizzaw kien ospitat. Mela jekk inti tixtieq li tmur lura għal li wieħed. Juru lilhom li. MIKE RIZZO: U li attwalment fejn dan huwa ospitat wisq, jekk inti ndunat. Tomáš REIMERS: Yeah. Mela jekk inti tmur fuq biex jiġu normalizzati u jmorru l-GitHub. Kieku huwa li? MIKE RIZZO: ħaġa qattus li ftit huwa s-simbolu GitHub. Tomáš REIMERS: Oh. Allura GitHub juża metodu jissejjaħ Git taħżen kodiċi. Hija ma tkunx taf dak li hu jew dan frightens int, li l-multa. Inti ma għandekx tkun taf liema Git hija minħabba GitHub għandha buttuna Download fil-qiegħ dritt. Il-ħaġa utli oħra li tkun taf dwar GitHub hija aktar prodotti se jkollhom taqra me. U jekk dawn ma għandhom websajt, l- aqra me ser jitkellmu dwar kif inti jinstallaw dan, kif tużah, dak li ma, eċċetera, eċċetera, eċċetera. Dak li konna fundamentalment mixi inti permezz. MIKE RIZZO: jaqtagħhom Internet. Tomáš REIMERS: Dik il-multa. L-aħħar żewġ affarijiet li ridna biex jitkellmu dwar - konna tkellimna dwar Git - huwa troubleshooting. U dan huwa wieħed mhux bħala rilevanti għall- il-prodott finali kif huwa meta titlaq 50. U meta inti tmexxi fi prodotti implimentazzjoni libreriji jew implimentazzjoni proġett tiegħek, int ser li xi mistoqsijiet jew int ser tfittex għall-mistoqsijiet. Għal darb'oħra, Google. C'est litteralment dak li nagħmlu. Dan se ħoss iblah. Iżda litteralment, aħna Google. U għal darb'oħra, wieħed mill-ewwel affarijiet inti ser normalment run fis hija stackoverflow.com, li hija meraviljuża mistoqsija u ma jidhirx mit-tweġiba. Huwa wunderbare kemm għaliex inti tista ' wara l-mistoqsijiet u jfittxu tweġibiet iżda wkoll minħabba diġà għandha ħafna ta ' kontenut pre-popolati hemmhekk. Allura normalment meta inti Google programmazzjoni kwistjoni fl-ewwel koppja hits inti tista 'diġà run fis dan matul settijiet problematiċi tiegħek. U mbagħad, l-aħħar ħaġa verament fil-qosor huwa JSFIDDLE, li huwa - illum konna qed tagħmel ħafna xogħol ma ' JavaScript HTML CSS. JSFIDDLE huwa app web, li bażikament tippermetti biex tieħu HTML tiegħek, TIEGĦEK JavaScript qiegħ tax-xellug, u dritt CSS tiegħek top. U allura tista 'toħloq tirrendi a quick ta 'dan u tara kif jinteraġixxi. Huwa utli ħafna meta n-nies qed jippruvaw jagħmlu prova ta 'kunċett simili dan huwa kif inti tagħmel drop down menu. Forsi Ikxef malajr jew ikun x'ikun. MIKE RIZZO: Mela ejja go quddiem u kklikkja dan. A quick nota - billi, qabel konna tagħmel fuq klikk. Jinstabx JCorey Korea wkoll mibnija fil klikk handler avveniment li juża biss għax tidher int tmur jridu jagħmlu ħafna affarijiet meta inti tixtieq li ikklikkja xi ħaġa. Bl-istess mod, għandu wkoll imbagħad jerġgħu. Iżda biex jiksbu l-ambitu sħiħ ta ' dawk, ħarsa lejn il-jQuery dokumentazzjoni u tagħmel dan. Jien għamilt xi ħaġa stupid hawn. Tomáš REIMERS: So I jkollhom tassew mgħaġġla Programm dritt hawn, li jgħid buttuna fuq klikk. Imbagħad għandna għal loop. Għal i huwa inqas minn 404. Huwa biss se pop up dawn il-messaġġi ta 'twissija. MIKE RIZZO: U dak li kien il- kodiċi 404 kien fil-HTML? Ħadd ma tiftakar? Ma tkunx misjuba, id-dritt. Chrome miżjuda wkoll f'dan pulita ħaġa fejn inti tista '- Tomáš REIMERS: Għaliex in-nies bħall- Mike bdiet tagħmel dan ħafna u utenti annoying, li tippermetti inti tara info. MIKE RIZZO: Yeah. Tomáš REIMERS: Do we xi mistoqsijiet dwar dan, madwar JavaScript libreriji, konstatazzjoni libreriji, jew liema web iżvilupp jistenna bħal fid-dinja reali? Aħna running up kontra l-ħin. Hekk jien ċert aħna qed tmur sabiex ikollhom ħin biex jimplimentaw sakemm huwa tassew mgħaġġla. Are we tajba? MIKE RIZZO: Xejn inti guys tixtieq biex tara tassew mgħaġġla fl, bħal, tnejn minuta jew inqas? Tomáš REIMERS: xejn nistgħu tiċċara? Kif jikteb fil - UDJENZA: [inaudible]? MIKE RIZZO: Iva, hekk that's - Tomáš REIMERS: Tista 'biss hit Kontroll-U fuq il-websajt. MIKE RIZZO: Oh, I ma kinitx taf li. Tomáš REIMERS: I think, yeah. Kontroll-U. Yeah. MIKE RIZZO: Oh, b'tali mod li l- kodiċi għall-website. Imma jekk inti fil-fatt tixtieq li tniżżel tagħna fajls u kollox, huwa ospitat fuq github.com Tomáš REIMERS: mmejla isem tiegħi - Tomas Reimers - slash Seminar sing CS50. MIKE RIZZO: U inti tista ' ssib kollox hemm. Tomáš REIMERS: Dan huwa dak GitHub Dehra, mill-mod. Għalhekk għal darb'oħra, meta inti tara sors miftuħ proġett, tipikament, dawn ser ikunu jinqara me hemmhekk li inti tista 'taqra. U jekk inti tmur lura, inti ser ikollok avviż li inti għandek il-zip download, li se jippermetti li inti tniżżel is-sors kodiċi li jinkludu l- prodott ħaġa tiegħek. MIKE RIZZO: Yeah, u jekk aħna ikklikkja fuq il-index.html verament malajr - Tomáš REIMERS: Int ser ikollok tara hawn l- kodiċi tas-sors għall-websajt tagħna. MIKE RIZZO: Ukoll, I nesa li timbotta dritt qabel it-tabella big inklużi, imma hemm ukoll mejda ta chmods li aħna inklużi biss għaċ-ċarezza tiegħek. Imma jekk aħna iscroll-triq kollha sa l- qiegħ, aħna ma attwalment tagħmel ħafna ħafna mal-JavaScript Jittieħed fil-livelli kollha ma 'dan. Huwa esklussivament minn kollox inkella li kellna. Allura nirringrazzjak guys għall ġejjin u jisimgħu. Nittamaw li dan kien verament utli. Jekk għandek xi JavaScript relatati mistoqsijiet jew biss trid titkellem dwar x'iktar Bħal dak affarijiet jibred oħra inti tista 'tagħmel ma JavaScript, aħna'd imħabba biex jitkellem miegħek. Tomáš REIMERS: Jekk għandek xi mistoqsija dwar il-proġett tiegħek jew jekk dan jista 'jkun rilevanti, aħna ser probabbilment stick madwar ftit wara dan. Iżda minbarra dan, għandhom weekend tajjeb. MIKE RIZZO: Yeah, igawdu. Ara inti guys. Tomáš REIMERS: Ara ya.