Tip:
Highlight text to annotate it
X
>> 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 *** 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 *** 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 ***, 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.