TOMAS REIMERS: Sveiki, visi. Mano vardas Tomas Reimers. 

MIKE RIZZO: Ir aš Mike Rizzo. 

TOMAS REIMERS: Mes esame du CS50s TS. Ir šiandien mes pirmaujanti seminarą JavaScript ir CSS Web Apps ". Jei norite sekti kartu, nuoroda yra teisinga ten. Ir jūs norite įdėti jį kompiuterio trumpai? 

Yra nuoroda. Tai nedidelė svetainė, kurioje yra nuorodos į visi ištekliai Mes ketiname būti nukreipta Jums šiandien taip pat turi daug naudingos informacijos parašyta mus skaityti daugiau į gylį, kai jūs einate atgal, ir bandote prisiminti, kas tiksliai gi mes pasakyti, kas buvo jums kalbėti apie, ir tt. 

MIKE RIZZO: Gerai. Taigi, pradėkime. 

TOMAS REIMERS: Taigi jūs norite pradėti? Gerai. 

MIKE RIZZO: Taip. Taigi pirmiausia norėjo pradėti plataus apžvalga apie interneto ir Failų tipai kuriant svetaines. Nors šis pristatymas mes norime patekti į į "JavaScript" daug daug vėliau, mes norėjome pradėti nuo tiesiog, natūra, pavyzdžiui, tiesus ką iš svetainės ir kaip galvoti apie projektuojant svetainė pradžios. 

Taigi vaikinai, šiuo metu - su juo yra penktadienis naktį - turi būti pateikė savo CS50 finansai problema rinkiniai. Tikimės, kad tai buvo geras skonis kas web programavimas gali būti. Bet čia mes norime, rūšies, suteikti jūs dar skonis, taip pat. 

TOMAS REIMERS: Taigi tiesiog Priminti ką atsitinka, kai jūs įvedate savo URL į Jūsų interneto naršyklė, kad URL gauna pažvelgė į kompiuterį. Ir jūsų kompiuterio prijungtas prie kito kompiuterio, kuriame vyksta tą svetainę. Gerai, kad, kai jūs einate į google.com, jūs prijungtas prie vieno iš "Google" kompiuteriai, kurie turi failai google.com. 

Tada jis klausia, už konkrečią bylą. Taigi, jei jūs einate į - Aš nežinau, - example.com / index.html arba / bandymas.html, jūs ketinate prašyti kad konkretus failas. Ir web serveris vyksta? grąžinti jį jums. 

Tada, kai jūs einate per šį failą - kai jūs kompiuteris gauna, kad failas - jis ketina pradėti sukurti interneto puslapį. Taigi, dabar jis turi HTML failą kuri yra tarsi struktūra tinklalapį. HTML failas taip pat gali nuoroda CSS failų, kurie apibūdina stilius puslapyje. 

JavaScript failus, kurie apibrėžia sąveika su interneto puslapyje. Vaizdo failai, kurie yra tik vaizdai. Ir galbūt nuorodų į kitus HTML failus, kurį galėsite aplankyti. 

MIKE RIZZO: Gerai, puiku. Taigi jus vaikinai visi, ko gero, kruopščiai nustatyti savo vietos kompiuterio savo virtualios mašinos. Ir tai tik, tipo, yra vietos domeno, kad jūsų kompiuteris visagalis tik jums ne savo IP adresą. 

Taigi per tą, tada jūs galite pridėti į jį savo žiniatinklio puslapių. Aš turiu galvoje, kad CS50 Finansų, reikia turėti pridėta keletas HTML puslapius, kurie, rūšiuoti, suvynioti į PHP įvynioti. Tačiau, galiausiai, ką jūsų PHP puslapių buvo išvedė buvo HTML. 

Bet galvoju grįžti į pačią pradžią iš PSET, mes turėjome nustatyti už viską teises, tiesa? Taigi, tai tik iš esmės leidžia mums žinoti, kas gali skaityti, rašyti, ir galbūt vykdyti kiekvienos bylos. Taigi, mes ketiname daryti greitai - hm? 

TOMAS REIMERS: Taigi, mes ketiname padaryti greitai demo. Taigi tik priminti jums, kai jūs prisijungti prie "Google" kompiuteris - kas - ir paprašyti failo kompiuterį pirmą kartą reikia įsitikinti, kad jūs leidžiama faktiškai peržiūrėti failą arba skaityti, kad failą nes jūs galite ne tik paklausti už bet kokį failą į tą kompiuterį, tiesa? Tai būtų saugumo pavojus. 

Taigi bylos sistemas mes naudojame, pavyzdžiui, tai CS50 prietaisas, turi tris bendri žmonių, kurie gali turėti teises į kažką. Pirmasis faktinis savininkas minėto failo. Antroji grupė, failas priklauso. Mes neketiname sutelkti per daug apie tai. Ir paskutinis dalykas yra, tarsi, pavyzdžiui, pasaulis arba kaip ir visi kiti, kas nėra specifinė šios bylos ir nėra turėti jokių nuosavybės teisių į jį. 

Taigi, jei mes turime savininkas, grupė, ir tada pasaulis. Ir tada, už kiekvieną iš šių grupių, galite gali turėti vieną iš trijų leidimų, Gerai, ar kelis iš jų. Jūs galite turėti skaitymo teises. Jūs galite turėti tinkamus leidimus. Ir jūs galite turėti vykdyti teises. 

Taigi, atsižvelgiant į tikrąsias failų tipų, skaityti Leidimas kaip iš tikrųjų skaityti failo turinys. Teisė leidimo rašo į tą failą. Vykdyti leidimo veikia failą, kaip jūs darote, kai jums paleisti vieną iš Jūsų CS50 projektai. 

Taigi, kai mes galvoti apie failų pavyzdžiui, kai mes turime skaityti HTML byla, kuri turi būti pasaulis skaityti, tiesa? Matyt, taip pat savininkas nori kad būtų galima redaguoti failą. Taigi, savininkas ketina reikia skaityti ir rašyti leidimus. Jie tikrai nereikia vykdyti. 

Grupė, mes ketiname elgtis pati, kaip ir dabar pasaulyje. Taigi jie turi skaitymo teises. Bet jiems nereikia rašyti arba vykdymo teisių. Ir dabar, jei mes manome, į buvusio PSETs, ką mes suprantame, yra šios rūšies iš atrodyti binary, tiesa? 1 reiškia "taip". 0 ne. Taip pat galime išversti tai dvejetainis. 

Taigi 110 dvejetainiu būtų 6. 100 būtų 4. Tas pats su pasauliu. Taigi skaičius norėtumėte gauti už leidimus tai būtų 644. 

MIKE RIZZO: Ir jei jūs manote atgal kai suCHMODintas kažką, manau, jie nusileido problemos nustatyti pavyzdys, kur galima padaryti kažkas panašaus chmod 644 ir tada failo vardą. 644 tada, dabar galite pamatyti tiesiogiai jei tai ateina iš. Taigi tikiuosi, kad daro, kad šiek tiek daugiau aišku. 

Ir tada jūs vaikino aiškumo - Oh yeah, čia tai dar kartą. Taigi 600 tada būtų tiesiog pavyzdys davėme čia, jeigu savininkas turi skaityti ir teisiųkeisti o grupė ir pasaulis neturi jokių teisių atidarykite failą. 

TOMAS REIMERS: Ir tada mes turime greitai sąrašas bendrų leidimų. Taigi, katalogai, norite faktiškai chmod 711. Greita žemę - už katalogo turėti vykdomąjį leidimas reiškia, kad būtų galima atidaryti katalogą. Vaizdai, CSS, JavaScript, HTML poreikiai 644, nes, iš esmės, pasaulis poreikiai skaityti leidimus. 

Ir PHP, kuri vaikinai mačiau nors mes ne kalbėti apie tai griežtai paprastai suCHMODintas su leidimo 600, nes jis eina su savininko teises. Bent ant prietaiso. 

MIKE RIZZO: Taigi, jei jūs neturite specialiai nurodyti, kokios rūšies failą norite iš tikrųjų nustatant iki šio pateikimo - mes turėjome su šia problema, nes viskas buvo ne suCHMODintas teisingai - jūs ketinate gauti, tipo, Draudžiama klaida, kad svetainė iš tikrųjų nėra leidimo naudotis nepriklausomai failą jūs norite pasiekti. Ir, žinoma, kad gali būti nustatyta - kaip problema nustatyti - keičiant leidimus tinkamai. 

TOMAS REIMERS: Ir paskutinis komentaras skirtas greitai vietos plėtra - mes atnešė tai padaryti, bet mes tiesiog norėjo į jį vėl - jei jūs paprašykite serveryje - tiek vietos šeimininką, pavyzdžiui, com ar whatever. - ir jums nereikia nurodyti konkrečią bylą, failą, kad jūsų kompiuteris bus prašyti vadinama index.html. Arba, jei tai nėra, index.php. 

Cool. Taigi, tai tik visko Priminti, tikiuosi, kad mes įtraukti į skyriuje, ir paskaita, ir iki šiol CS50. Ir dabar mes ketiname pradėti kalbėti apie specialiai bibliotekos. JavaScript ir CSS bibliotekos interneto apps. 

Taigi vienas greitas priežastis, kodėl mes turime bibliotekos yra programavimas - ten yra problemų daug programavimas, kuris saugo Popping vėl, ir vėl, ir vėl. Galite pastebėti, kad daug svetainių reikia galimybę turėti kritimas žemyn meniu, pavyzdžiui, ar reikia galimybę turėti labai standartinį mygtuką stilių, kuris negali būti lengviausias dalykas. Dabar, kai jūs pradėsite gauti į HTML, jūs suprasti, kad mygtukai tikrųjų gali atrodo tikrai bjaurus, jei jums nieko nereikia daryti. 

Taigi daug žmonių buvo parašyta vadinamas bibliotekos. Ir šiame kontekste, jie taip pat vadinamas sistemas. Mes ketiname naudoti du pakaitomis. Ir kas jie yra, kad jie iš esmės Premade gabaliukai kodas - arba CSS ar JavaScript - kad atimti iš daug Team turite kodavimo. 

Taigi jie iš anksto apibrėžti klasių krūva arba anksto nustatyti funkcijų krūva JavaScript atvejis, kuris galite skambinti vėliau. Ir tada jūs galite, rūšiuoti, gauti prieiga prie šio kodekso, be atsižvelgdamas nieko daryti. Bibliotekos pavyzdys CS50.H. Tai buvo biblioteka mes davė jums atgal per savaitę vieną, kuri leido jums padaryti dalykų, pavyzdžiui, kad GetInt ir GetString nereikia rašyti bet kodas sau. 

MIKE RIZZO: Gerai. Taigi čia, kaip ir mes turėjome būti mūsų c failai skiriasi bibliotekos, kad mes taip pat turėtų būti mūsų HTML failus skirtingas bibliotekas. Pavyzdžiui, jei mes norėjome įtraukti specifinis biblioteka JavaScript čia ko gero, vienas, kad mes raštu patys, kaip jis vietoje vyko vadinamas script.js, mes tiesiog naudoti šį žymėjimą. 

Taigi, mes turime scenarijų tipo lygu "JavaScript" kodo lygu JavaScript.js. Ir jei manote, kad į jūsų CS50 finansų problema nustatyti, jei jūs žiūrite į Header.php į šablonų aplanką, turėtumėte matyti kai kurie iš jų įtraukti. Taigi tai pirmasis - scenarijus - yra įskaitant JavaScript biblioteką. Įskaitant CSS biblioteka yra šiek tiek skiriasi. 

Čia vietoj scenarijų Tag turite nuorodą tegus. Ir tada, tekstas CSS tipas yra šiek tiek kitoks. Jūs ne visada turi apimti Rel stilių. Bet aš manau, kad tai, paprastai, gera praktika. 

Ir galiausiai, HREF, kurį tikriausiai matė savo ATAGs susiejimas įvairių nuorodos tik nurodo kur rasti, kad nuorodą. Pavyzdžiui, jei mes norėjome susieti skiriasi biblioteka - tegul tiesiog pasakyti - kad gyveno styles.css. Ir mes norėjome susieti, kad tai talpinami internete, mes nukopijuoti tai. Ir tada įklijuokite jį į kokį nors mes turime čia vietoj. 

TOMAS REIMERS: Gerai, tikiuosi jums vaikinai jau yra susipažinę su tuo, kaip susieti CSS. Jūs turėjote padaryti, kad jūsų paskutinis ruda rinkinys. "JavaScript", kai kurie iš jūsų gal turėti tam tikrą patirtį. Kai kurie iš jūsų negali. 

Taigi, dabar žinau, kad "JavaScript" failą yra labai panašus į CSS failą ta prasme, kad jūs galite įdėti nuorodą į jį arba kad jūs galite jį įtraukti viduje. Ir ji leidžia scenarijaus dalykų. Ir mes ketiname jums per truputį JavaScript vėliau. 

Taigi, naudojant biblioteka - kai jūs įtraukė jį, tai taip paprasta, kaip tiesiog paskambinę funkcijas arba pridedant klasė vardai jį. Paskutinis dalykas, mes norime kalbėti apie pagal bibliotekoje - ir tai yra daugiau techninėje pastaboje - yra atviro kodo licencijavimo. Taigi, kai jums rasti šias faktines bibliotekas, jums gali būti galvoja apie klausimai patinka tai gerai, kad aš tik naudojant kažkieno kodą, ypač nes tai, ką mes labai pasakė jums ne padaryti šiuo metu. 

Taigi, atviro kodo licencijavimo atveju kūrėjams daug - kai jie parašiau biblioteka, kuri, jų manymu, galėtų būti naudinga kitiems žmonėms - bus jį publikuoti internete ir suteikti jai licenciją. Ir licencija iš esmės sako, aš esu iš dalies suteikti leidimą kitoms žmonės naudoti šią programinę įrangą gabalas su šiais rūšies išlygomis. 

Mes įtraukėme nuorodą į gerą svetainę su padėti jums suprasti licencijomis jei jums paleisti į juos. Bendrosios išlygos yra dalykų, pavyzdžiui, kviečiame Jus pasinaudoti savo biblioteką taip Tol, kol jūs man kreditą. Jūs esate kviečiami naudotis mano biblioteką kol kai ji sugenda Jums nereikia kaltinti mane. Jūs esate laukiami naudoti savo biblioteką, kol kaip jums nereikia naudoti, kad uždirbti pinigus patys. Tai yra rūšių bendras išlygomis. 

Dėl šios CS50 galutinio projekto, jie neturėtų būti itin aktualus, nes projektai, vaikinai naudoti yra tikriausiai o, rūšiuoti, žinoma. Bet kai jūs iš tikrųjų eiti į pasaulio ir pradėti naudotis bibliotekomis, kurios gali ar negali būti taip pat įgyvendinama kaip kai daugiau populiarių tuos negu mes bus išgyvena. Tai gerai, kad būtų galima suprasti šios licencijos bei suprasti, ką jie reiškia. Ir grįžta. 

MIKE RIZZO: Gerai. Taigi dabar juda ant pavyzdžių faktinio CSS. Šiuo metu kol kas, galbūt ne susidūrė su šiuo klausimu. Bet galbūt susidūrė su jį savo kasdieniame gyvenime, kai kažkas kad atrodo vienaip vienoje naršyklėje gali atrodyti tas pats būdas kitoje naršyklėje. 

Tai vadinama naršyklė naršyklė suderinamumas. Ir vis jis vis labiau ir daugiau problemų, ypač naršyklių imtis daugiau ir daugiau laisves įgyvendinti dalykus, kaip jie nori. Taigi, norint įveikti, kad ten iš tikrųjų yra puikus biblioteka vadinama Normalize.CSS. 

TOMAS REIMERS: Mes įtraukėme nuorodą. Šiuo metu atėjo naudinga, jei jūs turite savo nešiojamą kompiuterį ten žiūri į svetainę. Ir mes duodame jums tai teisė dabar tiesiog, nes CS50 galutinis Projektą iš tikrųjų vyksta užduoti jums ją įgyvendinti panašiai ir per naršyklę. 

Taigi tiesiog išlaikyti savo nugaros galva, tai yra puikus biblioteka nes ji, tarsi, standartizuoti dalykų. Firefox, kažkas gali parodyti kaip vieną pikselį į kairę. Ir tada "Chrome" gali nuspręsti, kad iš tikrųjų ką reiškia buvo 10 taškų į kairę. Ir jūs norite standartizuoti tai. Normalizuoti bus iš tikrųjų tikrai gera darbas ir įsitikinkite, kad jūsų svetainė atrodo pats naršyklių. 

MIKE RIZZO: Taigi, jei mes norėjome tik spustelėkite nuorodą tikrai greitai ir parodyti Jūs ką tai atrodo, jus galite jį atsisiųsti naudojant milžinas mygtuką Atsisiųsti. Arba Raginu jus skaityti daugiau apie tai paspaudę šią nuorodą mažesnis dešiniajame kampe. 

TOMAS REIMERS: Ir jeigu jūs iš tikrųjų spustelėkite Skaityti daugiau tiesiai ten - spustelėkite ant GitHub šaltinį - jūs iš tikrųjų matyti, atviro kodo licenciją LICENSE.md teisę ten. Ir pamatysite čia yra labai populiarus MIT licencija. Vėlgi, jei jūs perskaityti tekstą, galėsite jį rasti svetainėje mes paminėta prieš ir gebėti suprasti nereikia skaityti per teisinio žargono. 

MIKE RIZZO: Gerai, puiku. Štai Normalize. Norėjome suteikti jums kad tikrai greitai. O, jūs turite klausimą? 

PUBLIKA: Taigi, kai jūs jį atsisiųsti, jūs atlikite šį kodą, kad jie turi pagal esantį mygtuką Atsisiųsti? 

TOMAS REIMERS: Taip, taip kai atsisiųsti - 

MIKE RIZZO: O, tai puikus taškas. Taigi klausimas, kaip tai padaryti mes iš tikrųjų jį atsisiųsti? Taigi, jei mes paspauskite nuorodą, matome kad ji iš tikrųjų pasirodo į kodą. Taigi, norint tai padaryti, ką mes galime tai yra tiesiog spustelėkite Įrašyti kaip. Įrašyti kaip, ir kad turėtų auklėti failą. Ir tada mes galime pasirinkti, išsaugoti tai kaip normalize.CSS. Ir tada jūs turite susieti jį į - 

TOMAS REIMERS: tas pats, kaip jūs susieti bet kurioje kitoje byloje. Ir kai jūs susieti jį, kas daug apie Normalize tai bus iš tikrųjų rūpintis visi sunkiai dirbti pati. Tai reiškia, kad jūs neturite pridėti jokių klases. 

Jūs neturite nieko keista daryti. Jis normalizuoja be tavęs dar ką nors. Taip, jūs turite jį įtraukti. "Google Chrome" neatsako. 

Tiesiog greitai panaikinti - Aš pastebėjau, mes šoktelėjo į tai. Šio pristatymo poilsio bus trumpa apžvalga. Bibliotekų apklausa. 

Iš esmės, ką jie yra. Ką jie daro. Kaip jie naudingi. Kaip tu gali juos įgyvendinti. Jei norite pradėti žiūri į juos, taip kartu ir skaityti per jiems, aš labai rekomenduojame, kad. 

Arba, jūs esate laukiami taip pat pradėti siųstis juos ir taip juos į žvilgsnio tik pamatyti, ką jie atrodyti ar ką jie daro, jei turite jūsų nešiojamas priešais jus. Jei ne, kviečiame Jus nuolat klausytis mums kalbėti. Mes ketiname kalbėtis. Ir mes turime laiko pabaigoje, tikiuosi, mes iš tikrųjų gauti į parodyti jums ką kai kurie iš šių bibliotekų atrodyti. 

MIKE RIZZO: Cool. Gerai, kad dabar pakalbėkime apie Šrifto nuostabus. 

TOMAS REIMERS: taip Šrifto nuostabus yra tikrai tvarkingas svetainė, ypač tiems, iš mūsų, kurie yra mažiau meniškai talentingas. Ignoravimas vardas Šriftas nuostabus, ji suteikia Jūs piktogramas, kurios yra krūva labai naudinga. Taigi, daug kartų jums įgyvendinti icon galite gražus kaip X, kad jūs galite uždaryti kažką. 

Arba jums gali tekti šiek tiek mygtuką Redaguoti natūra su pieštuku, kaip visi kiti turi. Ir tai, kai jūs sužinosite, kad piešimo tuos piktogramos gali būti labai varginantis ir sudėtingas. Šrifto nuostabus - jeigu jūs iš tikrųjų eikite į svetainę - suteikia jums piktogramų daug pagal viršuje piktogramos. Taip, tik viršuje. Tai suteiks jums daug piktogramos nemokamai. 

Taigi čia jūs matote, mes turime dalykų, pavyzdžiui, Žvaigždutė, barų, žaibas, kalendorius, klaida, knyga, ir tt. Tai gali būti labai naudinga. Kaip jūs taip pat tai galite įtraukti tiesiog CSS failą. Ir kai jūs įtraukti CSS failą, ką jūs galite padaryti, tai sukurti tegus vadinamas I. Jis satands už icon su klase FA stovėti Font nuostabus. Ir tada, ką klasė norite. 

Taigi, jei aš norėjau šio pliuso piktogramą kvadratinių čia, aš norėčiau duoti tai klasė FA. Ir tada FA brūkšnelis brūkšnelis plius aikštėje. 

MIKE RIZZO: Cool, gerai. 

TOMAS REIMERS: Ir tada paskutinis CSS biblioteka norime gauti per esame bando išlaikyti ją minimalus CSS bibliotekos, nes mes suprantame, pavadinimas šį pristatymą yra JavaScript bibliotekos. Tačiau mes manome, kad mes galime taip pat supažindinti Jus su kitomis bibliotekomis , o mes kalbame apie bibliotekose. 

Tai "Google" žiniatinklio šriftai. Ir ką Google Žiniatinklis Šriftai leidžia jums padaryti yra pridėti šriftus į jūsų svetainę, kuris yra tikrai paprastas būdas padaryti jį gražus ir atskirti savo rinkinį iš visi kiti yra, jei jis turi gražus šrifto arba jei jis yra gražus kolekcija šriftų. "Google" žiniatinklio šriftai yra gražus skirtingai nuo kitų bibliotekos ta prasme, kad tai tikrai vadovaujasi montavimas. 

Taigi, jei jums sekti nuorodą, tai google.com / fonts, manau. Jei sekti, kad jums galite pasirinkti savo šriftą. Galite pasirinkti kairėje nuo storis, kreivai, ir tt. Ir tada, kai jūs pasirinkote vieną, jūs galite spustelėti greitą naudojimą. Teisę ten. Apačioje dešinėje dėžutės. 

Ir tada, slinkite žemyn. Visų pirma, jie suteiks jums CSS kad Jums reikia iš tikrųjų yra nuoroda į jį. Tai tiesiai ten. Jūs galite tiesiog nukopijuokite ir įklijuokite, kad in Ir gražus dalykas, apie tai yra tai, jūs ne iš tikrųjų net nereikia atsisiųsti failą. 

Kas tai ketinate daryti tai, kas vyksta susieti su "Google" versiją. Taigi atgal į ką tai reiškia. Tai reiškia, kad, kai vartotojas parsisiųsti failą - atsiunčia savo puslapio HTML - jūsų HTML puslapis ketina nuoroda šį failą. 

Taigi, jūsų kompiuteryje vyksta pamatyti, oh, tai talpinami google.com o nei theirsite.com. Leiskite man eiti prašyti Google tame faile. Ir tada, jis ketina įtraukti tai beveik kaip jei ji buvo dalis savo svetainės. 

TOMAS REIMERS: Cool. Ir kai jūs įtraukiate, kad tada įtraukti jį į savo CSS, ji suteikia jums faktinis linija. Taigi galite nustatyti objekto šrifto šeimą lygios jūsų šrifto pavadinimą. 

MIKE RIZZO: Gerai. Taigi, mes ką tik baigė su CSS. Ir kai kurie iš jūsų gali būti mąstymas, gerai, mes turėjome šiek tiek CS50 Finansų CSS. Bet CSS biblioteka buvo įkrovos. Mes iš tikrųjų yra įkrovos mažai vėliau pagal JavaScript nes su Bootstrap CSS biblioteka taip pat yra su JavaScript, kad ta partija Bootstrap arba Twitter - kuris padarė bootstrap'inti - naudoja valdyti visus savo CSS. 

TOMAS REIMERS: Ar kas nors turi bet klausimai iki šiol apie CSS apskritai? Mes gerai? Nuostabus. 

MIKE RIZZO: nuostabus. 

TOMAS REIMERS: Taigi juda į JavaScript. 

MIKE RIZZO: Taigi mes norėjome kalbėti apie JQuery pradėti. Ar kas nors girdėjote apie JQuery prieš arba jį naudojo? Taip, pora? Taigi, jei jūs tiesiog dirbti su gimtoji JavaScript rasite sau rašyti ilgų selektoriai daug daug. Taigi, kas JQuery yra ji suteikia gražus įvynioti ir JavaScript kalba, kuri leidžia jums lengvai pasirinkti ir manipuliuoti įvairių elementų per dokumento objekto modelį tinklalapis arba DOM, kuri, manau, vaikinai girdėjote apie į paskaita šiuo klausimu. 

TOMAS REIMERS: Jei dar nesate girdėję apie tai arba jei turite ne stebėjo paskaita dar, Document Object Model yra Iš esmės, kaip viskas yra atstovaujama. Taigi HTML tarsi atrodo kaip medis kai jūs iš tikrųjų jį semia. Turite HTML elementą viršuje. Turite galvą ir kūną. 

Ir tada, per kurį turi visa kita. Tai vadinama DOM - Document Object Model. Taigi modelis, kuris atstovauja objektus dokumentas yra paprastas būdas galvoti apie tai. Ir vienas puikus dalykas, apie JQuery tai tikrai daro Judantis kad ir manipuliuoti jų elementus kad neįtikėtinai paprasta. 

Taip paprasta, o tai, kad dauguma "JavaScript" bibliotekos arba, jei nėra dauguma, didžioji dauguma iš jų pamatysite iš tikrųjų reikalauja JQuery taip kad jie gali paleisti save tiesiog nes jei tu negali turėti jQuery, jums Būtų prarasta daug laiko, bando išsiaiškinti, kaip pasirinkti tam tikrą elementai ir kaip daryti kitus dalykus. Ir kitas puikus dalykas, apie JQuery yra tai, kad kryžius naršyklė suderinama. 

Taigi prisiminti atgal, kai mes pasakėme, kad ne visos naršyklės įgyvendinti viskas taip pat? Tai tiesa, net ir JavaScript. Ir vienas iš didžiausių dalykų apie JQuery yra tai, kad bus aptikti naršyklė ir nustatyti tinkamiausias metodas. 

Taigi, jei jums reikia pasirinkti elementą, "Internet Explorer" gali pasakyti jums turėtų daryti šiuo būdu. "Firefox" gali pasakyti, teisinga būdas yra šiuo būdu. JQuery nerūpi. Jei pasakyti JQuery pasirinkti elementas bus išsiaiškinti, kaip tai Manoma, kad tai padaryti per naršyklę vartotojas šiuo metu, ir tada daryti kad taip. 

MIKE RIZZO: Taigi tegul ne kalbėti apie JQuery naudojimas truputį. Tiesiog kaip ir PHP, jQuery turi ypač meilumas už dolerio ženklas. Taigi, jūs pamatysite, kad bet JQuery - gerai, ne visi. Jūs kartais gali pakeisti dolerį pasirašyti su žodžiu jQuery. Bet apskritai, tik todėl, kad trumpesnis, kai pamatysite JQuery yra naudojamas jis bus su dolerio ženklu. 

Taigi čia mes tik rodo pradžią selektorius yra DOM elemento. Čia mes turime dolerio ženklas po atviros skliausteliuose ir tada kabučių. Ir per kabučių eiti mūsų selektoriai skirtingų elementų. Tiesiog kaip ir CSS, mums reikia selektoriai į gebėti stiliaus skirtingus elementus per puslapį. Šie skirtingi selektoriai išversti tiksliai į JQuery ir JavaScript didžiąja dalimi. 

Taigi čia mes turime dot foo. Taigi, jei jūs prisimenate iš paskaitos, dot tiesiog reiškia klasę. Taigi mes pasirinkdami elementą su klasės foo. Taigi, jei aš einu į priekį ir atverti mūsų "JavaScript" konsolė čia tikrai greitai tiesiog įrodyti, kad ji, jei aš tiesiog įveskite dolerio ženklas, matome, kad tai kai funkcija, kuri ateina. Ir tai tiesiog apibrėžta JQuery. 

TOMAS REIMERS: Tiems iš jūsų, nepažįstamas, konsolės yra įrankis per Chrome ", kuri leidžia jums, iš esmės, paleisti "JavaScript" dabartinis puslapis. Tai rasite neįtikėtinai naudinga, kai jūs iš tikrųjų derinimo ir jūs reikia kaip, kokia yra dabartinė vertė kai pasaulinį kintamąjį ar ką yra kažkas kita? Tai lyg GDB išskyrus tai, kad jūs iš tikrųjų galite manipuliuoti elementų puslapyje su jis kur kas lengviau mados. Ir taip pat ji neturi, iš esmės, patikrinti su jumis, kol ji nieko. 

Taigi, kadangi GDB gali būti, pavyzdžiui, esate Ar tikrai norite paleisti kitą žingsnį? Konsolė yra realaus. Taigi, kaip interneto puslapis utilizavimo ir daro viską, ką jis daro, taryba taip pat veikia kartu su ja. Ir jūs galite įdėti kaltinti kodą kad konsolė, kuri bus paleisti puslapyje. 

MIKE RIZZO: Taigi, norint patekti į konsolės Manau, turėtų būti trumpai paminėti, kaip tai padaryti. Per pastaruosius problemas, kurios gali turėti naudotas Chrome patikrinti elementą funkcijas arba peržiūrėti puslapio šaltinį - ir jie yra prieinami tik dešiniuoju paspaudę ant puslapio ar konkrečių elementas ir daro arba tikrinti elementas arba peržiūrėti puslapio šaltinį. Taip pat galite prisijungti prie JavaScript konsolė tiesiogiai pasirenkant patikrinti elementą. Taigi jūs tiesiog paspauskite konsolės į dešinę pusę. 

Arba, jūs galite taip pat dingo į viršutiniame dešiniajame kampe, kuris yra išjungti šiame ekrane, kai jis turi tris horizontalias juostas. Ir jūs einate žemyn įrankių ir tada "JavaScript" konsolė čia, kur galima pamatyti - bent ant Windows - klavišai yra kontrolės Shift J. Taigi jei norime, kad pasirinktumėte elementą per šį puslapį, kaip parodžiau prieš, mes doleris prisijungti atviras skliaustelius ir tada cituoja. 

Įdomu tai, paprastai, apostrofai ir dvigubų kabučių yra keičiamos. Taigi daug žmonių tiesiog naudoti vieną kabučių, nes jie greičiau įvesti nei dvigubas kabutes, nes jūs neturite turi laikykite nuspaudę Shift. Taigi, aš tiesiog padaryti dabar. 

Taigi noriu pasirinkti kažką su klase. Konteineris, tiesiog, nes aš žinau, kad kažkas, kad ant mūsų tinklalapis dabar. Ir aš paspauskite Enter. Ir mes matome, kad ji pasirinko jį. Taigi tai rodo, kad grįžo tą objektą. Štai pagrindinis pasirinkimas. Jei mes norime, kad iš tikrųjų juo manipuliuoti, jūs turite skambinti kažką tą atranką, kuri gausime į vėliau. 

TOMAS REIMERS: Taigi tik pažvelgti, kad išsamiau, tai nesiskiria nei funkcija skambučius mes padarėme C Iš funkcijos čia vardas šiek tiek keista. Tai doleris ženklas. Tai tiesiog yra funkcijos pavadinimo. Nieko ypatingo apie jį. 

Mes turime atidaryti skliaustus. Tada mes turime vieną argumentą, kuris šiuo atveju būna, kad seka, kuris yra už tai selektorius. Ir tada, mes turime mūsų uždara skliaustelis. Štai ir viskas. 

Tai nereiškia, kad labai skiriasi. Nors tai atrodo labai keista. Ir tai gali būti, rūšiuoti, klijuoti rodytų, daug žmonių. 

MIKE RIZZO: Taigi panašiai, jei norime Norėdami pasirinkti elementą, kad turi ID, dabar mes norime pasirinkti pagal ID vietoj klasėje. Būtų panašus dalykas, kur mes tiesiog padaryti aštrų žymenį ID. Taigi mes pasirinkdami čia visi elementai, kurie turi ID baras. 

TOMAS REIMERS: Ir tai tęsiasi. Kad CSS tęsiasi. Tiesiog kaip ir CSS, galite pažymėti visus nuorodos, kurios klasės foo. Čia, tai tas pats. 

Tai galite padaryti a.foo, kuri pasirinkti visus ryšius su klasės foo. Tai galite padaryti aštriu juostą, kuri būtų pasirinkite su ID bare ir pan nuorodą toliau ir taip toliau. Bet CSS selektorius yra galiojantis JQuery selektorius. 

MIKE RIZZO: Taip. Gerai, kad dabar galime gauti į šiek tiek manipuliacijos, kad mes galime padaryti su mūsų jQuery. Taigi JQuery yra tam tikro tipo notacijos, kur mes tiesiog naudoti pabaigoje taškas. Ir jūs galite galvoti apie tai, kaip ir C, kaip mes turėjo skirtingus structs. Ir eiti į tas structs, galėtumėte naudojamas taškas patekti į juos. 

Tai, tipo, panašus dalykas. Tik dabar mes turime funkcijas pagal šį selektorius, kad mes galime paskambinti į jį. Taigi čia pats pirmas pavyzdys matote yra CSS selektorius. Ir iš esmės, kas tai yra ji taikomas pirmasis elementas CSS tai dalykas, kad jūs pasirinkote - šis elementas, kurį pasirinkote, - su verte, kad. 

TOMAS REIMERS: Taigi lengva vertimas kad būtų, jei JQuery, iš esmės, tiesiog paėmė foo. Ir tada CSS sakė, Spalva raudona ir uždaryti. Tai pati idėja. Kas tai padaryti yra tai pasirinkta Visos rūšys, elementai. Ir tada jis taikomas. Rūšiuoti, nuosavybė spalva yra lygi raudonai. 

MIKE RIZZO: Be to, mes taip pat galime keisti faktinis produkto kiekis, kas yra rodomi puslapio HTML, kuris yra tikrai cool, nes tai reiškia, kad jūsų interneto puslapių, dabar gali būti visiškai dinamiškas ir neturi būti statinis kad jūs atspausdinti naudojant PHP pačioje pradžioje puslapis buvo įkeltas. Taigi čia, jei norime pakeisti faktinis HTML puslapio, mes dabar skambinti HTML funkciją, kuri tada tiesiog įterpia ką mes nurodantys į tas elementas, kad mes išrinkome. Taigi čia mes pasirinkdami elementą su klasė rūšys ir tada sako, tai HTML tai dabar hello world. 

TOMAS REIMERS: Ir kai pagalvoji kas yra naudingos programos tai, tai CSS vienas, pirmas dalykas, kad galite pradėti galvoti apie tai, požiūriu net išskleidžiamajame meniu. Galite pradėti daryti dalykus, pavyzdžiui, kai vartotojas tvyro virš viršutinės dalies iš išplečiamojo, jūs norite įsitikinti, apatinė dalis matomas. Teisė? 

Taigi, CSS, mes turime savybes padaryti kažką mato. Dalykų, pavyzdžiui, ekranas dvitaškis nė , būtų nematomas. Rodyti blokas būtų padaryti jį matomą. Ar net jei jūs norite eiti paprastesnis, jums tokie dalykai kaip matomumo lygių matoma ir matomumas Lygu paslėptas. 

Ir jūs galite pradėti įgyvendinti dalykus kaip išskleidžiamajame meniu teisė po to, kai gauti per tai, kaip idėja galima išsiaiškinti, kai tai atsidaro, kurios mes gauti per labai trumpai. Tačiau mes galime pradėti rodyti programos tai. Panašiu prasme, jei buvo bandyti ir įgyvendinti, tarkime, pokalbių variklis ir norite padaryti šiek tiek kalbos burbulas sugalvoti, kai jūs gavo naują pranešimą, kai jums nauja žinutė, jūs galite padaryti šiek tiek kalbos burbulas sugalvoti keičiant Į puslapio HTML, tiesa? Pridėjus, kad papildomos kalbos burbulas su papildomomis tekstą ten. Taip? 

PUBLIKA: Taigi jūs įdėti tai per HTML kodas tarsi [Nesigirdi]? 

MIKE RIZZO: Teisė. Taip, mes susisieksime, kad trupučiu. Taip, jis panašus šiek tiek PHP. Ne visai panašios. 

Geras skirtumas, kad tai, ką šis faktiškai redaguoti kai mes redaguoti puslapis, nes ji nesiruošia būti redaguoti faktinį failą, kuris yra laikoma serveryje, todėl pasaulis neturėtų turėti leidimą redaguoti failus. Tai tiesiog redaguodami kas puslapyje ir tai, kas buvo rodoma per naršyklė. Taigi, jei jums buvo po perkraukite puslapį pasakyti, išbraukiant kažką kaip mes matote, mes galime padaryti su pašalinti skambutį, kad dalykas būtų vėl atsirasti. 

TOMAS REIMERS: Taigi vienas būdas galvoti apie tai jei aš jūsų kompiuteris ir Mike, rūšiuoti, serveryje. Kas nutiks tai aš ruošiuosi paklausti Mike, ei, aš galiu turėti kopiją šis tinklalapis? Ir jis bus man duoti jo kopiją. 

Ne, tai ne originalus dalykas. Tai tiesiog kopija. Ir tada jis bus kaip, oi, nėra čia parašytas JavaScript. Aišku, aš redaguoti puslapis turi būti kaip šis. Ir aš redaguoti savo kopiją. 

Bet tai ne vykdomai faktinė kopija. Ir jei aš buvo paprašyti jį dar kartą atnaujinti puslapį - Ei, aš galiu turėti kitą švarų kopiją - jis ketina duoti man kitas švarus kopija. Ir tada, aš ruošiuosi daryti tą patį kaip, oi, tai JS čia, kad sako redaguoti tai. Ir aš ruošiuosi nuolat daryti. 

MIKE RIZZO: Taigi tikrai cool dalykas kad jūs galite padaryti su JQuery yra faktiškai pridėti įvairių tipų animacijos į savo puslapį. Aš nežinau, jei jūs kada nors matė, kur bandote užpildo formą internete, ir jūs neturite užpildykite ką teisingai. Taigi mažai ką skaidres viršuje ir sako, nebuvo padaryta tai teisingai. Prašome bandyti dar kartą. Ir tada, jis gali net tiesiog skaidrę aukštyn. 

Pasirodo, JQuery sukūrė funkcijų kad padaryti visa tai animacija tikrai, tikrai paprasta. Taigi yra pirmasis išnyks iš funkciją, kuri galite kreiptis į ką nors. Ir tai būdas pakeisti CSS šis elementas animuoti. Taigi reikia nepriklausomai nuo elemento jūs vadinate tai išnyks dėl. Ir tada, lėtai keičia tai opacity kol jis eina visiškai skaidrus. 

TOMAS REIMERS: Kitas populiarus vienas yra skaidrę žemyn, kuris leis kažkas atrodo stumdami jį žemyn. Taigi iš išplečiamojo meniu atveju, vėl, kai mes sužinojome, kaip nustatyti kai tai buvo svyruoti daugiau, galima tiesiog pasakyti šį dugną dalis skaidrę žemyn dabar. Ir tada, atrodo, stumdami žemyn. 

MIKE RIZZO: Ir tada, jei jūs tiesiog kai animacijos rūšis omenyje, kad JQuery nebūtinai teikti. Pavyzdžiui, tarkime, JQuery iš tiesų suteikia jums su čiuožykla žemyn ir skaidrę aukštyn. Na, tarkime, jūs norėjote į skaidrę kažkas iš kairės arba iš teisę natūra kaip CS50 Pagrindinis puslapis veikia, kai jūs einate į naują skydelyje. Galima būtų tada tikriausiai turite įgyvendinti jį sau, naudojant animuoti funkciją JQuery. 

Taigi panašiai, tiesiog animuoti. Ir tada, joje užtrunka žodynas įvairių verčių, kad jums turėtų praeiti. Taigi čia, jei norime animuoti elementas foo toks, kad jo plotis arba plečiasi arba traukiasi į 80 taškų, priklausomai nuo to, ką ji šiuo metu yra. Mes tiesiog praeiti, kad joje argumentas. 

Gyva taip pat turi keletą kitų argumentų kad galėtumėte perduoti jį, pavyzdžiui, animacijos greitis kad norite suteikti. Ir tai padaryti, norėčiau tiesiog pasakyti greitai "Google" JQuery animuoti. Ir tada, auklėjant šį puslapį, galite žr. jis gavo įvairių krūva savybės, kad jūs galite jį išlaikyti. 

Ir raginu jus - kai tu atėjai per kažką, kad jums nereikia nežino, ar tiesiog norite sužinoti daugiau apie ypač būdas, kad galite skambinti ant kažko - tik google jį. JQuery yra labai gerai pagrįsta dokumentais. Ir dažnai yra daug " pavyzdžių, kad jie suteikia jums. Jei mes pereikite žemyn - galo - kad mes galime naudoti, taip pat. 

Vėlgi, kai kūrėjas iš tikrųjų vyksta per rašymo problemų biblioteka, jie paprastai nori kas nors jį naudoti. Taigi kartu vyksta būti dokumentai. Ir kad dokumentus galima paprastai bus rasti projekto puslapyje, kuris yra kodėl mes davė jums, kad originalią svetainę pradžioje, kuris susieja jus Projekto puslapiai, todėl jūs galite matyti, kad dokumentus. 

Paprastai projekto puslapį ir tuo atveju, iš [nesigirdi], tai jums pasakė, pavadinimai klasių. Be JavaScript atveju, ji suteikia Jūs funkcijų vardas. Beje, jei mes slinkite aukštyn į viršų, greitai šalutinis dėmesį į funkcijų kai pamatysite funkciją įgyvendinama kaip tai su sunku skliausteliai viduryje, tai reiškia, kad nuosavybė yra neprivalomas. Tiesiog galvos iki. Aš mačiau daug klausimų apie tai. 

Taigi čia matome, kad animuoti užima savybės kaip būtiną argumentas. O visa kita yra neprivalomas. Šalutinis dėmesį - galite galvoti apie tai, rūšiuoti iš, pavyzdžiui, žinyno puslapių, sąrašas. Man puslapiai yra dokumentai C dėl kitų dalykų, taip pat daug. 

MIKE RIZZO: Taigi mes sužinojome, kaip pakeisti kitą CSS puslapyje, animuoti, ir pašalinti pridėti HTML. Tačiau vienas tikrai galinga viskas apie JavaScript ir ypač JQuery - ką ji leidžia padaryti, tai atsakyti į skirtingi elementai, kad taip atsitiktų. Pavyzdžiui, čia mes turime renginys prižiūrėtojas. Ir tai tiesiog reiškia, kad, kai tai įvykis atsitinka, mes saugome jį tam tikru būdu. 

Taigi čia bendrinis JQuery renginys prižiūrėtojas yra ant taškas. Ir tada, pirmas dalykas, kurį jūs pateikėte yra tai, ką kuriuo atveju jis turėtų klausytis už. Taigi čia, tai spustelėkite, kad mes laukiame. 

TOMAS REIMERS: Arba, jūs turite ant hover, kuris yra labai populiarus vienas. Taigi atgal prie mano išskleidžiamajame meniu idėja. Jums reikės viršų vieną ant hover. Ir tada jūs galite pakeisti. 

MIKE RIZZO: Teisė. Ir tada, kai tai atsitiks, tai tiesiog vykdo šią funkciją, kad mes jam suteikti kaip argumentą ir kad įspėja Apie arba Hi. 

TOMAS REIMERS: Taigi tokiais atvejais, kai JavaScript, tai yra vieta, mums reikia pašalinti save iš C. Galime iš tikrųjų imtis funkcijas argumentais. Ir yra daug "tikrai sudėtingų būdų tai padaryti. Mes ketiname skatinti vieną pusę, tai galite nustatyti veikia tiesiai ten. 

Taigi, kai jūs prašė duoti kaip funkcija parametras, jūs iš esmės tik ketina apibrėžti funkciją vietoje. Ir kaip jums apibrėžti funkciją JavaScript yra jums tiesiog pasakyti funkciją. Tada, paprastai, pavadinimas iš funkcijos. Bet mes niekada nuoroda ši funkcija dar kartą. Taigi, mes palikti jį bevardis. 

Tada skliausteliuose, tada garbanotas petnešos, ir tada per tą kodas. Taigi, mes suprantame, tai gali būti šiek tiek klaidina. Taigi, mes suteikiame Jums bendrą formą ką renginys prižiūrėtojas atrodo toliau, o tai apie įvykius. Ir tada, kad jūsų kodas viduje, kad. 

MIKE RIZZO: Yra bet Turite klausimų apie šią? Tai gali būti šiek tiek painu Pirmą kartą jį pamatyti. 

TOMAS REIMERS: Jūs iš tikrųjų norite atverti failą ir jiems parodyti keletą JQuery dabar? 

MIKE RIZZO: Taip, galime tai padaryti. Gerai. 

TOMAS REIMERS: Taigi, dabar mes į prietaisą. O ką mes padarėme, tai mes atlikome laisvė kurti tiek index.html failą, kuriame yra nuorodos į "JavaScript" failą. Ir mes galime atverti - taip. Na, ji du dalykus. 

Pirmasis yra tai nuorodos į "JavaScript" failą. Ir mes matome, kad čia. Mes matome, kad į galvą HTML dokumentas, ypač. Taigi jūs ten pamatysite, kad mes, iš esmės, sako, SRC, kuris reiškia šaltinį. Ir tai URL. 

Taigi, čia galite pasakyti mes įtraukti jQuery. Ir mes taip pat įtraukti skriptus. Kitas būdas yra JavaScript yra kad galite įtraukti inline scenarijų žyma, kaip mes turime apačioje, kur ji sako scenarijų tipas yra tekstas "JavaScript". 

Taigi mes sakydamas, klausytis, mes apie įtraukti scenarijų. Ir tos scenarijų tipas "JavaScript", kuri yra teksto tipas. Labai paprasta. 

MIKE RIZZO: Taigi tai, tipo, gauna Jūsų klausimas apie tai, kaip mes apimti JavaScript savo failus, nes, kai mes buvo PHP, mes kažką panašaus į tai. Ir tada turime PHP funkcijas - tarkim atsargos daryti kažkas su tuo - eina ten. Tačiau dabar mes turime scenarijų žymes kad mes suteikiame ją, kuri iš tikrųjų yra dalis pati HTML, nes tai nėra padirbta yra HTML failas, kaip ji yra PHP, nes jei jūs iš tikrųjų eiti į ir pažvelgti į puslapio šaltinio, pamatysite šiuos scenarijus žymes ten su JavaScript susijęs su jiems, kad. 

Taigi, jei norime parašyti keletą JavaScript - tegul tiesiog pasakyti, kad mes norėjome pakeisti kūną nes dabar aš neturiu visos kitos žymos, kad galiu tikrai redaguoti be kūno. Leiskite tik pasakyti, aš norėjau pakeisti, kad CSS. Taigi mes eiti į priekį ir pokytis jo spalva raudona. 

Taigi aš išsaugoti failą. Grįžkime į mūsų internetinį puslapį, atnaujinti, ir ji automatiškai nes ji neatrodė kaip ji laukė, ne visi, nes mes ne klausytis dėl įvykio, ar ko nors panašaus. 

TOMAS REIMERS: Taigi, jei mes einame atgal į tą file ypač - HTML Failas - ką jūs ketinate pamatyti, mes - nepamirškite, kad tai yra pakrauta, rūšiuoti, chronologine tvarka. Taigi, mes turime pirmą galvą. jis įkelia tuos du failus. Tada mes einame į kūną. Ir mes matome, Apie pasaulį. Taigi, mes teikiame Apie pasaulį. 

Ir tada paskutinis dalykas, mes turime yra mes turime scenarijaus žymė. Taigi jis veikia scenarijaus žymą, nes tai ne sakau, kad laukti nieko. Ir tai svarbiausias būdas paleisti "JavaScript". 

Turint tai sakė, jūs galite įdėti scenarijų pažymėti iki antraštėje tik parodyti šį punktą? Ir paleisti, kad. Mes ketiname pastebėsite, kad ji nepakeitė spalvos. Ir tai yra viena iš problemų, JavaScript, kad viskas yra pakrautas chronologine tvarka. 

Taigi tuo metu, kai šis kodeksas buvo paleista, mes išrinkome - grįžti - kūno tegus. Kūno tegus dar neegzistuoja, nes JavaScript yra suderintas su HTML. Taigi naršyklė kaip pasirinkite kūno. Nėra tokio dalyko dar. Taigi, mes galime ignoruoti tai. Ir mes nesustoti. 

Ir tada mes apibrėžiame kūno tegus. Bet tai niekada pasireiškia atnaujintas. Taigi, kai jūs įgyvendinimo scenarijų žymos, įsitikinkite, kad jums vieta po body. Kita skaidrė. 

MIKE RIZZO: Gerai. Taigi, mes pakeitėme kažką. Bet tai neatrodė kaip ji reagavo į mums visiems, nes jis tiesiog rūšies tai padarė, kai jis pakrautas puslapį. Taigi, dabar, o ne daryti tai, kodėl ne mes pridėti renginį prižiūrėtojas. 

Taigi, galime padaryti kažką prie kūno vėl. Ir tarkim mes jį - spustelėkite. Mes pridėti funkciją. 

TOMAS REIMERS: Tegul pasikeitimą tai spalva raudona dar kartą. Kodėl gi ne? 

MIKE RIZZO: Taip, galime keisti jo "spalva raudona dar kartą. Gerai. Taigi galime perkraukite puslapį. Gerai, mes matome - kaip ir tikėtasi, jis neįsijungia raudona dar. Bet tada mes galime eiti į priekį ir spustelėkite ją. 

TOMAS REIMERS: Ir ji parausta. 

MIKE RIZZO: Ir ji raudona, kaip tikėtasi. 

TOMAS REIMERS: Ir mes galime pamatyti, kaip mes galime pradėti kurti labai paprastas sąveika. Kiti dalykai, mes norime padaryti, tai, jei nenorime, kad kūno Spalva raudona, padarykime HTML Fono spalva raudona. Tiesiog todėl pati CSS. 

Ir kai mes jį pakeisti, mes galime pamatyti tai labai dramatiškas poveikis keičiasi visas puslapis. Taigi dar kartą, jei įgyvendinant dalykų, jūs galite turėti vieną komponentą kuris yra skirtas būti paspaudėte. Tarkime, išvežimo mygtuką ir Visa kita sudedamoji dalis, kuris yra skirtas atsakyti. Taigi, jums reikės pašalinti langą kai tai atsitiks. 

MIKE RIZZO: Gerai. Kaip pavyzdys - tu negali pamatyti tai anksčiau - Aš tiesiog parodyti jums, kaip jis atrodo patinka, kai mes kažką nuslėpti. Taigi aš eiti į priekį ir padaryti skaidrę aukštyn. 

TOMAS REIMERS: Spustelėję wrap kad dalis tipo prieš tai mes darome? 

MIKE RIZZO: Gerai. Taip, kodėl ne mes tai darome tik todėl, mes ją pasirinkti tiek daugiau. 

TOMAS REIMERS: Ir tegul suteikti jam klasę. 

MIKE RIZZO: Taip. Gerai, kad galime pamatyti. Užuot pasirinkę tikrąjį kūną dabar, aš tiesiog pasirinkite viską su klasė hello, kurie čia mes tik vieną dalyką. Taigi mes neturėtų nerimauti, kad. 

Taigi aš ją atnaujinsime. Aš eisiu į priekį ir spustelėkite ją. Ir tai, tarsi, padarė keistą Pristatymas iki dalykas, kuris neatrodė, kad patrauklus. Paprastai jie atrodo gana gražus. Manau, tai - kai Priežastis - ne. Aš tiesiog padaryti išnyks taip Jūs galite peržvelgti kad per daug. Daug gražiau. 

Ir tada, jei aš atverti "JavaScript" konsolės vėl ir norime pamatyti, kas atrodo, kai mes išnyks jį in Dabar aš tiesiog paskambinkite išnyks jį. Ir ji išnyksta atgal in 

Be to, mes iš tikrųjų galėtų taip pat perduoti argumentas išnyks arba išnyks, kuris yra, tipo, jo greitis. Taigi eikime į priekį ir pasakyti, kad mes norime ji eiti lėtai išnyks in Taigi, aš manau, kad jis vis dar atrodė gana greitai. Bet tai buvo lėtesnis nei anksčiau. 

TOMAS REIMERS: Ir jei norite rasti Daugiau informacijos apie šiuos dalykus, vėlgi, tiesiog eikite į jQuery dokumentaciją, kuri mes jums davė, ir skaityti per juos. Jie dokumentuoti savo funkcijas neįtikėtinai gerai. 

MIKE RIZZO: Gerai. Taigi, manau, grįžkime į tai. Ir mes galime kalbėti apie mūsų paskutiniame puslapyje. Na, mes galime baigti su bootstrap'inti. Ir tada mes ją atidaryti už kai kuriuos klausimus. Ir jei jus vaikinai turi kokių nors idėjų, kad norite pabandyti mesti ir pamatyti jei mes galime juos įgyvendinti JavaScript greitai. 

Taigi labai greitai apie bootstrap'inti, kuris buvo automatiškai įtraukiami į jūsų paskutinis problema nustatyti CSS kataloge ir iš tikrųjų susijęs su į savo Header.php. Taigi jums gali būti papildomas klases, yra apibrėžta bootstrap'inti į jį. Ir tai būtų automatiškai stiliaus tie dalykai pakeisti. 

TOMAS REIMERS: Taigi Bootstrap yra labai magiškas dalykas sukurtas žmonių Twitter. O ką ji turėjo padaryti, buvo - prieš tinklapis buvo tikrai sunku padaryti gražiai atrodo, ypač, kai mes turėjome bendrų komponentų daug. Taigi iš mygtukų daug interneto atrodė vienodi. 

Teksto laukų daug galima padaryti atrodo geriau nei standartinis tekstas laukas tikriausiai žinote, iš tikrųjų seni svetainėse ar tikrai blogai padarė svetainių, kurios tik atrodo kaip pažodinis teksto laukus be jokio teksto forma šešėlis arba bet gražus kontūro natūra. Taigi, kas Bootstrap darė, buvo sakoma, gerai, mes turime daug bendrų stilių. Kodėl mes padaryti vieną bendrą rinkinį CSS ir bendromis JavaScript kaip gerai, o tai gali stilius kaip yra ir kuri gali suteikti žmonėms dalykų, pavyzdžiui, kritimo žemyn meniu, kuris gali suteikti žmonėms dalykų, pavyzdžiui, modals. 

Modalinis yra kas pasirodo per puslapį kai tai griežtai kalbant kažkas, kuris slopina toliau sąveika, kol jums bendrauti su juo. Kažkas panašaus tai, ar tikrai norite ištrinti šį dalyką? Jūs tikrai negali padaryti nieko daugiau kol jūs pasakyti taip arba ne. 

Jis paėmė visa tai ir ji supakuota tai kartu ir pasakė, čia mes einame. Žmonės dabar gali naudoti šią. Ir jūs galite rasti jį per ne getbootstrap.com. Jis buvo automatiškai įskaičiuotos jūsų paskutinis problema nustatyti. Ir jūs esate daugiau nei kviečiame naudoti jį savo galutinį projektą. Ir jei jūs norite sekti, kad susieti gauti bootstrap'inti. 

Pamatysite čia Bootstrapujemy CSS svetainę. Pamatysite bootstrap'inti. Ir jei jūs slinkite žemyn, pamatysite kaip atsisiųsti, kaip įdiegti, ir tt. 

MIKE RIZZO: Ir jūs galite taip pat, Įdomu, pritaikyti ją būti bet kokios rūšies temų kad jūs norite. Žinau, kad tai, ką aš padariau mano galutinis projektas, kai aš paėmė klasė buvo pritaikyti jį. Kita versija bootstrapu kad turėjo kitą spalvų schemą ir įvairių formų kai skirtingi dalykai. Taigi raginu jus žaisti su tuo. Tai tipo smagu daryti. 

TOMAS REIMERS: Žvelgiant per viršų ir vėl, ji labai panaši į Šriftas Awesome svetainėje. Dokumentacijos dalis bus pradėti atrodyti panašūs, kai jūs mačiau pakankamai jo. Taigi čia mes turime CSS komponentas tai. Ir pamatysite, kaip ji gali stiliaus dalykus. Taigi, jei paspausite ant stalų, pavyzdžiui, galite iš karto padaryti stalo gana tiesiog pridedant klasė stalo į jį. 

Tie patys dalykai, skirti mygtukai. Jei jūs tiesiog pridėkite klasės btn btn ir pagal nutylėjimą arba BTN pagrindinis, galite gauti bet kurį iš šių mygtukų vieną šių gatavų stilių. Ir tada, jei jūs ieškote kažkas sudėtingesnis nei tiesiog Naujo dizaino, ką W jau per į "JavaScript" skirtukas visoje Aukštyn turėti sudėtinių dalių krūva. 

Taigi čia mes turime perėjimai modals, dropdowns, skirtukai ir patarimus. Patarimas yra tai, ką pasirodo pagal savo pelės, kai jūs Pakimba ant kažko. Popovers, perspėjimai, sagos, išardomas akordeonai yra kas jie paprastai vadinamas. Karuselės, kuris apversti per, pavyzdžiui, atvaizdus. 

Taigi tie, kurie komponentai bootstrapu. Norėčiau paskatinti jus labai eiti pažvelgti į juos. Yra "JavaScript" komponentas ir CSS komponentas. Jauskitės laisvai naudoti juos kaip norite. Mes neketiname eiti per daug į juos nes mes manome, kad dokumentus tikrai gerai padaryta. Ir taip. Ar turite kokių nors klausimų apie tai? 

MIKE RIZZO: Taigi, kaip yra iš tikrųjų greitai pusė, šio tinklalapio dizainas, mes greitai kartu sudėjus šis pristatymas yra faktiškai atliekamas naudojant bootstrap'inti. Kaip matote, kai mes paspauskite ant jos skirtingus skirtukus, mes niekada iš tikrųjų palikti šį esamą index.html puslapyje. Taigi, ką mes turime, yra skirtingi div us per šį index.html. Ir tada, kai mes spustelėkite skiriasi skirtuką, tai tik keičiasi kurių vienas yra rodymas. 

Taigi atitinkamai pozicijų juos, keičia puslapio HTML taip, kad dabartinį skirtuką pažymėtas kaip aktyvus, todėl atrodo kitaip ir atrodo tikrai gražus. 

TOMAS REIMERS: Taigi, kad buvo viskas padaryta be mums rašyti beveik bet CSS. Taip pat matome, galva per viršų, kurios spalvos yra mūsų. Tačiau tikrasis padėkite jį ant Į puslapio viršų ir padaryti ji naršymo buvo Bootstrap. Ir tada net kitoje bibliotekoje - tai yra ne vienas, mes kalbėjome apie tai, bet vienas galite Google, jei norite. Tai vadinama prettify.js. Ir tai bus sintaksės išryškinimas kodą Jums naudojant tiek CSS ir JavaScript. 

Paskutinis dalykas, mes norime kalbėti apie kol mes išleisti jus į pasaulis atrodo bibliotekose išsiaiškinti kaip juos naudoti ir, tikiuosi, skaityti dokumentus ir rasti tai, ko poreikis, kaip rasti bibliotekose. Taigi pirmasis yra mes tiesiog ketina stumti "Google". Eiti į Google. 

Tai tiesiog tai, ką mes darome, kai reikia kažką daryti, tai mes "Google". Ar "JavaScript biblioteka, kuri man leidžia manipuliuoti laiko naudingas būdas? Taigi, jei aš žinau, kad kai kurie vartotojo sukurti sąskaita čia, ir tai yra dabartinis laikas, kaip aš galiu apskaičiuoti skirtumas su tuo nereikia apskaičiuoti pats? Taigi, iš tikrųjų tai yra bendras dalykas, JavaScript laikas biblioteka. Ir čia mes Moment.js-- vienas iš populiariausių. 

Jei mes turime biblioteką manipuliuoti kažkas panašaus spalvos, kad būtų galima generuoti atsitiktinių spalvų krūva - galbūt, generuoti stilius ar kažkas - galėtume Google kažką panašaus JavaScript spalva biblioteka. Ir aš tikiu, kad mes pop-up su tūkstantis ir vienas iš jų. Jūs esate kviečiami skaityti per juos. 

Taigi daugelis dalykų - jei jūs galite juos rasti - ketinate būti talpinami į vieną iš svetainių, kurios priimančioji kodas. Jie yra keletas populiarių tuos. Populiariausia, pagal kas yra github.com. Ir jei jūs einate į GitHub tai tikrai kur Normalize surengė. Taigi, jei norite grįžti į tą vieną. Parodykite jiems, kad. 

MIKE RIZZO: Ir tai iš tikrųjų, kai tai vyko taip pat, jei jūs pastebėjote. 

TOMAS REIMERS: Taip. Taigi, jei jūs einate per normalizuoti ir eiti į GitHub. Ar tai? 

MIKE RIZZO: Tai mažai kačių dalykas yra GitHub simbolis. 

TOMAS REIMERS: oh. Taigi GitHub naudoja metodą, vadinamą Git į parduotuvę kodą. Ar jūs nežinote, kas tai yra, arba tai gąsdina jus, kad gerai. Jūs neturite žinoti, kas yra Git nes GitHub turi mygtuką Atsisiųsti apačioje dešinėje. 

Kitas naudingas dalykas žinoti apie GitHub yra dauguma produktai turės skaityti mane. Ir jei jie neturi interneto svetainę, skaityti man kalbėti apie tai, kaip įdiegti, kaip jūs jį naudoti, ką ji daro, ir tt, ir tt, ir tt. Ką mes iš esmės buvo leis jums per. 

MIKE RIZZO: internetą mesti rūkyti. 

TOMAS REIMERS: Tai gerai. Pastarieji du dalykai norėjome kalbėti apie - mes kalbėjome apie Git - yra trikčių. Ir tai vienas nėra toks svarbus galutinis produktas, nes ji yra kai jūs paliekate 50. Ir kai jūs paleisti į produktų įgyvendinant bibliotekų ar įgyvendinimo savo projektą, jūs ketinate dar turite klausimų arba esate ketina ieškoti klausimus. 

Vėlgi, "Google" ji. Tai tiesiog tai, ką mes darome. Tai ketina skambėti kvailai. Bet tiesiog, mes "Google" ji. Ir vėl, vienas iš pirmųjų dalykų, jūs paprastai paleisti į tai, stackoverflow.com, kuris yra nuostabus klausimas ir atsakymas akyse. 

Tai nuostabu tiek, nes galite rašyti klausimus ir ieškoti atsakymus, bet ir dėl to, jis jau turi daug užpildytų turiniu ten. Taigi, paprastai, kai "Google" programavimo Klausimas per pirmas pora hitai jums gali jau paleisti į jį per savo problemines rinkinių. 

Ir tada, paskutinis tikrai trumpas dalykas yra JSFIDDLE, kuris yra - šiandien mes darė daug darbo su "JavaScript" HTML CSS. JSFIDDLE yra interneto programa, kuri iš esmės leidžia jums vežtis savo HTML, jūsų JavaScript apačioje, kairėje ir jūsų CSS viršuje dešinėje. Ir tada jis gali kurti greitai padaryti IT ir pamatyti, kaip jis bendrauja. Tai labai naudinga, kai žmonės bando daryti koncepcijos įrodymas, kaip tai kaip tai darytumėte padaryti išskleidžiamajame meniu. Gal greitai atskleisti ar whatever. 

MIKE RIZZO: Taigi eikime į priekį ir spustelėkite tai. Greita Pastaba - kadangi, kol mes buvo daro paspaudimu. Pasirodo JCorey Korėja taip pat yra pastatytas paspaudimais įvykių apdorojimo, kad ji naudoja tik todėl, kad skaičiai esate ketinate norite padaryti daug dalykų, jei norite spustelėkite kažką. 

Be to, ji taip pat turi hover. Tačiau norint gauti visą spektrą Tiems, pažvelgti į JQuery dokumentus ir tai daryti. Aš kažką kvailo čia. 

TOMAS REIMERS: Taigi turiu tikrai greitai programa čia, o tai sako mygtuką paspaudimu. Tada mes turime už linijos. Dėl: i yra mažesnis nei 404. Tai tiesiog vyksta pop-up šie perspėjimo pranešimai. 

MIKE RIZZO: Ir kas buvo kodas 404 stovėjo HTML? Ar kas nors prisimena? Nerandamas, teisė. Chromas taip pat pridūrė, tai tvarkingas dalykas, kur galite - 

TOMAS REIMERS: Kadangi žmonės mėgsta Mike pradėjo tai daryti daug ir erzina vartotojus, kurie leidžia jums matyti info. 

MIKE RIZZO: Taip. 

TOMAS REIMERS: Ar mes turime kokių nors klausimų, apie tai, apie JavaScript bibliotekos, rasti bibliotekose arba kas interneto plėtros išvaizda kaip ir realiame pasaulyje? Mes veikia prieš laiką. Taigi, aš nesu tikras, kad mes ketiname turėti laiko įgyvendinti nebent tai yra tikrai greitas. Ar mes gerai? 

MIKE RIZZO: viską, ką vaikinai norėtų pamatyti tikrai greitai ir, pavyzdžiui, du trukmė minučių arba mažiau? 

TOMAS REIMERS: Nieko galime paaiškinti? Kaip rašyti - 

PUBLIKA: [nesigirdi]? 

MIKE RIZZO: Taip, taip, that - 

TOMAS REIMERS: Jūs galite tiesiog paspausti Valdymo U-svetainėje. 

MIKE RIZZO: Ak, aš nežinojau, kad. 

TOMAS REIMERS: Manau, kad taip. Kontrolė-U. Taip. 

MIKE RIZZO: O, taip, kad tai kodas svetainėje. Bet jei jūs tikrai norite atsisiųsti mūsų failus ir viskas, ji patalpinta ant github.com 

TOMAS REIMERS: velniop savo vardą - Tomas Reimers - velniop CS50 brūkšnelis seminaras. 

MIKE RIZZO: Ir jūs galite rasti viską ten. 

TOMAS REIMERS: Tai ką GitHub atrodo, beje. Taigi dar kartą, kai pamatysite, atviro kodo projektas, paprastai, jie bus skaityti man ten, kad jūs galite skaityti. Ir jei jūs einate atgal, jūs pastebėsite, kad Jūs turite parsisiųsti zip, kuris bus leidžia jums atsisiųsti šaltinį kodas įtraukti produktas savo dalykas. 

MIKE RIZZO: Taip, ir jei mes tiesiog paspauskite ant index.html tikrai greitai - 

TOMAS REIMERS: Pamatysite čia kodo mūsų svetainėje. 

MIKE RIZZO: Taip, aš pamiršau stumti į dešinę prieš su dideliu lentele įtraukti, bet ten taip pat staliukas iš chmods kad mes įtraukti tik savo aiškumo. Bet jei mes pereikite visą kelią žemyn apačioje, mes ne iš tikrųjų labai daug su JavaScript Daiktai ne visi su tuo. Tai tik nuo visko kita, kad mes turėjome. 

Taigi ačiū jums, vaikinai, kad atvykote ir klausytis. Tikimės, kad tai buvo tikrai naudinga. Jei turite kokių nors JavaScript susijusią klausimų ar tiesiog norite kalbėti apie kas dar patinka tai, ką kitų įdomių dalykų jūs galite padaryti su JavaScript, mes norėtume kalbėti su jumis. 

TOMAS REIMERS: Jei turite klausimų apie savo projektą arba jei tai gali būti reikia, mes tikriausiai klijuoti aplink šiek tiek po to. Tačiau, išskyrus, kad turi geras savaitgalis. 

MIKE RIZZO: Taip, patinka. Žr jums vaikinai. 

TOMAS REIMERS: Pasimatysim.