>> TOMAS REIMERS: Ahoj, všetci.
Volám sa Tomáš Reimers.
>> MIKE RIZZO: A ja som Mike Rizzo.
>> TOMAS REIMERS: Sme dvaja CS50s TS.
A dnes sme v čele seminár na JavaScript a CSS pre webové aplikácie.
Ak chcete sledovať spolu, odkaz je tamto.
A chcete, aby ju na počítači krátko?
>> Tu je odkaz.
Je to malé miesto, ktoré má väzby na všetky zdroje Chystáme sa byť
ukázal vám dnes, a tiež má veľa užitočné informácie, napísal nám
čítajte viac do hĺbky, keď idete späť, a vy sa snažíte spomenúť, čo
presne tak sme si povedali, čo ste boli hovorí o, et cetera.
>> MIKE RIZZO: Dobre.
Tak poďme začať.
>> TOMAS REIMERS: Takže chcete začať?
OK.
>> MIKE RIZZO: Jo.
Tak sme sa prvýkrát chceli začať s širokým prehľad o internete a
typy súborov, pri navrhovaní webových stránok.
Aj keď táto prezentácia my chceme, aby dostať sa do do JavaScriptu oveľa oveľa
neskôr, sme chceli začať s len, druh, ako oko pohľad z vtáčej
z čoho webovej stránky je a ako premýšľať o navrhovaní
Webové stránky pre štart.
>> Takže vy, v tomto bode - s ním že v piatok večer - by mali mať
predložil svoje CS50 financie Problém sady.
Dúfajme, že bol dobrý vkus o tom, čo webové programovanie môže byť.
Ale tu chceme, druh, dať si iný vkus, rovnako.
>> TOMAS REIMERS: Tak len zhrnúť, čo sa stane, keď zadáte adresu URL do
váš webový prehliadač, ktorý dostane URL vzhliadol v počítači.
A počítač je pripojený k inému počítaču,
ktoré hostí túto webovú stránku.
OK, takže keď idete na google.com, že ste pripojený k jednému z Google je
počítača, ktorý má súbory na google.com.
>> To potom požiada o konkrétny súbor.
Takže ak idete do -
Neviem -
example.com / index.html / alebo test.html, budete žiadať
že konkrétny súbor.
A webový server deje vrátiť sa k vám.
>> Potom, čo prejdete tohto súboru -
akonáhle ste počítač dostane, že súbor - je to chystá začať
vybudovať webovú stránku.
Takže teraz má súbor HTML, čo je niečo ako
Štruktúra webovej stránky.
HTML súbor by tiež odkazovať CSS súbory, ktoré definujú
štýl webové stránky.
>> JavaScript súbory, ktoré definuje interakcie s webovou stránkou.
Obrazové súbory, ktoré sú len obrazy.
A prípadne odkazy na iné súbory HTML, ktoré potom môžete navštíviť.
>> MIKE RIZZO: OK, dobre.
Takže vy máte všetko, možno, starostlivo nastaviť miestneho hostiteľa
na vašom virtuálnom stroji.
A to práve, druh, je miestna doména, ktorá váš počítač hostiteľom iba
pre vás na vlastnú IP adresu.
>> Takže v to, že potom môžete pridať k tomu svoje vlastné webové stránky.
Myslím, že v CS50 financií, mali by ste mať pridané niektoré HTML stránky, ktoré sú,
druh, zabalené v PHP obale.
Ale nakoniec, aké sú vaše PHP stránky sa výstup bol HTML.
>> Ale spomenul si na začiatku z pset, sme museli nastaviť
oprávnenia pre všetko, že jo?
Takže to v podstate len tresne kto vie čítať, písať, a možno
vykonávať jednotlivé súbory.
Takže budeme robiť rýchlo - hm?
>> TOMAS REIMERS: Tak ideme urobiť rýchly demo.
Takže len pre pripomenutie, keď sa pripojenie k počítaču Google -
kto -
a požiadať o súbore, počítač najprv je potrebné, aby sa ubezpečil, že ste oprávnený
skutočne zobraziť tento súbor, alebo čítal, že súbor, pretože nemôžete len opýtať
pre akýkoľvek súbor na tomto počítači, že jo?
To by bolo riziko zabezpečenia.
>> Takže súbory na systémoch, ktoré používame, ako je Tento CS50 zariadení, majú tri
všeobecne ľudia, ktorí môžu mať oprávnenie k niečomu.
Prvým z nich je skutočný majiteľ uvedeného spisu.
Druhá je skupina, ktorá súbor patrí.
Nebudeme sa sústrediť príliš veľa na to.
A posledná vec je, niečo, ako je svet alebo ako všetci ostatní, kto je
nie je špecifická pre tento súbor, a nemá mať žiadne vlastnícke práva k nej.
>> Takže ak máme vlastník, skupina, a potom sa svet.
A potom, pre každú z týchto skupín, je môže mať jednu z troch oprávnenia,
OK, alebo viacerých z nich.
Môžete mať povolenie na čítanie.
Môžete mať správne povolenia.
A môžete si spustiť oprávnenie.
>> Takže pokiaľ ide o skutočné typy súborov, prečítajte si Povolenie je ako v skutočnosti čítanie
obsah súboru.
Právo povolenia sa píše do uvedeného súboru.
Vykonávať oprávnenia beží súbor ako vy, keď musíte spustiť niektorý z
Vaše CS50 projekty.
>> Takže keď budeme premýšľať o súboroch ako keď musíme čítať HTML
Súbor, ktorý musí byť svet čitateľné, nie?
Možno predpokladať, že aj majiteľ chce byť schopní upraviť tento súbor.
Takže majiteľ bude potrebovať čítať a písať oprávnenia.
Nemajú naozaj potrebujete spustiť.
>> Skupina, ideme na liečbu rovnako ako svet pre teraz.
Takže oni potrebujú povolenie na čítanie.
Ale nemusíte písať alebo vykonať oprávnenia.
A teraz, keď si myslíme, že späť do bývalej PSETs, čo si uvedomujeme, je tento druh
z vyzerajú ako binárny, že jo?
1 znamená áno.
0 pre nie.
A môžeme skutočne prekladať to binárne.
>> Takže 110 v binárnom by byť 6.
100 bude 4.
Rovnaké je to s svetom.
Takže číslo, ktoré by sa pre oprávnenia pre to bude 644.
>> MIKE RIZZO: A ak si myslíte, späť do keď chmoded niečo, verím,
dali do problému nastavenie príklad, kde by ste mohli urobiť
niečo ako chmod 644 a potom názov súboru.
644 potom, môžete teraz vidieť priamo kde to pochádza.
Tak dúfajme, že robí, že trochu jasnejšie.
>> A potom pre prehľadnosť vám chlapa -
ach jo, tu je to znova.
Takže 600 by potom byť len príklad dali sme sem, kde má vlastník
čítanie a správne oprávnenia, zatiaľ čo skupina a svet nemajú žiadne oprávnenie
prístup k súboru.
>> TOMAS REIMERS: A potom sme rýchlo Zoznam spoločných oprávnenie.
Takže adresára, budete chcieť skutočne chmod 711.
Rýchle stranou - pre adresár mať spustiteľný povolenia znamená, že je schopný
otvoriť adresár.
Obrázky, CSS, JavaScript, HTML potreby 644, pretože v podstate svet
potrebuje povolenie na čítanie.
>> A PHP, ktoré vy ste videli aj keď nebudeme o tom hovoriť
prísne je typicky s chmoded povolenie 600, pretože je to beh s
oprávnenia vlastníka.
Aspoň na zariadení.
>> MIKE RIZZO: Takže ak nie sú výslovne určiť, aký typ súboru
Ak v skutočnosti nastavenie do tejto prezentácii -
sme mali problém s tým, pretože všetko, čo nebolo správne chmoded -
budete mať, druh, zakázané chyba, že webové stránky
nemá v skutočnosti majú oprávnenie prístup bez ohľadu na súbor
chcete, aby prístup.
A samozrejme, že môže byť stanovená - ako problém sada - zmenou
oprávnenia primerane.
>> TOMAS REIMERS: A posledná poznámka pre Rýchlo miestny rozvoj - sme
priniesol to, ale len sme chceli aby to zase -
ak sa spýtate na serveri - takže miestneho hostiteľa, Napríklad, com alebo čokoľvek iného. -
a neuvediete konkrétny súbor, súbor, ktorý váš počítač sa deje
požiadať o sa nazýva index.html.
Alebo v prípade, že neexistuje, index.php.
>> V pohode.
Takže je to len rekapitulácia všetkého, dúfajme, že sme na ktoré sa vzťahuje
sekcie a prednášky, a tak ďaleko CS50.
A teraz budeme začať hovoriť o špecificky knižnice.
JavaScript a CSS knižnice pre webové aplikácie.
>> Tak jedna rýchla dôvod, prečo máme knižnice je programovanie -
je tu veľa problémov programovanie, ktoré udržujú objavovať
znova a znova a znova.
Môžete si všimnúť, že mnoho internetových stránok je potrebné schopnosť mať rozbaľovacej
menu, napríklad, alebo potrebujete schopnosť mať tlačidlo veľmi štandardné
štýl, ktorý nemusí byť najjednoduchšie.
Teraz, keď začnete sa dostať do HTML, môžete Uvedomujem si, že tlačidlá môže skutočne
vyzerajú naozaj škaredo, ak vám nerobia nič.
>> Takže veľa ľudí písali s názvom knižnice.
A v tejto súvislosti, že sú tiež volal rámca.
Budeme používať dva vzájomne zameniteľné.
A to, čo oni sú, je, že sú v podstate premade kusy kódu -
Buď CSS alebo JavaScript -
že odniesť veľa tím máte v kódovaní.
>> Takže dopredu definovať veľa tried, alebo dopredu definovať veľa funkcií pre
JavaScript je prípad, ktorý môžete zavolať neskôr.
A potom je to možné, nejako, sa prístup k tomuto kódu, bez toho, aby
museli niečo urobiť.
Príkladom knižnice bolo CS50.H. To bola knižnica dali sme vám späť
v týždni jeden, ktorý dovolil, aby si veci, ako že vezmi_int a GetString
aby bolo nutné písať akýkoľvek kód sami.
>> MIKE RIZZO: Dobre.
Tak tu, rovnako ako sme museli zahrnúť v našom c súbory odlišujú
knižnice, tiež by sme mali zahrnúť do náš HTML súbory rôznych knižníc.
Napríklad, ak by sme chceli zahrnúť špecifické knižnica JavaScript tu,
možno ten, ktorý sme napísal sami, ako je to lokálne hostil
tzv script.js, práve sme použiť tento zápis.
>> Takže máme typ skriptu rovná JavaScript zdroj rovná
JavaScript.js.
A ak si myslíte, že späť do svojej CS50 financie problému nastavenie, ak ste sa pozreli na
header.php v priečinku šablón, by ste mali vidieť
niektoré z nich v cene.
Tak to prvý - skripty -
je vrátane knižnice JavaScript.
Vrátane knižnice CSS je trochu inak.
>> Tu, namiesto skriptu Tag musíte tag odkazu.
A potom, zadajte text CSS je trochu iný.
Nemusíte vždy musí obsahovať rel štýlov.
Ale myslím, že to, všeobecne, dobrej praxe.
>> A nakoniec, HREF, ktorý pravdepodobne videl vo svojich ATAGs pre prepojenie
v rôznych väzieb len určuje, odkaz, kde nájsť to.
Napríklad, ak by sme chceli spojiť iný knižnica - povedzme -
že žil v styles.css.
A my sme chceli spojiť to v tom, že je hostované na webe, budeme kopírovať to.
A potom ju vložiť do akéhokoľvek máme tu miesto.
>> TOMAS REIMERS: OK, dúfajme, že ste chlapci sú už oboznámení
s tým, ako prepojiť CSS.
Mal si na to, že na Vaša posledná hnedá sada.
JavaScript, niektorí z vás možno majú nejaké skúsenosti s
Niektorí z vás možno nie.
>> Takže teraz, viem, že súbor JavaScript je veľmi podobný súboru CSS v
pocit, že môžete odkaz na neho, alebo že môžete zahrnúť interne.
A to vám umožní skriptu veci.
A budeme vás prevedie Trochu JavaScript neskôr.
>> Takže pomocou knižnice -
akonáhle ste súčasťou, je to ako jednoduché, ako doslova volá
funkcie alebo pridanie Trieda mena do nej.
Posledná vec, ktorú chceme hovoriť o, pokiaľ ide o knižnice -
a to je viac technickej poznámke -
Je licenciou open source.
Takže keď zistíte, tieto skutočné knižnice, si môžu myslieť, zo
Otázky páči, je to v poriadku, že som len pomocou kódu niekoho iného, ​​a to najmä
pretože to je niečo, čo veľmi povedal, že nebude robiť v tomto kurze.
>> Takže v prípade open source licenciou, Mnoho vývojárov -
potom, čo som napísal knižnicu, ktorý si myslí, že by mohli byť
užitočné pre ostatných ľudí -
bude ho publikovať na webe a dať mu licenciu.
A licencie v podstate hovorí, že som sa týmto udeľovanie povolení na ďalšie
ľudia používať tento softvér s týmto druhom
dojednania.
>> Sme zaradili odkaz na dobré stránky na pomôže pochopiť licencií v
prípade, že sa dostanete do nich.
Spoločné dojednania sú veci ako ste vítaní v mojej knižnici, aby
Kým mi dať úver.
Ste vítaní na použitie mojej knižnice tak dlho, ako keď sa rozbije
že ma viniť.
Ste vítaní na použitie mojej knižnice tak dlho, ak nechcete použiť, ako zarobiť peniaze
pre seba.
Jedná sa o bežné druhy dojednania.
>> Pre tento CS50 poslednom projekte, by nemal byť super relevantné, pretože
projekty, ktoré vy používate sú pravdepodobne skôr trochu známy.
Ale keď ste vlastne ísť von do svet a začať používať knižnice, ktoré
môže, ale nemusí byť, rovnako realizovaný ako niektoré z viac populárne tie sme
bude prechádza.
Je dobré, aby bolo možné pochopiť, Tieto licencie a na
pochopiť, čo znamenajú.
A vracať.
>> MIKE RIZZO: OK.
Takže teraz pohybuje na príkladoch skutočné CSS.
V tomto bode tak ďaleko, môžete Nie je sa stretli to.
Ale možno ste sa stretli s tým v tvoj každodenný život, kde sa niečo
to vyzerá na jednu stranu na jednom prehliadači nemusí vyzerať rovnako
spôsob, ako v inom prehliadači.
>> To sa nazýva prehliadač prehliadač kompatibilita.
A stále je to stále viac a väčší problém, najmä preto,
prehliadača sa stále viac a viac slobody realizovať veci tak, ako chcú.
Takže prekonať to, že tam skutočne je veľká knižnica s názvom Normalize.CSS.
>> TOMAS REIMERS: zahrnuté odkaz.
V tomto bode, to je užitočné v prípade, Máte svoj notebook tam
pri pohľade na mieste.
A dávame vám to hneď Teraz jednoducho preto, že CS50 finále
Projekt bude skutočne vás vyzve na jeho vykonanie
podobne aj cez prehliadača.
>> Takže stačí mať na zadnej strane hlava, to je nádherný knižnica
, Pretože to bude, tak nejako, štandardizovať veci.
Vo Firefoxe, niečo, čo sa môže ukázať, ako jeden pixel na ľavej strane.
A potom Chrome môže rozhodnúť, že v skutočnosti to, čo ste mal na mysli bolo 10 pixelov
na ľavej strane.
A chcete štandardizovať to.
Normalizácia bude vlastne robiť naozaj dobrý Úlohou uistite sa, že vaše stránky
vyzerá rovnako v rôznych prehliadačoch.
>> MIKE RIZZO: Takže keby sme chceli len kliknite na odkaz naozaj rýchlo a ukázať
si, čo to vyzerá, vás Môžete si ho stiahnuť pomocou
obrie tlačidlo Download.
Alebo by som Odporúčame vám prečítať viac o tom po kliknutí na tento odkaz v dolnej
v pravom dolnom rohu.
>> TOMAS REIMERS: A ak skutočne kliknite na tlačidlo Čítať viac tady -
kliknite na zdroj na GitHub -
budete skutočne vidieť open source licencie na LICENSE.md tady.
A uvidíte, je tu veľmi populárne licencie MIT.
Opäť platí, že ak si prečítate v texte, budete môcť nájsť na stránkach
sme odkazované pred a byť schopný pochopiť, bez toho aby ste museli čítať
prostredníctvom právneho žargónu.
>> MIKE RIZZO: OK, dobre.
Tak to je Normalizácia.
Chceli sme, aby vám že naozaj rýchlo.
Oh, máte nejakú otázku?
>> DIVÁKOV: Takže keď si ju stiahnuť, je len sledovať ten kód, ktorý majú
pod tlačidlom stiahnutie?
>> TOMAS REIMERS: Áno, tak keď si stiahnete -
>> MIKE RIZZO: Oh, to je skvelé miesto.
Takže otázka je, ako to sme vlastne ju stiahnuť?
Takže ak klikneme na odkaz, vidíme, že skutočne objavia
v zdrojovom kóde.
Tak, ako to urobiť, čo sme mohli to je len kliknite na príkaz Uložiť ako.
Uložiť ako a že by vychovávať súbor.
A potom môžeme zvoliť uloženie to ako normalize.CSS.
A potom budete musieť prepojiť ju do -
>> TOMAS REIMERS: rovnakým spôsobom odkazujú v inom súbore.
A akonáhle sa prepojiť ju, čo je skvelé o Normalizácia je to skutočne
starať sa o všetky ťažké fungovať sama o sebe.
To znamená, že nemáte pridať nejaké triedy.
>> Nemusíte robiť nič divného.
To bude normalizovať bez teba robiť niečo ďalšie.
Áno, budete musieť zahrnúť.
Google Chrome nereaguje.
>> Len rýchly stranou -
Všimol som si, sme skočili do toho.
Zvyšok tejto prezentácie je Bude rýchly prehľad.
Prehľad knižníc.
>> V podstate to, čo oni sú.
To, čo robia.
Ako sú užitočné.
Ako ste ich mohli realizovať.
Ak chcete začať hľadať na ne, Nasledujúce spolu, a prečítanie
im, by som veľmi povzbudiť, že.
>> Prípadne, ste vítaní aj so začať sťahovať ich a vrátane
je v očiach len preto, aby videli, čo vyzerať alebo čo robiť, keď máte
váš laptop pred vami.
Ak nie, ste vítaní, aby sa počúvania nám hovoriť.
Budeme ďalej hovoriť.
A máme čas na konci, dúfajme, že budeme skutočne dostať do ukáže vám,
to, čo niektoré z týchto knižníc vyzerať.
>> MIKE RIZZO: Cool.
Dobre, takže teraz poďme hovoriť o Písmo Skvelé.
>> TOMAS REIMERS: tak Font Úžasné je naozaj pekné miesto, a to najmä pre tých,
z nás, ktorí sú menej umelecky talentovaný.
Ignorovanie názov písma Úžasné, to dáva Ste banda ikon, ktoré sú
veľmi užitočné.
Takže mnohokrát budete realizovať icon budete chcieť ako peknú X tak,
ktoré môžete uzavrieť tak niečo.
>> Alebo možno budete chcieť nejaké tlačidlo Edit s kresba ceruzkou, ako je
všetci ostatní.
A to je, keď ste sa dozvedeli, že kreslenie tie ikony môžu byť
veľmi zdĺhavé a ťažké.
Font Awesome - ak ste skutočne ísť na stránky -
vám dáva veľa ikon pod Ikony v hornej časti.
Jo, len hore.
To vám dá veľa ikon zadarmo.
>> Takže tu vidíte, máme veci, ako je hviezdička, bary, blesk,
kalendár, chyba, knihy, et cetera.
To môže byť veľmi užitočné.
Spôsob, ako zahrnúť je zahrnúť doslova súboru CSS.
A potom, čo ste súčasťou súboru CSS, to, čo môžete urobiť, je vytvoriť
tag s názvom I. satands pre icon s triedou FA
stojí za font Awesome.
A potom, bez ohľadu na triedu budete chcieť.
>> Takže keď som chcel ikonu tohto Plus námestí, priamo tu, by som dať
je trieda FA.
A potom FA pomlčku a spojovník námestí.
>> MIKE RIZZO: Cool, OK.
>> TOMAS REIMERS: A potom, posledný CSS knižnica sa chceme dostať cez sme
sa snaží udržať minimálne na CSS knižnice, pretože si uvedomujeme
Názov tejto prezentácie je JavaScript knižnice.
Ale my sme si mysleli, že sme sa môže aj Predstavujeme Vám k iným knižniciam
keď sme hovorili o knižniciach.
>> Je to Google Web Fonts.
A to, čo Google Web Fonts Vám umožní urobiť, je pridať písma na vaše webové stránky,
čo je naozaj jednoduchý spôsob, ako to pekná a odlíšiť sady
od každého iného je, ak má pekné písmo, alebo v prípade, že má pekný
kolekcie písiem.
Google Web Fonts je pekný rozdiel od iných knižnice v tom zmysle, že je to
naozaj riadiť inštalácie.
>> Takže ak budete nasledovať odkaz, je to google.com / fonts, verím.
Ak sa budete držať, aby vás môžu vybrať svoje písmo.
Môžete si vybrať, na ľavej strane od hrúbku, sklon, et cetera.
A potom, akonáhle ste si vybrali jeden, môžete kliknutím na tlačidlo rýchle použitie.
Presne tam.
V pravom dolnom rohu okna.
>> A potom, prejdite nadol.
Po prvé, že vám CSS, ktoré budete musieť skutočne odkaz na neho.
Je to tu.
Stačí si len skopírovať a vložiť, že dovnútra
A pekná vec, o tomto je nemusíte vlastne ani potreba
stiahnuť súbor.
>> Čo to urobí, je, že to bude odkaz na Google verzií toho.
Takže späť k čo to znamená.
To znamená, že keď používateľ stiahne súbor -
stiahne vaše stránky HTML - váš HTML Stránka sa bude odkazovať na tento súbor.
>> Takže, váš počítač bude vidieť, oh, to je hosťovaní na google.com skôr
ako na theirsite.com.
Nechaj ma ísť požiadať Google o tomto súbore.
A potom, že to bude zahŕňať je to skoro, ako keby sa jednalo o
súčasťou vašich vlastných stránok.
>> TOMAS REIMERS: Cool.
A akonáhle sa patrí, potom sa zahrnúť ju do svojho CSS, to vám dáva
aktuálny riadok.
Takže môžete nastaviť rodinného majetku písma rovnajúcu sa názov vášho písma.
>> MIKE RIZZO: OK.
Tak sme práve dokončili s CSS.
A niektorí z vás si možno myslieť, dobre, sme mali nejaké CSS na CS50 financií.
Ale CSS knižnica bola bootstrap.
Sme vlastne patrí Bootstrap málo neskôr v JavaScripte, pretože sa
knižnica Bootstrap CSS tiež prichádza s množstvom JavaScript, ktorý
Bootstrap alebo Twitter - kto robil Bootstrap -
používa pre správu všetkých ich CSS.
>> TOMAS REIMERS: Má niekto nejaké otázky doteraz o CSS všeobecne?
Sme dobrý?
Úžasné.
>> MIKE RIZZO: Skvelé.
>> TOMAS REIMERS: Takže sťahovanie na JavaScript.
>> MIKE RIZZO: Tak sme chceli hovoriť o jQuery začať.
Má niekto počul o jQuery pred alebo použil?
Jo, pár?
Takže ak ste práve pracovať s natívnym JavaScript, zistíte sami
písanie veľa dlhých selektorov veľa.
Takže to, čo jQuery robí, je, že poskytuje pekný obal pre JavaScript
jazyk, ktorý vám umožní ľahko zvoliť a manipulovať s rôznymi prvkami
v dokumente objekt modeli webové stránky alebo DOM, čo si myslím,
vy ste počuli v prednáška v tomto bode.
>> TOMAS REIMERS: Ak ste ešte nepočuli o to, alebo ak ste sledovali prednáška
napriek tomu, Document Object Model je v podstate, ako sa veci zastúpené.
Takže HTML trochu vyzerá ako strom keď ste skutočne čerpať ju.
Máte HTML element na vrchole.
Máte hlavu a telo.
>> A potom, v rámci ktorej si majú všetko ostatné.
To je odvolával sa na ako DOM -
Document Object Model.
Takže model, ktorý reprezentuje objekty dokument je jednoduchý spôsob, ako myslieť
o tom.
A jedným z veľkých vecí o jQuery Je to naozaj robí traverzování
že a manipulácia s prvkami v rámci že neuveriteľne jednoduché.
>> Tak jednoduché, v skutočnosti, že väčšina JavaScript knižnice, alebo nie, ak
Väčšina, veľký väčšina tých uvidíte v skutočnosti vyžadujú, jQuery, takže
že je možné spustiť sami jednoducho pretože ak ste nemali jQuery, vás
by odpad veľa času sa snažia prísť na to, ako vybrať určité
prvky a ako robiť iné veci.
A ďalšia skvelá vec, o jQuery je, že je to cross kompatibilný so všetkými prehliadačmi.
>> Takže pamätajte späť, keď sme povedali, že nie všetky prehliadače implementovať
veci rovnakým spôsobom?
To platí aj v JavaScripte.
A jedným z veľkých vecí, o jQuery je, že to bude detekovať
prehliadač a odhaliť vhodná metóda.
>> Takže ak budete potrebovať vybrať prvok, Internet Explorer by sa povedať, že ste
robiť týmto spôsobom.
Firefox by sa povedať, správne spôsob, ako je tento spôsob.
jQuery nestará.
Keď poviete jQuery vybrať prvok bude zistiť, ako je to
robiť to v prehliadači užívateľ je v súčasnej dobe, a potom vykonajte
to tak.
>> MIKE RIZZO: Tak poďme o tom hovoriť využitie jQuery trochu.
Rovnako ako PHP, jQuery má najmä láska na znak dolára.
Tak zistíte, že žiadny jQuery -
dobre, nie je všetko.
Niekedy môžete nahradiť dolár prihlásiť sa slovom jQuery.
Ale všeobecne, len preto, že je to kratšie, keď vidíte, že jQuery
používa to bude s znakom dolára.
>> Tak tu sme len ukazuje na začiatok volič pre element v DOM.
Tu máme nasledovať znak dolára otvorené zátvorky a potom citácie.
A v úvodzoviek ísť našich voličov pre rôzne prvky.
Rovnako ako v CSS, sme potrebovali voliča, aby môcť štýl rôznych prvkov
v rámci stránky.
Tieto rôzne selektory prekladať presne na jQuery a JavaScript,
z väčšej časti.
>> Takže tu máme dot foo.
Takže ak si pamätáte z prednášky, bodka jednoducho znamená triedu.
Takže sme vyberiete prvok s triedou foo.
Takže keď som sa ísť dopredu a otvoriť naše JavaScript console tu naozaj rýchlo
len demonštrovať to, či som typ znak dolára, vidíme, že je to nejaký
funkcia, ktorá príde.
A to je len definovaný jQuery.
>> TOMAS REIMERS: Pre tých z vás, neznáme, konzola je nástroj
v Chrome, ktorý umožňuje, v podstate, beh JavaScript
aktuálna stránka.
To zistíte, neuveriteľne užitočné, keď ste vlastne ladenie a
musí byť rovnako ako to, čo je aktuálne Hodnota nejaké globálne premenné alebo čo
je niečo iné?
Je to niečo ako GDB s výnimkou že môžete skutočne
manipulovať s prvkami na stránke sa je v oveľa jednoduchšie móde.
A tiež to nie je, v podstate, skontrolujte, či s vami, ako sa s tým nič nerobí.
>> Takže vzhľadom k tomu, GDB môže byť rád, si istí, že chcete spustiť ďalší krok?
Konzola je v skutočnosti.
Tak ako webová stránka je vykresľovanie a robiť, čo to robí,
Rada je tiež beží vedľa nej.
A vy môžete dať pričítať kód do že konzola, ktorá bude
byť prevádzkovaný na stránke.
>> MIKE RIZZO: Tak vstúpiť do konzoly, Myslím, že by som mal stručne
spomenúť, ako na to.
V posledných problémy, ktoré môžu mať ojazdené Chrome je kontrolovať prvok
funkcie alebo zobraziť zdrojový stránku -
a tie sú prístupné len tým, že právo Kliknutím na stránky alebo špecifické
prvok a tým buď prehliadnuť prvok alebo zobrazenie zdroja stránky.
Môžeme tiež prístup JavaScript konzoly priamo
výber kontrolovať prvok.
Takže potom stačí kliknúť na konzole na pravej strane.
>> Prípadne môžete tiež preč na pravom hornom rohu,
ktorý je odrezaný na tejto obrazovke, kde má tri vodorovné pruhy.
A idete dole k nástrojom a potom konzola JavaScript
tu, kde môžete vidieť -
aspoň v systéme Windows -
skratka je Shift Control J. Tak ak by sme chceli vybrať prvok
na tejto stránke, rovnako ako som ukázal, skôr, urobíme znak dolára otvorené zátvorky
a potom cituje.
>> Zaujímavosťou je, všeobecne, jednoduché úvodzovky a dvojité úvodzovky sú
vymeniteľná.
Takže veľa ľudí stačí použiť jeden úvodzovky, pretože sú rýchlejšie typ
ako úvodzovkách, pretože nemáte musieť držať stlačený kláves Shift.
Tak som si len to, že práve teraz.
>> Takže chcem vybrať niečo, s triedou.
Kontajner, len preto, že viem, že je to niečo, čo je v našich
webové stránky práve teraz.
A ja som stlačte kláves Enter.
A vidíme, že vybral to.
Tak to sa ukáže, že vrátil sa daný objekt.
Tak to je základný výber.
Ak by sme chceli skutočne manipulovať, budete musieť niečo hovoriť
na tento výber, ktorý sa dostaneme do neskôr.
>> TOMAS REIMERS: Takže stačí sa pozrieť na to viac do hĺbky, to sa nelíši
ako volanie funkcie, ktoré sme vykonali v C. Názov funkcie je tu
trochu divný.
Je to znak dolára.
Je to len názov funkcie.
Na tom nie je nič zvláštne.
>> Máme otvorené zátvorky.
Potom máme jeden argument, ktorý v tomto prípade sa stane, že je reťazec,
, Čo je pre neho volič.
A potom, máme uzavretá zátvorka.
To je to.
>> Nie je to tak diametrálne odlišná.
Aj keď to vyzerá veľmi divne.
A to môže byť trochu, lepenie bod pre mnoho ľudí.
>> MIKE RIZZO: Takže podobne, ak by sme chceli vyberte prvok, ktorý má ID,
Teraz chceme vybrať podľa ID namiesto triedy.
Bolo by to niečo podobné, kde sme proste ostrý znak pre ID.
Takže sme vyberiete tu všetko prvky, ktoré majú ID bar.
>> TOMAS REIMERS: A to rozširuje.
To CSS rozširuje.
Rovnako ako v CSS, môžete si vybrať všetko odkazy, ktoré majú triedy foo.
Tu je to to isté.
>> Dalo by sa urobiť a.foo, ktoré by výber všetky odkazy s triednym foo.
Dalo by sa urobiť ostrú tyč, ktorá by vyberte odkaz s ID baru a tak,
ďalej a tak ďalej.
Každý volič CSS je platný jQuery voliča.
>> MIKE RIZZO: Jo.
OK, takže teraz poďme do trochu manipulácie, ktoré môžeme urobiť s
naše jQuery.
Takže jQuery má zvláštny typ notácie, kde sme práve používate
bodka na konci.
A vy môžete myslieť na to ako na C, ako sme mali rôzne structs.
A ísť do tých štruktúr, by ste použite bodku, aby sa do nich.
>> To je druh, niečo podobné.
Až teraz máme funkcie v rámci tejto volič, ktorý môžeme nazvať na neho.
Takže tu je prvý príklad môžete vidieť, je selektor CSS.
A v podstate, čo to robí, je to sa vzťahuje na prvý prvok CSS na to
vec, ktorú ste vybrali -
Tento prvok, ktorý ste vybrali -
s hodnotou tohto.
>> TOMAS REIMERS: Tak jednoduchý preklad že by bolo, keby jQuery, v podstate,
len sa foo.
A potom v CSS povedal, farba červená a zavrieť.
Je to rovnaký nápad.
Čo to robí, je to zvolené všetky foo prvky.
A potom sa to aplikovať.
Niečo, farba nehnuteľnosti sa rovná červené.
>> MIKE RIZZO: Podobne môžeme tiež zmeniť skutočný obsah toho, čo je
ukazuje na HTML stránky, ktorá Je naozaj skvelé, pretože to znamená, že vaše
Webové stránky môžu byť teraz úplne dynamický a nemusí byť statická
ktoré tlačíte s použitím PHP na samom začiatku
Stránka sa načítava.
Takže tu, keď sme chceli zmeniť aktuálnej HTML stránky, by teraz
volanie funkcie HTML, ktorý potom už len vložky, čo sme sa určujú na
že prvok, ktorý sme si vybrali.
Takže tu máme výber prvku s class foo a potom povedal, že je to HTML
teraz je to hello world.
>> TOMAS REIMERS: A keď sa nad tým zamyslíte aké sú užitočné aplikácie
tohle, tohle CSS jedno, prvá vec, ktorá môžete začať premýšľať o tom,
z hľadiska dokonca drop-down menu.
Dalo by sa začať robiť veci, ako, keď užívateľ sa vznáša nad hornej časti
z rozbaľovacieho, chcete, aby sa spodnú časť viditeľná.
Je to tak?
>> Takže v CSS, máme vlastnosti urobiť niečo viditeľného.
Veci ako displej hrubého čreva nikto by bolo neviditeľné.
Zobraziť blok by sa zobrazil.
Alebo dokonca, ak chcete ísť jednoduchšie, vás mať veci, ako je viditeľnosti sa rovná
viditeľné, a viditeľnosť sa rovná skryté.
>> A môžete začať vykonávať veci ako rozbaľovacie menu vpravo
potom, čo sa dostanete cez myšlienky o tom, ako môžete zistiť, keď sa to otvorí,
ktoré dostaneme cez veľmi stručne.
Ale môžeme začať vidieť aplikácie to.
V podobnom zmysle, ak ste mali skúsiť a realizovať, povedzme, chatu
motora a chcete, aby sa trochu bublinu prísť kedykoľvek ste
dostal novú správu, akonáhle sa dostanete nová správa, môžete si trochu
bublinu prísť zmenou HTML stránky, nie?
Pridaním že ďalšie bublinu s extra texte tam.
Jo?
>> DIVÁKOV: Takže by ste vložiť to do HTML kód niečo ako
[Nepočuteľný]?
>> MIKE RIZZO: Správne.
Jo, dostaneme sa k tomu v trochu.
Jo, je to podobné trochu PHP.
Nie tak celkom podobné.
>> Dobrý rozdiel, aby sa to, čo to je v skutočnosti upravujete, keď sme editovať
stránky, pretože to nebude editáciu skutočný súbor, ktorý je
uchovávané na serveri, pretože svet by nemali mať oprávnenie
editovať súbory.
To je práve upravujete, čo je na stránke a to, čo je zobrazené v
prehliadač.
Takže ak ste sa po načítaní stránky, povedať, mazanie niečo ako my
vidieť, čo môžeme urobiť s remove volanie, že vec by sa potom znovu objaví.
>> TOMAS REIMERS: Takže jediný spôsob, ako premýšľať o tom, to je, keď som počítač a
Mike je, tak nejako, servera.
Čo sa stane, je, že budem opýtajte sa Mike, hej, môžem mať kópiu
táto webová stránka?
A on mi dá jeho kópiu.
>> Nie, to nie je originálna vec.
Je to len kópia.
A potom by to bolo, oh, tam je JavaScript tu.
Je jasné, že by som mal upraviť Stránka sa takto.
A ja som v úpravách kópiu.
>> Ale to nie je znemožnenie aktuálnu kópiu.
A keď som sa ho znova spýtať aktualizovať stránku, -
Ahoj, môžem mať čistú kópiu -
že sa chystá dať mi ďalšie čisté kópie.
A potom, ja urobím to isté ako, oh, to JS tú, ktorá hovorí,
upraviť to.
A budem to robiť.
>> MIKE RIZZO: Tak to naozaj super vec ktoré môžete robiť s jQuery je
v skutočnosti pridať rôzne typy animácií na vaše stránky.
Ja neviem, či ste niekedy videli, kde snažíte sa vyplniť formulár
on-line a nechcete vyplniť veci správne.
Tak trochu to kĺže dole hore a hovorí, že
Neurobil to správne.
Skúste to prosím znova.
A potom, že by aj len kĺzať hore.
>> Ukázalo sa, že jQuery má vstavanú funkcií že aby to všetko
animácia naozaj jednoduché.
Takže tam je prvý fade out funkcie, ktoré
môžete volať na niečo.
A to je spôsob, ako zmeniť CSS na tento prvok v animovanom spôsobom.
Tak to trvá bez ohľadu na prvok hovoríte, že mizne na.
A potom sa pomaly mení, že je to krytie kým to ide úplne transparentné.
>> TOMAS REIMERS: ďalšie populárne je skĺznuť dole, čo umožní
niečo, čo sa objaví posunutím dolu.
Takže v prípade, že v ponuke pokles dole, znovu, keď sme sa dozvedeli, ako rozpoznať
keď to bolo vznášal nad, môžete len povedať toto dno
časť posuňte sa dolu.
A potom, zdá sa, posunutím nadol.
>> MIKE RIZZO: A potom, ak máte nejaký druh animácie na pamäti, že
jQuery nemusia nutne poskytovať.
Napríklad, povedzme, jQuery sa poskytujú vám so šmýkačkou
nadol a posuňte nahor.
No, povedzme, že ste chcel kĺzať niečo z ľavej alebo z
správny druh ako CS50 Hlavná strana robí vždy, keď
idete do nového panelu.
Tie by sa potom pravdepodobne implementovať sami pomocou
animovať funkcie v jQuery.
>> Takže podobne, stačí animovať.
A potom, v ňom trvá Slovník rôznych hodnôt
že ste mal prejsť.
Takže tu, ak by sme chceli animovať foo element tak, že jeho šírka buď
rozpína ​​alebo naopak zmršťuje až 80 bodov, v závislosti na tom, čo v súčasnej dobe je.
Radi by sme len prejsť, že ako Argument v ňom.
>> Animácie tiež nejaké ďalšie argumenty že by ste mohli prejsť, napríklad,
rýchlosť animácie ktoré chcete dať.
A k tomu by som len povedať, rýchlo Google jQuery animácie.
A potom, čím sa na túto stránku, môžete vidieť, že má veľa rôzne
vlastnosti, ktoré u nás môžete absolvovať ju.
>> A ja povzbudiť vás - vždy, keď prišiel cez niečo, čo nechcete
vedieť, alebo len chcete dozvedieť viac o najmä spôsob, ktorý môžete volať
na niečo -
len Google to. jQuery je veľmi dobre zdokumentované.
A často dokonca existuje veľa príklady, ktoré poskytujú pre vás.
Ak sa posunúť dole -
smerom dole -
ktoré môžeme použiť, rovnako.
>> Opäť platí, že ak developer vlastne ide cez ťažkosti písanie
knižnica, oni zvyčajne chcú niekto ju používať.
Takže spolu sa chystá byť dokumentácie.
A že dokumentácia môže byť zvyčajne nájdete na stránke projektu, ktorá je
Preto sme vám dali, že pôvodné miesto vo začiatok, ktorý vás spája so
Stránky projektu, takže môžete vidieť, že v dokumentácii.
>> Typicky, stránka projektu v prípade, z [nepočuteľné], to vám povedal o
názvy tried.
V prípade JavaScript, dáva si názov funkcie.
Mimochodom, keď sme prejdite až na vrchol, rýchle bočné poznámka o funkciách je
keď vidíte, funkcie implementovanej takto sa ťažko
držiaky v stredu, to znamená, že že majetok je voliteľná.
Len heads up.
Videl som veľa otázok o tom.
>> Takže tu môžeme vidieť, že živý sa vlastnosti
ako nevyhnutné argumentáciu.
A všetko ostatné je voliteľný.
Bočné Poznámka -
môžete myslieť na to, triedenie z, ako manuálové stránky.
Manuálové stránky sú dokumentácie pre C a pre mnoho ďalších vecí, rovnako.
>> MIKE RIZZO: Tak sme sa dozvedeli, ako sa zmeniť iné CSS na stránke,
animovať ho a vyberte pridať HTML.
Ale jeden z naozaj najsilnejší veci, o JavaScriptu
a najmä jQuery -
to, čo môžete urobiť, je reagovať na rôzne prvky, ktoré sa dejú.
Napríklad, máme tu obslužnú rutinu udalosti.
A to práve znamená, že vždy, keď to udalosť stane, budeme s ňou zaobchádzať v
určitým spôsobom.
>> Tak tu je všeobecný jQuery udalosti Psovod je bodka na.
A potom, prvá vec, ktorú ste zadali Je to udalosť, že by
bude počúvať.
Tak tu je to cvaknutie, ktoré sme čakali.
>> TOMAS REIMERS: Prípadne, máte na visenie, ktorý je veľmi populárny.
Takže späť k môjmu rozbaľovacej ponuke nápad.
Budete mať horný jeden na visu.
A potom by ste mohol zmeniť.
>> MIKE RIZZO: Správne.
A potom, keď sa to stane, je to len vykonáva túto funkciu, že dáme
ako argument, a že upozorní ahoj a ahoj.
>> TOMAS REIMERS: Takže v prípade JavaScript, toto je miesto, musíme
odstrániť sami od C. Môžeme skutočne sa funkcie ako argumenty.
A existuje veľa naozaj komplexné spôsoby, ako to urobiť.
Budeme podporovať jednu stranu, ktoré je môžete definovať
pracovať tam.
>> Takže keď sa pýtate na funkciu ako parameter, ste v podstate len
bude definovať funkcie na mieste.
A tak, ako definovať funkciu v JavaScriptu je vám
doslova hovoria funkcie.
Potom, zvyčajne, názov funkcie.
Ale my nikdy odkazovať táto funkcia znovu.
Tak sme ho nechať bezmenný.
>> Potom zátvorky, potom kučeravý traky, a potom kód v to.
Takže chápeme to môže byť trochu mätúce.
Tak sme vám všeobecný tvar čo rutina udalosť vyzerá
nižšie, ktorá je na udalosti.
A potom, váš kód vo vnútri, že.
>> MIKE RIZZO: Existujú nejaké otázky o tom?
To môže byť trochu mätúce Prvýkrát ju vidieť.
>> TOMAS REIMERS: Vy naozaj chcete otvoriť súbor a ukázať im niektoré
jQuery práve teraz?
>> MIKE RIZZO: Jo, ideme na to.
OK.
>> TOMAS REIMERS: Tak teraz sme v prístroji.
A to, čo sme urobili je, že sme si vziať sloboda vytvárať ako je index.html
súbor, ktorý odkazuje na súbor JavaScript.
A môžeme otvoriť -
jo.
No, to robí dve veci.
>> Prvým z nich je, že odkazy na súbor JavaScript.
A uvidíme, že až tu.
Vidíme, že v čele HTML dokument, a to najmä.
Takže uvidíte tam, že sme sa v podstate povedať, SRC,
čo je skratka pre zdroj.
A to je URL.
>> Tak tu si môžete povedať, že sme si vrátane jQuery.
A my sme tiež skripty.
Iný spôsob, ako zahrnúť JavaScript je , Ktorý môže obsahovať vložené skript
tag, ako sme sa v spodnej časti, kde sa hovorí, že typ skriptu je textový JavaScript.
>> Takže hovoríme, počúvaj, my sme o zaradiť skript.
A typ tohto skriptu je JavaScript, čo je typ textu.
Veľmi jednoduché.
>> MIKE RIZZO: Takže to, druh, k lopte sa Vaša otázka o tom, ako sú
JavaScript v našich súboroch, pretože keď sme sa sa PHP, robíme niečo také.
A potom, máme svoje PHP funkcie - povedzme, že zásoby robiť
čo s tým -
ide tam.
Avšak, teraz máme tagy skriptu že sme sa dať, ktoré sú v skutočnosti
súčasťou HTML sám, pretože to nie je predstiera, že súbor HTML, ako to
je v PHP, pretože ak ste skutočne ísť a pozrieť sa na zdroj stránky,
uvidíte tieto tagy skriptu tam s JavaScript spojené s
im v tom.
>> Takže, ak by sme chceli napísať nejaký JavaScript -
povedzme, že by sme chceli zmeniť telo pretože teraz nemám
všetky ostatné značky, ktoré som si naozaj upravovať vedľa tela.
Povedzme, že som chcel, aby zmeniť CSS z toho.
Takže budeme pokračovať a zmena farba to na červenú.
>> Tak som súbor uložte.
Vráťme sa na našich webových stránkach, obnoviť, a to automaticky robí
, Pretože to nevyzeralo, ako by čakal, vôbec, pretože sme neboli počúvanie
na akciu alebo niečo podobné.
>> TOMAS REIMERS: Takže keď sa vrátime k tomu súbor najmä - HTML
súbor - čo budete vidieť ich máme -
si uvedomiť, že toto je načítaný, druh, chronologicky.
Takže máme prvú hlavu. načíta tie dva súbory.
Potom ideme k telu.
A vidíme, Hello World.
Tak sme činí Hello World.
>> A potom posledná vec, ktorú máme je máme tag script.
Tak to beží tag script, pretože je to nehovorí to nič čakať.
A to je to najzákladnejšie spôsob, ako spustiť JavaScript.
>> Vďaka, že povedal, môžete si dať skript označiť v záhlaví len
ukázať tento bod?
A spustiť to.
Budeme všimnúť, že nezmenil farbu.
A to je jeden z problémov JavaScript je, že veci sú načítané
v chronologickom poradí.
>> A tak v čase, keď tento kód bežal, sme si vybrali -
späť -
tag telo.
Tag telo ešte neexistuje, pretože JavaScript je v súlade s HTML.
Takže prehliadač je ako vyberte tele.
Je tu ešte žiadna taká vec.
Takže môžeme ignorovať.
A budeme pokračovať.
>> A potom sme sa definovať tag tela.
Ale nikdy sa aktualizuje.
Takže, keď ste vykonávania skriptu tagy, uistite sa, že miesto
po tagu body.
Ďalšiu snímku.
>> MIKE RIZZO: OK.
Tak sme niečo zmenili.
Ale to nevyzeralo, ako by reagoval na nám vôbec, pretože je to len trochu
to urobil, akonáhle načítanie stránky.
Takže teraz, namiesto toho robil to, prečo Čo keby sme pridať obslužnú rutinu udalosti.
>> Takže poďme niečo urobiť k telu znova.
A povedzme, že sme to na -
kliknite na tlačidlo.
Ak budeme pridať funkciu.
>> Tomáš Reimers: Zmeňme je to farba na červenú znova.
Prečo nie?
>> MIKE RIZZO: Jo, poďme zmeniť jeho "farbu na červenú znova.
Dobrá.
Takže poďme znova načítate stránku.
OK, uvidíme -
ako sa očakávalo, to nie je zase ešte červená.
Ale potom môžeme ísť do toho a kliknite na neho.
>> TOMAS REIMERS: A to sčervená.
>> MIKE RIZZO: A to robí sčervená, ako sa očakávalo.
>> TOMAS REIMERS: A vidíme, ako môžeme začať budovať veľmi jednoduchý
interakcie.
Ďalšie veci, ktoré sme mohli chcieť urobiť, je, ak nechceme, aby sa telo
farba červená, poďme robiť HTML pozadia farba červená.
Rovnako tak je to rovnaké CSS.
>> A keď sme sa to zmeniť, môžeme vidieť Veľmi dramatický efekt zmeny
celá stránka.
Takže znova, ak ste sa vykonáva veci, môžete mať jednu zložku
ktorý je určený na klikol na.
Povedzme, že tlačidlo Exit a celý ďalšie komponenty,
ktorý je určený k reakcii.
Takže by ste odstrániť okno keď sa to stane.
>> MIKE RIZZO: OK.
Len ako príklad -
ste nedostal vidieť skôr -
Ukážem vám, ako to vyzerá Páči sa mi, keď sme sa schovať niečo.
Takže budem pokračovať a to posunutím nahor.
>> TOMAS REIMERS: Chcete zabaliť, že v Typ odsek skôr ako my, že?
>> MIKE RIZZO: OK.
Jo, prečo nie my, že len preto, môžeme vybrať to trochu viac.
>> TOMAS Reimers: A poďme dať triedu.
>> MIKE RIZZO: Jo.
OK, tak sa poďme pozrieť.
Namiesto výberu vlastné telo teraz, budem len vybrať všetko, čo sa
trieda ahoj, ktorý sme tu len jednu vec.
Takže by sme nemali mať na obávať, že.
>> Takže budem aktualizovať ho.
Pôjdem do toho a kliknite na neho.
A to, trochu, urobil divný Slide sa vec, ktorá nevyzerala, že
atraktívny.
Všeobecne platí, že vyzerajú celkom pekné.
Myslím, že tento - pre niektoré dôvod - nie.
Budem proste robiť fade out, takže sa môžete pozrieť na to taky.
Oveľa krajší.
>> A potom, keď som otvoriť JavaScript konzola znova a chceme vidieť, čo
to vyzerá, ako keď sme slabnúť ju dovnútra
Teraz, len hovorím slabnúť v tom.
A to vybledne späť dovnútra
>> Podobne by sme mohli vlastne tiež odovzdať argument vyblednúť alebo fade out,
ktorá je, druh, rýchlosť to.
Tak poďme do toho a že chceme to ísť pomaly mizne dovnútra
Takže myslím, že to ešte zdalo, celkom rýchlo.
Ale to bolo pomalšie ako predtým.
>> TOMAS REIMERS: A ak chcete nájsť Viac informácií o týchto veciach, opäť,
stačí ísť do dokumentácie jQuery, ktorý sme vám dal, a prečítajte si
cez to.
Oni dokumentovať ich funkcie neuveriteľne dobre.
>> MIKE RIZZO: OK.
Takže si myslím, vráťme sa k tomu.
A môžeme hovoriť o našej poslednej stránke.
No, môžeme skončiť s Bootstrap.
A potom si otvorte ju na niektoré otázky.
A ak vy máte nejaké nápady, ktoré by ste chceli, aby sa pokúsili hodiť hore a vidieť
v prípade, že ich môžeme realizovať s JavaScript rýchlo.
>> Takže naozaj rýchlo o Bootstrap, ktorá bola automaticky zahrnuté do
Vaše posledný problém nastaviť v priečinku CSS a v skutočnosti spojené s vo vašej
header.php.
Takže by ste mohli ste pridali tried, ktoré sú definované v rámci Bootstrap k nemu.
A to by sa automaticky štýlu tie veci podľa toho.
>> TOMAS REIMERS: Tak Bootstrap je veľmi magická vec vyvinutý ľuďmi
na Twitteri.
A čo to bolo chcel urobiť, bolo -
Pred webové stránky boli naozaj ťažké, aby sa Sluší ti to, zvlášť keď sme mali
veľa spoločných prvkov.
Takže veľa tlačidiel na web vyzeral rovnako.
>> Mnoho textových polí môžu byť vykonané vyzerajú lepšie ako štandardný text
pole, ktoré pravdepodobne poznáte z naozaj Staré webové stránky alebo naozaj zle vykonaná
webové stránky, ktoré rovnako vyzerajú ako doslovný textové polia bez akejkoľvek forme textu
tieň alebo akékoľvek pekné osnovy.
Takže to, čo Bootstrap urobil, bolo, že povedal, dobre, Máme veľa spoločných štýlov.
Prečo robíme jednu spoločnú sadu CSS a spoločný súbor JavaScriptu, ako
dobre, čo je štýl ako je, a ktorý môže dať ľuďom veci, ako je pokles
down menu, ktoré môže dať ľuďom veci ako modálne slovesá.
>> Modal je to, čo sa objaví na stránke vždy, keď je to prísne vzaté
niečo, ktorý ďalej inhibuje interakcie, kým
komunikovať s ním.
Niečo také je, ste si istí, Ak chcete odstrániť túto vec?
Nemôžete robiť nič iné, kým sa povedať áno alebo nie.
>> Trvalo to všetko a to balí ju dohromady a povedal, ideme na to.
Ľudia teraz môžu použiť.
A nájdete ju na getbootstrap.com.
To bol automaticky zahrnuté do Vaše posledný problém nastaviť.
A vy ste viac ako vítaní použiť ho na svojom poslednom projekte.
A ak chcete z toho, že prepojiť, aby sa Bootstrap.
>> Uvidíte tu Zavedený CSS stránky.
Uvidíte Bootstrap.
A ak sa posunúť dole, uvidíte ako stiahnuť, ako sa
nainštalovať, et cetera.
>> MIKE RIZZO: A môžete tiež, dosť zaujímavé, prispôsobiť tak, aby
sa bez ohľadu na druh tém ktoré chcete.
Viem, že je to niečo, čo som urobil pre moje Konečný projekt, keď som vzal triedu
bolo prispôsobiť sa.
Iná verzia Bootstrap, že mal inú farebnú schému a
rôzne tvary niektorých rôzne veci.
Tak som sa povzbudiť, aby ste si s tým.
Je to celkom zábavné robiť.
>> TOMAS REIMERS: Pohľad cez horný znovu, je to veľmi podobné písmo
Super miesto.
Mnoho dokumentácie začne vyzerať podobne, keď ste
videl dosť.
Takže tu máme CSS súčasť tohto.
A uvidíte, ako to môžete štýl veci.
Takže ak kliknete na tabuľkách, napríklad, môžete okamžite vykonať
Tabuľka celkom jednoducho pridaním trieda stôl k nej.
>> Rovnaké veci na gombíky.
Ak jednoducho pridať triedu BTN a BTN predvolený alebo BTN primárnej, môžete
sa niektorý z týchto tlačidiel s týmito pre-made štýly.
A potom, ak hľadáte pre niečo zložitejšie, než len
rekonštruuje, čo w už viac ako na Karta JavaScript celej hornej my
majú veľa dielov.
>> Takže tu máme prechodov, modálne slovesá, rozbaľovacích ponukách, karty a popisky.
Tooltip je to, čo sa objaví pod vaším myši, keď podržíte na niečo.
Popovers, upozornenia, tlačidlá, skladacie harmoniky je to, čo
oni sú zvyčajne nazýva.
Kolotoče, ktorý Flip až ako obrazy.
>> Takže to sú komponenty z Bootstrap.
Chcel by som vás povzbudiť, aby vysoko ísť na ne pozrieť.
Tam je zložka JavaScript a zložka CSS.
Neváhajte a používať ich ako ty.
Nebudeme sa moc ísť do nich pretože máme pocit, že dokumentácia
Je naozaj dobre.
A jo.
Máte nejaké otázky týkajúce sa, že?
>> MIKE RIZZO: Tak, ako sú naozaj rýchle strana, dizajn tejto webovej stránky, ktorá
sme sa rýchlo dať dohromady táto prezentácia je
v skutočnosti vykonáva pomocou Bootstrap.
Ako môžete vidieť, keď klikneme na nich rôzne karty, my sme vlastne nikdy
opustenie tohto prúdu index.html stránku.
Takže to, čo máme, je rôzne divs v tomto index.html.
A potom, keď sme kliknite na iný karta, je to len zmenou
ktorá niečí predstavenie.
>> Tak to teda pozícia je, zmení HTML stránky tak, aby
Karta prúd je označený ako aktívny, takže zdá sa inak a vzhľad
naozaj pekné.
>> TOMAS REIMERS: Takže to všetko bolo vykonané bez toho, aby nám písať takmer každý CSS.
Tiež pozri záhlavie v hornej, ktoré farby sú u nás.
Ale skutočné uvedenie na Horná časť stránky a robiť
to zvitok bol Bootstrap.
A potom aj pre iné knižnice - to nie je tá, ktorú sme hovorili o, ale jeden
môžete Google, ak budete chcieť.
To sa nazýva prettify.js.
A to bude zvýraznenie syntaxe kódu Pre použitie aj CSS a JavaScript.
>> Posledná vec, ktorú chceme hovoriť o tom, predtým, než sme sa uvoľniť vás do
Svet sa pozrieť na knižnice prísť na to, ako ich používať a, dúfajme,
prečítajte si dokumentáciu a nájsť to, čo ste Potreba je, ako nájsť knižnice.
Takže prvá je, že sme len bude tlačiť Google.
Choď Google.
>> To je doslova to, čo budeme robiť, keď sme musíte urobiť niečo, čo je Google my.
Je tu knižnica JavaScript, ktorý mi umožňuje manipulovať čas
užitočný spôsob, ako?
Takže, ak ja viem, že niektoré užívateľské vytváranie účtu tu, a to je
aktuálny čas, ako môžem spočítať Rozdiel, ktorý bez toho, aby museli
vypočítať to sám?
Takže to je vlastne bežná vec, JavaScript čas knižnice.
A tu sme Moment.js-- jeden z najobľúbenejších.
>> Ak budeme potrebovať knižnicu pre manipuláciu niečo ako farba, aby bolo možné
generovať veľa náhodných farieb -
prípadne, pre generovanie štýl alebo tak niečo -
mohli by sme sa Google niečo ako JavaScript farba knižnica.
A som si istý, že by sa pop-up s tisíc a jeden z nich.
Ste vítaní, aby si cez ne.
>> Takže väčšina vecí - keď ich nájdete - sa chystáte byť umiestnený na jednom z
stránky, ktoré hostiteľ kód.
Sú to niekoľko z nich populárne.
Najviac populárne tým, že Zatiaľ je github.com.
A ak idete na GitHub, že je to v skutočnosti kde Normalizácia moderoval.
Takže ak sa chcete vrátiť k tej jednej.
Ukážte im, že.
>> MIKE RIZZO: A to je vlastne, kde to je hosťovaná taky, či ste si všimli.
>> TOMAS REIMERS: Jo.
Takže ak pôjdete cez normalizovať a ísť na GitHub.
Boli to je?
>> MIKE RIZZO: To je malá mačka, čo je symbol GitHub.
>> TOMAS REIMERS: Oh.
Takže GitHub používa metódu nazvanú Git na uloženie kódu.
Je neviete, čo to je, alebo to vás desí, to je v poriadku.
Nemusíte vedieť, čo Git je pretože GitHub má tlačidlo Stiahnuť
v pravom dolnom rohu.
>> Ďalšia užitočná vec vedieť o GitHub je väčšina výrobkov
bude mať read me.
A ak nemajú webové stránky, čítať, aby som sa bude hovoriť o tom, ako
nainštalovať, ako ju používať, čo to áno, et cetera, et cetera, et cetera.
To, čo sme v podstate boli chôdze vás.
>> MIKE RIZZO: Internet je prestať fajčiť.
>> TOMAS REIMERS: To je v poriadku.
Posledné dve veci, ktoré sme chceli hovoriť -
sme hovorili o git -
je riešenie problémov.
A toto nie je relevantná pre konečného výrobku, ako je
keď necháte 50.
A keď sa dostanete do produktov vykonávanie knižnice alebo vykonávanie
svoj vlastný projekt, budete mať otázky alebo ste
bude vyzerať na otázky.
>> Opäť platí, Google ho.
To je doslova to, čo robíme.
To bude znieť hlúpo.
Ale doslova sme ho Google.
A opäť, jedna z prvých vecí, budete zvyčajne beží na je
stackoverflow.com, čo je nádherný Otázka a odpoveď zrak.
>> Je to úžasné, pretože ako môžete post otázky a hľadať na
odpovede, ale tiež preto, že to už je veľa
dopredu vyplnené obsah tam.
Takže väčšinou, keď sa Google v programovaní otázka v rámci prvej
pár hitov, ktoré ste už spustili do neho počas vášho problému sád.
>> A potom, konečne naozaj krátka vec je JSFIDDLE, čo je - dnes máme
robil veľa práce s JavaScript HTML CSS.
JSFIDDLE je webová aplikácia, ktorá v podstate umožňuje, aby sa vaše HTML, YOUR
JavaScript vľavo dole, a vaše CSS v pravom hornom rohu.
A potom to môže vytvoriť rýchly render IT a uvidíte, ako to ovplyvňuje.
Je to veľmi užitočné, keď sa ľudia snažia urobiť proof of concept, ako
To je, ako by ste to rozbaľovacie menu.
Možno, že rýchly odhaliť alebo čokoľvek iného.
>> MIKE RIZZO: Tak ideme na to dopredu a kliknite na to.
Krátka poznámka -
vzhľadom k tomu, ako sme boli robí na kliknutie.
Ukázalo sa, že JCorey Kórea má tiež vstavaný V click obsluhu udalosti, ktorá je
používa len preto, že čísla ste bude chcieť robiť veľa vecí,
ak chcete kliknite na niečo.
>> Podobne, má tiež vznášať.
Ale dostať plný rozsah tie, pozri sa na jQuery
dokumentácie a urobiť to.
Urobil som niečo hlúpe tu.
>> TOMAS REIMERS: Tak som sa naozaj rýchlo Program tu, ktorý hovorí,
tlačidlo na myši.
Potom máme pre sláčiky.
U i je menšie ako 404.
Je to jednoducho bude pop-up Tieto výstražné správy.
>> MIKE RIZZO: A čo bolo kód 404 stál v HTML?
Pamätá si niekto?
Nebol nájdený, vpravo.
Chrome tiež pridal to čistý vec, kde môžete -
>> TOMAS REIMERS: Pretože ľudia ako Mike začal robiť to veľa a
otravné užívateľa, čo umožňuje môžete vidieť informácie.
>> MIKE RIZZO: Jo.
>> TOMAS REIMERS: Máme nejaké otázky o tom, o JavaScriptu
knižnice, nájsť knižnice, alebo čo vývoj webových vzhľad
rovnako ako v reálnom svete?
Sme beh proti času.
Takže si nie som istý, ideme mať čas na prevedenie
ak je to naozaj rýchlo.
Sme dobrý?
>> MIKE RIZZO: niečo, čo ľudí chceli vidieť naozaj rýchlo, tak za dva
minút alebo menej?
>> TOMAS REIMERS: niečo môžeme objasniť?
Ako písať -
>> DIVÁKOV: [nepočuteľné]?
>> MIKE RIZZO: Áno, tak to je -
>> TOMAS REIMERS: Môžete len hit Control-U na internetových stránkach.
>> MIKE RIZZO: Oh, nevedel som, že.
>> TOMAS REIMERS: Myslím, že jo.
Control-U. Jo.
>> MIKE RIZZO: Aha, tak to je Kód pre webové stránky.
Ale ak si naozaj chcete stiahnuť naše súbory a všetko, to je hosťovaní
na github.com
>> TOMAS REIMERS: lomítko moje meno -
Tomáš Reimers - slash CS50 pomlčka seminár.
>> MIKE RIZZO: A môžete tu všetko tam.
>> TOMAS REIMERS: To je to, čo GitHub vyzerá, mimochodom.
Takže znova, keď vidíte open source projekt, typicky, že bude čítanie
ma tam, že si môžete prečítať.
A keď sa vrátite, zistíte, že budete mať sťahovanie zips, ktorý bude
vám umožní stiahnuť zdroj kódu
produkt vo svojej vlastnej veci.
>> MIKE RIZZO: Jo, a keď sme stačí kliknúť na index.html naozaj rýchlo -
>> TOMAS REIMERS: Uvidíte tu Zdrojový kód pre naše webové stránky.
>> MIKE RIZZO: Tiež som zabudol posunúť vpravo skôr s veľkým stolom je
v cene, ale je tu tiež tabuľku z chmods, že sme súčasťou
iba pre prehľadnosť.
Ale ak budeme prechádzať celú cestu dole do dno, sme nemali vlastne robiť veľmi
veľa sa JavaScriptu veci vôbec s tým.
Je to výhradne od všetkého iného, ​​čo sme mali.
>> Takže ďakujem chlapci prišli a počúvania.
Dúfame, že to bolo naozaj užitočné.
Ak máte akékoľvek JavaScript súvisiace otázky, alebo len chcete o tom hovoriť
čo iné, ako to, čo ďalšie skvelé veci môžete to urobiť pomocou JavaScriptu, radi by sme
s tebou hovoriť.
>> TOMAS REIMERS: Ak máte otázku o projekte, alebo či to môže byť
relevantné, pravdepodobne budeme držať okolo trochu po tomto.
Ale iné, než to, že majú dobrý víkend.
>> MIKE RIZZO: Jo, baví.
Uvidíme sa.
>> TOMAS REIMERS: Maj sa.