>> TOMAS Reimers: Hi, everyone.
Mənim adın Tomas Reimers.
>> MIKE Rizzo: Mən Mike Rizzo deyiləm.
>> TOMAS Reimers: Biz CS50s TS iki.
Bu gün biz də seminar aparıcı edirik JavaScript və web applications üçün CSS.
Siz birlikdə izləmək istəyirsinizsə, link sağ üzərində var.
Və siz onu qoymaq istəyirəm kompüter qısaca haqqında?
>> Link var.
Bu bağlantılar olan kiçik site var biz olacaq bütün resursları
bu gün sizə işarə və bir çox var bizim yazılı faydalı informasiya
geri getmək zaman dərinliyi daha ətraflı və yadda çalışdığınız nə
məhz biz sizə nə demək idi et Cetera söhbət.
>> MIKE Rizzo: Bütün hüququ.
Belə ki, in başlamaq bildirin.
>> TOMAS Reimers: Beləliklə, siz başlamaq istəyirsiniz?
OK.
>> MIKE Rizzo: Bəli.
Beləliklə, biz ilk geniş ilə başlamaq istəyirdi internet haqqında ümumi və
web dizayn zaman növləri fayl.
Bu təqdimat biz istəyirik baxmayaraq JavaScript bir çox çox almaq
sonra, biz ilə başlamaq istədi yalnız cür, kimi bir quş göz görünüşü
nə bir haqqinda və necə bir dizayn düşünmək
başlanğıc üçün haqqinda.
>> Bu nöqtədə Belə ki, uşaqlar, - bu Cümə gecəsi olan - olmalıdır
Sizin CS50 maliyyə təqdim problem edir.
İnşallah, yaxşı bir dad idi nə web proqramlaşdırma ola bilər.
Lakin burada biz, mehriban, vermək istəyirəm Başqa bir dad, həmçinin.
>> TOMAS Reimers: Belə ki, yalnız nə recap Siz URL yazın zaman olur
web browser ki, URL olur kompüter baxdı.
Və kompüter bağlı başqa kompüter,
ki, veb keçirilir.
Siz google.com getmək zaman OK, belə ki, siz Google-nin biri ilə bağlı
olan kompüterlər, google.com üçün faylları.
>> O xüsusi bir fayl üçün xahiş edir.
Belə ki, əgər siz getmək -
Mən bilmirəm -
example.com / index.html və ya / test.html, Sizin üçün xahiş olacaq
xüsusi fayl.
Və web server gedəcək sizə qayıtmaq üçün.
>> Sonra, siz ki, fayl yolu ilə getmək bir dəfə -
siz bir dəfə kompüter olur ki, fayl - bu başlamaq olacaq
bir web page qurmaq.
Belə ki, indi bu HTML fayl var, sort kimi olan
web page strukturu.
HTML faylı da istinad edə bilər Bu müəyyən olan CSS faylları,
web page stil.
>> JavaScript faylları, müəyyən edir web səhifə ilə qarşılıqlı.
Yalnız images olan Image faylları.
Və bəlkə, digər HTML faylları keçid siz sonra edə bilərsiniz.
>> MIKE Rizzo: OK, böyük.
Belə ki, uşaqlar, bəlkə də, bütün var əziyyətlə yerli host qurmaq
Sizin virtual maşın.
Və yalnız, cür, yerli edir Sizin kompüter yalnız ev sahibliyi edən domain
öz IP ünvanı sizin üçün.
>> Belə ki, sonra əlavə edə bilərsiniz onun öz web pages.
Mən demək, CS50 Maliyyə, siz olmalıdır olan əlavə bir HTML pages,
sort, PHP banderol bükülmüş.
Amma nəticədə, nə PHP pages tipi edildi HTML idi.
>> Amma əvvəldən geri düşünür Bu PSET, biz müəyyən idi
hər şey üçün icazələrin, sağ?
Belə ki, bu yalnız əsasən bizə imkan verir bəlkə, oxumaq, yazmaq və bilərsiniz
faylların hər yerinə.
HM - Beləliklə, biz tez nə olacaq?
>> TOMAS Reimers: Biz gedirik tez demo etmək.
Belə ki, yalnız, sizə xatırlatmaq üçün Google kompüter qoşulmaq -
kim -
və ilk bir fayl üçün kompüter soruşmaq əmin səlahiyyətli etdiyiniz etmək lazımdır
həqiqətən ki, fayl keçirmək və ya oxumaq yalnız xahiş edə bilməz, çünki fayl
kompüter hər hansı bir fayl üçün, sağ?
Bir təhlükəsizlik təhlükə ola bilər.
>> Kimi istifadə sistemlərin, belə faylları Bu CS50 cihaz, üç
edə bilərsiniz olan general insanlar bir şey permissions.
Ilk aktualdır dedi fayl sahibi.
İkinci qrup ki, fayl məxsusdur.
Biz diqqət fikrində deyilik ki çox çox.
Və son şey kimi, sort, deyil dünya və ya olan hər kəs kimi
ki, fayl xüsusi və etmir artıq heç bir mülkiyyət hüquqları var.
>> Beləliklə, biz sahibi varsa, qrup, və sonra dünya.
Və sonra, siz bu qrupların hər biri üçün üç icazələrin biri ola bilər,
OK, və ya onları çox.
Siz oxumaq permissions ola bilər.
Siz sağ permissions ola bilər.
Və icazələrin icra ola bilər.
>> Belə ki, faktiki fayl növləri baxımından oxumaq icazə həqiqətən oxumaq kimi
fayl məzmunu.
A doğru icazə yazılı fayl söylədi.
Bir icra icazə çalışan Siz bir run zaman nə kimi fayl
Sizin CS50 layihələr.
>> Biz faylları haqqında düşünür istəyirsinizsə Belə ki, kimi biz HTML oxumaq lazım
dünya olmalıdır ki, fayl, oxunaqlı, sağ?
Ehtimal ki, həmçinin sahibi istəyir ki, fayl redaktə etmək.
Belə ki, sahibi lazım olacaq oxumaq və icazələrin yazın.
Onlar, həqiqətən, icra ehtiyac yoxdur.
>> Group, biz müalicə etmək olacaq indi dünyada eyni.
Belə ki, onlar oxumaq icazələrin lazımdır.
Lakin onlar yazmaq lazım deyil və ya icazələrin icra.
İndi, biz keçmiş geri düşünüyorsanız Psets, nə biz həyata bu cür
Binar kimi baxmaq, sağ?
1 yes dayanır.
0 no üçün.
Və biz, həqiqətən, tərcümə edə bilərsiniz Bu ikili.
>> Belə ki, ikili 110 6 olardı.
100 4 olacaq.
Dünya ilə eyni.
Belə ki sayı üçün almaq olardı Bunun üçün icazələrin 644 olardı.
>> Siz geri düşünmək Və əgər: MIKE Rizzo Əgər bir şey chmoded zaman, mən inanıram
onlar müəyyən problem verdi Siz edə bilər, nümunə
chmod 644 kimi bir şey və sonra adını fayl.
The 644 sonra, indi birbaşa bilərsiniz ki, gəlir yerləşir.
Beləliklə, ümid edirəm ki, edir ki, bir az daha aydın.
>> Və sonra siz oğlan aydınlıq üçün -
yeah oh, burada bu yenidən edir.
Belə ki, 600 sonra yalnız misal ola bilər biz sahibi olduğu bura qədər verdi
oxumaq və sağ icazələrin isə qrup və dünya hansı icazələrin yoxdur
fayl daxil olmaq üçün.
>> TOMAS Reimers: Və sonra biz tez var ümumi icazələrin siyahısı.
Belə ki, rehberler, istədiyiniz həqiqətən 711 chmod üçün.
Kənara Quick - üçün bir kataloq üçün çalıştırılabilir icazə edə olmaq deməkdir
kataloq açmaq üçün.
Şəkillər, CSS, JavaScript, HTML ehtiyacları 644, əsasən, dünya çünki
ehtiyacları icazələrin oxumaq.
>> Və uşaqlar görmüş olan PHP, biz bu barədə söhbət olmaz, baxmayaraq ki,
ciddi adətən ilə chmoded olunur icazə 600 bu run, çünki
sahibi permissions.
Cihaz ən azı.
>> MIKE Rizzo: Belə ki, əgər deyil, xüsusi daxil fayl hansı növ
Siz həqiqətən qəbulu istədiyiniz Bu təqdimat up -
bu bir problem idi, çünki Hər şey düzgün chmoded deyil -
Siz cür, bir almaq olacaq haram səhv haqqinda
həqiqətən icazəniz yoxdur nə fayl daxil olmaq üçün
Siz daxil olmaq üçün istədiyiniz.
Və əlbəttə ki, müəyyən edilə bilər - problem müəyyən kimi - dəyişdirərək
permissions müvafiq.
>> TOMAS Reimers: Və son comment tez yerli inkişaf edir - biz
bu qədər gətirdi, amma biz yalnız istədi onu yenidən yetişdirmək üçün -
Bir server üçün xahiş əgər - belə ki, yerli ana, məsələn, com və ya nə. -
və müəyyən bir fayl daxil deyil, Sizin kompüter gedir ki, fayl
index.html adlanır istəyəcək.
Və ya mövcud olmadıqda, index.php.
>> Cool.
Belə ki, yalnız hər bir recap var, ümid edirəm ki, biz əhatə etdik ki,
bölmə, və mühazirə, və CS50 günə qədər.
Və indi biz söhbət başlamaq olacaq haqqında xüsusi kitabxana.
JavaScript və CSS kitabxanalar web applications üçün.
>> Belə ki, biz niyə bir sürətli səbəbi kitabxana proqramlaşdırma olunur -
problemləri bir çox var up yaratma saxlamaq proqramlaşdırma,
yenidən və yenidən və yenidən.
Siz bilərsiniz web sites bir çox aşağı salmaq var imkanı lazımdır
menyular, məsələn, və ya imkanı lazımdır bir çox standart düyməsini var
ola bilər stil, ən asan şey.
İndi siz, HTML daxil almaq üçün başlamaq ki, həyata ki, düymələr, həqiqətən,
həqiqətən çirkin baxmaq siz əgər bir şey yoxdur.
>> Belə ki, bir çox insanlar yazılı kitabxana çağırıb.
Və bu çərçivədə, onlar də çərçivələr çağırıb.
Biz istifadə etmək olacaq əvəz iki.
Və nə onlar onlar əsasən etdiyiniz edir kodu premade ədəd -
CSS və ya JavaScript ya -
ki, bir çox üz almaq kodlaşdırma var komanda.
>> Belə ki, onlar bir sinif dəstə və ya əvvəlcədən müəyyən üçün funksiyaları bir dəstə pre-müəyyən
JavaScript halda olan Siz sonra zəng edə bilərsiniz.
Və sonra, sort, əldə edə bilərsiniz bu kodu daxil
heç bir şey olan.
Kitabxananın nümunəsi cs50.h. idi Yəni biz sizə geri verdi kitabxana idi
həftə bir, siz bunu icazə ki, GetInt və GetString kimi şeylər
yazmaq olmadan hər hansı kodu özünüz.
>> MIKE Rizzo: Bütün hüququ.
Belə ki, burada kimi biz daxil idi bizim c müxtəlif faylları
kitabxanalar, biz də daxil edilməlidir Bizim HTML müxtəlif kitabxana faylları.
Məsələn, biz daxil etmək istəyirdi burada xüsusi JavaScript kitabxana,
bəlkə, bir biz yazdıq ki, özümüzü bu yerli barındırılan kimi
adlı script.js, biz yalnız bu notation istifadə edin.
>> Beləliklə, biz script type bərabərdir var JavaScript mənbə bərabər
JavaScript.js.
Və sizin CS50 geri düşünüyorsanız Siz baxdı əgər maliyyə problem müəyyən
şablonları qovluq header.php, siz görüldü olmalıdır
bu bəzi daxildir.
Beləliklə, bu ilk biri - scripts -
bir JavaScript kitabxana, o cümlədən edir.
Bir CSS kitabxana o cümlədən bir az fərqli bir bit.
>> Burada yerinə script Siz link tag ehtiyac TAG.
Və sonra, mətn CSS növü bir az fərqli.
Siz həmişə daxil yoxdur rel stil.
Amma, ümumiyyətlə, hesab edirəm yaxşı təcrübə.
>> Və sonra nəhayət, HREF, siz yəqin ki, keçid üçün ATAGs gördüm
müxtəlif links yalnız ifadə ilə ki, tapmaq üçün harada link.
Məsələn, biz istəyirdi bir link müxtəlif kitabxana - deyək -
ki styles.css yaşayırdı.
Və biz ki ki, keçid istədi web ev sahibliyi ki, surəti olardı.
Və sonra nə yapışdırıb biz əvəzinə sağ burada.
>> TOMAS Reimers: OK, inşallah uşaqlar artıq tanış
CSS keçid necə.
Siz nə idi son brown set.
JavaScript, siz bəzi bəlkə bəzi təcrübə var.
Siz bəzi bilməz.
>> Belə ki, indi üçün, bilirik ki, bir JavaScript fayl çox bir CSS faylı kimi
bu keçid və ya edə bilər ki, mənada Əgər məcburi daxil edə bilərsiniz ki.
Və bu script şeyə imkan verir.
Və biz vasitəsilə gəzmək olacaq sonra JavaScript az.
>> Belə ki, bir kitabxana istifadə -
Siz daxil sonra, bu kimi var sözün zəng kimi sadə
funksiyaları və ya əlavə class adları buna.
Danışmaq istəyirik son şey kitabxana baxımından -
və bu texniki not daha çox -
açıq mənbə lisenziya.
Belə ki, bu faktiki kitabxana tapmaq zaman, Siz düşünür ola bilər
suallar Mən yalnız deyiləm ki, OK istəyirəm başqasının kodu istifadə edərək, xüsusilə
ki, biz çox şey var, çünki Bu kurs deyil sizi bildirib.
>> Açıq mənbə lisenziyalaşdırma halda belə developers çox -
onlar bir kitabxana yazılı sonra, onlar ola bilər edirəm ki
digər insanların faydalı -
web dərc olunacaqdır və bir lisenziya verir.
Və bir lisenziya əsasən qərara alıram am deyir digər verilməsi icazə
insanlar proqram bu parça istifadə etmək aşağıdakı növ ilə
şərtləri.
>> Biz yaxşı bir site üçün bir keçid daxil etdik Siz lisenziya anlamaq kömək
Siz onlara daxil Halda.
Ümumi şərtləri kimi şeylər Siz mənim kitabxana istifadə etmək xoş gəlmisiniz belə
Mənə kredit vermək uzun kimi.
Siz mənim kitabxana istifadə etmək xoş gəlmisiniz onu pozur zaman kimi uzun
Siz məni günah yoxdur.
Siz uzun mənim kitabxana istifadə etmək xoş gəlmisiniz para etmək üçün istifadə etməyin kimi
Özünüz üçün.
Bu ümumi növləri şərtləri.
>> Bu CS50 yekun layihə, onlar super müvafiq olmalıdır, çünki
Sizlərin istifadə edən layihələrdir yəqin ki, daha, sort, məlum.
Amma əslində çıxmaq zaman dünya və kitabxana istifadə edərək başlamaq
və ya kimi həyata keçirilə bilər biz istəyirik daha məşhur olanları bəzi
keçir olacaq.
Bu anlamaq etmək yaxşı Bu lisenziya və
onlar demək nə anlamaq.
Və geri gedir.
>> MIKE Rizzo: OK.
Belə ki, indi nümunələri üzərində hərəkət faktiki CSS.
Bu nöqtədə, bu günə qədər güc bu rast deyil.
Amma onu rast ola bilər Sizin gündəlik həyat olduğu bir şey
ki, bir browser bir yol görünür eyni baxmaq bilər
başqa bir brauzerinizin yol.
>> Bu brauzer browser adlanır uyğunluğu.
Və getdikcə daha çox və olmaq xüsusilə də, bir problem daha
brauzerlər daha çox azadlıqlarının almaq istədikləri kimi şeylər həyata keçirmək.
Belə ki, aradan qaldırmaq üçün həqiqətən var Normalize.CSS adlı böyük kitabxana.
>> TOMAS Reimers: Biz link daxildir.
Bu nöqtədə, faydalı əgər orada sizin laptop
saytda axtarır.
Və biz sizin üçün doğru bu veririk indi sadəcə çünki CS50 final
layihə həqiqətən gedir onu həyata keçirmək üçün xahiş
eyni və brauzerlər vasitəsilə.
>> Belə ki, yalnız sizin geri saxlamaq baş, bu gözəl kitabxana
olacaq, çünki növ, hər şeyi standartlaşdırmaq.
Firefox, bir şey göstərə bilər sol bir pixel kimi.
Və sonra Chrome həqiqətən ki, qərar qəbul edə bilər nə nəzərdə 10 piksel idi
sol.
Və bu standartlaşdırmaq istəyirəm.
Normallaşdırmaq, həqiqətən, həqiqətən yaxşı edəcəyik əmin edilməsi iş sizin site
brauzerlərdə arasında eyni görünür.
>> Biz istəyirdi Belə ki, əgər yalnız: MIKE Rizzo həqiqətən tez və şou linki vurun
nə ki, kimi görünür istifadə edərək yükləyə bilərsiniz
nəhəng Download düyməsini basın.
Yoxsa mən bu barədə daha ətraflı üçün təşviq aşağı bu linki tıklayarak
sağ küncündə.
>> TOMAS Reimers: Əgər siz həqiqətən Daha orada oxuyun basın -
GitHub üzrə mənbə basın -
Siz, həqiqətən, açıq mənbə görəcəksiniz orada LICENSE.md lisenziya.
Və burada görəcəksiniz edir çox məşhur MİT lisenziya.
Yenə, mətn vasitəsilə oxumaq əgər, Siz saytda tapa bilərsiniz
biz əvvəl müraciət və mümkün oxumaq olmadan onu anlamaq
hüquqi jargon vasitəsilə.
>> MIKE Rizzo: OK, böyük.
Belə ki, Normale var.
Biz sizə vermək istədim ki, həqiqətən tez.
Oh, bir sual var?
>> Auditoriya: Belə ki, bu download zaman, siz yalnız onlar var ki, riayət
Download düyməsinə altında?
>> TOMAS Reimers: Bəli, belə Siz download zaman -
>> MIKE Rizzo: Oh, böyük bir nöqtə var.
Belə ki, sual necə idi biz, həqiqətən, yükləyə?
Biz linki vurun əgər, biz görürük bu, həqiqətən up pops ki,
mənbə kodu at.
Belə ki, bunu, nə biz bilər yalnız Saxla basın yoxdur.
Save As və lazımdır ki, bir fayl yetişdirmək.
Və sonra biz saxlamaq üçün seçə bilərsiniz Bu normalize.CSS kimi.
Və sonra onu keçid etmək istədiyiniz -
>> TOMAS Reimers: The eyni şəkildə hər hansı digər fayl keçid.
Siz bu link Və bir dəfə, böyük nə var normallaşdırmaq haqqında bu, həqiqətən edir
bütün ağır qayğı özü işləməyəcək.
Siz yoxdur, yəni bir dərsləri əlavə edin.
>> Siz qəribə bir şey yoxdur.
Bu sizin olmadan normallaşdırmaq edəcək daha heç bir şey bunu.
Bəli, daxil var.
Google Chrome cavab deyil.
>> Kənara yalnız bir sürətli -
Mən biz bu atladı gördük.
Bu təqdimat qalan deyil sürətli bir genel bakış olacaq.
Kitabxanaların sorğu.
>> Əsasən, onlar nə var.
Onlar nə.
Onlar faydalı ne.
Əgər siz onları həyata bilər necə.
Siz onlara baxaraq başlamaq istəyirsinizsə, yanaşı aşağıdakı, və oxu
Onlara Mən təşviq olardı.
>> Alternativ olaraq, siz də buyrun onları yükləməzdən və o cümlədən başlamaq
bir gözündə onlara yalnız etdiklərini görmək kimi baxmaq və ya nə varsa, onlar nə
siz qarşısında sizin laptop.
Əgər saxlamaq üçün buyrun bizə qulaq danışmaq.
Biz söhbət saxlamaq olacaq.
Və biz ümid edirəm ki, sonunda vaxt Biz, həqiqətən, siz göstərən nəzərə almaq lazımdır
nə bu kitabxana bəzi kimi baxmaq.
>> MIKE Rizzo: Cool.
Bütün hüquqlar, belə ki, indi danışaq Awesome haqqında Font.
>> TOMAS Reimers: belə Font Awesome a xüsusilə olanlar üçün həqiqətən səliqəli site,
az bədii olan bizim istedadlı.
Awesome adı Font məhəl qoymayan, bu verir Siz hansı nişanlar, bir dəstə
çox faydalı.
Belə ki, bir çox dəfə bir həyata olacaq Siz belə bir gözəl x kimi istəyirəm bilər icon
Əgər bir şey yaxın bilər ki,.
>> Yoxsa Edit düyməsinə bir növ istəyirəm bilər kimi bir qələmi rəsm ilə
hər kəs var.
Siz ki, məlumat zaman ki o ikonları rəsm ola bilər
çox yorucu və çətin.
Font Awesome - əgər həqiqətən site getmək -
çərçivəsində siz nişanlar bir çox verir üst nişanlar.
Bəli, yalnız üst.
Bu bir çox verəcək pulsuz nişanlar.
>> Belə ki, burada biz bir kimi şeylər görmək ulduz, barlar, bir ildırım bolt, bir
təqvim, bir səhv, bir kitab, et Cetera.
Bu, çox faydalı ola bilər.
Bu daxildir yol daxildir sanki CSS fayl.
Və sonra siz CSS fayl daxil etdik siz nə edə bilərsiniz yaratmaq bir
I. Bu satands tag sinif FA ilə icon
Awesome Font ayaqda.
Və sonra, nə sinif istədiyiniz.
>> Mən bu plus bir icon istəyirdi Belə ki, əgər burada kvadrat, mən verəcək
Bu sinif FA.
Və sonra FA defis plus defis kvadrat.
>> MIKE Rizzo: OK, sərin.
>> TOMAS Reimers: Və sonra, son CSS kitabxana biz vasitəsilə almaq istəyirəm
CSS minimal saxlamaq üçün çalışırıq kitabxanalar biz həyata çünki
Bu təqdimat adı JavaScript Kitabxanalar edir.
Amma biz kimi də ola bilər ki, düşündüm digər kitabxanaların sizə təqdim
biz kitabxanalar bəhs edildi.
>> Bu Google Web Fonts var.
Və nə Google Web Fonts sizə imkan verir etmək üçün, web fonts əlavə et
etmək üçün həqiqətən asan bir yoldur olan yaraşıqlı və set ayırmaq üçün
var əgər hər kəs başqa heç gözəl font və ya bir gözəl var
fonts collection.
Google Web Fonts digər fərqli gözəl bir olan mənada kitabxanalar
həqiqətən doğru yola quraşdırılması.
>> Siz linki takip Belə ki, bu google.com / fonts, inanıram.
, Siz ki, edin, əgər Sizin font seçə bilərsiniz.
Siz sol seçə bilərsiniz qalınlığı, maili, et Cetera.
Və sonra, bir dəfə, bir seçdiyiniz Siz tez istifadə vurun.
Hüququ var.
Qutusu sağ alt.
>> Və sonra, aşağı diyirləyin.
İlk növbədə, onlar sizə CSS verir ki, həqiqətən keçid lazımdır.
Bu hüququ var.
Siz yalnız surəti və daxil yapışdırıb bilər
Və bu barədə gözəl şey Siz, həqiqətən, hətta ehtiyac yoxdur
fayl download.
>> Nə olacaq ki, bu olacaq edir bu Google versiyasını.
Belə ki, geri ki, nə deməkdir.
Ki, bir istifadəçi zaman deməkdir Sizin faylını -
Sizin HTML səhifə downloads - Sizin HTML səhifə bu faylı istinad edir.
>> Beləliklə, sizin kompüter görmək olacaq, oh, bu, olduqca google.com barındırılan
theirsite.com çox.
Mənə ki, fayl üçün Google xahiş gedək.
Və sonra, daxil olacaq demək olar ki, bir sanki
Öz site hissəsidir.
>> TOMAS Reimers: Cool.
Və siz daxil bir dəfə, sonra Sizin CSS daxil, bu verir
faktiki line.
Belə ki, əmlak font ailə qurmaq Sizin font adı bərabərdir.
>> MIKE Rizzo: OK.
Beləliklə, biz yalnız CSS ilə tamamladı.
Və bəzi yaxşı düşünür ola bilər biz CS50 Maliyyə bəzi CSS.
Amma CSS kitabxana bootstrap idi.
Biz, həqiqətən, Bootstrap bir az daxildir sonra JavaScript altında çünki
Bootstrap CSS kitabxana da gəlir JavaScript ki, bir çox
Bootstrap və ya Twitter - olan Bootstrap etdi -
onların CSS bütün idarə etmək üçün istifadə edir.
>> TOMAS Reimers: hər hansı bir var mı bu günə qədər ümumi CSS haqqında suallar?
Biz yaxşı edirik?
Awesome.
>> MIKE Rizzo: Awesome.
>> TOMAS Reimers: Belə hərəkət JavaScript üçün.
>> MIKE Rizzo: Biz danışmaq istədim jQuery ilə başlamaq üçün.
Heç jQuery eşitdi əvvəl və ya istifadə?
Bəli, bir neçə?
Belə ki, yalnız doğma ilə iş varsa, JavaScript, siz özünüzü tapa bilərsiniz
bir çox uzun seçiciler bir çox yazaraq.
Belə ki, nə jQuery edir ki, təmin edir JavaScript üçün gözəl banderol
asanlıqla seçin imkan verir ki, dil və müxtəlif elementləri manipulyasiya
Bu sənəd obyekt modeli çərçivəsində web səhifə və ya düşünürəm olan DOM,
Sizlərin də eşitmişəm Bu nöqtədə mühazirə.
>> TOMAS Reimers: Siz eşitdim deyil varsa Bu və ya izləyib əgər mühazirə
hələ Document Object Model əsasən şey necə təmsil olunur.
Belə ki, HTML sort bir ağac kimi görünür siz həqiqətən onu cəlb edir.
Siz üst HTML element var.
Siz baş və bədən.
>> Və sonra, siz ərzində başqa hər şey var.
Ki, DOM kimi istinad -
Document Object Model.
Belə ki, obyektlərin təmsil edən bir model sənəd düşünmək asan bir yoldur
ki, haqqında.
Və jQuery haqqında böyük şey bir həqiqətən traversing edir
ki, daxilində manipulyasiya elementləri ki, olduqca sadə.
>> Belə ki, sadə, əslində, əksəriyyəti JavaScript kitabxana və ya əgər
əksəriyyəti, olanları böyük əksəriyyəti Siz görəcəksiniz həqiqətən belə jQuery tələb
onlar sadəcə özlərini çalıştırabilirsiniz çünki, siz jQuery olmasaydı
çalışır vaxt sərf edirəm müəyyən seçmək üçün necə anlamaq
elementləri və necə digər şeylər üçün.
Və jQuery haqqında başqa bir böyük şey Bu cross browser uyğun var ki.
>> Biz ki, dedi Belə ki, geri xatırlayıram Bütün brauzerlərdə tətbiq
şeyi eyni şəkildə?
Bu, hətta JavaScript doğrudur.
Və jQuery haqqında böyük şeyi biri aşkar ki, edir
browser və aşkar müvafiq metod.
>> Belə ki, bir element seçmək lazımdır əgər, Internet Explorer siz deyə bilərsiniz
bu şəkildə etmək idi.
Firefox doğru demək olar yol bu yoldur.
jQuery qayğı deyil.
Bir seçin jQuery demək zaman element bu necə anlamaq olacaq
browser ərzində bunu ehtimal user hazırda, və sonra bunu
bu yol.
>> MIKE Rizzo: Belə ki, haqqında danışmaq deyil bildirin jQuery istifadə bir az.
Just PHP kimi, jQuery xüsusi var dollar işarəsi üçün mehribanlıq.
Beləliklə, siz hər hansı bir jQuery tapa bilərsiniz -
yaxşı deyil, bütün.
Siz bəzən dollar əvəz edə bilər sözü jQuery ilə imzalamaq.
Amma ümumiyyətlə, bu yalnız çünki qısa, siz jQuery olan görmək zaman
bir dollar işarəsi ilə olacaq istifadə.
>> Belə ki, burada biz yalnız başlanğıcı göstərən edirik DOM bir element üçün selector.
Burada, biz dollar işarəsi təqib var sonra açıq parantez və quotes ilə.
Və quotes ərzində seçiciler getmək müxtəlif elementləri üçün.
Just CSS kimi, biz seçiciler lazım müxtəlif elementləri stil edə
səhifə çərçivəsində.
Bu müxtəlif seçiciler tərcümə dəqiq daxil jQuery və JavaScript,
çox hissəsi üçün.
>> Belə ki, burada biz bir dot foo var.
Siz mühazirə geri əgər, dot yalnız sinif deməkdir.
Beləliklə, biz element seçilməsi edirik class foo ilə.
Mən irəli getmək və açmaq əgər bizim JavaScript konsol burada həqiqətən tez
Mən yalnız yazın əgər yalnız onu nümayiş etdirir dollar işarəsi, biz bəzi var ki, bax
gəlir ki funksiyası.
Və yalnız jQuery ilə müəyyən edir.
>> TOMAS Reimers: sizin üçün tanımadığı, konsol bir vasitədir
Siz imkan verir Chrome, ərzində əsasən, JavaScript run
cari səhifə.
Bu olduqca faydalı tapa bilərsiniz zaman Siz, həqiqətən, ayıklama və siz etdiyiniz
kimi olmaq lazımdır, cari nədir bəzi qlobal dəyişən dəyəri və ya nə
başqa bir şey deyil?
Bu istisna olmaqla gdb kimi növ var Siz həqiqətən bilər ki,
page elementləri manipulyasiya bir daha asan moda bu.
Və həmçinin, əsasən, yoxlamaq deyil Bu bir şey yoxdur əvvəl sizinlə.
>> Belə isə, gdb kimi ola bilər, siz Siz növbəti addım run istəyirsiniz?
Konsol real var.
Bu web page göstərilməsi və belə ki, edir nə edirik
Şura da bu yanaşı çalışır.
Və siz daxil etmiĢik kodu qoya bilər ki, konsol edəcək olan
səhifə run bilər.
>> MIKE Rizzo: Belə konsol daxil, Mən qısaca olmalıdır tapmaq
bunu necə qeyd.
Siz ola bilər ki, son problemləri istifadə Chrome-nin element yoxlayacaq
funksiyaları və ya view səhifə source -
və o sağ erişilebilir Səhifənin ya xüsusi tıklayarak
element və yoxlayacaq ya bunu element və ya səhifə mənbəyinə.
Biz də JavaScript əldə edə bilərsiniz console birbaşa
element yoxlamaq seçilməsi.
Belə ki, sonra yalnız hit console uzaq sağ.
>> Alternativ olaraq, siz də getdi bilər yuxarı sağ küncündə,
Bu ekranda kəsilmiş olan harada bu üç üfüqi bar var.
Və alətləri enmək və sonra JavaScript konsol
burada görə bilərsiniz -
ən azı Windows -
Qısa Control Beləliklə J. Shift edir biz bir element seçin istəyirdi
Bu səhifədə ərzində, yalnız kimi göstərdi əvvəl, biz dollar işarəsi açıq parens etmək
və sonra quotes.
>> Maraqlı bir şey, ümumiyyətlə, edir tək quotes və ikiqat quotes var
exchangeable.
Belə ki, bir çox insanlar yalnız bir istifadə quotes onlar yazın sürətli istəyirik, çünki
ikiqat quotes çox deyil çünki Shift basıb saxlayın lazımdır.
Mən yalnız indi bunu edəcəyik.
>> Mən bir şey seçə istəyirəm sinfi.
Konteyner, mən bilirəm yalnız çünki var ki, bir şey bizim
web page indi.
Mən Enter.
Və biz onu seçilmiş olduğunu görə bilərsiniz.
Belə ki, göstərir ki, obyekt döndü.
Belə ki, bir əsas seçim var.
Biz, həqiqətən manipulyasiya etmək istəyirdi, Əgər bir şey zəng etmək olardı
ki, seçim, hansı Biz sonra daxil olacaq.
>> TOMAS Reimers: Belə ki, yalnız baxmaq daha ətraflı, bu fərqli deyil
biz C. edilən funksiyası zənglər daha Burada funksiyası adı deyil
az qəribə.
Bu dollar işarəsi var.
Bu yalnız bir funksiyası adı var.
Bu barədə xüsusi bir şey yoxdur.
>> Biz açıq parantez var.
Sonra, biz bir arqument var, Bu halda bir string olmaq olur,
bunun üçün bir selector edir.
Və sonra, biz bizim qapalı mötərizə.
Ki, var.
>> Bu vastly müxtəlif deyil.
Baxmayaraq ki, bu çox qəribə görünür.
Və ki, sort, bir yapışma ola bilər bir çox insanlar üçün qeyd.
>> MIKE Rizzo: Eynilə, biz istəyirdi ID var ki, bir element seçin,
İndi biz seçin istəyirəm Əvəzinə sinif ID.
Bu oxşar bir şey ola bilər, biz yalnız ID kəskin işarəsi.
Beləliklə, biz bütün burada seçilməsi edirik ID bar var ki, elementləri.
>> TOMAS Reimers: Bu uzanır.
Bu CSS uzanır.
Just CSS kimi, bütün seçə bilərsiniz Bu sinif foo olan links.
Burada, eyni şey var.
>> Siz seçin ki, a.foo edə bilər sinif foo ilə əlaqələrin bütün.
Siz kəskin bar edə bilər hansı ki ID bar və belə bağlantısını seçin
və s.
Hər hansı CSS selector bir etibarlıdır jQuery selector.
>> MIKE Rizzo: Bəli.
OK, belə ki, indi bir az daxil imkan biz nə edə bilər ki manipulyasiya
bizim jQuery.
Belə ki, jQuery xüsusi bir növü var biz yalnız istifadə notation
sonunda bir dot.
Və bu kimi hesab edə bilər C biz müxtəlif structs idi necə.
Və o Structs getmək üçün, siz ki onları almaq üçün bir dot istifadə.
>> Bu cür, bənzər bir şeydir.
Yalnız indi biz bu daxilində funksiyaları var biz bu zəng edə bilərsiniz ki, selector.
Belə ki, burada ilk nümunəsi Bir CSS selector bilərsiniz.
Və əsasən, nə edir ki, bu Bu ilk element CSS tətbiq
seçdiyiniz şey -
Seçdiyiniz ki, bu element -
ki, dəyəri.
>> TOMAS Reimers: Belə ki, asan tərcümə əgər jQuery, əsasən olacağını
yalnız foo etdi.
Və sonra CSS bildirib qırmızı və yaxın rəng.
Bu eyni fikirdir.
Nə bunu seçilmiş edir, bütün foo elementləri.
Və sonra, tətbiq edilir.
Sort, mülkiyyət rəng qırmızı bərabərdir.
>> MIKE Rizzo: Eynilə, biz də dəyişdirə bilər nə faktiki məzmunu
Səhifənin HTML, göstərən olan Bu deməkdir, çünki, həqiqətən, sərin sizin
web pages indi tamamilə dinamik ola bilər və statik yoxdur
Siz PHP istifadə çap ki, çox başında da
Səhifə yüklənən olunur.
Odur ki, biz dəyişdirmək istəyirdi Səhifənin faktiki HTML, indi ki
HTML funksiyası, zəng edən sonra yalnız biz daxil belirttiğiniz hər hansı edər
Biz seçilmiş ki, element.
Belə ki, burada biz element seçilməsi edirik class foo və sonra HTML deyərək
indi salam dünya var.
>> TOMAS Reimers: Və siz hesab zaman haqqında faydalı applications nə
Bu, bu CSS bir ilk şey ki, Siz haqqında düşünməyə başlaya bilərsiniz
baxımından da menyular açılır.
Siz kimi şeylər başlamaq bilər zaman bir istifadəçi üst hissəsində hovers
bir damla aşağı, siz etmək istəyirəm görünən alt hissəsi.
Sağ?
>> Belə ki, CSS, biz xassələri var görünən bir şey etmək.
Ekran colon heç kimi Things Bu görünməz edəcək.
Display blok görünür etmək olardı.
Və ya, siz sadə getmək istəyirəm, hətta görünürlüğünü bərabər kimi şeylər var
görünən və görünürlüğünü gizli bərabərdir.
>> Və şeyi həyata başlamaq bilər kimi menyular hüququ açılır
Siz necə ideyası vasitəsilə almaq sonra Bu açılır zaman anlamaq bilər,
biz çox qısa vasitəsilə almaq lazımdır.
Amma biz görmək başlaya bilərsiniz Bu applications.
Oxşar mənada olsaydı cəhd və söhbətlərini, həyata deyək
mühərrik və bir az etmək istəyirəm Siz var zaman çıxış bubble gəlib
Yeni mesaj var, siz bir dəfə yeni mesaj, bir az edə bilərsiniz
çıxış bubble değiştirerek gəlmək Səhifənin HTML, sağ?
Ki, əlavə çıxış bubble əlavə orada əlavə mətn ilə.
Bəli?
>> Auditoriya: Belə ki, daxilində bu embed sort kimi HTML kodu
[Işitilemez]?
>> MIKE Rizzo: Right.
Bəli, biz almaq lazımdır bir az.
Bəli, bu bənzər bir var PHP az bit.
Məhz oxşar deyil.
>> Etmək üçün yaxşı bir fərq nə bu həqiqətən, biz redaktə edərkən redaktə olunur
olmaq niyyətində deyil, çünki səhifə olunur ki, faktiki fayl redaktə
server saxlanılır çünki dünya icazəniz yoxdur
faylları redaktə etmək üçün.
Bu yalnız səhifədə nə redaktə olunur və nə ərzində nümayiş olunur
browser.
Belə ki, sonra səhifəni yeniden olsaydı, biz kimi bir şey silmə, demək
biz aradan qaldırılması çağırışı ilə edə bilərsiniz görmək, ki, bir şey, sonra yeniden olacaq.
>> TOMAS Reimers: Belə bir yolu düşünmək Bu Mən sizin kompüter Ben əgər və
Mike, sort, server edir.
Nə olacaq Mən gedirəm hey, Mən surəti ola bilər, Mike xahiş
Bu web page?
Və o, mənə bir kopyasını verəcəyik.
>> Xeyr, bu orijinal şey deyil.
Bu yalnız bir surəti var.
Və o, oh kimi olacaq JavaScript burada var.
Aydındır ki, mən redaktə olmalıdır səhifə bu kimi olacaq.
Mən surəti redaktə alıram.
>> Amma təsir deyil faktiki surəti.
Mən əgər onu yenidən xahiş , səhifəni yenileyin -
hey, mən başqa təmiz surəti ola bilər -
O mənə vermək olacaq başqa təmiz surəti.
Və sonra, mən eyni şey üçün gedirəm kimi, oh, bu deyir ki, burada js
Bu redaktə etmək.
Mən bunu saxlamaq üçün gedirəm.
>> MIKE Rizzo: Həqiqətən sərin şey jQuery ilə siz edə bilərsiniz ki,
həqiqətən müxtəlif növ əlavə sayfanıza animasiyalar.
Əgər burada gördüm əgər mən bilmirəm Bir doldurmaq üçün bir forması həyata çalışdığınız
online və siz doldurun yoxdur düzgün şeylər.
Belə ki, bir az şey aşağı slaydlar üst və deyir
doğru işlər deyil.
Yenidən cəhd edin.
Və sonra, hətta yalnız uçmaq bilər.
>> JQuery funksiyaları inşa etmişdir çıxır ki, bütün etmək
animasiya həqiqətən, həqiqətən, asan.
Belə ki, fade ilk var out funksiyası
Əgər bir şey haqqında zəng edə bilərsiniz.
Və bu CSS dəyişdirmək üçün bir yoldur cizgi şəkildə element.
Belə ki, nə element edir Siz həyata fade çağırırıq.
Və sonra, yavaş-yavaş bu qeyri-şəffaflıq dəyişir tamamilə şəffaf gedir qədər.
>> TOMAS Reimers: Digər məşhur bir edəcək olan, aşağı uçmaq olunur
bir şey onu sürüşmə ilə görünür.
Belə ki, açılan menudan halda, daha, biz aşkar etmək üçün necə öyrəndim zaman
bu artıq hovered edildiyi zaman, yalnız bu alt deyə bilər
hissəsi indi aşağı sürüşdürün.
Və sonra, bu, görünür aşağı sürüşmə.
>> MIKE Rizzo: Və sonra, yalnız varsa nəzərə animasiya bir növü ki,
jQuery mütləq təmin etmir.
Məsələn, jQuery deyək Siz bir slayd ilə təmin edir
aşağı və slayd up.
Yaxşı, siz uçmaq istəyirdi deyək olan sol və ya olan şey
Bu CS50 kimi sağ cür Baş səhifə zaman yoxdur
Yeni bir panel gedin.
Daha sonra yəqin ki, olardı istifadə özünüz həyata keçirilməsi
jQuery ərzində funksiyası diri.
>> Belə ki, eyni, yalnız diri.
Və sonra, içinde bir alır müxtəlif dəyərlər lüğət
keçmək ehtimal edirik ki,.
Odur ki, biz diri istəyirdi element foo, belə ki, onun eni
genişləndirir və ya 80 piksel müqavilələr, bu anda nə asılı olaraq.
Biz yalnız kimi keçmək Bu ərzində arqument.
>> Bəzi digər arqumentləri var da diri misal üçün, onu keçə bilər ki,
animasiya sürəti Siz vermək istəyirəm ki,.
Və bunu, Mən demək olardı tez Google jQuery diri.
Və sonra bu səhifəni tərbiyə, siz müxtəlif bir dəstə var bax
siz onu keçə bilər ki, xassələri.
>> Mən təşviq - siz gəlmək zaman siz ki, bir şey rast
bilmək və ya yalnız bir haqqında daha çox öyrənmək istəyirsinizsə Siz zəng edə bilərsiniz ki, xüsusi metodu
bir şey -
yalnız Google. jQuery son dərəcə yaxşı sənədləşdirilmiş.
Və tez-tez bir çox var onlar sizin üçün təmin edən nümunələr.
Biz aşağı diyirləyin varsa -
yol aşağı -
biz də istifadə edə bilərsiniz ki.
>> Yenə bir geliştirici həqiqətən gedir yazılı a narahatlıq ilə
kitabxana, onlar adətən istəyirəm istifadə etmək kimsə.
Belə ki, yanaşı gedir sənədlər ola bilər.
Və sənədləşmə adətən ola bilər olan layihə səhifə, aşkar
biz sizə orijinal site verdim Sizi bağlandığı başlanğıcı,
layihə pages belə siz ki sənədləşməsinə baxın.
>> Adətən, işdə layihənin səhifə və [Işitilemez], sizə izah
siniflər adları.
JavaScript halda, bu verir Siz funksiyaları adı.
Yeri gəlmişkən, biz üst qədər fırladın əgər, funksiyaları tez yan qeyd edir
Siz həyata bir funksiyası görmək zaman ağır ilə bu kimi
ortada Mötərizədə ki, vasitələri ki, mülkiyyət isteğe edir.
Bir rəhbərləri up.
Mən sual bir çox gördük ki, haqqında.
>> Belə ki, burada biz görürük ki, canlı xassələri alır
zəruri arqument kimi.
Və başqa hər şey bağlıdır.
Side qeyd -
Siz sort, bu hesab edə bilər ki, man pages kimi.
Man pages C sənədlər və eləcə də digər şeylər, bir çox.
>> MIKE Rizzo: Biz öyrəndim necə səhifə müxtəlif CSS,
onu diri, və HTML əlavə aradan qaldırılması.
Amma həqiqətən ən güclü biri JavaScript haqqında şeylər
və xüsusilə jQuery -
bu nə imkan verir cavab deyil baş verən müxtəlif elementləri.
Məsələn, burada biz bir hadisə handler.
Zaman bu və yalnız deməkdir hadisə baş, biz onu idarə
müəyyən bir yol.
>> Belə ki, burada ümumi jQuery hadisə handler üzrə dot edir.
Və sonra, ilk şey təmin nə hadisə olmalıdır
üçün dinləmək.
Belə ki, burada, bu klik ki, biz üçün bekliyoruz.
>> TOMAS Reimers: Alternativ olaraq, siz var hover, bir çox məşhur biridir.
Belə ki, geri menyu ideya aşağı mənim drop.
Siz hover üst bir olardı.
Və sonra dəyişə bilər.
>> MIKE Rizzo: Right.
Və sonra, ki, baş zaman, yalnız biz bu verir ki, bu funksiyanı yerinə yetirir
bir arqument kimi və Bu hi ya salam siqnallar.
>> TOMAS Reimers: Belə halda JavaScript, bu, lazımdır yerdir
C. özümüzü aradan qaldırılması Biz, həqiqətən, arqumentlər kimi funksiyaları almaq.
Və bir çox həqiqətən var Bunu etmək üçün kompleks yolları.
Biz bir yol inkişaf olacaq, siz müəyyən edə bilərsiniz olan
orada fəaliyyət göstərir.
>> Belə bir funksiyası kimi üçün xahiş edirik zaman bir parametri, siz əsasən yalnız istəyirik
funksiyasını müəyyən etmək üçün gedir yerində.
Və siz bir funksiyası müəyyən yol JavaScript Siz
sözün funksiyası demək.
Sonra, adətən, adı funksiyası.
Amma biz istinad gedən heç edirik bu funksiya daha.
Beləliklə, biz adsız tərk.
>> Sonra parantez, sonra buruq aşırma, və sonra ərzində kodu.
Beləliklə, biz bu bilər anlamaq bir az confusing ola bilər.
Beləliklə, biz ümumi formada vermək bir hadisə handler kimi görünür nə
aşağıda olan hadisələr edir.
Və sonra, ki, daxili kodu.
>> MIKE Rizzo: hər hansı bir var Bu barədə suallar?
Bu bir az confusing ola bilər siz onu görmək ilk dəfə.
>> TOMAS Reimers: Siz, həqiqətən, istədiyiniz bir fayl açmaq və onlara bəzi göstərmək
jQuery indi?
>> MIKE Rizzo: Bəli, bunu edək.
OK.
>> TOMAS Reimers: Belə ki, indi biz istəyirik cihaz.
Və biz etdik biz qəbul etdik edir bir index.html həm yaradılması liberty
bağlandığı fayl, bir JavaScript file.
Və biz açmaq bilər -
Bəli.
Bəli, bu iki şeyi.
>> Bu ilk links edir JavaScript file.
Və biz burada up görəcəksiniz.
Biz rəhbəri görürük HTML sənəd, xüsusilə.
Beləliklə, siz orada görəcəksiniz ki, biz, əsasən, DQM demək,
olan mənbə üçün dayanır.
Ki, URL var.
>> Belə ki, burada biz etdik deyə bilərsiniz jQuery daxildir.
Və biz də scripts daxil etdik.
JavaScript daxil etmək digər yoldur bir inline script daxildir edə bilər ki,
biz altındakı var tag kimi yerdə script növü mətn JavaScript edir.
>> Belə ki, biz istəyirik, qulaq asmaq, deyərək edirik bir script daxildir haqqında.
Və script növü Mətn bir növü olan JavaScript.
Çox sadə.
>> MIKE Rizzo: Belə ki, bu cür, olur biz daxil necə haqqında sual
Bizim faylları JavaScript Çünki biz PHP, biz bu kimi bir şey idi.
Və sonra, bizim PHP funksiyaları var - səhmləri nə demək
ki, bir şey -
orada gedir.
Ancaq indi biz script tags biz, həqiqətən, olan, vermək
HTML özü hissəsi deyil, çünki bu kimi bir HTML faylı olan faking
PHP siz həqiqətən getmək əgər çünki və saytın mənbə baxmaq,
Orada bu script tags görürsünüz JavaScript ilə bağlı ilə
ki, onlara.
>> Biz istədi Beləliklə, əgər bəzi JavaScript yazmaq -
yalnız biz bədən dəyişdirmək istədiklərini deyirlər indi mən yoxdur, çünki
Mən, həqiqətən, hər hansı digər tags bədən yanaşı redaktə.
Gəlin yalnız mən istədiyini deyirlər ki, CSS.
Belə ki, biz irəliyə getmək və dəyişiklik lazımdır qırmızı bu rəng.
>> Mən qeyd edin.
Geri bizim web page getmək edək, yenileme, və avtomatik olaraq bunu edir
Bu gözlədi kimi deyildi, çünki biz dinləmək deyil, bütün, çünki
bir hadisə və ya bu kimi bir şey üçün.
>> TOMAS Reimers: Belə ki, geri getmək əgər xüsusilə fayl - HTML
fayl - Siz olacaq nə görmək biz var -
Bu dolu olunur unutmayın ki, sort, xronoloji.
Beləliklə, biz ilk baş var. bu iki faylları yükler.
Sonra biz bədən gedin.
Və biz salam dünya baxın.
Beləliklə, biz salam dünya göstərir.
>> Və sonra biz son şey biz script tag var.
Çünki Belə ki, script tag çalışır bir şey gözləmək onu izah deyil.
Və ən əsas var JavaScript çalıştırmak üçün yol.
>> Dedi ki, siz script qoya bilər mövzu tag yalnız
Bu baxımından göstərmək üçün?
Və axır.
Biz qeyd etmək olacaq ki, rəng dəyişdirmək etməyib.
Və bu problemlərdən biridir JavaScript şeylər dolu ki,
xronoloji qaydada.
>> Belə ki, zaman ki, kodu çalışan, biz seçilmiş -
geri -
bədən tag.
Bədən tag hələ mövcud deyil, çünki JavaScript HTML uyğundur.
Belə ki, browser seçin orqanı kimi.
Hələ bir şey yoxdur.
Belə ki, iqnor edə bilər.
Və biz davam.
>> Və sonra biz bir bədən tag müəyyən edir.
Amma yenilənir olur, heç vaxt.
Beləliklə, siz script həyata etdiyiniz zaman tags, əmin yerleştirmek etmək
bədən tag sonra.
Next slide.
>> MIKE Rizzo: OK.
Beləliklə, biz bir şey dəyişdi.
Bu cavab kimi Lakin baxmadı us bütün bu yalnız cür, çünki
kimi tezliklə bu səhifəni yüklədi kimi etdi.
Yəni, bunu niyə biz bir hadisə handler əlavə etməyin.
>> Belə bir şey edək bədən yenidən.
Və biz bunu deyək -
basın.
Biz bir funksiyası əlavə edəcəyik.
>> TOMAS Reimers: Gəlin dəyişiklik yenidən qırmızı rəng var.
Niyə?
>> MIKE Rizzo: Bəli, qoy dəyişiklik yenə qırmızı üçün onun rəng.
Bütün hüquqlar.
Belə ki, səhifəni yenidən bildirin.
OK, biz bax -
gözlənildiyi kimi, hələ qırmızı çevirmək deyil.
Amma sonra biz irəliyə getmək və vurun.
>> TOMAS Reimers: Və qırmızı açın etmir.
>> MIKE Rizzo: Və bunu edir gözlənildiyi kimi qırmızı açın.
>> TOMAS Reimers: Və biz necə edə bilər biz çox əsas yaratmaq başlaya bilərsiniz
qarşılıqlı.
Biz nə istəyirik bilər digər şeylər edir biz bədən etmək istəmirsinizsə
qırmızı rəng, ən HTML edək background color red.
Yalnız belə eyni CSS var.
>> Və biz bunu dəyişdirmək zaman, biz bunu görürük dəyişən çox dramatik təsiri
bütün səhifə.
Belə ki, yenə hər şeyi həyata edirsinizsə, bir komponent ola bilər
tıklayan deməkdir.
Nin Exit düyməsini deyirlər və bütün digər komponenti,
cavab deməkdir.
Belə bir pəncərə çıxarırıq Ki, baş zaman.
>> MIKE Rizzo: OK.
Yalnız bir misal kimi -
Bu əvvəllər görmək əldə etməyib -
Mən yalnız görünür nə göstərmək lazımdır biz bir şey gizlətmək zaman istəyirəm.
Mən irəli getmək lazımdır və uçmaq yoxdur.
>> TOMAS Reimers: a ki kesmek istəyirəm biz bunu paraqraf type əvvəl?
>> MIKE Rizzo: OK.
Bəli, biz niyə etmirik ki, yalnız belə biz bir az daha seçə bilərsiniz.
>> TOMAS Reimers: And edək bir-klass.
>> MIKE Rizzo: Bəli.
OK, belə ki, görək.
Əvəzinə faktiki bədən seçilməsi İndi, yalnız hər şeyi seçmək lazımdır
sinif hello, burada biz yalnız bir şey var.
Beləliklə, biz lazım deyil ki, narahat.
>> Mən yenileyin lazımdır.
Mən irəli getmək və basın lazımdır.
Və bu, sort, bir qəribə Slayd etdi ki, baxmaq etməyən up şey,
cəlbedici.
Ümumiyyətlə, onlar olduqca gözəl baxmaq yoxdur.
Bəzi - Mən bu tapmaq Səbəbi - etmədi.
Mən yalnız belə bir fade out edəcəyik Siz də ki, baxmaq olar.
Çox gözəl.
>> Və sonra, mən JavaScript açmaq əgər yenə təsəlli və biz görmək istəyirəm nə
biz bunu daxil fade zaman kimi görünür
İndi yalnız bu fade çağırırıq.
Və bu da geri fades
>> Eynilə, biz həqiqətən də keçə bilər bir dəlil fade və ya həyata fade,
olan növ, onun sürəti.
Belə nin irəli getmək bildirin və biz istəyirik demək Bu yavaş-yavaş getmək daxil fade
Mən hələ görünürdü tapmaq olduqca sürətli.
Amma bu daha gec idi.
>> TOMAS Reimers: Və tapmaq istəyirsinizsə Bu şeylər haqqında daha çox, daha,
yalnız jQuery sənədlərin getmək biz sizə verdiyi, və oxumaq etdiyiniz
bu yolu.
Onlar öz funksiyalarını sənədləşdirilməsi olduqca yaxşı.
>> MIKE Rizzo: OK.
Mən geri bu izin danışarlar.
Və biz son page haqqında danışmaq olar.
Yaxşı, biz Bootstrap ilə başa bilər.
Və sonra biz onu açmaq lazımdır Bəzi suallar üçün.
Və uşaqlar hər hansı bir fikir var ki, əgər Siz atmaq və görmək üçün cəhd etmək istərdim
biz onları həyata edə bilər, əgər Tez JavaScript.
>> Belə ki, həqiqətən tez Bootstrap haqqında olan avtomatik olaraq daxil edilmişdir
CSS qovluq müəyyən son problem və həqiqətən ilə bağlıdır Sizin
header.php.
Beləliklə, siz dərsləri əlavə edə bilər ki, bu Bootstrap ərzində müəyyən edilir.
Və avtomatik olaraq səpkili olardı müvafiq o şeyi.
>> TOMAS Reimers: Belə Bootstrap çox deyil insanlar tərəfindən hazırlanmış sehrli şey
Twitter.
Və nə bunu demək idi -
web etmək həqiqətən çətin idi əvvəl biz xüsusilə, gözəl baxmaq
ümumi komponentləri bir çox.
Belə ki, düymələri bir çox web eyni baxdı.
>> Mətn sahələrində bir çox edilə bilər standart mətn daha baxmaq
sahəsində yəqin ki, həqiqətən bilirik köhnə saytları və ya həqiqətən zəif
yalnız hərfi kimi baxmaq hansı saytları, mətn hər hansı formada olmadan mətn qutuları
kölgə və ya gözəl kontur hər cür.
Belə ki, nə Bootstrap etdi, yaxşı qeyd etdi biz bir çox ümumi üslub var.
Niyə biz CSS ümumi bir set yoxdur və JavaScript ümumi set
və eləcə də, hansı stil bilərsiniz insanlara açılan kimi şeylər verə bilər
menyular aşağı olan insanlara verə bilər modals kimi şeylər.
>> Modal səhifə üzərində pops nə bu, ciddi danışan zaman
daha inhibe edən bir şey, sizin qədər qarşılıqlı
ilə qarşılıqlı.
Bu kimi bir şey, siz əmin edilir Bu şey silmək istəyirsiniz?
Siz, həqiqətən, başqa bir şey edə bilməz Bəli demək və ya heç bir qədər.
>> Bu, bütün bu etdi və onu qablaşdırılmış birlikdə ifadə edərək, burada biz gedin.
İnsanlar artıq bu istifadə edə bilərsiniz.
Və siz artıq tapa bilərsiniz getbootstrap.com at.
Bu avtomatik olaraq daxil edilmişdir Son problem müəyyən.
Və siz xoş artıq etdiyiniz son layihə istifadə edin.
Və siz izləmək istəyirsinizsə Bootstrap almaq üçün keçid.
>> Siz burada görəcəksiniz edir CSS site Bootstrap.
Siz bootstrap görəcəksiniz.
Siz aşağıya fırladın əgər, siz görəcəksiniz yükləmək üçün necə, necə
yüklemek, et Cetera.
>> MIKE Rizzo: Və siz də edə bilərsiniz Maraqlıdır ki, onu dəyişdirin
mövzular nə cür ola istədiyiniz.
Hesab edirəm ki, mən etdim bir şey bilirik mənim Mən sinif etmişdir final layihə
onu dəyişdirin edilib.
Bootstrap A müxtəlif versiyası müxtəlif rəng sxemi idi və
bəzi müxtəlif formalı fərqli şeylər.
Mən ki, oynamaq üçün gəlir.
Bunu əyləncə növü var.
>> TOMAS Reimers: üstünde Axtarıram yenidən, bu Font çox oxşar
Awesome site.
Sənədlərin bir çox başlayacaq Siz var zaman oxşar görünür
kifayət qədər görüldü.
Belə ki, burada biz CSS Bu komponent.
Və siz görəcəksiniz necə şeyi stil bilərsiniz.
Siz masalar basın Belə ki, əgər, məsələn, Siz dərhal bir edə bilərsiniz
masa olduqca sadəcə əlavə bu sinif masa.
>> Düymələri üçün eyni şeylər.
Sadəcə sinif BTN və BTN əlavə əgər default və ya BTN əsas, siz
Bu düymələri hər hansı bir almaq Bu əvvəlcədən hazırlanmış üslub ilə.
Və sonra, sizin üçün arıyorsanız sadəcə daha mürəkkəb bir şey
w artıq üzərində, nə restyling üst biz arasında JavaScript nişanı
komponentlərinin bir dəstə var.
>> Belə ki, burada biz keçid, modals var, No pop-menülerde, Nişanlar, və Araç ipuçlarını.
A araç ipucu sizin altında pops nə siçan bir şey hover zaman.
Popovers, siqnallar, düymələr, qatlama akkordeondan nə
Onlar adətən adlı edirik.
Karusellər olan flip kimi images vasitəsilə.
>> Belə ki, bu komponentləri Bootstrap edir.
Mən tavsiye ederim yüksək onlara baxmaq getmək.
Bir JavaScript komponenti var və CSS komponenti.
Siz kimi istifadə çekinmeyin.
Biz onlara daxil çox getmək fikrində deyilik biz sənədləri hiss çünki
həqiqətən də edilir.
Və Bəli.
Bu barədə hər hansı bir sualınız var?
>> Həqiqətən sürətli Belə ki kimi: MIKE Rizzo yan, bu web page dizayn ki,
biz tez birlikdə qoymaq bu təqdimat
həqiqətən Bootstrap istifadə edilir.
Gördüyünüz kimi, biz bu basın zaman müxtəlif Nişanlar, biz, həqiqətən, heç istəyirik
bu cari index.html səhifəni tərk.
Belə ki, nə biz müxtəlif divs edir Bu index.html daxilində.
Və sonra, biz müxtəlif basın zaman nişanı, o, yalnız dəyişən
olan bir təzahürüdür.
>> Belə ki, müvafiq olaraq, onlara mövqelərini Səhifənin HTML dəyişir ki
cari nişanı aktiv kimi qeyd olunur, belə ki, Bu fərqli və görünür görünür
həqiqətən gözəl.
>> TOMAS Reimers: Belə ki, bütün görülən us demək olar ki, hər hansı bir CSS yazılı olmadan.
Biz də üstünde bir mövzu görmək, olan rəng bizim var.
Amma faktiki üzərinə qoyaraq Səhifənin yuxarı və edilməsi
Bu gedin Bootstrap idi.
Və sonra da başqa bir kitabxana üçün - bu biz danışdıq bir yox,
Əgər istəyirsinizsə Google bilər.
Bu prettify.js adlanır.
Və sizin kodu qeyd syntax edəcək CSS və JavaScript istifadə edərək, üçün.
>> Biz danışmaq istədiyiniz son şey Biz sizi həyata azad əvvəl
anlamaq üçün kitabxana baxmaq dünya necə istifadə etmək və ümid edirəm ki,
sənədləri oxumaq və nə tapmaq ehtiyac kitabxana tapmaq üçün necə.
Belə ki, ilk biz yalnız etdiyiniz edir Google təkan olacaq.
Google gedin.
>> Ki, biz nə sözün var zaman biz bir şey etmək lazımdır biz Google edir.
Bir JavaScript kitabxana olduğunu Mənə bir vaxt manipulyasiya imkan verir
faydalı yol?
Mən bilirəm belə ki, əgər yaradılması bəzi istifadəçi burada bir haqq-hesab, və bu edir
Cari vaxt, necə hesablamaq olar olmadan ilə fərq
özüm hesablamaq?
Belə ki, bu, həqiqətən, ortaq bir şey, JavaScript vaxt kitabxana.
Burada biz Moment.js - ən məşhur biridir.
>> Biz manipulyasiya üçün bir kitabxana lazımdır, əgər rəng etmək kimi bir şey
təsadüfi rəng bir dəstə yaratmaq -
bəlkə, bir yaratmaq üçün stil və ya bir şey -
biz kimi bir şey Google bilər JavaScript rəng kitabxana.
Və biz ilə açılır əmin deyiləm min və onlardan biri.
Siz onların vasitəsilə oxumaq xoş gəlmisiniz istəyirik.
>> Belə ki, çox şey - Əgər siz onları tapmaq zaman - gedir biri ev sahibliyi
saytlar host kodu.
Onlar bir neçə məşhur olanlardır.
, Ən məşhur uzaq, github.com edir.
Siz GitHub getmək əgər həqiqətən Normale ev sahibliyi edildi.
Belə ki, geri ki, bir getmək istəyirsinizsə.
Onlara göstər.
>> MIKE Rizzo: Və həqiqətən olduğu Siz hiss əgər bu, çox ev sahibliyi edir.
>> TOMAS Reimers: Bəli.
Belə ki, Normale üzərində getmək əgər və GitHub gedin.
Ki, idi?
>> MIKE Rizzo: Yəni az cat şey Bu GitHub rəmzidir.
>> TOMAS Reimers: Oh.
Belə ki, GitHub adlı bir metoddan istifadə edir Mağaza kodu Git.
Siz ki, və ya nə bilmirəm bu gözəl, sizi qorxudur.
Siz Git nə yoxdur GitHub bir Download düyməsinə malikdir, çünki
sağ alt.
>> Bilmək digər faydalı şey GitHub ən məhsullar haqqında
Bir mənə oxumaq olacaq.
Və onlar bir web yoxdur, əgər Mənə necə haqqında danışmaq oxumaq
hansı ki, siz onu istifadə necə yüklemek yoxdur, və sair və sair et Cetera.
Nə biz əsasən oldum siz ilə gəzinti.
>> MIKE Rizzo: Internet çıxmaqla.
>> TOMAS Reimers: Bu gözəl deyil.
Biz istəyirdim son iki şeyi haqqında danışmaq -
biz Git haqqında söhbət etdik -
giderme edir.
Və bu kimi müvafiq deyil olduğu kimi son məhsulun
Siz 50 tərk zaman.
Və məhsulları daxil çalıştırdığınızda kitabxana həyata və ya həyata
öz layihə, siz olacaq sualınız və ya istəyirik
suallara axtarmaq üçün gedir.
>> Yenə, Google.
Yəni sözün biz nə var.
Bu silly səs gedir.
Amma sanki, biz Google.
Və yenə, ilk şey biri Siz adətən daxil olacaq
gözəl olan stackoverflow.com, sual-cavab mənzərə.
>> Bu gözəl, həm də siz, çünki var suallara göndərmək və axtarmaq
cavab, həm də artıq bir çox var
orada content önceden.
Belə ki, adətən bir proqramlaşdırma Google zaman İlk daxilində sual
neçə artıq çalışan ola bilər hits Sizin problem dəstləri zamanı onu.
>> Və sonra, son həqiqətən qısa şey bu gün biz var - olan JsFiddle edir
ilə iş bir çox bunu JavaScript HTML CSS.
JsFiddle bir web app, hansı əsasən Sizin HTML etmək üçün imkan verir
JavaScript alt sol, və Sizin CSS sağ üst.
Və sonra bir sürətli render yarada İT və qarşılıqlı necə.
Insanlar çalışır zaman çox faydalıdır kimi konsepsiyasının bir sübut etmək
bu necə ki menyu aşağı açılan etmək.
Bəlkə tez açmaq və ya nə.
>> MIKE Rizzo: Belə ki, gedək qabaqda və bu basın.
A tez qeyd -
biz əvvəl, halbuki klik edirik.
JCorey Koreya da daxili var çıxır klik hadisə handler ki, bu
bu etdiyiniz rəqəmlər yalnız çünki istifadə edir çox şey etmək istəyirəm
Əgər bir şey basın istədiyiniz zaman.
>> Eynilə, bu da bir hover var.
Amma tam həcmi almaq üçün o, jQuery baxmaq
sənədləşdirmə və bunu.
Mən burada axmaq bir şey etdi.
>> TOMAS Reimers: Mən, həqiqətən, sürətli var burada proqram, deyir
klik düyməsini basın.
Sonra biz loop üçün var.
I az 404 üçün.
Bu, yalnız pop olacaq Bu alert messages.
>> MIKE Rizzo: Və nə idi kodu 404 HTML üçün edib?
Hər kəs yadda varmı?
Sağ, tapılmadı.
Chrome bu səliqəli əlavə şey harada siz -
>> TOMAS Reimers: insanlar kimi Çünki Mike bu bir çox bunu açılmış və
imkan verir annoying users, Siz info görmək.
>> MIKE Rizzo: Bəli.
>> TOMAS Reimers: biz hər hansı bir sualınız var Bu barədə, JavaScript haqqında
kitabxanalar, kitabxana tapmaq, və ya nə web inkişaf görünür
real dünyada kimi?
Biz zaman qarşı çalışan edirik.
Belə ki, biz olacaq əmin deyiləm həyata keçirmək üçün vaxt var
həqiqətən sürətli halda.
Biz yaxşı?
>> MIKE Rizzo: Anything uşaqlar istəyirəm kimi, həqiqətən sürətli görmək üçün iki
dəqiqə və ya az?
>> TOMAS Reimers: Anything biz aydınlaşdırmaq olar?
Necə yazmaq -
>> Auditoriya: [işitilemez]?
>> MIKE Rizzo: Bəli, belə that -
>> TOMAS Reimers: Siz yalnız hit bilər Veb Control-U.
>> MIKE Rizzo: Oh, mən bilmirdim.
>> TOMAS Reimers: I Bəli, düşünürəm.
Control-U. Bəli.
>> MIKE Rizzo: Oh, belə ki, var veb kodu.
Amma həqiqətən yüklemek istəyirsinizsə, bizim faylları və hər şey, bu ev sahibliyi edir
github.com haqqında
>> TOMAS Reimers: mənim ad zərbə -
Tomas Reimers - slash CS50 defis seminar.
>> MIKE Rizzo: Və siz orada hər şey tapa bilərsiniz.
>> TOMAS Reimers: Bu nə GitHub edir yolu ilə, kimi görünür.
Belə ki, yenə bir açıq mənbə görəndə layihə, adətən, onlar oxumaq olacaq
Siz oxuya bilərsiniz ki, mənə.
Geri getmək əgər, siz görəcəksiniz ki, Siz download zip var, hansı olacaq
Siz mənbə download imkan daxil kodu
Öz şey məhsul.
>> MIKE Rizzo: Bəli, əgər biz yalnız basın həqiqətən tez index.html haqqında -
>> TOMAS Reimers: Siz burada görəcəksiniz var bizim haqqinda üçün mənbə kodu.
>> MIKE Rizzo: Həmçinin, mən doğru təkan unuttum böyük masa ilə əvvəl
daxil, lakin bir masa da var biz daxil chmods üzvü
yalnız aydınlıq üçün.
Amma biz bütün yol aşağı diyirləyin əgər alt, biz, həqiqətən, çox etmədi
JavaScript ilə çox bütün bu stuff.
Hər şeyi yalnız var biz ki, başqa.
>> Belə ki, gələn üçün uşaqlar təşəkkür edirəm və dinləmək.
Biz bu həqiqətən faydalı idi ümid edirik.
Siz bağlı hər hansı bir JavaScript varsa sualınız və ya yalnız haqqında danışmaq istəyirəm
nə digər cool şeylər kimi nə JavaScript ilə edə bilərsiniz, biz olarıq
danışmaq.
>> TOMAS Reimers: Bir sual varsa layihə haqqında və ya bu ola bilər
müvafiq, biz yəqin ki, ətrafında qalmaq lazımdır Bundan sonra bir az.
Lakin başqa, var yaxşı bir həftə sonu.
>> MIKE Rizzo: Bəli, malikdirlər.
Uşaqlar baxın.
>> TOMAS Reimers: Görüþürüz.