Tip:
Highlight text to annotate it
X
>> TOMAS Reimers: Hæ, allir.
Tomas Reimers Ég heiti.
>> MIKE Rizzo: Og ég er Mike Rizzo.
>> TOMAS Reimers: Við erum tveir CS50s TS.
Og í dag erum við leiðandi á námskeið um JavaScript og CSS fyrir apps vefnum.
Ef þú vilt að fylgja eftir, að tengill er þarna.
Og þú vilt setja það upp á tölvunni í stutta stund?
>> Það er tengill.
Það er lítill staður, sem hefur tengla á allar auðlindir sem við ætlum að vera
benda þér í dag og einnig hefur a einhver fjöldi af gagnlegar upplýsingar skrifaður af okkur að
lesa meira í dýpt þegar þú ferð til baka, og þú ert að reyna að muna hvað
nákvæmlega gerði við segjum, hvað varstu að tala um, et cetera.
>> MIKE Rizzo: Allt í lagi.
Svo skulum byrja.
>> TOMAS Reimers: Svo þú vilt byrja?
OK.
>> MIKE Rizzo: Já.
Þannig að við vildum fyrst til að byrja með breið Yfirlit um internetið og
skrá tegundir þegar hanna vefsíður.
Þó að þetta kynning við viljum að fá inn í JavaScript mikið mikið
síðar, vildum við að byrja burt með bara, eins konar, eins og auga að skoða fugla
af hvað vefsíða er og hvernig að hugsa um að hanna
website fyrir the byrjun.
>> Svo þú krakkar, á þessum tímapunkti - með það vera föstudagskvöld - ætti að hafa
lögð CS50 fjármál vandamál setur.
Vonandi, það var gott bragð því hvaða vefur forritun getur verið.
En hér viljum við, eins konar, gefa þú annað bragð, eins og heilbrigður.
>> TOMAS Reimers: Svo bara til ágrip hvað gerist, þegar þú slærð inn vefslóð þína til
vefur Vafrinn þinn, að slóðin fær leit upp í tölvunni.
Og tölvan er tengd til annar tölva,
sem hýsir þessi vefsvæði.
OK, þannig að þegar þú ferð á google.com, þú ert tengdur við einn af Google
tölvur, sem hefur skrár fyrir google.com.
>> Það biður þá fyrir tiltekið skrá.
Þannig að ef þú ferð til -
Ég veit ekki -
example.com / index.html eða / test.html, þú ert að fara að biðja um
þessi tiltekna skrá.
Og miðlara vefur er að fara að koma aftur það til þín.
>> Þá, þegar þú ferð í gegnum þessi skrá -
Þegar þú ert tölva gets að skrá - það er að fara að byrja
til að byggja upp vefsíðu.
Svo nú hefur það HTML skjalið sem er tegund af eins og
uppbyggingu vefsíðu.
HTML skrá gæti einnig tilvísun CSS skrár, sem skilgreina
stíl af the vefur blaðsíða.
>> JavaScript skrár, sem skilgreinir samskipti við the vefur blaðsíða.
Myndum, sem eru bara myndir.
Og hugsanlega tengja við aðrar HTML skrár, sem þú getur þá heimsókn.
>> MIKE Rizzo: OK, frábært.
Svo þið hafið allt, ef til vill, vandlega sett upp staðbundna vefþjóninum
á raunverulegur vél.
Og það bara, svona, er á staðnum ríki sem tölvan þín hýsir aðeins
fyrir þig á eigin IP tölu þinni.
>> Innan þess, þá er hægt að bæta við við henni þinn eigin vefsíðum.
Ég meina, í CS50 Fjármál, ættir þú að hafa bætt við nokkrum HTML síður, sem eru,
konar, vafinn í PHP umbúðir.
En að lokum, hvað PHP síðurnar þínar voru outputting var HTML.
>> En hugsa aftur til upphafi af PSET, áttum við að setja
heimildir fyrir allt, ekki satt?
Þannig að þetta bara í rauninni lætur okkur vita sem getur lesið, skrifað, og hugsanlega
framkvæma hverja skrá.
Þannig að við erum að fara að gera a fljótur - HM?
>> TOMAS Reimers: Svo við erum að fara að gera a fljótur kynningu.
Svo bara minna ykkur á, þegar þú tengja við tölvuna Google -
sá -
og biðja um skrá, tölvuna fyrst þarf að ganga úr skugga um að þú ert að heimild
til raunverulega sjá þessi skrá eða lesið um að skrá vegna þess að þú getur ekki bara að spyrja
fyrir allir skrá á þessi tölva, ekki satt?
Það myndi vera öryggi hættu.
>> Svo skrár um þau kerfi sem við notum, eins og þetta CS50 tæki, hafa þrjú
almenna fólk sem getur haft heimildir til eitthvað.
Fyrsta er í raun eigandi á nefndri skrá.
The second er hópur sem skráin tilheyrir.
Við ætlum ekki að einblína of mikið á því.
Og síðasti hlutur er, eins konar, eins og heimurinn eða eins og allir aðrir sem er
ekki sérstaklega til að skrá og ekki hafa allir eignarrétt yfir því.
>> Þannig að ef við höfum eiganda, hóp, og þá heiminum.
Og þá, fyrir hvert þessara hópa, þá getur haft einn af þremur kostum,
OK, eða margfeldi af þeim.
Þú getur hafa lesið heimildir.
Hægt er að hafa heimildir.
Og þú getur haft framkvæma heimildir.
>> Svo í skilmálar af raunverulegu skrá tegund, lesið leyfi er eins raun að lesa
innihald af the skrá.
A réttur leyfis er skrifa við nefndan skrá.
An framkvæma leyfi er í gangi á skrá eins og þú gerir þegar þú keyrir einn af
CS50 verkefnum.
>> Svo þegar við erum að hugsa um skrár eins og þegar við þurfum að lesa HTML
skrá, sem þarf að vera heim læsileg, ekki satt?
Væntanlega einnig vill eigandi að vera fær um að breyta þeirri skrá.
Þannig að eigandi er að fara að þurfa lesa og skrifa leyfi.
Þeir gera ekki raunverulega þörf framkvæma.
>> Hóp, erum við að fara að meðhöndla sama og heiminum núna.
Svo þeir þurfa lesa heimildir.
En þeir þurfa ekki að skrifa eða framkvæma heimildir.
Og nú, ef við hugsum til baka til fyrrverandi PSETs, hvað við átta sig á er þessi góður
af líta út eins og tvöfaldur, ekki satt?
1 stendur fyrir já.
0 fyrir nei.
Og við getum í raun og veru þýða þetta til tvöfaldur.
>> Svo 110 í tvöfaldur væri 6..
100 yrði 4.
Sama með heiminum.
Svo talan sem þú vildi fá fyrir heimildir fyrir þessu væri 644.
>> MIKE Rizzo: Og ef þú hugsa til baka til þegar þú chmoded eitthvað, tel ég
þeir gáfu í vanda stilla dæmi um hvar þú gætir gert
eitthvað eins og chmod 644 og þá skrá nafn.
The 644 þá getur þú nú séð beint þar sem kemur frá.
Svo vonandi gerir það að svolítið skýrari.
>> Og þá fyrir skýrleika sem þú strákur -
ó já, hér er þetta aftur.
Svo 600 þá myndi bara vera dæmi við gáfum upp hér þar sem eigandi hefur
lesa og heimildir á meðan hópur og heimurinn höfum engar heimildir
til að opna skrána.
>> TOMAS Reimers: Og þá höfum við a fljótur lista af algengum leyfi.
Svo framkvæmdarstjóra, þú vilt að í raun chmod 711.
Fljótur hliðar - fyrir möppu til að hafa Executable leyfi þýðir að vera fær um
til að opna möppu.
Myndir, CSS, JavaScript, HTML þörfum 644 vegna þess, í grundvallaratriðum, the Veröld
þarf að lesa heimildir.
>> Og PHP, sem þið hafið séð þó að við munum ekki vera að tala um það
stranglega er yfirleitt chmoded með leyfi 600 því það er rekið með
heimildir eiganda.
Að minnsta kosti á tækinu.
>> MIKE Rizzo: Svo ef þú ert ekki sérstaklega tilgreina hvaða tegund af skrá
þú vilt í raun að setja upp þessa kynningu -
Við áttum í vandræðum með þetta vegna þess að allt var ekki chmoded rétt -
þú ert að fara að fá, eins konar, å bannað villa þessi the website
er ekki í raun hafa leyfi til aðgang hvað skrá
þú vilt það til að fá aðgang.
Og auðvitað, það geta vera fastur - eins og í Heimadæmi - með því að breyta
heimildir á viðeigandi hátt.
>> TOMAS Reimers: Og síðasta athugasemd fyrir fljótt staðbundinni þróun er - við
fært þetta upp, en við vildum bara að koma með það upp aftur -
ef þú biður fyrir miðlara - svo heimamaður gestgjafi, til dæmis, com eða hvað. -
og þú tilgreinir ekki ákveðna skrá, skrá sem tölvan þín er að fara
að biðja um er kallað index.html.
Eða ef það er ekki til, index.php.
>> Cool.
Svo er það bara ágrip af öllu, vonandi, að við höfum fjallað í
kafla, og fyrirlestur, og svo langt í CS50.
Og nú erum við að fara að byrja að tala um sérstaklega bókasöfnum.
JavaScript og CSS bókasöfnum fyrir apps vefnum.
>> Svo einn fljótur ástæðan að við höfum bókasöfn er forritun -
there 'a einhver fjöldi af vandamál í forritun, sem halda pabbi upp
aftur, og aftur, og aftur.
Þú gætir tekið eftir því að mikið af vefsíðum þarf getu til að hafa dropa niður
valmyndir, til dæmis, eða þörf getu að hafa mjög staðall hnappinn
stíl, sem má ekki vera auðveldasta hlutur.
Nú þegar þú byrjar að fá inn í HTML, þú átta sig á að hnappar getur raunverulega
líta mjög ljót ef þú gera ekki neitt.
>> Svo mikið af fólki hefur skrifað kallað bókasöfn.
Og í þessu samhengi, þá eru þeir einnig kallað ramma.
Við erum að fara að nota tveir jöfnum höndum.
Og hvað þeir eru er að þeir eru í grundvallaratriðum premade stykki af kóða -
annaðhvort CSS eða JavaScript -
að taka burt a einhver fjöldi af the Team þú hafa í erfðaskrá.
>> Svo þeir fyrirfram skilgreina fullt af bekkjum eða pre-define fullt af störfum fyrir
Ræða Javascript er, sem þú getur hringt síðar.
Og þá getur þú, svona, fá aðgang að þessum kóða án
að þurfa að gera neitt.
Dæmi af safninu var CS50.H. Það var bókasafn gáfum þér aftur
í viku einn, sem leyfa þér að gera hlutum eins og þessi GetInt og GetString
án þess að þurfa að skrifa hvaða kóða sjálfur.
>> MIKE Rizzo: Allt í lagi.
Svo hér, alveg eins og við þurftum að fela í okkar c skrá mismunandi
bókasöfn, einnig ættum við að fela í HTML okkar skrá mismunandi bókasöfnum.
Fyrir dæmi, ef við vildum að fela sérstakt JavaScript bókasafn hér,
kannski, eina sem við höfum skrifað okkur eins og það er á staðnum farfuglaheimili
kallast script.js, við bara nota þessa táknun.
>> Þannig að við höfum handrit gerð jafn JavaScript uppspretta Jafnt
JavaScript.js.
Og ef þú heldur aftur til CS50 þinni Fjármál Heimadæmi, ef þú horfði á
header.php í skjalasniðsmöppunni, þú ættir að hafa séð
sumar af þessum innifalinn.
Þannig að þetta fyrsta - forskriftir -
er meðal JavaScript bókasafn.
Þ.mt CSS bókasafn er svolítið öðruvísi.
>> Hér, í stað þess handriti tag þú þarft á tengilinn merkinu.
Og þá, textinn CSS tegund er svolítið öðruvísi.
Þú þarft ekki alltaf að fela í sér ein stílblað.
En ég held að það sé almennt gott starf.
>> Og þá að lokum, href, sem þú sennilega sá í ATAGs þínum til að tengja
í mismunandi tengla bara tilgreinir hlekkur af hvar á að finna það.
Fyrir dæmi, ef við vildum að tengja mismunandi bókasafn - segjum bara -
sem bjó á styles.css.
Og við vildum að tengja það í því er hýst á vefnum, myndi við afritað það.
Og þá líma það í hvað við höfum hérna í staðinn.
>> TOMAS Reimers: OK, vonandi þú krakkar eru nú þegar kunnugt
hvernig á að tengja CSS.
Þú þurfti að gera það á síðasta brúnn þitt sett.
JavaScript, sum ykkar kannski hafa einhverja reynslu af.
Sumir af þú mega ekki.
>> Svo nú, vita að JavaScript skrá er mjög mikill eins og a CSS-skrá í
þeim skilningi að þú getur tengt við það eða að þú getur falið það innra með sér.
Og það gerir þér kleift að handriti hluti.
Og við erum að fara að ganga í gegnum lítill hluti af JavaScript síðar.
>> Svo nota bókasafn -
þegar þú hefur með það, það er eins og einfalt og bókstaflega að hringja í
aðgerðum eða bæta við flokki nöfn á henni.
Það síðasta sem við viljum tala um hvað varðar bókasafns -
og þetta er meira tæknilegs huga -
er opinn uppspretta leyfisveitandi.
Svo þegar þú finnur þessar raunverulegt bókasöfnum, þú gætir verið að hugsa um
spurningar eins og það er í lagi að ég er bara nota kóða einhvers annars, sérstaklega
því það er eitthvað sem við erum mjög mikið sagt þér að ekki gera í þessu námskeiði.
>> Svo er að ræða opinn uppspretta leyfisveitandi, mikið af forriturum -
þegar þeir hef skrifað bókasafn, sem þeir hugsa gæti verið
gagnlegt að öðru fólki -
mun birta það á vefnum og gefa það leyfi.
Og leyfi grundvallaratriðum segir að ég er hér með veita leyfi til annarra
fólk til að nota þetta stykki af hugbúnaður með eftirfarandi konar
ákvæðum.
>> Við látum fylgja með tengil á góður staður til að hjálpa þér að skilja leyfin
ef þú keyrir inn í þá.
Common Skyldur eru hlutir eins og þú ert velkominn til að nota bókasafnið mitt svo
lengi sem þú gefur mér kredit.
Þú ert velkominn til að nota bókasafnið mitt svo lengi sem þegar það brýtur
þú ekki ásaka mig.
Þú ert velkominn til að nota bókasafnið mitt svo lengi eins og þú notar það ekki til að græða peninga
fyrir sjálfan þig.
Þetta eru tegundir af algeng ákvæðum.
>> Af þessum CS50 lokaverkefni, þeir ætti ekki að vera frábær viðeigandi því
verkefni sem þið nota eru líklega frekar, hálfgerður, þekktur.
En þegar þú ferð í raun út í hið heim og byrja að nota bókasöfn, sem
getur eða getur ekki verið eins vel framkvæmd eins og sumir af the fleiri vinsæll sjálfur sem við erum að
að fara að fara í gegnum.
Það er gott að vera fær um að skilja þessi leyfi og að
skilja hvað þeir meina.
Og fara aftur.
>> MIKE Rizzo: OK.
Svo nú að færa inn dæmum af raunverulegu CSS.
Á þessum tímapunkti svo langt, að þú gætir ekki hafa komið þetta.
En þú gætir hafa komið upp það í daglegu lífi þínu þar sem eitthvað
sem lítur ein leið á einn vafra gæti ekki líta eins
leið í annan vafra.
>> Þetta er kallað vafranum vafra eindrægni.
Æ það er að verða fleiri og meira vandamál, sérstaklega þar sem
vafrar taka fleiri og fleiri frelsi að framkvæma hlutina eins og þeir vilja.
Svo að sigrast á að það raunverulega er mikill bókasafn kallast Normalize.CSS.
>> TOMAS Reimers: Við með á tengilinn.
Á þessum tímapunkti, það er gagnlegt ef þú hefur fartölvuna þína í það
horfa á síðuna.
Og við erum að gefa þér þetta rétt nú einfaldlega vegna þess að CS50 endanlega
Verkefnið er reyndar að fara að biðja þig að framkvæma það
álíka og í gegnum vafra.
>> Svo bara til að halda í bakinu á þínum höfuð, þetta er yndislegt bókasafn
því það verður, svona, staðla hlutina.
Í Firefox, eitthvað kann að sýna eins og einn pixla til vinstri.
Og þá Chrome heimilt að ákveða að í raun hvað þú átt var 10 punktar
til vinstri.
Og þú vilt að staðla þetta.
Samræma verður í raun gert mjög góð starf af því að tryggja að vefsvæði þitt
lítur það sama yfir vafra.
>> MIKE Rizzo: Svo ef við vildum bara smelltu á tengilinn virkilega hratt og sýna
þú hvað það lítur út eins og, þér getur sótt það með því að nota
risastór Niðurhal hnappinn.
Eða ég hvet þig til að lesa meira um það með því að smella á þennan tengil í neðri
hægra horninu.
>> TOMAS Reimers: Og ef þú í raun og veru smelltu Lesa meira þarna -
smelltu á heimild um GitHub -
þú munt í raun að sjá opinn uppspretta leyfi á LICENSE.md rétt þar.
Og þú munt sjá hér er mjög vinsæl MIT leyfi.
Aftur, ef þú lest í gegnum textann, þú munt vera fær til finna það á síðuna
við vísað áður en og á að vera fær um að skilja það án þess að þurfa að lesa
gegnum réttarkerfi hrognamál.
>> MIKE Rizzo: OK, frábært.
Svo er það Samræma.
Okkur langaði að gefa þér sem mjög fljótt.
Ó, þú ert með spurningu?
>> Áhorfendur: Svo þegar þú sækir það, þú bara fylgja kóðann sem þeir hafa
undir Sækja hnappur?
>> TOMAS Reimers: Já, svo þegar þú sækir -
>> MIKE Rizzo: Ó, það er a mikill lið.
Svo spurningin var hvernig við sækja það í raun?
Þannig að ef við smelltu á tengilinn, sjáum við að það birtist í raun upp
á the uppspretta merkjamál.
Svo til að gera þetta, það sem við gátum gera er réttlátur smellur Save As.
Save As og sem ætti koma upp skrá.
Og þá getum við valið að vista það sem normalize.CSS.
Og þá þú vilt verða að tengja það í -
>> TOMAS Reimers: Á sama hátt og þú tengja í og allir aðrir skrá.
Og þegar þú tengja það í, hvað er mikill um Normalize er það mun í raun
annast allur the harður vinna með því að sjálfu sér.
Sem þýðir að þú þarft ekki að bæta við bekkjum.
>> Þú þarft ekki að gera neitt undarlegt.
Það mun eðlilegt horf án þín að gera neitt frekar.
Já, hefur þú að fela það.
Google Chrome er ekki svara.
>> Bara til hliðar fljótur -
Ég tók við hljóp inn í þetta.
The hvíla af þessari kynningu er fara til vera a fljótur yfirlit.
Könnun á bókasöfnum.
>> Í grundvallaratriðum, hvað þeir eru.
Hvað þeir gera.
Hvernig þær eru gagnlegar.
Hvernig þú gætir framkvæma þær.
Ef þú vilt að byrja að horfa á þá, eftirfarandi eftir, og lesa í gegnum
þá myndi ég mjög hvetja það.
>> Að öðrum kosti, þú ert velkominn líka til byrja þá að sækja og meðal
þá í augum bara til að sjá hvað þeir líta út eða hvað þeir gera ef þú hefur
fartölvuna fyrir framan þig.
Ef ekki, þú ert velkominn að halda hlusta á okkur tala.
Við erum að fara að halda að tala.
Og við höfum tíma í lokin, vonandi við munum raunverulega fá inn sýnir þér
hvað sumir af þessum bókasöfnum líta út.
>> MIKE Rizzo: Cool.
Allt í lagi, svo nú skulum við tala um Font Awesome.
>> TOMAS Reimers: svo Font Awesome er mjög snyrtilegur staður, sérstaklega fyrir þá
okkar sem eru minna listrænt hæfileikaríkur.
Hunsa nafn Font Awesome, það gefur þú fullt af táknum, sem eru
mjög gagnlegt.
Svo mikið af sinnum þú munt starfrækja táknið sem þú vilt eins og a ágætur x svo
að þú getur lokað eitthvað.
>> Eða þú gætir viljað einhvers konar Edit hnappinn með blýant teikningu eins
allir aðrir hafa.
Og það er þegar þú lærir að teikna þær tákn geta verið
mjög leiðinlegur og erfitt.
Font Awesome - ef þú í raun og veru fara á staðinn -
gefur þér mikið af táknum í táknin efst.
Já, bara efst.
Það mun gefa þér mikið af táknum fyrir frjáls.
>> Svo hér þú sérð að við höfum hlutina eins og stjörnu, bars, a eldingar Boltinn, er
dagbók, padda, bók, et cetera.
Þetta getur verið mjög gagnlegt.
Leiðin sem þú fela þetta er að þú látir bókstaflega CSS skrá.
Og eftir að þú hefur ma CSS skrá, hvað þú getur gert er að búa til
tag kallast I. Það satands fyrir táknið með bekknum FA
standa fyrir Font ógnvekjandi.
Og þá, hvað sem þú vilt.
>> Svo ef ég vildi táknmynd af þessu plús veldi hérna, myndi ég gefa
það bekknum FA.
Og þá FA bandstrik plús bandstrik ferningur.
>> MIKE Rizzo: Cool, OK.
>> TOMAS Reimers: Og þá er síðasta CSS bókasafn við viljum komast í gegnum við erum
reyna að halda því í lágmarki á CSS bókasöfn vegna þess að við gerum grein fyrir því
yfirskrift þessa kynningu er JavaScript Libraries.
En við héldum að við gætum eins vel kynna þig fyrir öðrum bókasöfnum
á meðan við vorum að tala um bókasöfn.
>> Það er Google Web Skírnarfontur.
Og hvað Google Web Skírnarfontur leyfir þér að gera er að bæta letur á vefsvæðið þitt,
sem er mjög einföld leið til að gera það falleg og aðgreina sett þitt
frá öllum öðrum er ef það hefur ágætur letur eða ef það hefur a ágætur
safn af letri.
Google Web Skírnarfontur er gott ólíkt öðrum bókasöfn í þeim skilningi að það er
raunverulega leiðsögn uppsetningu.
>> Þannig að ef þú fylgir á tengilinn, það er google.com / letur, tel ég.
Ef þú fylgir því, þú getur valið leturgerð.
Þú getur valið á vinstri frá þykkt, sniði, et cetera.
Og þá, þegar þú hefur valið einn, þú getur smellt fljótur notkun.
Þarna.
Neðst til hægri af the kassi.
>> Og þá með því að fletta niður.
Fyrst af öllu, þeir gefa þér CSS sem þú þarft að í raun og veru að tengja við það.
Það er rétt þarna.
Þú getur bara afritað og límt það inn
Og ágætur hlutur óður í this einn er þú ert ekki í raun einu sinni að
sækja skrá.
>> Hvað er það er að fara að gera er að það er að fara að tengja við útgáfu Google á það.
Svo aftur að hvað þýðir það.
Það þýðir þegar notandi niðurhal skrá þína -
niðurhal HTML síðuna þína - HTML síða er að fara að vísa þessa skrá.
>> Svo þá, tölvan þín er að fara að sjá, ó, það er hýst á google.com frekar
en á theirsite.com.
Leyfðu mér að fara að spyrja Google að þessi skrá.
Og þá er það að fara að fela það næstum eins og hann væri
hluti af þinn eiga staður.
>> TOMAS Reimers: Cool.
Og þegar þú fela það, þá að fela það í CSS þinn, gefur það þér
raunverulegt línu.
Svo þú stilla eign letur fjölskyldu jafnt nafni letur.
>> MIKE Rizzo: OK.
Svo við búin bara með CSS.
Og sumir af þú gætir verið að hugsa, vel, við fengum CSS á CS50 fjármálaráðherra.
En CSS bókasafn var ræsi.
Við eru í raun ræsidisksneið smá síðar undir JavaScript vegna þess að með
ræsi CSS bókasafn koma líka með fullt af JavaScript sem
Ræsi eða Twitter - sem gerði Bootstrap -
notar til að stjórna öllum CSS þeirra.
>> TOMAS Reimers: Hefur einhver hafa allir spurningar svo langt um CSS almennt?
Við erum góðar?
Ógnvekjandi.
>> MIKE Rizzo: Awesome.
>> TOMAS Reimers: Svo áhrifamikill á JavaScript.
>> MIKE Rizzo: Þannig að við vildum að tala um jQuery til að byrja með.
Hefur einhver heyrt af jQuery áður eða notað það?
Já, núna?
Þannig að ef þú vinnur bara með frumbyggjum JavaScript, munt þú finna sjálfur
slá mikið af löngum selectors mikið.
Svo hvað jQuery gerir er að það veitir ágætur umbúðir fyrir JavaScript
tungumál sem leyfir þér að velja auðveldlega og vinna mismunandi þætti
í skjalinu mótmæla líkan af vefsíðu eða DOM, sem ég held að
þú krakkar hafa heyrt um í fyrirlestur á þessum tímapunkti.
>> TOMAS Reimers: Ef þú hefur ekki heyrt um það eða ef þú hefur ekki horft á fyrirlestur
enn, Document Object Model er grundvallaratriðum um hvernig hlutirnir eiga fulltrúa.
Svo HTML konar lítur út eins og tré þegar þú draga í raun það út.
Þú hefur HTML frumefni ofan.
Þú hefur höfuð og líkama.
>> Og þá, í því að þú hafa allt annað.
Það er nefnt DOM -
Document Object Model.
Svo líkan sem sýnir hluti í skjalið er auðveld leið til að hugsa
um það.
Og einn af the mikill hlutur óður jQuery er það gerir í raun að fara yfir
sem og notfæra þætti innan sem ótrúlega einfalt.
>> Svo einfalt, í raun, að meirihluti Javascript bókasöfnum eða ef ekki
Meirihluti, Grand meirihluti sjálfur þú munt sjá í raun þurfa jQuery svo
að þeir geti keyrt sig einfaldlega því ef þú did ekki hafa jQuery, þér
myndi sóa a einhver fjöldi af tími að reyna að reikna út hvernig á að velja ákveðin
þætti og hvernig á að gera aðra hluti.
Og annar mikill hlutur óður jQuery er að það er kross vafranum samhæft.
>> Svo man aftur þegar við sagt að ekki allir vafrar framkvæma
hlutir á sama hátt?
Þetta gildir jafnvel í JavaScript.
Og einn af the mikill hlutur óður jQuery er að það mun greina
Vafrinn og greina viðeigandi aðferð.
>> Þannig að ef þú þarft að velja stak, Internet Explorer gæti sagt að þú ert
að gera með þessum hætti.
Eldur gæti sagt rétt leið er þetta leið.
jQuery er ekki sama.
Þegar þú segir jQuery að velja þáttur það mun reikna út hvernig það er
ætlast til að gera það innan vafra á notandi er nú í, og þá gera
það þannig.
>> MIKE Rizzo: Svo við skulum ekki tala um the notkun af jQuery svolítið.
Rétt eins og PHP, jQuery hefur ákveðna fondness fyrir dollaramerki.
Svo þú munt komast að því að allir jQuery -
Jæja, ekki allir.
Þú getur stundum skipta dollara undirrita með orðinu jQuery.
En almennt, bara vegna þess að það er styttri, þegar þú sérð jQuery vera
notað það verður með dollaramerki.
>> Svo hér erum við bara að sýna upphaf Selector fyrir stak í DOM.
Hér höfum við dollaramerki fylgt með opnum sviga og síðan vitna.
Og innan gæsalappa fara selectors okkar fyrir mismunandi þætti.
Rétt eins og í CSS, við þurftum selectors til að vera fær um að stíla mismunandi þætti
innan síðu.
Þeir mismunandi selectors þýða nákvæmlega í jQuery og JavaScript,
að mestu leyti.
>> Svo hér erum við með punktur foo.
Þannig að ef þú manst frá fyrirlestri, punktur þýðir bara á bekknum.
Þannig að við erum að velja stak með bekknum foo.
Þannig að ef ég fer á undan og opna okkar JavaScript vélinni hér mjög fljótt
bara sýna fram á það, ef ég gerð bara dollaramerki, sjáum við að það er einhver
fall sem kemur upp.
Og það er bara skilgreind með jQuery.
>> TOMAS Reimers: Fyrir þau ykkar ókunnur, the hugga er a tól
innan Króm, sem leyfir þér að, grundvallaratriðum, hlaupa JavaScript til
núverandi síðu.
Þetta þú munt finna ótrúlega gagnlegt þegar þú ert í raun kembiforrit og þú
þarf að vera eins og, hvað er núverandi gildi af einhverjum alþjóðlegum breytu eða hvað
er eitthvað annað?
Það er góður af eins og gdb að undanskildum að þú getur raunverulega
vinna hluti á síðu með það á mun auðveldari hátt.
Og einnig það virkar ekki, í grundvallaratriðum, athuga í með þér áður en það gerist neitt.
>> Svo þar, GDB gæti verið eins og, þú ert viss um að þú viljir keyra næsta skref?
Vélinni er í alvöru.
Svo sem vefsíðan er flutningur og gera hvað sem það er að gera,
ráðsins einnig í gangi við hliðina á henni.
Og þú getur sett impute kóðann inn að hugga, sem mun
að keyra á síðunni.
>> MIKE Rizzo: Svo til að slá vélinni, Ég held ég ætti stuttlega
nefna hvernig á að gera það.
Á síðustu vandamálum sem þú kannt að hafa Notað Króm skoða þáttur
aðgerðir eða skoða síðu uppspretta -
og þeir eru aðgengilegar með því rétt smella á síðuna eða ákveðna
frumefni og gera heldur skoða þáttur eða skoða síðu uppspretta.
Við getum einnig aðgang JavaScript hugga beint af
velja skoða frumefni.
Svo þá þú högg bara hugga á lengst til hægri.
>> Einnig gætir þú líka farið til efra hægra horninu,
sem er skorið burt á þessum skjá þar það hefur þrjár láréttar bars.
Og þú ferð niður til verkfæri og þá JavaScript hugga
hér þar getur séð -
að minnsta kosti á Windows -
flýtileið er Control Shift J. Svo ef við vildum að velja stak
innan þessa síðu, bara eins og ég sýndi áður, eigum við dollaramerki opna parens
og þá vitna.
>> Áhugavert hlutur er, almennt, einstæðir og tvöfaldar gæsalappir eru
skiptanleg.
Svo mikið af fólki að nota bara einn vitna vegna þess að þeir eru hraðari til að slá
en tvöföldum gæsalöppum vegna þess að þú ert ekki þurfa að halda niðri Shift.
Svo ég verð bara að gera það núna.
>> Svo vil ég að velja eitthvað með bekknum.
Container, bara vegna þess að ég veit að er eitthvað sem er á okkar
vefsíða núna.
Og ég lenti inn.
Og við getum séð að það valið það.
Svo það sýnir sig að það aftur til að mótmæla.
Svo það er a undirstöðu val.
Ef við vildum að raunverulega vinna það, þú þyrftir að hringja eitthvað
á þeim val, sem Við munum fá inn síðar.
>> TOMAS Reimers: Svo bara að líta á sem meira dýpi, þetta er ekkert öðruvísi
en virka símtöl við gert í C. The nafn af the virka hér er
lítið undarlegt.
Það er dollaramerki.
Það er bara nafn á virka.
Það er ekkert sérstakt við það.
>> Við höfum opna sviga.
Þá höfum við eitt rifrildi okkar, sem í þessu tilfelli verður að vera strengur,
sem er val fyrir það.
Og þá höfum við okkar lokað sviga.
Það er það.
>> Það er ekki það gríðarlega ólík.
Þó það hjartarskinn útlit mjög undarlegt.
Og það getur verið, eins konar, stafur benda fyrir a einhver fjöldi af fólk.
>> MIKE Rizzo: Svo hátt, ef við vildum til að velja stak sem er með kenni,
nú viljum við að velja af ID í stað bekknum.
Það væri svipað hlutur þar sem við bara gera skörp tákn fyrir auðkenni.
Þannig að við erum að velja allt hér þætti sem hafa ID bar.
>> TOMAS Reimers: Og þetta nær.
Að CSS nær.
Rétt eins og í CSS er hægt að velja allar tenglar, sem hafa bekknum foo.
Hér er það sama.
>> Þú gætir gert a.foo, sem myndi velja alla tengla með bekknum foo.
Þú getur gert mikil bar, sem myndi velja þann tengil við ID bar og svo
á og svo framvegis.
Hvaða CSS Selector er gild jQuery val.
>> MIKE Rizzo: Já.
OK, svo nú skulum fara í smá af meðferð sem við getum gert með
okkar jQuery.
Svo hefur jQuery ákveðna tegund af merki þar sem við notum bara
punktur í lokin.
Og þú getur hugsað þetta eins og í C hvernig við höfðum mismunandi structs.
Og að fara inn í þá structs, þú myndir nota punkt til að komast inn í þá.
>> Þetta er, eins konar, svipað hlutur.
Aðeins nú höfum aðgerðir innan þetta Selector að við getum hringt á það.
Svo hér, the mjög fyrstur dæmi þú getur séð er CSS Selector.
Og í rauninni, hvað það þýðir er það gildir Fyrsti þátturinn CSS þetta
hlutur sem þú valdir -
Þessi þáttur sem þú valdir -
með verðmæti þessi.
>> TOMAS Reimers: Svo auðvelt þýðing sem myndi vera ef jQuery, í grundvallaratriðum,
bara tók foo.
Og þá í CSS sagði, Litur rauður og loka.
Það er sama hugmynd.
Hvað það er gert er að það er valið allar Sigur atriði.
Og þá er það beitt.
Konar, eign lit er jafn rauður.
>> MIKE Rizzo: Á sama hátt getum við einnig breytt Raunverulegt innihald hvað er
birtast á HTML á síðunni, sem er mjög kaldur því það þýðir þitt
vefsíður geta nú verið alveg dynamic og þurfa ekki að vera kyrrstæð
því að þú prentir út með PHP í upphafi
síðu sem hlaðinn.
Svo hér, ef við vildum að breyta því Raunveruleg HTML á síðunni, við myndum nú
hringja í HTML virka, sem þá bara sett hvað sem við að skilgreina í
þessi þáttur sem við valið.
Svo hér erum við að velja frumefni með flokki foo og þá segja að það er HTML
það er nú Halló heimur.
>> TOMAS Reimers: Og þegar þú hugsar um hvað eru gagnleg forrit á
þetta, þetta CSS eitt, það fyrsta sem þú getur byrjað að hugsa um er
hvað varðar jafnvel falla niður matseðlum.
Þú gætir byrjað að gera hluti eins og þegar notandi stöðvast yfir efsta hluta
af falla niður, þú vilt gera botnhlutanum sýnileg.
Satt?
>> Svo í CSS, höfum við eiginleika að gera eitthvað sýnilegt.
Hlutir eins og sýna ristli enginn myndi gera það ósýnilega.
Sýna blokk myndi gera það sýnilegt.
Eða jafnvel ef þú vilt fara einfaldari, þér hafa hlutina eins og skyggni jafningjar
sýnilegur og skyggni jafngildir falinn.
>> Og þú getur byrjað að innleiða hlutina eins og falla niður matseðlum rétt
eftir að þú færð gegnum the hugmynd af því hvernig getur þú reikna út hvenær þetta opnar,
sem við munum komast í gegnum mjög snöggt.
En við getum byrjað að skoða forrit af þessu.
Á svipaðan skilningi, ef þú varst að reyna og hrinda í framkvæmd, við skulum segja, við spjallhóp
vél og þú vilt gera smá ræðu kúla koma upp þegar þú hefur
fékk ný skilaboð, þegar þú færð að ný skilaboð, getur þú gera a lítill
ræðu kúla koma upp með því að breyta HTML á síðunni, ekki satt?
Með því að bæta að auka ræðu kúla með auka texta þar.
Já?
>> Áhorfendur: Svo þú myndi embed this innan HTML kóða í tegund af eins og
[Inaudible]?
>> MIKE Rizzo: Hægri.
Já, munum við fá til að í litla bita.
Já, það er svipað að svolítið til PHP.
Ekki alveg sambærilegt.
>> Góð greinarmun að gera er það þetta er í raun að breyta þegar við breyta
á síðunni því það er ekki að fara að vera breyta the raunverulegur skrá sem verið er að
haldið á þjóninum vegna þess að heimurinn ætti ekki að hafa leyfi
að breyta skrám.
Þetta er bara að breyta því sem er á síðunni og hvað er verið að sýna í
vafrinn.
Þannig að ef þú varst að endurhlaða síðunni eftir, segja, að eyða eitthvað sem vér
sjá að við getum gert með því að fjarlægja símtali að hlutur myndi þá birtast aftur.
>> TOMAS Reimers: Svo ein leið til að hugsa um þetta er ef ég er þinn tölva og
Mike er, svona, the framreiðslumaður.
Hvað er að fara að gerast er að ég ætla að spyrja Mike, hey, má ég fá afrit af
Þessi vefsíða?
Og hann mun gefa mér afrit af því.
>> Nei, það er ekki upprunalega hlutur.
Það er bara eftirlíking.
Og þá væri það eins og, ó, það er JavaScript hér.
Greinilega, ég ætti að breyta síðu til að vera svona.
Og ég er að breyta þinn eftirlíking.
>> En það er ekki árangursríkur raunverulegt eintak.
Og ef ég væri að spyrja hann aftur endurhlaða síðunni, -
hey, má ég fá annan hreinn eftirlíking -
hann er að fara að gefa mér annar hreinn eftirlíking.
Og þá ætla ég að gera það sama eins, ó, þetta JS hér sem segir
til að breyta þessu.
Og ég ætla að halda að gera það.
>> MIKE Rizzo: Svo raunverulega kaldur hlutur sem þú getur gert með jQuery er
reyndar bæta við mismunandi gerðir fjör á síðuna þína.
Ég veit ekki hvort þú hefur einhvern tíma séð þar þú ert að reyna að fylla út eyðublað
á netinu og þú fyllir ekki út hlutir rétt.
Svo smá hlutur renna niður efst og segir þér
hefur ekki gert þetta rétt.
Vinsamlegast reyndu aftur.
Og þá, það gæti jafnvel bara renna upp.
>> Skrúfjárn út jQuery hefur innbyggð föll að gera allt sem
hreyfimyndir virkilega, virkilega þægilegur.
Svo er það fyrst hverfa út virka, sem
þú getur hringt á eitthvað.
Og það er leið til að breyta CSS á þessi þáttur í líflegur hátt.
Svo það tekur hvað þátturinn þú kalla það hverfa út á.
Og þá, hægt breytist það er ógagnsæi þar til það fer fullkomlega gagnsæ.
>> TOMAS Reimers: Önnur vinsæl einn er renna niður, sem gerir
eitthvað birtast með því að renna henni niður.
Svo í tilfelli af the falla dúnn matseðill, aftur, þegar við lærðum hvernig á að uppgötva
þegar þetta hefur verið sveima yfir, þú gætir bara sagt þetta botn
hluti renna niður núna.
Og þá, myndi það birtast með því að renna niður.
>> MIKE Rizzo: Og þá, ef þú ert bara einhvers konar hreyfimyndir í huga að
jQuery ekki endilega.
Fyrir dæmi, við skulum segja jQuery er að veita þér með a renna
niður og renna upp.
Jæja, við skulum segja að þú vildir að renna eitthvað frá vinstri eða frá
rétt eins konar eins og CS50 Aðalsíðan er þegar
þú að fara á nýja spjaldið.
Þú myndir þá sennilega verða að framkvæma það sjálfur með því að nota
lifandi virka innan jQuery.
>> Svo álíka, þú lifandi bara.
Og þá, í henni tekur það Orðabók mismunandi gildi
sem þú ert ímyndaður til að fara framhjá.
Svo hér, ef við vildum að hreyfa þáttur foo þannig að breidd þess annaðhvort
stækkar eða samningum til 80 punktar, eftir því hvað það er nú.
Við myndum bara fara að eins og rök í henni.
>> Hreyfa einnig hafa nokkrar aðrar breytur að þú gætir gefa það, til dæmis,
hraða fjör sem þú vilt gefa það.
Og til að gera það, ég myndi bara segja fljótt Google jQuery lifandi.
Og þá koma upp þessari síðu, þú getur sjá það fékk fullt af mismunandi
eiginleika sem þú getur framhjá því.
>> Og ég hvet þig - þegar þú kemur yfir eitthvað sem þér líkar ekki
vita eða bara langar til að læra meira um tiltekna aðferð sem þú getur hringt í
á eitthvað -
bara Google það. jQuery er mjög vel skjalfest.
Og oft sinnum það er mikið af dæmi sem þeir veita þér.
Ef við skruna niður -
leið niður -
að við getum notað, eins og vel.
>> Aftur, þegar verktaki raunverulega fer gegnum vandræði í að skrifa
bókasafn, þeir vilja yfirleitt einhver að nota það.
Svo við hliðina er að fara að vera skjöl.
Og að skjöl geta yfirleitt verið finna á verkefnisins, sem er
hvers vegna við gáfum þér að upprunalegu síðuna í upphafi, það sem tengir þig við
Verkefnasíður svo þú getur sjá þessi gögn.
>> Venjulega, verkefnið síðu í málinu af [inaudible], sagði það þér
nöfn þeirra flokka.
Í tilviki JavaScript, gefur það þú nafn hlutverkum.
Við the vegur, ef við fletta upp á toppinn, a fljótur hlið minnispunktur á störfum er
þegar þú sérð aðgerð framkvæmda svona með harður
sviga í miðju, sem þýðir að þessi eign er valfrjáls.
Bara heyrnartól upp.
Ég hef séð fullt af spurningum um það.
>> Svo hér getum við séð að Hreyfa tekur eignir
sem nauðsynleg rök.
Og allt annað er valfrjáls.
Side athugið -
þú getur hugsað þetta, tegund af, eins og maður síður.
Man síðum eru skjöl fyrir C og fyrir fullt af öðrum hlutum, eins og heilbrigður.
>> MIKE Rizzo: Þannig að við höfum lært hvernig á að breyta mismunandi CSS á síðunni,
lifandi það, og fjarlægja bæta HTML.
En eitt af því sem raunverulega öflugasta Þetta um JavaScript
og sérstaklega jQuery -
hvað það leyfir þér að gera er að bregðast við mismunandi þættir sem gerast.
Til dæmis, hér höfum við atburður dýraþjálfari.
Og það bara þýðir að þegar þetta atburður gerist, séð við hana á
ákveðinn hátt.
>> Svo hér, almenna jQuery atburður stjórnandinn er punktur á.
Og þá, það fyrsta sem þú gafst er það atburður sem það ætti
að hlusta á.
Svo hér, það er smella sem við erum að bíða eftir.
>> TOMAS Reimers: Einnig hefur þú á svifi, sem er mjög vinsæll einn.
Svo aftur að falla mína dúnn matseðill hugmynd.
Þú vildi hafa í efstu einn á svifi.
Og þá gætir þú breytt því.
>> MIKE Rizzo: Hægri.
Og svo, þegar það gerist, bara það keyrir þessa aðgerð sem við gefum það
sem rök og að það tónar halló eða hæ.
>> TOMAS Reimers: Svo er að ræða JavaScript, þetta er staður sem við þurfum að
fjarlægja okkur frá C. Við getum í raun taka virka sem rök.
Og það eru fullt af virkilega flóknar leiðir til að gera þetta.
Við ætlum að kynna einn veg, sem er hægt að skilgreina
virka rétt þar.
>> Svo þegar þú ert að biðja um aðgerð sem viðfang, þú ert í rauninni bara
að fara að skilgreina hlutverk á staðnum.
Og hvernig þú skilgreinir aðgerð JavaScript er þú
bókstaflega segja virka.
Þá venjulega, nafn fallsins.
En við erum aldrei að fara að vísa þessi aðgerð aftur.
Þannig að við láta það nafnlaus.
>> Þá svigans, þá hrokkið axlabönd, og þá kóðann innan það.
Þannig að við skiljum þetta getur verið smá ruglingslegt.
Svo við gefa þér almenna form hvað atburður dýraþjálfari lítur út eins
neðan, sem er á atburðum.
Og þá, númerið þitt inni það.
>> MIKE Rizzo: Eru einhverjar Spurningar um þetta?
Þetta getur verið smá ruglingslegt í fyrsta skipti sem þú sérð það.
>> TOMAS Reimers: Þú vilt í raun og veru að opna skrána og sýna þeim nokkur
jQuery núna?
>> MIKE Rizzo: Já, við skulum gera það.
OK.
>> TOMAS Reimers: Svo nú erum við í tækið.
Og það sem við höfum gert er að við höfum tekið á Liberty Of skapa bæði til index.html
skrá, sem tengir JavaScript skrá.
Og getum við opnað upp -
já.
Jæja, er það tvennt.
>> Fyrsta er hún tengist JavaScript skrá.
Og við munum sjá að upp hér.
Við sjáum að í höfuð hins HTML skjal, sérstaklega.
Svo þú munt sjá það sem við, í grundvallaratriðum, segir SRC,
sem stendur fyrir uppspretta.
Og það er slóðin.
>> Svo hér er hægt að segja að við höfum innifalinn jQuery.
Og við höfum einnig skriftum.
Hin leiðin til að fela JavaScript er að þú getur innihaldið inline handrit
tag eins og við höfum neðst þar sem það segir handrit tegund er textinn JavaScript.
>> Þannig að við erum að segja, hlusta, við erum um að fela handrit.
Og gerð að handritið er JavaScript, sem er tegund af texta.
Mjög einfalt.
>> MIKE Rizzo: Þannig að þetta, eins konar fær, til spurningin um hvernig við fela
JavaScript í skrám okkar því þegar við hafði PHP, við gerum eitthvað eins og this.
Og þá höfum PHP virka okkar - segjum birgðir gera
eitthvað við það -
fer í það.
Hvernig sem, nú höfum við handrit tags að við gefum henni, sem eru í raun
hluti af HTML sig því það er ekki faking að vera HTML skrá eins og það
er í PHP því ef þú ferð í raun í og líta á the uppspretta af the blaðsíða,
Þú munt sjá þetta handrit tags í það með JavaScript tengist
þá í því.
>> Svo, ef við vildum skrifa smá JavaScript -
við skulum bara segja að við vildum að breyta líkama því núna að ég hef ekki
önnur merki sem ég get virkilega breyta auki líkama.
Segjum bara að ég vildi breyta CSS af því.
Þannig að við munum fara á undan og breyta litur það rautt.
>> Svo ég vista skrána.
Við skulum fara aftur til vefsíðu okkar, hressa, og það gerir það sjálfkrafa
vegna þess að það virtist ekki eins og það beið yfirleitt vegna þess að við vorum ekki að hlusta
fyrir atburð eða eitthvað svoleiðis.
>> TOMAS Reimers: Svo ef við förum aftur til að skrá sérstaklega - HTML
skrá - það sem þú ert að fara að sjá er að við höfum -
muna að þetta er hlaðinn, konar, tímaröð.
Þannig að við höfum fyrst höfuðið. það sækir þá tvær skrár.
Þá erum við að fara að líkamanum.
Og við sjáum Halló heimur.
Svo við bakið Halló heimur.
>> Og þá the síðastur hlutur sem við höfum er að við höfum handritið tag.
Svo það rekur handrit tag vegna þess að það er ekki segja það að bíða eftir neinu.
Og það er the undirstöðu leið til að keyra JavaScript.
>> Með því að segja, þú getur sett handritið merkja upp í hausinn bara
til að sýna þennan punkt?
Og hlaupa það.
Við erum að fara að taka eftir því að það ekki að breyta litnum.
Og þetta er eitt af þeim vandamálum sem JavaScript er að hlutir eru sóttar
í tímaröð.
>> Svo á þeim tíma sem þessi númer var að keyra, valið við -
fara til baka -
líkaminn tag.
Líkaminn tag er ekki til enn því JavaScript er í samræmi við HTML.
Svo er vafrari eins velja líkama.
Það er ekkert sem heitir enn.
Þannig að við getum hunsað það.
Og við höldum áfram.
>> Og þá erum við að skilgreina líkama tag.
En sem aldrei fær uppfærð.
Svo þegar þú ert að innleiða handrit tags, ganga úr skugga um að þú setur
eftir líkamanum tag.
Næsta renna.
>> MIKE Rizzo: OK.
Svo við breytt eitthvað.
En það leit ekki út fyrir það brást við okkur á öllum því það bara svona
gerði það um leið og það er hlaðið á síðunni.
Svo nú, í stað þess að gera þetta, af hverju eigum við ekki að bæta við atburði dýraþjálfari.
>> Svo skulum gera eitthvað í líkamann aftur.
Og við skulum segja að við gerum það á -
smelltu.
Við munum bæta við aðgerð.
>> Breyting skulum: Tómas Reimers það er litur rautt aftur.
Hvers vegna ekki?
>> Breyting Já, við skulum: MIKE Rizzo 'lit til rauður aftur.
Allt í lagi.
Svo skulum endurhlaða síðunni.
OK, við sjáum -
eins og vænta, og það er ekki snúa rauður ennþá.
En þá getum við farið á undan og smelltu á það.
>> TOMAS Reimers: Og það er snúa rauður.
>> MIKE Rizzo: Og það er snúa rauður eins og búist.
>> TOMAS Reimers: Og við getum séð hvernig við getum byrjað að byggja einfaldar
samskipti.
Aðrir hlutir sem við gætum vilja til að gera er að, ef við viljum ekki að gera líkamann
Litur rauður, við skulum gera HTML bakgrunnur litur rauður.
Bara svo það sama CSS.
>> Og þegar við að breyta því, þá getum við séð þetta mjög dramatísk áhrif að skipta um
allt síðu.
Svo aftur, ef þú ert að innleiða hlutina, þú getur haft einn þátt
sem er ætlað til að smella á.
Segjum að loka hnappur og heilt annar hluti,
sem er ætlað að bregðast við.
Svo þú myndi fjarlægja glugga þegar það gerist.
>> MIKE Rizzo: OK.
Bara sem dæmi -
þú did ekki fá að sjá þetta fyrr -
Ég verð bara að sýna þér hvað það lítur eins og þegar við fela eitthvað.
Svo ég ætla að fara á undan og gera renna upp.
>> TOMAS Reimers: Viltu að vefja það í gerð málsgrein áður en við gerum það?
>> MIKE Rizzo: OK.
Já, hvers vegna eigum við ekki að gera það bara svo við getum valið það svolítið meira.
>> TOMAS Reimers: Og við skulum gefa það a bekknum.
>> MIKE Rizzo: Já.
OK, þannig að við skulum sjá.
Í stað þess að velja raunverulegt líkama nú, ég ætla bara að velja allt með
flokki halló, sem hér við bara eitt.
Þannig að við ættum ekki að þurfa að áhyggjur af því.
>> Svo ég hressa hana.
Ég fer á undan og smelltu á það.
Og það, eins konar, gerði skrýtið myndasýningu upp hlutur, sem ekki líta að
aðlaðandi.
Almennt gera þeir líta nokkuð ágætur.
Ætli þetta - fyrir suma Ástæðan - gerði það ekki.
Ég verð bara að gera fjara út svo þú getur litið á það líka.
Miklu betur.
>> Og þá, ef ég opna JavaScript hugga aftur og við viljum sjá hvað
það lítur út eins og þegar við hverfa það inn
Nú kalla ég bara hverfa í á það.
Og það dofnar aftur inn
>> Álíka, getum við í raun líka framhjá rök til að hverfa eða hverfa,
sem er, eins konar, the hraði af því.
Þannig að við skulum fara á undan og segja að við viljum það að fara hægt hverfa inn
Svo ég giska á að það virtist samt nokkuð fljótur.
En það var hægar en áður.
>> TOMAS Reimers: Og ef þú vilt finna út meira um þessa hluti, aftur,
bara fara á jQuery skjöl, sem við höfum gefið þér, og lesa
gegnum þessar.
Þeir skjal störfum sínum ótrúlega vel.
>> MIKE Rizzo: OK.
Svo ég giska skulum fara aftur til þessa.
Og við getum talað um síðustu síðu okkar.
Jæja, við getum lokið við ræsingu.
Og þá munum við opna það upp fyrir nokkrum spurningum.
Og ef þið hafið einhverjar hugmyndir sem þú vilt að reyna að kasta upp og sjá
ef við getum innleiða þær með JavaScript fljótt.
>> Svo í raun fljótt um ræsi, sem var sjálfkrafa með í
Síðasta vandamálið þitt sett í CSS möppu og í raun bundin í þinn
header.PHP.
Svo þú gætir hafa bætt námskeið sem eru skilgreind með ræsi í henni.
Og það hefði sjálfkrafa stíll þessir hlutir til samræmis.
>> TOMAS Reimers: Svo ræsidisksneið er mjög töfrandi hlutur þróað af fólki
á Twitter.
Og hvað það átti að gera var -
áður vefsíður voru mjög erfitt að gera útlit ágætur, sérstaklega þegar við vorum
a einhver fjöldi af sameiginlegum hlutum.
Svo mikið af hnöppum á vefur sá sami.
>> A einhver fjöldi af texta sviðum hægt að gera til líta betur út en í staðlaða textanum
sviði sem þú veist líklega frá mjög gamlar vefsíður eða bara illa gert
vefsíður, sem bara líta út eins bókstaflegri kassa texta án hvers konar texta
skuggi eða hverskonar fallegu útlínur.
Svo hvað ræsidisksneið gerði var það sagt, vel, Við höfum mikið sameiginlegt stíl.
Hvers vegna eigum við ekki að gera eitt sameiginlegt mengi CSS og sameiginlegt mengi JavaScript sem
vel, sem hægt er að stíla á það sem er og hvaða hægt að gefa fólki hluti eins dropa
niður matseðlum, sem getur gefið fólki hlutir eins modals.
>> Formlegur er hvað birtist á síðunni þegar það er strangt
eitthvað sem hindrar frekari samspil þar til þú
samskipti við það.
Eitthvað eins og þetta er, þú ert viss þú viljir eyða þessum hlut?
Þú getur í raun ekki gert neitt annað fyrr en þú segir já eða nei.
>> Það tók allt þetta og það pakkað henni saman og segja, hér við fara.
Fólk getur nú notað þetta.
Og þú getur fundið það yfir á getbootstrap.com.
Það var sjálfkrafa innifalinn í Síðasta vandamálið stillt.
Og þú ert meira en velkominn til nota það á lokaverkefni þínu.
Og ef þú vilt að fylgja því tengil til að fá ræsingu.
>> Þú munt sjá hér er Ræsi CSS Síðan.
Þú munt sjá ræsingu.
Og ef þú flettir niður, munt þú sjá hvernig á að sækja það, hvernig á að
setja það upp, et cetera.
>> MIKE Rizzo: Og þú getur líka, Athyglisvert nóg, aðlaga það að
vera hvað sem eins konar þemu sem þú vilt.
Ég veit það er eitthvað sem ég gerði fyrir minn Lokaverkefni þegar ég tók á bekknum
var aðlaga það.
A öðruvísi útgáfa af ræsi sem áttu til annað litasamsetningu og
mismunandi stærðum af sumum mismunandi hlutir.
Svo ég hvet þig til að spila með það.
Það er góður af gaman að gera.
>> TOMAS Reimers: Útlit yfir the toppur aftur, er það mjög svipað og letrið
Ógnvekjandi staður.
A einhver fjöldi af gögnum hefst að virðast svipuð þegar þú hefur
séð nóg af því.
Svo hér höfum við CSS hluti af þessu.
Og þú munt sjá hvernig það getur stíl það.
Þannig að ef þú smellir á borðum, til dæmis, þú getur þegar í stað gera
borð nokkuð því einfaldlega að bæta bekknum borð við það.
>> Sömu hlutina fyrir hnappa.
Ef þú bætir einfaldlega bekknum BTN og BTN default eða BTN grunnskóla, þú getur
fá allir einn af þessum hnöppum með þessum pre-liðinu stíll.
Og þá, ef þú ert að leita að eitthvað flóknari en einfaldlega
Restyling hvað m þegar hafa, yfir á JavaScript flipann yfir á topp
hafa fullt af hlutum.
>> Svo hér höfum við umbreytingum modals, dropdowns, tabs, og vísbendingar.
A Tooltip er hvað birtist undir þínum mús þegar þú sveima á eitthvað.
Popovers, tónar, hnappar, fellanlegur Draugahúsið er það
þeir eru yfirleitt kölluð.
Carousels, sem selbiti gegnum eins og myndir.
>> Þannig að þeir eru hluti af ræsi.
Ég myndi hvetja þig til að mjög farið að líta á þá.
There 'a JavaScript hluti og CSS hluti.
Feel frjáls til nota þá eins og þú vilt.
Við ætlum ekki að fara of mikið inn í þá vegna þess að við teljum skjöl
er mjög vel gert.
Og já.
Ert þú hefur einhverjar spurningar um það?
>> MIKE Rizzo: Svo sem eru mjög fljótur hlið, hönnun þessa vefsíðu sem
við setjum fljótt saman Þessi kynning er
reyndar gert með ræsingu.
Eins og þú geta sjá, þegar við smellur á þessi mismunandi tabs, við erum aldrei í raun
þannig þetta núverandi index.html síðuna.
Svo það sem við höfum er mismunandi divs innan þessa index.html.
Og þá, þegar við smelltu annað flipann, það er bara að breyta
sem sýnir einn er.
>> Svo staðsetur það í samræmi við það þá, breytir HTML á síðunni þannig að
núverandi flipa er merkt sem virkar þannig það virðist öðruvísi og útlit
mjög gott.
>> TOMAS Reimers: Svo sem var allt gert án þess að okkur að skrifa nánast allir CSS.
Við sjáum einnig haus yfir the toppur, sem litir eru með okkur.
En raunverulegt setja það á efst á síðunni og gera
það fletta var ræsingu.
Og þá jafnvel fyrir annað bókasafn - þetta er ekki eitt sem við ræddum um en einn
þú getur google ef þú vilt.
Þetta er kallað prettify.js.
Og það mun litunarlýsingar númerið þitt fyrir þig að nota bæði CSS og JavaScript.
>> Það síðasta sem við viljum að tala um áður en við losa þig út í hið
heimurinn að líta á bókasöfnum til að reikna út hvernig á að nota þá og til, vonandi,
lesa skjöl og finna það sem þú þörf er hvernig á að finna bókasöfn.
Svo fyrsta er að við erum bara að fara að ýta Google.
Fara Google.
>> Það er bókstaflega það sem við gerum þegar við þarf að gera eitthvað er við Google.
Er einhver JavaScript bókasafn sem leyfa mér að vinna tíma í
gagnleg leið?
Þannig að ef ég veit að einhver notandi skapa reikning hér, og þetta er
Núverandi tími, hvernig get ég reikna Munurinn að án þess að þurfa að
reikna það sjálfur?
Svo er þetta í raun sameiginlegur hlutur, JavaScript tími bókasafn.
Og hér við Moment.js-- vinsæll einn.
>> Ef við þurfum á bókasafn til að vinna eitthvað eins lit til að vera fær um að
búa til fullt af handahófi litum -
hugsanlega, til að búa til stíl eða eitthvað -
við gátum Google eitthvað eins JavaScript lit bókasafn.
Og ég er viss um að við myndum skjóta upp með eitt þúsund og einn af þeim.
Þú ert velkominn að lesa í gegnum þau.
>> Svo flestir hlutir - þegar þú finnur þá - eru að fara að vera hýst á einn af
síður sem gestgjafi númer.
Þeir eru eru nokkrar vinsælar sjálfur.
Vinsæll, með langt, er github.com.
Og ef þú ferð til GitHub það er í raun þar Samræma var farfuglaheimili.
Svo ef þú vilt fara aftur til þessi einn.
Sýna þeim það.
>> MIKE Rizzo: Og það er í raun þar sem þetta er hýst líka, ef þú tekið eftir.
>> TOMAS Reimers: Já.
Þannig að ef þú ferð yfir til Samræma og fara á GitHub.
Voru er það?
>> MIKE Rizzo: Þessi litli köttur hlutur er GitHub tákn.
>> TOMAS Reimers: Oh.
Svo GitHub notar aðferð sem kallast Git til að geyma kóðann.
Er þú veist ekki hvað það er eða það hræðir þig, það er allt í lagi.
Þú þarft ekki að vita hvað Git er því GitHub hefur Hala niður
neðst til hægri.
>> The annar gagnlegur hlutur til að vita um GitHub er flestar vörur
mun hafa lesið mig.
Og ef þeir gera ekki hafa a website, the lesa mig mun tala um hvernig þú
setja það, hvernig þú notar það, hvað það gerir, et cetera, et cetera, et cetera.
Það sem við höfum í rauninni verið ganga þér í gegnum.
>> MIKE Rizzo: Kvittun Netinu.
>> TOMAS Reimers: Það er allt í lagi.
Síðustu tveir hlutir sem við vildum að tala um -
við höfum talað um Git -
er vandræða.
Og þetta er ekki viðeigandi fyrir endanleg vara eins og það er
þegar þú hættir 50.
Og þegar þú keyrir inn í vörur framkvæmd bókasöfnum eða framkvæmd
eigið verkefni, ert þú að fara að hafa spurningar eða þú ert
fara að leita að spurningum.
>> Aftur, Google það.
Það er bókstaflega það sem við gerum.
Þetta er að fara að hljóð kjánalegt.
En bókstaflega, google við það.
Og aftur, einn af the fyrstur hlutur þú munt yfirleitt hlaupa inn er
stackoverflow.com, sem er yndislegt spurning og svar sjón.
>> Það er dásamlegt, bæði vegna þess að þú getur staða spurningum og leita að
svör en einnig vegna það hefur nú þegar mikið af
fylltar efni þar.
Svo yfirleitt þegar þú Google að forritun um ræðir innan fyrsta
par hits þú kannt að hafa þegar keyrt inn í það á meðan vandamál setur þinn.
>> Og þá er síðasta raunverulega stutt hlutur er JSFIDDLE, sem er - í dag höfum við
verið að gera fullt af vinnu með JavaScript HTML CSS.
JSFIDDLE er vefur app, sem í grundvallaratriðum gerir þér kleift að taka HTML, þinn
JavaScript neðst til vinstri, og CSS efst rétt þinn.
Og svo er það búið a fljótur bakið um það og sjá hvernig það hefur áhrif.
Það er mjög gagnlegt þegar fólk er að reyna að gera sönnun af hugtak eins
þetta er hvernig þú myndir gera fellivalmynd.
Kannski a fljótur afhjúpa eða hvað.
>> MIKE Rizzo: Svo skulum við fara undan og smelltu þetta.
A fljótur í huga -
en áður en við vorum gera á smell.
Skrúfjárn út JCorey Kórea hefur einnig a innbyggður í Smelltu atburður dýraþjálfari að það
notar bara vegna þess að það tölur sem þú ert fara til að vilja gera a einhver fjöldi af hlutur
þegar þú vilt að smella eitthvað.
>> Á sama hátt, hefur það einnig sveima.
En til fá the fullur umfang þá, líta á jQuery
skjöl og gera það.
Ég gerði eitthvað heimskulegt hér.
>> TOMAS Reimers: Þannig að ég er mjög fljótur program hérna, sem segir
hnappinn á smell.
Þá höfum við for lykkju.
Fyrir I er minni en 404.
Það er bara að fara að skjóta upp kollinum þessi viðvörun skilaboð.
>> MIKE Rizzo: Og hvað var númer 404 stóð fyrir í HTML?
Hefur einhver man?
Ekki að finna, rétt.
Króm einnig bætt þessu snyrtilegur hlutur þar sem þú getur -
>> TOMAS Reimers: Vegna þess að fólk eins og Mike byrjaði að gera þetta mikið og
pirrandi notendur, sem gerir þér að sjá upplýsingar.
>> MIKE Rizzo: Já.
>> TOMAS Reimers: Höfum einhverjar spurningar um þetta, um JavaScript
bókasöfn, finna bókasöfnum, eða Hvað Web Development útlit
eins og í hinum raunverulega heimi?
Við erum að keyra upp á móti tíma.
Svo ég er ekki viss um að við erum að fara að hafa tíma til að framkvæma
nema að það er mjög fljótur.
Erum við góð?
>> MIKE Rizzo: eitthvað sem þú krakkar vildi eins að sjá mjög fljótur í, eins og, tveir
mínútur eða minna?
>> TOMAS Reimers: Nokkuð við getum skorið?
Hvernig á að skrifa í -
>> Áhorfendur: [inaudible]?
>> MIKE Rizzo: Já, svo That -
>> TOMAS Reimers: Þú getur bara högg Control-U á heimasíðu.
>> MIKE Rizzo: Oh, ég vissi það ekki.
>> TOMAS Reimers: Ég held, já.
Control-U. Já.
>> MIKE Rizzo: Ó, svo er að kóða fyrir heimasíðu.
En ef þú vilt í raun að sækja okkar skrár og allt, það er hýst
á github.com
>> TOMAS Reimers: rista nafnið mitt -
Tomas Reimers - slash CS50 bandstrik málstofa.
>> MIKE Rizzo: Og þú getur finna allt þar.
>> TOMAS Reimers: Þetta er það sem GitHub lítur út eins og, sem hátt.
Svo aftur, þegar þú sérð til opinn uppspretta verkefni, yfirleitt, þeir 'vera a lesa
mér það að þú getur lesið.
Og ef þú ferð til baka, þú munt taka eftir því að þú hefur niðurhal zip, sem mun
leyfa þér að sækja uppruna kóða til að innihalda
vara í eigin hlutur þinn.
>> MIKE Rizzo: Já, og ef við smelltu bara á index.html virkilega hratt -
>> TOMAS Reimers: Þú munt sjá hér er Kóðinn fyrir okkar website.
>> MIKE Rizzo: Einnig, ég gleymdi að ýta til hægri áður með stóra borðið það
innifalinn, en það er líka borð af chmods sem við ma
bara fyrir skýrleika þínum.
En ef við fletta alla leið niður að botn, höfum vér ekki raunverulega gera mjög
mikið með JavaScript efni yfirleitt með þetta.
Það er eingöngu úr öllu annað sem við höfðum.
>> Svo þakka ykkur fyrir komuna og hlusta.
Við vonum að þetta var mjög gagnlegt.
Ef þú hefur einhverjar JavaScript tengdar spurningar eða bara að tala um
hvað annað eins og það sem annar kaldur hlutur þú getur gert með JavaScript, viljum við gjarnan
að tala við þig.
>> TOMAS Reimers: Ef þú ert með spurningu um verkefni eða ef þetta getur verið
máli, munum við líklega kyrr svolítið eftir þetta.
En önnur en þessi, hafa góð helgi.
>> MIKE Rizzo: Já, njóta.
Sjá ykkur.
>> TOMAS Reimers: Sjáumst.