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.