>> Tomáš REIMERS: Saluton, ĉiuj.
Mia nomiĝas Tomáš Reimers.
>> MIKE Rizzo: Kaj mi certas Mike Rizzo.
>> Tomáš REIMERS: Ni estas du el CS50s TS.
Kaj hodiaŭ ni gvidis la seminarion pri JavaScript kaj CSS retejo apps.
Se vi volas sekvi kune, la ligilo pravas tie.
Kaj ĉu vi volas meti ĝin en la komputilo mallonge?
>> Jen la ligilo.
Ĝi estas malgranda ejo, kiu havas ligojn al ĉiuj rimedoj ni tuj estos
montrante vin hodiaŭ kaj ankaŭ havas multajn utila informo skribita de ni
legu pli profunde, kiam vi iros returne, kaj vi provas memori kion
ekzakte ni diru, kion vi estis parolas, ktp.
>> MIKE Rizzo: Bone.
Do ni komencu.
>> Tomáš REIMERS: Do vi volas komenci?
OK.
>> MIKE Rizzo: Jes.
Do ni unue volis komenci kun larĝa superrigardon pri interreto kaj
dosiertipoj desegninte retpaĝaroj.
Dum ĉi tiu prezento ni volas eniri en JavaScript multe multe
poste, ni volis dividi kun justa, speco de, kiel birda okulo vido
de kia retejo estas kaj kiom pensi desegnante
retpaĝaro por la komenco.
>> Do you guys, je ĉi tiu punkto - kun ĝi esti vendredo nokte - devus havi
prezentis viajn CS50 financo problemo aroj.
Mi esperas, ke estis bona gusto de kio ttt programado povas esti.
Sed ĉi tie ni volas, speco de, doni vi alian guston, kiel bone.
>> Tomáš REIMERS: Do apenaŭ al Recap kio okazas, kiam vi tajpas en via URL por
via retumilo, ke URL gets rigardis supren en la komputilo.
Kaj via komputilo konektita al alia komputilo,
kiuj gastigas tiu retejo.
OK, do kiam vi iras al google.com, vi estas konektita al unu de Google
komputiloj, kiuj havas la dosierojn por google.com.
>> Ĝi tiam petu specifan dosieron.
Do, se vi iros al -
Mi ne scias -
example.com / index.html aŭ / test.html, vi iras por peti
ke specifan dosieron.
Kaj la TTT-servilo de irante redoni ĝin al vi.
>> Tiam, kiam vi iros tra tiu dosiero -
iam vi estas komputila gets ke dosiero - ĝi tuj komenci
konstrui retpaĝo.
Do nun havas la HTML-dosiero, kio estas speco de kiel la
strukturo de la TTT-pagxo.
La HTML-dosiero povus ankaŭ referenci CSS dosieroj, kiuj difinas la
stilo de la TTT-pagxo.
>> Javascript dosieroj, kiuj difinas interago kun la retpaĝo.
Bildo dosieroj, kiuj estas nur bildoj.
Kaj eble ligas al aliaj HTML-dosieroj, kion vi povas tiam viziti.
>> MIKE Rizzo: OK, grandaj.
Do you guys havas ĉiuj, eble, pene starigita via loka gastiganto
sur via virtuala maŝino.
Kaj tio nur, speco de, estas la loka havaĵo, ke via komputilo akceptas nur
cxar vi ĉe via propra IP-adreso.
>> Do ene de tiu, tiam vi povas aldoni al ĝi vian propran ttt-paĝoj.
Mi volas diri, en CS50 Financoj, vi devus havi aldonis iujn HTML paĝojn, kiuj estas,
ia, envolvita en la PHP-ŝelajn.
Sed fine, kio via PHP-paĝoj estis outputting estis HTML.
>> Sed pensante reen al la komenco de la PSET, ni devis agordi
la permesojn por ĉio, ĉu ne?
Do tio nur esence lasas nin scii kiuj povas legi, skribi, kaj eble
ekzekuti ĉiun de la dosieroj.
Do ni tuj faros rapidan - hm?
>> Tomáš REIMERS: Do ni iras fari rapidan demo.
Do simple por memorigi vin, kiam vi konekti al Google-komputilo -
ajn -
kaj peti dosieron, la komputilo unue bezonas certigi ke vi rajtigita
al reale vidi, ke la dosiero aŭ legis ke dosieron ĉar ne eblas simple demandi
por ajna dosiero en tiu komputilo, ĉu ne?
Tio estus sekureca risko.
>> Do dosierojn sur la sistemojn kiujn ni uzas, kiel ĉi CS50 aparato, havas tri
Ĝenerale homoj, kiuj povas havi permesojn por io.
La unua estas la efektiva posedanto de koncerna dosiero.
La dua estas la grupo kiu la dosiero apartenas.
Ni ne tuj enfokusigi tro multe en tiu.
Kaj la lasta afero estas, speco de, kiel la mondo aŭ kiel ĉiuj aliaj, kiuj estas
Ne specifaj al tiu dosiero kaj ne havi neniun proprieton rajtojn super ĝi.
>> Do, se ni havas posedanto, grupo, kaj tiam la mondo.
Kaj tiam, por ĉiu el tiuj grupoj, vi povas havi unu el tri permesojn,
OK, aŭ plurajn el ili.
Vi povas havi legitaj permesojn.
Vi povas havi rajton permesojn.
Kaj vi povas havi ekzekuti permesojn.
>> Do, en terminoj de realaj dosiertipoj, legi permeso estas kiel efektive legas
la enhavon de la dosiero.
A dekstra permeson skribi al diris dosiero.
An ekzekuti permeson kuras la dosieron kiel vi faras kiam vi kuras unu el
via CS50 projektoj.
>> Do kiam ni pensas pri dosierojn kiel kiam ni bezonas legi HTML
dosiero, kiu bezonas esti mondo legebla, right?
Supozeble, same la posedanto volas por povi eldoni tiun dosieron.
Do la posedanto tuj bezoni legi kaj skribi permesojn.
Ili ne vere bezonas ekzekuti.
>> Grupo, ni iras al trakti la samajn kiel la mondo ĝis nun.
Do ili bezonas legitaj permesojn.
Sed ili ne bezonas registran aux ekzekuti permesojn.
Kaj nun, se ni pensas reen al iama PSETs, kion ni rimarkas estas tiuj afabla
de aspektas kiel duuma, ĉu ne?
1 signifas jes.
0 por neniu.
Kaj ni povas reale traduki tio al duuma.
>> Do 110 en duuma estus 6.
100 estus 4.
Sama kun mondo.
Do la nombro kiun vi ricevas pro la permesojn por ĉi estus 644.
>> MIKE Rizzo: Kaj se vi opinias reen al kiam vi chmoded io, mi kredas
ili donis en la problemo starigis la Ekzemple, de kie vi povus fari
iu kiel chmod 644 kaj tiam dosiernomo.
La 644 tiam, vi nun povas vidi rekte kie tiu venas.
Do espereble, ke faras ke iom pli klara.
>> Kaj tiam por vi guy de klareco -
Ho jes, tie ĉi estas denove.
Do 600 tiam estus nur la ekzemplon ni rezignis tie kie la posedanto disponas
legi kaj dekstra permesojn dum grupon kaj mondo ne havas ajnan permesojn
aliri la dosieron.
>> Tomáš REIMERS: Kaj tiam ni havas rapidan listo de komuna permesojn.
Do dosierujoj, vi volas por fakte chmod 711.
Rapida flanken - por dosierujo havi plenumeblan permeson signifas povi
malfermi la dosierujon.
Bildoj, CSS, JavaScript, HTML bezonoj 644 ĉar, esence, la mondo
bezonoj legu permesojn.
>> Kaj PHP, kiun vi uloj vidis kvankam ni ne povas paroli pri ĝi
strikte estas tipe chmoded kun permeso 600 ĉar ĝi kuris kun
la permesojn de la mastro.
Almenaŭ en la aparaton.
>> MIKE Rizzo: Do ​​se vi ne specife specifi kia tipo de dosiero
vi volas en reale opcio tiun prezenton -
ni havis problemon kun tio, ĉar ne ĉiu chmoded korekte -
vi tuj akiri, speco de, malpermesita eraro, ke la retejo
fakte ne havas permeson aliri ajn dosieron
vi volas ĝin aliri.
Kaj kompreneble, kiuj povas esti riparita - kiel en problemo starigis - ŝanĝante
permesojn taŭge.
>> Tomáš REIMERS: Kaj la lastan komenton por rapide loka disvolviĝo estas - ni
alportis ĉi supre, sed ni nur volis alporti supren denove -
se vi demandas por servilo - do loka gastiganto, ekzemple,. com aŭ kio ajn -
kaj vi ne specifas specifan dosieron, la dosieron ke via komputilo tuj
peti nomiĝas index.html.
Aŭ, se tio ne ekzistas, index.php.
>> Cool.
Do tio estas nur recap ĉio, mi esperas, ke ni jam kovrita
sekcio, kaj prelegis, kaj ĝis nun en CS50.
Kaj nun ni tuj komencos parolante pri specife bibliotekoj.
JavaScript kaj CSS bibliotekoj retejo apps.
>> Do unu rapida tial ni havas bibliotekoj estas programado -
tie estas multe da problemoj en programado, kiu konservi krevi supren
denove, kaj denove, kaj denove.
Vi eble rimarkos ke multaj retejoj bezonas la kapablon de havi falmenuo
menuojn, ekzemple, aŭ bezonas la kapablon havi tre norma butono
stilo, kiu ne povas esti la plej facila afero.
Nun ke vi komencas eniri en HTML, vi rimarki, ke butonoj povas reale
aspektas vere malbele, se vi ne fari ion.
>> Do multaj homoj skribis vokis bibliotekoj.
Kaj en ĉi tiu kunteksto, ili estas ankaŭ nomata kadrojn.
Ni tuj uzos la du interŝanĝeble.
Kaj kion ili trovas ili estas esence premade pecoj de kodo -
ĉu CSS aŭ JavaScript -
kiuj forprenas multon de la team vi havas en kodigo.
>> Do ili pre-difinas aron de klasoj aŭ pre-difini aron da funkcioj por
Javascript La kazo, kiun vi povas voki poste.
Kaj tiam vi povas, ia, get aliro al tiu kodo sen
devi fari ion.
Ekzemplo de la biblioteko estis CS50.H. Tio estis biblioteko ni donis al vi reen
en semajno, kio permesis al vi fari aĵoj kiel tiu GetInt kaj GetString
sen devi skribi ajna kodo mem.
>> MIKE Rizzo: Bone.
Do jen, ĝuste kiel ni devis inkluzivi en niaj c Dosieroj la malsamajn
bibliotekoj, ni ankaŭ devus inkluzivi en nia HTML dosieroj malsamaj bibliotekoj.
Ekzemple, se ni volis inkluzivi specifa JavaScript bibliotekon ĉi tie,
eble, kiu ni skribas nin kiel ĝi estas loke gastigita
vokis script.js, ni nur uzi ĉi skribmaniero.
>> Do ni havas skripton tipo egaluloj Javascript fonto egaluloj
JavaScript.js.
Kaj se vi opinias reen al via CS50 financoj problemo metita, se vi rigardis en
header.php en la ŝablonoj dosierujo, Vi devus vidi,
kelkaj el tiuj inkluditaj.
Do tiu unua - la skriptoj -
estas inkludita JavaScript biblioteko.
Inkludante CSS biblioteko estas iomete malsamaj.
>> Ĉi tie, anstataŭ la skripto Tag vi bezonas la ligilon etikedo.
Kaj tiam, la teksto CSS tipo estas iom malsama.
Vi ne ĉiam devas inkluzivi rel stilo folio.
Sed mi pensas ĝi estas, ĝenerale, bona praktiko.
>> Kaj poste, fine, la href, kion vi verŝajne vidis en via ATAGs por kunligi
en diversaj ligiloj simple specifas la ligilo de kie trovi tion.
Ekzemple, se ni volis ligi malsamaj biblioteko - ni simple diri -
kiuj vivis ĉe styles.css.
Kaj ni volis ligi ke en tio estas loĝigita en la retejo, ni devus kopii tion.
Kaj poste algluu ĝin en iu ajn ni havas ĉi tie anstataŭe.
>> Tomáš REIMERS: Bone, espereble vi infanoj estas jam konata
kun kiel ligi CSS.
Vi devis fari tion sur via lasta bruna aro.
Javascript, kelkaj el vi eble havi iom da sperto kun.
Iuj el vi eble ne.
>> Do por nun, sciu ke JavaScript dosieron estas tre multa ŝatas CSS dosiero en
la senco, ke vi povas ligi al ĝi aŭ ke vi povas inkluzivi gxin interne.
Kaj tio permesas skripto aferojn.
Kaj ni tuj iru vi per iomete da JavaScript poste.
>> Do uzante biblioteko -
unufoje vi jam inkludis ĝin, ĝi estas kiel simpla kiel laŭvorte nomante la
funkcioj aŭ aldonante la klaso nomoj por ĝi.
La lasta afero ni volas paroli pri en terminoj de la biblioteko -
kaj ĉi tiu estas pli teknika noto -
Estas malfermita fonto permesilo.
Do, kiam vi trovos tiujn realajn bibliotekoj, eble vi pensas
demandojn ŝatas estas ĝi OK, ke mi estas nur uzante aliulaj kodo, speciale
ĉar tio estas io tre multe diris al vi, por ne fari en ĉi tiu kurso.
>> Do, en la kazo de malfermita fonto permesilo, multe da programistoj -
Tuj ili skribis biblioteko, kion ili pensas povus esti
helpema al aliaj homoj -
publikigos ĝin al la retejo kaj donu licencon.
Kaj licencon esence diras mi maniere koncedante permeson al aliaj
homojn uzi ĉi peco de programaro kun la jenaj ian
estipulaciones.
>> Ni inkludis ligilon al bona loko por helpas al vi kompreni la licencoj en
kazo vi kuros en ilin.
Komuna estipulaciones estas aĵoj kiel Vi plene rajtas uzi mian bibliotekon tiel
longe kiom vi donas al mi krediton.
Vi plene rajtas uzi mian bibliotekon tiel longe kiel kiam ĝi rompas
Vi ne kulpas mi.
Vi plene rajtas uzi mian bibliotekon tiel longa kiel vi ne uzas ĝin por fari monon
cxar vi mem.
Ĉi tiuj estas specoj de komuna estipulaciones.
>> Por ĉi CS50 fina projekto, ili ne devus esti la super rilatajn ĉar
la projektoj kiujn vi uloj uzas estas Probable ĝuste, speco de, konata.
Sed kiam vi vere eliros sur la mondo kaj ekuzi bibliotekoj, kiuj
Eble aŭ ne estu tiel implementado kiel kelkaj el la plej popularaj ni estas
tuj iros tra.
Bonas por povi kompreni ĉi tiuj licencoj kaj al
kompreni kion ili signifas.
Kaj irante reen.
>> MIKE Rizzo: okej.
Do nun movanta sur ekzemploj el reala CSS.
Je ĉi tiu punkto ĝis nun, vi eble ne renkontis ĉi.
Sed eble vi renkontis lin en via ĉiutaga vivo kie io
kiu similas unu vojo en unu retumilo eble ne rigardu la saman
vojon en alian retumilo.
>> Tio estas nomata retumilo retumilo kongruo.
Kaj ĉiufoje Iĝas pli kaj pli ol problemo, speciale kiel
foliumiloj preni pli kaj pli da liberecoj apliki tion, kion ili volas.
Do por superi tiun, tie efektive estas grandan bibliotekon nomitan Normalize.CSS.
>> Tomáš REIMERS: ni inkludis la ligilon.
Je tiu punkto, ĝi estas utila, se vi havas vian tekkomputilo tien
rigardante la lokon.
Kaj ni alportas al vi rajton nun simple ĉar la CS50 fino
projekto estas vere tuj demandi vin implementarlo
simile kaj tra retumiloj.
>> Do simple por gardi en la dorso de via kapo, tio estas mirinda biblioteko
ĉar ĝi volas, ia, normigi tion.
En Firefox, iu povas montri kiel unu rastrumero maldekstren.
Kaj tiam Chrome eblas decidi ke reale kion vi volis diri estis 10 rastrumeroj
maldekstren.
Kaj vi volas normigi tion.
Normaligi efektive faras vere bonan laboron de certigi ke via ejo
aspektas la sama trans retumiloj.
>> MIKE Rizzo: Do, se ni volis simple klaki la ligilon vere rapide kaj spektaklo
vi kion tio aspektas kiel, vi povas elŝuti ĝin uzante la
giganto Elŝutu butonon.
Aux mi kuraĝigas vin legi pli pri ĝi klakante tiun ligilon en la suba
dekstra mano angulo.
>> Tomáš REIMERS: Kaj se vi vere klaku legu pli ĝuste tie -
klaki la fonto sur GitHub -
vi efektive vidas la malfermita fonto permesilo en LICENSE.md rajton tie.
Kaj vi vidos tie estas la tre popularaj MIT-permesilo.
Denove, se vi tralegu la tekston, vi povos trovi ĝin en la paĝaro
ni referencita antaŭ kaj povos kompreni ĝin sen devi legi
tra la leĝa slango.
>> MIKE Rizzo: OK, grandaj.
Do jen normaligi.
Ni volis doni al vi ke vere rapide.
Ho, ĉu vi havas demandon?
>> Spektantaro: Do ​​kiam vi elŝutas ĝin, vi nur sekvas tiun kodon, kiun ili havas
sub la Download butonon?
>> Tomáš REIMERS: Jes, tiel kiam vi elŝutas -
>> MIKE Rizzo: Ho, tio estas granda punkto.
Do la demando estis kiamaniere fari Ni efektive elŝuti ĝin?
Do, se ni klaku la ligilon, ni vidas ke ŝi fakte popoj supren
ĉe la fontkodo.
Do fari tion, kion ni povis, cxu oni simple alklaku Konservi Kiel.
Konservi Kiel kaj kiuj devus venigi dosieron.
Kaj tiam ni povas elekti konservi ĝin kiel normalize.CSS.
Kaj tiam vi havus ligi gxin en -
>> Tomáš REIMERS: La sama maniero vi ligas en iu ajn alia dosiero.
Kaj kiam vi ligas ĝin, kio estas granda pri normaligi estas ĝi estos reale
prizorgi pri cxiuj obstinaj labori per sin.
Signifo ke vi ne havas aldoni ajnan klasoj.
>> Vi ne devas fari ion strangan.
Ĝi estos normaligi sen vi fari ion plu.
Jes, vi devas inkluzivi ĝin.
Google Chrome ne respondas.
>> Just a quick flanken -
Mi rimarkis, ni saltis en ĉi.
La resto de ĉi tiu prezento estas tuj estos rapida superrigardo.
Enketo de la bibliotekoj.
>> Esence, kio ili estas.
Kion ili faras.
Kiom ili estas utilaj.
Kiel vi povus apliki ilin.
Se vi volas komenci rigardante ilin, jenaj kune, kaj tralegado
ilin, mi estus tre instigas, ke.
>> Alternative, vi estas bonvena ankaŭ al komenci elŝuti ilin kaj inkludante
ilin en vido nur por vidi kion ili aspektas kiel aux kion ili faros se vi havas
via tekkomputilo antaŭ vi.
Se ne, vi estas bonvenaj por subteni aŭskultas nin paroli.
Ni tuj interparolas.
Kaj ni havas tempon, je la fino, mi esperas ni reale preni en montrante vin
kion iuj el tiuj bibliotekoj aspekti.
>> MIKE Rizzo: Cool.
Enorde, do nun ni parolas pri Tiparo Awesome.
>> Tomáš REIMERS: tiel Tiparo Awesome estas vere neta ejo, precipe por tiuj
el ni, kiuj estas malpli arte talenta.
Ignorante la nomo Tiparo Awesome, donas vi faskon de ikonoj, kiuj estas
tre utila.
Do multe da fojoj vi devos apliki an Ikono vi eble volas kiel belan x tia
ke vi povas fermi ion.
>> Aŭ vi eble volas ian Redakti butono kun krajono desegno kiel
ĉiuj aliaj havas.
Kaj tio estas kiam vi ekscias ke desegni tiujn piktogramojn povas esti
tre teda kaj malfacila.
Tiparo Awesome - se vi vere iru al la retejo -
donas al vi multajn piktogramojn sub la piktogramoj ĉe la supro.
Jes, ĝuste la supro.
Ĝi donos al vi multan de ikonoj senpage.
>> Do jen vi vidas ni havas aferojn kiel asterisko, trinkejoj, fulmo riglilo, a
kalendaro, cimo, libro, kaj tiel plu.
Tiu povas esti tre utila.
La vojo vi inkluzivi ĉi estas vi inkluzivi laŭvorte la CSS-dosiero.
Kaj poste vi jam inkludis la CSS-dosieron: kion vi povas fari estas vi krei
tag nomata I. Ĝi satands por Ikono kun la klaso FA
staranta por tiparo Awesome.
Kaj poste, kion ajn klaso vi deziras.
>> Do, se mi volis ikono de ĉi plus akordi bone ĉi tie, mi donus
ĝi la klaso FA.
Kaj tiam la FA streketo plus streketo kvadrato.
>> MIKE Rizzo: Cool, OK.
>> Tomáš REIMERS: Kaj tiam, la lasta CSS biblioteko ni volas akiri per ni estas
klopodi fari gxin minimuma je CSS bibliotekoj, ĉar ni ja rimarkas la
titolo de tiu prezento estas JavaScript Bibliotekoj.
Sed ni opiniis, ke ni plej bone enkonduki vin en la aliaj bibliotekoj
dum ni parolis pri bibliotekoj.
>> Estas Google Web Tiparoj.
Kaj kio Google Web Tiparoj permesas vin fari estas aldonu tiparojn al via retejo,
kiu estas vere facila maniero por fari ĝin belaj kaj distingi via aro
el ĉiuj aliaj estas se ĝi havas belan tiparo aŭ se ĝi havas belan
kolekto de tiparoj.
Google Web Tiparoj estas bela malkiel aliaj bibliotekoj en la senco ke ĝi estas
vere gvidis instalado.
>> Do se vi sekvu la ligon, ĝi estas google.com / tiparoj, mi kredas.
Se vi sekvas tion, vi povas elekti vian tiparon.
Vi povas elekti sur la maldekstra el dikeco, dekliva, ktp.
Kaj tiam, unufoje vi elektis unu, vi povas klaki rapida uzo.
Ĝuste tie.
Malsupre dekstre de la skatolo.
>> Kaj tiam, rulumu malsupren.
Unue, ili donos al vi la CSS ke vi bezonos efektive ligas al ĝi.
Ĝi estas prava.
Vi povas simple kopii kaj almeti ke in
Kaj la bela afero pri ĉi tiu estas vi fakte ne eĉ bezonas
elŝuti la dosieron.
>> Kio ĝi estas tuj fari estas tio okazas ligi al Google-version de ĝi.
Do reen al kion signifas tio.
Tio signifas, kiam uzanto Elŝutoj via dosiero -
Elŝutoj vian HTML-paĝo - via HTML paĝo tuj referenci tiun ĉi dosieron.
>> Tial, vian komputilon tuj vidas, Ho, estas loĝigita en google.com prefere
ol sur theirsite.com.
Permesu al mi iri demandi Google por ke dosiero.
Kaj tiam, li tuj inkluzivi ĝin preskaŭ kiel se ĝi estus
parton de via propra retejo.
>> Tomáš REIMERS: Cool.
Kaj iam vi inkluzivas tion, tiam al inkluzivi ĝin en vian CSS, tio donas al vi
la reala linio.
Do vi starigis la propraĵo tiparo familio egala al la nomo de via tiparo.
>> MIKE Rizzo: okej.
Do ni ĵus finis kun CSS.
Kaj iuj el vi povus pensi, bone, Ni havis kelkajn CSS sur CS50 Financoj.
Sed CSS biblioteko estis bootstrap.
Ni efektive inkluzivas Bootstrap iom poste sub JavaScript ĉar kun
la Bootstrap CSS biblioteko ankaŭ venas kun amaso da JavaScript ke
Bootstrap aŭ Twitter - kiu faris Bootstrap -
Uzas administri ĉiujn iliajn CSS.
>> Tomáš REIMERS: Ĉu iu havas iun demandojn tiom multe pri CSS ĝenerale?
Ni estas bona?
Awesome.
>> MIKE Rizzo: Awesome.
>> Tomáš REIMERS: Do movas sur JavaScript.
>> MIKE Rizzo: Do ​​ni volis paroli pri jQuery por komenci.
Ĉu iu aŭdis pri jQuery antaŭ aŭ uzis ĝin?
Yeah, paro?
Do, se vi simple labori kun denaska Javascript, vi trovos vin mem
tajpi multajn longajn selectores multe.
Do kio jQuery faras estas ĝi havigas belan wrapper por la Javascript
lingvo kiu permesas facile elekti kaj manipuli malsamaj elementoj
ene de la dokumento objekto modelo de la TTT-paĝo aŭ la DOM, kion mi kredas
you guys auxdis de en prelegi ĉe tiu punkto.
>> Tomáš REIMERS: Se vi ne aŭdis pri ĝin aŭ se vi ne spektis prelegon
tamen, la Dokumento Objekto Modelo trovas esence kiel tion, estas reprezentitaj.
Do HTML ia aspektas kiel arbo kiam vi vere tiros gxin.
Vi havas la HTML elemento sur supro.
Vi havas la kapon kaj korpon.
>> Kaj poste, ene de kiuj vi havi ĉion alian.
Tio nomiĝas la DOM -
Dokumento Objekto Modelo.
Do modelon kiu reprezentas objektoj en La dokumento estas facila maniero por pensi
pri tio.
Kaj unu el la grandaj afero pri jQuery Estas vere faras petolanta
tio kaj manipulanta elementojn ene ke nekredeble simpla.
>> Do simpla, fakte, ke la plimulto de Javascript bibliotekoj aŭ se ne la
plimulto, la granda plimulto de tiuj, vi vidos efektive postulas jQuery tiom
ke ili povas kuri sin simple ĉar se vi ne havas jQuery, vi
devus malŝpari multan tempon klopodi elkompreni kiel elektu iun
eroj kaj kiamaniere fari aliajn aferojn.
Kaj la alia granda afero pri jQuery estas ke ĝi estas kruco retumilo kongruaj.
>> Do memoru reen kiam ni diras ke Ne ĉiuj foliumiloj apliki
aferojn sammaniere?
Ĉi tio estas vera eĉ en JavaScript.
Kaj unu el la grandaj aferoj pri jQuery estas ke gxi detektos la
foliumilo kaj detekti la taŭga metodo.
>> Do se vi volas elekti elementon, Internet Explorer dirus vi estas
supozis fari tiamaniere.
Firefox povus diri la korekta maniero estas tiamaniere.
jQuery ne zorgas.
Kiam vi diros jQuery selekti elemento estos eltrovi kiel ĝi estas
supozis fari ĝin ene de la retumilo la uzanto estas nuntempe en, kaj tiam fari
ĝin tiel.
>> MIKE Rizzo: Do ​​ni ne parolas pri la uzadon de jQuery iomete.
Ĝuste kiel PHP, jQuery havas apartan amon por la dolaro signo.
Do vi trovos, ke iu jQuery -
Nu, ne ĉiuj.
Vi povas iam anstataŭos la dolaro subskribi kun la vorto jQuery.
Sed ĝenerale, simple ĉar ĝi estas mallonga, kiam ajn vi vidas jQuery esti
uzata ĝi estos kun dolaro signo.
>> Do ĉi tie ni nur montrante komenco Elektilo por ero en la DOM.
Tie, ni havas la dolaro signo sekvis per malferma krampo kaj tiam citaĵoj.
Kaj ene de la citiloj iri nian selectores cxar la malsamaj elementoj.
Same kiel en CSS, ni bezonis selectores al povos stiligi malsamaj elementoj
ene de la pagxo.
Tiuj malsamaj selectores traduki ĝuste en jQuery kaj JavaScript,
plejparte.
>> Do ĉi tie ni havas dot foo.
Do, se vi memoras el prelego, la skalara simple signifas la klaso.
Do ni elektu elemento kun klaso foo.
Do, se mi iras antaŭen kaj malfermu niajn Javascript konzolo tie vere rapide
nur pruvi ĝin, se mi simple tajpas la dolaro-signo, oni vidas ke ĝi estas iom
funkcio kiu venas supren.
Kaj ĝi estas simple difinita per jQuery.
>> Tomáš REIMERS: Por tiuj el vi nekonataj, La konzolo estas ilo
ene Chrome, kiu permesas al vi, esence, kuri Ĝavaskripton en la
aktuala paĝo.
Ĉi vi trovos nekredeble utila kiam vi fakte elpurigi kaj vi
bezonas esti kiel, kia estas la nuna valoro de iu malloka variablo aux kion
estas io alia?
Ĝi estas speco de kiel GDB kun la escepto ke vi povas reale
manipuli elementoj sur la paĝo kun ĝin multe pli facila maniero.
Kaj ĝi ankaŭ ne, esence, kontrolu kun vi, antaux ol gxi faras nenion.
>> Do dum kiu, GDB povus esti kiel, estas vi certas ke vi volas lanĉi la sekva paŝo?
La konzolo estas en reala.
Do kiel la TTT-pagxo estas prunti kaj fari kion ajn ĝi estos faranta, la
konsilio de ankaŭ kurante apud ĝi.
Kaj vi povas meti kulpigu kodon en ke konzolon, kiu volas,
oni kuras en la paĝo.
>> MIKE Rizzo: Do ​​por eniri en la konzolo, Mi supozas ke mi devus mallonge
mencii kiel fari tion.
En la lastaj problemojn ke vi havu uzita Chrome la inspekti elemento
funkcioj aŭ rigarda paĝo vikitekston -
kaj tiuj estas atingeblaj nur per dekstra klaki sur la paĝo aŭ de specifa
elemento kaj farante ĉu inspekti elemento aŭ rigarda paĝo fonto.
Ni povas ankaŭ aliri la Javascript konzolo rekte per
elekti inspekti elemento.
Do tiam vi ĵus batis konzolo sur la fora dekstra flanko.
>> Alternative, vi povus esti ankaŭ foriris al la supra dekstra mano angulo,
kio estas ekstermita sur tiun ekranon kie ĝi havas la tri horizontalaj stangoj.
Kaj vi iros malsupren al iloj kaj tiam JavaScript konzolo
tie kie povas vidi -
almenaŭ sur Vindozo -
la fulmoklavo estas Kontrolo Shift J. do se ni volis elekti ero
ene de ĉi tiu paĝo, ĝuste kiel mi montris antaŭe, ni faru dolaro signo malferma parens
kaj do citas.
>> Interesa afero estas, ĝenerale, citiloj kaj duoblaj citiloj estas
canjeable.
Do multaj homoj simple uzi sola citaĵoj ĉar estas rapida entajpi
ol duoblaj citiloj ĉar vi ne faras devas premadu Shift.
Do mi nur faras tion nun.
>> Do mi volas elekti ion kun klaso.
Ujo, nur ĉar mi scias, ke estas iu kiu estas sur nia
retpaĝo nun.
Kaj mi batis Eniru.
Kaj ni povas vidi ke gxi selektis ĝin.
Do ĝi montras supren ke Revenis tiu celo.
Do tio estas baza elekto.
Se ni vere volis manipuli ŝin, vi devus voki ion
sur tiu selektado, kiun ni havos enir poste.
>> Tomáš REIMERS: Do simple por rigardi ke pli profunde, tio ne estas malsamaj
ol la funkcio alvokojn ni faris en C. La nomo de la funkcio ĉi tie estas
iom bizara.
Estas dolaro signo.
Ĝi estas nur nomo de funkcio.
Estas nenio speciala pri tio.
>> Ni havas malferma krampo.
Tiam, ni havas niajn unu argumento, kiun en ĉi tiu kazo okazas esti kordo,
kio estas selector por ĝi.
Kaj tiam, ni havas niajn fermita parentezo.
Estas tio.
>> Ĝi ne estas ke ege malsamaj.
Kvankam, ĝi aspektas tre stranga.
Kaj tio povas esti, speco de, frotado punkto por multaj homoj.
>> MIKE Rizzo: Tiel same, se ni volis elekti elemento kiu havas IRU,
Nun ni volas elekti per ID anstataŭ klaso.
Estus simila afero, kie ni nur faru la akra signo por ID.
Do ni elektu tie la tutan elementoj, kiuj havas ID trinkejo.
>> Tomáš REIMERS: Kaj ĉi etendas.
Tio CSS etendas.
Same kiel en CSS, vi povas elekti la tutan ligiloj, kiuj havas la klaso foo.
Jen, ĝi estas la sama afero.
>> Vi povus fari a.foo, kio estus elekti ĉiuj ligiloj kun la klaso foo.
Vi povus fari akran stangon, kiu farus elektu la ligilon kun la ID trinkejo kaj do
ktp ktp.
Ajna CSS selector estas valida jQuery selector.
>> MIKE Rizzo: Jes.
OK, do nun ni enir iomete de manipulado, ke ni povas fari kun
nia jQuery.
Do jQuery havas apartan tipon de skribmaniero, kie ni simple uzos
punkto ĉe la fino.
Kaj vi povas pensi pri tio kiel en C kiel ni havis malsamajn structs.
Kaj iros en tiuj structs, vi farus uzi dot enir ilin.
>> Tio estas, speco de, simila afero.
Nur nun ni havas funkcioj ene de ĉi selector ke ni povas nomi ĝin.
Do jen, la tre unua ekzemplo vi povas vidi estas la CSS selector.
Kaj esence, kion tiu faras, estas ĝi aplikas la unua elemento de CSS al tiu
afero, kiun vi elektis -
tiu elemento kiu vi selektis -
kun la valoro kiu.
>> Tomáš REIMERS: Do facila traduko de ke estus se jQuery, esence,
nur prenis foo.
Kaj tiam en CSS diris, kolora ruĝa kaj proksima.
Ĝi estas la sama ideo.
Kio ĝi estas farata, ĝi estas selektitaj ĉiuj foo elementoj.
Kaj tiam ĝi estas aplikita.
Ordigi de, la propraĵo koloro estas egala al ruĝa.
>> MIKE Rizzo: Simile, ni povas ankaŭ ŝanĝi La efektiva enhavo de kio
montrante sur la HTML de la paĝo, kiun Estas vere malvarmeta, ĉar ĝi signifas via
retpaĝoj povas nun esti tute dinamikajn kaj ne devas esti statikaj
ke vi presi uzante PHP tuj en la komenco de
la paĝon esti ŝarĝitaj.
Do ĉi tie, se oni volis ŝanĝi la efektiva HTML de la paĝo, ni volus nun
vokas la HTML funkcio, kiu tiam nur enmetas ajn ni specifi en
tiu elemento kiun ni elektis.
Do jen ni elektu elemento kun klaso foo kaj tiam dirante estas HTML
ĝi estas nun saluton mondo.
>> Tomáš REIMERS: Kiam vi opinias pri kio estas utila aplikoj de
tiu, ĉi CSS unu, la unua afero, kiun vi povas komenci pensi estas
en terminoj de eĉ elgutigos menuoj.
Vi povus komenci fari tion kiel, kiam uzanto ŝvebas super la supra parto
de guto malsupren, oni volas fari la malsupran parton videbla.
Ĝuste?
>> Do en CSS, ni havas propraĵoj fari ion videbla.
Aĵoj kiel ekrano dupunkto neniu farus nevidebla.
Vidigu bloko farus ĝin videbla.
Aŭ eĉ se vi volas iri pli simpla, vi havi aferojn kiel videbleco egaluloj
videbla, kaj videbleco egalas kaŝitaj.
>> Kaj vi povus starti al apliki aferoj kiel dolcxan malsupren menus dekstra
post vi ricevas tra la ideon de kiel ĉu vi povas diveni, kiam tio malfermiĝas,
kiun ni devos trairi tre mallonge.
Sed ni povas komenci vidi aplikoj de ĉi.
En simila senco, se vi estus por provi kaj efektivigu, ni diru, la babilejon
motoro kaj vi volas fari iom parolado bobelo supreniru kiam vi havas
havas novan mesaĝon, iam vi havos la novan mesaĝon, vi povas fari iom
parolado bobelo supreniru ŝanĝante la HTML de la paĝo, dekstre?
Per aldono de tiu ekstra parolado bobelo kun la ekstraj teksto en tie.
Jes?
>> Spektantaro: Do ​​vi devus enmeti ĉi ene la HTML-kodo en ia kiel
[Inaudibles]?
>> MIKE Rizzo: Ĝuste.
Jes, ni ricevos por ke en iomete.
Jes, estas simila a iomete al PHP.
Ne precize simila.
>> Bona distingo fari kion ĉi Efektive oni redaktas dum ni redaktanton
la paĝon ĉar ĝi ne estas tuj estos redaktado de la reala dosiero kiu estas estante
tenis ĉe la servilo pro tio la mondo ne devus havi permeson
redakti viajn dosierojn.
Tiu estas ĝuste redaktado kio estas sur la paĝo kaj kio esti montrata ene
la retumilo.
Do se vi estus al reŝarĝi la paĝon post kiam, diri, viŝante ion kiel ni
Vidu, ni povas fari kun la Elpreni alvoko, ke afero devus tiam reaperas.
>> Tomáš REIMERS: Do unu maniero pensi tio estas, se mi estas via komputilo kaj
Mike estas, speco de, la servilo.
Kio okazos Estas Mi tuj demandi Mike, hey, mi povas havi kopion de
tiu retpaĝo?
Kaj li donos al mi kopion de ĝi.
>> Ne, tio ne estas la originalaj afero.
Estas nur skribmodelo.
Kaj tiam ĝi estus kiel, oh, ne estas JavaScript tie.
Klare, mi devas redakti la pagxo esti kiel ĉi tio.
Kaj mi redaktas vian kopion.
>> Sed tio ne effecting la efektiva kopion.
Kaj se mi petos lin denove refreŝigi la paĝon, -
bona, mi povas havi alian pura kopio -
Li tuj donu al mi alia pura kopio.
Kaj poste, mi faros la samon kiel, oh, tio JS tie kiu diras
redakti ĉi.
Kaj mi tuj daŭre fari tion.
>> MIKE Rizzo: Do ​​vere malvarmeta afero ke vi povas fari kun jQuery estas
efektive aldonu malsamaj tipoj de kuraĝigojn al via paĝo.
Mi ne scias se vi iam vidis kie vi provas kiel plenigi formularon
linio kaj vi ne plenigu tion korekte.
Do iom afero glitas malsupren ĉe la supro kaj diras al vi
ne faris tion ĝuste.
Bonvolu reprovi.
Kaj poste, eble eĉ nur gliti supren.
>> Rezultas jQuery konstruigis en funkcioj kiuj faras ĉiu el tiu
kuraĝigo vere, vere facila.
Do tie estas unue la fade el funkcio, kiu
vi povas voki sur io.
Kaj ĝi estas maniero ŝanĝi la CSS de tiu elemento en vigla maniero.
Do necesas ajn elemento vi nomas ĝin fade out plu.
Kaj poste, malrapide ŝanĝas ĝia opakeco ĝis ĝi iras tute travideblaj.
>> Tomáš REIMERS: La alia populara estas gliti suben, kion faros
io aperas por glitante ĝin malsupren.
Do, en la kazo de la falmenuo, denove, kiam ni lernis kiel detekti
Kiam ĉi tiu estis ŝvebis super, vi povus nur rakonti ĉi malsupro
parton gliti malsupren nun.
Kaj tiam, ĝi aperus per glitante malsupren.
>> MIKE Rizzo: Kaj do, se vi nur havas iu tipo de kuraĝigo en menso kiu
jQuery ne nepre provizas.
Ekzemple, ni diru jQuery provizas vin per tobogano
malsupren kaj glito supren.
Nu, ni diras, ke vi volis gliti io en la maldekstra aŭ en de
la dekstra klaso de kiel la CS50 ĉefa paĝo faras kiam ajn
vi iru al nova panelo.
Vi devus tiam probable devas apliki ĝin vi mem uzante la
animi funkcion ene jQuery.
>> Do simile, vi simple animi.
Kaj tiam, en ĝi prenas vortaro de la diversaj valoroj
ke vi supozis tion.
Do ĉi tie, se ni volis animi la elemento foo tia ke ĝia larĝo ĉu
ekspansiiĝas aŭ kontraktojn al 80 rastrumeroj, depende de kio nuntempe estas.
Ni estus nur preterpasonta kiel la argumento en ĝi.
>> Animi ankaŭ havas kelkajn aliajn argumentojn ke vi povus pasi ĝin, ekzemple,
La rapido de la kuraĝigo ke vi volas doni al ĝi.
Kaj fari tion, mi estus nur diru rapide Google jQuery animi.
Kaj tiam, disvastigante tiun paĝon, vi povas vidu'S ricevis faskon da malsamaj
propraĵoj kiuj vi povas pasi ĝin.
>> Kaj mi kuraĝigas vin - kiam ajn vi venos trans ion ke vi ne faru
konas aŭ simple volas lerni pli pri aparta metodo kiun vi povas nomi
sur io -
nur Guglas ĝin. jQuery estas ege bone dokumentita.
Kaj ofte tempoj ekzistas multe da ekzemploj, ke ili provizas por vi.
Se ni rulumu malsupren -
vojo malsupren -
ke ni povas uzi, kiel bone.
>> Denove, kiam developer reale iras tra la penon skribi
biblioteko, ili tipe volas ke iu uzas ĝin.
Do apud tuj esti dokumentado.
Kaj tiu dokumentado povas kutime esti trovita en la projekto paĝon, kiu estas
kial ni donis al vi ke originala loko en la komenco, kiu ligas vin al la
projekto paĝojn tiel vi povas vidi ke dokumentado.
>> Tipe, la projekto-paĝon en la kazo de [inaudibles], ĝi parolis al vi la
nomoj de la klasoj.
En la kazo de JavaScript, tio donas vi la nomon de la funkcioj.
Parenteze, se ni rulumu supren al la supro, rapida flanko noton sur funkcioj estas
kiam vi vidas funkcio implementado kiel tiu kun la malmola
krampoj en la mezo, kiuj per ke tiu propraĵo estas nedeviga.
Nur kapoj supre.
Mi vidis amason da demandoj pri tio.
>> Do ĉi tie oni povas vidi, ke la animitajn prenas propraĵoj
kiel necesa argumento.
Kaj ĉio alia estas nedeviga.
Flanka noto -
vi povas pensi pri tio, varo de, kiel homo paĝoj.
Viro paĝoj estas dokumentado por C kaj cxar multe da aliaj aferoj, tiel.
>> MIKE Rizzo: Do ​​ni jam lernis kiel ŝanĝi malsamaj CSS sur la paĝo,
animi, kaj forigi aldoni HTML.
Sed unu el la vere plej potenca aferojn pri JavaScript
kaj speciale jQuery -
kio permesas fari estas respondi al malsamajn elementojn kiuj okazas.
Ekzemple, ĉi tie ni havas okazaĵo traktilo.
Kaj tio nur signifas, kiam ajn tio evento okazas, ni manipuli ĝin en
certa maniero.
>> Do jen, la ĝenerala jQuery okazaĵo traktilo estas la skalara plu.
Kaj tiam, la unua afero, kiun vi donis estas kio okazaĵo devus
esti aŭskultante por.
Do ĉi tie, ĝi estas la klako ke ni atendis.
>> Tomáš REIMERS: Alternative, vi havas sur ŝvebado, kiu estas tre populara.
Do reen al mia falmenuo ideo.
Vi havus la plej supra sur ŝvebado.
Kaj tiam vi povus ŝanĝi tion.
>> MIKE Rizzo: Ĝuste.
Kaj tiam, kiam tio okazas, ĝi nur ekzekutu tiun funkcion, ke ni donu al ĝi
kiel argumento kaj ke garde saluton aŭ hi.
>> Tomáš REIMERS: Do, en la kazo de JavaScript, tio estas loko, ni bezonas
forigi nin de C. Ni povas reale preni funkciojn kiel argumentoj.
Kaj ekzistas amaso de vere kompleksa manieroj por fari tion.
Ni iras al promocii unu vojon, kiu estas oni povas difini la
funkcii ĝuste tie.
>> Do, kiam vi petas por funkcio kiel parametro, vi estas esence nur
tuj difini la funkcio surloke.
Kaj la vojon vin difini funkcio en JavaScript estas vi
laŭvorte diras funkcio.
Tiam, kutime, la nomo de la funkcio.
Sed ni neniam tuj referenci ĉi funkcio denove.
Do ni lasos ŝin sen nomo.
>> Tiam la krampoj, tiam la krispa krampoj, kaj poste la kodon ene de tiu.
Do ni komprenas ĉi tedaĵo esti iom konfuza.
Do ni donos al vi la ĝeneralan formon de kia okazaĵo traktilo aspektas kiel
malsupre, kiu estas sur okazaĵoj.
Kaj tiam, via kodo interne tio.
>> MIKE Rizzo: Ĉu ekzistas demandojn pri tio?
Tio povas esti iom malklara la unua fojo vi vidos.
>> Tomáš REIMERS: Vi vere volas malfermi dosieron kaj montri al ili iom
jQuery ĝuste nun?
>> MIKE Rizzo: Jes, ni faru tion.
OK.
>> Tomáš REIMERS: Do nun ni estas en la aparaton.
Kaj kion ni jam faris estas ni faris la libereco de krei samtempe index.html
dosiero, kiu kunligas JavaScript-dosiero.
Kaj ni povas malfermi la -
yeah.
Nu, tio faras du aĵojn.
>> La unua estas ligiloj al la JavaScript-dosiero.
Kaj ni vidos ke ĝis ĉi tie.
Ni vidas, ke en la kapo de la HTML-dokumenton, aparte.
Do vi vidos tie ni, esence, diru SRC,
kio staras por fonto.
Kaj tio estas la retadreso.
>> Do ĉi tie oni povas diri ke ni inkludis jQuery.
Kaj ni ankaŭ inkludis skriptoj.
La alia maniero por inkluzivi JavaScript estas ke vi povas inkludi inline skripton
tag kiel ni havas ĉe la malsupro kie Diras skripto tipo estas teksto JavaScript.
>> Do ni diri, aŭskultu, ni estas pri inkludi skripton.
Kaj la tipo de tiu skripto estas Javascript, kiu estas tipo de teksto.
Tre simpla.
>> MIKE Rizzo: Do ​​tiu, speco de, alvenas al via demando pri kiel ni inkluzivi
Javascript en nia dosierojn ĉar kiam ni estis PHP, ni faru ion kiel ĉi tio.
Kaj tiam, niaj PHP funkcioj - diru akcioj fari
ion kun tiu -
iras tien.
Tamen, nun ni havas la skripto-etikedoj ke ni donu al ĝi, kiuj estas efektive
parto de la HTML mem ĉar ĝi ne estas ŝajnigi esti HTML dosiero ŝatas ĝin
estas en PHP ĉar se vi vere iru en kaj rigardu la fonton de la paĝo,
vi vidos tiujn skripto etikedoj tien kun la Javascript asociita kun
ilin en tio.
>> Tial do, se ni volis skribi iun JavaScript -
ni simple diri, ni volis ŝanĝi korpo ĉar ĝuste nun mi ne havas
iu ajn alia etikedoj ke mi povas vere redakti krom korpo.
Ni nur diras, ke mi volis ŝanĝi la CSS de tiu.
Do ni iru antaŭen kaj ŝanĝo la koloro de ĝi al ruĝa.
>> Do mi savu la dosieron.
Ni reiru al nia retpaĝo, rekalkuli, kaj tio faras ĝin aŭtomate
ĉar ĝi ne ŝajnis kiel ĝi atendis ĉe ĉiuj ĉar ni ne aŭskultas
pro okazaĵo aŭ io kiel tio.
>> Tomáš REIMERS: Do, se ni reiros al tiu dosiero aparte - la HTML
dosiero - kion vi iras vidi estas ni havas -
memori, ke tiu estas ŝarĝita, ia, kronologie.
Do ni devas unue la kapo. ŝarĝas tiuj du dosierojn.
Poste ni iros al la korpo.
Kaj ni vidos saluton mondo.
Do ni redonu saluton mondo.
>> Kaj tiam la lasta afero, kiun ni havas estas ni havas la skripto etikedo.
Do ĝi kuras la skripto tag ĉar ĝi estas Ne rakontante atendi nenion.
Kaj tiu estas la plej baza vojo kuri JavaScript.
>> Kun kiu diris, vi povas meti la skripto etiketoj en la kaplinio nur
por montri ĉi punkto?
Kaj kuras tio.
Ni tuj rimarkos ke tio ne ŝanĝas la koloron.
Kaj tio estas unu el la problemoj de Javascript estas ke aferoj estas ŝarĝita
en kronologia ordo.
>> Do, je la tempo, ke tiu kodo kuris, ni selektis -
reiru -
la korpo etikedo.
La korpo etikedo ne ekzistanta ĉar Javascript estas en linio kun HTML.
Do la retumilo estas kiel unuaranga korpo.
Tie estas nenia tia aĵo ankoraŭ.
Do ni povas ignori tion.
Kaj ni plu iri.
>> Kaj tiam ni difini korpo etikedo.
Sed tio neniam gets ĝisdatigita.
Do kiam vi efektivigo skripton etikedoj, certigu vin meti
post la korpo etikedo.
Sekva glito.
>> MIKE Rizzo: okej.
Do ni ŝanĝis ion.
Sed tio tute ne aspektis kiel ĝi respondis al nin ĉe ĉiuj, ĉar ĝi nur speco de
faris ĝin tiel frue kiel ĝi ŝarĝas la paĝon.
Do nun, anstataŭ fari tion, kial cxu ne ni aldonu evento traktilo.
>> Do ni faru ion al la korpo denove.
Kaj ni diras, ke ni faru ĝin -
klaku.
Ni devos aldoni funkcion.
>> Tomáš REIMERS: Ni ŝanĝo ĝi estas koloron al ruĝa denove.
Kial ne?
>> MIKE Rizzo: Jes, ni ŝanĝo ĝia 'koloron al ruĝa denove.
Ĉiuj pravas.
Do ni reŝarĝi la paĝon.
OK, ni vidas -
kiel atendita, ne rezultas ruĝa ankoraŭ.
Sed tiam ni povas iri antaŭen kaj alklaku ĝin.
>> Tomáš REIMERS: Kaj ĝi turni ruĝa.
>> MIKE Rizzo: Kaj jes turni ruĝa kiel atendita.
>> Tomáš REIMERS: Kaj ni povas vidi kiel Ni povas komenci konstrui tre baza
interago.
Aliaj aferoj ni volus fari estas, se ni ne volas fari la korpon
kolora ruĝa, ni faru la HTML fonkoloro ruĝa.
Ĝuste tiel ĝi estas la sama CSS.
>> Kaj kiam ni ŝanĝas ĝin, ni povas vidi ĉi tre drama efiko de ŝanĝi la
tuton de la paĝo.
Do denove, se vi efektivigo aferojn, vi povas havi unu komponanto
kio estas intencita al esti alklakita.
Diru al Eliro butonon kaj tutan alia komponanto,
kio estas intencita por respondi.
Do vi devus forigi fenestron kiam tiu okazas.
>> MIKE Rizzo: okej.
Nur kiel ekzemplo -
vi ne alvenis al vidi ĉi pli frue -
Mi nur montros al vi kion ĝi aspektas plaĉas kiam oni kaŝis ion.
Do mi devos iri antaŭen kaj ne gliti supren.
>> Tomáš REIMERS: Volas wrap ke en alineo tipo antaŭ ol ni faras tion?
>> MIKE Rizzo: okej.
Jes, kial ni ne faru tion ĝuste tiel ni povas elekti ĝin iom pli.
>> Tomáš REIMERS: Kaj ni donu ŝin al klaso.
>> MIKE Rizzo: Jes.
OK, do ni vidu.
Anstataŭ elektante la efektiva korpo nun, mi nur elekti ĉiun kun
klaso saluton, kiuj ĉi tie ni nur unu aferon.
Do ni ne devas zorgu pri tio.
>> Do mi devos refreŝigi ĝin.
Mi iru antaŭen kaj alklaku ĝin.
Kaj tio, ia, faris bizara slide supren afero, kiu ne aspektas ke
alloga.
Ĝenerale, ili aspektas bela agrabla.
Mi divenas, tiu - por iuj kialo - ne.
Mi nur faras fade out tiom vi povas rigardi ke tro.
Multe pli bela.
>> Kaj poste, se mi malfermos la Javascript konsoli denove kaj ni volas vidi, kion
Ĝi aspektas kiel kiam ni forvelki it in
Nu, mi simple vokas forvelki sur ĝi.
Kaj ĝi velkas re-ensalutu
>> Simile, ni povus efektive ankaŭ pasas argumento por forvelki aŭ fade out,
kio estas, speco de, la rapido de ĝi.
Do ni iru antaŭen kaj diras, ke ni volas lin iri malrapide forvelki in
Do mi supozas ke ankoraŭ similis bela rapida.
Sed estis pli malrapida ol antaŭe.
>> Tomáš REIMERS: Se vi volas trovi pli pri ĉi tiuj aferoj, denove,
nur iri al la jQuery dokumentado, kiun ni donis al vi, kaj legu
tra tiuj.
Ili dokumentas siajn funkciojn nekredeble bone.
>> MIKE Rizzo: okej.
Do mi supozas ni revenu al tio.
Kaj ni povas paroli pri nia lasta paĝo.
Nu, ni povas fini kun Bootstrap.
Kaj tiam ni devos malfermi ĝin por kelkaj demandoj.
Kaj se vi uloj havas neniun ideoj kiuj vi ŝatus provi ĵeti supren, kaj vidu
se ni povas apliki ilin kun Javascript rapide.
>> Do vere rapide pri Bootstrap, kiuj estis aŭtomate inkluzivita en
via lasta problemo metita en la CSS-dosierujo kaj reale ligita al en via
header.PHP.
Do vi povus esti aldonita klasoj kiuj estas difinita ene Bootstrap al ĝi.
Kaj tio estus aŭtomate styled tiuj aferoj laŭe.
>> Tomáš REIMERS: Do Bootstrap estas tre magia afero estas kreita de la homo
ĉe Twitter.
Kaj kion ĝi signifis fari estis -
antaux retejoj estis vere malfacile fari aspektas bela, precipe kiam ni havis
multe da komunaj eroj.
Do multe da butonoj en la retejo rigardis la sama.
>> Multa teksto kampoj povas esti farita al aspektas pli bone ol la norma teksto
kampo vi probable scias el vere malnovaj retejoj aŭ vere malbone farita
TTT-ejoj, kiuj apenaŭ aspektas kiel laŭvorta teksto skatoloj sen ajna formo de teksto
ombro aŭ ia ajn bela konturo.
Do kio Bootstrap faris estis ĝi diris, estas bone, Ni havas multon komunan stiloj.
Kial ni ne faru unu komuna aro de CSS kaj komuna aro de JavaScript kiel
nu, kio povas stiligi ĝin kiel estas kaj kio povas doni homoj aĵojn kiel guto
malsupren menus, kiu povas doni al homoj aĵoj kiel modals.
>> Modala estas kion popoj super la paĝon kiam ajn ĝi estas strikte parolante
io, kiu detenas plui interago ĝis vi
interagas kun ĝi.
Io kiel ĉi tio, ĉu vi certas vi volas forigi ĉi tiun aĵon?
Vi ne povas vere fari ion alian ĝis vi diros jes aŭ ne.
>> Necesis ĉion ĉi kaj tio pakitaj ĝi kune kaj diris: ĉi tie ni iru.
Homoj povas nun uzi ĉi.
Kaj vi povas trovi ĝin sur ĉe getbootstrap.com.
Ĝi aŭtomate inkludas ene via lasta problemo metita.
Kaj vi estas pli ol bonvenaj uzi ĝin en via fina projekto.
Kaj se vi volas sekvi tiun ligas akiri Bootstrap.
>> Vi vidos tie estas la Bootstrap CSS-ejo.
Vi vidos Bootstrap.
Kaj se vi rulumu suben, vi vidos kiel elŝuti ĝin, kiel
instali ĝin, kaj tiel plu.
>> MIKE Rizzo: Kaj vi povas ankaux, Interese, personecigi ĝin
estos ajn specon de temoj ke vi deziras.
Mi scias, ke estas io mi faris por mia fina projekto, kiam mi prenis la klaso
Estis personigi ĝin.
Malsama versio de Bootstrap ke havis malsaman koloron skemo kaj
diversaj formoj de iu malsamaj aferoj.
Mi do kuraĝigas vin ludi kun tio.
Ĝi estas speco de amuze fari.
>> Tomáš REIMERS: Rigardante tra la supron denove, ĝi estas tre simila al la Tiparo
Awesome ejo.
Multa dokumentado komenciĝos ŝajni simila kiam vi havas
vidis sufiĉe de ĝi.
Do ĉi tie ni havas la CSS komponanto de ĉi.
Kaj vi vidos kiel gxi povas stiligi aferojn.
Do, se vi klakas sur la tabeloj, por ekzemplo, vi povas tuj fari
tablo bela per simple aldonante la klaso tablo al ĝi.
>> Sama por cxi butonoj.
Se vi simple aldonu la klaso BTN kaj BTN default aŭ BTN primara, vi povas
akiri iun el tiuj butonoj kun tiuj antaŭ-farita stiloj.
Kaj tiam, se vi serĉas ion pli kompleksa ol simple
restyling kion w jam havas, trans la Javascript langeto trans la supro ni
havas faskon de komponantoj.
>> Do ĉi tie ni havas transiroj, modals, dropdowns, taboj kaj konsiletojn.
A tooltip estas kion popoj supren sub via muso, kiam vi ŝvebi je io.
Popovers, garde, butonoj, faldeblan akordionoj estas kion
ili estas kutime nomata.
Carousels, kiu flip tra kiel bildoj.
>> Do tiuj estas la komponantoj de Bootstrap.
Mi kuraĝigas vin tre iru rigardi ilin.
Tie estas JavaScript komponanto kaj CSS komponanto.
Sentu vin libera uzi ilin kiel vi volas.
Ni ne tuj iru tro multe en ilin ĉar ni sentas la dokumentado
estas vere bone farita.
Kaj jes.
Ĉu vi havas ajnajn demandojn pri tio?
>> MIKE Rizzo: Do ​​kiel estas vere rapida flanko, la dezajno de ĉi tiu retpaĝo, ke
Ni rapide kunmetis por tiu prezento estas
efektive farita uzante Bootstrap.
Kiel vi povas vidi, kiam oni klaku sur tiuj malsamaj langetoj, ni neniam vere
lasante tiun fluon index.html paĝo.
Do kion ni havas estas malsamaj divs ene de ĉi index.html.
Kaj tiam, kiam ni alklakas malsamajn langeton, ĝi estas ĵus ŝanĝanta
kiun onia ekmontrigxo.
>> Do ĝi laŭe positions ilin, ŝanĝu la HTML de la paĝo, por ke
la nunan langeton estas markita kiel aktiva tiom aperas malsame kaj rigardojn
vere bela.
>> Tomáš REIMERS: Por ke la tuto farita sen ni skribas preskaŭ ajnan CSS.
Ni ankaŭ vidas kaplinio trans la supron, kiu la koloroj estas per ni.
Sed la efektiva metante ĝin sur la supro de la paĝo kaj farante
ĝi skribrulaĵon estis Bootstrap.
Kaj tiam eĉ por alia biblioteko - tiu ne estas unu parolis pri nur unu
vi povas Guglas se vi volas.
Tio nomiĝas prettify.js.
Kaj tio estos la sintaksan kolorigon via kodo cxar vi uzas ambaŭ CSS kaj Javascript.
>> La lasta afero ni volas paroli pri antaŭ ol ni liberigos vin en la
mondo rigardi bibliotekoj elkompreni kiel uzi ilin kaj, espereble,
legu dokumentaron kaj trovu kion vi bezono estas kiel trovi bibliotekoj.
Do la unua estas ke ni estas apenaŭ tuj puŝi Google.
Iru al Google.
>> Tio laŭvorte kion ni faros kiam ni bezonas fari ion estas ni Google.
Is there a JavaScript biblioteko kiu mi permesas manipuli tempon en
utila maniero?
Do, se mi scias ke kelkaj uzantoj kreis konton tie, kaj tio estas la
nuna tempo, kiom mi povas kalkuli la malsamojn kompare kun tio, sen devi
kalkuli mem?
Do tiu estas efektive komunan aferon, Javascript tempo biblioteko.
Kaj tie ni Moment.js-- la plej populara.
>> Se ni bezonas bibliotekon por manipuli iu kiel koloro por povi
generi faskon de hazarda koloroj -
eble, por generi stilo aŭ io -
ni povis Guglas iu kiel Javascript koloro biblioteko.
Kaj mi certas ni pop kun mil kaj unu el ili.
Vi plene rajtas tralegi ilin.
>> Do plej aferoj - kiam vi trovos ilin - iras esti loĝigita en unu el la
ejoj kiujn gastiganto kodo.
Ili estas kelkaj popularaj.
La plej popularaj, per nun, estas github.com.
Kaj se vi iros al GitHub ĝi estas reale kie normaligi estis gastigita.
Do se vi volas reiri al tiu.
Montru ilin ke.
>> MIKE Rizzo: Kaj tio estas efektive kie tio estas loĝigita tro, se vi rimarkis.
>> Tomáš REIMERS: Jes.
Do, se vi transiras, por normaligi kaj iru al la GitHub.
Ĉu estas kiu?
>> MIKE Rizzo: Tio kateto afero Estas la GitHub simbolo.
>> Tomáš REIMERS: Ho.
Do GitHub uzas metodon nomitan Git al vendejo kodo.
Ĉu vi ne scias, kio tio estas aŭ ĝi timigas vin, ke estas bone.
Vi ne bezonas scii kion Git estas ĉar GitHub havas Elŝutu butono
ĉe la malsupro pravas.
>> La alia utila afero scii pri GitHub estas plej produktoj
havos legas min.
Kaj se ili ne havas retpaĝon, la legu mi reparolos pri tio, kiel vi
instali ĝin, kiel vi uzas ĝin, kio faras, kaj tiel plu, kaj tiel plu, kaj tiel plu.
Kion ni esence estis promenante vi tra.
>> MIKE Rizzo: Interreto La lasi.
>> Tomáš REIMERS: Tio estas bone.
La lastaj du aferoj ni volis paroli pri -
Ni parolis pri Git -
Estas troubleshooting.
Kaj ĉi tiu ne estas tiel gravaj por La fina produkto kiel ĝi estas
kiam vi lasos 50.
Kaj kiam vi kuros en produktoj efektivigo bibliotekoj aŭ efektivigo
via propra projekto, vi tuj havi demandojn aŭ vi estas
iri por serĉi demandoj.
>> Denove, Guglas ĝin.
Tio laŭvorte kion ni faros.
Tiu tuj sonos stulta.
Sed laŭvorte, ni Guglas ĝin.
Kaj cetere, unu el la unuaj aferoj vi kutime kolizii estas
stackoverflow.com, kio estas mirinda demandon kaj respondon vidpovon.
>> Estas mirinda tiel ĉar vi povas sendi al la demandoj kaj serĉi
respondoj sed ankaŭ ĉar gxi jam havas multajn
pre-popolita enhavo tie.
Do kutime kiam vi Guglas programado demando ene de la unua
paro batas vi eble jam kuras en ĝin dum via problemo aroj.
>> Kaj tiam, la lasta vere mallonga afero Estas JSFIDDLE, kiu estas - hodiaŭ ni
estis faranta multe da laboro kun Javascript HTML CSS.
JSFIDDLE estas ttt app, kiu esence permesas preni viajn HTML, VIAJ
Javascript malsupro maldekstro, kaj vian CSS supre dekstre.
Kaj tiam ĝi povas krei rapidajn redonu de ĝi kaj vidi kiel ĝi interagas.
Ĝi estas tre utila, kiam oni provas fari pruvo de koncepto kiel
jen kiel vi volas fari falmenuo.
Eble rapidan malkovri aŭ kio ajn.
>> MIKE Rizzo: Do ​​ni iru antaŭeniris kaj klaku ĉi.
Rapida noto -
dum, antaŭ ni estis faranta je alklako.
Rezultas JCorey Koreio havas ankaŭ konstruita en klako eventa traktilo ke
uzas nur ĉar ĝi figuras vi estas tuj volas fari multon
kiam vi volas klaku ion.
>> Simile, tio ankaŭ havas ŝvebado.
Sed por ricevi la plenan atingon de tiuj, rigardu la jQuery
dokumentado kaj agu.
Mi faris iom stulta tie.
>> Tomáš REIMERS: Do mi havas vere rapida programo ĝuste ĉi tie, kion diras
butono sur klako.
Tiam ni havas por buklo.
Por i estas malpli ol 404.
Ĝi estas ĝuste tuj pop up tiuj garde mesaĝoj.
>> MIKE Rizzo: Kaj kio estis la kodo 404 staris en HTML?
Ĉu iu memoras?
Ne troviĝas, dekstre.
Chrome ankaŭ aldonis ĉi neta afero, kie vi povas -
>> Tomáš REIMERS: Pro homo kiel Mike komencis fari ĉi tiun multe kaj
ĝena uzantoj, kiu permesas vi vidi informoj.
>> MIKE Rizzo: Jes.
>> Tomáš REIMERS: Ĉu ni havas demandojn pri tiu, pri JavaScript
bibliotekoj, trovante bibliotekoj, aŭ kio ttt evoluo rigardojn
kiel en la reala mondo?
Ni kuras kontraux tempo.
Do mi ne certas ni iras havi tempon por apliki
krom se ĝi estas vere rapida.
Ĉu ni bonon?
>> MIKE Rizzo: Anything you guys ŝatus vidi vere rapidis, kiel, du
minutoj aux malpli?
>> Tomáš REIMERS: Anything Ni povas klarigi?
Kiel skribi en -
>> Spektantaro: [inaudibles]?
>> MIKE Rizzo: Jes, do that's -
>> Tomáš REIMERS: Vi povas nur bati Kontrolo-Aŭ en la paĝo.
>> MIKE Rizzo: Ho, mi ne sciis tion.
>> Tomáš REIMERS: mi pensas, jes.
Kontrolo-U. Jes.
>> MIKE Rizzo: Oh, tiom tio estas la kodo por la retejo.
Sed se vi efektive volas elŝuti niajn dosieroj kaj ĉio, ĝi estas loĝigita
sur github.com
>> Tomáš REIMERS: oblikvo mia nomo -
Tomas Reimers - oblikvo CS50 streketo seminario.
>> MIKE Rizzo: Kaj vi povas trovi ĉiun tie.
>> Tomáš REIMERS: Jen kion GitHub aspektas kiel, dum la vojo.
Do denove, kiam vi vidos malfermita fonto projekto, tipe, ili devos esti legitaj
Mi ekzistas, ke vi povas legi.
Kaj se vi reiros, vi rimarkos, ke vi havas la elŝuta zip, kiu volas,
vi permesas elŝuti la fonto kodo por inkludi la
produkto en via propra afero.
>> MIKE Rizzo: Jes, kaj se ni simple klaku sur la index.html vere rapide -
>> Tomáš REIMERS: Vi vidos ĉi tie estas la fontkodon por nia retejo.
>> MIKE Rizzo: Ankaŭ, mi forgesis premi dekstra antaŭe kun la granda tablo
inkluzivita, sed estas ankaux tablo de chmods ke ni inkludis
nur pro via klareco.
Sed se ni rulumu tutan vojon malsupren al la fundo, ni ne vere faras tre
tre kun la Javascript frandajxojn cxe cxiuj kun tio.
Ĝi estas ekskluzive el ĉio alie, ke ni havis.
>> Do dankon infanoj por veni kaj aŭskultante.
Ni esperas ke tiu estis vere helpemaj.
Se vi havas ajnan JavaScript rilatajn demandojn aux nur volas paroli pri
kio alia kiel kion aliaj cool aferoj vi povas fari per JavaScript, ni amus
paroli kun vi.
>> Tomáš REIMERS: Se vi havas demandon pri via projekto, aŭ se tio povas esti
adekvata, ni probable algluita ĉirkaŭe iom post tio.
Sed alia ol tio, havi bonan semajnfinon.
>> MIKE Rizzo: Jes, ĝui.
See you guys.
>> Tomáš REIMERS: See ya.