Tip:
Highlight text to annotate it
X
>> TOMAS REIMERS: Szia, mindenkinek.
A nevem Tomas Reimers.
>> MIKE RIZZO: Én meg Mike Rizzo.
>> TOMAS REIMERS: Mi vagyunk két CS50s TS.
És ma mi vezet a szeminárium JavaScript és CSS web apps.
Ha azt szeretné, hogy kövesse végig a kapcsolat ott van.
És akarod tedd fel a számítógép rövid ideig?
>> Itt a link.
Ez egy kis site, amely hivatkozásokat tartalmaz a források mi lesz
mutat meg ma, és még van egy csomó hasznos információk írta, hogy
tovább mélyreható, ha megy vissza, és próbál emlékezni, milyen
Pontosan nem azt mondjuk, mit beszél, satöbbi.
>> MIKE RIZZO: Rendben.
Kezdjük.
>> TOMAS REIMERS: Így akarsz kezdeni?
OK.
>> MIKE RIZZO: Igen.
Tehát először akartam kezdeni egy széles áttekintést ad az internet és a
fájl típusokat honlapok tervezése.
Bár ez az előadás mi szeretnénk kap a JavaScript sokkal sokkal
később, azt akartuk, hogy elindul csak, olyan, mint egy madártávlatból
hogy mi a honlap, és hogyan gondolni tervezése
weboldalon a kezdet.
>> Szóval srá***, ezen a ponton - vele hogy péntek este - kell
nyújtott be a CS50 pénzügyek probléma beállítja.
Remélhetőleg, ez egy jó ízű hogy milyen webes programozás lehet.
De itt akarunk, olyan, hogy egy másik íz is.
>> TOMAS REIMERS: Szóval összefoglalva, mit történik, ha beírja az URL a
a böngészőjében, hogy az URL lesz nézett fel a számítógépre.
És a számítógép csatlakozik egy másik számítógépre,
mely otthont ad a weboldalon.
OK, így amikor elmész google.com, akkor csatlakozik egy Google
számítógépek, amely a fájlok google.com.
>> Ezután kér egy adott fájlt.
Tehát, ha megy, hogy -
Nem tudom -
example.com / index.html vagy / proba.html, fogsz kérni
az adott fájlt.
És a webszerver megy vissza neked.
>> Aztán, ha valaki átmegy a fájlt -
ha már a számítógép lesz, hogy file - ez fog kezdeni
hogy építsenek egy internetes oldalon.
Így most már a HTML fájlt, amely a fajta, mint a
szerkezete a weboldalt.
A HTML-fájl is hivatkozik CSS fájlok, amelyek meghatározzák a
stílus a weboldalt.
>> JavaScript fájl, amely meghatározza kölcsönhatás a weboldalt.
Képfájlok, amelyek csak a képeket.
És esetleg hivatkoznak más HTML fájlokat, amit aztán látogat.
>> MIKE RIZZO: OK, nagyszerű.
Szóval ti mind, talán, lelkiismeretesen létre, a helyi gazda
a virtuális gép.
És ez csak, olyan, a helyi tartományban, hogy a számítógép a házigazdák csak a
Ön a saját IP-címét.
>> Tehát ezen belül, akkor hozzá hogy ez a saját weboldalakat.
Úgy értem, CS50 Finance, akkor kellett volna hozzá néhány HTML oldalakat, amelyek,
fajta, csomagolt a PHP wrapper.
De végül is, mi a PHP oldalak voltak kimenetre a HTML.
>> De gondoltam vissza a kezdetekhez A Pset, meg kellett állítani
Az engedélyek mindent, nem igaz?
Tehát ez csak alapvetően lehetővé teszi számunkra, tudjuk, aki tud olvasni, írni, és talán
végre az egyes fájlokat.
Így fogunk csinálni egy gyors - hm?
>> TOMAS REIMERS Szóval megyünk hogy egy gyors demo.
Szóval, csak hogy emlékeztessem önöket, ha csatlakozik a Google számítógépes -
aki -
és kérjen egy fájlt a számítógép első kell, hogy biztosan csak engedélyezett
hogy ténylegesen véli, hogy a fájl vagy olvastam, hogy a fájlt, mert akkor nem csak kérni
minden olyan fájlt, hogy a számítógép, nem?
Ez lenne a biztonsági ***ázatot.
>> Így fájlokat a rendszer is használható, mint például ez CS50 készülék, három
általában az emberek, akik lehet engedélyeket valamit.
Az első a tényleges tulajdonosa az említett fájlt.
A második az, hogy a csoport A fájl tartozik.
Nem fogunk összpontosítani túl sok rajta.
És az utolsó dolog, valami, mint a világ, vagy, mint mindenki más, aki
Nem jellemző, hogy a fájl, és nem bármilyen tulajdonosi jogokat biztosít.
>> Tehát, ha van tulajdonos, csoport, , majd a világban.
És aztán, minden egyes ilyen csoportok, akkor lehet egy három engedélyek,
OK, vagy több közülük.
Lehet olvasási engedélyekkel.
Lehet, hogy jobb engedélyekkel.
És akkor végre jogosultságokat.
>> Így tekintve a tényleges fájltípusok, olvassa el engedélyt, mint valójában olvasás
a fájl tartalmát.
A megfelelő engedély írás az említett fájlt.
Egy végre engedélyt fut a fájlt, mint te, ha fut egy
A CS50 projekteket.
>> Tehát, ha nem gondolkodik kép mint amikor azt kell olvasni egy HTML
fájlt, hogy kell, hogy a világ olvasható, igaz?
Feltehetően szintén a tulajdonos akar hogy képes szerkeszteni a fájlt.
Így a tulajdonos lesz szüksége olvasási és írási.
Ők nem igazán kell végrehajtani.
>> Group, megyünk kezelésére ugyanaz, mint a világ most.
Tehát szükség van olvasási engedélyekkel.
De nem kell írni vagy a végrehajtási jogot.
És most, ha azt gondolom, vissza a korábbi PSETs, amit észre az ilyen jellegű
úgy néz ki mint a bináris, nem igaz?
1 jelentése van.
0 = nincs.
És valóban fordítani ezt a bináris.
>> Tehát 110 bináris lenne 6..
100 lenne a 4..
Ugyanez a helyzet a világ.
Így a szám akkor kap a engedélyek ez lenne 644.
>> MIKE RIZZO: És ha úgy gondolja, vissza ha chmoded valamit, azt hiszem,
adtak a probléma meg a példája, ahol meg lehet csinálni
valami ilyesmit chmod 644 , majd a fájl nevét.
A 644, akkor, most már láthatod közvetlenül ahol ez jön.
Így remélhetőleg teszi, hogy egy kicsit világos.
>> És akkor az Ön fickó világosság -
ó, igen, itt van megint.
Így 600, akkor lenne csak a példa feladtuk itt, ahol a tulajdonos
olvassa el és jobb engedélyek míg csoport és a világ nincs engedélyekkel
elérni a fájlt.
>> TOMAS REIMERS: És akkor egy gyors lista a közös jogosultságokat.
Tehát könyvtárak, akarod hogy ténylegesen chmod 711.
Gyors félre - a könyvtár, hogy a végrehajtható jogosultság azt jelenti, hogy képes
hogy nyissa meg a könyvtárat.
Képek, CSS, JavaScript, HTML igények 644, mert alapvetően a világ
igények olvasási jogosultsággal.
>> És a PHP, maguk már láttak Annak ellenére, hogy nem beszélünk róla
szigorúan jellemzően chmoded a engedélyt 600 mert fut
Az engedélyek a tulajdonos.
Legalábbis be a készüléket.
>> MIKE RIZZO: Tehát, ha nem kifejezetten határozza meg, milyen típusú fájl
kívánt tényleg beállítás ezt prezentáció -
mi volt a probléma, mert mindent nem chmoded helyesen -
fogsz kapni, olyan, a tiltott hiba, hogy a honlap
valójában nem rendelkezik engedéllyel eléréséhez bármilyen fájl
azt akarja elérni.
És persze, hogy lehet rögzíteni - mint a probléma meg - változtatásával
engedélyek megfelelő.
>> TOMAS REIMERS: És az utolsó hozzászólást gyors helyi fejlesztés - mi
hozta fel, de mi csak azt akartam, hogy fel újra -
ha kér egy szerver - így a helyi host, például. com vagy bármi -
, és nem adja meg egy adott fájl, A fájlt a számítógép megy
kérni neve index.html.
Vagy ha ez nem létezik, index.php.
>> Cool.
Szóval ez csak bedugni mindent, remélem, hogy már tárgyalt
rész, és előadás, és eddig CS50.
És most fogunk kezdeni beszélni a külön könyvtárakban.
JavaScript és CSS könyvtárak A webes alkalmazások.
>> Tehát az egyik gyors oka annak, hogy könyvtárak programozás -
van egy csomó problémát programozás, amely folyamatosan felbukkanó
újra, és újra, és újra.
Talán észrevetted, hogy egy csomó honlapok szükségünk van a képesség, hogy a legördülő
menük, például, vagy szükség van a képesség van egy nagyon általános gomb
stílus, amely nem lehet a legegyszerűbb dolog.
Most, hogy elkezdi bejutni HTML, akkor észre, hogy a gombok is valójában
meg nagyon csúnya, ha nem csinál semmit.
>> Szóval egy csomó ember írt nevű könyvtárak.
És ebben az összefüggésben, ők más néven keretek között.
Fogjuk használni a két szinonimaként.
És mik azok az ők alapvetően premade darab kód -
vagy CSS vagy JavaScript -
hogy elveszi sok a csapat van a kódolás.
>> Így előre határozzák meg egy csomó osztály, illetve előre határozzák meg egy csomó funkciók
JavaScript esetében, amely hívhatja a későbbiekben.
És akkor, a fajta, hogy hozzáférést ezt a kódot anélkül, hogy
kelljen semmit.
Egy példa a könyvtár volt CS50.H. Ez a könyvtár azt adta vissza
az első héten, ami lehetővé tette, hogy nem ilyeneket getInt és getString
anélkül, hogy írni bármilyen kódot magad.
>> MIKE RIZZO: Rendben.
Tehát itt, ahogy kellett, hogy tartalmazza a mi c fájlokat a különböző
könyvtárak, mi is kell tartalmaznia a HTML fájlok különböző könyvtárakban.
Például, ha azt akartuk, hogy tartalmazza speciális JavaScript könyvtár itt,
talán az egyik, hogy írtam magunkat, mint ez helyben tárolt
úgynevezett script.js, mi csak ezt a jelölést.
>> Tehát script típusú egyenlők JavaScript forrás egyenlő
JavaScript.js.
És ha úgy gondolja, vissza a CS50 finanszírozási probléma meg, ha nézett
header.php a Sablonok mappába, látnod kellett volna
ezek közül néhány tartalmazza.
Tehát ez az első - a szkriptek -
van köztük egy JavaScript könyvtár.
Beleértve a CSS könyvtár egy kicsit más.
>> Itt, ahelyett, hogy a forgatókönyvet Tag szükség van a link tag.
És akkor, a szöveg CSS típus egy kicsit más.
Nem minden esetben tartalmaznia kell rel stíluslap.
De azt hiszem, hogy ez általában jó gyakorlatok.
>> És végül, a HREF, amit valószínűleg látta a ATAGs összekapcsolására
a különböző kapcsolatok csak meghatározza a kapcsolatot, hogy hol találjuk meg.
Például, ha azt akartuk kapcsolni a más könyvtár - mondjuk -
hogy élt styles.css.
És mi volna összekapcsolni, hogy ez házigazdája az interneten, mi lenne vettem.
És akkor illessze bármilyen van itt helyette.
>> TOMAS REIMERS: OK, remélhetőleg a srá*** már ismert
, hogyan kell összekapcsolni CSS.
Meg kellett tennie, hogy a az utolsó, barna készüléket.
JavaScript, néhányan talán van némi tapasztalata.
Néhányan lehet, hogy nem.
>> Tehát most, tudom, hogy a JavaScript fájl nagyon hasonlít a CSS fájlt
az értelemben, hogy van-e linket, vagy hogy akkor is meg belsőleg.
És ez lehetővé teszi, hogy script a dolgokat.
És megyünk végig egy kis JavaScript később.
>> Tehát egy könyvtár -
ha egyszer már benne is, ez olyan egyszerű, mint a szó szoros értelmében hívja a
funkciók vagy hozzáadása osztály nevét hozzá.
Az utolsó dolog, amit szeretnék beszélni a szempontból Könyvtár -
és ez inkább egy technikai megjegyzés -
nyílt forráskódú licenc.
Tehát, ha úgy találja, ezek tényleges könyvtárak, akkor lehet gondolkodni a
kérdés, mint az, hogy rendben van, hogy én vagyok használ valaki másnak a kódját, különösen
mert ez valami, amit nagyon Mondtam, hogy nem ezen a kurzuson.
>> Tehát abban az esetben, nyílt forráskódú licenc, egy csomó fejlesztő -
egyszer már írt egy könyvtár, amelyek azt hiszik, lehet
hasznos, hogy más emberek -
teszi közzé, hogy a web és adja meg az engedélyt.
És egy engedély lényegében azt mondja, én ezennel engedélyt ad a többi
az embereket, hogy használja ezt a szoftvert a következő fajta
előírásoknak.
>> Már is egy linket egy jó oldalt segít megérteni az engedélyek
Ha befut őket.
Közös kikötések olyan dolgok, mint nyugodtan használni a könyvtárat, így
Amíg adsz hitelt.
Nyugodtan használni a könyvtárat feltéve, ha megszakad
nem hibáztat.
Nyugodtan használni a könyvtárat, amíg mivel nem használja a pénzt
magad.
Ezek a fajta közös előírásoknak.
>> Ehhez CS50 projekt végső, ők nem szuper fontos, mert
A projektek srá*** amelyet használni Valószínűleg inkább valami ismert.
De ha tényleg megy ki a világ, és kezdi el használni a könyvtárak, melyek
lehet vagy nem lehet végrehajtani, valamint néhány a legnépszerűbb is vagyunk
lesz majd rajta.
Jó, hogy képes legyen megérteni ezeket az engedélyeket és
megérteni, mit jelent.
És megy vissza.
>> MIKE RIZZO: OK.
Tehát most mozgó rá példa a tényleges CSS.
Ezen a ponton eddig, lehet, hogy nem találkozott ezzel.
De lehet, hogy találkozott azt a mindennapi életben, ha valami
úgy néz ki, az egyik módja egy böngészőt Lehet, hogy nem ugyanúgy néz ki
módon egy másik böngészőt.
>> Ezt nevezik a böngésző a böngésző kompatibilitás.
És egyre inkább ez egyre több és nagyobb problémát jelent, különösen a
böngészők, hogy egyre több és több szabadságjogok hogy végre a dolgokat, ahogy akarnak.
Így leküzdeni, hogy ténylegesen van egy nagy könyvtár nevű Normalize.CSS.
>> TOMAS REIMERS: Mi is a kapcsolatot.
Ezen a ponton, ez hasznos, ha a van a laptop ott
nézi az oldalt.
És mi így ezt a jobb Most egyszerűen azért, mert a CS50 végső
projekt valóban lesz kérni annak végrehajtására
hasonlóan és a böngészők.
>> Szóval, csak hogy ne a hátán a fej, ez egy csodálatos könyvtár
mert ez lesz, valami, egységesíteni a dolgokat.
A Firefox, valami mutathat az egyik pixel a bal oldalon.
És akkor Chrome dönthet úgy, hogy valóban amit jelentette, 10 pixel
balra.
És azt akarod, hogy egységesítsék ezt.
Normalize valóban csinál egy igazán jó feladata annak biztosítása, hogy a webhely
ugyanúgy néz ki minden böngészőben.
>> MIKE RIZZO: Tehát, ha azt akartuk, hogy csak kattintson a linkre, nagyon gyorsan és a show
hogy milyen, hogy néz ki, akkor letöltheti azt a
óriás Letöltés gombra.
Vagy azt javasoljuk, hogy tovább róla erre a hivatkozásra kattintva az alsó
a jobb sarokban.
>> TOMAS REIMERS: És ha tényleg kattintson Tovább ott -
kattintson a forrás GitHub -
akkor valóban látni a nyílt forráskódú licenc LICENSE.md ott.
És látni fogod, itt a nagyon népszerű MIT engedélyt.
Ismét, ha elolvassa a szöveget, Ön képes lesz arra, hogy megtalálja azt a helyszínen
hivatkozott mi előtt, és képes legyen megérteni anélkül, hogy olvasni
a jogi zsargon.
>> MIKE RIZZO: OK, nagyszerű.
Szóval ez normalizálódik.
Azt akartuk, hogy az Ön hogy nagyon gyorsan.
Ja, van egy kérdés?
>> Közönség: Tehát, ha le, akkor kövesse a kód, hogy van
a Letöltés gombra?
>> TOMAS REIMERS: Igen, így ha le -
>> MIKE RIZZO: Ó, ez egy jó pont.
Tehát a kérdés az volt, hogyan igazából letölteni?
Tehát, ha kattintson a linkre, látjuk hogy valóban durran
A forráskód.
Így kell ezt csinálni, amit lehetett nem csak a Mentés másként parancsra.
Mentés másként, és hogy kell hozza létre a fájlt.
És akkor lehet választani, hogy mentse azt normalize.CSS.
És akkor azt kell kötnie azt a -
>> TOMAS REIMERS: Ugyanúgy, ahogy hivatkozásra bármilyen más fájlt.
És ha egyszer hivatkoznak rá, mi a jó a normalizálás ez valóban
vigyázni minden kemény működik magától.
Azt jelenti, hogy nem kell hozzá semmilyen osztályok.
>> Nem kell tennie semmit furcsa.
Ez normalizálódik nélküled bármit is.
Igen, van, hogy tartalmazza azt.
A Google Chrome nem válaszol.
>> Csak egy gyors félre -
Észrevettem, hogy beugrott ez.
A többi ezt a bemutatót is lesz egy gyors áttekintést.
A felmérés a könyvtárak.
>> Alapvetően, mik azok.
Mit csinálnak.
Hogy ők hasznosak.
Hogy lehet, hogy hajtsa végre azokat.
Ha meg szeretné kezdeni nézi őket, követően végig, és az olvasás révén
őket, azt nagyon ösztönözni, hogy.
>> Másik lehetőség, hogy nyugodtan azt is, hogy elkezd letölteni őket, és többek között
őket a látvány, csak, hogy mit néz ki, vagy mit csinálnak, ha van
a laptop előtt van.
Ha nem, akkor szívesen, hogy hallgat minket beszélgetni.
Megyünk, hogy beszél.
És mi van idő a végén, remélhetőleg mi tényleg bejutni, amely megmutatja,
mi néhány ilyen könyvtárak néz ki.
>> MIKE RIZZO: Cool.
Rendben, most beszéljünk a betűtípus Félelmetes.
>> TOMAS REIMERS: így betűtípus Awesome egy Nagyon szép hely, különösen azok számára,
, akik kevésbé művészi tehetséges.
Figyelmen kívül hagyva a nevet Betűtípus Félelmetes, ez ad Ön egy csomó ikonok, amelyek
nagyon hasznos.
Szóval egy csomó idő lesz végre egy ikont, akkor azt szeretné, mint egy szép x, így
hogy bezárhatja valamit.
>> Vagy érdemes valamilyen Szerkesztés gombra egy ceruzarajz, mint a
mindenki más is.
És ez, ha megtudjuk, hogy rajz ezek ikonok
nagyon fárasztó és nehéz.
Betűtípus Awesome - ha tényleg megy a site -
ad egy csomó ikonok alatt az ikonok a tetején.
Igen, csak a tetején.
Ez ad egy csomó ikonok ingyen.
>> Tehát itt látod, hogy a dolgok, mint egy csillag, bárok, a villám, a
naptár, egy hiba, egy könyv, et cetera.
Ez nagyon hasznos lehet.
Ahogy ezt te tartalmazza szó a CSS fájlban.
És miután szerepel a CSS fájlt, mit tehetünk, hozzon létre egy
tag neve az I. satands a ikon az osztály FA
állni betűtípus Awesome.
És akkor, amit osztály akarsz.
>> Tehát, ha azt akartam, egy ikon ez a plusz tér itt, adnék
ez az osztály FA.
És akkor FA kötőjel és kötőjel téren.
>> MIKE RIZZO: Cool, OK.
>> TOMAS REIMERS: És akkor, az utolsó CSS könyvtár azt akarjuk, hogy a mi
próbálja tartani minimális CSS könyvtárak azért, mert észre a
címe ennek bemutatása a JavaScript könyvtárak.
De azt gondoltuk, hogy itt meg is be, hogy a más könyvtárak
míg beszéltünk könyvtárak.
>> Ez a Google webes betűtípusok.
És mi a Google Web Fonts segítségével tennie, hogy adjunk betűtípusokat a honlapon,
amely egy nagyon egyszerű módja annak, hogy szép és megkülönböztetni a készüléket
mindenki másé, ha van egy szép betűtípust, vagy ha van egy szép
gyűjteménye betűtípusokat.
Google Web Fonts szép ellentétben más könyvtárak abban az értelemben, hogy ez a
Tényleg irányított telepítést.
>> Tehát, ha követi a linket, akkor google.com / betűtípusok, azt hiszem.
Ha követed, te kiválaszthatja a betűtípust.
Választhat a bal oldalon a vastag, ferde, et cetera.
És aztán, ha egyszer már kiválasztott, akkor kattintson a gyors használat.
Ott van.
Jobb alsó sarokban a doboz.
>> És akkor lapozzunk lefelé.
Először is, hogy megadja a CSS, hogy meg kell, hogy ténylegesen hivatkoznak rá.
Ott van.
Tudod csak másolja be, hogy be
És a szép dolog ez az egyik valójában nem is kell
töltse le a fájlt.
>> Mi ez fog tenni ez a helyzet link a Google változatát.
Tehát vissza az mit jelent.
Ez azt jelenti, ha a felhasználó letölti a fájlt -
letölti a HTML oldalt - a HTML az oldal fog hivatkozni a fájlt.
>> Tehát, a számítógép fog látni, ó, ez adott otthont a google.com helyett
mint theirsite.com.
Hadd menjen fel a Google, hogy a fájl.
És akkor, hogy fog közé ez majdnem olyan, mintha
része a saját honlapján.
>> TOMAS REIMERS: Cool.
És ha egyszer közé tartozik, hogy, majd tartalmazza azt a CSS, hogy megadja neked
az aktuális sort.
Tehát a tulajdonságot Font család megegyezik a neve a betűtípus.
>> MIKE RIZZO: OK.
Tehát most fejezte be a CSS.
És néhányan lehet, hogy gondolkodni, volt néhány CSS on CS50 pénzügyminiszter.
De a CSS könyvtár volt bootstrap.
Igazából közé Bootstrap egy kicsit később alá JavaScript mert
A Bootstrap CSS könyvtár is jön sok JavaScript
Bootstrap vagy a Twitter - aki Bootstrap -
használ kezeli az összes a CSS.
>> TOMAS REIMERS: Van valakinek bármilyen kérdéseket eddig a CSS általában?
Jók vagyunk?
Félelmetes.
>> MIKE RIZZO: Félelmetes.
>> TOMAS REIMERS: Tehát mozgó A JavaScript.
>> MIKE RIZZO: Szóval akart beszélni a jQuery kezdeni.
Van valaki hallott jQuery előtt vagy használta?
Igen, egy pár?
Tehát, ha csak a munka natív JavaScript, akkor találja magát
gépelés a sok hosszú választók sokat.
Tehát mi jQuery csinál ez biztosítja egy szép wrapper a JavaScript
nyelv, amely segítségével egyszerűen kiválaszthatja és manipulálni különböző elemek
a dokumentum objektum modell a weboldal vagy a DOM, ami szerintem
srá*** már hallott a előadás ezen a ponton.
>> TOMAS REIMERS: Ha még nem hallott , vagy ha még nem nézte előadás
mégis, a Document Object Model alapvetően a dolgok képviselteti magát.
Így HTML valami úgy néz ki, mint egy fa ha valóban dolgozzon ki.
Ön a HTML elem a tetején.
Ön a fej és a test.
>> És akkor, azon belül is meg mindent mást.
Ez a továbbiakban a DOM -
Document Object Model.
Tehát egy modellt, amely képviseli tárgyak A dokumentum egy egyszerű módja annak, hogy gondolni
erről.
És az egyik nagy dolog jQuery ez igazán teszi elmozdulási
ezt, és manipulálni elemei hogy a hihetetlenül egyszerű.
>> Olyan egyszerű, sőt, hogy a legtöbb JavaScript könyvtárak, vagy ha nem az
többség, a nagy többsége is látni fogod, valóban szükséges jQuery így
hogy lehet futtatni magukat egyszerűen mert ha nem volt jQuery, akkor
lenne hulladék sok időt próbál kitalálni, hogyan választják ki az egyes
elemeket, és hogyan kell csinálni más dolog.
A másik nagy dolog jQuery az, hogy ez több böngészővel kompatibilis.
>> Úgy emlékszem vissza, amikor azt mondta, hogy a nem minden böngésző végre
a dolgok ugyanúgy?
Ez akkor is igaz a JavaScript.
És az egyik legjobb dolog a jQuery az, hogy észleli a
böngésző és érzékeli a megfelelő módszert.
>> Tehát, ha ki kell választania egy elemet, Internet Explorer lehet azt mondani, hogy
kéne csinálni ezen a módon.
Firefox mondhatnánk a helyes módja az ezen a módon.
jQuery nem érdekli.
Amikor azt mondja jQuery válasszon ki egy elem fog rájönni, hogy ez
kéne csinálni a böngésző a felhasználó jelenleg, majd tegye
ez így.
>> MIKE RIZZO: Szóval ne beszéljünk A használata jQuery egy kicsit.
Csakúgy, mint a PHP, jQuery egy bizonyos szeretet az a dollár jel.
Akkor rájössz, hogy minden jQuery -
Nos, nem minden.
Meg néha cserélni a dollár írja alá a szó jQuery.
De általában, csak azért, mert rövidebb, amikor látod, hogy jQuery
használt, hogy lesz egy dollár jel.
>> Tehát itt mi csak mutatja a kezdet választó egy elemet a DOM.
Itt van a dollárjel utáni nyílt zárójelek, majd idézi.
És az idézetek megy a választók a különböző elemeket.
Csakúgy, mint a CSS, mi szükség van a választók tudja stílus különböző elemek
az oldalon belül.
Ezek a különféle választók fordítás pontosan a jQuery és JavaScript,
a legtöbb esetben.
>> Tehát itt van egy pont ize.
Tehát, ha emlékeztek előadás, A pont csak azt jelenti, az osztály.
Szóval kiválasztása elem osztályú foo.
Tehát, ha megyek előre, és nyissa fel a JavaScript konzol itt nagyon gyorsan
csak bizonyítani azt, ha én csak írja be a dollár jelet, azt látjuk, hogy valami
funkció, hogy jön fel.
És ez csak meghatározott jQuery.
>> TOMAS REIMERS: Azoknak, ismeretlen, a konzol egy eszköz
a Chrome, amely lehetővé teszi, alapvetően a JavaScript futtatását a
aktuális oldalt.
Ez találsz hihetetlenül hasznos, ha a te tényleg hibakeresést és
kell, mint, hogy mi a jelenlegi értéke néhány globális változó vagy mi
valami más?
Ez olyan, mint a GDB, kivéve hogy ténylegesen
manipulálják elemek az oldalon ez egy sokkal egyszerűbb módon.
És azt is, hogy nem, alapvetően, ellenőrizze veled, mielőtt csinál semmit.
>> Tehát mivel GDB lehet, mint, te Biztos, hogy futtatni a következő lépés?
A konzol valós.
Tehát, mint a web oldal renderelés és csinálja, amit csinál, a
A Tanács szintén fut mellette.
És ha nem tud tulajdonítani kódot hogy a konzol, ami
futtatni az oldalon.
>> MIKE RIZZO: Tehát, hogy adja meg a konzol, Azt hiszem röviden
beszélve, hogyan kell csinálni.
Az utolsó probléma, hogy lehet, hogy használt Chrome ellenőrizze elem
funkciók vagy nézet oldal forrását -
és ezek hozzáférhetők csak a jobb kattintson az oldalon, vagy egy adott
elem, és ezzel sem vizsgáljuk elem vagy nézet oldal forrását.
Azt is elérheti a JavaScript konzolt közvetlenül
választotta ellenőrizze elem.
Szóval, akkor csak nyomd konzol A jobb oldalán.
>> Alternatív megoldásként, akkor is ment A jobb felső sarokban,
amely el van vágva a képernyőn, ahol a azt a három vízszintes csík.
És menj le a szerszámok és Ezután JavaScript konzol
itt, ahol láthatjuk -
legalábbis a Windows -
A parancsikon vezérlő Shift J. Akkor ha azt akartuk, hogy válasszon ki egy elemet
belül ezen az oldalon, ahogy mutattam előtt, mi dollárjel nyitott parens
majd idézi.
>> Érdekes dolog, általában, aposztrófot és dupla idézőjel
cserélhető.
Tehát egy csomó ember csak használja egy idézetek, mert ők gyorsabban típus
mint idézőjelek, mert nem kell tartsa lenyomva a Shift billentyűt.
Szóval, én csak ezt, hogy most.
>> Szóval szeretném kiválasztani valamit osztályú.
Konténer, csak azért, mert tudom, hogy ez valamit, ami a mi
internetes oldalát.
És az Enter leütése.
És láthatjuk, hogy választotta.
Tehát azt mutatja fel, hogy a vissza az objektum.
Szóval ez egy alapvető választás.
Ha akartuk, hogy ténylegesen manipulálni, meg kellett volna hívni valami
az, hogy a szelekció, ami Mi lesz a későbbiekben.
>> TOMAS REIMERS: Szóval, csak nézni, hogy mélyebben, ez nem különbözik
mint a függvény hívások tettünk C-ben A függvény neve itt van egy
kicsit furcsa.
Ez a dollár jel.
Ez csak egy függvény nevét.
Nincs semmi különleges.
>> Van nyitott zárójelben.
Aztán, van egy érv, amely Ebben az esetben történetesen egy string,
amely a választó is.
És akkor, mi van a zárt zárójel.
Ennyi.
>> Ez nem az, hogy teljesen más.
Bár úgy néz ki, nagyon furcsa.
És az is lehet, egyfajta, a ragasztás pont a sok ember.
>> MIKE RIZZO: Tehát hasonlóan, ha azt akartuk, kiválasztásához egy elem, amely egy azonosító,
most szeretnénk kiválasztani a ID helyett osztályban.
Lenne egy hasonló dolog, ahol csak nem az éles jel azonosító.
Szóval kiválasztása itt minden elemeket, amelyek azonosító bárban.
>> TOMAS REIMERS: és ez kiterjed.
Ez a CSS kiterjed.
Csakúgy, mint a CSS, akkor válassza ki az összes kapcsolatokat, amelyek az osztály foo.
Itt, ez ugyanaz a dolog.
>> Lehet csinálni a.foo, amely válassza az összes kapcsolatot az osztály foo.
Lehet csinálni egy éles sáv, amely válassza ki a kapcsolat a ID bár és így
tovább és így tovább.
Minden CSS szelektor érvényes jQuery választó.
>> MIKE RIZZO: Igen.
OK, így most térjünk egy kicsit A manipuláció, amit tehetünk az
a jQuery.
Tehát jQuery egy bizonyos típusú A jelölés ahol csak használ
egy pont a végén.
És akkor gondolom ezt, mint C, hogy mi volt a különböző struktúrákat.
És menni azokba a struktúrákat, akkor, egy pont, hogy beléjük.
>> Ez, a fajta, egy hasonló dolog.
Csak most már funkciója ebben a választó, hogy nevezhetjük rajta.
Tehát itt, az első példa látható egy CSS választó.
És alapvetően, hogy mit csinál ez alkalmazza az első elem CSS erre
dolog, amit kiválasztott -
ez az elem, hogy a kiválasztott -
az értéket.
>> TOMAS REIMERS: Tehát könnyen fordítása lenne, ha jQuery, alapvetően,
csak volt foo.
És akkor a CSS mondta, színes piros és közel.
Ez ugyanaz a gondolat.
Mit csinált ez ki van jelölve Minden élelmiszer elemekkel.
És akkor ez alkalmazható.
Valahogy, az ingatlan szín egyenlő piros.
>> MIKE RIZZO: Hasonlóképpen, mi is megváltoztathatja a tényleges tartalma, ami
bemutatja a HTML oldal, amely nagyon jó, mert azt jelenti, hogy a
weboldalak most már teljesen dinamikus , és nem kell, hogy a statikus
hogy nyomtassa ki a PHP A legelején
az oldal letöltését.
Tehát itt, ha azt akartuk, hogy módosítja a tényleges HTML oldal, mi lenne most
hívja a HTML funkció, mely akkor csak betétek bármit is adja át
azt az elemet, amit választott.
Tehát itt vagyunk kiválasztása elem class foo, majd azt mondja, hogy ez a HTML
ez most hello world.
>> TOMAS REIMERS És ha belegondolsz milyen hasznos alkalmazásai
ez, ez a CSS egy, az első dolog, akkor elkezd gondolkodni az
tekintve még a legördülő menük.
Lehet kezdeni a dolgokat, mint, amikor a felhasználó fölé a felső rész
A legördülő, azt szeretnénk, hogy az alsó rész látható.
Nem igaz?
>> Így CSS, van tulajdonságokkal hogy valami látható.
Dolgok, mint a kijelző colon none tenné láthatatlan.
Kijelző blokk tenné láthatóvá.
Vagy akkor is, ha akarsz menni egyszerűbb, akkor a dolgok, mint a láthatóságot egyenlő
látható, és a láthatóság egyenlő rejtett.
>> És meg tudná kezdeni, hogy hajtsák végre a dolgokat mint a legördülő menük jobb
Miután átjutni az elképzelést, hogy lehet kitalálni, ha ez megnyitja,
amit kapsz a nagyon röviden.
De lehet kezdeni, hogy Ezen alkalmazások.
Hasonló értelemben, ha úgy döntesz, hogy megpróbálja és végrehajtása, mondjuk, a chat
motort, és azt szeretnénk, hogy egy kicsit beszéd buborék jön, amikor már
kapott egy új üzenetet, ha egyszer kap a az új üzenetet, akkor lehet, hogy egy kicsit
beszéd buborék jön megváltoztatásával HTML az oldal, nem igaz?
Azáltal, hogy az extra beszéd buborék az extra szöveget is.
Igen?
>> Közönség: Szóval azt beágyazni ezt a a HTML kódot fajta, mint egy
[Nem hallható]?
>> MIKE RIZZO: Így van.
Igen, mi lesz az, hogy egy kicsit.
Igen, ez hasonló a kicsit a PHP.
Nem egészen hasonló.
>> Egy jó megkülönböztetés, hogy az, amit ez a valójában szerkeszti, amikor szerkeszteni
Az oldal, mert ez nem lesz szerkesztése az aktuális fájl, amelyet
tartott a szerver, mert a világ nem rendelkezik engedéllyel
szerkeszteni a fájlokat.
Ez csak szerkeszti, mi van az oldalon és mi jelenik meg a
a böngésző.
Tehát, ha úgy döntesz, hogy újra az oldal után, azt mondják, törlése valamit, mint mi
lásd tehetünk a Remove hívás, hogy a dolog aztán újra.
>> TOMAS REIMERS: Tehát az egyik módja annak, hogy gondolni ez, ha én vagyok a számítógép és a
Mike, a fajta, a szerver.
Mi fog történni, hogy én fogok kérdezni Mike, hé, van egy példánya
ez a weboldal?
És ő majd ad nekem egy példányt belőle.
>> Nem, ez nem az eredeti dolog.
Ez csak egy példányt.
És akkor olyan lenne, mint, ó, ott JavaScript itt.
Nyilvánvaló, azt kell szerkeszteni a oldal, mint ez.
És én szerkesztését a másolat.
>> De ez nem befolyásoló a tényleges másolatot.
És ha megkérdezném tőle újra frissíteni kell az oldalt, -
Hé, még egy tiszta másolatot -
ő fog adni nekem egy tiszta másolatot.
És akkor fogom, hogy nem ugyanaz a dolog mint, ó, ez a JS itt, hogy azt mondja:
szerkeszteni ezt.
És én fogom tartani csinálja.
>> MIKE RIZZO: Tehát egy nagyon klassz dolog hogy meg tudod csinálni jQuery
valóban hozzá a különböző Az animációk az oldalon.
Nem tudom, ha valaha is látott, ahol a próbál a kitöltenek egy űrlapot,
online, és nem tölti ki A dolgokat helyesen.
Tehát egy kis dolog lecsúszik tetején és azt mondja,
még nem tette ezt helyesen.
Kérjük, próbálja újra.
És akkor, talán még csak tolja fel.
>> Kiderült, jQuery beépített függvények hogy tegyen meg minden, hogy a
animáció nagyon, nagyon egyszerű.
Tehát először az úszási out funkció, amely
hívhatja valamit.
És ez egy módja annak, hogy változtatni a CSS a az elem egy animált módon.
Tehát vesz bármilyen elem hívják fakulnak ki.
Aztán lassan megváltoztatja a homály amíg megy teljesen átlátszó.
>> TOMAS REIMERS: A másik népszerű lett A lecsúszni, amely biztosítja, hogy
valami jelennek csúsztatva lefelé.
Tehát abban az esetben, a legördülő menüből, újra, amikor megtanultuk, hogyan kell felismerni
ha ez már lebegett, akkor csak mondd ezt alul
rész lecsúszni most.
És akkor úgy tűnik, a lecsúszott.
>> MIKE RIZZO: És aztán, ha csak valamilyen animáció feledje, hogy
jQuery nem feltétlenül nyújt.
Például, mondjuk jQuery nem az Ön számára egy dia
le és csúsztassa felfelé.
Nos, mondjuk akart csúszni valamit a bal vagy a
a megfelelő típusú, mint a CS50 Főoldal csinál, amikor
elmész egy új panel.
Mert akkor valószínűleg meg kell végre magad a
animálni funkció a jQuery.
>> Tehát hasonlóan, csak animálni.
És akkor, azon belül tart a szótár a különböző értékeket
hogy meg kéne haladni.
Tehát itt, ha azt akartuk, hogy animálni a elem foo úgy, hogy a szélessége sem
növelheted vagy 80 pixel, attól függően, amit jelenleg is.
Azt csak át, hogy mivel az érvelés belül.
>> Animálása is más érv hogy meg tudná adja át, például,
a sebesség az animáció kívánt adni.
És erre, én csak azt mondom gyors Google jQuery animálni.
És akkor, nevelő ezt az oldalt, akkor látom van egy csomó különböző
tulajdonságokat, hogy akkor adja át.
>> És azt javasoljuk, - amikor jössz között valami, amit nem
tudja, vagy csak szeretne többet megtudni a különleges módszer, amely segítségével hívja
valami -
csak a Google is. jQuery rendkívül jól dokumentált.
És gyakran van egy csomó példákat nyújtanak az Ön számára.
Ha lépjünk le -
út lefelé -
hogy tudjuk használni is.
>> Ismét, ha egy fejlesztő valóban megy a baj az írás a
könyvtár, jellemzően akar valaki használni.
Így együtt fog egy dokumentációt.
És ez a dokumentáció általában található a projekt honlapján, amely a
Ezért adtam neked, hogy az eredeti helyszínen a kezdet, amely összeköti, hogy a
projekt oldalak így Ön látni, hogy dokumentációt.
>> Általában, a projekt oldalán abban az esetben, Az [hallható], akkor mondtam, hogy a
nevét az osztályok.
Abban az esetben, a JavaScript, ez ad a nevét a funkciókat.
Apropó, ha felfelé a csúcsra, egy gyors Mellékesen jegyzem meg a funkciók
ha látsz egy funkciót megvalósított így a merevlemez
zárójelben a közepén, azt jelenti, hogy az ingatlan nem kötelező.
Csak egy heads-up.
Láttam egy csomó kérdést erről.
>> Tehát itt azt látjuk, hogy a élő vesz tulajdonságok
mint szükséges érv.
És minden más opcionális.
Mellékesen jegyzem meg -
lehet gondolni ezt a fajta az, mint a man oldalak.
A Man dokumentációt C és egy csomó más dolog is.
>> MIKE RIZZO: Így már megtanulta, hogyan kell változnak a különböző CSS az oldalon,
animálni, és távolítsa el hozzá a HTML.
De az egyik nagyon legerősebb dolog JavaScript
és különösen a jQuery -
mi ez lehetővé teszi, amit teszel, reagál különböző elemeit, hogy ez megtörténjen.
Például, itt van egy eseménykezelő.
És ez csak azt jelenti, ha ez esemény történik, kezeljük azt a
bizonyos módon.
>> Tehát itt, az általános jQuery esemény kezelő van a pont.
És akkor, az első dolog, amit nyújtott ami rendezvény kellene
is hallgatta.
Tehát itt, ez a klikk, amely várunk.
>> TOMAS REIMERS: Alternatív megoldásként, akkor A lebeg, ami egy nagyon népszerű egy.
Tehát vissza a legördülő menüből ötlet.
Akkor kellett volna a felsőt a hover.
És akkor lehet változtatni.
>> MIKE RIZZO: Így van.
És akkor, amikor ez történik, csak végrehajtja ezt a funkciót, hogy mi adja
argumentumként, és hogy figyelmezteti szia vagy szia.
>> TOMAS REIMERS: Tehát abban az esetben, JavaScript, ez az a hely, meg kell
távolítsa el magunkat a C. mi is valójában hogy működik érveket.
És van egy csomó igazán bonyolult módja erre.
Megyünk, hogy támogassák egy út, ami megadhatja a
működik ott.
>> Tehát, ha kérsz egy funkciót paraméter, akkor alapvetően csak
fogja meghatározni a függvény a helyszínen.
És ahogy meg egy függvényt A JavaScript te
szó szerint azt mondják funkciót.
Ezután általában a neve a funkciót.
De mi soha nem fog hivatkozni ezt a funkciót újra.
Tehát hagyjuk névtelen.
>> Aztán a zárójelek, a göndör nadrágtartó, majd a kódot, hogy az.
Így megértjük ezt lehet egy kicsit zavaros.
Ezért adunk általános formája milyen eseménykezelő néz ki
alatt, ami az eseményeket.
És akkor, a kódot abba a.
>> MIKE RIZZO: Vannak-e olyan kérdése van az?
Ez lehet egy kicsit zavaró, Az első alkalommal, amikor látom.
>> TOMAS REIMERS: Ha valóban szeretné nyit egy fájlt, és megmutatja nekik néhány
jQuery most?
>> MIKE RIZZO: Igen, csináljuk.
OK.
>> TOMAS REIMERS: Most vagyunk a készülékben.
És mit tettünk az már megtette a bátorságot, ami egyaránt egy index.html
fájl, amely összeköti a a JavaScript-fájlt.
És tudjuk megnyitni a -
igen.
Nos, ez a két dolog.
>> Az első az, linkek A JavaScript fájlt.
És látni fogjuk, hogy itt.
Látjuk, hogy a fejét a HTML-dokumentum, különösen.
Így látni fogod, hogy ott mi, alapvetően mondjuk SRC,
amely áll a forrás.
És ez az URL-t.
>> Tehát itt is azt mondom, már tartalmazza jQuery.
És mi már azt is tartalmazza szkripteket.
A másik út, hogy tartalmazza JavaScript hogy akkor is egy inline script
tag, mint mi az alján, ahol mondja script típus szöveg JavaScript.
>> Szóval azt mondja, figyelj, mi arról, hogy tartalmazza a script.
És az a fajta, amely szkript JavaScript, amely egy olyan típusú szöveget.
Nagyon egyszerű.
>> MIKE RIZZO: Tehát ezt a fajta, jut A kérdés, hogy hogyan közé
A JavaScriptet a fájlokat, mert amikor már PHP, teszünk valamit, mint ez.
És akkor, hogy a PHP funkciók - mondjuk az állományok
valamit, hogy -
megy oda.
Azonban most már a script tag hogy mi adja meg, amelyek tulajdonképpen
része a HTML is, mert ez nem tetteti, hogy egy HTML fájlt, mint ez
van a PHP-ben, mert ha tényleg megy és nézd meg a forrását az oldal,
akkor ezeket a script tag-ott A JavaScript járó
őket ebben.
>> Tehát, ha azt akartuk, hogy írni egy JavaScript -
mondjuk akartunk változtatni a test mert most nincs
minden más címkéket, hogy én tényleg szerkesztése mellett testet.
Mondjuk akartam változtatni a CSS, hogy.
Szóval, megyünk előre, és a változás a színét, hogy piros.
>> Szóval menteni a fájlt.
Menjünk vissza a weboldal, frissítés, és ez automatikusan
mert nem úgy tűnik, mintha várt egyáltalán, mert mi nem hallgat
egy esemény, vagy bármi ilyesmi.
>> TOMAS REIMERS: Tehát, ha megyünk vissza a fájl különösen - a HTML
fájl - amit akarsz látni, hogy van -
ne feledjük, hogy ez be van töltve, fajta, időrendben.
Tehát először a fejét. betölti a két fájlt.
Aztán megy a szervezetben.
És azt látjuk, hello world.
Így teszi hello world.
>> És akkor az utolsó dolog, amit meg a mi van a script tag.
Így fut a script tag, mert nem mondja, hogy várni semmit.
És ez a legalapvetőbb módja a JavaScript futtatását.
>> Ezzel azt mondta, meg tudja tenni a forgatókönyvet tag fel a fejlécben csak
megmutatni ezen a ponton?
És fuss, hogy.
Fogjuk észrevenni, hogy a nem változtatta meg a színt.
És ez az egyik a problémák JavaScript, hogy a dolgok a betöltött
időrendi sorrendben.
>> Tehát abban az időben, hogy a kódot futott, hogy a kiválasztott -
vissza -
a body tag.
A body tag még nem létezik, mert JavaScript összhangban van a HTML.
Tehát a böngésző, mint a select testet.
Nincs olyan dolog még.
Így lehet figyelmen kívül hagyni, hogy az.
És folyamatosan megy.
>> És akkor mi határozza meg a body tag.
De ez soha nem frissül.
Tehát, amikor végrehajtási script Címkék, győződjön meg róla, helyezze
miután a body tag.
Következő dia.
>> MIKE RIZZO: OK.
Így változott valamit.
De nem úgy nézett ki, mintha reagált bennünket egyáltalán, mert csak egyfajta
tette, amint betöltődik az oldalon.
Tehát most, ahelyett, hogy ezt, miért ne adjunk hozzá egy eseménykezelő.
>> Szóval valami a test újra.
És mondjuk mi azt -
kattintson.
Majd hozzá funkciót.
>> TOMAS REIMERS: Let változás ez a szín a piros újra.
Miért ne?
>> MIKE RIZZO: Igen, nézzük a változás a "színe vörös újra.
Rendben van.
Akkor most újra az oldalt.
OK, látjuk -
mint várható volt, nem pedig vörös még.
De akkor mi is megy előre, és kattintson rá.
>> TOMAS REIMERS: És ez pedig piros.
>> MIKE RIZZO És ez pirosra, mint várták.
>> TOMAS REIMERS És láthatjuk, hogy elkezdhetjük építeni nagyon alapvető
kölcsönhatás.
Más dolog, amit érdemes csinálni is, ha nem akarjuk, hogy a szervezet
piros színű, nézzük, hogy a HTML háttér színe piros.
Csak hogy ez ugyanaz a CSS.
>> És amikor változtatni, láthatjuk ezt a nagyon drámai hatása megváltoztatja a
egész oldal.
Tehát még egyszer, ha végrehajtási dolgokat, akkor egy összetevő
ami azt jelentette, hogy kattintott.
Tegyük fel, hogy a kilépés gombot, és egy egész más alkotóelem,
ami azt jelentette, hogy válaszoljon.
Szóval megszüntetné az ablakot amikor ez megtörténik.
>> MIKE RIZZO: OK.
Csak példaként -
hogy nem kap, hogy ez a korábbi -
Én csak megmutatom, hogy néz olyan, mint amikor azt elrejteni valamit.
Szóval megyek előre, és nem csúszik ki.
>> TOMAS REIMERS: Szeretne csavarja, hogy a bekezdés típus mielőtt csinálni?
>> MIKE RIZZO: OK.
Igen, miért nem tesszük, hogy csak olyan kiválaszthatjuk, hogy egy kicsit több.
>> TOMAS REIMERS És nézzük hogy ez egy osztályban.
>> MIKE RIZZO: Igen.
OK, úgyhogy lássuk.
Kiválasztása helyett a tényleges test Most én csak válassza mindent
osztály hello, ami itt csak egy dolog.
Tehát nem kell aggódj.
>> Így fogom frissíteni azt.
Én megyek előre, és kattintson rá.
És ez, valami, volt egy furcsa dia fel a dolog, ami nem néz ki, hogy az
vonzó.
Általában ők néznek nagyon szép.
Azt hiszem, ezt a - néhány Ezért - nem.
Én csak nem egy fakulnak ki, így akkor nézd meg, hogy túl.
Sokkal szebb.
>> És akkor, ha én nyit a JavaScript konzol újra és azt szeretnék, hogy mi
úgy néz ki, mint amikor elhalványul be!
Most már csak hívja elhalványul rajta.
És ez elhalványul vissza!
>> Hasonlóképpen, ténylegesen is át érv elhalványul vagy fakulnak ki,
amely, egyfajta, a sebesség is.
Szóval menjünk előre, és azt mondom, szeretnénk hogy menjen lassan elhalványul be
Szóval, azt hiszem, még úgy tűnt, elég gyors.
De ez volt lassabb, mint korábban.
>> TOMAS REIMERS: És ha meg akarja találni További információ ezeket a dolgokat, ismét
csak megy a jQuery dokumentációt, amit adtam neked, és olvassa el
ezeken.
A dokumentum a funkcióit hihetetlenül jól.
>> MIKE RIZZO: OK.
Szóval azt hiszem, térjünk vissza erre.
És beszélhetünk az utolsó oldalon.
Nos, be tudjuk fejezni a Bootstrap.
És akkor majd nyissa fel néhány kérdést.
És ha nektek van valami ötleted, hogy azt szeretné kipróbálni, hogy dobja fel, és látni
ha végre őket JavaScript gyorsan.
>> Így nagyon gyorsan a Bootstrap, amely automatikusan szerepel
az utolsó problémát meg a CSS mappában és valóban kapcsolódik a
header.php.
Szóval volna hozzá osztályok meghatározása a Bootstrap hozzá.
És ez volna automatikusan stílusú ezeket a dolgokat kell.
>> TOMAS REIMERS: Tehát Bootstrap nagyon varázslatos dolog által kifejlesztett emberek
A Twitter.
És mit kellett volna tennem, hogy -
mielőtt weboldalak valóban nehéz, hogy néz ki, különösen akkor, ha volt
sok a közös elemek.
Szóval egy csomó gomb a web ugyanúgy nézett ki.
>> Sok szöveges mezők lehet, hogy jobban néz ki, mint a normál szöveges
mező akkor valószínűleg tudja, az igazán régi weboldalak vagy nagyon gyenge minőségű
honlapok, amelyek csak néz, mint a szó szerinti szövegdobozok nélkül bármilyen formában a szöveg
árnyék vagy bármilyen szép vázlatot.
Tehát mi Bootstrap tett, azt mondta, jó, van egy csomó közös stílusokat.
Miért nem teszünk egy közös CSS és a közös JavaScript
Nos, ami a stílus úgy, ahogy van, és amely lehet, hogy az emberek a dolgokat, mint csepp
legördülő menük, ami az emberek dolgok, mint modals.
>> Modális, ami megjelenik az oldalon ha ez szigorú értelemben véve
valamit, ami gátolja a további interakció, amíg meg nem
kölcsönhatásba lépnek vele.
Valami ehhez hasonló van, biztos vagy benne törölni akarja ezt a dolgot?
Nem lehet mást csinálni amíg azt mondod, igen vagy nem.
>> Beletelt mindezt, és csomagolni, hogy együtt, és azt mondta, itt is vagyunk.
Az emberek most már ezt használja.
És megtalálható rajta A getbootstrap.com.
Ezt automatikusan tartalmazza az utolsó probléma meg.
És te több mint szívesen használja azt a végleges projekt.
És ha azt szeretnénk követni, hogy hivatkoznak, hogy Bootstrap.
>> Látni fogod, itt van az Bootstrap CSS oldalon.
Majd meglátod Bootstrap.
És ha lépjünk le, majd meglátod hogyan kell letölteni azt, hogyan kell
telepíteni, et cetera.
>> MIKE RIZZO: És akkor is, Érdekes módon, testre, hogy
legyen bármilyen jellegű témák , amit akar.
Tudom, hogy valamit, amit én az én A projekt végső amikor vettem az osztály
volt szabhatja meg.
Egy másik változat Bootstrap hogy más volt a színek és
néhány különböző formájú különböző dolog.
Ezért azt javasoljuk, hogy játszani ezt.
Elég szórakoztató csinálni.
>> TOMAS REIMERS: Keresi az egész felső Ismét, ez nagyon hasonlít a betűtípus
Nagyszerű oldal.
Sok dokumentáció indul hogy úgy tűnik, hasonló, ha már
eleget látott belőle.
Tehát itt van a CSS összetevője ezt.
És látni fogod, hogyan stilizálhatunk dolgokat.
Tehát, ha rákattint a táblák, például akkor azonnal, hogy egy
asztal szép, hozzátéve táblázat az osztály hozzá.
>> Ugyanazokat a dolgokat a gombok.
Ha egyszerűen csak hozzá az osztály BTN és BTN alapértelmezett vagy BTN elsődleges, akkor
kap bármelyik ezek a gombok ezek előre elkészített stílusokat.
És aztán, ha keres valami bonyolultabb, mint egyszerűen
Restyling amit w már, mint a A JavaScript fület az egész tetején is
van egy csomó alkatrészeket.
>> Tehát itt van átmenetek, modals, legördülõkhöz, fülek, és a tippek.
A tooltip mi bukkan fel az Ön az egér, ha lebeg valamit.
Popovers, riasztások, gombok, összecsukható tangóharmonika, ami
ők szokták.
Körhinták, amely a flip keresztül, mint a képeket.
>> Tehát ezek azok az összetevők, bootstrap.
Azt javasoljuk, hogy nagyon menj nézd meg őket.
Van egy JavaScript komponens és a CSS komponens.
Nyugodtan használja őket, mint akkor.
Nem fogunk menni túl sok beléjük mert úgy érezzük, a dokumentáció
tényleg jól sikerült.
És igen.
Van kérdése ezzel kapcsolatban?
>> MIKE RIZZO: Tehát egy nagyon gyors oldalon, a design a weboldal, amely
Gyorsan össze a ez az előadás
valójában használatával történik Bootstrap.
Mint látható, amikor rákattint ezekre a különböző oldalon, mi soha nem
így ez a jelenlegi index.html oldalt.
Tehát mi van más divs ezen belül index.html.
És akkor, amikor csak kattintson egy másik lapon ez csak a változó
melyik a mutató.
>> Így ennek megfelelően pozíciók őket, megváltoztatja a HTML oldal, hogy a
Az aktuális lap aktívként olyan úgy tűnik, másképp, és úgy néz ki
nagyon szép.
>> TOMAS REIMERS: Szóval ez volt minden történt anélkül, hogy mi az írás szinte minden CSS.
Azt is látjuk, a fejléc az egész tetején, amely a színek minket.
De a tényleges üzembe azt a az oldal tetejére, és így
ez scroll volt Bootstrap.
És akkor még egy másik könyvtár - ez nem egy, amiről beszéltünk, de egy
lehet a Google, ha akarja.
Ezt hívják prettify.js.
És ez szintaktikai kiemelésének a kódot Ön a CSS és a JavaScript.
>> Az utolsó dolog, amit szeretnénk beszélni mielőtt engedje ki a
a világ, hogy nézd meg a könyvtárak kitalálni hogyan kell használni őket, és, remélhetőleg,
olvasd dokumentáció és megtalálja, amit igény, hogyan lehet megtalálni a könyvtárak.
Tehát az első az, mi csak fogja nyomni a Google.
Menj Google.
>> Ez az a szó szoros értelmében, amit teszünk, ha tennie kell valamit az, amit a Google.
Van egy JavaScript könyvtár, amely lehetővé teszi számomra, hogy manipulálják idő egy
hasznos módja?
Tehát, ha tudom, hogy néhány felhasználó létrehozása itt egy számlát, és ez a
pontos időt, hogyan tudom kiszámítani a azzal a különbséggel, anélkül, hogy
számítani magam?
Tehát ez valójában egy közös dolog, JavaScript idő könyvtár.
És itt Moment.js-- az egyik legnépszerűbb.
>> Ha szükségünk van egy könyvtár, hogy manipulálják valami, mint a szín, hogy képes legyen
generál egy csomó véletlen színek -
esetleg, hogy létrehoz egy stílus vagy valami -
tudnánk Google-valami ilyesmi JavaScript szín könyvtárat.
És biztos vagyok benne, hogy lenne felbukkan ezer és egyikük.
Nyugodtan olvassa el őket.
>> Így a legtöbb dolog -, ha megtalálja őket - lesz házigazdája az egyik
olyan helyek, amelyek a fogadó kódot.
Ők néhány népszerű is.
A legnépszerűbb, a messze van github.com.
És ha megy a GitHub valójában ahol Normalize házigazdája.
Tehát, ha azt akarjuk, hogy menjen vissza, hogy az egyik.
Mutassa meg nekik, hogy.
>> MIKE RIZZO: És valóban, amikor ez házigazdája is, ha észre.
>> TOMAS REIMERS: Igen.
Tehát, ha átmegy normalizálni és megy a GitHub.
Volt ez?
>> MIKE RIZZO: Az a kis macska dolog a GitHub szimbóluma.
>> TOMAS REIMERS: Oh.
Tehát GitHub használja a módszer az úgynevezett Git tárolására kódot.
Az, hogy nem tudom, mi az, vagy ez megrémít, hogy rendben van.
Önnek nem kell tudni, hogy mi Git mert GitHub van Letöltés gombra
A jobb alsó sarokban.
>> A másik hasznos dolog tudni, a GitHub a legtöbb termék
lesz olvasott nekem.
És ha nincs a honlapon, a felolvasott nekem fog beszélni, hogyan
telepíteni, hogyan használja azt, hogy mit nem, satöbbi, satöbbi, satöbbi.
Amit már alapvetően nem végigvezet.
>> MIKE RIZZO: Internet Kilépés.
>> TOMAS REIMERS: Rendben.
Az utolsó két dolgot akartunk beszélni -
beszéltünk Git -
a hibaelhárítás.
És ez nem olyan lényeges a A végtermék, ahogy van
ha elhagyja az 50.
És amikor befut termékek végrehajtó könyvtárak vagy végrehajtási
a saját projekt, mész hogy kérdése vagy te
fog keresni kérdésekre.
>> Ismét a Google is.
Ez az a szó szoros értelmében, amit csinálunk.
Ez fog hülyén hangzik.
De szó szerint, azt a Google is.
És ismét, az egyik első dolog, akkor általában befut
stackoverflow.com, amely egy csodálatos kérdés és a válasz elől.
>> Ez csodálatos, egyrészt azért, mert akkor tegye a kérdéseket, és keresse meg
választ, de azért is, mert ez már egy csomó
előre lakott tartalom van.
Tehát, általában, ha a Google-programozó kérdés az első
pár üt akkor már fut bele, hogy közben a problémát készletek.
>> És akkor, az utolsó igazán rövid dolog az JSFIDDLE, ami - ma már
már ennek a sok munka JavaScript HTML CSS.
JSFIDDLE egy webes alkalmazás, amely alapvetően lehetővé teszi, hogy a HTML, YOUR
JavaScript bal alsó, és A CSS jobb felső sarokban.
És akkor létrehozhat egy gyors teszik belőle, és hogyan kommunikál.
Ez nagyon hasznos, ha az emberek megpróbálják hogy csinál egy proof of concept, mint a
ez hogyan lenne nem egy legördülő menüből.
Talán egy gyors kiderüljön, vagy bármi.
>> MIKE RIZZO: Szóval menjünk előre, és kattintson erre.
Egy gyors megjegyzés -
mivel azelőtt voltunk csinál kattintásra.
Kiderült JCorey Korea is rendelkezik egy beépített A click eseménykezelő, hogy
használja, csak azért, mert a számok te szeretne majd csinálni egy csomó dolgot
ha azt szeretné, hogy kattintson valamit.
>> Ehhez hasonlóan, ez is egy hover.
De, hogy a teljes körű azok, nézd meg a jQuery
dokumentációt, és csinálni.
Én valami hülyeséget itt.
>> TOMAS REIMERS: Szóval van egy nagyon gyors a program itt, amely azt mondja,
gombot a kattintás.
Aztán van a hurok.
Mert én nem kevesebb, mint 404.
Ez csak úgy felbukkan Ezek a figyelmeztető üzeneteket.
>> MIKE RIZZO: És mi volt az 404-es állt a HTML-ben?
Valaki emlékszik?
Nem található a jobb.
Chrome is hozzátette, ez ügyes dolog, ahol lehet -
>> TOMAS REIMERS: Mert az emberek, mint a Mike kezdte ezt a sok és
bosszantó felhasználók számára, amely lehetővé teszi a hogy lássa info.
>> MIKE RIZZO: Igen.
>> TOMAS REIMERS: Van valami kérdése erről, a JavaScript
könyvtárak, a megállapítás könyvtárak, vagy mi webfejlesztés néz
mint a való világban?
Mi fut az idővel.
Szóval, nem vagyok benne biztos megyünk van ideje, hogy végre
kivéve, ha nagyon gyorsan.
Rendben vagyunk?
>> MIKE RIZZO: Bármi srá*** szeretné hogy igazán gyorsak, mint a két
perc, vagy kevesebb?
>> TOMAS REIMERS: bármi tudjuk tisztázni?
Hogyan lehet írni -
>> Közönség: [Nem hallható]?
>> MIKE RIZZO: Igen, tehát ez -
>> TOMAS REIMERS: Tudod csak hit Vezérlés-U a honlapon.
>> MIKE RIZZO: Ó, én nem is tudtam.
>> TOMAS REIMERS: Azt hiszem, igen.
Vezérlés-U. Igen.
>> MIKE RIZZO: Ó, hogy az a kódját a honlapon.
De ha valóban szeretnénk letölteni a fájlokat, és minden, a szerver van
A github.com
>> TOMAS REIMERS: slash nevem -
Tomas Reimers - slash CS50 kötőjel szeminárium.
>> MIKE RIZZO És akkor mindent megtalál ott.
>> TOMAS REIMERS: Ez az, amit GitHub úgy néz ki, mint egyébként.
Tehát még egyszer, ha lát egy nyílt forráskódú projekt általában, akkor lesz olvasható
oda, hogy el tudja olvasni.
És ha megy vissza, észre fogod venni, hogy akkor a letöltés zip, amely
lehetővé teszi, hogy töltse le a forrást hogy tartalmazza a kódot
terméket a saját dolog.
>> MIKE RIZZO: Igen, és ha csak kattintson az index.html nagyon gyorsan -
>> TOMAS REIMERS: Majd meglátod, itt a forráskódja honlapunkon.
>> MIKE RIZZO: Azt is elfelejtettem, hogy álljon a jobb előtt, a nagy táblázatból
szerepelnek, de van még egy asztal A chmods hogy tartalmazza
csak az egyértelműség.
De ha lépjünk egészen a alsó, akkor valójában nem csinál túl
sokat a JavaScript cucc egyáltalán ezzel.
Ez kizárólag a minden más, hogy mi volt.
>> Szóval köszönöm nektek, hogy eljöttetek és hallgatni.
Reméljük, hogy ez tényleg hasznos.
Ha bármilyen JavaScript kapcsolódó kérdése van, vagy csak szeretne beszélni
mi mást, mint amit a többi jó dolog meg tudod csinálni a JavaScript, amit szeretnék
beszélni veled.
>> TOMAS REIMERS: Ha kérdése van van a projekt, vagy ha ez lehet
megfelelő, akkor valószínűleg maradni egy kicsit után.
De azon kívül, hogy egy jó hétvége.
>> MIKE RIZZO: Igen, élvezni.
Viszlát, srá***.
>> TOMAS REIMERS: Viszlát.