JavaScript ve Web Geliştirme: Belge Nesne Modelini Kullanma

İlan

Bu makale size JavaScript'in birlikte çalıştığı belge iskeletini tanıtacaktır. Bu soyut belge nesne modeli hakkında çalışma bilgisine sahip olarak, JavaScript JavaScript Nedir ve İnternet Onsuz Var Olabilir mi?JavaScript, pek çok kişinin kabul ettiği şeylerden biridir. Herkes kullanıyor. Daha fazla oku herhangi bir web sayfasında çalışır.

Giriş

Web sayfaları ve JavaScript birlikte nasıl çalışır ve birbirleriyle nasıl konuşabilirler? Cevaplar Belge Nesne Modelinin nasıl çalıştığını anlamakta yatıyor.

DOM'nin Amacı

DOM, bir web sayfasının içeriğini düzenler ve bu sayfaya bir yol haritası sağlar. Model düğümlerden oluşur. Düğümler en iyi ağaç yapısı olarak düşünülen bir hiyerarşiye yerleştirilir. Herhangi bir HTML'yi alıp bu şekilde temsil edebilmeliyiz.

Örneğin, bu paragrafın metni Belge Nesne Modeli içindeki bir düğümdür. Paragraf başka bir düğüm ve metin düğümünün üst öğesidir. Belgenin kendisi sonuçta her ikisinin de bir üst düğümüdür.

Düğümleri tanımlayarak web sayfasında işlem yapmak için JavaScript yazabiliriz. Her içerik parçası bir düğüm olduğundan, değiştirmek istediğimiz varlıkla alakalı JavaScript yazabiliriz. Bunun şuna benzer olduğunu fark edeceksiniz

CSS nasıl çalışır Web Arayüzleri Oluşturma: Nereden BaşlamalıWeb arayüzlerinin nasıl bozulduğunu göstereceğiz, ardından kendinizi 21. yüzyıl web tasarımcısı yapmak için gereken temel kavramları, araçları ve yapı taşlarını göstereceğiz. Daha fazla oku : tıpkı JavaScript denetimleri davranışı gibi HTML öğelerinin id ve sınıf özelliklerini kullanarak içeriğe stil veya görsel görünüm uygular.

CSS ve JavaScript'in DOM'da bulunmadığını, ancak bunun dışında olduğunu belirtmek önemlidir. İkisi de DOM'da yaşamak yerine içeriği manipüle ederler.

Kodu Yeniden Kullanma

Web sayfalarının kaynak kodu neden bu şekilde yönetiliyor? İki ana neden vardır:

1. JavaScript'i ayrı dosyalarda saklamak, kodun daha kolay kullanılmasını sağlar. JavaScript satıriçi olarak yazıldığında, ilişkili olduğu içeriğin yanında, aynı işlevin başka bir yerde gerçekleşmesi için kopyalanması gerekir.
2. Harici bir dosyaya ayrılmış JavaScript, web sayfasının (JavaScript) işlevselliğini içerikten (HTML) kaldırarak kaynak kodunu daha okunabilir hale getirir.

DOM Düğümleri

Oluşturduğunuz ve kontrol ettiğiniz düğümler, HTML spesifikasyonu ve tarayıcıların destekledikleriyle sınırlıdır. Bunun bir nedeni HTML5’in yeni üst düzey öğeleri tanıtması önemliydi HTML5 Nedir ve Göz Atma Şeklimizi Nasıl Değiştirir? [Açıklamalar MakeUseOf]Son birkaç yıldır, arada bir HTML5 terimini duymuş olabilirsiniz. Web geliştirme hakkında bir şey biliyor olsanız da olmasanız da, konsept biraz belirsiz ve kafa karıştırıcı olabilir. Açıkçası, ... Daha fazla oku .

Amaçlarımız için, en önemli düğüm türleri şunlardır:

• eleman
• nitelik
• Metin

olmasına rağmen şartname aslında toplamda on iki tanesini listeler.

DOM'de Düğüm Oluşturmak için Komut Dosyası Kullanma

Basit bir gösterim amacıyla, belirli bir öğeyi oluşturmak için JavaScript kullanacağız.

Burada size web'in en temel ve yaygın web sayfası nesnelerinden birini, başlığı oluşturmak için JS'nin ne kadar güçlü olduğunu göstereceğiz.

Bu örnekle birlikte takip etmek için, tüm sanal sunucuyu oluşturmak zahmete değmez Sanal Web Geliştirme Ortamı ve Sunucusu Nasıl OluşturulurPeki, çoklu görev yapabilme yeteneğinizi, çalışacakları yerel bağlamda web uygulamaları geliştirme gereksiniminizle nasıl dengelersiniz? Sanal makineleri girin. Daha fazla oku , çevrimiçi bir sanal alan kullanın. JSBin gibi denemeler yapmak için hafif bir oyun alanı istersiniz. JSBin harika çünkü çok bölmeli ve her şeyi görmek ve değiştirmek için bir yol içeriyor: HTML, JS, CSS ve web sayfası önizlemesi aynı anda.

(Codepen benzerdir ve bu örnek uğruna da aynı şekilde çalışır.)

JSBin, daha sonra paylaşılabilecek JS not defteri için dinamik olarak URL'ler oluşturabilir. İşte bu örnek için oluşturduğum.

Vücutta yeni bir H1 başlığı oluşturmak için aşağıdaki snippet'leri çoğaltıp yorumladım:

• HTML Pasajı
• JavaScript Snippet'i

  // yeni bir h1 öğesini tutması için yeni bir değişken beyan et var newHeading = document.createElement ("h1"); // metin düğümünü belgeye ekleyin var h1Text = document.createTextNode ("Başlık Seviyesi 1"); // bunu newHeading.appendChild (h1Text) yeni başlığının alt düğümü yapın; // bunu "bt" olarak tanımlanan öğenin alt öğesi olarak ekle document.getElementById ("bt"). appendChild (newHeading);

Bu da yeni bir H1 öğesi oluşturur ve içeriği doğrudan

açılış etiketi.

Sol bölmedeki kaynak HTML'nin değişmediğini unutmayın. Bu kodun bu örnekte okunması oldukça kolaydır. Gelişmiş Javascript'te işler çok daha karmaşık hale gelebilir.

JavaScript'in Sözcüksel Yapısı Hakkında Biraz

Yukarıdaki pasaj biraz açıklama getirmektedir.

• var kodunuzun kullanması için rasgele bir değer depolayan bir değişken oluşturur.
• = bir atama operatörüdür. Burada ile çalışır var terimini ve tam bir bildirim oluşturmak için yeni değişkenin adını (ör. newHeading) kullanın.
• object.method gibi nesneleri ayırmak için "nokta" sözdizimini kullanan bir çağrıdır. belge, bunlarla ilgili olarak kullanılan yöntemlerden, getElementById.
  • Kavramı Programlamada “nesneler” "Nesneye Yönelik" Programlama Adını Nereden Aldı?Nesneye Dayalı, programlama çevrelerinde duyduğunuz rastgele bir terim değildir. Adın arkasında bir neden var - ama ne? Programlama kavramlarının bazı temellerini araştırırken ve açıklarken bana katılın ... Daha fazla oku çok tartışmayı hak ediyor ve bu makalenin kapsamı dışında. Bunlar uygulamanızın önemli bileşenleri olduğunu söylemek yeterlidir.
  • Yöntemler beklediğiniz şeydir: nesnelere uygulanabilecek belirli bir yordam veya planlanmış eylem.

Seni kesinlikle bir sürü harika ile kapladık JavaScript öğrenmek için kaynaklar En İyi 5 Udemy Kursuyla JavaScript'i Gerçekten ÖğreninJavaScript, web'in programlama dilidir. JavaScript öğrenmek için bir nedeniniz varsa, Udemy'nin bu beş mükemmel kursu kodlama yolculuğunuza başlayabileceğiniz bir yer olabilir. Daha fazla oku . Tekrar kontrol edin programlama bölümüne gidin.

Sıradaki ne

JavaScript'i kullanan en popüler çerçevelerden biri JQuery Web'i Etkileşimli Hale Getirme: jQuery'ye GirişjQuery, neredeyse her modern web sitesinin kullandığı bir istemci tarafı komut dosyası kitaplığıdır - web sitelerini etkileşimli hale getirir. Tek Javascript kütüphanesi değil, ancak en gelişmiş, en desteklenen ve en yaygın kullanılan kütüphanedir ... Daha fazla oku . Zengin web sayfalarının ve uygulamalarının en yeni yinelemesinin önemli bir temelidir ve bundan sonra başlamak isteyebilirsiniz.

Bu makale JavaScript'i başlatma hakkında daha fazla bilgi edinmenize yardımcı oldu mu? Farklı bir yaklaşımınız mı var? Aşağıdaki yorumlarda sizden haber almak istiyoruz!

İmaj Kredisi: Shutterstock.com adresinden Imagentle