TOMAS REIMERS: Bok, svima. Moje ime je Tomas REIMERS. 

MIKE Rizzo: I ja sam Mike Rizzo. 

TOMAS REIMERS: Mi smo dva CS50s TS. I danas smo vodeći na seminaru o JavaScript i CSS za web aplikacije. Ako želite pratiti zajedno, link je tamo. I ti želiš da ga stavi na računalo kratko? 

Tu je link. To je malo mjesto, koje ima veze s svi resursi da ćemo biti pokazujući vam danas i također ima puno korisne informacije koju je napisao nas pročitajte više u dubinu, kada se vratite, i sad se pokušava sjetiti što upravo smo rekli, ono što su pričaju, et cetera. 

MIKE Rizzo: U redu. Tako ćemo početi. 

TOMAS REIMERS: Dakle, želite početi? OK. 

MIKE Rizzo: Da. Dakle, prvo smo htjeli početi sa širokim Pregled o internetu i podnijeti vrste prilikom dizajniranja web stranice. Dok je ovaj prikaz možemo želim ući u JavaScriptu puno puno kasnije, htjeli smo krenuti s Samo, vrsta, kao i pogled iz ptičje perspektive U što website je i kako razmišljati o projektiranju website za početak. 

Dakle, vi, u ovom trenutku - s njom se u petak navečer - treba imati podnijeti svoj CS50 financije Problem postavlja. Nadam se, da je bio dobar ukus onoga što web programiranje može biti. No, ovdje želimo, vrsta, daju što drugi okus, kao dobro. 

TOMAS REIMERS: Dakle samo da ponovim ono što se događa, kad tip u URL-u Vaš web-preglednik, koji URL dobiva pogledao u računalo. I vaše računalo je povezano na drugo računalo, koje domaćini taj website. OK, pa kad idete na google.com, ti si povezan na jedan od Google a računala, koji ima slika za google.com. 

To onda pita za određenu datoteku. Dakle, ako idete na - Ne znam - example.com / index.html ili / test.html, idete tražiti tom datotekom. I web poslužitelja ide da vam ga vratiti. 

Zatim, nakon što proći kroz tu datoteku - nakon što se računalo dobiva da je datoteka - to će početi izgraditi web stranicu. Dakle, sada je HTML datoteku, koja je vrsta kao što su Struktura web stranice. HTML datoteke također mogu referenca CSS datoteke, koje definiraju Stil web stranice. 

JavaScript datoteke, koji definira interakciji s web stranice. Slikovne datoteke, koje su samo slike. A možda i povezati s drugim HTML datoteke, koje zatim možete posjetiti. 

MIKE Rizzo: OK, super. Dakle, vi ste sve, možda, mukotrpno postaviti svoj lokalni domaćin na svoj virtualni stroj. I to baš, nekako, je lokalna Domena da vaše računalo domaćini samo za vas na vlastitu IP adresu. 

Dakle, u okviru toga, tada možete dodati do njega vlastite web-stranice. Mislim, u CS50 financija, te bi trebao imati dodane neke HTML stranice, koje su, vrsta, zamotan u PHP omot. Ali na kraju, ono što vaše PHP stranice su izlaza je HTML. 

No misleći natrag na samom početku od pset, morali smo postavili dopusnice za sve, zar ne? Pa to samo u osnovi omogućuje nam tko može čitati, pisati, a možda i izvršiti svaki od datoteka. Tako ćemo učiniti brzo - hm? 

TOMAS REIMERS: Dakle, idemo to učiniti brzo demo. Dakle, samo da vas podsjetim, kada spojiti na Googleov računalo - tko - i tražiti datoteke, računalo prvi treba da biste bili sigurni da ste ovlašteni zapravo vidjeli tu datoteku ili pročitao da podnijeti, jer ne možete samo pitajte za bilo koju datoteku na tom računalu, zar ne? To bi bio sigurnosni rizik. 

Dakle, slika na sustavima koje koristimo, kao što su ovo CS50 aparata, imaju tri općenito ljudi koji mogu imati dozvole za nešto. Prvi je stvarna vlasnik spomenute datoteke. Druga je skupina koja datoteka pripada. Nećemo se usredotočiti previše na to. I zadnja stvar je, na neki način, kao što je svijet ili kao i svi drugi koji su je nije specifična za te datoteke i ne bilo kakvih vlasničkih prava nad njom. 

Dakle, ako imamo vlasnika, grupu, i onda svijet. I zatim, za svaki od ovih skupina, te može imati jedan od tri dozvole, OK, ili multipla od njih. Možete pročitao dozvole. Možete imati pravo dozvole. I vi možete imati izvršiti dozvole. 

Dakle, u smislu stvarnih vrste datoteka, čitati Dopuštenje je kao zapravo čitanje sadržaj datoteke. Pravo dopuštenje pisanje na spomenutom sliku. Izvršavanje dopuštenje trčanje file kao što učiniti kada pokrenete neku od Vaši CS50 projekata. 

Dakle, kada razmišljamo o datotekama kao kad trebamo čitati HTML file, koji treba da bude svijet čitati, zar ne? Vjerojatno, također vlasnik želi da bi mogli urediti tu datoteku. Dakle, vlasnik će morati čitati i pisati dozvole. Oni zapravo ne trebaju izvršiti. 

Grupa, idemo u liječenju Isto kao što je svijet za sada. Zato što im je potrebno čitanje dopuštenja. No, oni ne trebaju pisati ili izvršavati dozvole. A sad, ako mislimo natrag na bivšeg PSETs, ono što smo shvatili je ta vrsta izgledaju kao binarnog, zar ne? 1 označava da. 0 za ne. I mi zapravo može prevesti to binarno. 

Dakle, 110 u binarnom bi 6. 100 će biti 4. Sve sa svijetom. Dakle, broj koji bi se za dozvole za to će biti 644. 

MIKE Rizzo: A ako se sjetim kada chmoded nešto, ja vjerujem Dali su u problemu postaviti primjer što može učiniti nešto kao chmod 644 a zatim naziv datoteke. 644 tada, sada možete vidjeti izravno gdje to dolazi. Dakle, nadamo se da se čini da je malo jasnije. 

A onda za vas tip je jasno - oh yeah, ovdje je to opet. Dakle, 600 onda bi samo biti primjer odustali smo ovdje gdje vlasnik ima čitati i desni dozvole, dok skupina i svijet nemaju dozvolu pristupiti datoteku. 

TOMAS REIMERS: I onda smo brzo Popis zajedničkih dozvolama. Dakle imenike, što želite zapravo chmod 711. Brzo na stranu - za katalog imati izvršnu dozvolu znači da bi mogli za otvaranje imenika. Slike, CSS, JavaScript, HTML potrebe 644, jer, u osnovi, Svjetska Potrebe za čitanje dopuštenja. 

I PHP, koji su ti dečki vidjeli iako mi neće govoriti o tome Strogo je obično chmoded s Dopuštenje 600 jer je pokrenuti s dopuštenja vlasnika. Barem na aparatu. 

MIKE Rizzo: Dakle, ako vi to izričito odrediti vrstu datoteke Želite u zapravo postavljanje do ove prezentacije - smo imali problema s tim, jer sve što nije ispravno chmoded - ti si idući u dobiti, nekako, A Zabranjeno greška koja website ne zapravo imaju dozvolu pristupiti bez obzira na datoteku ga želite pristupiti. I naravno, da se može popraviti - kao u problemu postaviti - promjenom dozvole na odgovarajući način. 

TOMAS REIMERS: I zadnji komentar za brzo lokalnog razvoja je - mi donio ovo gore, ali samo smo htjeli to bi se opet - ako pita za poslužitelj - pa lokalni domaćin, primjerice, com ili bilo što. - i ne odredite određenu datoteku, file da vaše računalo ide tražiti se zove index.html. Ili ako to ne postoji, index.php. 

Cool. Dakle, to je samo rekapitulacija svega, nadam se, da smo pokriveni u sekcija, a predavanje, i do sada je u CS50. A sada ćemo početi govoriti o posebno knjižnice. JavaScript i CSS knjižnice za web aplikacije. 

Dakle, jedan brzi od razloga zašto imamo knjižnice je programiranje - ima puno problema u programiranje, koji bi iskakanje gore opet, i opet, i opet. Možda ćete primijetiti da je puno web- potrebna mogućnost da se padajući izbornici, na primjer, ili je potrebna mogućnost da imaju vrlo standardni gumb stil, koji ne može biti najjednostavnija stvar. Sada kada počnete da se u HTML, što shvatiti da tipke mogu zapravo izgledaju jako ružno ako vam ne učiniti ništa. 

Dakle, puno ljudi su napisali zove knjižnice. I u tom kontekstu, oni su nazivaju okviri. Mi ćemo koristiti dva naizmjenično. A što su se oni u osnovi Premade dijelove koda - bilo CSS i JavaScript - koji oduzima puno udružiti imate u kodiranju. 

Tako su unaprijed definirati hrpa klase ili unaprijed definirati hrpu funkcija za JavaScript je slučaj, koji možete nazvati kasnije. I onda se, na neki način, dobiti pristup tom kodu bez koji se odnosi na sve. Primjer knjižnice je CS50.H. To je knjižnica, dali smo za vas natrag u tjedan dana jednom, što je omogućilo da učinite Takve stvari GetInt i GetString bez pisati bilo kod sebe. 

MIKE Rizzo: U redu. Pa evo, baš kao što smo morali uključiti u našoj c datoteke drugačije knjižnicama, mi također treba uključiti u naš HTML datoteke različite knjižnice. Na primjer, ako smo htjeli uključiti specifična JavaScript knjižnica ovdje, možda, onaj koji smo pismeni sami jer lokalno je ugostio nazivaju script.js, samo smo koristiti ovaj zapis. 

Dakle, imamo tipa skripta dosegne JavaScript izvor jednaki JavaScript.js. A ako mislite vratiti na svoj CS50 financije problema postaviti, ako ste gledali u header.php u mapu Obrasci, trebali ste vidjeti Neki od njih uključena. Dakle, ovo prvo - skripte - je uključujući i JavaScript knjižnica. Uključujući CSS knjižnicu je malo drugačiji. 

Evo, umjesto pisma Tag trebate link oznaku. A onda, upišite tekst CSS je malo drugačija. Vi ne moraju uvijek sadržavati rel style sheet. Ali mislim da je, generalno, dobra praksa. 

I onda napokon, HREF, koje vjerojatno vidio u svojim ATAGs za povezivanje u različitim vezama samo koje odredi link gdje se mogu naći to. Na primjer, ako smo htjeli povezati drugačija knjižnica - recimo samo - koji je živio u styles.css. A htjeli smo povezati da je u to domaćin na webu, što bi to razumio. A zatim zalijepite ga u što god imamo ovdje umjesto. 

TOMAS REIMERS: OK, nadam se da dečki su već upoznati s time kako povezati CSS. Morao si to učiniti na tvoja zadnja smeđa set. JavaScript, neki od vas možda imaju neka iskustva s. Neki od vas svibanj ne. 

Dakle, za sada, znamo da je JavaScript sliku je vrlo mnogo kao CSS datoteke u osjećaj da se možete povezati s njim ili da ga možete uključiti interno. I to vam omogućuje da se skripte stvari. A mi ćemo vas kroz Malo JavaScript kasnije. 

Dakle, koristite knjižnicu - nakon što ste ga uključiti, to je kao jednostavno kao doslovno nazivajući funkcije ili dodavanjem klase imena na njemu. Zadnja stvar koju želimo razgovarati o tome u smislu knjižnici - a to je više od tehničkog bilješku - je open source licenciranje. Dakle, kada ste pronašli ove stvarne knjižnice, možda se misli na pitanja poput je li u redu da sam samo korištenjem tuđe kôd, pogotovo jer to je nešto što mi jako puno Rekao da se ne učiniti u ovom tečaju. 

Dakle, u slučaju open source licence, puno developera - nakon što ste napisali knjižnicu, koji misle da bi mogla biti pomoći drugim ljudima - će ga objaviti na webu i dati mu licencu. I licenca osnovi kaže ja sam ovime davanje dozvole za druge ljudima da koriste ovaj komad softvera sa sljedećim vrsta propisima. 

Uključili smo vezu na dobrom mjestu na pomoći da razumiju licence u slučaju da naiđete na njih. Zajedničke odredbe su stvari kao što su vi ste dobrodošli da koriste moje knjižnicu tako god mi dati kredit. Vi ste dobrodošli da koristite svoju knjižnicu tako dugo kao kad se lomi da me ne krivi. Vi ste dobrodošli da koristite svoju knjižnicu tako dugo kao što ga ne koriste kako bi novac za sebe. To su vrste česte propisima. 

Za ovu CS50 konačnog projekta, oni Ne treba biti bitno zato super projekti koji ti dečki koriste se Vjerojatno već, na neki način, poznat. No, kada zapravo ide van u Svijet i početi koristiti knjižnice, koja može ili ne može, kao što je proveden neke od više popularnih one koje možemo će se kroz. Lijepo je biti u stanju razumjeti ove licence i to razumjeti što oni znače. I ide natrag. 

MIKE Rizzo: OK. Dakle, sada se kreće na primjerima stvarne CSS. U tom trenutku do sada, možda nisu nailazili na to. No, možda su se susreli s njim u vaš svakodnevni život u kojem se nešto da izgleda jedan put na jednom browseru možda ne izgledaju isto Način na neki drugi preglednik. 

To se zove browser preglednik kompatibilnost. I sve to postaje sve više i više problema, pogotovo što preglednici poduzeti sve više i više slobode provesti ono što oni žele. Tako da prevlada da, postoje zapravo je velika knjižnica zove Normalize.CSS. 

TOMAS REIMERS: Uključili smo vezu. U ovom trenutku, to je korisno ako imate svoj laptop tamo potrazi na mjestu. I dajemo vam to pravo Sada jednostavno zato CS50 finalu Projekt se zapravo događa na od vas tražiti da ga provede na sličan način i kroz preglednicima. 

Dakle, samo da bi u pozadini vašeg glava, ovo je prekrasno knjižnica jer će, na neki način, standardizirati stvari. U Firefox, nešto što se može pokazati kao jednog piksela na lijevoj strani. I onda Chrome može odlučiti da se zapravo ono što je značilo 10 piksela ulijevo. A želite standardizirati to. Normalize će zapravo napraviti stvarno dobar posao izrade sigurni da je vaša stranica izgleda isto preko preglednika. 

MIKE Rizzo: Pa, ako smo htjeli samo kliknite na link jako brzo i pokazati li što to izgleda, te Možete ga skinuti pomoću div Preuzimanje gumb. Ili sam vam da pročitate više o tome klikom na ovaj link u donjem desnom kutu. 

TOMAS REIMERS: A ako zaista kliknite opširnije tamo - kliknite izvor na GitHub - vi ste zapravo ćete vidjeti open source licencu na LICENSE.md tamo. I vidjet ćete ovdje vrlo popularan MIT licenca. Opet, ako ste pročitali tekst, moći ćete ga pronaći na web-mjestu mi upućuje prije i moći Razumijem ga, bez potrebe za čitanje kroz pravni žargon. 

MIKE Rizzo: OK, super. Dakle, to je normalizirati. Željeli smo dati da jako brzo. Oh, imate li pitanje? 

Ivanković: Pa kada ga skinuti, što samo slijedite taj kod kojeg će se morati pod gumb Preuzmi? 

TOMAS REIMERS: Da, tako kada ste preuzeli - 

MIKE Rizzo: Oh, to je super stvar. Dakle, pitanje je koliko je to mi zapravo ga skinuti? Dakle, ako mi kliknite na link, vidimo da se zapravo ne iskoči u izvornom kodu. Tako bi to učinili, što smo mogli Ne samo kliknite Spremi kao. Spremi kao i da bi trebalo dovesti do datoteku. A onda možemo spremiti to što je normalize.CSS. I onda bih to povezati u - 

TOMAS REIMERS: vi isti način povezati u bilo koje druge datoteke. A nakon što ga povezuju u, što je super o normalizirati je to zapravo će voditi brigu o svim hard rade samo po sebi. Što znači da nemate dodati sve razrede. 

Ne morate učiniti ništa čudno. To će normalizirati bez tebe radi ništa dalje. Da, morate ga uključiti. Google Chrome ne reagira. 

Samo brza stranu - Primijetio sam da smo skočili u ovo. Ostatak ove prezentacije je će biti brz pregled. Istraživanje o knjižnicama. 

Uglavnom, ono što su oni. Ono što im je činiti. Kako su korisni. Kako ste mogli provesti ih. Ako želite početi gleda na njih, sljedeće zajedno, i kroz čitanje ih, ja bih vrlo poticati da. 

Alternativno, na čemu također ih početi s preuzimanjem i uključujući ih u očima samo da vidim što oni izgledaju ili ono što im je činiti, ako imate vaš laptop ispred vas. Ako ne, vi ste dobrodošli da bi slušajući nama razgovarati. Mi ćemo nastaviti razgovarati. I mi imamo vremena na kraju, nadamo se mi zapravo ćete dobiti u pokazujem što su neki od tih knjižnica izgledati. 

MIKE Rizzo: Cool. U redu, tako da sada razgovarajmo o Font Awesome. 

TOMAS REIMERS: pa Font Strašan je stvarno uredan stranica, a posebno za one od nas koji su manje umjetnički talentiran. Ignoriranje naziv fonta Strašan, daje vi hrpa ikona, koje su vrlo korisno. Dakle, puno vremena ćete provoditi Icon Vi svibanj želite kao lijep x pa da možete zatvoriti nešto. 

Ili možda želite nekakav Edit gumb s olovkom crtež kao svatko drugi ima. A to je kad ste saznali da crtanje one ikone mogu biti vrlo zahtjevan i težak. Font Strašan - ako zaista idi na mjestu - daje vam puno ikona ispod ikone na vrhu. Da, samo vrh. To će vam dati puno ikona za besplatno. 

Dakle, ovdje možete vidjeti da imamo stvari poput Zvjezdica, barovi, munjom, kalendar, bug, knjiga, et cetera. To može biti vrlo korisno. Način na koji su to što su doslovno CSS datoteku. I nakon što sam uključen u CSS datoteku, što možete učiniti je da stvorite tag zove I. satands za Icon S klase FA stoji za Font strašan. A onda, bez obzira na klasu želite. 

Dakle, ako sam htjela ikona ovog plusu trg upravo ovdje, dao bih ona klasa FA. I onda FA crticu plus crticu trgu. 

MIKE Rizzo: Cool, OK. 

TOMAS REIMERS: A onda, zadnji CSS Knjižnica želimo proći smo pokušavajući ga zadržati minimalno na CSS biblioteke, jer mi shvaćamo Naslov ove prezentacije je JavaScript Knjižnice. No, mi smo mislili da možemo, kao i Vas upoznati s drugim knjižnicama dok smo razgovarali o knjižnicama. 

To je Google Web fontove. I ono što Google Web Fonts vam omogućuje učiniti je dodati fontove na svoju web stranicu, što je stvarno jednostavan način da to napravite lijepa i razlikovati svoj set od svih drugi je, ako ima Lijepo fonta ili ako ima lijep zbirka fontova. Google Web Fonts je lijepo za razliku od drugih knjižnice u smislu da je Stvarno vođeni instalacija. 

Dakle, ako slijedite link, to je google.com / fontove, vjerujem. Ako slijedite da vas Možete odabrati font. Možete birati na lijevoj strani od Debljina, kos, et cetera. A onda, nakon što ste odabrali jedan, možete kliknuti brzu uporabu. Upravo tamo. Dolje desno od okvira. 

I onda, pomaknite se dolje. Prije svega, oni vam dati CSS da vam je potrebno da se zapravo link na njega. Tamo je. Možete jednostavno kopirati i zalijepiti da u. A lijepe stvari o ovom jednom je što zapravo ne treba ni preuzeti datoteku. 

Što će to učiniti je što se događa link na Googleov inačicu. Vratimo se što to znači. To znači da kada korisnik preuzima datoteku - preuzima vaš HTML stranica - vaš HTML stranica ide na ovu datoteku. 

Dakle, vaše računalo će se vidjeti, Oh, to je domaćin na google.com a nego na theirsite.com. Pusti me pitaju Google za tu datoteku. A onda, što će uključiti to je gotovo kao da je dio svojih mjestu. 

TOMAS REIMERS: Cool. A nakon što su to, onda bi uključiti ga u svoj CSS, to vam daje stvarna linija. Dakle, postavljate fonta vlasništvo obitelji jednaka je ime svog fonta. 

MIKE Rizzo: OK. Tako smo upravo završili sa CSS. A neki od vas možda misle, dobro, imali smo neke CSS na CS50 financija. Ali CSS knjižnica bila bootstrap. Mi zapravo su Bootstrap malo kasnije u JavaScriptu, jer s Bootstrap CSS knjižnica dolazi s puno JavaScript toj Bootstrap ili Twitter - koji je Bootstrap - koristi za upravljanje svim njihovim CSS. 

TOMAS REIMERS: Ima li tko bilo pitanja do sada oko CSS-u cjelini? Mi smo dobri? Strašan. 

MIKE Rizzo: Strašan. 

TOMAS REIMERS: Pa kreće na JavaScript. 

MIKE Rizzo: Dakle, htjeli smo razgovarati o jQuery za početak. Je li itko čuo za jQuery prije ili ga koristiti? Da, par? Dakle, ako ste upravo rad s porijeklom JavaScript, pronaći ćete i sami tipkanje puno dugih selektora puno. Pa što jQuery se je ona pruža Lijepo omot za JavaScript jezik koji omogućuje jednostavno odabrati i manipulirati različitih elemenata u model objekta dokumenta za Web stranica ili DOM, što mislim ti dečki su se čuli u predavanje u ovom trenutku. 

TOMAS REIMERS: Ako još niste čuli to ili ako niste gledali predavanje ipak, Document Object Model je osnovi kako stvari su zastupljene. Dakle HTML vrsta izgleda kao drvo kada zapravo ga izvući. Imate HTML element na vrhu. Imate glavu i tijelo. 

A onda, u roku koji ima sve ostalo. To se naziva DOM - Document Object Model. Dakle model koji predstavlja predmete u Dokument je jednostavan način da misle o tome. A jedan od velikih stvari o jQuery je li to stvarno čini poprijeko da i manipulatorski elementi unutar da je nevjerojatno jednostavna. 

Dakle, jednostavan, u stvari, da je većina JavaScript knjižnicama ili ako ne Većina, velika većina onih vidjet ćete zapravo zahtijevaju jQuery tako da oni mogu sami pokrenuti jednostavno jer ako nisu imali jQuery, te će trošiti mnogo vremena pokušavajući shvatiti kako odabrati određeni elementi i kako raditi druge stvari. I druga velika stvar o jQuery je da je križ preglednik kompatibilan. 

Pa sjetite se vratiti kada smo rekli da je nisu svi preglednici provesti stvari na isti način? To vrijedi čak i JavaScript. A jedan od velikih stvari o jQuery je da će otkriti preglednik i otkrivanje prikladna metoda. 

Dakle, ako vam je potrebno odabrati element, Internet Explorer moglo bi se reći da si trebali raditi na ovaj način. Firefox moglo reći točne način je na ovaj način. jQuery ne brine. Kada reći jQuery za odabir element koji će shvatiti kako je to Trebao bi to učiniti u pregledniku Korisnik je trenutno u, a zatim napraviti ga na taj način. 

MIKE Rizzo: Pa nemojmo govoriti o korištenje jQuery malo. Baš kao što su PHP, jQuery ima posebno ljubav za dolar znak. Dakle, vidjet ćete da bilo jQuery - dobro, ne sve. Ponekad možete zamijeniti dolar prijavite se riječju jQuery. No, općenito, samo zato što je kraći, kad god vidim jQuery se koristi to će biti s znak dolara. 

Dakle, ovdje mi samo pokazuje početak gumb za element u DOM. Evo, imamo znak dolara slijedi otvorenih zagrada i onda citati. A unutar navodnika ide naše selektora za različite elemente. Baš kao u CSS, morali smo selektora da biti u stanju oblikovati različite elemente u stranicu. Ti različiti selektora prevesti točno u jQuery i JavaScript, za najveći dio. 

Dakle, ovdje imamo dot foo. Dakle, ako se sjećate iz predavanja, dot samo znači klasu. Tako smo odabirom elementa u klasi foo. Dakle, ako sam ići naprijed i otvoriti naše JavaScript konzola ovdje jako brzo samo ga pokazati, ako sam samo tip znak dolara, vidimo da je to neka funkcija koja dolazi. A to je upravo definirana jQuery. 

TOMAS REIMERS: Za one od vas upoznati, konzola je alat unutar preglednika Chrome, koji vam omogućuje da se, osnovi, trčanje JavaScript na trenutna stranica. To ćete naći nevjerojatno korisno kada ti si zapravo ispravljanje pogrešaka, a vi trebaju biti kao što je trenutna Vrijednost neke globalne varijable ili ono je nešto drugo? To je vrsta kao što GDB s izuzetkom da možete zapravo manipulirati elemente na stranici s je u mnogo lakši način. A isto tako to ne, u osnovi, provjerite s vama prije nego se to dogodi ništa. 

Dakle, budući da je, GDB moglo biti kao, jesi li sigurni da želite pokrenuti sljedeći korak? Konzola je u real. Dakle, kao što je web-stranica se renderiranje i radite što god to radi, Vijeće je također pokrenut uz njega. A možete staviti imputirati kod u da konzola, koje će se izvoditi na stranici. 

MIKE Rizzo: Dakle, za ulazak u konzolu, Mislim da treba ukratko napomenuti kako se to radi. U posljednjih probleme koje imate koristi Chrome-a pregledat elementa funkcije ili prikaz stranica izvor - i oni su dostupni samo pravo Klikom na stranici ili određene element i radi bilo pregledati element ili prikaz stranica izvor. Također, možete pristupiti JavaScript konzola izravno odabiru pregledati element. Pa onda samo hit konzole na desnoj strani. 

Alternativno, možete se također može otići na gornjem desnom kutu, koji je odsječen na ovom zaslonu, gdje ima tri vodoravne pruge. A što silaze alata i onda JavaScript konzola Ovdje gdje se mogu vidjeti - barem na Windowsima - prečac Kontrola Shift J. Dakle ako smo htjeli da odaberete neki element u ovoj stranici, baš kao što sam pokazao prije, činimo znak dolara otvorene parens a onda citira. 

Zanimljivo je, u pravilu, jednokrevetne citati i dvokrevetne citati su zamjenjivi. Dakle, puno ljudi jednostavno korištenje single citati, jer oni su brže tipkati nego navodnicima, jer ne znaš moraju držite Shift. Dakle, samo ću to učiniti upravo sada. 

Dakle, želim da odaberete nešto s klase. Kontejnera, samo zato što znam da je nešto što je na našoj web stranica upravo sada. I pogodio Enter. I možemo vidjeti da ga bira. Dakle, pokazuje se da je vratio taj objekt. Dakle, to je osnovni izbor. Ako bismo htjeli da zapravo manipuliraju, te će morati nazvati nešto na tom izboru, koji se Mi ćemo ući u kasnije. 

TOMAS REIMERS: Dakle, samo da pogledate kako više u dubinu, to se ne razlikuje od funkcija poziva smo napravili u C. Ime funkcionirala je malo čudno. To je znak za dolar. To je samo naziv funkcije. Nema ništa posebno o tome. 

Mi imamo otvorene zagrade. Zatim, mi imamo jedan argument, koji u ovom slučaju se dogodi da se string, što je selektor za to. I onda, mi imamo zatvorena zagrada. To je sve. 

Nije da je znatno drugačija. Iako, to ne izgleda jako čudno. I to može biti, na neki način, ne lijepi točka za puno ljudi. 

MIKE Rizzo: Dakle, na sličan način, ako smo htjeli odabrati jedan element koji ima ID, Sada želimo odabrati prema ID umjesto klasi. To će biti slična stvar gdje smo samo napraviti oštar znak za ID. Pa mi smo ovdje svi odabirom elementi koji imaju osobnu traku. 

TOMAS REIMERS: I to se proteže. To CSS proširuje. Baš kao u CSS, možete odabrati sve linkovi, koji imaju klasnu Foo. Evo, to je ista stvar. 

Ti bi mogao napraviti a.foo, što bi odabrali sve veze s razredom foo. Ti bi mogao napraviti oštar bar, koji bi odaberite vezu s ID-bara i tako u i tako dalje. Svaki selektor CSS je valjana Selektor jQuery. 

MIKE Rizzo: Da. U redu, tako da sada idemo na malo manipulacije koje možemo učiniti s naš jQuery. Dakle jQuery ima određenu vrstu bilježenja gdje smo samo koristiti uskličnik na kraju. A možete misliti na to kao u C kako bismo imali različite tvorevina. I da ide u tim tvorevina, što bi koristite točku ući u njih. 

To je, na neki način, slična stvar. Tek sada imamo funkcije unutar ovog Selector da možemo pozvati na njega. Pa evo, prvi primjer možete vidjeti je selektor CSS. I zapravo, ono da se je to primjenjuje se prvi element CSS na to stvar koju ste odabrali - ovaj element koji ste odabrali - s vrijednošću toga. 

TOMAS REIMERS: Pa lako prijevod da bi se, ako jQuery, u osnovi, samo je foo. A onda u CSS rekao, crvena boja i bliski. To je ista ideja. Ono što je učinjeno, to je odabrana svi Foo elemenata. A onda je primijenjena. Na neki način, u boji nekretnina jednaka crveno. 

MIKE Rizzo: Slično tome, možemo također mijenjaju stvarni sadržaj onoga što je pokazujući na HTML stranice, koji stvarno cool, jer to znači da je Web stranice se sada može biti potpuno dinamičan i ne moraju biti statički da vam ispisati koristeći PHP na samom početku stranica se učitava. Pa evo, ako smo htjeli mijenjati Stvarni HTML stranice, mi bismo sada nazvati HTML funkciju, koja onda samo umetci god smo naveli u koji element koji smo izabrani. Dakle ovdje smo odabirom elementa s Klasa Foo a onda kaže da je HTML to je sada Pozdrav svijetu. 

TOMAS REIMERS: I kada razmišljam o Koji su korisne aplikacije ovo, ovo je jedan CSS, prva stvar koja možete početi razmišljati o tome je u smislu, čak i padajući izbornici. Ti bi mogao početi raditi stvari kao što su, kada je Korisnik lebdi nad gornjem dijelu u padajući, želite napraviti donji dio vidljiv. Zar ne? 

Tako je u CSS, imamo svojstva napraviti nešto vidljivo. Stvari kao prikaz debelog nitko će učiniti nevidljivim. Prikaz blok će učiniti vidljivim. Ili čak i ako želite ići jednostavnije, te ima stvari poput vidljivosti jednakima vidljivi, a vidljivost jednaka skriveno. 

A ti bi mogao početi provoditi stvari kao padajući izbornici pravo Nakon što ste dobili kroz ideju kako Možete li shvatiti kad se to otvara, što ćemo dobiti kroz vrlo kratko. No, možemo početi vidjeti aplikacije za to. Na sličan način, ako su to probati i provesti, recimo, chatu engine i želite napraviti nešto govor mjehurić dođe kad god ste dobio novu poruku, nakon što se nova poruka, možete napraviti malo govor mjehurić smisliti mijenjanjem HTML stranice, zar ne? Dodavanjem taj dodatni oblačića uz dodatni tekst u tamo. Da? 

Ivanković: Pa što će položiti u roku HTML kod u vrsta kao [Nečujan]? 

MIKE Rizzo: Točno. Da, mi ćemo doći do toga u malo. Da, to je slično malo u PHP. Nije baš slični. 

Dobra distinkcija da je ono što ovaj je zapravo uređivanje kad smo uredili stranica, jer to neće biti uređivanje stvarnu sliku koja se čuvaju na poslužitelju, jer svijet Ne bi trebao imati dozvolu urediti svoje datoteke. To je samo uređivanjem što je na stranici i što je se prikazuje u preglednik. Dakle, ako ste bili na ponovno učitati stranicu nakon, kažu, brisanje nešto što mi vidjeti što možemo učiniti s uklanjanja poziv, ta stvar bi zatim ponovno pojaviti. 

TOMAS REIMERS: Dakle, jedan način razmišljanja o to je, ako sam računalo i Mike je, na neki način, poslužitelja. Što će se dogoditi je da ću pitati Mikea, hej, mogu li dobiti kopiju ova web stranica? A on će mi dati kopiju. 

Ne, to nije izvorna stvar. To je samo kopija. A onda bi to bilo kao, oh, tu je JavaScript ovdje. Jasno, ja bi trebao urediti stranica mora biti ovako. I ja sam uređivanje svoj primjerak. 

No, to nije izazvalo stvarna kopija. A ako su i da ga opet pitam osvježite stranicu, - hej, mogu li dobiti još jednu čistu kopiju - on će mi dati još jedna čista kopija. A onda, ja ću učiniti istu stvar kao, oh, to JS da se ovdje govori urediti ovo. A ja ću zadržati taj događaj. 

MIKE Rizzo: Pa stvarno super stvar koje možete učiniti s jQuery je zapravo dodati različite vrste animacije na svoju stranicu. Ja ne znam da li ste ikada vidjeli gdje pokušavate na ispunite obrazac online, a vi ne ispunite Pravilno stvari. Tako mala stvar klizi prema dolje na vrhu i kaže vam nisu to učinili kako treba. Molimo pokušajte ponovno. I onda, možda čak i samo povucite prema gore. 

Ispada jQuery je izgrađen u funkcijama da bi sve to animacije jako, jako jednostavno. Tako je prvi fade od funkcija, koje možete pozvati na nešto. I to je način da se promijeni CSS od taj element u animiranom način. Tako to traje bez obzira elementa ga zovu fade out na. A onda, polako se mijenja to je neprozirnost dok se ne ide potpuno transparentno. 

TOMAS REIMERS: Drugi popularan jedan je slajd dolje, što će učiniti nešto što se pojaviti tako da spuštanju. Dakle, u slučaju izbornika padajući, opet, kad smo naučili kako otkriti kada je to lebdio nad, mogli bi samo reći ovo dno dio spustiti. A onda, ona će se pojaviti po spuštanju. 

MIKE Rizzo: I onda, ako baš morate neka vrsta animacije u vidu da jQuery nužno ne daju. Na primjer, recimo jQuery daje li s toboganom dolje i slide up. Pa, recimo da je htio da slajd nešto s lijeva ili s Pravo vrsta kao što su CS50 Glavna stranica se kad god idete na novoj ploči. Nakon toga će se vjerojatno morati provoditi ga sami koristite animirati funkciju unutar jQuery. 

Dakle, na sličan način, samo animirati. A onda, u njemu je potrebno rječnik različite vrijednosti da ste trebali proći. Pa evo, ako smo htjeli animirati Element Foo kao da je njegova širina bilo Proširuje ili ugovora na 80 piksela, ovisno o tome što je trenutno. Mi bismo samo proći da je kao Argument u njemu. 

Animiranje također imaju neke druge argumente da bi mogao proći, primjerice, Brzina animacije da želite da ga dati. I za to, ja bih samo reći Brzo Google jQuery animirati. I onda, odgaja ovu stranicu, možete vidim da ima hrpa različitih svojstva koja ga može proći. 

I ja podržavam - kad god dođe na nešto što vi ne Znaš ili samo želite saznati više o Posebno metoda koje možete nazvati na nešto - samo ga Google. jQuery je izuzetno dobro dokumentirani. I često puta postoje puno primjeri koje oni pružaju za vas. Ako smo se pomaknite prema dolje - putu prema dolje - koje možemo koristiti, što je dobro. 

Opet, kada je developer zapravo ide kroz nevolje pisanju Knjižnica, oni obično žele netko ga koristiti. Tako će se uz se dokumentacija. I ta dokumentacija može obično biti pronaći na stranici projekta, koja je Zato smo vam dali taj izvorni položaj u početak, koji vas povezuje s Projekt stranice tako da možete vidim tu dokumentaciju. 

Tipično, stranica projekta u slučaju od [nečujan], to ti se ispričao Imena klase. U slučaju JavaScript, daje li naziv funkcije. Usput, ako dođite do vrha, Brzo strani bilješku o funkcijama je kad god vidim neku funkciju provodi kao što je ovaj sa hard nosači u sredini, to znači da da ta imovina nije obavezno. Samo glave gore. Vidio sam puno pitanja o tome. 

Dakle, ovdje možemo vidjeti da animirati traje svojstva kao nužan argument. A sve ostalo je opcija. Side note - možete misliti na to, vrsta u, kao i man stranica. Man stranice su dokumentacije za C i za puno drugih stvari, kao što je dobro. 

MIKE Rizzo: Dakle, naučili smo kako promijeniti drugačiji CSS na stranici, animirati ga, i ukloniti dodati HTML. No, jedan od stvarno najmoćniji stvari o JavaScriptu a pogotovo jQuery - ono što vam omogućuje da učinite je odgovoriti na različiti elementi koje se događaju. Na primjer, ovdje imamo rukovatelj događaj. A to samo znači da kad god to Događaj dogodi, mi ga nositi u određeni način. 

Pa evo, generički jQuery događaj rukovatelj je točka na. A onda, prva stvar koju pruža je ono što bi trebao događaj se sluša. Dakle, ovdje, to je klik koji čekamo. 

TOMAS REIMERS: Alternativno, imate na lebde, koji je vrlo popularan jedan. Dakle, natrag na moje padajućeg izbornika ideje. Ti bi gornji jedan na lebdjeti. A onda ste mogli promijeniti. 

MIKE Rizzo: Točno. I onda, kad se to dogodi, to samo izvrši ovu funkciju da smo Give It kao argument i da upozorava bok ili hi. 

TOMAS REIMERS: Dakle, u slučaju JavaScript je ovo mjesto moramo, sami ukloniti iz C. Možemo zapravo preuzeti funkcije kao argumente. A tu su i puno stvarno složene načine kako to učiniti. Mi ćemo promovirati jedan način, što je možete definirati funkcionira upravo tamo. 

Dakle, kada ste tražili funkciju kao parametar, ti si zapravo samo će definirati funkciju na licu mjesta. I način na koji definiraju funkciju u JavaScriptu je li doslovno kažu funkciju. Zatim, obično, naziv funkcije. Ali mi nikad ne idete na referentni ova funkcija opet. Tako smo ga ostaviti bezimeni. 

Zatim zagrade, a zatim kovrčava aparatić, a zatim kod unutar toga. Da se razumijemo to može biti malo zbunjujuće. Tako ćemo vam dati opću formu ono rukovatelj događaj izgleda u nastavku, koja se nalazi na događaje. A onda, tvoja koda unutar toga. 

MIKE Rizzo: Ima li bilo Pitanja o tome? To može biti malo zbunjujuće Prvi put kad ga vidim. 

TOMAS REIMERS: Vi zapravo želite otvoriti datoteku i pokazati im neke jQuery upravo sada? 

MIKE Rizzo: Da, hajdemo to učiniti. OK. 

TOMAS REIMERS: Sada smo u aparat. I što smo napravili je da smo poduzeli sloboda stvaranja kako je index.html datoteka, koji se povezuje s JavaScript datoteka. I možemo otvoriti - Da. Pa, to se dvije stvari. 

Prvi je da se povezuje s JavaScript datoteka. I vidjet ćemo da je ovdje. Vidimo da se u glavi HTML dokument, posebno. Dakle, vidjet ćete da postoje smo, zapravo, reći SRC, koja se zalaže za izvor. I to je URL. 

Dakle, ovdje možete reći da smo uključene jQuery. I mi smo također uključene skripte. Drugi način uključiti JavaScript je koje možete uključiti inline skriptu tag kao što smo na dnu, gdje je kaže tip skripta je tekst JavaScript. 

Dakle, mi tvrdimo, slušaj, mi smo o tome kako su scenarij. A vrsta tog pisma je JavaScript, koja je vrsta teksta. Vrlo jednostavno. 

MIKE Rizzo: Pa to, na neki način, dobiva se Vaše pitanje o tome kako su JavaScript je u našim datotekama, jer kad smo nije PHP, možemo učiniti nešto ovako. I onda, imamo PHP funkcije - recimo dionice napraviti nešto s tim - ide tamo. Međutim, sada imamo skriptu oznake da mi ga dati, koji su zapravo dio samog HTML-a, jer to nije zavaravanje kao HTML datoteke kao što je to je u PHP-u, jer ako zaista ide u i pogled na izvor stranice, vidjet ćete ove skripte oznake tamo sa JavaScript povezana s ih u tome. 

Dakle, ako smo htjeli napišite nešto JavaScript - recimo samo da smo htjeli promijeniti tijelo jer sada nemam bilo koje druge oznake koje sam stvarno mogu urediti osim tijela. Recimo samo da sam htjela mijenjati CSS toga. Tako ćemo ići naprijed i promjene Boja njega u crveno. 

Tako sam spremiti datoteku. Vratimo se na našoj web stranici, refresh, a to čini automatski jer se nije činilo kao da je čekao na sve, jer mi se ne sluša za događaj ili nešto slično. 

TOMAS REIMERS: Dakle, ako se vratimo na to podnijeti posebno - HTML podnijeti - što idete vidjeti je da imamo - sjetite se da je to učita, vrsta, kronološki. Dakle, moramo prvo glavu. ona učitava one dvije datoteke. Onda idemo na tijelu. I vidimo Pozdrav svijetu. Tako smo pružiti Pozdrav svijetu. 

A onda je zadnje što imamo je imamo oznaku skripte. Tako to radi oznaku skripte jer je ne govorim ništa čekati. I to je najosnovnije način za pokretanje JavaScript. 

Uz to, rekao je, može li staviti skriptu označiti u zaglavlju samo pokazati tu točku? I pokrenuti to. Mi ćemo primijetiti da je nije promijenio boju. I to je jedan od problema JavaScript je da su stvari učita kronološkim redom. 

Dakle, u vrijeme kada je taj broj je pokrenut, odabrali smo - vratiti - tag tijela. Tijelo tag još uvijek ne postoji, jer JavaScript je u skladu s HTML. Dakle preglednik poput odaberite tijelu. Postoji takva stvar još nema. Tako možemo ignorirati. I mi ide. 

I onda smo definirali tijelo oznaku. No, to se nikad ne ažuriraju. Dakle, kada ste provedbi skriptu oznake, pazite da stavite Nakon što je tijelo oznaku. Sljedeća slide. 

MIKE Rizzo: OK. Tako smo promijenili nešto. No, to ne izgleda kao da se odazvali nam na sve, jer to je samo vrsta Uspjeli čim učita stranicu. Tako sada, umjesto da to, zašto ne bismo dodali događaj rukovatelj. 

Tako ćemo nešto učiniti na tijelu ponovno. I recimo da smo to učiniti na - kliknite. Mi ćemo dodati funkcije. 

Tomas REIMERS: neka je promjena to je boja crvena opet. Zašto ne? 

MIKE Rizzo: Da, neka je promjena njegova 'boju u crvenu boju opet. U redu. Tako ćemo se ponovno učitati stranicu. U redu, vidimo - kao što se očekuje, to ne upali crvena još. No, onda možemo ići naprijed i kliknite na nju. 

TOMAS REIMERS: I to ne mijenjaju boju u crvenu. 

MIKE Rizzo: I to ne mijenjaju boju u crvenu kao što se očekuje. 

TOMAS REIMERS: A možemo vidjeti kako možemo početi graditi vrlo osnovni interakcija. Ostale stvari koje možda želite učiniti je, ako mi ne želimo da se tijelo crvena boja, idemo napraviti HTML pozadina crvena boja. Samo tako da je to isto CSS. 

A kada smo ga promijeniti, možemo vidjeti vrlo dramatičan učinak promjene cijela stranica. Pa opet, ako ste u provedbi stvari, možete imati jednu komponentu što je značilo da se kliknuli. Recimo jedan gumb Exit i Cijela druga komponenta, što je značilo da odgovori. Tako da bi uklonili prozor kad se to dogodi. 

MIKE Rizzo: OK. Samo za primjer - niste dobili ovo vidjeti ranije - Samo ću vam pokazati kako to izgleda volim kad mi nešto sakriti. Dakle, ja ću ići naprijed i ne klize prema gore. 

TOMAS REIMERS: Želite li da zamotate u tipa stav prije nego što smo to učinili? 

MIKE Rizzo: OK. Da, zašto ne bismo to baš tako možemo ga odaberite nešto više. 

TOMAS REIMERS: i neka je daj ga klasu. 

MIKE Rizzo: Da. OK, pa da vidimo. Umjesto odabira stvarni tijelo Sada, ja ću samo odaberite sve s klasa hello, koji ovdje smo samo jednu stvar. Dakle, mi ne bi trebali imati brinuti o tome. 

Dakle, ja ću ga osvježiti. Ja ću ići naprijed i kliknite na nju. I to, na neki način, nije čudno Pomaknite up stvar, što se nije činilo da je atraktivno. Općenito, oni izgledaju prilično lijepo. Mislim, ovo - za neke Razlog - nije. Ja ću samo napraviti fade out tako možete pogledati na to previše. Puno ljepše. 

A onda, ako sam otvoriti JavaScript opet utješiti i želimo vidjeti što to izgleda kao kad smo ga nestati u. Sada sam samo zovi nestati u tome. I to blijedi natrag u. 

Isto tako, mogli bismo zapravo i proći Argument da nestati ili nestati, koja je vrsta, od brzine. Tako ćemo ići naprijed i reći što želimo to ići polako blijede u. Pa mislim da je to još uvijek činilo prilično brzo. No, to je bio sporiji nego prije. 

TOMAS REIMERS: A ako želite pronaći Više o tim stvarima, opet, samo ići na jQuery dokumentacije, koje smo vam dao, i čitati kroz njih. Oni dokumentiraju svoje funkcije nevjerojatno dobro. 

MIKE Rizzo: OK. Dakle, mislim da ćemo se vratiti na to. I možemo govoriti o našoj posljednjoj stranici. Pa, možemo završiti s Bootstrap. I onda ćemo ga otvoriti za neka pitanja. A ako vi imate bilo kakve ideje da je želite pokušati povratiti i vidjeti ako ih možemo provesti s JavaScript brzo. 

Pa stvarno brzo o Bootstrap, koji je automatski uključena u Vaš posljednji problem postaviti u CSS mapu i zapravo povezano sa tvojim header.php. Dakle, moglo bi se dodati klase koje definirane su u Bootstrap na njega. I to bi automatski stil te stvari u skladu s tim. 

TOMAS REIMERS: Dakle Bootstrap je vrlo čarobna stvar razvijen od strane ljudi na Twitteru. I ono što je trebao napraviti je - Prije web stranice su stvarno teško napraviti lijepo izgledaju, pogotovo kad smo imali puno zajedničkih dijelova. Dakle, puno tipki na Web izgledala isto. 

Puno tekstualnih polja mogu biti izrađene na izgledaju bolje od standardnog teksta Polje što vjerojatno znate od stvarno stare web stranice ili stvarno loše napravio web stranice, koje samo izgledaju kao doslovna tekstualne okvire bez bilo kakvog oblika teksta sjena ili bilo kakve lijepim crtama. Pa što Bootstrap učinio je to rekao, dobro, Imamo puno zajedničkih stilova. Zašto ne možemo napraviti jedan zajednički set CSS i zajednički skup JavaScript kako dobro, što se to stil kao što je to i koji mogu dati ljudima stvari kao kap prema dolje izbornika, koji mogu dati ljudima stvari kao što modals. 

Modalna je ono cura preko stranice kad god je to strogo je govorio nešto, što koči daljnji Interakcija do vas interakciju s njim. Nešto kao što je to, jeste li sigurni želite obrisati ovu stvar? Vi stvarno ne mogu učiniti ništa drugo sve dok ne kažu da ili ne. 

Trebalo je sve to i da ga pakiraju zajedno i rekao, ovdje mi ići. Ljudi sada mogu koristiti ovaj. A možete ga pronaći preko na getbootstrap.com. To je automatski uključena u Vaš posljednji problem postaviti. A vi ste više nego dobrodošli da se koristite ga na svoj konačni projekt. A ako želite slijediti taj povezuju se Bootstrap. 

Vidjet ćete ovdje Bootstrap CSS stranice. Vidjet ćete Bootstrap. A ako se pomaknete prema dolje, vidjet ćete kako ga skinuti, kako instalirati ga, et cetera. 

MIKE Rizzo: I vi možete, Zanimljivo, prilagoditi se biti bez obzira na vrstu teme koje želite. Znam da je to nešto što sam učinio za moju konačni projekt kad sam uzeo klasu se prilagoditi. Drugačija verzija Bootstrap da imao drugačiju shemu boja i različiti oblici neke različite stvari. Zato vas potičemo da se igraju s tim. To je vrsta zabave za napraviti. 

TOMAS REIMERS: Gledajući na vrhu opet, to je vrlo slična slova Strašan stranica. Puno dokumentacije će početi da izgleda slično kad ste vidio dosta toga. Dakle, ovdje imamo CSS sastavni dio ovoga. I vidjet ćete kako je to može oblikovati stvari. Dakle, ako kliknete na stolovima, primjerice, možete odmah napraviti Tablica prilično jednostavnim dodavanjem Klasa stol na njega. 

Iste stvari za tipke. Ako jednostavno dodati klase BTN i BTN zadani ili BTN primarni, možete dobiti bilo koju od tih tipki s tim pre-made stilova. A onda, ako ste u potrazi za nešto složeniji nego jednostavno Redizajn ono w već imate, više o tab JavaScript diljem vrhu smo imate hrpu komponenti. 

Dakle, ovdje imamo prijelaza, modals, padajućim popisima, karticama i opise. Tooltip je ono iskoči pod svoje miša kada prelazite na nešto. Popovers, upozorenja, tipke, sklopivi Harmonike je ono oni obično zovu. Carousels, koji Flip kroz poput slike. 

Dakle, to su dijelovi od Bootstrap. Ja bih vas potaknuti da vrlo ići pogledati na njima. Postoji JavaScript komponentu i CSS komponentu. Slobodno ih koristiti kako hoćete. Nećemo ići previše u njih jer smatramo dokumentaciju je jako dobro napravljena. I da. Imate li kakvih pitanja u vezi toga? 

MIKE Rizzo: Pa što se stvarno brzo strana, dizajn ovog web stranicu koja brzo smo stavili zajedno Ova prezentacija je zapravo učinjeno korištenjem Bootstrap. Kao što možete vidjeti, kad smo kliknite na njih različite kartice, mi smo zapravo nikada ostavljajući ovaj trenutni index.html stranicu. Dakle, ono što imamo je različita divs u tom index.html. I onda, kad smo kliknite različita tab, to je samo promjenom Tko od njih je pokazivanje. 

Tako je to u skladu s tim ih pozicionira, mijenja HTML stranice, tako da trenutni tab označen kao aktivni, tako izgleda drugačije i izgled jako lijepo. 

TOMAS REIMERS: Tako da je sve učinjeno bez nas pisanja gotovo bilo CSS. Također smo vidjeli zaglavlje na vrhu, koje boje su kod nas. No, stvarna stavljajući ga na vrhu stranice i izradu to svitak Bootstrap. A onda ni za drugu knjižnicu - to nije jedan smo razgovarali o tome, ali jedan možete Google ako želite. To se zove prettify.js. I to će sintakse koda za koju koristite i CSS i JavaScript. 

Zadnja stvar koju želimo razgovarati o prije nego što smo vas pustiti van u Svijet pogledati knjižnicama shvatiti kako ih koristiti i kako bi, nadamo se, čitati dokumentaciju i pronaći ono što Potreba je kako pronaći knjižnice. Dakle, prvo je mi smo samo će gurnuti Google. Idi Googleu. 

To je doslovno ono što smo učinili kada smo trebate učiniti nešto je što Google. Ima JavaScript biblioteka koja mi omogućuje da manipuliraju vrijeme u koristan način? Dakle, ako ja znam da su neki korisnik stvara računa ovdje, a to je trenutno vrijeme, kako mogu izračunati razlika koje bez izračunati ga osobno? Dakle, ovo je zapravo uobičajena stvar, JavaScript vrijeme knjižnice. I ovdje mi Moment.js-- najpopularniji jedan. 

Ako trebamo knjižnicu manipulirati nešto kao boje da bi mogli generiranje hrpa slučajnih boja - eventualno, za generiranje stil ili nešto - bismo mogli google nešto poput JavaScript boja knjižnica. I siguran sam da ćemo se pojaviti s Tisuću i jedna od njih. Vi ste dobrodošli da pročitate kroz njih. 

Dakle, većina stvari - kad ih naći - će biti domaćin na jednom od mjesta koja domaćin code. Oni su nekoliko popularnih one. Najpopularniji, prema sada je github.com. A ako idete na GitHub to je zapravo gdje je domaćin normalizirati. Dakle, ako želite da se vratite na tu jednu. Pokazati im da. 

MIKE Rizzo: I to je zapravo gdje ovo je domaćin previše, ako ste primijetili. 

TOMAS REIMERS: Da. Dakle, ako idete na to normalizirati i otići na GitHub. Jesu li se to? 

MIKE Rizzo: To mala mačka stvar je GitHub simbol. 

TOMAS REIMERS: Oh. Dakle GitHub koristi metodu zvanu Git za pohranu koda. Je li ne znam što je to i što vas plaši, to je u redu. Ne morate znati što je Git jer GitHub ima gumb Download u donjem desnom kutu. 

Druga korisna stvar znati o GitHub je većina proizvoda imat će me pročitati. A ako oni nemaju web stranicu, pročitao mi ćemo govoriti o tome kako instalirati ga, kako ga koristiti, što je ne, et cetera, et cetera, et cetera. Ono što mi u osnovi sam bio vas kroz. 

MIKE Rizzo: Internet je odvikavanje. 

TOMAS REIMERS: To je u redu. Posljednje dvije stvari koje smo htjeli razgovarati o tome - smo razgovarali o Git - je za rješavanje problema. A ovaj nije relevantno za konačni proizvod kao što je to kada odete 50. A kad naiđete na proizvode provedbi knjižnice ili provedbi svoj projekt, ideš imate pitanja ili ste će tražiti pitanja. 

Opet, Google ga. To je doslovno ono što nam je činiti. Ovo će zvučati glupo. No, doslovno, mi ga Google. A opet, jedna od prvih stvari obično ćete izvoditi u je stackoverflow.com, što je divno pitanje i odgovor prizor. 

To je divno i zato što možete postavljati pitanja i tražiti odgovori, ali i zato što to je već puno pre-naseljena sadržaj postoji. Tako obično kad Googleu programiranje Pitanje u prva Par hitova ste možda već pokrenuti u to vrijeme tvoj problem setovima. 

A onda, zadnji put stvarno kratak stvar je JSFIDDLE, što je - danas imamo radili puno posla s JavaScript HTML CSS. JSFIDDLE je web app, koji u osnovi vam omogućuje da se vaše HTML, vaš JavaScript dolje lijevo, a Vaš CSS gore desno. A onda to može stvoriti brzo uzvratiti od njega i vidjeti kako se komunicira. To je vrlo korisno kada se ljudi pokušavaju napraviti dokaz koncepta kao to je kako bi se napraviti padajući izbornik. Možda brzo možete otkriti ili što god. 

MIKE Rizzo: Dakle, idemo naprijed i kliknite na to. Quick note - budući da je, prije nego što smo bili radi na klik. Ispada JCorey Koreja također ima izgrađen u klik događaj rukovatelj da je koristi samo zato što ste figure htjeti učiniti puno stvari kada želite da kliknete nešto. 

Slično tome, ona također ima lebde. No, da biste dobili puni opseg one, pogled na jQuery dokumentacije i to učiniti. Učinio sam nešto glupo ovdje. 

TOMAS REIMERS: Dakle, imam jako brzo Program upravo ovdje, koji govori Tipka na klik. Onda imamo za petlju. I za manje od 404. To jednostavno će se pojaviti ove poruke upozorenja. 

MIKE Rizzo: A što je Kod 404 stajao u HTML-u? Da li se itko sjetio? Nije pronađen, zar ne. Chrome je također dodao ovaj uredan stvar gdje možete - 

TOMAS REIMERS: Zato što ljudi vole Mike počeo raditi puno i dosadne korisnik, što omogućava da vidite informacije. 

MIKE Rizzo: Da. 

TOMAS REIMERS: Imamo li kakvih pitanja o tome, o JavaScriptu knjižnice, pronalaženje knjižnice, ili što web development izgleda kao u stvarnom svijetu? Nemamo se protiv vremena. Pa nisam siguran da ćemo imati vremena za implementaciju osim ako je to stvarno brzo. Jesmo li dobro? 

MIKE Rizzo: sve što vi želite vidjeti jako brzo, kao, dva minuta ili manje? 

TOMAS REIMERS: Sve možemo pojasniti? Kako pisati u - 

PUBLIKA: [nečujan]? 

MIKE Rizzo: Da, tako that's - 

TOMAS REIMERS: Možete samo pogoditi Kontrola-U na web stranici. 

MIKE Rizzo: Oh, nisam znala da je. 

TOMAS REIMERS: Mislim da, da. Kontrola-U. Da. 

MIKE Rizzo: Oh, pa to je kod za web stranicu. Ali ako stvarno želite preuzeti naše datoteke i sve, što je domaćin Na github.com 

TOMAS REIMERS: slash moje ime - Tomas REIMERS - slash CS50 crtice seminar. 

MIKE Rizzo: A što možete pronaći sve postoji. 

TOMAS REIMERS: To je ono što GitHub Izgleda, usput. Pa opet, kad vidiš open source Projekt, u pravilu, oni će biti čitanje ja tu da vam može pročitati. I ako se vrati, primijetit ćete da imate preuzimanje zip, koji će omogućuju vam da preuzimanje izvor Kod uključiti proizvod u svoj stvar. 

MIKE Rizzo: Da, i ako mi samo kliknite na index.html jako brzo - 

TOMAS REIMERS: Vidjet ćete ovdje izvorni kod za naše web stranice. 

MIKE Rizzo: Također, zaboravio sam gurnuti u pravu Prije nego s velikim stolom to uključen, ali tu je i tablica od chmods da smo uključeni samo za svoje jasnoće. Ali ako mi dođite skroz do dno, nismo zapravo učiniti vrlo koliko sa JavaScript stvari uopće s tim. To je isključivo od svega ostalo što smo imali. 

Dakle, hvala vam momci na dolasku i slušanje. Nadamo se da je to bilo jako korisno. Ako imate bilo kakve JavaScript povezane pitanja ili jednostavno želite razgovarati o Što još mi se što druge cool stvari možete učiniti sa JavaScript, mi bismo rado razgovarati s vama. 

TOMAS REIMERS: Ako imate pitanje o svom projektu ili ako to može biti relevantno, vjerojatno ćemo staviti oko Malo nakon toga. No, osim toga, imaju dobar vikend. 

MIKE Rizzo: Da, uživajte. Vidimo se momci. 

TOMAS REIMERS: Vidimo se.