Tip:
Highlight text to annotate it
X
>> TOMAS REIMERS: Hei kaikki.
Nimeni on Tomas Reimers.
>> MIKE RIZZO: Ja olen Mike Rizzo.
>> TOMAS REIMERS: Olemme kaksi CS50s TS.
Ja tänään olemme johtava seminaari JavaScript ja CSS web-sovellukset.
Jos haluat seurata pitkin, linkki on tuolla.
Ja haluat laittaa sen ylös tietokoneeseen hetkeksi?
>> Siellä on linkki.
Se on pieni sivusto, jossa on linkit kaikki resurssit aiomme olla
osoittaa sinua tänään ja on myös paljon hyödyllistä tietoa kirjoittanut meitä
lue lisää syvyyttä, kun menet takaisin, ja yrität muistaa mitä
juuri tuosta sanomme, mitä olitte puhumme, jne..
>> MIKE RIZZO: Selvä.
Aloitetaanpa.
>> TOMAS REIMERS: Haluat siis aloittaa?
OK.
>> MIKE RIZZO: Joo.
Joten halusimme ensin aloittaa laaja yleiskuvan internetin ja
tiedostotyyppejä suunniteltaessa verkkosivuilla.
Vaikka tämä esitys haluamme päästä osaksi JavaScript paljon paljon
myöhemmin, halusimme aloittaa pois vain, tavallaan, kuten lintuperspektiivistä
mitä sivusto on ja miten ajatella suunnittelussa
verkkosivuilla alku.
>> Joten te, tässä vaiheessa - sen kanssa on perjantai-iltana - olisi
lähettänyt CS50 rahoitus ongelma asettaa.
Toivottavasti tämä oli hyvä maku mitä web ohjelmointi voi olla.
Mutta täällä me haluamme, tavallaan, antaa sinulle toisen maku, samoin.
>> TOMAS REIMERS: Joten vain kertaus mitä tapahtuu, kun kirjoitat URL
Web-selain, että URL saa katseli tietokoneen.
Ja tietokoneen liitetty toiseen tietokoneeseen,
joka isännöi että verkkosivuilla.
OK, joten kun menet google.com, olet kytketty yhteen Googlen
tietokoneet, joka on tiedostoja google.com.
>> Se kysyy tiettyä tiedostoa.
Joten jos menet -
En tiedä -
example.com / index.html tai / test.html, aiot kysyä
kyseisestä tiedostosta.
Ja web-palvelimen takana palauttaa sen sinulle.
>> Sitten, kun menet läpi, että tiedosto -
kun olet tietokone saa, että tiedosto - se tulee aloittaa
rakentaa web-sivun.
Joten nyt se on HTML-tiedosto, joka on tavallaan kuin
rakenteen Web-sivun.
HTML-tiedoston voi myös viitata CSS-tiedostot, jotka määrittävät
tyyli sivun.
>> JavaScript-tiedostot, jossa määritellään vuorovaikutusta web-sivulla.
Kuvatiedostoja, jotka ovat vain kuvia.
Ja mahdollisesti linkittää muihin HTML-tiedostoja, jonka voit sitten käydä.
>> MIKE RIZZO: OK, hyvä.
Joten te kaikki, ehkä, vaivalla perustaa oman paikallisen isännän
teidän virtuaalikone.
Ja että vain, tavallaan, on paikallinen verkkotunnuksen, että tietokone isännöi vain
sinulle omaa IP-osoitetta.
>> Niin sisällä, että voit lisätä sen omia web-sivuja.
Tarkoitan, vuonna CS50 Finance, sinun pitäisi olla lisätty joitakin HTML-sivuja, jotka ovat,
tavallaan, käärittynä PHP kääre.
Mutta loppujen lopuksi, mitä PHP-sivuja olivat syöttöä oli HTML.
>> Mutta Muistelen alusta ja PSET, meillä oli asettaa
käyttöoikeuksia kaiken, eikö?
Joten tämä vain periaatteessa kertoo meille kuka voi lukea, kirjoittaa ja mahdollisesti
suorittaa kunkin tiedostoja.
Joten aiomme tehdä nopeasti - hm?
>> TOMAS REIMERS: Menemme siis tehdä nopeasti demo.
Joten vain muistuttaa teitä, kun yhteyden Googlen tietokoneeseen -
kuka -
ja pyytää tiedoston, ensin tietokoneeseen on varmistaa, että olet valtuutettu
todella tarkastella kyseisen tiedoston tai lukenut, että tiedostoa, koska et voi vain kysyä
tiedostolle kyseisen tietokoneen, eikö?
Se olisi suojausriski.
>> Joten tiedostoja järjestelmissä käytämme, kuten Tämän CS50 laite, on kolme
yleensä ihmiset, jotka voivat olla käyttöoikeudet jotain.
Ensimmäinen on todellinen omistaja sanoi tiedoston.
Toinen on ryhmä, joka tiedosto kuuluu.
Emme aio keskittyä liikaa siitä.
Ja viimeinen asia on, tavallaan, kuten maailmaa tai kuten kaikki muutkin kuka
ei juuri kyseistä tiedostoa eikä ole omistusoikeuksia sen yli.
>> Joten jos meillä on omistaja, ryhmä, ja sitten maailman.
Ja sitten kullekin näistä ryhmistä, et voi olla jokin kolmesta käyttöoikeudet,
OK, tai useita niistä.
Voit olla lukuoikeudet.
Voit olla oikeassa käyttöoikeudet.
Ja voit olla suoritus-oikeudet.
>> Joten kannalta todellinen tiedostotyyppejä, lue lupa on kuin lukematta
tiedoston sisältö.
Oikeus lupaa kirjallisesti mainittuun tiedostoon.
Suorittaa lupaa on käynnissä tiedosto kuten teet, kun olet suorittanut yhden
sinun CS50 projekteja.
>> Eli kun olet ajatellut tiedostoja kuten silloin meidän täytyy lukea HTML
tiedosto, jonka on oltava maailman luettavissa, eikö?
Oletettavasti myös omistaja haluaa pystyä muokkaamaan kyseistä tiedostoa.
Joten omistajan menossa on luku-ja kirjoitusoikeudet.
He eivät todellakaan tarvitse suorittaa.
>> Ryhmä, aiomme hoitaa sama kuin maailman nyt.
Joten he tarvitsevat lukuoikeudet.
Mutta he eivät tarvitse kirjoittaa tai suorittaa käyttöoikeudet.
Ja nyt, jos ajattelemme takaisin entiselle PSETs, mitä ymmärrämme on tällaisia
ja näyttää binary, eikö?
1 tarkoittaa kyllä.
0 ei.
Ja voimme todella kääntää Tämän binääri.
>> Joten 110 binary olisi 6.
100 olisi 4.
Sama maailma.
Joten numero saisit käyttöoikeuksia tämä olisi 644.
>> MIKE RIZZO: Ja jos luulet takaisin kun chmoded jotain, uskon
he antoivat vuonna Harjoitus esimerkki, jossa voit tehdä
jotain chmod 644 ja sitten tiedoston nimi.
644 sitten, voit nyt nähdä suoraan mistä se tulee.
Joten toivottavasti joka tekee, että hieman selvempi.
>> Ja sitten sinulle kaveri selkeys -
oh yeah, tässä tämä on taas.
Joten 600 sitten olisi vain esimerkki luovuimme täällä missä omistaja on
lukea ja oikeudet asennuksen ja ryhmän ja maailma ei ole mitään oikeuksia
avata tiedostoa.
>> TOMAS REIMERS: Ja sitten meillä on nopea luettelo yhteisistä käyttöoikeudet.
Joten hakemistoja, haluatko todella chmod 711.
Nopea sivuun - hakemisto voi olla suoritettavan lupaa merkitsee mahdollisuutta
Avaa hakemistoon.
Kuvia, CSS, JavaScript, HTML tarpeisiin 644 koska pohjimmiltaan maailma
tarpeita lukuoikeus.
>> Ja PHP, jonka te olette nähneet vaikka emme puhu siitä
tiukasti tyypillisesti chmoded kanssa lupaa 600 koska se on ajaa
luvat omistaja.
Ainakin laitteen päälle.
>> MIKE RIZZO: Joten jos et ole erikseen tarkenna, millaisia tiedosto
haluat todella asettamalla up esittelyn -
meillä oli ongelma tässä, koska kaikki ei chmoded oikein -
aiot saada, tavallaan, kielletty virhe, että sivusto
ei varsinaisesti ole lupaa käyttää mitä tahansa tiedostoa
haluat sen käyttää.
Ja tietenkin, joka voi olla kiinteä - kuten Harjoitus - muuttamalla
käyttöoikeudet asianmukaisesti.
>> TOMAS REIMERS: Ja viimeinen kommentti nopeasti paikallinen kehittäminen on - me
tämän asian esille, mutta me vain halusimme tuoda sen uudelleen -
jos kysyt palvelin - niin paikallinen isäntä, esimerkiksi. com tai mitä tahansa -
ja et määritä tietyn tiedoston, tiedosto, että tietokone on menossa
pyytää kutsutaan index.html.
Tai jos se ei ole, index.php.
>> Cool.
Joten se on vain kertaus kaiken, toivottavasti, että olemme katettu
jakso, ja luento, ja tähän mennessä CS50.
Ja nyt me aiomme alkaa puhua noin erityisesti kirjastot.
JavaScript-ja CSS kirjastot web-sovellukset.
>> Joten yksi nopea syy miksi meillä on kirjastot ohjelmoi -
siellä on paljon ongelmia ohjelmointi, jotka pitävät popping
uudestaan, ja uudestaan, ja uudestaan.
Saatat huomata, että paljon sivustoja täytyy kyky on avattavasta
valikot, esimerkiksi tai tarvitset kykyä on hyvin standardi painike
tyyli, joka ei voi olla helpointa.
Nyt kun alkaa saada HTML, voit ymmärtää, että painikkeet voivat todella
näyttää todella ruma, jos älä tee mitään.
>> Niin monet ihmiset ovat kirjoittaneet kutsutaan kirjastot.
Ja tässä yhteydessä ne ovat kutsutaan myös puitteet.
Aiomme käyttää kaksi synonyymeinä.
Ja mitä he ovat on ne pohjimmiltaan premade paloja koodi -
joko CSS tai JavaScript -
jotka vievät paljon Team Sinulla koodauksessa.
>> Joten ne ennalta määrittää joukko luokkia tai ennalta määrittää joukko toimintoja
JavaScript n tapauksessa, joka voit soittaa myöhemmin.
Ja sitten voit, tavallaan, saat käyttöoikeuden tähän koodi ilman
tarvitse tehdä mitään.
Esimerkiksi kirjaston oli CS50.H. Se oli kirjasto annoimme teille takaisin
viikolla yksi, joka saa sinut tekemään tuollaista GetInt ja getString
ilman kirjoittaa koodia itse.
>> MIKE RIZZO: Selvä.
Joten tässä, aivan kuten meillä oli sisällyttää meidän c tiedostoja eri
kirjastot, meidänkin tulee sisällyttää meidän HTML-tiedostoja eri kirjastoissa.
Esimerkiksi, jos halusimme sisällyttää erityistä JavaScript-kirjaston täällä,
ehkä yksi että olemme kirjoitettu itsemme se on paikallisesti isännöi
nimeltään script.js, me vain käyttää tätä merkintää.
>> Joten meillä on kirjoitus tyyppi tasavertaisina JavaScript lähde tasavertaisina
JavaScript.js.
Ja jos luulet takaisin CS50 rahoituksen ongelma asettaa, jos katsoi vuonna
header.php-kansioon, sinun olisi pitänyt nähdä
Jotkut näistä mukana.
Joten tämä ensimmäinen - skriptit -
on myös JavaScript-kirjaston.
Lukien CSS kirjasto on hieman erilainen.
>> Täällä, sen sijaan, että kirjoitus Tag tarvitset link tag.
Ja sitten, teksti CSS tyyppi on hieman erilainen.
Sinun ei aina tarvitse sisältää suht tyylisivu.
Mutta mielestäni se on yleisesti hyviä käytäntöjä.
>> Ja sitten lopuksi HREF, johon luultavasti näki oman ATAGs linkittämistä
eri linkkejä vain täsmennetään linkki, missä löytää sitä.
Esimerkiksi, jos halusimme yhdistää kirjaston eri - haluan vain sanoa, -
että asui styles.css.
Ja halusimme yhdistää, että se on isännöi Webissä, olisimme kopioidaan.
Ja sitten liitä se mitä meillä on täällä sijaan.
>> TOMAS REIMERS: OK, toivottavasti kaverit ovat jo tuttuja
miten yhdistää CSS.
Sinun piti tehdä, että viimeinen ruskea asetettu.
JavaScript, jotkut teistä ehkä on jonkin verran kokemusta.
Jotkut teistä eivät.
>> Joten nyt, tietää, että JavaScript-tiedoston on hyvin samankaltainen kuin CSS-tiedostoa
mielessä, että voit linkittää sen tai että voit sisällyttää sen sisäisesti.
Ja sen avulla voit script asioita.
Ja me aiomme opastaa hieman JavaScript myöhemmin.
>> Joten käyttämällä kirjasto -
kun olet lisännyt se, se on niin yksinkertaista kuin kirjaimellisesti soittamalla
toimintoja tai lisäämällä luokan nimiä sitä.
Emme todellakaan halua puhua noin kannalta kirjasto -
ja tämä on enemmän tekninen huomautus -
on avoimen lähdekoodin lisensointi.
Kun löydät näitä todellisia kirjastot, saatat ajatella
Kysymykset kuten se on ok, että olen vain käyttää jonkun toisen koodin, erityisesti
koska se on mitä hartaasti käskin sinun tehdä tällä kurssilla.
>> Joten jos kyseessä on avoimen lähdekoodin lisensointi, paljon kehittäjät -
kun he ovat kirjoitettu kirjasto, jonka he ajattelevat voisivat olla
auttaa muita ihmisiä -
julkaisee sen web ja antaa sille luvan.
Ja lisenssin pohjimmiltaan sanoo Olen täten luvan myöntämistä muille
ihmiset käyttää tätä pala ohjelmisto seuraavia eräänlainen
määräyksiä.
>> Olemme mukana linkki hyvä sivusto auttaa sinua ymmärtämään lisenssit
Jos tulee niitä.
Yhteinen sopimusmääräykset ovat asioita, kuten olet tervetullut käyttää minun kirjastoon, jotta
kunhan annat minulle luottoa.
Olet tervetullut käyttää minun kirjastoon kunhan särkyessään
et syyttää minua.
Olet tervetullut käyttää minun kirjastoon niin kauan koska et käytä sitä tehdä rahaa
itse.
Nämä ovat erilaisia yhteisiä määräyksiä.
>> Tästä CS50 opinnäytetyö, ne ei pitäisi olla erittäin merkityksellinen, sillä
hankkeita, jotka te käyttöä ovat luultavasti melko, tavallaan, tiedossa.
Mutta kun itse mennä ulos maailmaa ja alkaa käyttää kirjastoja, jotka
voidaan tai ei voida yhtä hyvin toteuttaa jotkut enemmän suosituimmista lajeista olemme
olla menossa läpi.
On hyvä pystyä ymmärtämään näitä lupia ja
ymmärtää, mitä ne tarkoittavat.
Ja menee takaisin.
>> MIKE RIZZO: OK.
Joten nyt siirryn esimerkkejä todellisten CSS.
Tässä vaiheessa toistaiseksi, saatat ei olisi havainnut tämän.
Mutta olet ehkä havainnut sen jokapäiväistä elämää, jossa jotain
joka näyttää yhdellä tavalla yhdessä selaimessa ei ehkä näytä samalta
tavalla toisessa selaimessa.
>> Tätä kutsutaan selaimen selain yhteensopivuus.
Ja yhä se on tulossa enemmän ja suurempi ongelma, varsinkin kun
selaimet ottaa enemmän ja enemmän vapauksia toteuttaa asioita kuin he haluavat.
Jotta voidaan päästä, että siellä oikeasti on Suurta kirjastoa nimeltään Normalize.CSS.
>> TOMAS REIMERS: Meillä sisältyvät linkkiä.
Tässä vaiheessa se on hyödyllistä, jos sinulla on kannettavan tietokoneen siellä
katsot sivustolla.
Ja me annamme tämän teille oikea nyt yksinkertaisesti siksi CS50 lopullinen
Projekti on todella menossa pyytää sinua toteuttamaan sen
Samoin ja kautta selaimissa.
>> Joten pitää takana pää, tämä on hieno kirjasto
Koska se, tavallaan, standardoida asioita.
Firefox, jotain voi näyttää kuin yhden pikselin vasemmalle.
Ja sitten Chrome voi päättää, että tosiasiallisesti mitä tarkoitti oli 10 pikseliä
vasemmalle.
Ja haluat standardoida tätä.
Normalisoituu todella tehdä todella hyvä työtä varmista, että sivustosi
näyttää samalta eri selaimissa.
>> MIKE RIZZO: Joten jos halusimme vain klikkaa linkkiä todella nopeasti ja näyttää
, mitä se näyttää, voit ladata sen käyttämällä
jättiläinen Lataa-painiketta.
Tai sitten sinun kannattaa lukea siitä lisää klikkaamalla tätä linkkiä alemman
oikeassa yläkulmassa.
>> TOMAS REIMERS: Ja jos todella Valitse Lue lisää tuolla -
klikkaa lähde GitHub -
voit itse nähdä avoimen lähdekoodin lisenssin LICENSE.md oikeassa.
Ja näet tässä erittäin suosittu MIT lisenssin.
Uudelleen, jos luet tekstiä, voit löytää sen päällä
me viitattu ennen ja pystyä ymmärtää sitä ilman lukea
kautta lakikielellä.
>> MIKE RIZZO: OK, hyvä.
Niin, että Normalize.
Halusimme antaa sinulle että todella nopeasti.
Voi, sinulla on kysymys?
>> Yleisö: Joten kun lataat sen, voit seuraa vain, että koodi, joka heillä on
alle Lataa-painiketta?
>> TOMAS REIMERS: Kyllä, niin kun lataat -
>> MIKE RIZZO: Onpa suuri piste.
Joten kysymys oli miten me itse ladata se?
Jos siis klikkaa linkkiä, näemme että se todella ponnahtaa
lähdekoodia.
Joten tehdä tätä, mitä voisimme tehdä, on klikkaa Tallenna nimellä.
Tallenna nimellä ja että olisi Tuo tiedosto.
Ja sitten voimme valita tallennetaanko se normalize.CSS.
Ja sitten sinun täytyy linkittää se -
>> TOMAS REIMERS: samalla tavalla kuin -linkkiä minkä tahansa tiedoston.
Ja kun liität sen, mitä hienoa noin Normalize on se todella
hoitaa kaikki kovat toimi itsestään.
Eli sinun ei tarvitse lisätä mitään luokissa.
>> Sinun ei tarvitse tehdä mitään outoa.
Se normalisoituu ilman sinua tee mitään edelleen.
Kyllä, sinun täytyy sisällyttää se.
Google Chrome ei vastaa.
>> Just a quick syrjään -
Huomasin hyppäsimme tähän.
Loput esittelyn on olemaan yleiskatsauksen.
Tutkimus kirjastojen.
>> Pohjimmiltaan, mitä ne ovat.
Mitä he tekevät.
Miten he ovat hyödyllisiä.
Miten voit toteuttaa ne.
Jos haluat aloittaa katsomalla niitä, jälkeen pitkin, ja lukemisen kautta
niitä, olisin erittäin rohkaista sitä.
>> Vaihtoehtoisesti, olet tervetullut myös alkaa ladata niitä ja myös
ne näky vain nähdä, mitä he näyttävät tai mitä he tekevät, jos sinulla on
kannettavan tietokoneen edessä.
Jos ei, olet tervetullut pitää kuuntelemassa meitä puhua.
Aiomme pitää puhua.
Ja meillä on aikaa lopussa, toivottavasti me todella päästä näyttämällä
mitä jotkut näistä kirjastojen näyttää.
>> MIKE RIZZO: Cool.
Okei, joten nyt puhutaan noin Font Mahtavaa.
>> TOMAS REIMERS: niin Font Awesome on todella siisti sivusto, erityisesti niille
meistä, jotka ovat vähemmän taiteellisesti lahjakas.
Unohtaminen nimi Fontin Mahtavaa, se antaa sinulle kasan kuvakkeita, jotka ovat
erittäin hyödyllinen.
Niin paljon kertaa voit toteuttaa kuvaketta voit mukavalta x niin
että voit sulkea jotain.
>> Tai haluat ehkä jonkinlainen Muokkaa-painiketta kanssa lyijykynä piirustus kuten
kaikki muu on.
Ja silloin opit, että piirtäminen nämä kuvakkeet voi olla
hyvin työlästä ja vaikeaa.
Font Awesome - jos itse Siirry sivuston -
antaa sinulle paljon kuvakkeita alle kuvakkeet yläreunassa.
Joo, juuri alkuun.
Se antaa sinulle paljon kuvakkeet ilmaiseksi.
>> Joten tässä näette meillä on asioita, kuten tähti, baareja, salama,
kalenteri, bug, kirja, jne..
Tämä voi olla erittäin hyödyllistä.
Miten lisäät tämän on lisäät kirjaimellisesti CSS-tiedosto.
Ja kun olet saanut sisällyttää CSS-tiedoston, mitä voit tehdä on luot
merkintä: I. Se satands varten kuvake luokan FA
seisomaan Font Awesome.
Ja sitten, mitä luokka haluat.
>> Joten jos halusin ikoni tämä plus neliö täällä, antaisin
se luokka FA.
Ja sitten FA väliviivaa plus väliviivaa neliö.
>> MIKE RIZZO: Cool, OK.
>> TOMAS REIMERS: Ja sitten, viimeinen CSS Kirjasto haluamme saada läpi olemme
yrittää pitää se mahdollisimman vähän CSS kirjastot koska emme ymmärrä
otsikko esittelyn on Javascript Kirjastot.
Mutta ajattelimme, että voimme yhtä hyvin tutustutaan muihin kirjastoihin
kun puhuimme kirjastot.
>> Se on Google Web Fonts.
Ja mitä Google Web-fonttien avulla voit vain lisätä fontteja sivuston,
joka on todella helppo tapa tehdä se kaunis ja erottaa sinun asettaa
alkaen kaikkien muidenkin on, jos se on kiva fontti tai jos se on kiva
kokoelma fontteja.
Google Web Fonts on mukavaa toisin kuin muut kirjastot siinä mielessä, että se on
todella ohjattu asennus.
>> Joten jos noudatat linkkiä, se on google.com / fontit, uskon.
Jos seuraat, että olet valita oman fontin.
Voit valita vasemmalla alkaen paksuus, vino, jne..
Ja sitten, kun olet valinnut yhden, voit napsauttaa nopeasti käyttöön.
Oikeassa.
Oikeassa alareunassa ruutuun.
>> Ja sitten, selaa alaspäin.
Ensinnäkin, he antavat sinulle CSS sinun täytyy todella linkin siihen.
Se on tuolla.
Voit vain kopioida ja liittää, että sisään
Ja Kiva juttu tämä on et itse edes tarvitse
Lataa tiedosto.
>> Mitä se aikoo tehdä, on se menee linkittää Googlen version.
Joten takaisin, mitä se tarkoittaa.
Tämä tarkoittaa, että kun käyttäjä lataa tiedosto -
lataa HTML-sivulla - HTML sivu tulee viitata tähän tiedostoon.
>> Joten sitten, tietokone tulee nähdä, Voi, se on isännöi google.com pikemminkin
kuin theirsite.com.
Anna minun mennä kysymään Google kyseisen tiedoston.
Ja sitten, se tulee sisällyttää se melkein kuin se olisi
osa oman sivuston.
>> TOMAS REIMERS: Cool.
Ja kun lisäät, että sitten sisällyttää sen CSS, se antaa sinulle
todellinen linja.
Niin asetat omaisuutta fonttiperheen sama nimi fontin.
>> MIKE RIZZO: OK.
Joten me juuri päättynyt CSS.
Ja jotkut teistä ehkä ajatella, hyvin, meillä oli joitakin CSS on CS50 Finance.
Mutta CSS kirjasto oli bootstrap.
Me itse asiassa kuuluu Bootstrap hieman myöhemmin alle JavaScript koska kanssa
Bootstrap CSS kirjastoon tulee myös paljon JavaScript joka
Bootstrap tai Twitter - joka teki Bootstrap -
käyttää hallita kaikkia niiden CSS.
>> TOMAS REIMERS: Onko kellään mitään kysymystä toistaiseksi CSS yleensä?
Olemme kunnossa?
Mahtava.
>> MIKE RIZZO: Mahtavaa.
>> TOMAS REIMERS: So liikkuvat kiinni JavaScript.
>> MIKE RIZZO: Joten halusimme puhua noin jQuery aluksi.
Onko kukaan kuullut jQuery ennen tai käyttänyt sitä?
Joo, pari?
Joten jos vain työtä natiivi JavaScript, löydät itsesi
kirjoittamalla paljon pitkiä valitsimia paljon.
Joten mitä jQuery ei se tarjoaa mukava kääre JavaScript
kieli, jonka avulla voit helposti valita ja manipuloida eri elementtejä
dokumentissa objektimallia verkkosivu tai DOM, joka mielestäni
te olette kuulleet vuonna luento tässä vaiheessa.
>> TOMAS REIMERS: Jos et ole kuullut sitä tai jos et ole katsellut luento
vielä, Document Object Model on pohjimmiltaan miten asiat ovat edustettuina.
Joten HTML tavallaan näyttää puu kun itse vetää sen pois.
Sinulla on HTML-elementti päälle.
Sinulla on pään ja vartalon.
>> Ja sitten, tuossa olet on kaikkea muuta.
Joka kutsutaan DOM -
Document Object Model.
Joten malli, joka edustaa esineitä asiakirja on helppo tapa ajatella
siitä.
Ja yksi suuri asia jQuery on se todella tekee liikkumisesta
että ja manipuloida elementit että uskomattoman yksinkertainen.
>> Niin yksinkertainen, itse asiassa, että suurin osa JavaScript kirjastojen tai jos ei
enemmistöllä, grand suurin osa niistä näet todella vaativat jQuery niin
että ne voivat juosta itsensä yksinkertaisesti koska jos sinulla ei ole jQuery, voit
tuhlaisi paljon aikaa yrittää selvittää, miten valita tiettyjä
elementit ja miten tehdä muita asioita.
Ja Toinen suuri asia jQuery on, että se on rajat selain yhteensopiva.
>> Joten Muistan kun sanoimme, että ei kaikki selaimet toteuttavat
asiat samalla tavalla?
Tämä pätee myös JavaScript.
Ja yksi hienoimmista asioista jQuery on se, että se tunnistaa
selain ja havaita sopivalla tavalla.
>> Joten jos sinun täytyy valita elementin, Internet Explorer saattaa sanoa, että olet
pitäisi tehdä tällä tavalla.
Firefox voisi sanoa oikein tapa on tällä tavalla.
jQuery ei välitä.
Kun kerrot jQuery valita elementti se selvittää, miten se on
pitäisi tehdä se selaimen sisällä käyttäjä on tällä hetkellä, ja tee
niin.
>> MIKE RIZZO: Joten puhu käyttö jQuery hieman.
Aivan kuten PHP, jQuery on erityisesti mieltymys dollarin merkki.
Joten huomaat, että mitään jQuery -
No, eivät kaikki.
Voit joskus korvata dollarin merkin sana jQuery.
Mutta yleisesti, vain koska se on lyhyempi, kun näet jQuery on
käytetään se tulee olemaan kanssa dollarin merkki.
>> Joten tässä me vain osoittaa alkua valitsin osa DOM.
Täällä meillä on dollarin merkki jälkeen avoin suluissa ja sitten lainauksia.
Ja sisällä lainausmerkkejä mennä meidän valitsimet eri elementtejä.
Aivan kuten CSS, tarvitsimme valitsijat voitava muotoilla eri elementtejä
sivulla.
Nämä eri valitsimet kääntämään täsmälleen osaksi jQuery ja JavaScript,
suurimmaksi osaksi.
>> Joten tässä meillä on piste foo.
Joten jos muistatte luento, piste tarkoittaa vain sitä luokkaa.
Joten olemme valitsemalla elementti luokan foo.
Joten jos menen eteenpäin ja avaamme JavaScript-konsoli täällä todella nopeasti
vain osoittaa sen, jos vain kirjoita dollarin merkki, näemme, että se on jokin
toiminto, joka tulee.
Ja se on vain määritelty jQuery.
>> TOMAS REIMERS: Niille teistä tuntemattomia, konsoli on työkalu
Chromessa, jonka avulla voit, pohjimmiltaan, suorittaa JavaScript
nykyinen sivu.
Tämä löydät uskomattoman hyödyllinen, kun olet todella virheenkorjaus ja sinä
täytyy olla, mitä on nykyinen arvo on noin globaali muuttuja tai mitä
on jotain muuta?
Se on tavallaan kuin GDB lukuun ottamatta että voit itse
manipuloida elementit sivu se paljon helpompaa tavalla.
Ja myös se ei pohjimmiltaan tarkista teidän kanssanne, ennen kuin se tekee mitään.
>> Joten taas, GDB voisi olla, oletko varma, että haluat suorittaa seuraava askel?
Konsoli on todellinen.
Jotta web-sivu on renderointi ja tekee mitä se tekee,
Neuvoston myös käynnissä sen rinnalla.
Ja voit laittaa imputoidaan koodi että konsoli, joka
ajettava sivulla.
>> MIKE RIZZO: Niin syöttää konsoliin Pitäs varmaan lyhyesti
mainita, miten se tehdään.
Viime ongelmia, joita saattaa olla käytetty Chromen tarkastaa elementin
toimintoja tai katsella sivun lähdekoodi -
ja ne ovat saatavilla vain oikea klikkaamalla sivun tai tietyn
elementti ja tekee joko tarkastaa elementti tai tarkastella sivun lähdekoodia.
Voimme myös käyttää JavaScript konsoli suoraan
valitsevat tarkastaa elementti.
Näin on sitten vain lyödä konsoli äärimmäisenä oikealla puolella.
>> Vaihtoehtoisesti voit myös menneet on oikeassa yläkulmassa,
joka leikataan pois tämän näytön, jossa sillä on kolme vaakapalkeilla.
Ja menet alas työkaluja ja Nyt JavaScript-konsoli
täällä, jossa voi nähdä -
ainakin Windows -
pikakuvake Ohjaus Shift J. Joten sitten jos halusimme valita elementin
tämän sivun, aivan kuten näytin ennen, teemme dollarin merkki avata parens
ja sitten lainaa.
>> Mielenkiintoista on, yleensä, puolilainausmerkkejä ja lainausmerkit ovat
vaihdettavissa.
Niin monet ihmiset vain käyttää yhden lainausmerkkeihin, koska ne ovat nopeampia kirjoittaa
kuin lainausmerkkeihin, koska et täytyy pitää Shift.
Joten minä vain tehdä juuri nyt.
>> Joten haluan valita jotain luokan.
Container, vain koska tiedän, että se jotain, joka on meidän
Web-sivun juuri nyt.
Ja osuin Enter.
Ja voimme nähdä, että se valitsi sen.
Joten se näkyy, että se palasi objektia.
Niin, että perus valikoima.
Jos haluamme todella manipuloida sitä, olisit soittaa jotain
tähän valintaan, joka joudumme myöhemmin.
>> TOMAS REIMERS: Joten vain katsoa, että enemmän syvyyttä, tämä ei eroa
kuin funktiokutsuja teimme C. Funktion nimi tässä
hieman outo.
Se on dollarin merkki.
Se on vain nimi funktion.
Ei ole mitään erikoista.
>> Meillä on avoimet sulut.
Sitten meillä on yksi argumentti, joka tässä tapauksessa sattuu olemaan merkkijono,
joka on valitsin sen.
Ja sitten meillä on loppusulkumerkit.
Siinä kaikki.
>> Se ei ole niin hyvin erilaisia.
Vaikka se näyttää hyvin oudolta.
Ja että voi olla, tavallaan, kiinni Point paljon ihmisiä.
>> MIKE RIZZO: Joten Samoin jos halusimme Valitse elementti, joka on tunnus,
Nyt haluamme valitkaa ID sijaan luokassa.
Olisi samanlainen asia, jos me vain tehdä teräviä merkki tunnus.
Joten olemme valitsemalla täällä kaikki elementtejä, jotka ovat tunnus baari.
>> TOMAS REIMERS: Ja tämä ulottuu.
Että CSS ulottuu.
Aivan kuten CSS, voit valita kaikki linkkejä, jolla on luokka foo.
Täällä, se on sama asia.
>> Voisit tehdä a.foo, joka valitsisi kaikki linkit luokan kanssa foo.
Voisit tehdä teräviä baari, joka valitse yhteys ID baari ja niin
edelleen ja niin edelleen.
CSS valitsin on voimassa jQuery valitsin.
>> MIKE RIZZO: Joo.
OK, joten nyt Mennään hieman manipuloinnin, että voimme tehdä
meidän jQuery.
Joten jQuery on tietyn tyyppinen merkintätapa missä me vain käyttää
piste lopussa.
Ja voit ajatella tätä kuin vuonna C miten meillä oli eri structs.
Ja mennä noihin structs, olisit käyttää piste päästä niihin.
>> Tämä on, tavallaan, samanlainen asia.
Vasta nyt meillä on tehtäviä tämän valitsijaelementille että voimme pyytää sitä.
Joten tässä, aivan ensimmäinen esimerkki näet on CSS valitsin.
Ja periaatteessa, mitä se tekee, on se sovelletaan ensimmäisen elementin CSS tähän
asia, että olet valinnut -
tämä elementti, että olet valinnut -
kanssa arvo.
>> TOMAS REIMERS: Niin helppo käännös että olisi, jos jQuery, periaatteessa,
vain otti foo.
Ja sitten CSS sanoi, Väri punainen ja lähellä.
Se on sama idea.
Mitä se on tehnyt, on se on valittuna Kaikki elintarvikkeita elementtejä.
Ja sitten se laitetaan.
Tavallaan, omaisuuden väri on yhtä suuri kuin punainen.
>> MIKE RIZZO: Vastaavasti voimme myös muuttaa todellista sisältöä, mikä on
näytetään HTML-sivun, joka on todella hienoa, koska se tarkoittaa, että
Web-sivut voivat nyt olla täysin dynaaminen ja ei tarvitse olla staattinen
tulostamaan PHP aivan alussa
sivu ladataan.
Joten tässä, jos haluaisimme muuttaa varsinainen HTML-sivun, olisimme nyt
soittaa HTML-toiminto, joka sitten vain insertit mitä me täsmennä
että elementti, että me valitut.
Joten tässä olemme valitsemalla elementti luokan foo ja sitten sano, että se HTML
se on nyt hello world.
>> TOMAS REIMERS: Ja kun ajattelee mitkä ovat hyödyllisiä sovelluksia
tämä, tämä CSS yksi, ensimmäinen asia, joka voit alkaa miettiä
kannalta jopa valikoista.
Voisit alkaa tehdä asioita, kuten silloin, kun käyttäjä leijuu yläosan
of avattavasta, haluat tehdä alaosassa näkyvä.
Oikea?
>> Niin CSS, meillä on ominaisuuksia tehdä jotain näkyvää.
Asiat kuten näyttö paksusuolen none tekisi näkymättömäksi.
Näyttö lohko tekisi näkyväksi.
Tai vaikka haluat mennä yksinkertaisempi, voit on asioita, kuten näkyvyys tasavertaisina
näkyvissä, ja näkyvyys vastaa piilossa.
>> Ja voisit alkaa toteuttaa asioita kuten valikoista oikealla
kun saat läpi käsityksen siitä, miten voit selvittää, kun tämä avaa,
josta saamme läpi hyvin lyhyesti.
Mutta voimme alkaa nähdä sovelluksia tästä.
Vastaavalla mielessä, jos olisit yrittää ja toteuttaa, sanokaamme, chat
moottori ja haluat tehdä vähän puhekupla keksiä aina olet
sai uuden viestin, kun saat uuden viestin, voit tehdä hieman
puhekupla keksiä muuttamalla HTML-sivun, eikö?
Lisäämällä että extra puhekupla kanssa ylimääräistä tekstiä siellä.
Joo?
>> Yleisö: Voisi siis upottaa tämän sisällä HTML-koodin tavallaan kuin
[Äänetön]?
>> MIKE RIZZO: Oikea.
Joo, me saamme, että vuonna hieman.
Joo, se on samanlainen hieman PHP.
Ei aivan samanlaisia.
>> Hyvä ero tehtävä se, mitä tämä on todella muokkaamalla kun me muokata
sivun, koska se ei tule olemaan muokkaamalla todellisen tiedoston, jota
säilytetään palvelimella, koska maailma ei pitäisi olla lupaa
muokata tiedostoja.
Tämä on vain muokkaamalla mitä sivulla ja mitä näkyykö
selain.
Joten jos olit ladata sivun uudelleen sen jälkeen, sanoa, poistamalla jotain niin me
katso voimme tehdä Poista puhelun, että asia olisi sitten uudelleen näkyviin.
>> TOMAS REIMERS: Joten yksi tapa ajatella tämä on, jos olen tietokoneen ja
Mike on, tavallaan, palvelin.
Mitä tulee tapahtumaan on aion pyytää Mike, hei, voinko olla kopio
Tämän sivun?
Ja hän antaa minulle kopion.
>> Ei, se ei ole alkuperäinen juttu.
Se on vain kopio.
Ja sitten se olisi sama kuin, oh, siellä on JavaScript täällä.
On selvää, minun pitäisi muokata sivu olla näin.
Ja olen muokkaat kopio.
>> Mutta se ei ole vaikuttavat kopion itse.
Ja jos olisin pyytänyt häntä uudestaan päivitä sivu, -
Hei, saisinko toisen puhdas kopio -
hän aikoo antaa minulle toinen puhdas kopio.
Ja sitten, aion tehdä sama asia kuten, oh, tämä JS täällä joka sanoo
muokata tätä.
Ja aion jatkaa tuota.
>> MIKE RIZZO: Niin todella cool juttu että voit tehdä jQuery on
itse lisätä erilaisia animaatioita sivullesi.
En tiedä, jos olet koskaan nähnyt jossa yrität täyttää lomakkeen
verkossa ja et täytä asiat oikein.
Joten pikku juttu liukuu alas yläosassa ja sanoo,
ole tehnyt tätä oikein.
Ole hyvä ja yritä uudelleen.
Ja sitten, se saattaa jopa vain kiivetä.
>> Osoittautuu jQuery on rakennettu toiminnot jotka tekevät kaikki kyseisen
animaatio todella, todella helppoa.
Joten on ensin häivyttää out-toiminto, joka
voit soittaa jotain.
Ja se on tapa muuttaa CSS että tekijä animoitu tavalla.
Joten se vie tahansa elementti kutsua sitä häivyttää pois.
Ja sitten, hitaasti se muuttuu peittävyyttä kunnes se menee täysin avoin.
>> TOMAS REIMERS: muita suosittuja yksi on liukua alas, mikä tekee
jotain näkyviin vetämällä sitä alas.
Joten jos kyseessä pudotusvalikosta, uudelleen, kun opimme, miten tunnistaa
kun tämä on pysytellyt yli, voisitte vain kertoa tämän pohjan
osa liukuu alas nyt.
Ja sitten, se näyttäisi liu'uttamalla alas.
>> MIKE RIZZO: Ja sitten, jos sinulla on vain tietyntyyppinen animaatio mielessä, että
jQuery ei välttämättä kerro.
Esimerkiksi sanokaamme jQuery ei tarjota sinulle dia
alas ja työnnä ylöspäin.
No, sanokaamme olet halunnut liukua jotain tai vasemmalta sisään
oikeanlaista kuten CS50 pääsivu tekee aina
menet uusi paneeli.
Olisit sitten luultavasti toteuttaa sitä itse käyttämällä
animoida toimintoa jQuery.
>> Joten samalla, juuri animoida.
Ja sitten, sen sisällä se kestää sanakirja erilaisia arvoja
että sinun pitäisi kulkea.
Joten tässä, jos halusimme animoida elementti foo sellainen, että sen leveys joko
laajenee tai sopimukset 80 pikseliä, riippuen siitä, mitä se tällä hetkellä on.
Haluamme vain tapahtui, että koska argumentti sisällä.
>> Animoida myös joitakin muita argumentteja että voisitte välittää sen esimerkiksi
nopeus animaation että haluat antaa sille.
Ja tehdä sitä, haluan vain sanoa nopeasti Google jQuery animoida.
Ja sitten, kasvatuksesta Tältä sivulta voit katso se sai joukko eri
ominaisuuksia, jotka voit siirtää sitä.
>> Ja kehotan teitä - kun tulee poikki jotain, et
tietää tai haluat vain lisätietoja erityisesti tapa, että voit soittaa
jotain -
vain googlettaa. jQuery on äärimmäisen hyvin dokumentoitu.
Ja usein siellä on paljon esimerkkejä siitä, että ne tarjoavat sinulle.
Jos me selaa -
alas -
että voimme käyttää, samoin.
>> Jälleen kun kehittäjä todella menee läpi ongelmia kirjallisesti
kirjasto, he yleensä haluavat joku käyttää sitä.
Joten rinnalla on menossa olla dokumentointi.
Ja että asiakirjat voidaan yleensä löytyy projektin sivulla, joka on
miksi me annoimme teille, että alkuperäinen sivusto alussa, joka yhdistää sinut
projektin sivut niin voit nähdä, että asiakirjat.
>> Tyypillisesti projekti-sivu, jos of [äänetön], se määrännyt
nimet luokkiin.
Kun kyseessä on JavaScript, se antaa et nimen toimintoja.
Muuten, jos me selaamalla ylös, nopea Sivuhuomautuksena toiminnoista on
kun näet toiminto toteutetaan näin koviin
suluissa keskellä, että välineet että omaisuus on vapaaehtoista.
Vain heads up.
Olen nähnyt paljon kysymyksiä siitä.
>> Joten tässä voimme nähdä, että animoida vie ominaisuudet
välttämättömänä argumentti.
Ja kaikki muu on vapaaehtoista.
Sivuhuomautuksena -
voit ajatella tätä, lajitella ja, kuten man-sivuilta.
Man-sivut ovat asiakirjat C ja ja paljon muita asioita, samoin.
>> MIKE RIZZO: Joten olemme oppineet muuttaa eri CSS sivulla,
animoida, ja poista lisätä HTML.
Mutta yksi todella tehokkain asioita JavaScript
ja erityisesti jQuery -
mitä sen avulla voit tehdä on vastata eri elementtejä, jotka tapahtua.
Esimerkiksi, tässä meillä on tapahtumankäsittelijänä.
Ja se tarkoittaa vain sitä, kun tämä tapahtuma tapahtuu, hoidamme sen
tietyllä tavalla.
>> Joten tässä, yleinen jQuery tapahtuma käsittelijä on piste.
Ja sitten, ensimmäinen asia annoit on mitä tapahtuma pitääkin
kuunnella varten.
Joten täällä, se on napsautuksella, että odotamme.
>> TOMAS REIMERS: Vaihtoehtoisesti sinulla Hoverissa, joka on hyvin suosittu.
Joten takaisin minun pudotusvalikosta idea.
Olisit alkuun yksi häilyä.
Ja sitten voisi muuttaa sitä.
>> MIKE RIZZO: Oikea.
Ja sitten, kun se tapahtuu, se vain suorittaa tätä toimintoa, että annamme sen
argumenttina ja että se hälytykset hei tai Hei.
>> TOMAS REIMERS: Eli jos kyseessä on JavaScript, tämä on paikka meidän
poistaa itsemme C. voimme itse ottaa toimii argumentteja.
Ja on paljon todella monimutkaisia tapoja tehdä tätä.
Aiomme edistää yksi tapa, joka on voit määrittää
toimiakseen oikeassa.
>> Joten kun olet pyytänyt toimivat parametri, olet pohjimmiltaan vain
menossa toiminnon määrittämiseksi paikan päällä.
Ja miten määrittelet funktion JavaScript on sinulle
kirjaimellisesti sanoa toiminto.
Sitten yleensä nimi funktion.
Mutta emme koskaan viite tämä toiminto uudelleen.
Joten jätämme sen nimetön.
>> Sitten sulkeisiin, sitten kihara henkselit, ja sitten koodi kyseisessä.
Joten me ymmärrämme tämän voi olla hieman sekavaa.
Joten annamme sinulle yleinen muoto mitä tapahtumakäsittely näyttää
alapuolella, joka on tapahtumia.
Ja sitten, koodin sisällä että.
>> MIKE RIZZO: Onko olemassa mitään kysyttävää tästä?
Tämä voi olla hieman sekava ensimmäistä kertaa näet sen.
>> TOMAS REIMERS: Olet itse haluat avata tiedoston ja näyttää heille joitakin
jQuery juuri nyt?
>> MIKE RIZZO: Joo, tehdään se.
OK.
>> TOMAS REIMERS: Joten nyt olemme laitteeseen.
Ja mitä olemme tehneet on olemme ottaneet vapauden luoda sekä Index.html
tiedosto, joka vie sinut JavaScript-tiedoston.
Ja voimme avata -
joo.
No, se tekee kaksi asiaa.
>> Ensimmäinen on sen linkkejä JavaScript-tiedoston.
Ja näemme, että jopa täällä.
Näemme, että pää HTML-dokumentti, erityisesti.
Niin näet siellä, että me pohjimmiltaan sanoa SRC,
joka tarkoittaa lähdettä.
Ja se on URL.
>> Joten täällä voi sanoa olemme sisältyvät jQuery.
Ja olemme myös skriptejä.
Toinen tapa sisällyttää JavaScript on että voit sisällyttää inline script
tag kuten olemme alareunassa, jossa se sanoo kirjoitus tyyppi on teksti JavaScript.
>> Joten me sanomme, kuuntele, olemme noin sisällyttää käsikirjoituksen.
Ja tyyppi, että kirjoitus on JavaScript, joka on eräänlainen tekstiä.
Hyvin yksinkertainen.
>> MIKE RIZZO: Eli tämä, tavallaan, saa kysymykseesi siitä, miten me muun muassa
JavaScript meidän tiedostoja, koska kun me oli PHP, teemme jotain tällaista.
Ja sitten on meidän PHP toimintoja - sanokaamme varastot tehdä
jotain, joka -
menee sinne.
Kuitenkin nyt meillä koodit että me annamme sille, jotka ovat todellisuudessa
osa HTML itse, koska se ei ole faking on HTML-tiedosto maali
on PHP koska jos todella mennä ja katso sivun lähdekoodi,
näet nämä koodit siellä Javascript liittyy
heitä siinä.
>> Joten sitten, jos halusimme kirjoittaa joitakin JavaScript -
Sanotaan vain halusimme muuttaa kehon koska juuri nyt minulla ei ole
muita tunnisteita, jotka voin todella muokata lisäksi elin.
Sanotaan vain halusin muuttaa CSS siitä.
Joten me menemme eteenpäin ja muutos väri on punainen.
>> Joten en tallenna tiedosto.
Mennään takaisin meidän web-sivun, virkistää, ja tekee sen automaattisesti
koska se ei tunnu se odotti ollenkaan, koska olimme ei kuuntele
tapahtuman tai mitään sellaista.
>> TOMAS REIMERS: Jos siis palata siihen tiedosto erityisesti - HTML
tiedosto - mitä aiot nähdä on meillä -
muistaa, että tämä on ladattu, tavallaan, kronologisesti.
Joten olemme ensin pää. se lataa nämä kaksi tiedostoa.
Sitten menemme kehon.
Ja me näemme hello world.
Joten me tehdä hello world.
>> Ja sitten viimeinen asia meillä on meillä komentosarjatunnus.
Joten se toimii komentosarjatunnus koska se on ei kerro sitä odottaa mitään.
Ja se on alkeellisinta tapa suorittaa JavaScript.
>> Tämän sanoi, voit laittaa script tag up otsikossa vain
näyttää tässä vaiheessa?
Ja ajelu että.
Aiomme huomata, että se ei muuttanut väriä.
Ja tämä on yksi niistä ongelmista JavaScript on, että asiat ovat ladattu
aikajärjestyksessä.
>> Joten tuolloin, että kyseisen koodin oli käynnissä, valitsimme -
palata -
body.
Body ei ole vielä olemassa, koska JavaScript on sopusoinnussa HTML.
Joten selain on kuin valitsemalla elin.
Ei ole sellaista asiaa vielä.
Joten emme voi sivuuttaa sitä.
Ja pidämme menossa.
>> Ja sitten me määrittelemme body.
Mutta joka ei koskaan saa päivitetty.
Joten kun olet täytäntöön script tunnisteet, varmista, että asetat
jälkeen body.
Seuraava dia.
>> MIKE RIZZO: OK.
Joten muutimme jotain.
Mutta se ei näyttänyt se vastasi meitä lainkaan, koska se vain eräänlainen
teki sen heti kun se ladattu sivu.
Joten nyt, sen sijaan tehdä tämän, miksi emme lisätä tapahtuman käsittelijät.
>> Tehdäänpä jotain kehoon uudelleen.
Ja sanotaanko teemme sen -
valitse.
Me lisäämme toiminto.
>> TOMAS REIMERS: Vaihdetaan se on punaiseksi uudelleen.
Miksi ei?
>> MIKE RIZZO: Joo, nyt muutos sen "punaiseksi uudelleen.
Selvä.
Joten lataa sivu.
OK, näemme -
odotetusti, se ei punaiseksi vielä.
Mutta sitten voimme mennä eteenpäin ja klikkaa sitä.
>> TOMAS REIMERS: Ja se muuttuu punaiseksi.
>> MIKE RIZZO: Ja se tekee punaisiksi odotetusti.
>> TOMAS REIMERS: Ja voimme nähdä, kuinka voimme alkaa rakentaa hyvin yksinkertainen
vuorovaikutusta.
Muut asioita kannattaa tehdä on, jos emme halua tehdä kehon
Väri punainen, tehkäämme HTML taustaväri punainen.
Just niin se on sama CSS.
>> Ja kun muutamme sitä, voimme nähdä tämän hyvin dramaattinen vaikutus muuttaa
koko sivun.
Joten jälleen, jos olet täytäntöön asioita, voit olla yksi komponentti
joka on tarkoitettu napsautetaan.
Sanotaan Exit-painiketta ja koko muu komponentti,
joka on tarkoitus vastata.
Voisi siis poistaa ikkunan kun näin tapahtuu.
>> MIKE RIZZO: OK.
Aivan kuten esimerkiksi -
et saa nähdä tätä aikaisemmin -
Minä vain näytän sinulle, mitä se näyttää kuten kun me salata jotakin.
Niin minä mennä eteenpäin ja tehdä dia ylös.
>> TOMAS REIMERS Haluatko kääri että Edellä tyyppi ennen kuin teemme sen?
>> MIKE RIZZO: OK.
Niin, miksi emme tee sitä vain niin voimme valita sitä vähän enemmän.
>> TOMAS REIMERS: Ja katsotaanpa antaa sille luokassa.
>> MIKE RIZZO: Joo.
OK, joten katsotaanpa.
Sen sijaan, että valitsemalla todellinen kehon nyt, minä vain valita kaiken kanssa
luokan hei, mikä täällä vain yksi asia.
Joten meidän ei pitäisi huolehtia siitä.
>> Niin minä päivittää sitä.
Menen eteenpäin ja klikkaa sitä.
Ja se, tavallaan, teki outo dia up asia, joka ei näyttänyt, että
houkutteleva.
Yleensä ne näyttävät ihan kivoja.
Oletan, tämä - joidenkin syy - ei.
Otan vain tehdä häivyttää pois niin voit katsoa sekin.
Paljon mukavampaa.
>> Ja sitten, jos en avaa JavaScript konsoli uudelleen ja haluamme nähdä, mitä
se näyttää, kun me häivyttää sen sisään
Nyt olen vain soittaa häivyttää sitä.
Ja se haalistuu takaisin sisään
>> Samoin voisimme todella myös kulkea argumentti haalistua tai häivyttää,
joka on, tavallaan, nopeutta sen.
Joten mene eteenpäin ja sanoa haluamme se mennä hitaasti häivyttää sisään
Joten kai se silti tuntui melko nopeasti.
Mutta se oli hitaampi kuin ennen.
>> TOMAS REIMERS: Ja jos haluat löytää Lisätietoja näistä asioista, jälleen,
vain mennä jQuery dokumentaatio, jota me olemme antaneet teille, ja lukea
näiden kautta.
He dokumentoivat toiminnot uskomattoman hyvin.
>> MIKE RIZZO: OK.
Joten kai mennään takaisin tähän.
Ja voimme puhua meidän viimeinen sivu.
No, voimme lopuksi Bootstrap.
Ja sitten me sen avaaminen joitakin kysymyksiä.
Ja jos teillä mitään ideoita, jotka haluat yrittää oksentaa ja nähdä
jos voimme toteuttaa ne JavaScript nopeasti.
>> Joten todella nopeasti noin Bootstrap, joka on automaattisesti mukana
viimeinen ongelma asetettu CSS kansioon ja todella liittyvät oman
header.php.
Joten voi lisännyt luokkaa, että on määritelty Saapasraksi siihen.
Ja se olisi automaattisesti tyylistä niitä asioita vastaavasti.
>> TOMAS REIMERS: Eli Bootstrap on hyvin maaginen asia kehittämä ihmiset
Twitterissä.
Ja mitä se oli tarkoitus tehdä, oli -
ennen sivustot olivat todella vaikea tehdä hyvältä, varsinkin kun meillä oli
paljon yhteisiä osia.
Niin paljon painikkeita Web näytti samalta.
>> Paljon tekstiä kentät voidaan tehdä näyttää paremmalta kuin tavallinen teksti
kenttä Tiedät luultavasti todella vanhat sivustot tai oikeastaan huonosti tehty
sivustoja, jotka vain näyttää kirjaimellinen tekstilaatikoita ilman minkäänlaista tekstin
varjo tai minkäänlaista kiva ääriviivat.
Joten mitä Bootstrap teki oli se sanoi, hyvin, meillä on paljon yhteistä tyylejä.
Miksi emme tee yhdellä yhteisellä CSS ja yhteiset JavaScriptiä
hyvin, mikä voi muotoilla se on ja joka voi antaa ihmisille asioita, kuten pisara
valikoista, jotka voivat antaa ihmisille asioita, kuten modals.
>> Modaalinen on mitä ponnahtaa yli sivun aina kun se on varsinaisesti
jotain, joka estää edelleen vuorovaikutus kunnes
vuorovaikutuksessa sen kanssa.
Jotain tällaista on, oletko varma Haluatko poistaa tämä asia?
Et voi oikeastaan tehdä mitään muuta kunnes sanot kyllä tai ei.
>> Se vei kaikki tämän, ja se pakataan se yhteen ja sanoi, tässä sitä mennään.
Ihmiset voivat nyt käyttää tätä.
Ja löydät sen yli klo getbootstrap.com.
Se on automaattisesti sisälly viimeinen ongelma asetettu.
Ja olet enemmän kuin tervetullut käyttää sitä oman opinnäytetyön.
Ja jos haluat seurata, että linkkiä saadaksesi Bootstrap.
>> Näet tässä Bootstrap CSS sivusto.
Näet Bootstrap.
Ja jos selaat alaspäin, näet miten ladata se, miten
asenna se, ja niin edelleen.
>> MIKE RIZZO: Ja voit myös, Kiinnostavaa kyllä, muokata sitä
olla mitä Teemojen että haluat.
Tiedän, että on jotain tein minun Opinnäytetyö kun otin luokka
on muokata sitä.
Eri versiota Bootstrap että oli erilainen värimaailma ja
eri muotoja joidenkin eri asioita.
Joten kehotan teitä pelata sitä.
Se on tavallaan hauska tehdä.
>> TOMAS REIMERS: Katse yli alkuun uudelleen, se on hyvin samankaltainen Font
Mahtava sivusto.
Monet asiakirjoista alkaa tuntua samanlainen kun olet
nähnyt tarpeeksi.
Joten tässä meillä on CSS osa tätä.
Ja näet miten se voi muotoilla asioita.
Joten jos klikkaat taulukoita, esimerkiksi voit heti tehdä
taulukko melko yksinkertaisesti lisäämällä luokan pöytä siihen.
>> Samoja asioita painikkeita.
Jos vain lisätä luokan BTN ja BTN oletus tai BTN ensisijainen, voit
saada jokin näistä painikkeista Näiden valmiista tyylejä.
Ja sitten, jos etsit jotain monimutkaisempaa kuin pelkkä
restyling mitä w jo, päälleni JavaScript-välilehden yläosassa me
on joukko komponentteja.
>> Joten tässä meillä on siirtymiä, modals, dropdowns, välilehdet ja vihjetekstien.
Tooltip on mitä ponnahtaa alla hiiren kun viet jotain.
Popovers, hälytykset, painikkeet, kokoontaitettava hanurit on mitä
he yleensä kutsutaan.
Karusellit, joka flip kautta, kuten kuvia.
>> Joten ne ovat komponentteja Saapasraksi.
Haluaisin rohkaista teitä erittäin mennä katsomaan niitä.
Siellä on JavaScript komponentti ja CSS komponentti.
Voit vapaasti käyttää niitä kuten haluat.
Emme aio mennä liian paljon niihin koska mielestämme asiakirjat
on todella hyvin tehty.
Ja joo.
Onko sinulla kysyttävää siitä?
>> MIKE RIZZO: Niin ovat todella nopeita puolella, suunnittelu tämän sivun, joka
me nopeasti koonneet tämä esitys on
todellisuudessa tehdään käyttäen Saapasraksi.
Kuten näette, kun klikkaa näitä eri välilehtiä, emme koskaan oikeastaan
jättäen tämän nykyisen index.html sivu.
Eli meillä on erilainen divs tämän index.html.
Ja sitten, kun me sitten eri välilehti, se on vain muuttamalla
kumman näyttää.
>> Joten se vastaavasti paikoittaa niitä, muuttaa HTML-sivun, jotta
nykyinen välilehti aktiiviseksi merkitty niin se näyttää eri tavalla ja ulkonäkö
todella mukavaa.
>> TOMAS REIMERS: Niin, että kaikki tehtiin ilman meitä kirjallisesti lähes CSS.
Näemme myös otsikon yläosassa, jotka värit ovat meille.
Mutta todellinen laitat sen sivun yläreunaan ja tekee
se scroll oli Bootstrap.
Ja sitten vielä toisen kirjasto - tämä ei ole yksi puhuimme mutta yksi
voit googlettaa jos haluat.
Tätä kutsutaan prettify.js.
Ja se syntaksinkorostus koodin teille sekä CSS-ja JavaScript.
>> Emme todellakaan halua puhua ennen me vapautamme sinut ulos
maailman tarkastella kirjastojen selvittää miten niitä käytetään ja toivottavasti
Lue dokumentaatio ja löytää mitä tarve on, miten löytää kirjastoja.
Joten ensimmäinen on me vain menossa työntää Google.
Mene Google.
>> Se on kirjaimellisesti mitä me teemme, kun me täytyy tehdä jotain, on meidän Google.
Onko JavaScript-kirjasto, joka antaa minulle mahdollisuuden manipuloida aikaa
hyödyllinen tapa?
Joten jos tiedän, että joku käyttäjä luo tilin täällä, ja tämä on
kellonajan, miten voin laskea Ero että ilman
laskea sen itse?
Joten tämä on todella yhteinen asia, JavaScript aikaa kirjastossa.
Ja tässä me Moment.js-- suosituin.
>> Jos tarvitsemme kirjasto manipuloida jotain väri pystyä
tuottaa joukko satunnaisia värejä -
mahdollisesti tuottaa tyyliä tai jotain -
voisimme googlettaa jotain JavaScript värikirjastosta.
Ja olen varma, että meillä olisi pop up kanssa tuhat ja yksi niistä.
Olet tervetullut lukemaan niiden kautta.
>> Joten useimmat asiat - kun löytää ne - menossa isännöi yksi
sivustoja, jotka isäntä koodi.
He ovat muutamia suosituimmista lajeista.
Suosituimpia, jonka pitkälle, on github.com.
Ja jos menet GitHub se on todella jossa Normalize juonsi.
Joten jos haluat mennä takaisin, että yksi.
Näytä heille, että.
>> MIKE RIZZO: Ja oikeastaan missä tämä on isännöi myös, jos olet huomannut.
>> TOMAS REIMERS: Joo.
Joten jos ylität normalisoida ja mene GitHub.
Olivat se on?
>> MIKE RIZZO: Tuo pieni kissa juttu on GitHub symboli.
>> TOMAS REIMERS: Oh.
Joten GitHub käyttää menetelmää, jota kutsutaan Git tallentaa koodia.
Ei et tiedä mitä se on tai se pelottaa sinua, se käy hyvin.
Sinun ei tarvitse tietää, mitä Git on koska GitHub on Lataa-painike
oikeassa alareunassa.
>> Muita hyödyllisiä asia tietää noin GitHub on useimpien tuotteiden
on luki minulle.
Ja jos heillä ei ole verkkosivuilla, luki minulle kertovat, miten
asenna se, miten käytät sitä, mitä se tekee, jne., jne., jne..
Mitä olemme pohjimmiltaan käydään läpi.
>> MIKE RIZZO: Internetin lopetus.
>> TOMAS REIMERS: Tuo on hieno.
Viimeksi kaksi asiaa halusimme puhua -
olemme puhuneet Git -
on vianmääritys.
Ja tämä ei ole niin merkitystä lopullinen tuote, koska se on
kun lähdet 50.
Ja kun olet joutunut tuotteet täytäntöönpanosta kirjastojen tai täytäntöönpanoa
oma projektisi, olet menossa on kysyttävää tai olet
menossa etsimään kysymyksiin.
>> Jälleen googlettaa.
Se on kirjaimellisesti mitä teemme.
Tämä tulee kuulostaa typerältä.
Mutta kirjaimellisesti, me googlettaa.
Ja vielä, yksi ensimmäisistä asioista sinun yleensä törmätä on
stackoverflow.com, joka on ihana Kysymys ja vastaus näky.
>> On hienoa molemmat, koska voit lähettää kysymyksiä ja etsiä
vastauksia, mutta myös siksi, se on jo paljon
esitäytettyä sisältöä siellä.
Joten yleensä kun googlettaa ohjelma kysymyksestä ensin
pari osuu olet ehkä jo suorittanut siihen aikana ongelma sarjaa.
>> Ja sitten, viimeinen todella lyhyt asia on JSFIDDLE, joka on - tänään olemme
tehneet paljon työtä JavaScript HTML CSS.
JSFIDDLE on web app, joka pohjimmiltaan voit ottaa HTML, YOUR
JavaScript alavasenta ja CSS oikeassa yläkulmassa.
Ja sitten se voi luoda nopeasti tehdä IT ja nähdä miten se vaikuttaa.
Se on erittäin hyödyllinen, kun ihmiset yrittävät tehdä proof of concept kuten
Tässä on, miten voit tehdä pudotusvalikosta.
Ehkä nopea paljastaa tai mitä tahansa.
>> MIKE RIZZO: Joten mennään eteenpäin ja napsauta tätä.
Nopea huomautus -
ottaa huomioon, ennen kuin olimme tekemässä napsautuksella.
Osoittautuu JCorey Korea on myös sisäänrakennettu napsautusliikenteessä tapahtumakäsittelyyn se
käyttää vain koska se luvut olet menossa haluavat tehdä paljon asioita
kun haluat osoittaa jotain.
>> Samoin, se on myös leijuvat.
Vaan saada koko laajuudessaan niitä, katso jQuery
asiakirjat ja tehdä se.
Tein jotain tyhmää täällä.
>> TOMAS REIMERS: Olen siis todella nopea Ohjelman täällä, joka kertoo
painiketta napsautuksella.
Sitten meillä on silmukka.
I on pienempi kuin 404.
Se on vain olemaan pop up Näiden hälytys viestejä.
>> MIKE RIZZO: Ja mikä oli koodi 404 seisoi HTML?
Muistaako kukaan?
Ei löydy, oikea.
Chrome lisäsi tämän siisti asia, jossa voit -
>> TOMAS REIMERS: Koska ihmiset haluavat Mike alkoi tehdä tätä paljon ja
harmittaa käyttäjiä, joka mahdollistaa voit nähdä tiedot.
>> MIKE RIZZO: Joo.
>> TOMAS REIMERS: Onko meillä kysyttävää tästä noin JavaScript
kirjastot, löytää kirjastot, tai mitä web-kehitys näyttää
kuten oikeassakin maailmassa?
Olemme juosten aikaa vastaan.
Joten en ole varma, aiomme on aika toteuttaa
ellei se on todella nopea.
Olemmeko hyvä?
>> MIKE RIZZO: Mitä te haluaisi nähdä todella nopeita, kuten kaksi
minuuttia tai vähemmän?
>> TOMAS REIMERS: Anything voimme selventää?
Miten kirjoittaa -
>> Yleisö: [kuultavissa]?
>> MIKE RIZZO: Kyllä, niin that -
>> TOMAS REIMERS: Voit painaa Ohjaus-U verkkosivuilla.
>> MIKE RIZZO: Ai, en tiennyt, että.
>> TOMAS REIMERS: Luulen, joo.
Ohjaus-U. Joo.
>> MIKE RIZZO: Ai, niin se on koodi verkkosivuilla.
Mutta jos todella haluat ladata tiedostoja ja kaikkea, se on isännöi
on github.com
>> TOMAS REIMERS: slash nimeni -
Tomas Reimers - slash CS50 väliviivaa seminaari.
>> MIKE RIZZO: Ja voit löydät kaiken siellä.
>> TOMAS REIMERS: Tämä on mitä GitHub näyttää muuten.
Joten jälleen, kun näet avoimen lähdekoodin projekti, tyypillisesti, he lukea
minua siellä, että voit lukea.
Ja jos palaat, huomaat, että sinulla on ladata zip, joka
voit ladata lähde koodi sisällyttää
tuotteen omia juttuja.
>> MIKE RIZZO: Joo, ja jos me klikkaa on index.html todella nopeasti -
>> TOMAS REIMERS: Näet tässä lähdekoodia sivuillamme.
>> MIKE RIZZO: Myös unohdin työntää oikealle ennen kanssa iso pöytä se
mukana, mutta siellä on myös taulukko of chmods että olemme mukana
juuri sinun selkeyttä.
Mutta jos me selaa kaikki alas pohja, emme itse tehdä
paljoakaan JavaScript juttuja ollenkaan tämän kanssa.
Se on yksinomaan kaiken muuta, joka meillä oli.
>> Joten kiitos kaverit tulossa ja kuuntelee.
Toivomme, että tämä oli todella hyödyllinen.
Jos sinulla on JavaScript liittyvien kysymyksiä tai vain halua puhua
mitä muuta kuin mitä muita hienoja asioita voit tehdä JavaScript, haluaisimme
jutella.
>> TOMAS REIMERS: Jos sinulla on kysymys noin projektisi tai jos tämä voi olla
asiaa, me luultavasti jäämään hieman tämän jälkeen.
Mutta muuten, on hyvä viikonloppu.
>> MIKE RIZZO: Joo, nauti.
Nähdään.
>> TOMAS REIMERS: Nähdään.