TOMAS REIMERS: Salut, toată lumea. Numele meu este Tomas Reimers. 

MIKE RIZZO: Și eu sunt Mike Rizzo. 

TOMAS REIMERS: Suntem doi de CS50s TS. Și astăzi suntem lider seminarul cu tema JavaScript și CSS pentru aplicații web. Dacă doriți să urmeze de-a lungul, link-ul este chiar acolo. Și vrei să-l pună în sus pe scurt calculator? 

Există link-ul. Este un site mic, care are legături cu toate resursele pe care le ai de gând să fie tu arătând astăzi și, de asemenea, are o multime de informații utile scrise de noi pentru a citeste mai mult în profunzime atunci când te duci înapoi, și încercați să vă amintiți ceea ce exact am spus, ceea ce ai fost vorbesc despre, et cetera. 

MIKE RIZZO: În regulă. Așa că haideți să începem. 

TOMAS REIMERS: Deci, doriți să începeți? OK. 

MIKE RIZZO: Da. Așa că am vrut mai întâi să înceapă cu o largă privire de ansamblu cu privire la internet și tipuri de fișiere atunci când proiectarea site-uri. În timp ce aceasta prezentare noi vrem să intra într-o mulțime de activarea JavaScript-mult mai târziu, am vrut să încep cu doar, un fel de, ca o pasăre ochi vedere de ce un site web este și modul în care să se gândească la proiectarea unui site-ul de la început. 

Deci voi, la acest moment - cu o fiind vineri seara - ar trebui să aibă prezentat finanțe dvs. CS50 seturi de probleme. Sperăm, că a fost un gust bun de ce de programare web poate fi. Dar aici vrem sa, un fel de, da te un alt gust, de asemenea. 

TOMAS REIMERS: Deci, doar pentru a recapitula ceea ce se întâmplă, atunci când tastați în URL-ul dvs. de a browser-ul web, care devine URL uitat în calculator. Și a computerului conectat la un alt calculator, care găzduiește acel site. OK, așa că atunci când te duci la google.com, esti conectat la una din Google calculatoare, care are fișiere pentru google.com. 

Apoi, cere pentru un anumit fișier. Deci, dacă te duci la - Nu știu - example.com / index.html sau / test.html, ai de gând să solicite acel fișier. Și server web se întâmplă să se întoarcă la tine. 

Apoi, odata ce trece prin acel fișier - odată ce ești calculator se că fișier - este de gând să înceapă pentru a construi o pagină web. Deci, acum are fișierul HTML, care este un fel de structura a paginii web. Fișierul HTML ar putea, de asemenea, de referință Fișiere CSS, care definesc stil de pagina de web. 

Fișiere JavaScript, care definește interacțiune cu pagina de web. Fișiere imagine, care sunt doar imagini. Și, eventual, nu se leagă la alte fișiere HTML, pe care le puteți vizita atunci. 

MIKE RIZZO: OK, mare. Deci, voi avea toate, poate, migală înființat gazdă local pe mașina virtuală. Și că doar, un fel de, este locale domeniu care computerul găzduiește doar pentru tine, la adresa IP proprie. 

Deci, în care, atunci puteți adăuga la aceasta propriile pagini de web. Adică, în CS50 finanțe, ar trebui să aveți adaugate unele pagini HTML, care sunt, un fel de, învelite în ambalajul PHP. Dar în cele din urmă, ceea ce paginile PHP au fost scoate fost HTML. 

Dar gândire înapoi la bun început a PSET, am avut de a stabili permisiunile pentru tot, nu? Deci, acest lucru pur și simplu, practic, ne permite să știu care poate citi, scrie, și, eventual, executa fiecare dintre fișierele. Așa că am de gând să faci un rapid - hm? 

TOMAS REIMERS: Deci vom pentru a face un demo rapid. Deci, doar pentru a vă reaminti, atunci când conecta la calculator Google - oricine - și cere pentru un fișier, primul computer trebuie să vă asigurați că sunteți autorizat de fapt, pentru a vedea care dosar sau citit că fișier pentru că nu poți cere pentru orice fișier de pe acel computer, corect? Asta ar fi un risc de securitate. 

Deci, fișierele de pe sistemele pe care le folosim, cum ar fi acest aparat CS50, avea trei general, oamenii care pot avea permisiuni ceva. Primul este real proprietar de fișier spus. Al doilea este grupul care a fișierul aparține. Nu ne vom concentra prea mult pe asta. Și ultimul lucru este, un fel de, cum ar fi lume sau ca toată lumea care e nu specific la acel fișier și nu are nici un drept de proprietate asupra acestuia. 

Deci, dacă avem proprietar, grup, și apoi lumea. Și apoi, pentru fiecare dintre aceste grupuri, vă poate avea una dintre cele trei permisiuni, OK, sau multiplu de ele. Puteți avea permisiuni de citire. Puteți avea permisiuni potrivite. Și tu poți avea permisiuni de executare. 

Deci, în termeni de tipuri de fișiere reale, citit permisiune este ca de fapt lectură conținutul dosarului. O permisiune drept este scris a spus fișier. O permisiune executa rulează fișier cum faci atunci când rulați una dintre proiectele dumneavoastră CS50. 

Așa că atunci când ne gândim despre fișiere ca atunci când avem nevoie pentru a citi un HTML dosar, care trebuie să fie lumea lizibil, corect? Probabil, de asemenea, proprietarul dorește să fie în măsură pentru a edita acest fișier. Deci, proprietarul va avea nevoie de scrie și să citească permisiunile. Ei nu într-adevăr nevoie de a executa. 

Grup, vom trata aceeași ca și în lume pentru acum. Deci, ei au nevoie de permisiuni de citire. Dar ei nu au nevoie de a scrie sau permisiuni de executare. Și acum, dacă ne gândim din nou la fosta PSETs, ceea ce ne dăm seama este acest tip a arata ca binar, corect? 1 standuri pentru da. 0 pentru nr. Și putem traduce de fapt, acest binar. 

Deci, 110 in binar ar fi 6. 100 ar fi 4. La fel cu lumea. Astfel încât numărul pe care îl va primi pentru permisiunile pentru acest lucru ar fi 644. 

MIKE RIZZO: Și dacă vă gândiți la atunci când i faci CHMOD ceva, eu cred au dat în problema stabilit exemplu de unde ai putea face ceva de genul chmod 644 și apoi numele de fișier. 644, atunci, puteți vedea acum direct în cazul în care vine de la. Deci sperăm că face ca un pic mai clar. 

Și apoi pentru claritate ce tip - Oh, da, aici este din nou. Deci, 600 atunci ar fi doar un exemplu ne-am dat aici, în cazul în care proprietarul are permisiuni de citire și dreapta în timp ce grup și lumea nu au nici permisiuni pentru a accesa fișierul. 

TOMAS REIMERS: Și atunci avem o rapid Lista de permisiuni comune. Deci directoare, vrei la chmod de fapt 711. Rapid deoparte - pentru un director de a avea permisiunea executabil înseamnă a fi capabil pentru a deschide directorul. Imagini, CSS, JavaScript, nevoile HTML 644, deoarece, în esență, lumea nevoile permisiuni de citire. 

Și PHP, pe care voi ați văzut cu toate că nu va fi vorba despre o strict este de obicei CHMOD cu permisiune 600 pentru că a rulat cu permisiunile proprietarului. Puțin pe aparatul la. 

MIKE RIZZO: Deci, dacă nu ai face în mod special specifica ce tip de fișier vrei în stabilirea de fapt această prezentare - am avut o problemă cu acest lucru, deoarece tot ceea ce nu a fost CHMOD corect - ai de gând pentru a obține, un fel de, un eroare interzisă că site-ul nu are de fapt permisiunea pentru a accesa orice fișier doriți să-l accesați. Și, bineînțeles, care poate fi fixat - ca și în problema stabilit - prin schimbarea permisiuni corespunzător. 

TOMAS REIMERS: Și ultimul comentariu pentru dezvoltarea repede locală este - noi a adus asta, dar am vrut doar să-l aducă din nou - dacă vă întreb pentru un server - gazdă atât locale, de exemplu, com sau orice altceva. - și nu specificați un fișier specific, fișierul care computerul se întâmplă pentru a cere este numit index.html. Sau în cazul în care nu există, index.php. 

Rece. Deci, asta e doar o recapitulare a tot ceea ce, sperăm, că ne-am acoperit în secțiune, și prelegeri, și până în prezent în CS50. Iar acum vom începe să vorbim biblioteci despre specific. Biblioteci JavaScript și CSS pentru aplicații web. 

Deci, un motiv rapid de ce avem biblioteci este de programare - există o mulțime de probleme în de programare, care ține popping sus din nou, și din nou, și din nou. Puteți observa că o mulțime de site-uri web nevoie de abilitatea de a avea verticală meniuri, de exemplu, sau au nevoie de abilitatea pentru a avea un buton foarte standard stil, care nu poate fi cel mai ușor lucru. Acum, că ați începe pentru a obține în HTML, dau seama că butoanele pot de fapt uita-te într-adevăr urât, dacă Nu face nimic. 

Deci, o mulțime de oameni au scris numita biblioteci. Și în acest context, sunt de asemenea, numit cadre. Vom utiliza două interschimbabil. Și ceea ce sunt este ca ei sunt de fapt piese premade de cod - fie CSS sau JavaScript - care ia o mulțime de echipa aveți în codificare. 

Astfel încât acestea să pre-defini o grămadă de clase sau pre-defini o grămadă de funcții pentru Caz de activarea JavaScript-lui, care puteți suna mai târziu. Și apoi puteți, un fel de, pentru a primi acces la acest cod, fără având de a face ceva. Un exemplu al bibliotecii a fost CS50.H. Asta a fost o bibliotecă-am dat-o înapoi într-o saptamana, ceea ce a permis să faci lucruri de genul asta getint și getString fără a fi nevoie să scrie orice cod de tine. 

MIKE RIZZO: În regulă. Deci, aici, la fel ca și a trebuit să includă în c noastre fișiere diferite biblioteci, noi, de asemenea, ar trebui să includă, în HTML nostru de fișiere diferite biblioteci. De exemplu, dacă am vrut să includă o anumită bibliotecă JavaScript aici, probabil, unul pe care l-am scris pe noi înșine așa cum este găzduit la nivel local numitele script.js, ne-am utiliza această notație. 

Deci avem egali tip script JavaScript sursă egal JavaScript.js. Și dacă vă gândiți la CS50 dvs. problemă de finanțare stabilit, dacă te-ai uitat în header.php în folderul template-uri, ar trebui să fi văzut unele dintre acestea sunt incluse. Deci, această primă unul - script-uri - este inclusiv o bibliotecă JavaScript. Inclusiv o bibliotecă CSS este un pic diferit. 

Aici, în loc de script tag-ul aveți nevoie de tag-ul link-ul. Apoi, tipul CSS textului este un pic diferit. Nu trebuie întotdeauna să includă foaie de stil rel. Dar cred că este, în general, bune practici. 

Și apoi în cele din urmă, href, care vă probabil văzut în ATAGs dumneavoastră pentru conectarea în diferite link-uri doar Specifică link-ul de unde pentru a găsi că. De exemplu, în cazul în care ne-am dorit pentru a lega o bibliotecă diferit - să spunem - care a trăit la styles.css. Și am vrut să se leagă faptul că, în care este găzduit pe web, am înțeles. Și apoi lipiți-l în orice avem chiar aici, în loc. 

TOMAS REIMERS: OK, sperăm, baieti sunt deja familiarizați cu modul de a link-ul CSS. A trebuit să facem acest lucru pe ultimul set maro. JavaScript, unii dintre voi poate au o anumită experiență cu. Unii dintre voi nu pot. 

Deci, de acum, știu că un fișier JavaScript este foarte mult ca un fișier CSS în sensul că puteți lega la ea sau pe care puteți să-l includă pe plan intern. Și vă permite să lucrurile script. Și am de gând să te plimbi printr-un pic de JavaScript mai târziu. 

Deci, folosind o bibliotecă - odată ce l-ai inclus, e ca și cum simplu ca literalmente de asteptare funcții sau adăugarea nume de clasa la ea. Ultimul lucru pe care vrem să vorbim cu privire la punctul de vedere al bibliotecii - iar acest lucru este mai mult de-o notă tehnică - este licențiere open source. Deci, atunci când veți găsi aceste biblioteci reale, poate te gandesti de întrebări ca este OK ca eu sunt doar folosind codul altcuiva, mai ales pentru că asta e ceva ce foarte mult ți-a spus să nu faci în acest curs. 

Deci, în cazul de licențiere open source, o mulțime de dezvoltatori - odată ce le-am scris o bibliotecă, pe care ei cred că ar putea fi de ajutor pentru alte persoane - se va publica pe web si da o licență. Și o licență spune, practic, eu sunt prin prezenta permisiunea de acordare pentru alte oameni să folosească această bucată de software cu următoarea fel de prevederi. 

Am inclus un link către un site bun pentru a vă ajuta să înțelegeți licențele în cazul în care alerga în ele. Prevederi comune sunt lucruri cum ar fi sunteți bineveniți să folosească biblioteca mea așa de mult ca să-mi dai credit. Ești binevenit să folosească biblioteca mea atât timp cât, atunci când se rupe nu da vina pe mine. Ești binevenit să folosească biblioteca mea atât de mult timp ca să nu-l folosească pentru a face bani pentru tine. Acestea sunt tipuri de comune prevederi. 

Pentru acest proiect final de CS50, ele nu ar trebui să fie foarte relevant, deoarece proiectele care voi folosesc sunt probabil, mai degrabă, un fel de, cunoscut. Dar atunci când te duci de fapt, afară, în lume și de a începe să utilizați biblioteci, care poate sau nu poate fi la fel de bine ca și implementate unele dintre cele mai populare cele suntem O să fie trece prin. Este bine să fie capabil să înțeleagă aceste licențe și la înțelege ce înseamnă. Și merge înapoi. 

MIKE RIZZO: OK. Deci, acum se deplasează pe exemple de real CSS. În acest moment până în prezent, s-ar putea nu s-au confruntat acest lucru. Dar s-ar putea l-au întâlnit în viața de zi cu zi în cazul în care ceva care arată o modalitate de pe un browser ar putea să nu arate la fel fel într-un alt browser. 

Aceasta se numește browser-ul browser-ului compatibilitate. Și din ce în ce este din ce în ce mai mult și mai mult de o problemă, în special în ceea browsere ia mai multe și mai multe libertăți să pună în aplicare lucrurile așa cum doresc. Deci, pentru a depăși că, de fapt, nu este o bibliotecă mare, numit Normalize.CSS. 

TOMAS REIMERS: Am inclus link-ul. În acest moment, este util în cazul în care aveți laptop-ul acolo uita la site-ul. Și suntem oferindu-asta drept acum pur și simplu pentru că finala CS50 Proiectul este, de fapt de gând să vă rog să-l pună în aplicare în mod similar și prin browsere. 

Deci, doar pentru a menține în partea din spate a dvs. cap, aceasta este o bibliotecă minunat pentru că va fi, un fel de, standardiza lucruri. În Firefox, ceva poate arăta ca un pixel la stânga. Și apoi Chrome poate decide că de fapt ceea ce ai vrut a fost de 10 pixeli spre stânga. Și doriți să standardizeze această. Normalizare va face de fapt, un foarte bun de locuri de muncă de a se asigura că site-ul dvs. arată la fel pe diferite browsere. 

MIKE RIZZO: Deci, dacă am vrut să doar faceți clic pe link-ul foarte repede și spectacol vă că ceea ce arata ca, tu puteți descărca folosind gigant Buton descărcare. Sau am să vă încurajez să citiți mai mult despre asta făcând clic pe acest link în partea de jos colțul din dreapta. 

TOMAS REIMERS: Și dacă tu de fapt faceți clic pe Citeste mai mult acolo - faceți clic pe sursa pe GitHub - veți vedea de fapt open source licență pe LICENSE.md chiar acolo. Și veți vedea aici este foarte popular licență MIT. Din nou, dacă ai citit prin text, vei fi capabil să-l găsiți pe site-ul am referit mai înainte și să fie capabil să Înțeleg că, fără a fi nevoie să citească prin jargonul juridic. 

MIKE RIZZO: OK, mare. Deci, asta e Normalizare. Am vrut să vă dau că într-adevăr repede. Oh, ai o întrebare? 

Audiența: Deci, atunci când descărcați-l, te urmați acest cod pe care le au sub butonul Download? 

TOMAS REIMERS: Da, așa atunci când le descărcați - 

MIKE RIZZO: Oh, asta e un punct mare. Deci, întrebarea a fost cum noi de fapt l descarci? Deci, dacă ne-am faceți clic pe link-ul, vom vedea care este de fapt apare la codul sursă. Deci, pentru a face acest lucru, ceea ce am putut nu este doar să faceți clic pe Salvare ca. Salvare ca și că ar trebui să aduce un fișier. Și apoi putem alege pentru a salva ca normalize.CSS. Și atunci va trebui să-l lega la - 

TOMAS REIMERS: același mod în care link-ul în orice alt dosar. Și odată ce-l leagă în, ceea ce e minunat despre Normalizare este de fapt va avea grijă de toate greu lucra de la sine. Ceea ce înseamnă că nu aveți să adăugați alte clase. 

Nu trebuie să faci nimic ciudat. Se va normaliza fără tine face mai mult nimic. Da, trebuie să-l includă. Google Chrome nu răspunde. 

Doar o parte rapid - Am observat am sărit în aceasta. Restul acestei prezentări este Va fi o privire de ansamblu rapidă. Un sondaj de biblioteci. 

Practic, ceea ce sunt. Ceea ce fac ei. Modul în care acestea sunt utile. Cum s-ar putea să le pună în aplicare. Dacă vrei să începi să cauți la ei, în urma de-a lungul, și de lectură prin ei, mi-ar încuraja foarte asta. 

Alternativ, esti binevenit, de asemenea, la începe descărcarea lor și inclusiv le într-un spectacol doar pentru a vedea ceea ce ei arata sau ce fac ei dacă aveți laptop-ul în fața ta. Dacă nu, ești binevenit să păstrați asculta ne vorbim. Vom continua să vorbim. Și avem timp, la sfârșitul anului, sperăm vom ajunge de fapt în care vă arată ce unele dintre aceste biblioteci arata ca. 

MIKE RIZZO: cool. Bine, deci acum hai sa vorbim despre Font Awesome. 

TOMAS REIMERS: Awesome, astfel Font este un site-ul foarte elegant, mai ales pentru cei dintre noi care sunt mai putin artistic talentat. Ignorarea Font nume Awesome, dă ai o grămadă de icoane, care sunt foarte util. Deci, de multe ori veți pune în aplicare o pictograma este posibil să doriți ca un x frumos astfel pe care le puteți închide ceva. 

Sau poate doriți un fel de buton Edit cu un desen creion ca toată lumea are. Și asta e atunci când afla că desen aceste icoane pot fi foarte obositor și dificil. Font Awesome - dacă aveți de fapt, du-te la site-ul - vă oferă o mulțime de icoane în pictogramele din partea de sus. Da, doar partea de sus. Acesta vă va oferi o mulțime de icoane gratuit. 

Deci, aici veți vedea, avem lucruri, cum ar fi o asterisc, baruri, un fulger, o calendar, un bug, o carte, etc. Acest lucru poate fi foarte util. Modul în care să includă acest lucru este să includeți literalmente fișierul CSS. Și după ce ați inclus fișierul CSS, ceea ce poate face este să creați un tag-ul, numit I. satands It pentru pictograma cu clasa FA în picioare pentru Font Awesome. Și apoi, indiferent de clasa vrei. 

Deci, dacă am vrut o icoană de acest plus pătrat chiar aici, mi-ar da aceasta clasa FA. Și apoi FA cratimă plus pătrat cratimă. 

MIKE RIZZO: cool, OK. 

TOMAS REIMERS: și apoi, ultimul CSS bibliotecă vrem să obțineți prin suntem încearcă să-l păstrați minim pe CSS biblioteci pentru că ne dăm seama titlu din această prezentare este JavaScript Biblioteci. Dar ne-am gândit că am putea la fel de bine va introduce la alte biblioteci în timp ce vorbeam despre biblioteci. 

Este Google Web Fonts. Și ce Google Web Fonts vă permite să faceți este să adăugați fonturi la site-ul dvs., care este o modalitate foarte ușor să-l facă destul de și pentru a distinge setul de la oricine altcineva este în cazul în care acesta are un font frumos sau dacă are un frumos colecție de fonturi. Google Web Fonts este frumos, spre deosebire de alte biblioteci, în sensul că este o instalare într-adevăr ghidat. 

Deci, dacă urmați link-ul, e google.com / fonturi, cred. Dacă urmați asta, poate alege fontul. Puteți alege pe stânga de la grosime, pantă, etc. Si apoi, odata ce ai ales unul, puteți să faceți clic rapid de utilizare. Chiar acolo. Din dreapta jos a casetei. 

Și apoi, derulați în jos. Mai întâi de toate, ei vă dau CSS care aveți nevoie pentru a lega de fapt, să-l. Este chiar acolo. Doar aveți posibilitatea să copiați și să lipiți că inch Și lucrul frumos despre asta este nu aveți de fapt nevoie chiar de a descărca fișierul. 

Ceea ce-l va face este sa mergi pentru a lega la versiunea Google de ea. Deci, înapoi la ceea ce înseamnă asta. Asta înseamnă că, atunci când un utilizator descarcă fișierul - descarcă pagina HTML - HTML Pagina se va face referire acest fișier. 

Deci, computerul se va vedea, oh, este găzduit pe google.com, mai degrabă decât pe theirsite.com. Lasă-mă să merg cere Google pentru acel fișier. Și apoi, o să includă aproape ca și cum ar fi o o parte din site-ul propriu. 

TOMAS REIMERS: cool. Și odată ce includ faptul că, atunci la include în CSS dumneavoastră, vă oferă linia reală. Deci, ați stabilit familia de fonturi de proprietate egală cu numele fontului dumneavoastră. 

MIKE RIZZO: OK. Așa că ne-am terminat cu CSS. Și unii dintre voi s-ar putea fi de gândire, ei bine, am avut unele CSS pe CS50 Finanțe. Dar biblioteca CSS a fost bootstrap. Vom include de fapt Bootstrap un pic mai târziu în JavaScript, deoarece cu biblioteca Bootstrap CSS, de asemenea, vine cu o mulțime de JavaScript care Bootstrap sau Twitter - care a făcut Bootstrap - folosește pentru a gestiona toate CSS lor. 

TOMAS REIMERS: Are cineva orice întrebări până acum cu privire la CSS, în general? Suntem bine? Minunat. 

MIKE RIZZO: Awesome. 

TOMAS REIMERS: Deci în mișcare pe de JavaScript. 

MIKE RIZZO: Deci, am vrut să vorbim despre jQuery pentru a începe cu. A auzit cineva de jQuery înainte sau a folosit-o? Da, un cuplu? Deci, dacă tocmai ați lucra cu nativ JavaScript, te vei găsi tastarea o mulțime de selectori lungi foarte mult. Deci, ceea ce face jQuery este că oferă un înveliș frumos pentru JavaScript limbă pe care vă permite să selectați cu ușurință și manipula elemente diferite în modelul de obiecte document al pagina de web sau DOM, care cred că voi au auzit de la prelegere la acest punct. 

TOMAS REIMERS: Dacă nu ați auzit de o prelegere sau dacă nu ați vizionat totuși, Document Object Model este de fapt modul în care sunt reprezentate lucrurile. Deci, HTML fel de arata ca un copac când de fapt trage afară. Ai elementul HTML pe partea de sus. Ai cap și corp. 

Și apoi, în care vă totul altceva. Care este menționată ca DOM - Document Object Model. Deci, un model care reprezintă obiecte în documentul este o modalitate ușoară de a gândi despre asta. Și unul de mare lucru despre jQuery se face într-adevăr de pendulare ca și elemente de manipulare în că incredibil de simplu. 

Atât de simplu, de fapt, că majoritatea JavaScript biblioteci sau dacă nu majoritate, majoritatea mare a celor veți vedea de fapt, nevoie de jQuery astfel ca acestea să poată rula pur și simplu pentru că dacă nu ai avea jQuery, te ar deșeuri o mulțime de timp încercând să dau seama cum de a selecta anumite elemente și cum să facă alte lucruri. Și un alt mare lucru despre jQuery este faptul că este browser-ul cruce compatibil. 

Deci, amintiți-vă înapoi, atunci când am spus că Nu toate browserele punerea în aplicare a lucrurile în același fel? Acest lucru este valabil chiar și în JavaScript. Și unul dintre cele mai mari lucruri despre jQuery este că acesta va detecta Browser-ul si de a detecta metode adecvate. 

Deci, dacă aveți nevoie pentru a selecta un element, Internet Explorer s-ar putea spune ca esti ar trebui să fac în acest fel. Firefox ar putea spune corectă mod este în acest fel. jQuery nu-i pasă. Când vă spun jQuery pentru a selecta un elementul se va dau seama cum e ar trebui să o facă în browser-ul utilizatorul este în prezent în, și apoi faceți în felul acesta. 

MIKE RIZZO: Deci, hai sa nu vorbim despre utilizarea jQuery un pic. La fel ca PHP, jQuery are un anumit slabiciune pentru semnul dolar. Deci, veți găsi că orice jQuery - bine, tot nu. Puteți înlocui uneori dolarul semneze cu cuvântul jQuery. Dar, în general, doar pentru că e mai scurtă, ori de câte ori veți vedea jQuery fiind folosit va fi cu un semn dolar. 

Deci, aici suntem doar arată un început selector pentru un element din DOM. Aici, avem semnul dolar urmat de paranteze deschise și apoi citate. Și în citatele merge selectoare noastre pentru diferitele elemente. La fel ca în CSS, am nevoie de selectoare pentru a fie în măsură să stil diferite elemente în cadrul paginii. Aceste diferite selectoare traduce exact în jQuery și JavaScript, cea mai mare parte. 

Deci, aici avem o foo punct. Deci, dacă vă amintiți de la curs, punctul inseamna doar clasa. Deci, suntem selectarea elementului cu clasa foo. Deci, dacă am merge mai departe și de a deschide noi JavaScript consola de aici foarte repede doar să demonstreze, dacă am tastați semn dolar, vom vedea că e un funcție care vine. Și e doar definit de jQuery. 

TOMAS REIMERS: Pentru cei dintre voi nefamiliare, consola este un instrument în Chrome, care vă permite să, de fapt, a alerga JavaScript pe pagina curent. Acest veți găsi incredibil de util atunci când tu esti de fapt, depanare și tu trebuie să fie ca, ceea ce este curentul Valoarea de unele variabile globale sau ce este cu totul altceva? E un fel de GDB cu excepția pe care le puteți de fapt, manipula elemente de pe pagina cu într-un mod mult mai ușor. Și, de asemenea, ea nu are, practic, verificați cu tine înainte de a face ceva. 

Deci, în timp ce, GDB ar putea fi ca, esti Sigur doriți să executați pasul următor? Consola este în timp real. Astfel ca pagina de web este de redare și face tot ce se face, consiliu, de asemenea, rulează alături de ea. Și vă pot pune codul de a atribui în că consolă, care va fi rulat pe pagina. 

MIKE RIZZO: Deci, pentru a intra în consola, Cred că ar trebui pe scurt vorbim de cum să faci asta. În ultimele probleme care le pot avea a folosit Chrome inspecta elementul funcții sau de vedere pagina sursă - și cei care sunt accesibile doar de drept faceți clic pe pagina sau o anumită elemente și de a face, fie să inspecteze element sau vedere la pagina sursă. Putem accesa, de asemenea, JavaScript consola direct de alegerea inspecta elementul. Consola este așa, atunci pur și simplu te-a lovit pe partea extrema dreaptă. 

Alternativ, ai putea fi, de asemenea, plecat în colțul din dreapta sus, care este tăiat de pe acest ecran în cazul în care are cele trei bare orizontale. Și te duci la instrumente și apoi consola JavaScript aici, unde se poate vedea - cel puțin pe Windows - scurtătura este de control Shift J. Deci, atunci dacă ne-am dorit pentru a selecta un element de în această pagină, așa cum am arătat înainte, să facem semnul dolar parens deschise și apoi citează. 

Un lucru interesant este, în general, ghilimele simple și ghilimele duble sunt schimbabil. Deci, o mulțime de oameni folosesc un singur ghilimele, deoarece acestea sunt mai rapide de tip decât ghilimele pentru că nu Trebuie să țineți apăsată tasta Shift. Așa că voi face doar asta chiar acum. 

Deci, vreau să selecta ceva cu clasa. Container, doar pentru că știu că e ceva care este pe noastre pagina web chiar acum. Și l-am lovit Enter. Și putem vedea că îl selectate. Deci, apare ca o întors acel obiect. Astfel că este o selecție de bază. Dacă am vrut să-l manipuleze, de fapt, va trebui pentru a apela ceva pe acea selecție, care vom intra în mai târziu. 

TOMAS REIMERS: Deci, doar să se uite la care mai în profunzime, aceasta nu este diferită decât apelurile de funcții le-am făcut în C. Numele funcției de aici este o puțin ciudat. Este semnul dolarului. E doar un nume de o funcție. Nu e nimic special despre asta. 

Avem paranteze deschise. Apoi, avem un argument nostru, care în acest caz, se întâmplă să fie un șir de caractere, care este un selector pentru ea. Și apoi, ne-am nostru paranteză închisă. Asta e tot. 

Nu e așa de foarte diferit. Deși, nu arata foarte ciudat. Și care poate fi, un fel de, o lipire punct pentru o mulțime de oameni. 

MIKE RIZZO: Deci, în mod similar, în cazul în care ne-am dorit pentru a selecta un element care are o identitate, acum ne-o dorim pentru a selecta de ID-ul in loc de clasa. Ar fi un lucru similar în cazul în care ne-am doar face semnul ascuțit pentru ID. Deci suntem selectarea aici toate elemente care au bar ID. 

TOMAS REIMERS: Și aceasta se extinde. CSS care se extinde. La fel ca în CSS, puteți selecta toate link-uri, care au foo clasă. Uite, e același lucru. 

Ai putea face a.foo, ceea ce ar alege toate legăturile cu foo de clasă. Ai putea face un bar ascuțit, care ar selectați legătura cu bara de ID-ul și așa mai departe și așa mai departe. Orice selector CSS este un valid selector jQuery. 

MIKE RIZZO: Da. OK, deci acum sa trecem intr-un pic de manipulare pe care le putem face cu nostru jQuery. Deci, jQuery are un anumit tip de de notație în care ne-am folosi un punct la sfârșitul anului. Și vă puteți gândi la acest lucru ca în C cum am avut diferite structs. Și să meargă în aceste structs, v-ar utilizează un punct pentru a obține în ele. 

Acest lucru este, un fel de, un lucru similar. Numai acum avem funcții în cadrul acestui selector că putem apela la ea. Deci, aici, primul exemplu puteți vedea este un selector CSS. Și, practic, ceea ce că nu este se aplică primul CSS element de la acest lucru pe care l-ați selectat - acest element pe care l-ați selectat - cu valoarea pe care. 

TOMAS REIMERS: Deci, o traducere ușor de care ar fi în cazul în care jQuery, în esență, doar a luat foo. Și apoi în CSS a spus, de culoare roșie și de aproape. Este aceeași idee. Ce se face este este selectat toate elementele foo. Și apoi este aplicat. Un fel de, culoarea de proprietate este egal cu roșu. 

MIKE RIZZO: În mod similar, putem, de asemenea, modifica conținutul real a ceea ce este arătând în codul HTML al paginii, care este foarte cool pentru că înseamnă dvs. pagini web pot fi acum complet dinamic și nu trebuie să fie static pe care le imprimați cu ajutorul PHP de la bun început de pagina de a fi încărcate. Deci, aici, în cazul în care ne-am dorit să-și modifice HTML real a paginii, ne-ar acum apela funcția HTML, care apoi doar insertii de orice am specifica în ca element care am selectat. Deci, aici suntem selectarea elementului cu foo clasă și apoi spun că e HTML este acum Hello World. 

TOMAS REIMERS: Și când te gândești despre ce sunt aplicații utile de aceasta, aceasta CSS, primul lucru pe care puteți începe să se gândească la în ceea ce privește chiar meniurile derulante. Ai putea începe să facă lucruri, cum ar fi, atunci când un utilizator trece peste partea de sus de o picătură în jos, pe care doriți să facă partea de jos vizibilă. Corect? 

Deci în CSS, avem proprietăți pentru a face ceva vizibil. Lucruri ca nici unul afișaj colon ar face invizibil. Bloc de afișare ar face vizibil. Sau chiar dacă vrei să mergi mai simplu, te lucruri cum ar fi egal de vizibilitate vizibil, și vizibilitate egal ascuns. 

Și ai putea începe să pună în aplicare lucruri cum ar fi drop jos dreapta meniuri după ce ai prin ideea de cât de poate îți dai seama când aceasta se deschide, pe care vom ajunge foarte scurt prin intermediul. Dar putem începe să vedem aplicații ale acestei. Într-un sens asemănător, dacă ar fi să încercați și să pună în aplicare, să zicem, un chat motor și doriți să faceți un pic bule discurs veni ori de câte ori ai primit un nou mesaj, odată ce te nou mesaj, puteți face un pic bule discurs veni prin modificarea HTML a paginii, corect? Prin adaugand ca bule discurs suplimentar cu textul suplimentar în acolo. Da? 

Audiența: Deci, v-ar încorpora acest termen de codul HTML ca un fel de [Inaudibil]? 

MIKE RIZZO: Corect. Da, vom ajunge la acel într-un pic. Da, este un similară pic de PHP. Nu chiar similare. 

O distincție bun pentru a face acest lucru este ceea ce este, de fapt editarea, atunci când ne-am edita pagina pentru că nu va fi editarea fișierului actual, care este în curs de păstrate pe server, deoarece lumea nu ar trebui să aibă permisiunea de pentru a edita fișiere. Acest lucru este pur și simplu de editare ceea ce este pe pagina și ceea ce este afișat în browser-ul. Deci, dacă ar fi să reîncărcați pagina după, spune, ștergerea ceva așa cum am vedea ce putem face cu apelul remove, care lucru ar reapărea atunci. 

TOMAS REIMERS: Deci, un mod de a gândi despre acest lucru este în cazul în care eu sunt pe computer și Mike este, un fel de, server. Ce se va întâmpla este am de gând să cere Mike, hei, poate am avea o copie a această pagină web? Și el să-mi dea o copie a acestuia. 

Nu, nu e un lucru original. E doar o copie. Și atunci ar fi ca, oh, nu e de activarea JavaScript-aici. În mod clar, ar trebui să editați pagina pentru ca acesta. Și eu sunt de editare copie. 

Dar asta nu e efectuarea copia real. Și dacă ar fi să-l întreb din nou e necesară încărcarea paginii, - hei, pot avea un alt exemplar curat - că o să-mi dea un alt exemplar curat. Și apoi, am de gând să fac același lucru cum ar fi, oh, acest JS aici care spune pentru a edita acest lucru. Și am de gând să continuăm să facem asta. 

MIKE RIZZO: Deci, un lucru foarte misto pe care le puteți face cu jQuery este de fapt adauga diferite tipuri de animații la pagina ta. Nu știu dacă ați văzut vreodată în cazul în care încercați să o completeze un formular on-line și nu completați lucrurile corect. Deci, un lucru mic alunecă în jos în partea de sus și spune: nu au făcut acest lucru în mod corect. Vă rugăm să încercați din nou. Și apoi, s-ar putea chiar slide doar în sus. 

Se pare că jQuery a construit în funcții că face toate de care animație foarte, foarte usor. Astfel încât nu există în primul rând se estompeze funcția de afară, care puteți apela la ceva. Și este o modalitate de a schimba CSS a acel element într-un mod animat. Deci, este nevoie de orice element de suna-l fade out pe. Și apoi, se schimbă încet opacitate ea lui până când acesta trece complet transparent. 

TOMAS REIMERS: Celălalt populare este alunece în jos, ceea ce va face ceva apar prin alunecare în jos. Deci, în cazul în meniul vertical, din nou, atunci când am învățat cum de a detecta atunci când acest lucru a fost a plutit deasupra, ai putea spune doar acest fund parte alunece în jos acum. Și apoi, s-ar părea prin alunecare în jos. 

MIKE RIZZO: Și atunci, dacă aveți doar un anumit tip de animație în vedere faptul că jQuery nu oferă în mod necesar. De exemplu, să spunem jQuery nu vă oferă cu un diapozitiv în jos și glisați în sus. Ei bine, să spunem că ai vrut să alunece ceva de la stânga sau de la dreptul de fel de, cum ar fi CS50 Pagina principală face ori de câte ori te duci la un nou panou. Tu ar atunci probabil va trebui să implementa singur, folosind Funcția anima în jQuery. 

Deci, în mod similar, doar tu anima. Și apoi, în cadrul acesteia este nevoie de o dicționar de diferite valori pe care le-ar trebui să treacă. Deci, aici, în cazul în care ne-am dorit pentru a anima element de foo astfel încât lățimea sa fie extinde sau contracte la 80 pixeli, în funcție de ceea ce în prezent este. Ne-ar trece doar că în calitate de argumentul în ea. 

Anima, de asemenea, au alte argumente care le-ar putea trece, de exemplu, viteza animației pe care doriți să-l dea. Și pentru a face asta, aș spune doar rapid Google jQuery animate. Și apoi, aducând această pagină, puteți a se vedea că are o grămadă de diferite proprietăți pe care puteți să-l trece. 

Și eu vă încurajez - ori de câte ori ai venit peste ceva ce nu știi sau vrei doar pentru a afla mai multe despre un Metoda de special pe care le puteți apela pe ceva - doar Google. jQuery este extrem de bine documentate. Și de multe ori există o mulțime de exemple pe care le oferă pentru tine. Dacă vom derula în jos - drum în jos - pe care le pot folosi, de asemenea. 

Din nou, atunci când un dezvoltator merge de fapt prin probleme de a scrie un bibliotecă, ei vor de obicei, cineva să-l folosească. Deci, alături de se va fie o documentare. Și că documentele pot fi, de obicei, aflat la pagina de proiect, care este de ce v-am dat site-ul original la început, pe care tu link-uri pentru pagini de proiect astfel încât să puteți vedea că documentația. 

De obicei, pagina proiectului în cazul de [auzite], te-a spus nume ale claselor. În cazul de JavaScript, dă vă numele de funcții. Apropo, dacă ne-am derulați până la partea de sus, o notă separată rapid la funcții este ori de câte ori veți vedea o funcție de implementat ca acest lucru cu greu paranteze în mijloc, ceea ce înseamnă că proprietatea este opțională. Doar un heads-up. Am văzut o mulțime de întrebări despre asta. 

Deci, aici putem vedea că animate are proprietăți ca un argument necesar. Și orice altceva este opțională. Notă - vă puteți gândi la acest lucru, tip de, cum ar fi pagini de om. Paginile man sunt documentație pentru C și pentru o mulțime de alte lucruri, precum și. 

MIKE RIZZO: Deci, am învățat cum să schimba diferit CSS pe pagina, anima-l, și scoateți adăuga HTML. Dar una din cele mai puternice într-adevăr lucruri despre JavaScript și mai ales jQuery - ceea ce vă permite să faceți este de a răspunde la diferitelor elemente care se întâmplă. De exemplu, aici avem un handler eveniment. Și asta înseamnă că doar atunci când acest eveniment se intampla, ne-am descurca într-un anumit fel. 

Deci, aici, la eveniment generic jQuery handler este punctul de pe. Și apoi, primul lucru pe care le-ați furnizat este ceea ce eveniment ar trebui asculta pentru. Deci, aici, e un clic care suntem de așteptare pentru. 

TOMAS REIMERS: Alternativ, aveți la Hover, care este unul foarte popular. Deci, înapoi la verticală meu jos idee de meniu. Tu ar trebui cel de sus pe hover. Și atunci ai putea schimba asta. 

MIKE RIZZO: Corect. Și apoi, când se întâmplă acest lucru, doar executa această funcție pe care l-am da ca un argument și că aceasta avertizează salut sau hi. 

TOMAS REIMERS: Deci, în cazul JavaScript, acesta este un loc de care avem nevoie pentru a scoate-ne de C. Putem de fapt ia funcții ca argumente. Și există o mulțime de adevărat moduri complexe pentru a face acest lucru. Vom promova într-un fel, care este, puteți defini funcționeze chiar acolo. 

Deci, atunci când ceri o funcție ca un parametru, esti practic doar va defini funcția pe loc. Și modul în care definesc o funcție în JavaScript tine este spune literalmente funcție. Apoi, de obicei, numele a funcției. Dar nu am de gând să referință această funcție din nou. Deci, l-am lăsa fără nume. 

Apoi paranteze, apoi cret bretele, iar apoi codul în acel. Așa că am înțeles acest lucru poate fi un pic confuz. Așa că am să vă dau forma generală a ceea ce o tratare a evenimentului arata ca de mai jos, care este pe evenimente. Și apoi, cod interiorul asta. 

MIKE RIZZO: Sunt acolo orice întrebări cu privire la acest lucru? Acest lucru poate fi un pic confuz prima dată când îl văd. 

TOMAS REIMERS: Vrei de fapt să deschide un fișier și să le arate unele jQuery chiar acum? 

MIKE RIZZO: Da, hai să facem asta. OK. 

TOMAS REIMERS: Deci, acum suntem în aparat. Și ceea ce am făcut este că am luat libertatea de a crea atât un index.html dosar, care link-uri către un fișier JavaScript. Și putem deschide - Da. Ei bine, face două lucruri. 

Primul este o leagă de fișierul JavaScript. Și vom vedea că aici. Vedem că în capul Document HTML, în special. Deci, veți vedea acolo că ne, practic, spune SRC, care vine de la sursă. Și că este URL-ul. 

Deci, aici vă pot spune ne-am inclus jQuery. Și am inclus, de asemenea, script-uri. Un alt mod de a include JavaScript este pe care le pot include un script inline tag-ul, așa cum am în partea de jos, unde se spune tip script-ul este un text JavaScript. 

Deci ne spun, asculta, suntem pe cale de a include un script. Și tipul de care script-ul este JavaScript, care este un tip de text. Foarte simplu. 

MIKE RIZZO: Deci asta, un fel de, ajunge la întrebarea despre modul în care vom include JavaScript în dosarele noastre pentru că atunci când ne-am a PHP, vom face ceva de genul asta. Și apoi, au funcții noastre PHP - să zicem stocurilor face ceva cu care - se duce acolo. Cu toate acestea, acum avem tag-urile script pe care l-am da, care sunt de fapt o parte din HTML în sine, deoarece nu este se preface a fi un fișier HTML ca aceasta este în PHP pentru că dacă te duci de fapt în si uita-te la sursa a paginii, veți vedea aceste tag-uri script-ul acolo cu JavaScript asociat cu le în care. 

Deci, dacă am vrut să scrie unele JavaScript - Să spunem doar că am vrut să schimbe organismul pentru că acum nu am orice alte tag-uri pe care le pot într-adevăr edita pe lângă corp. Să spunem doar că am vrut să schimba CSS de care. Deci, vom merge mai departe și de schimbare culoarea roșie a acesteia. 

Așa că am salvați fișierul. Să ne întoarcem la site-ul nostru, de reîmprospătare, și o face în mod automat pentru că nu părea a asteptat la toate, deoarece nu am fost ascultat pentru un eveniment sau ceva de genul asta. 

TOMAS REIMERS: Deci, dacă ne întoarcem la care dosar în special - HTML fișier - ceea ce ai de gând pentru a vedea este ca avem - amintiți-vă că aceasta este încărcată, un fel de, cronologic. Deci avem mai întâi capul. se încarcă cele două fișiere. Apoi vom merge la corp. Și vom vedea lumea salut. Așa că am face lumea salut. 

Și apoi ultimul lucru de care trebuie Se avem tag-ul script-ul. Deci, se execută tag-ul script-ul pentru că e nu se spune să aștepte nimic. Și asta e cel mai de bază mod de a rula JavaScript. 

Cu care a spus, poate ai pus scriptul eticheta în sus în antetul doar pentru a demonstra acest punct? Și că a alerga. Vom observa că nu a schimbat culoarea. Și aceasta este una din problemele JavaScript este că lucrurile sunt încărcate într-o ordine cronologică. 

Deci, în momentul în care codul a fost difuzate, am selectat - du-te înapoi - tag-ul body. Tag-ul body nu există încă, deoarece JavaScript este în conformitate cu HTML. Deci, browser-ul este ca selectați corp. Nu există nici un astfel de lucru încă. Deci, putem ignora asta. Și noi continuăm. 

Și apoi vom defini o etichetă corp. Dar care nu se actualizează. Deci, atunci când sunteți punerea în aplicare a script tag-uri, asigurați-vă că puneți după tag-ul body. Diapozitiv următor. 

MIKE RIZZO: OK. Deci, ne-am schimbat ceva. Dar aceasta nu arata ca ea a răspuns ne la toate, pentru că doar un fel de a făcut-o de îndată ce aceasta încărcat pagina. Deci, acum, în loc de a face acest lucru, de ce Nu vom adăuga un handler eveniment. 

Deci, hai sa facem ceva cu corpul din nou. Și să spunem că o facem pe - faceți clic pe. Vom adăuga o funcție. 

Schimbare Să: TOMAS REIMERS este culoarea de roșu din nou. De ce nu? 

MIKE RIZZO: Da, hai schimbare "culoare de la roșu din nou. Bine. Deci, haideți să reîncărcați pagina. OK, vom vedea - cum era de așteptat, nu se colorează în roșu încă. Dar atunci putem merge mai departe și faceți clic pe acesta. 

TOMAS REIMERS: Și aceasta nu se colorează în roșu. 

MIKE RIZZO: Și o face se colorează în roșu cum era de așteptat. 

TOMAS REIMERS: Și putem vedea cum putem începe să construiască foarte de bază interacțiune. Alte lucruri pe care le-ar putea dori să facă este, dacă nu vrem să facă corp culoare roșie, hai să facem HTML fundal roșu culoare. Doar ca e acelasi CSS. 

Și când l-am schimba, putem vedea acest lucru efect foarte dramatic de schimbare a întreaga pagină. Deci, din nou, dacă sunteți de punere în aplicare lucruri, puteți avea o componentă care este menit să fie făcut clic pe. Să presupunem că un buton de ieșire și o întreagă altă componentă, care este menit să răspundă. Deci, ar elimina o fereastră atunci când acest lucru se întâmplă. 

MIKE RIZZO: OK. Doar ca un exemplu - tu nu ajunge pentru a vedea acest lucru mai devreme - Vă voi arăta exact ceea ce pare ca atunci când ne ascundem ceva. Asa ca voi merge mai departe și de a face glisați în sus. 

TOMAS REIMERS: Vrei să-și încheie că într-o Tipul de punctul înainte de a face asta? 

MIKE RIZZO: OK. Da, de ce nu facem asta doar așa putem selecta un pic mai mult. 

TOMAS Reimers: Și să da o clasa. 

MIKE RIZZO: Da. OK, asa ca hai sa vedem. In loc de a selecta corpul propriu-zis acum, voi alege doar cu totul clasa de salut, care aici ne-am doar un singur lucru. Așa că nu ar trebui să vă faceți griji despre asta. 

Deci, voi refresh. Voi merge mai departe și faceți clic pe acesta. Și ea, un fel de, a făcut o expunere de ciudat up lucru, care nu arata ca atractive. În general, ele nu arata destul de frumos. Cred că, acest lucru - pentru unele motiv - nu. Voi face doar o estompeze în așa fel poti sa te uiti la asta. Mult mai frumos. 

Și apoi, dacă am deschide JavaScript consola din nou și vrem să vedem ce se pare ca atunci cand l-am dispărea inch Acum, doar eu sun estompeze în pe ea. Și dispare înapoi inch 

În mod similar, am putea de fapt, de asemenea, trece un argument să se estompeze sau fade out, care este, un fel de, viteza de ea. Deci, haideți să mergem mai departe și să spunem ce vrem ea pentru a merge încet estompeze inch Deci, cred că încă mai părea destul de repede. Dar a fost mai lent decât înainte. 

TOMAS REIMERS: Și dacă doriți să găsiți mai multe despre aceste lucruri, din nou, doar du-te la documentația jQuery, pe care le-am dat, și citit prin acestea. Ele documentează funcțiile lor incredibil de bine. 

MIKE RIZZO: OK. Deci, cred că să ne întoarcem la aceasta. Și putem vorbi despre ultima pagină. Ei bine, putem termina cu Bootstrap. Și apoi vom deschide pentru câteva întrebări. Și dacă voi avea nici o idee că v-ar dori să încerce să arunce în sus și vezi dacă le putem implementa cu JavaScript repede. 

Deci, foarte repede despre Bootstrap, care a fost inclusă în mod automat în ultima ta problemă stabilite în dosarul CSS și de fapt, legate la dvs. header.php. Deci, ai putea fi adăugat clase care sunt definite în cadrul Bootstrap la acesta. Și ar fi stil în mod automat aceste lucruri în consecință. 

TOMAS REIMERS: Deci Bootstrap este un foarte lucru magic dezvoltat de oameni la Twitter. Și ceea ce a fost menit să facă a fost - înainte de site-uri web au fost într-adevăr greu pentru a face arata frumos, mai ales atunci când am avut o mulțime de componente comune. Deci, o mulțime de butoane de pe web privit la fel. 

O mulțime de câmpuri text pot fi făcute pentru a arata mai bine decât textul standard, câmp probabil știți de la adevăr site-uri vechi sau foarte prost făcute site-uri web, care arata la fel ca literal casete de text, fără nici o formă de text umbră sau orice fel de contur frumos. Deci, ceea ce a făcut a fost Bootstrap a spus, bine, Avem multe stiluri comune. De ce nu am face un set comun de CSS și un set comun de JavaScript ca bine, pe care să-l stil ca este si care poate da oamenilor lucruri, cum ar fi meniurile jos meniuri, care pot oferi oamenilor lucruri cum ar fi modals. 

Modal este ceea ce apare pe pagina ori de câte ori este, strict vorbind, ceva, care inhibă în continuare interacțiune până când interacționează cu acesta. Ceva de genul asta este, sunt sigur doriți să ștergeți acest lucru? Nu se poate face nimic altceva până când spui da sau nu. 

A fost nevoie de toate acestea și îl ambalat împreună și a spus, aici vom merge. Oamenii pot folosi acum acest lucru. Și puteți găsi pe la getbootstrap.com. Acesta a fost inclus în mod automat în ultima problema ta setat. Și tu ești mai mult decât binevenit să să-l utilizați pe proiectul final. Și dacă vrei să urmezi care link-ul pentru a obține Bootstrap. 

Veți vedea aici este Procesul de Bootstrap site-ul CSS. Veți vedea Bootstrap. Și dacă defilați în jos, veți vedea cum să-l descărcați, cum să instalați-l, etc. 

MIKE RIZZO: Și puteți, de asemenea, destul de interesant, personaliza pentru a fi orice fel de teme pe care doriți. Știu că e ceva ce am făcut pentru meu proiect final, când am luat clasa sa-l personaliza. O altă versiune de Bootstrap care a avut o altă schemă de culori și diferite forme ale unora diferite lucruri. Deci, eu vă încurajez să se joace cu asta. Este un fel de distractiv de a face. 

TOMAS REIMERS: Privind în partea de sus din nou, este foarte similar cu Font Site-ul minunat. O mulțime de documentare va începe a părea similară atunci când ați văzut destul de ea. Deci, aici avem CSS componentă a acestei. Și veți vedea cum se poate stil lucruri. Deci, dacă faceți clic pe mese, de exemplu, puteți face imediat un masă destul de simpla adăugare tabelul de clasă la acesta. 

Aceleasi lucruri de butoane. Dacă pur și simplu adăugați BTN de clasă și BTN implicit sau BTN primar, aveți posibilitatea să lua oricare dintre aceste butoane cu aceste stiluri de pre-a făcut. Și apoi, dacă sunteți în căutarea pentru ceva mai complex decât pur și simplu restyling ce w au deja, de peste pe fila JavaScript pe WE top au o grămadă de componente. 

Deci, aici avem de tranziții, modals, dropdowns, file, și tooltips. Un tooltip este ceea ce apare sub dvs. mouse-ul atunci când treceți pe ceva. Popovers, alerte, butoane, pliabil acordeoane este ceea ce acestea sunt de obicei numite. Carusele, care flip- prin imagini, cum ar fi. 

Deci, acestea sunt componentele de Bootstrap. Aș dori să vă încurajez să extrem de du-te uita la ei. Există o componentă JavaScript și o componentă CSS. Simțiți-vă liber pentru a le folosi ca o vei face. Noi nu vom merge prea mult în ele pentru că ne simțim documentația este foarte bine facut. Și da. Aveți întrebări despre asta? 

MIKE RIZZO: Deci, ca sunt foarte rapid lateral, designul acestei pagini web care am pus repede împreună pentru această prezentare este de fapt, face folosind Bootstrap. După cum puteți vedea, atunci când faceți clic pe aceste tab-uri diferite, noi nu suntem de fapt lasand aceasta pagina index.html curent. Deci, ceea ce avem este de diferite divs în acest index.html. Și apoi, ori de câte ori faceți clic pe un alt tab-ul, e doar schimbarea care arată cuiva. 

Deci, în consecință le poziționează, schimbă HTML a paginii, astfel încât tab-ul curent este marcat ca activ atât se pare diferit și aspectul foarte frumos. 

TOMAS REIMERS: Deci, ce a fost făcut tot fără să ne scrieți aproape orice CSS. Vedem, de asemenea, un antet în partea de sus, care culorile sunt cu noi. Dar se pune real asupra partea de sus a paginii și de a face o defilare a fost Bootstrap. Și apoi chiar și pentru o altă bibliotecă - aceasta nu este unul despre care am vorbit, dar o puteți Google, dacă doriți. Aceasta se numește prettify.js. Și se va evidenția sintaxa codul pentru tine utilizând atât CSS și JavaScript. 

Ultimul lucru pe care vrem să vorbim despre înainte de a vă elibera afară, în lumea să se uite la biblioteci să dau seama cum să le folosească și să sperăm, citiți documentația și pentru a găsi ceea ce necesitate este cum de a găsi biblioteci. Deci, primul este că suntem doar va împinge Google. Du-te Google. 

Asta este literalmente ceea ce facem atunci când ne Trebuie să facem ceva este că Google. Există o bibliotecă JavaScript, care permite-mi pentru a manipula timp într-un mod util? Deci, dacă eu știu că unii utilizatori crearea un cont aici, iar acest lucru este ora curentă, cum pot calcula diferență cu care, fără a fi nevoie să calcula chiar eu? Deci, aceasta este de fapt un lucru comun, JavaScript bibliotecă timp. Și aici noi Moment.js-- cel mai popular. 

Dacă avem nevoie de o bibliotecă pentru a manipula ceva de genul culoare pentru a putea genera o grămadă de culori aleatoare - eventual, pentru a genera o stil sau ceva - am putea ceva de genul Google JavaScript bibliotecă de culori. Și eu sunt sigur că ne-ar pop-up cu o mie și una dintre ele. Ești binevenit să citească prin intermediul lor. 

Deci, cele mai multe lucruri - atunci când le găsi - vor fi găzduit pe unul dintre site-uri care codul de gazdă. Sunt câteva cele populare. Cele mai populare, de în prezent, este github.com. Și dacă te duci la GitHub este de fapt unde a fost găzduit Normalizare. Deci, dacă vrei să te întorci la asta. Arată-le că. 

MIKE RIZZO: Și asta e de fapt în cazul în care acest lucru este găzduit de asemenea, dacă ai observat. 

TOMAS REIMERS: Da. Deci, dacă te duci pentru a normaliza și du-te la Github. Au fost asta? 

MIKE RIZZO: Acest lucru mic pisica este simbolul GitHub. 

TOMAS REIMERS: Oh. Astfel GitHub foloseste o metoda numita Git de cod magazin. Este nu știi ce este sau care te sperie, asta e bine. Nu trebuie să știe ce este Git deoarece GitHub are un buton de Descărcare la dreapta jos. 

Un alt lucru util de știut despre GitHub este de cele mai multe produse va avea o mi-ai citit. Și dacă ei nu au un site web, citiți-mi va vorbi despre modul în care instalați-l, modul de utilizare, ceea ce-l nu, etc, etc, etc. Ceea ce am fost, practic, de mers pe jos prin. 

MIKE RIZZO: renunti de Internet. 

TOMAS REIMERS: Asta e bine. Ultimele două lucruri am dorit pentru a vorbi despre - am vorbit despre Git - este depanare. Și acest lucru nu este la fel de relevant pentru produsul final, deoarece este când pleci 50. Și atunci când rulați în produse implementarea de biblioteci sau de punere în aplicare propriul proiect, ai de gând să aveți întrebări sau esti gând să se uite la întrebări. 

Din nou, pe Google. Asta este literalmente ceea ce facem. Acest lucru se va parea o prostie. Dar pur și simplu, l-am Google. Și din nou, unul dintre primele lucruri pe care veți rula, de obicei, în este stackoverflow.com, care este un minunat întrebare și răspuns vedere. 

Este minunat, atât pentru că puteți posta întrebări și să căutați răspunsuri, dar și pentru că ea are deja o multime de conținut pre-populate acolo. Astfel încât, de obicei, atunci când Google o programare întrebare în primul câteva hit-uri este posibil să fi rulat deja în ea în timpul seturi de probleme. 

Și apoi, ultimul lucru pe care într-adevăr scurt este JSFIDDLE, care este - astăzi ne-am făcut o mulțime de lucru cu JavaScript HTML CSS. JSFIDDLE este o aplicatie web, care, practic, vă permite să ia HTML dvs., TA JavaScript stanga jos, și CSS-ul din dreapta sus. Și atunci se poate crea face o rapid de ea și a vedea modul în care interacționează. Este foarte util atunci când oamenii încearcă pentru a face o dovada a conceptului ca acest lucru este modul în care ar fi face un meniu vertical. Poate o descoperi rapid sau orice altceva. 

MIKE RIZZO: Deci să mergem mai departe și să faceți clic pe acest lucru. O scurtă notă - în timp ce, înainte am fost face pe clic. Se pare că Coreea JCorey are, de asemenea, o construit în handler eveniment click că foloseste doar pentru că cifrele esti O să vrei să faci o mulțime de lucruri atunci când doriți să faceți clic pe ceva. 

De asemenea, ea are, de asemenea, un hover. Dar pentru a obține domeniul de aplicare completă a cei, uita-te la jQuery documentație și fă-o. Am făcut ceva stupid aici. 

TOMAS REIMERS: Deci, am o foarte repede program de aici, care spune: buton de pe clic. Atunci avem o pentru buclă. Pentru i este mai mic de 404. Este doar de gând să pop-up aceste mesaje de avertizare. 

MIKE RIZZO: Si care a fost cod 404 a stat în HTML? Are cineva aminte? Nu a fost găsit, chiar. Chrome a adăugat, de asemenea, acest elegant lucru unde puteți - 

TOMAS REIMERS: Pentru ca oameni ca Mike a început să facă acest lucru foarte mult și utilizatorii enervant, care permite te pentru a vedea informatii. 

MIKE RIZZO: Da. 

TOMAS REIMERS: Nu avem întrebări despre acest lucru, despre JavaScript biblioteci, găsirea de biblioteci, sau arată ceea ce de dezvoltare web ca și în lumea reală? Nu mai avem până împotriva timp. Deci, eu nu sunt sigur că vom pentru a avea timp să pună în aplicare excepția cazului în care este foarte rapid. Suntem bine? 

MIKE RIZZO: voi Anything-ar dori pentru a vedea cu adevărat rapid în, cum ar fi, două minute sau mai puțin? 

TOMAS REIMERS: Orice putem clarifica? Cum de a scrie in - 

Audiența: [inaudibil]? 

MIKE RIZZO: Da, deci asta e. - 

TOMAS REIMERS: Puteți lovit doar Control-U de pe site-ul web. 

MIKE RIZZO: Oh, eu nu știu asta. 

TOMAS REIMERS: Eu cred, da. De control-U. Da. 

MIKE RIZZO: Oh, astfel încât este codul pentru site-ul web. Dar dacă chiar vrei să descărcați noastre fișiere și tot ceea ce, ea este găzduit on github.com 

TOMAS REIMERS: slash numele meu - Tomas Reimers - slash Seminar CS50 cratimă. 

MIKE RIZZO: Și tu poți găsi tot acolo. 

TOMAS REIMERS: Aceasta este ceea ce GitHub arata ca, apropo. Deci, din nou, atunci când vezi un open source proiect, de obicei, vor fi o citire mi-acolo pe care le puteți citi. Și dacă te duci înapoi, veți observa că aveți zip download, care va vă permite să descărcați sursa cod pentru a include produs în treaba ta. 

MIKE RIZZO: Da, și dacă ne-am faceți clic pe pe index.html foarte repede - 

TOMAS REIMERS: Vei vedea aici e codul sursă pentru site-ul nostru. 

MIKE RIZZO: De asemenea, am uitat pentru a împinge dreapta înainte cu tabelul de mare inclus, dar există, de asemenea, un tabel de chmods care le-am inclus doar pentru claritate dumneavoastră. Dar dacă vom defila tot drumul până la partea de jos, nu am de fapt, nu foarte mult cu JavaScript lucruri deloc cu asta. Este exclusiv din tot altfel că am avut. 

Deci, va multumesc pentru venit și de a asculta. Sperăm că acest lucru a fost foarte util. Dacă aveți orice JavaScript legate de întrebări sau vrei doar să vorbim despre ce altceva ca ce alte lucruri interesante se poate face cu JavaScript, ne-ar plăcea să vorbesc cu tine. 

TOMAS REIMERS: Dacă aveți o întrebare despre proiect sau în cazul în care acest lucru poate fi relevant, vom probabil lipi în jurul un pic după aceasta. Dar în afară de asta, au un week-end bun. 

MIKE RIZZO: Da, se bucura. Ne mai vedem. 

TOMAS REIMERS: Ne mai vedem.