Tip:
Highlight text to annotate it
X
>> 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, *** 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, *** 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 *** 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 *** 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 *** 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 *** 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 *** 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 *** 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.
*** 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, *** 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 *** 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 *** de a selecta anumite
elemente și *** 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 *** 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 *** 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 *** 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 *** 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, *** 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 *** ar fi egal de vizibilitate
vizibil, și vizibilitate egal ascuns.
>> Și ai putea începe să pună în aplicare lucruri *** 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 *** 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 *** 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 *** 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, *** 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, *** 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 *** 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 *** 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 -
*** 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 *** era de așteptat.
>> TOMAS REIMERS: Și putem vedea *** 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, *** ar fi meniurile
jos meniuri, care pot oferi oamenilor lucruri *** 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 *** să-l descărcați, *** 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 *** 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, *** 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ă *** 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 *** să le folosească și să sperăm,
citiți documentația și pentru a găsi ceea ce necesitate este *** 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ă, *** 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, *** ar fi, două
minute sau mai puțin?
>> TOMAS REIMERS: Orice putem clarifica?
*** 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.