Doug LLOYD: Bu videoda, biz istedik Ayrı dikkat seslenmesini
çok özel için JavaScript elemanı
kullanışlı bulabileceğiniz ne zaman başlıyoruz
web sayfalarını manipüle çalışmak ve Web sayfasının içeriğini değiştirerek
anında.
Ve bu kavramı var Document Object Model.
Yani biz, bizim videoda gördüm JavaScript, nesneler çok esnektir.
>> Ve onlar çeşitli alanları içerebilir.
Ve biz bir sürü gitmedi gerçi detay, bu alanlar ya da özellikleri,
biz muhtemelen daha olur uygun onları arayın
Hatta, bir nesnenin bağlamında, bu özellikler diğer nesneleri olabilir.
Ve bu nesnelerin içinde diğer amaçları olabilir.
>> Bu çok büyük bir nesne var diğer nesnelerin bir sürü
ve bunun içinde, hangi tür Büyük bir ağacın bu fikri oluşturur.
Şimdi, belge nesnesi olan bir JavaScript çok özel nesne
Bu tüm web organize şemsiye bu tür altındaki sayfa
Bir nesnenin.
Ve böylece, belgenin içinde Nesne sunan nesnelerdir
Web sayfasının baş ve gövde.
>> Bunların İçinde diğer vardır nesneler, vesaire, vesaire,
tüm web sayfası vardır kadar bu büyük nesne düzenlenmiştir.
Baş sağa, burada ne var?
Peki, biz nasıl çalıştığını biliyorum JavaScript nesnelerle.
>> Biz bir nesne varsa, böylece Bu, bizim tüm web sayfası anlamına gelir
Doğru arayarak demektir yöntemleri o nesneyi işlemek için
veya bazı modifiye özelliklerinin biz
unsurlarını değiştirebilir Bizim sayfa programlı
JavaScript kullanarak yerine sahip HTML, diyelim ki, şeyleri kod.
Yani burada bir örnek web sayfası çok basit, değil mi?
Bu HTML etiketleri, kafa var.
>> Içinde bir başlık, merhaba dünya var.
Sonra bir vücuda sahip.
Bunun içinde, ben Üç farklı şeyler.
Ben, bir h2 başlık etiketine sahip Bir paragraf, bir bağlantı.
Bu çok basit bir web sayfası.
>> Peki, olabilir belge gibi bu görünüm için itiraz?
Eh, biraz var Belki ilk başta korkutucu.
Ama bu gerçekten sadece bir büyük ağaç var.
Ve bunun çok kökünde belgedir.
>> Belge başka bir şeydir Inside Benim sayfanın HTML atıfta nesnesi.
Ve benim sayfa HTML tüm bu olduğunu.
Ve sonra HTML içine Nesne, bir kafa nesnesi var,
orada hangi şeyi ifade eder.
>> Ve orada iç, Ben bir başlık nesnesi var.
Ve orada iç, ben başka var bu sadece merhaba dünya nesne.
Benim bir vücuda sahip olabilir Böyle temsil etti.
>> Vücudumun içinde ben h2 var Nesne ve paragraf için p nesnesi
ve bir bağlantı için bir bir nesne.
Ve böylece tüm bu hiyerarşi Büyük bir ağaç olarak temsil edilebilir
Daha küçük Little sürü şeyler o dışarı çıkıyor.
Şimdi, tabii ki, ne zaman Biz biz, programlama ediyoruz
Büyük bir ağaç gibi şeyler düşünmüyorum.
Biz gerçek görmek istiyorum Kod ile ilgili şeyler.
>> Ve neyse ki, biz Bizim geliştirici araçları kullanmak
aslında bakmak için Bu web sitesinin belge nesnesi.
Ve en yapalım.
Bu yüzden bir tarayıcı sekmesi açtık.
>> Ve ben Geliştirici Araçları açtık.
Ve JavaScript benim video, ben Konsol olmadığı belirtilen
Sadece bir yerde nerede Biz bilgiyi yazdırmak,
o da bir yerde nerede Biz giriş bilgilerinizi yapabilirsiniz.
Bu bağlamda, ya Ben söylemek için gidiyorum
Ben geri almak istiyorum Belge nesneler,
bu yüzden ona bir göz başlayabilirsiniz.
Peki bunu nasıl yapabilirim?
Eh, ben istiyorum gerçekten güzel organize,
Ben console.dir, D-I-R söylemek için gidiyorum. Şimdi, ben sadece baskı console.log kullanın
dışında bir şey çok basit.
Ama bu organize etmek istiyorsanız hiyerarşik bir nesne gibi,
Ben bu tür yapısal istiyorum Bir dizin yapısı gibi.
>> Yani belgeyi console.dir istiyorum.
Ben Enter tuşuna gidiyorum.
Ve hemen altında şimdi, ve ben, burada yakınlaştırmak olacak
Ben bu yanıtı belgesini var Bunun yanında küçük bir ok ile.
Şimdi, bu oku açtığınızda, bir sürü şey orada oluyor.
>> Ama biz çok göz ardı etmek gidiyoruz o ve odak sadece tür
En önemli kısmı, biz o kadar Bu belgeyi gezinmek için başlayabilirsiniz.
DOM daha çok şey var düğümleri ve alt düğümleri sadece ebeveyn.
Yardımcı bir sürü var.
>> Yani bu kadar açacağım.
Ve bir sürü var şeyler olduğunu açılır.
Ama umurumda hepsi Burada, çocuk düğümleri.
En bu açalım.
>> Orada Inside görüyorum Tanıdık bir şey, HTML.
Bizim belgenin içinde çok Bir seviye aşağı HTML.
Bunu açmak.
Ne bekliyoruz?
>> Bizim diyagramı hatırlayacak olursak, Biz HTML içinde ne bulmak gerekir?
Ağaç altında hangi iki düğüm vardır?
Hadi bulalım.
Biz HTML açın.
Biz onun alt düğümleri inmek.
>> Bu açık Pop.
Baş ve vücut var.
Ve biz başını açabilirsiniz.
Onun alt düğümleri gidin.
Peki, başlık var.
>> Ve biz gidebiliriz ve bu şekilde sonsuza dek.
Biz de beden ile bu yapabilirdi.
Ama bize bakmak için bir yol var Büyük bir nesne olarak düzenlenen belge.
Biz bakarsanız bir büyük Bir çok benziyor nesne
kodu gibi, biz başlayabiliriz demektir kullanarak bu büyük nesneyi işlemek için
Kod ne değiştirmek için bizim Web sitesi görünüyor ve hissediyor.
>> Yani oldukça güçlü bir araç var Şimdi bizim emrinde.
Biz sadece gördüğümüz gibi Yani, Belge nesnesi
ve bunun içinde tüm nesneleri Sadece, özellikler ve yöntemler var
biz ettik başka bir nesne gibi JavaScript ile çalışmaktadır.
Ama biz bu özellikleri kullanabilir ve tür detaya bu yöntemleri kullanın
ve büyük belgeden almak alt ve alt ve alt
ince ve ince taneler detay, biz gelene kadar
Bir çok özel bir parça olsun bizim Biz değiştirmek istediğiniz web sayfası.
>> Ve biz özelliklerini güncellemek zaman Nesne Belge ya da bu yöntemleri çağırmak,
şeyler bizim web sayfasında ortaya çıkabilir.
Ve biz herhangi bir serinletici yapmanız gerekmez Bu değişikliklerin etkili olması için.
>> Ve bu oldukça serin yetenek var Biz koduyla çalışırken var.
Peki bu özelliklerin bazıları nelerdir Bir belge nesnesi parçası olduğunu nelerdir?
Eh, muhtemelen gördüm Bunların çift gerçekten hızlı
Biz sıkıştırma gibi Dev Belgede
Nesne biz sadece web tarayıcısında gördüm.
>> Fakat bu özelliklerin bir çift İç HTML gibi şeyler olabilir.
Ve hatta bana çağırmak olabilir JavaScript video istimal bu
en sonunda ben olaylar hakkında konuşuyordu.
Bu iç HTML neydi?
Eh, bu sadece ne etiketleri arasında.
>> Ve böylece iç HTML, Örneğin, başlığın
biz tutmuş eğer etiket, gidiş Bir an önce bu örnekte
merhaba dünya olurdu.
Bu bizim sayfanın başlığı oldu.
Diğer özellikler düğüm adını, dahil olduğu
Bir HTML adıdır başlığı gibi eleman.
Kimliği Kimliği, Bir HTML elemanı bağlıyorlar.
>> Biz özel işaret olduğunu hatırlayın Bizim HTML özgü unsurlar
genellikle kimlik özniteliği ile CSS bağlamında kullanışlı geliyor,
Özellikle.
Bir referans olan üst düğüm, sadece yukarı yukarıda beni DOM ne.
Ve çocuk düğümleri, hangi bir aşağı bana aşağıda ne referans.
Ve biz bu bir sürü gördüm Sadece bakarak.
Elimizdeki nasıl Çocuk düğümleri, işte ağaca alt ve alt.
>> , Nitelikleri bu sadece bir dizi var HTML elemanının bağlıyor.
Yani niteliklerin bir örnek olabilir Bir resim etiketi varsa olabilir,
genellikle bir kaynak niteliği vardır, belki yükseklik ve genişlik nitelik.
Ve böylece sadece bir dizi olurdu ilişkili niteliklerin tüm
HTML elemanı ile.
>> Stil başka biri olduğunu CSS temsil ediyor
Belirli bir elemanın stil.
Ve daha sonra bu Video, spesifik olarak olacak
kaldıraç tarzı bir çift yapmak sitemize değişiklikleri.
Yani o bazı özellikler vardır.
>> Ve ayrıca bazı vardır biz can yöntemleri
Ayrıca daha hızlı belki yalıtmak için kullanabileceğiniz Belge Nesne elemanları.
Belki de çok yönlü Bu varlık getElementById evi.
Yani, çünkü böyle bir şey diyebilirsiniz o Belgenin bir yöntem olduğunu hatırlıyorum
, Document.getElementById Nesne.
>> Ve bu parantez içinde belirtmek Belirli kimliğine sahip bir HTML elemanı
Daha önce var olduğunu nitelik ayarlamak, ve ben hemen olacak
Bu elemanın doğru gitmek Genel web sitesi.
Yani belki delmek zorunda değilsiniz Her tek kat aşağı.
Ben sadece bunu bulmak için bu yöntemi kullanabilirsiniz, tür bir ısı arayan füze gibi
sağ?
Bu sadece gider ve bulur tam olarak aradığını.
>> GetElementsByTagName olduğunu ruhu çok benzer.
Belki tüm bu bulacağını cesur etiketleri veya p etiketlerinin tüm
ve bana her şeyi bir dizi vermek Ben daha sonra işe yarayabilir.
appendChild şey ekler aşağı ağacında bir düzey.
>> Yani tamamen yeni bir ekleyebilirsiniz eleman bir seviye daha düşük.
Yoksa bu bir öğe kaldırabilirsiniz hem de ben istiyorum bir seviye düşük
Benim web sayfasından şey silmek için.
Şimdi hızlı bir kodlama notu ve hızlı baş ağrısı, umarım not kaydetme.
>> getElementById-- d küçük olduğunu.
Ben kaç kere söyleyemem Kullanılmış getElementById ve büyük harfle
Orada, d.
Gerçekten yaygın çünkü.
Biz kelime kimliği yazarsanız, bu kadar Genellikle sermaye I başkenti D.
Ve benim kod sadece çalışmaz.
Ve ben neden anlamaya olamaz.
Bu gerçekten, gerçekten, gerçekten bir Herkes yapar ortak hata,
bile uzmanlar Sonsuza dek bu işi yapıyorsun.
Yani sadece, getElementById farkında olmak, O d küçük olduğunu.
Ve umarım ki birkaç kaydeder kalp ağrısı en azından dakika.
>> Peki tüm bu bize ne anlatıyor?
Biz bu yöntemleri var.
Biz, bu özelliklere sahiptir.
Şimdi, biz başlamak eğer Belge, belge.
ne olursa olsun, biz şimdi herhangi bir alabilirsiniz Web sayfamızın tek parça
Biz JavaScript kullanarak istediğiniz Sadece bu yöntemleri arayarak
ve özellikleri yararlanarak Biz çeşitli yerlerde bulmak.
>> Bu, bu söz alabilirsiniz document.getElementById,
Belki uzun bir etiket adı var, belki daha sonra daha fazla çağrı yapın.
Things biraz wordy alabilirsiniz.
Ve programcılar, sen ettik olarak Muhtemelen bu videoların çoğunda görülen,
Biz wordy şeyleri sevmiyorum.
>> Biz hızlı bir şeyler yapabilmek için istiyorum.
Yani biz daha istiyoruz özlü yol şey söylemek.
Yani için potansiyel bu tür bir şeyin kavramı jQuery denir.
Şimdi jQuery JavaScript değildir.
Bu JavaScript parçası değil.
>> O yazılmıştır bir kütüphane bazı JavaScript programcılar tarafından
Yaklaşık 10 yıl önce.
Ve hedefine bu ne basitleştirmek için denilen bir istemci tarafı komut dosyası, hangi
biz sadece temelde ne DOM manipülasyonlar ile bahsediyoruz.
Eğer öyleyse ben değiştirmek istedim benim web sayfasının arka plan rengini, belki
Belirli bir Div.
>> Burada, ben görünüşe alıyorum ElementById colorDiv.
Ve ben onun arka plan rengini ayarlamak istiyorum.
Ben sadece saf JavaScript kullanarak ediyorsam Document Object Model kullanılarak,
Doğru, bir sürü şey var? document.getElementById
colorDiv.style.backgroundColor yeşil =.
>> Yaşasın.
Yani çok oldu.
O da, yazın bir çok şey.
Ve böylece jQuery, belki söyleyebiliriz Bu biraz daha özlü.
Bunu olmanın kapalı ticaret belki biraz var bit aniden daha şifreli,
sağ?
>> En azından uzun biraz daha olduğunu biz ne yapıyoruz olarak açıklayıcı.
Bu dolar işareti, parantez, tek tırnak, karma, colorDiv, değil mi?
Bu ne anlama gelir?
Peki, bu sadece temelde document.getElementById colorDiv.
>> Ama kestirme bu tür var jQuery kullanarak bunu yapmanın yolu.
Sadece şimdi bir göz atalım farklı şekillerde bir çift
Aslında belki o Bu Belge Nesne kullanmak
Model Sitemde parçalarını işlemek için.
Özellikle, gidiyoruz manipüle üzerinde çalışıyor
Belirli bir renk Bir web sayfasında Div, colorDiv.
Yani bu bir göz atalım.
Pekala.
Yani bir sayfada değilim.
Indirmek zaman test.html denir Bu, bu tamircilik istiyorum.
Ve ben bir sürü var Bu sayfadaki düğmeler.
Ve ben tek tek işlevleri söylüyorum arka plan rengi, yeşil, mor için,
turuncu, kırmızı, mavi, tek fonksiyon arka plan rengi için, olay işleyicisi
arka plan rengi ve jQuery kullanarak için.
Ne bahsediyorum ben yapıyorum?
Bu yüzden düğmeleri gördüm.
Şimdi, bir göz atalım Burada kaynak kodunun bazılarıdır.
Biz test.html ile başlayacağız.
Arka plan için ayrı ayrı fonksiyonlar Yani rengi Burada yazdığınız budur.
Bana biraz kaydırma edelim.
>> Ve o ben fark edeceksiniz Bu düğmeleri tanımladığınız
Bu düğmeye tıklandığında demek, mor açmak işlevini çağırın.
Bu düğmeye tıklayarak olduğunda, daha doğrusu, Fonksiyon yeşile çağrı,
kırmızı renge, turuncu, mavi açın.
Muhtemelen bu olduğunu tahmin edebilirsiniz En iyi tasarım, belki değil
anlamda, değil mi?
>> Elimde olsa güzel olurdu Daha genel bir yaklaşım var.
Peki, ilk biz bir göz atacağız Bu beş fonksiyonları ne
document.getElementById mor colorDiv.style.background =
kırmızı, yeşil, turuncu sırasıyla ve mavi.
Yani, özellikle iyi tasarım.
>> Bir sonraki düğmeler kümesi Ben yazdım olduğunu var
denilen tek bir işlev görünüşte rengini değiştirmek
Argüman olarak bir dize kabul eder.
Yani bu biraz daha iyidir.
Kırmızı, mor, yeşil, turuncu, mavi artık bir argümandır.
Bu yüzden bir daha genel yazdım dava JavaScript işlevi,
hangi böyle bir şey görünebilir.
Ben geçiyorum.
Bu işlev değişikliği renk renk olarak adlandırılan bir argüman bekliyor.
Ve ben set diyorum renk arka plan rengi.
Yani burada ben burada ne var temsil eder.
Yani biraz daha iyi.
>> Ama mümkün olabilir Bundan daha iyisini.
Biz bakmak için aşağı giderseniz Olay işleyicisi duruma,
Şimdi tüm bu çağrılar aynı görünüyor.
Eğer hatırlayacak olursak bizim için olay işleyicileri tartışma,
Ben hakkında bilgi alabilirsiniz Bu düğmeler tıklandığında ve kullanan oldu.
>> Ve böylece event.JavaScript içinde, ben oldum Yazılı değişim renk olayı, hangi
tıklandığında hangi düğme rakamlar.
Bu tetikleyici nesne hattı.
Ve sonra burada, gerçekten söz alır.
Ama ne yapıyorum ben ise arka plan ayarlama
triggerObject inner.HTML renk.
Bu metin var düğme etiketleri arasında.
>> Ve sonra ben görünüşe sahip küçük harfe ayarlamak için.
Ve ben bir bütününü dönüştürebilirsiniz nasıl Dize kullanarak JavaScript küçük harfe
bu yöntem küçük harfe.
Ben bir renk ayarladığınızda Çünkü, Burada yapmaya çalışıyorum olarak,
Renk tüm küçük olmalıdır.
>> Ama ben vardı düğmesi, Biz başka bir göz atın eğer,
metin olduğunu fark mor bir sermaye P yazılı.
Ve sonra çok Burada alt görünüşte
denemek ve aynı zamanda bu kullanarak jQuery yok.
Ve bu durumda, aslında değilim tüm bir işlevinin çağrılması.
Ben sadece sınıf olduğumu söyledim Bu düğme için kullanan bir jQ düğmesi bulunur.
Bu kadar.
>> Peki nasıl jQuery Ben ne yapıyorum biliyor mu?
Peki, bu avantajlarından biridir jQuery dezavantajlarını çizgi.
Bana bir şeyler yapmak için izin verebilirsiniz çok özlü, ama belki değil
olarak sezgisel.
Belki bu diğer üç yapmak bir biraz daha ben ne yapıyorum seziyorum.
Burada olsa ne oluyor?
>> Görünüşe göre, yaratma Bir anonim işlev
Bu yükler zaman benim belge böylece document.ready, hazır
bazı fonksiyon ne olacak.
Temelde, ne zaman bir belge hazır mı?
Benim sayfa yüklendiğinde bu.
>> Yani en kısa sürede benim sayfa yüklendiğinde gibi, fonksiyonu aşağıdaki her zaman hazır olduğunu.
O diyor ki, eğer tip jQButton bir nesne, ya da sınıf jQButton tıklandığında ise,
Bu işlevi gerçekleştirmek.
Yani burada iki anonim fonksiyonlar var, bir başka içinde tanımlanmış.
>> Benim bütün bağlamda Yani Burada şimdiye kadar benim sayfası
o yüklediğinde, bu işlevini çağırır.
Ve bu fonksiyon bekliyor Bir düğme için tıklanma.
Ve bir düğmeye tıklandığında, jQ düğmesi özellikle tıklandığında,
Bu diğer aramalar fonksiyonu, gidiyor
arka plan ayarlamak için colorDiv rengi olması
herhangi bir metni etiketleri arasında yer almaktadır.
>> Bu kavramıdır hangi düğme tıklandığında edildi.
Ama aksi takdirde, bu tür bir Bir olaya benzer davranıyor.
Sadece aynı yolu ben jQuery bu ifade ediyorum.
Yine, bu muhtemelen bir çok daha korkutucu.
Bu kadar net değil event.js gibi bir şey,
hangi belki biraz daha ayrıntılı, ama biraz daha az
korkutucu.
>> Ama benim tarayıcı üzerinde geri pop eğer Pencere, ben de clicking-- başlarsanız,
o mor olarak değiştirildi.
Bu dize yöntemi kullanılarak yeşil.
Bu olay işleyicisi kullanarak turuncu.
>> Bu hak, jQuery kullanarak kırmızı?
Hepsi aynı davranır.
Onlar sadece farklı kullanarak bunu Sorunu çözmek için yaklaşımlar.
Çok daha fazla var jQuery sonra biz kesinlikle konum
Bu video hakkında konuşacağım.
Daha fazla bilgi edinmek istiyorsanız, bunu yapabilirsiniz belgelerin jQuery tür gitmek
ve yaklaşık biraz daha fazla bilgi Bu çok esnek bir kütüphane, burada
istemci tarafında yapmak için harika Böyle ne yaptığımızı olarak scripting
göz işlemek için ve web sayfasının hissediyorum
Belge Nesnesi Modeli ile.
Ben Doug Lloyd değilim.
Bu CS50 olduğunu.