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.