TOMAS Reimers: Živjo, vsi. Moje ime je Tomas Reimers. 

MIKE RIZZO: In jaz sem Mike Rizzo. 

TOMAS Reimers: Smo dve CS50s TS. In danes smo vodilni na seminar o JavaScript in CSS za spletne aplikacije. Če želite slediti skupaj, Povezava je tamle. In hočeš, da ga dajo gor na računalniškem kratko? 

Tukaj je povezava. To je majhno mesto, ki ima povezave do vsa sredstva, da bomo lahko si ogledamo danes in ima tudi veliko koristne informacije, ki nam pisal preberi več v globino, ko greš nazaj, in skušate spomniti, kaj točno to smo rekli, kaj ste bili govoriš, et cetera. 

MIKE RIZZO: V redu. Torej, začnimo. 

TOMAS Reimers: Torej hočeš, da začnete? OK. 

MIKE RIZZO: Ja. Tako smo najprej želeli začeti s široko Pregled o internetu in Pri načrtovanju spletne strani datoteko vrste. Medtem ko je ta predstavitev bomo želeli priti vv JavaScript veliko veliko kasneje, smo želeli, da začnete s samo, nekako tako kot ptičje oko Česa spletno stran in kako da razmišljajo o oblikovanju Spletna stran za začetek. 

Torej fantje, na tej točki - z njim pri čemer je v petek zvečer - morajo imeti predložila svoj CS50 finance Problem določa. Upajmo, da je dobrega okusa kaj spletno programiranje lahko. Ampak tukaj želimo, vrsta, daj si drug okus, kot tudi. 

TOMAS Reimers: Torej, samo da povzamem, kaj se zgodi, ko tip v URL za vaš spletni brskalnik, da URL dobi pogledal v računalnik. In vaš računalnik je povezan v drug računalnik, ki gosti to spletno stran. OK, tako da, ko greš na google.com, si povezan z enim od Googla računalniki, ki jih ima datoteke za google.com. 

Nato vpraša za določeno datoteko. Torej, če greš - Ne vem - example.com / index.html ali / test.html, boš prosil za da posebno datoteko. In spletni strežnik dogaja da se vrne k tebi. 

Potem, ko greš skozi te datoteke - ko si enkrat računalnik dobi, ki Datoteka - to se dogaja, da začnete za izgradnjo spletne strani. Torej, zdaj pa ima datoteko HTML, ki je nekako kot Struktura spletne strani. HTML datoteka lahko tudi reference CSS datoteke, ki opredeljujejo slog spletne strani. 

JavaScript datoteke, ki opredeljuje interakcija s spletne strani. Slikovnih datotek, ki so samo slike. In morda povezave do drugih datotek HTML, ki jih lahko nato obiskali. 

MIKE RIZZO: OK, super. Torej, vi imate vse, morda, skrbno nastaviti lokalnega gostitelja na navideznem računalniku. In da, nekako, je samo lokalna domene, da vaš računalnik gosti le za vas na svoj IP-naslov. 

Tako, da v roku, nato pa lahko dodate na njej lastne spletne strani. Mislim, da CS50 finance, bi morali imeti dodanih nekaj strani HTML, ki so, nekako, zavit v PHP ovoj. Ampak na koncu, kakšne vaše strani PHP so prikazovanje je HTML. 

Ampak razmišljanje nazaj na samem začetku v PSET, smo morali določiti dovolilnice za vse, kajne? Torej je to samo v bistvu vemo, ki lahko brati, pisati, in morda izvajanje vseh datotek. Torej bomo to hitro - hm? 

TOMAS Reimers: Torej gremo storiti hitro demo. Torej samo, da vas spomnim, ko povežete z Googlovim računalnik - kdor - in prosi za datoteko, računalnik najprej mora zagotoviti ste pooblaščeni dejansko si ogledate datoteko ali prebral, da datoteko, ker ne moreš kar vprašati za vsako datoteko na tem računalniku, kajne? To bi bilo nevarnosti za varnost. 

Torej datotek na sistemih, ki jih uporabljamo, kot so to CS50 aparat, imajo tri Splošni ljudje, ki imajo lahko Dovoljenja za nekaj. Prvi je dejanska lastnik omenjene datoteke. Druga je skupina, ki datoteka pripada. Mi ne bomo osredotočili preveč na to. In zadnja stvar, ki je, nekako tako kot svet ali kot vsi ostali, ki je ni specifičen do te datoteke in ne imeli nobene lastniške pravice nad njim. 

Torej, če imamo lastnika, skupine, in nato svet. In nato za vsako od teh skupin, ki jih ima lahko eno izmed treh dovoljenj, OK, ali več od njih. Lahko imate dovoljenja za branje. Lahko imate ustrezna dovoljenja. In si lahko izvršitev dovoljenja. 

Tako v smislu dejanskih vrst datotek, preberite Dovoljenje je kot dejansko branje vsebina datoteke. Pravica dovoljenje je pisno na omenjeno datoteko. Izvršiti dovoljenje teče datoteko, kot si ti, ko zaženete enega od Vaši CS50 projektov. 

Torej, ko razmišljamo o datotekah kot takrat, ko smo morali prebrati HTML Datoteka, da mora biti svet berljivo, kajne? Verjetno tudi lastnik želi da boste mogli urediti datoteko. Torej lastnik bo potrebno brati in pisati dovoljenja. Oni ne potrebujejo izvršiti. 

Skupina, bomo zdravljenje Enako kot v svetu, za zdaj. Zato potrebujejo dovoljenja za branje. Ampak oni ne potrebujejo pisati ali izvršitev dovoljenja. In zdaj, če mislimo, nazaj v nekdanji PSETs, kar smo spoznali, je te vrste od izgledal binarno, kajne? 1 pomeni ja. 0 za št. In bomo lahko dejansko prevesti to binarno. 

Torej 110 v binarno bi bilo 6. 100 bi bilo 4. Enako s svetom. Tako število, ki ga bo dobil za Dovoljenja za to bi bilo 644. 

MIKE RIZZO: In če misliš nazaj ko chmoded nekaj, menim so dali na problem nastaviti Primer, kje bi lahko naredil nekaj podobnega chmod 644 in nato ime datoteke. 644 Nato, zdaj lahko videli neposredno če ta prihaja. Torej, upajmo, da se naredi, da malo bolj jasno. 

In potem je zaradi jasnosti ste možakarja - oh ja, tukaj gre spet. Torej, 600 pa naj bi bili samo primer smo dali gor, kjer ima lastnik branje in pravilna dovoljenja, medtem ko skupina in svet nimajo nobenega dovoljenja dostop do datoteke. 

TOMAS Reimers: In potem imamo hiter seznam skupnih dovoljenj. Torej imenikov, ki jih želite dejansko chmod 711. Hitro prahi - za imenik, da imajo izvršljiv dovoljenje pomeni, da se lahko , da odprete imenik. Slike, CSS, JavaScript, HTML potrebe 644, ker v bistvu, svet Potrebe dovoljenja za branje. 

In PHP, ki so videli vi čeprav mi ne bo govoril o tem nujno je običajno chmoded z Dovoljenje za 600, ker je teči z dovolilnice za lastnika. Vsaj na napravi. 

MIKE RIZZO: Torej, če vam niso izrecno opredeliti, kaj vrsta datoteke želite v dejansko določanje do te predstavitve - smo imeli težave s tem, ker vse, kar ni bilo chmoded pravilno - boš dobil, vrsta, A Prepovedano je napaka, da je spletna stran dejansko ne imeti dovoljenje dostop do karkoli datoteko si želim, da bi dostop. In seveda, da je mogoče določiti - kot problem komplet - s spreminjanjem Dovoljenja za ustrezno. 

TOMAS Reimers: In zadnji komentar za Hitro lokalni razvoj - smo to odraščali, vendar smo le želeli še enkrat bruhati - če vprašate za strežnik - tako lokalnega gostitelja, na primer, com ali karkoli. - in ne podate določeno datoteko, datoteka, ki vaš računalnik se bo zaprositi za se imenuje index.html. Ali če to ne obstaja, index.php. 

Cool. Torej to je samo Rekapitulacija vsega, upajmo, da smo zajeti v oddelek, in predavanje, in doslej v CS50. In zdaj bomo začeli govoriti o posebej knjižnic. JavaScript in CSS knjižnice za spletne aplikacije. 

Torej en hiter razlog, zakaj imamo knjižnice je programiranje - tam je veliko težav v programiranje, ki vodijo popping up spet in spet in spet. Morda boste opazili, da je veliko spletnih strani potrebujejo možnost, da imajo padec navzdol meniji, na primer, ali potrebujejo možnost da imajo zelo standardno gumb slog, ki ne sme biti Najlažje. Zdaj, ko ste začeli, da bi dobili v HTML, si Zavedam se, da gumbi lahko dejansko poglej res grda, če ti Ne storiti ničesar. 

Tako so veliko pisali imenovane knjižnice. In v tem smislu, da si imenovana tudi okvire. Bomo uporabili dve sopomenki. In kaj so se oni v bistvu premade deli kode - bodisi CSS in JavaScript - da odnese veliko Team imate v kodiranja. 

Tako so vnaprej določiti kup razredov ali vnaprej določiti kup funkcij za Primer Javascript, ki lahko pokličete kasneje. In potem si lahko, nekako, dobili Dostop do te kode, ne da bi da bi morali storiti ničesar. Primer Knjižnico CS50.H. To je bila knjižnica smo dal tebi nazaj v enem tednu, kar je omogočilo, da narediš stvari, kot je ta GetInt in GetString ne da pisati vsaka koda sami. 

MIKE RIZZO: V redu. Torej, tukaj, tako kot smo se morali vključiti V naše c datoteke drugačna knjižnice, smo prav tako morali vključiti v naša HTML files različnih knjižnic. Na primer, če smo želeli vključiti specifična JavaScript knjižnico tukaj, morda tisti, ki smo pisno sami, kot je to lokalno gostila imenovane script.js, smo pravkar uporabite ta zapis. 

Torej imamo tipa scenarij je enak JavaScript vir Enako JavaScript.js. In če mislite, da nazaj v svojo CS50 finance problem določiti, če si pogledal v header.php v mapi s predlogami, Moral bi videti Nekatere od teh vključeni. Torej, ta prvi - skripte - je tudi v knjižnici JavaScript. Vključno s knjižnico CSS malo drugačen. 

Tu, namesto scenarija Tag morate link tag. In potem, vnesite besedilo CSS je malo drugačna. Vam ni treba vedno vključiti rel slogi. Ampak mislim, da je, na splošno, dobra praksa. 

In potem končno, HREF, ki ga verjetno videli v vaših ATAGs za povezovanje v različnih povezavah le določa, povezava kje najti to. Na primer, če smo želeli povezati drugačna knjižnica - reciva - , ki je živel na styles.css. In smo želeli povezati, da s tem, da je gostuje na spletu, bi kopirali, da je. In ga nato prilepite v karkoli tukaj imamo namesto tega. 

TOMAS Reimers: OK, upajmo, da Fantje so že seznanjeni s tem, kako povezati CSS. Imeli ste za to, da na tvoja zadnja rjava set. JavaScript, nekateri od vas morda imajo nekaj izkušenj s. Nekateri od vas morda ne. 

Torej za zdaj, veš, da datoteka JavaScript je zelo podobno kot CSS datoteko v Občutek, da se lahko povežete z njim ali , ki jo lahko vključite interno. In to vam omogoča, da scenarij stvari. In bomo sprehod skozi Malo JavaScript kasneje. 

Torej, z uporabo knjižnice - ko ste ga vključili, to je kot enostavno, kot dobesedno kliče funkcij ali dodajanje Razred imena na njem. Zadnja stvar, ki želimo govoriti o v smislu knjižnici - in to je bolj tehnične note - je licenciranje open source. Torej, ko boste našli te dejanske knjižnice, boste morda razmišljate o Vprašanja, kot je to v redu, da sem pravkar s kodo nekoga drugega, še posebej, ker je to nekaj, kar je zelo ti rekel, da ne delaj tega tečaja. 

Torej, v primeru odprte licenciranja izvor, Veliko razvijalcev - ko so napisali knjižnico, ki mislijo, da bi lahko koristna za druge ljudi - ga bo objavila na spletu in ji dati dovoljenje. In licenco v bistvu pravi, da sem se izdajo dovoljenja za druge ljudje uporabljajo ta kos programske opreme z naslednjo vrsto določila. 

Dodali smo povezavo do dobre spletne strani za pomagale razumeti licenc v primeru, da naletite na njih. Skupna določila so stvari, kot ste dobrodošli, da uporabite svojo knjižnico, tako Dokler mi dali kredit. Ste dobrodošli, da uporabite svojo knjižnico tako dolgo, kot takrat, ko se pokvari me ne zamerim. Ste dobrodošli, da uporabite svojo knjižnico tako dolgo saj ga ne uporabljate, da bi denar za sebe. To so vrste skupnih določila. 

Za ta CS50 končni projekt, so ne bi smelo biti super pomembna, ker projekti, ki uporabljajo vidva sta verjetno bolje, nekako znan. Toda, ko boste dejansko šel ven v svet in začeti uporabljati knjižnice, ki lahko ali pa tudi ne, kot tudi izvajati nekateri bolj pogosti pa smo bodo šli skozi. To je dobro, da bi lahko razumeli ta dovoljenja in da razumeli, kaj pomenijo. In grem nazaj. 

MIKE RIZZO: OK. Torej, zdaj gibljejo na primere dejanskega CSS. Na tej točki doslej, boste morda ne bi naleteli na to. Ampak, ste morda naleteli na vaše vsakdanje življenje, kjer je nekaj , ki je videti v eno smer na eni brskalniku ne bo videti enako Način, na drugem brskalniku. 

To se imenuje brskalnik brskalnik združljivost. In vse to je vse bolj in večji problem, zlasti ker brskalniki bo več in več svoboščin izvajati stvari, kot hočejo. Tako, da premaga to, da je dejansko velika knjižnica se imenuje Normalize.CSS. 

TOMAS Reimers: Smo vključili povezave. Na tej točki, da je koristno, če imate svoj laptop tam pogledate na spletni strani. In mi smo prav daje to za vas Zdaj preprosto zato, ker CS50 končni Projekt se dejansko dogaja, da Vas prosimo, da ga bodo izvedli podobno in preko brskalnikov. 

Torej, samo, da v zadnjem delu vašega glava, to je čudovita knjižnica saj bo nekako, standardizirati stvari. V Firefoxu lahko nekaj pokazati kot eno slikovno točko v levo. In potem se lahko odloči, Chrome, ki dejansko kaj si mislil je 10 točk levo. In želite standardizirati to. Normalizirati bo dejansko narediti res dober Naloga pazite, da vaša stran videti enako na različnih brskalnikih. 

MIKE RIZZO: Torej, če smo želeli samo kliknite na povezavo res hitro in predstava si kaj, da izgleda kot, vas Prenesete ga lahko s pomočjo Velikan gumb Download. Ali pa vas pozivam, da preberete več o tem s klikom na to povezavo v spodnji desnem kotu strani. 

TOMAS Reimers: In če ste dejansko kliknite Preberite več tam - kliknite vir na GitHub - boste dejansko videli odprto kodo licence na LICENSE.md tam. In videli boste, tukaj je Zelo priljubljena licenca MIT. Še enkrat, če ste prebrali besedilo, boste lahko našli na spletni strani smo se sklicujemo pred in biti sposoben razumeti, ne da bi morali prebrati prek pravnega žargona. 

MIKE RIZZO: OK, super. Tako da je normalizirati. Želeli smo, da bi vam da res hitro. Oh, imaš vprašanje? 

PUBLIKA: Torej, ko si jo naložite, boste sledite te kode, ki jih imajo pod gumbom Prenesi? 

TOMAS Reimers: Ja, tako ko prenesete - 

MIKE RIZZO: Oh, to je velika točka. Torej, vprašanje je bilo, kako smo dejansko jo prenesete? Torej, če kliknete na povezavo, vidimo, da je dejansko pops up v izvorni kodi. Torej za to, kar smo lahko to je samo kliknite Shrani kot. Save As in da bi morala bruhati datoteko. In potem bomo lahko shranite je kot normalize.CSS. In potem bi morali povezati v - 

TOMAS Reimers: ti enak način povezati v druge datoteke. In ko ga povezati in, kar je super O normalizirati je, da bo dejansko poskrbel za vse trdo delo samo po sebi. Kar pomeni, da nimate dodate kateri koli skupini. 

Vam ni treba storiti ničesar čudnega. To bo normalizirala brez tebe še naprej počne karkoli. Ja, imate, da ga vključite. Google Chrome se ne odziva. 

Samo hitro razveljaviti - Opazil sem, da sva skočila v to. Preostali del te predstavitve je bo hiter pregled. Raziskava knjižnic. 

V bistvu, kaj so. Kaj počnejo. Kako oni koristno. Kako bi lahko njihovo izvajanje. Če želite, da začnete iskati na njih, po skupaj in prebiranju njih, jaz bi zelo spodbudilo, da. 

Druga možnost je, da ste dobrodošli tudi začetek jih prenesete in vključno jim v očeh, samo da bi videli, kaj so izgledal in kaj storiti, če imate vaš prenosnik pred vami. Če ne, ste dobrodošli, da Posluša nas govoriti. Bomo še naprej govorijo. In imamo čas, na koncu, upajmo bomo dejansko dobili v vas, ki prikazuje kar nekaj teh knjižnic izgledal. 

MIKE RIZZO: Cool. V redu, zdaj pa se pogovorimo O pisave Awesome. 

TOMAS Reimers: Awesome tako Font je res lepo spletno stran, še posebej za tiste, od nas, ki so manj umetniško nadarjena. Ignoriranje ime pisave Awesome, daje ti kup ikon, ki so zelo koristno. Torej, veliko krat boste izvajati icon boste morda želeli, tako kot lepo X, da lahko zaprete nekaj. 

Ali pa morda želite nekakšno gumb Edit z risbe s svinčnikom, kot vsi ostali ima. In da je, ko ste izvedeli, da risba te ikone so lahko zelo mučen in težko. Font Awesome - če ste dejansko pojdite na spletno stran - vam daje veliko ikon pod ikone na vrhu. Ja, samo top. To vam bo dala veliko ikon brezplačno. 

Torej, tukaj vidite imamo stvari, kot so zvezdica, bari, strele, koledar, bug, knjiga, et cetera. To je lahko zelo koristen. Tako boste vključili to si ti vključujejo dobesedno datoteke CSS. In ko ste vključeni datoteko CSS, kaj lahko naredite, je, da ustvarite tag imenovano I. satands za icon z razredom FA stati Font super. In potem, ne glede na razred, kar želite. 

Torej, če sem hotel ikono to plus kvadratni tukaj, jaz bi dal je razred FA. In potem FA vezaj plus vezaj kvadrat. 

MIKE RIZZO: Cool, OK. 

TOMAS Reimers: In potem, zadnja CSS Knjižnica želimo priti skozi smo poskuša obdržati minimalno na CSS knjižnice, saj se zavedamo, Naslov te predstavitve je JavaScript knjižnice. Mislili smo, da smo lahko tudi vam predstavil drugih knjižnicah medtem ko smo govorili o knjižnicah. 

To je Google Web Fonts. In kaj Google Web Fonts vam omogoča storiti, je dodati pisave na vaši spletni strani, kar je zelo preprost način, da bi ga lepa in razlikovati svoj nabor vsakdo, ki je drugega, če ima lepo pisavo, ali če je lepo Zbirka pisav. Google Web Fonts je lepo, za razliko od drugih knjižnice v smislu, da je Res vodena namestitev. 

Torej, če sledite povezavi, je google.com / pisave, verjamem. Če upoštevate, da vas Lahko izberete svojo pisavo. Izbirate lahko na levi od debelina, postrani, et cetera. In potem, ko ste izbrali eno, lahko kliknete na hitro uporabo. Točno tam. Spodaj desno škatle. 

In potem, se pomaknite navzdol. Najprej se vam CSS, da morate dejansko povezati z njo. To je tam. Lahko samo kopiraj in prilepi, da noter In lepo stvar je ta, ti dejansko ne potrebujete niti za prenos datoteke. 

Kaj se pa dogaja, da storiti, je, da se dogaja za povezavo na različico Googlovega njo. Torej nazaj na kaj to pomeni. To pomeni, da ko uporabnik prenese datoteko - prenese svoje HTML strani - vaš HTML Stran se bo reference to datoteko. 

Torej, računalnik bo videti, oh, to je gostuje na google.com namesto kot na theirsite.com. Pusti me, da Google za to datoteko. In potem se dogaja, da se vključi je skoraj tako, kot če bi bilo del vaše lastne strani. 

TOMAS Reimers: Cool. In ko tega ni, potem ga vključite v svoj CSS, da vam dejanska linija. Torej ste nastavili druľino nepremičnine enako ime vaše pisave. 

MIKE RIZZO: OK. Tako smo pravkar končali s CSS. In nekateri od vas morda mislil, dobro, smo imeli nekaj CSS na CS50 finance. Ampak CSS Knjižnica je bila bootstrap. Mi dejansko vključuje Bootstrap malo kasneje pod JavaScript saj s Knjižnica Bootstrap CSS prav tako prihaja z veliko JavaScript tem Bootstrap ali Twitter - kdo je Bootstrapa - uporablja za upravljanje vseh svojih CSS. 

TOMAS Reimers: Ali ima kdo katerokoli Vprašanja doslej o CSS nasploh? Dobro smo? Super. 

MIKE RIZZO: Awesome. 

TOMAS Reimers: Torej se gibljejo na JavaScript. 

MIKE RIZZO: Torej smo želeli govoriti o jQuery za začetek. Je kdo slišal za jQuery pred ali ga uporablja? Ja, par? Torej, če ste le delo z materni JavaScript, sami ste našli tipkanje veliko dolgih selektorjev veliko. Torej, kaj jQuery pa je, da zagotavlja lepo ovoj za JavaScript jezik, ki vam omogoča, da preprosto izberete in manipulirati različne elemente v objektni model dokumenta Spletna stran ali DOM, kar mislim, da vi ste slišali v predavanje na tej točki. 

TOMAS Reimers: Če še niste slišali je ali če niste gledali predavanje še, Document Object Model je v bistvu, kako so zastopani stvari. Torej HTML nekako izgleda kot drevo ko jo dejansko potegnili. Imate HTML element na vrhu. Imate glavo in telo. 

In potem, v roku, ki ga še vse ostalo. To se imenuje DOM - Document Object Model. Torej model, ki predstavlja predmetov Dokument je preprost način, da razmišljajo o tem. In ena velika stvar o jQuery je to res naredi, ki bodo vozili da in manipulacijo elementov znotraj da je zelo preprosta. 

Tako preprosto, v dejstvu, da je večina JavaScript knjižnice ali če ne Večina, velika večina tistih boste videli dejansko zahtevajo jQuery tako da so se lahko vodijo le ker če niste imeli jQuery, vas bi zapravljajo veliko časa poskuša ugotovimo, kako izbrati nekatere elemente in kako to storiti druge stvari. In druga velika stvar o jQuery je, da je navzkrižno brskalnik združljive. 

Torej, se spomnite nazaj, ko smo rekli, da niso vsi brskalniki izvajati stvari na enak način? To velja tudi v JavaScript. In ena od velikih stvari o jQuery je, da bo zaznal brskalnik in odkrivanje primerno metodo. 

Torej, če boste morali izbrati element, Internet Explorer lahko rekli, da ste naj bi naredil na ta način. Firefox lahko rekli pravilna Tako je v tej smeri. jQuery ne skrbi. Ko si povedal, jQuery, da izberete element bo ugotoviti, kako je naj to stori v brskalniku Uporabnik je trenutno, in naredite je na ta način. 

MIKE RIZZO: Torej ne govorimo o Uporaba jQuery malo. Tako kot so PHP, jQuery je zlasti ljubček za znak za dolar. Tako boste ugotovili, da nobene jQuery - No, ne vsi. Včasih lahko zamenjate dolar prijavite z besedo jQuery. Ampak na splošno, samo zato, ker je krajša, ko boste videli jQuery pa uporablja se bo z znak za dolar. 

Tako da tukaj smo samo kaže na začetek selektor za element v DOM. Tukaj imamo sledil znak za dolar z odprtimi oklepajih in nato kotacije. In znotraj narekovajev gredo naše selektorje za različne elemente. Tako kot v CSS, smo potrebovali za selektorje lahko slog različne elemente v stran. Te različne selektorji translate točno v jQuery in JavaScript, večinoma. 

Torej, tukaj imamo dot foo. Torej, če se spomnite iz predavanj, pika pomeni le razred. Torej smo izbiro elementa z razredom foo. Torej, če sem šel naprej in odprla naša Konzola JavaScript tukaj res hitro samo dokazati, če sem samo tip znak za dolar, vidimo, da je to nekaj funkcija, ki pride gor. In to je samo opredeljeno z jQuery. 

TOMAS Reimers: Za tiste, ki ste ne poznajo, konzola je orodje v Chrome, ki vam omogoča, v bistvu, izvajanje JavaScripta na trenutna stran. To boste našli izjemno koristna, ko ste dejansko razhroščevanje in si morajo biti kot so, kaj je trenutna vrednost neke globalne spremenljivke ali kaj je kaj drugega? To je nekako tako kot GDB z izjemo da lahko dejansko manipulacijo elementov na strani s je v veliko lažji način. In tudi to ne, v bistvu, preverite s tabo, preden se to zgodi karkoli. 

Zato ker bi GDB bilo všeč, kajne prepričani, da želite teči naslednji korak? Konzola je v real. Tako kot spletna stran je upodabljanje in počne karkoli že počne, Svet je prav tako teče ob njej. In lahko pripisala kodo v da je konzola, ki bo se vodijo na strani. 

MIKE RIZZO: Torej, za vstop v konzolo, Mislim, da bi morala na kratko omenjam, kako to storiti. V zadnjih težave, ki jih imate lahko rabljeni Chrome je pregledati element funkcij ali pogleda stran vira - in tistih, ki so dostopne samo z desno klikom na stran, ali posebnega element in delaš ali preglejte element ali pogleda stran vir. Mi lahko dostopate tudi JavaScript konzola neposredno izbiri pregledati element. Torej ste pravkar udaril konzole na skrajni desni strani. 

Druga možnost je, lahko bi tudi šla v zgornjem desnem kotu ki je odrezan na tem zaslonu, kjer ima tri vodoravne palice. In greš dol z orodji in potem JavaScript konzola tukaj, kjer lahko vidite - vsaj na Windows - bližnjica Control Shift J. Torej če bi želeli, da izberete element na tej strani, kot sem pokazala, preden smo storili znak za dolar odprtih parens in potem citira. 

Zanimivo je, na splošno, enojnih narekovajih in dvojne kotacije so zamenljiv. Torej, veliko ljudi samo uporabo single citati, ker oni so hitreje na vrsto kot narekovajih zato, ker jih ne morali držite Shift. Torej bom naredil, da prav zdaj. 

Torej, želim, da izberete nekaj z razredom. Kontejner, samo zato, ker vem, da je nekaj, kar je v naši spletna stran zdaj. In sem zadeti nastopiti. In smo lahko videli, da je izbrana. Tako se pokaže, da je vrnil ta cilj. Tako da je osnovni izbor. Če bi želeli, da ga dejansko manipulirajo, bi morali poklicati nekaj na ta izbor, ki bomo dobili v kasneje. 

TOMAS Reimers: Torej, samo gledati, da bolj v globino, to ni nič drugače kot klici funkcij smo jih naredili v C. Ime funkcije tukaj je malo čudno. To je znak za dolar. To je samo ime za funkcijo. Ni nič posebnega o njem. 

Imamo odprte oklepaje. Potem pa imamo en argument, ki v tem primeru zgodi, da bo niz, ki je selektor za to. In potem imamo naše zaprti oklepaj. To je to. 

Saj ne, da povsem drugačna. Kljub temu, da se ti zdi zelo čudno. In da se lahko, nekako, lepljenje točka za veliko ljudi. 

MIKE RIZZO: Torej podobno, če smo želeli Izberite element, ki ima ID, Zdaj želimo, da izberete z ID namesto razreda. To bi bilo podobno stvar, kjer smo samo naredi oster znak za ID. Tako da smo tukaj, da izberete vse Elementi, ki imajo ID bar. 

TOMAS Reimers: In to podaljšuje. To CSS razširja. Tako kot v CSS, lahko izberete vse povezave, ki imajo razred foo. Tukaj gre za isto stvar. 

Lahko bi naredil a.foo, ki bi izbiral vse povezave z razredom foo. Lahko bi naredil oster bar, ki bi izberite povezavo z ID-bar in tako naprej in tako naprej. Koli selektor CSS je veljavna Selektor jQuery. 

MIKE RIZZO: Ja. OK, zdaj gremo v malo manipulacija, ki bi lahko storimo z naša jQuery. Torej jQuery ima poseben tip za zapis ko smo izkoristili pika na koncu. In lahko si misliš o tem, kot v C, kako smo imeli različne struktur struct. In da gredo v teh konstruktov, bi si uporabite piko, da se v njih. 

To je, vrsta, podobno stvar. Šele zdaj imamo funkcij znotraj tega selektor, ki jih lahko pokličete na njej. Torej, tukaj, zelo prvi primer lahko vidite, je selektor CSS. In v bistvu, kaj to počne, je to velja prvi element CSS na to stvar, ki ste jo izbrali - Ta element, ki ste ga izbrali - z vrednostjo tega. 

TOMAS Reimers: Tako enostavno prevod da bi bilo, če jQuery, v bistvu, Pravkar se je foo. In nato v CSS je dejal, obarvajo rdeče in blizu. To je ista ideja. Kaj pa je naredil, je, da je izbrana vsi foo elementi. In potem je uporabljena. Nekako, barva nepremičnine je enako rdeče. 

MIKE RIZZO: Podobno lahko tudi spremeni dejanska vsebina tega, kar je kaže na HTML strani, ki je res kul, ker to pomeni, da spletne strani, sedaj lahko popolnoma dinamično in ne bi bilo treba biti statična , ki ga natisnete z uporabo PHP na samem začetku Stran se nalaga. Torej tukaj, če bomo želeli spremeniti Dejanska HTML strani, bi zdaj smo klic funkcije HTML, ki potem samo vložki karkoli bomo podate v ta element, da smo izbrali. Tako da tukaj smo, da izberete element s Razred foo in nato rekel, da je HTML to je zdaj zdravo svet. 

TOMAS Reimers: In če pomislite kaj so uporabne aplikacije to je to CSS ena, prva stvar, ki lahko začnete razmišljati o tem je v smislu celo padajočega menija. Lahko bi začeli delati stvari, kot so, ko uporabnik lebdi nad zgornji del iz padajočega, si želijo, da bi Spodnji del vidna. Kajne? 

Torej v CSS, imamo lastnosti da bi nekaj vidnega. Stvari, kot so zaslon na debelem črevesu none bi bilo nevidno. Display blok bi bilo vidno. Ali celo, če želite iti enostavnejši, vas imajo stvari, kot vidljivosti, enakovrednih vidna in vidljivost enaka skriti. 

In lahko začnete izvajati stvari kot padajočega menija pravice ko prideš skozi idejo o tem, kako lahko ugotovimo, ko se to odpre, katere bomo prišli skozi zelo na kratko. Lahko pa smo začeli videti aplikacije za to. V podobnem smislu, če ste bili, da poskusite in izvajati, recimo, klepetu motorja in želite, da bi malo oblačka pridejo kadarkoli ste dobil novo sporočilo, ko boste dobili novo sporočilo, si lahko malo oblačka prišel gor s spreminjanjem HTML strani, kajne? Z dodatkom, da dodatne oblačka z dodatnim besedilom tam. Ja? 

PUBLIKA: Torej bi to vgradili v HTML kodo v nekaj podobnega [Neslišno]? 

MIKE RIZZO: Right. Ja, bomo prišli do, da v malo. Ja, to je podobno malo za PHP. Ni ravno podobno. 

Dober razlikovanje, da je tisto, kar ta je dejansko urejanje ko smo urejati stran, ker je ne bo urejanjem dejansko datoteko, da se hranijo na strežniku, ker svet ne sme imeti dovoljenja za urejanje datotek. To je le urejanje, kaj je na strani in kaj se prikaže v brskalnik. Torej, če ste bili, ko osvežite stran, pravijo, brisanje nekaj, kot smo glej, kar lahko storimo z odstranite klic, ta stvar bi potem znova pojavijo. 

TOMAS Reimers: Torej en način, da razmišljajo o To je, če sem računalnik in Mike je, nekako, strežnik. Kaj se bo zgodilo, je, da bom vprašajte Mike, hej, lahko dobim kopijo ta spletna stran? In on mi daste njegovo kopijo. 

Ne, to ni originalna stvar. To je samo kopija. In potem bi bilo všeč, oh, tam je JavaScript tukaj. Jasno je, da bi moral urejati stran, da je tako. In jaz urejanje svojega izvoda. 

Ampak to ni bila izvedba dejanska kopija. In če bi bil, da bi ga še enkrat vprašati osvežite stran, - hej, lahko dobim še eno čistopis - on se dogaja, da mi drugo Čistopis. In potem ti bom naredil isto kot so, oh, to sem js, ki pravi, da se to uredi. In grem naprej s tem. 

MIKE RIZZO: Torej res kul stvar ki jih lahko naredite s jQuery je dejansko dodali različne vrste animacij na vaši strani. Ne vem, če ste že kdaj videli, če skušate s izpolnite obrazec na spletu in ne izpolnite stvari pravilno. Tako majhna stvar drsi navzdol na vrhu in si reče ni to narejeno pravilno. Prosimo, poskusite znova. In potem, morda celo samo potisnite navzgor. 

Izkazalo se je, jQuery je zgrajena v funkcijah da bi vse to animacija zelo, zelo enostavno. Tako da je prvi fade določeno funkcijo, ki lahko pokličete na nekaj. In to je način, da spremenite CSS o ta element v animirani. Torej je potrebno, ne glede na element pokličeš to fade out naprej. In potem se počasi spreminja, da je motnosti dokler ne gre popolnoma transparentno. 

TOMAS Reimers: druga priljubljen je potisnite navzdol, kar bo nekaj, kar se zdi, da jo potisnete navzdol. Torej, v primeru meniju drop down, še enkrat, ko smo se naučili, kako odkriti ko je bil ta gibala nad, si lahko samo povem to dno del potisnite navzdol zdaj. In potem se zdi, z drsenjem navzdol. 

MIKE RIZZO: In potem, če boste morali neke vrste animacije v mislih, da jQuery ne pomeni nujno zagotoviti. Na primer, recimo jQuery pa vam zagotavlja s toboganom navzdol in ga potisnite navzgor. No, recimo, da si je želel, da ga potisnite nekaj iz levega ali iz Pravica nekako kot CS50 Glavna stran počne kadarkoli greš na novo ploščo. Nato bi verjetno morali izvedete sami z uporabo funkcijo animirati v jQuery. 

Torej podobno, si animirati. In potem, v njem je potrebno Slovar različnih vrednostih da si moral prenesti. Torej tukaj, če smo želeli animirati element foo tako da njegova širina bodisi raztegniti ali pogodbe do 80 pik, odvisno od tega, kaj trenutno je. Mi bi samo mimo, da kot argument v njem. 

Animirati tudi še nekatere druge argumente da bi ga prenese, na primer, hitrost animacije , ki ga želite dati. In za to, da bi jaz samo povem, hitro Google jQuery animacijo. In potem vzgajajo te strani, lahko glej to je dobil kup različnih lastnosti, ki jo lahko mimo. 

In sem Spodbujam vas - kadarkoli prideš čez nekaj, ki jih ne vem, ali pa samo želite izvedeti več o tem Zlasti metoda, ki jo lahko pokličete na nekaj - samo Google. jQuery je izredno dobro dokumentirana. In pogosto krat obstaja veliko Primeri, ki jih ponujajo za vas. Če smo se pomaknite navzdol - pot navzdol - da lahko uporabimo, kot tudi. 

Še enkrat, ko razvijalec dejansko gre skozi težave pisanja Knjižnica, ki jih običajno želijo nekoga, da jo uporabite. Torej skupaj se dogaja, da biti dokumentacija. In da je dokumentacija običajno lahko dostopne na spletni strani projekta, ki je zakaj ti je pa to prvotno mesto v začetek, ki vas povezuje z Projekt strani, tako da lahko glej to dokumentacijo. 

Značilno je, da stran projekta v primeru z dne [neslišno], da ti je povedal, Imena razredov. Pri JavaScript, daje vam ime funkcij. Mimogrede, če smo pomikanje do vrha, hitro side note na funkcije, je ko boste videli funkcijo izvaja kot je ta s trdo oklepaj v sredini, kar pomeni, da je ta lastnost ni obvezno. Samo glave gor. Videl sem veliko vprašanj o tem. 

Tako da tukaj lahko vidimo, da oživljeno traja lastnosti kot nujni argument. In vse ostalo je neobvezno. Side note - lahko si misliš o tem, razvrščanje o, kot so strani man. Man strani so dokumentacija za C in za veliko drugih stvari, kot dobro. 

MIKE RIZZO: Zato smo se naučili, kako spremenite drugačen CSS na strani ga animirati, in odstranite dodajte HTML. Toda eden izmed resnično najmočnejši Stvari okoli JavaScript in zlasti jQuery - kar vam omogoča, da storiti, je odgovoriti na različni elementi, ki se zgodijo. Na primer, tukaj imamo obravnavo dogodkov. In to samo pomeni, da vsakič, ko je to Dogodek se zgodi, jih uporabljamo v določen način. 

Torej, tukaj, generično jQuery dogodek Vodnik je pika na. In potem prva stvar, ki jo pod pogojem, je tisto, dogodek bi morala se posluša. Torej, tukaj je, da klik čakamo. 

TOMAS Reimers: Druga možnost je, da imate na lebdenje, ki je zelo priljubljen. Torej nazaj na moj spustnega menija idejo. Ti bi morali zgornjo eno na lebdenja. In potem se lahko spremeni. 

MIKE RIZZO: Right. In potem, ko se to zgodi, je samo izvaja te funkcije, ki smo ji dali kot argument in da opozori zdravo ali hi. 

TOMAS Reimers: Torej, v primeru JavaScript, to je mesto moramo odstranite sami od C. Mi lahko dejansko sprejmejo funkcij kot argumente. In obstaja veliko res zapletenih načinov, da to storijo. Bomo spodbujali v eno smer, ki je lahko določite deluje tam. 

Torej, če ste prosi za funkciji parameter, ti si v bistvu samo bo opredeliti funkcijo o samem. In način, kako definiramo funkcijo v JavaScript je vas dobesedno pravijo funkcijo. Nato je običajno, ime funkcije. Ampak mi nikoli ne bo reference ta funkcija še enkrat. Zato smo ga pustite brez imena. 

Potem oklepaji, potem kodrasti naramnice, nato pa kodo v to. Tako smo razumeli to pločevinko je malo zmedeno. Torej smo vam na splošno obliko kaj obravnavo dogodkov izgleda spodaj, ki je na dogodkih. In potem, kodo znotraj tega. 

MIKE RIZZO: Ali obstajajo Vprašanja o tem? To je lahko malo zmedeno prvič, ko ga vidim. 

TOMAS Reimers: Si res želiš odpreti datoteko in jim pokazati nekaj jQuery prav zdaj? 

MIKE RIZZO: Ja, kaj je to. OK. 

TOMAS Reimers: Do sedaj smo v aparatu. In tisto, kar smo naredili, je, da smo zavzeli svoboda ustvarjanja oboje, tako index.html slika, ki se povezuje z Datoteka JavaScript. In lahko se nam odpirajo - ja. No, to počne dve stvari. 

Prvi je, da se povezuje z Datoteka JavaScript. In bomo videli, da tu gor. Vidimo, da v glavi HTML dokument, še posebej. Tako da boste tam videli, da smo, v bistvu, pravijo SRC, ki stoji za vir. In to je URL. 

Torej, tukaj lahko rekli, da smo že vključeni jQuery. In smo tudi skripte. Drug način, da vključuje JavaScript je da lahko vključujejo inline script priponka imamo na dnu, kjer je pravi tip skript je besedilo JavaScript. 

Tako smo si rekel, poslušaj, smo o tem, da vključuje scenarij. In tip te skripte JavaScript, ki je vrsta besedila. Zelo preprosto. 

MIKE RIZZO: Torej to, vrsta, pride do vaše vprašanje o tem, kako vključiti JavaScript v naših datotek, ker ko smo so PHP, naredimo nekaj takega. In potem imamo PHP funkcije - recimo zaloge storiti Nekaj ​​s tem, da - gre tja. Vendar, sedaj imamo skript oznake , ki smo jo dal, ki so dejansko del HTML sama, ker to ni pretvarja da HTML datoteka všeč je v PHP, ker če si dejansko šel v in pogled na vir strani, boste videli te scenaristov oznake tam z JavaScript povezana z jim pri tem. 

Torej, če smo želeli napisati nekaj JavaScript - recimo, da smo želeli spremeniti telo ker zdaj nimam katere koli druge oznake, da sem lahko res Urejanje poleg telesa. Reciva, da sem hotel spremenite CSS tega. Torej, gremo naprej in spremembe barva tega do rdeče. 

Zato sem shranite. Vrnimo se k naši spletni strani, osveževanja, in to počne avtomatsko saj ni videti, kot da čakala Sploh zato, ker nismo poslušali za dogodek ali kaj podobnega. 

TOMAS Reimers: Torej, če se vrnemo na to vložiti predvsem - HTML datoteko - kaj boš videti je, da smo imeli - pozabiti, da je ta vstavljen, nekako, kronološko. Torej imamo prvo glavo. to obilje teh dveh datotek. Potem gremo na telo. In vidimo Hello World. Tako smo render Hello World. 

In potem zadnja stvar, ki jo imajo se imamo scenarij oznako. Tako da teče scenarij oznako, ker je Ne govorim čakati za nič. In to je najbolj osnovna način za vodenje JavaScript. 

S tem je dejal, lahko si dal scenarij tag v glavi samo pokazati to točko? In vodijo to. Bomo opazili, da ni spremenil barvo. In to je eden od problemov JavaScript je, da so stvari naložen v kronološkem vrstnem redu. 

Torej v času, ki koda je bilo tekmovanje v teku, smo izbrali - vrniti - tag telo. Tag telo še ne obstaja, ker JavaScript je v skladu s HTML. Torej brskalnik je kot izberite telesu. Nekaj ​​takega še ni. Tako bomo lahko prezreti, da je. In smo naprej. 

In potem smo definirati telo oznako. Ampak to nikoli ne dobi posodobljen. Torej, če ste za izvajanje skript oznake, poskrbite, da boste mesto po telesu oznako. Naslednji posnetek. 

MIKE RIZZO: OK. Tako da smo spremenili nekaj. Ampak to ni bilo videti, kot da odgovorila na nas sploh zato, ker je nekako Uspelo takoj, ko bo naložen na stran. Torej sedaj, namesto da bi to sprejel, zakaj ne bomo dodali obravnavo dogodkov. 

Torej dajmo nekaj narediti na telo znova. In recimo, da to počnemo na - kliknite. Mi bomo dodali funkcijo. 

Sprememba Debatni: Tomas Reimers to je barva rdeča znova. Zakaj pa ne? 

MIKE RIZZO: Ja, dajmo spremembe njegova "barva rdeče znova. Vse je v redu. Torej, kaj je osvežite stran. OK, bomo videli - kot je bilo pričakovano, da se ne vklopijo še rdeče. Ampak potem lahko gremo naprej in ga kliknite. 

TOMAS Reimers: In še to obarva rdeče. 

MIKE RIZZO: In to ne obarva rdeče, kot je bilo pričakovano. 

TOMAS Reimers: In bomo lahko videli, kako lahko začnemo graditi zelo osnovna interakcija. Druge stvari, ki jih morda želeli storiti, je, če ne želimo, da bi telo obarvajo rdeče, naredimo HTML ozadje rdeče barve. Samo, da je to ista CSS. 

In ko smo ga spremenili, bomo lahko videli zelo dramatičen učinek spreminjanja celotno stran. Torej še enkrat, če ste v izvajanju stvari, lahko imate eno komponento , ki naj bi se kliknili. Recimo gumb Exit in celotna druga komponenta, , ki je mišljen, da se odzove. Tako da bi odstranili okno ko se to zgodi. 

MIKE RIZZO: OK. Tako kot na primer - niste dobili, da vidim to prej - Jaz ti bom pokazal, kaj je videti všeč, ko smo nekaj prikriti. Torej bom šel naprej in ne potisnite navzgor. 

TOMAS Reimers: Želite zaviti, da je v Vrsta odstavek, preden bomo to storili? 

MIKE RIZZO: OK. Ja, zakaj ne bomo storili, da samo zato, jo lahko izberete malo več. 

TOMAS Reimers: in kaj je izročiti to razred. 

MIKE RIZZO: Ja. OK, pa poglejmo. Namesto izbiri priklic zdaj, jaz bom samo izbrati vse z Razred hello, ki je tu samo še eno stvar. Tako da ne bi bilo treba skrbi. 

Torej bom osvežiti. Jaz grem naprej in ga kliknite. In to, nekako, kajne čudno slide up stvar, ki ni videti, da privlačna. Na splošno pa so videti zelo lepo. Mislim, da je to - za nekatere Razlog - ni. Jaz bom samo to fade out, tako si lahko ogledate tudi to. Veliko lepše. 

In potem, če sem odprla JavaScript spet tolažil in želimo videti, kaj zgleda, ko smo ga zbledi prijavite Zdaj sem poklical zbledi na njem. In to zbledi nazaj noter 

Podobno bi lahko dejansko tudi mimo Trditev, da zbledi ali fade out, ki je vrsta, hitrost njega. Torej, gremo naprej in rekli, da smo želeli da bi šel počasi zbledi prijavite Zato mislim, da je še vedno zdelo, precej hitro. Vendar je bilo počasneje kot prej. 

TOMAS Reimers: In če želite, da bi našli Več o teh stvareh, še enkrat, pojdite na dokumentacijo jQuery, ki smo vam ga je dal, in branje z njimi. Dokumentirajo svoje funkcije neverjetno dobro. 

MIKE RIZZO: OK. Torej, mislim, da gremo nazaj v to. In potem lahko govorimo o naši zadnji strani. No, lahko končamo z Bootstrap. In potem jo bomo odprli pri nekaterih vprašanjih. In če imate vi kakšno idejo, da bi radi, da bi poskušali bruhal in videli če jih bomo lahko izvajajo z JavaScript hitro. 

Torej res hitro o Bootstrap, ki je samodejno vključena v tvoj zadnji problem nastavite v mapi CSS in dejansko povezana v vašem header.php. Torej lahko ste dodali razrede, ki so opredeljene v Bootstrapa njej. In to bi avtomatično stil zato mora te stvari. 

TOMAS Reimers: Torej Bootstrap je zelo čarobna stvar, ki jih ljudje razvili na Twitterju. In kaj je bilo mišljeno, da storiti, je bilo - preden so spletne strani res težko, da bi videti lepo, še posebej, ko smo imeli veliko skupnih sestavnih delov. Torej, veliko gumbov na Spletna videti enako. 

Veliko besedilna polja se lahko na videti bolje kot standardnega besedila Polje verjetno veste iz zares Stare spletne strani ali res slabo postavil spletne strani, ki samo izgledajo kot literal polja z besedilom brez kakršne koli obliki besedila Senca ali kakršno koli lepo obris. Torej, kaj Bootstrap naredil je to rekel, dobro, imamo skupno stilov veliko. Zakaj ne naredimo en skupen nabor CSS ter skupen niz JavaScript kot dobro, ki ga lahko stilu, kot je, in ki mogoče dati ljudem stvari, kot so padec navzdol menijev, ki lahko ljudem stvari, kot modals. 

Modal je tisto, kar pops preko strani kadar je strogo gledano nekaj, kar še dodatno zavira interakcija, dokler vas interakcijo z njim. Nekaj ​​takega je, ste prepričani, želite izbrisati to zadevo? Saj ne morem storiti ničesar drugega dokler ne boste rekli, da ali ne. 

Trajalo je vse to in jo zapakirati skupaj in rekel, gremo. Ljudje lahko zdaj to. In vse to najdete preko na getbootstrap.com. Samodejno ki je bila vključena v tvoj zadnji problem nastaviti. In ste več kot dobrodošli, da ga lahko uporabljate v končni projekt. In če želite, da bi izhajalo, da povezavo, da bi dobili Bootstrapa. 

Videli boste tu Bootstrap CSS mesto. Boste videli Bootstrapa. In če se premaknete navzdol, boste videli kako jo naložite, kako ga namestite, et cetera. 

MIKE RIZZO: In lahko tudi, Zanimivo je, da ga prilagoditi je ne glede na vrsto teme , ki ga želite. Vem, da je to nekaj, kar sem naredil za mojo končni projekt, ko sem prevzel razred je bila po vaših željah. Drugačna različica Bootstrap, da imel drugačno barvno shemo in različne oblike nekaterih različni stvari. Zato vas pozivam, da igrajo s tem. To je nekako zabavno delati. 

TOMAS Reimers: Če pogledamo na vrhu še enkrat, to je zelo podobna pisave Awesome spletno stran. Veliko dokumentacije se bo začel da se zdi podobno, ko ste videl dovolj. Torej, tukaj imamo CSS sestavni del tega. In boste videli, kako Lahko slog stvari. Torej, če boste kliknili na mizah, na primer, lahko takoj narediti tabela precej preprosto z dodajanjem razred miza z njo. 

Iste stvari za gumbe. Če ste preprosto dodate razred in btn btn privzeto ali BTN primarni, lahko dobil enega od teh gumbov s tem že izdelanih stilov. In potem, če iščete Nekaj ​​bolj zapletena kot zgolj Prenova kaj w že imajo, kot na Kartica JavaScript po zgornjem smo imajo kup komponent. 

Torej, tukaj imamo prehodi, modals, spustnem meniju, zavihki in namigi. Namig je tisto, kar izskoči pod vašim miš, ko hover na nekaj. Popovers, opozorila, gumbi, zložljivi harmonike je tisto, oni so ponavadi imenujemo. Vrtiljaki, ki flip skozi, kot so slike. 

Torej tistih, ki so sestavni deli Bootstrapa. Jaz bi vas spodbujamo, da visoko gredo pogled na njih. Tam je sestavni JavaScript in sestavni del CSS. Vas prosimo, da jih uporabljajo kot boste. Mi ne bo šel preveč v njih ker menimo dokumentacijo je res dobro opravljeno. In ja. Ali imate kakršna koli vprašanja o tem? 

MIKE RIZZO: Tako kot so res hitro strani, oblikovanje te spletne strani, ki smo se hitro pripravili za Ta predstavitev je dejansko opravi s pomočjo Bootstrapa. Kot lahko vidite, ko smo kliknite na njih različnimi zavihki, nismo nikoli dejansko zapusti to trenutno stran index.html. Torej, kaj imamo, je različna divs v tem index.html. In potem, ko smo kliknite drugačni kartici, to je samo spreminjanje Katera je prikazovanje. 

Torej, o tem jih postavi, spreminja HTML strani, tako da Trenutna zavihek je označena kot aktivna tako se zdi drugače in izgled res lepo. 

TOMAS Reimers: Tako, da je bilo vse narejeno ne da bi mi pisanje skoraj vsako CSS. Vidimo tudi glavo na vrhu, katere barve so z nami. Ampak dejansko ga je dala na nazaj na vrh strani in izdelavo se pomaknite bil Bootstrap. In potem še za drugo knjižnico - to ni eden smo se pogovarjali o ampak ena vam lahko Google, če želite. To se imenuje prettify.js. In bo skladnje označite kodo za vas, ki uporabljajo tako CSS in JavaScript. 

Zadnja stvar, ki jo želim govoriti o preden vas izpustijo ven v svet pogledati v knjižnicah, da ugotovimo, kako jih uporabljati in, upajmo, preberite dokumentacijo in najti tisto, kar Potreba je, kako najti knjižnice. Torej, prvi je, da smo pravkar gre za potiskanje Google. Pojdi Google. 

To je dobesedno tisto, kar počnemo, ko smo morate storiti, je, da smo nekaj, kar Google. Ali obstaja JavaScript knjižnico, ki mi omogoča, da manipulira čas koristen način? Torej, če vem, da nekateri uporabniku ustvarjanje račun tukaj, in to trenutni čas, kako je mogoče izračunati Razlika s tem, ne da bi izračuna sam? Torej, to je pravzaprav običajna stvar, JavaScript čas knjižnice. In tukaj smo Moment.js-- Najbolj priljubljen. 

Če bomo morali knjižnico manipulirati nekaj podobnega barve, da bi lahko ustvarjajo kup naključnih barv - po možnosti, da se ustvari slog ali kaj podobnega - smo lahko Google je nekaj podobnega JavaScript barva knjižnico. In prepričan sem, da bo pop up z tisoč in ena izmed njih. Vabljeni, da se glasi skozi njih. 

Torej, večina stvari - ko ste jih našli - se bo gostovala v eni od strani, ki je koda gostitelj. Oni so nekaj pogosti. Najbolj priljubljen, ki ga sedaj je github.com. In če greš na GitHub da je dejansko kjer je bil normalizirati gosti. Torej, če želite, da se vrnete na tem. Jim pokazati, da je. 

MIKE RIZZO: In to je pravzaprav to, da to je gostil tudi, če ste opazili. 

TOMAS Reimers: Ja. Torej, če greš čez normalizirati in pojdite na GitHub. Je bilo to? 

MIKE RIZZO: Tista mačka stvar je simbol GitHub. 

TOMAS Reimers: Oh. Torej GitHub uporablja metodo, imenovano Git za shranjevanje kode. Ali ne veste, kaj je to, ali vas je strah, da je v redu. Vam ni treba vedeti, kaj je Git ker GitHub ima gumb Prenos V spodnjem desnem kotu. 

Druga uporabna stvar vedeti O GitHub je večina izdelkov bodo imeli preberi me. In če nimajo spletne strani, preberi me bo govoril o tem, kako ga namestite, kako ga uporabljate, kakšna je ne, et cetera, et cetera, et cetera. Kaj smo v bistvu že vam sprehod skozi. 

MIKE RIZZO: Internet je odpoved. 

TOMAS Reimers: To je v redu. Zadnji dve stvari, ki smo želeli govoriti o - smo se pogovarjali o Git - je težav. In to ni tako pomembno za Končni produkt saj ko odideš 50. In ko naletite izdelkov izvajanje knjižnice ali izvajanje svoj projekt, boste da imajo vprašanja ali ste gre iskati vprašanja. 

Again, je Google. To je dobesedno tisto, kar počnemo. To se dogaja, da zveni neumno. Ampak dobesedno, smo ga Google. In še ena od prvih stvari boste ponavadi vodijo v je stackoverflow.com, ki je čudovito vprašanje in odgovor vid. 

Lepo je tako zato, ker lahko post vprašanja in iskati odgovori, ampak tudi zato, ker ima že veliko pre-poseljena vsebine tam. Torej ponavadi, ko ste Google programski Vprašanje v prvi par zadetkov, ki ste jih morda že teče vanj v tvoj problem sprejemnikov. 

In potem, zadnja stvar, ki res kratek je JSFIDDLE, ki je - Danes so z nami počel veliko dela z JavaScript HTML CSS. JSFIDDLE je spletna aplikacija, ki v bistvu vam omogoča, da vaše HTML, YOUR JavaScript levo spodaj, in vaš CSS zgoraj desno. In potem lahko ustvarite hitro postanejo ga in videli, kako je povezana. To je zelo koristno, ko ljudje poskušajo opraviti preizkus koncepta, kot so to je, kako bi jo narediti spustnega menija. Morda hitro Odkriti ali karkoli. 

MIKE RIZZO: Torej, pojdimo naprej in kliknite na to. Quick note - ker preden smo bili delaš na klik. Izkazalo se je, JCorey Koreja ima tudi vgrajeno na klik obravnavo dogodkov, ki jih uporablja samo zato, ker je si dogaja, da želijo narediti veliko stvari če želite, da kliknete nekaj. 

Prav tako ima tudi lebdenje. Ampak da bi dobili celoten obseg tiste, pogled na jQuery dokumentacijo in jo naredil. Storil sem nekaj neumnega tukaj. 

TOMAS Reimers: Torej imam res hitro Program prav tukaj, ki pravi, gumb na klik. Potem imamo za zanko. Za i manj kot 404. To je le, da bo pop up ti opozorilnih sporočil. 

MIKE RIZZO: In kaj je bilo Koda 404 je stal v HTML? Ali kdo spomnite? Ni bilo mogoče najti, ali ne. Chrome dodal tudi to urejeno stvar, kjer si lahko - 

TOMAS Reimers: Ker ljudje kot Mike začel delaš to veliko in siten uporabniki, ki omogočajo da vidiš info. 

MIKE RIZZO: Ja. 

TOMAS Reimers: Ali imamo vsa vprašanja o tem, o JavaScriptu knjižnice, poiskati knjižnice ali kaj razvoj spletnih videz tako kot v resničnem svetu? Mi smo teče proti času. Tako da nisem prepričan, da gremo imeti čas za izvedbo razen če je to res hitro. Smo dobri? 

MIKE RIZZO: Karkoli vi bi radi videti res hitro, čez dva minut ali manj? 

TOMAS Reimers: Karkoli lahko pojasni? Kako pisati v - 

PUBLIKA: [neslišno]? 

MIKE RIZZO: Ja, tako that - 

TOMAS Reimers: Lahko samo zadeti Control-U na spletni strani. 

MIKE RIZZO: Oh, nisem vedel, da je. 

TOMAS Reimers: Mislim, da ja. Control-U. Ja. 

MIKE RIZZO: Oh, tako da je koda za spletno stran. Ampak, če si dejansko želijo, da prenesete našo datoteke in vse, kar se je gostila na github.com 

TOMAS Reimers: slash moje ime - Tomas Reimers - poševnica CS50 vezaj seminar. 

MIKE RIZZO: In lahko našli vse, kar obstaja. 

TOMAS Reimers: To je tisto, kar GitHub Izgleda, mimogrede. Torej še enkrat, ko vidite odprte kode Projekt, običajno, bodo lahko branje mi je, da si lahko preberete. In če greš nazaj, boste opazili, da imate download zip, ki bo omogočajo prenos vira Koda za vključitev proizvod v svojem stvar. 

MIKE RIZZO: Ja, in če bomo samo kliknite na index.html res hitro - 

TOMAS Reimers: Videli boste tukaj Izvorna koda za našo spletno stran. 

MIKE RIZZO: Prav, sem pozabil pritisniti desno prej z veliko mizo je vključeni, vendar pa je tudi tabela od chmods, da smo vključeni Samo za vaše jasnosti. Ampak, če se pomaknete vse tja do dno, nismo dejansko narediti zelo veliko z JavaScript stvari sploh s tem. To je izključno iz vsega ostalo, kar smo imeli. 

Torej, hvala fantje za prihod in poslušanje. Upamo, da je to zelo koristno. Če imate kakršnokoli JavaScript povezanega vprašanja ali pa samo želim govoriti o kaj je všeč, kar druge kul stvari lahko to storite z JavaScript, bi radi govoriti s tabo. 

TOMAS Reimers: Če imate vprašanje o vašem projektu, ali če je to mogoče pomembno, bomo verjetno ostal Malo po tem. Ampak razen, da imajo dober vikend. 

MIKE RIZZO: Ja, uživajte. Se vidimo. 

TOMAS Reimers: Se vidimo.