JavaScript ile Sunum – Blog Yazma – Web Tasarımı Yapımı – Web Tasarımı YouTube Videosu Yapımı – Web Sitesi Tasarlama Fiyatları
JavaScript ile Sunum Katmanını Değiştirme
Java’da detayların altında ne olduğunu görmek için bir HTML belgesini ayırdınız. Bazı kablolarla uğraştınız, bazı parçaları değiştirdiniz ve motoru tertemiz hale getirdiniz. Şimdi, belgeye CSS ile yeni bir boya katmanının nasıl verileceğine ve olaylar aracılığıyla nasıl başlatılacağına bakmanın zamanı geldi. Aradığınız şey güzellik ise, şanslısınız, çünkü sunum katmanından başlıyoruz.
HTML belgesindeki her öğenin özelliklerinden biri, tüm görsel özelliklerinin bir koleksiyonu olan bir stil niteliğine sahiptir. Niteliğin değerini okuyabilir veya yazabilirsiniz ve niteliğe bir değer yazarsanız, öğenin görünümünü ve verdiği hissi hemen değiştirirsiniz.
Komut dosyası, belgedeki ilk H3 öğesini alır ve ADDRESS öğesini DOMhelp kitaplığının en yakınSibling yardımcı yöntemi aracılığıyla alır (yöntem, metin düğümleri olarak görülen satır sonlarını değil, sonraki öğeyi almasını sağlar).
Ardından, adresi gizlemek için stil koleksiyonunun görüntüleme özelliğini değiştirir. Başlığın içindeki metni, peekaboo işlevine işaret eden bir bağlantıyla değiştirir. Bağlantı, klavye kullanıcılarının adresi genişletmesine ve daraltmasına izin vermek için gereklidir. Fare kullanıcıları başlığa kolayca tıklayabilirken, belgeye dokunarak erişilemez.
peekaboo() işlevi, adresin stil koleksiyonunun görüntüleme değerini okur ve gösterim yok olarak ayarlandıysa boş bir dizeyle ve gösterim, adresi etkin bir şekilde gizleyen ve gösteren boş bir dizeden başka bir şeye ayarlandığında hiçbiri ile değiştirir.
■Not : Geçmişte, hiç birinin tersi olarak element.style.display=’block’ kullanan komut dosyalarıyla karşılaşmış olabilirsiniz. Bu, çoğu öğe için işe yarar, ancak yalnızca görüntüleme değerini hiçbir şeye ayarlamak, onu mutlaka bloke edilmesi gerekmeyen ilk görüntüleme değerine sıfırlar; satır içi veya tablo satırı olabilir. Boş bir dize eklerseniz, uygun değeri ayarlamak için onu tarayıcıya bırakırsınız; aksi takdirde, farklı öğeler için bir anahtar bloğu veya if koşulları eklemeniz gerekir.
Stil koleksiyonu, farklı CSS seçicilerinin özellik gösterimini kullanarak değiştirebileceğiniz geçerli öğenin tüm stil ayarlarını içerir. Özellik gösterimi için temel kural, CSS seçicideki tireyi kaldırmanız ve bunun için camelCase kullanmanızdır. Örneğin, line-height lineHeight olur ve border-right borderRight olur.
Bunların hepsini getAttribute() ve setAttribute(); kullanarak okuyup yazabilirsiniz; ancak bunları yazarsanız, JavaScript nesne özelliği sözdizimini kullanarak style niteliğini bir dize değerine ayarlamak daha hızlı olabilir. Tarayıcı için, aşağıdaki örneklerin ikisi de aynıdır, ancak ikincisi biraz daha hızlı oluşturulabilir ve JavaScript’inizi daha kısa tutabilir.
Modern web tasarımında stil niteliklerini doğrudan ayarlamak hoş karşılanmazken (davranış ve sunumu etkili bir şekilde karıştırıyorsunuz ve bakımı çok daha zorlaştırıyorsunuz), stil niteliklerini doğrudan JavaScript aracılığıyla ayarlamanız gereken durumlar vardır; örneğin:
• CSS desteği söz konusu olduğunda tarayıcı eksikliklerini düzeltme
• Düzen hatalarını düzeltmek için öğelerin boyutlarını dinamik olarak değiştirme
• Belgenin bölümlerini canlandırma
• Sürükle ve bırak işleviyle zengin kullanıcı arayüzleri oluşturma
■Not: Bu bölümdeki ilk iki konuyu duyacaksınız; ancak bunlar çok gelişmiş JavaScript konuları olduğundan ve bu kitabın kapsamı dışında kalan birçok açıklamaya ihtiyaç duyduğundan, burada animasyon veya sürükle ve bırak örnekleri bulamayacaksınız. Kullanıma hazır olarak kullanabileceğiniz örnekler bulacaksınız.
HTML CSS slider örnekleri
Slider image JavaScript
HTML slider indir
Slayt Kodu
JavaScript Ders Notları
HTML Slider çeşitleri
JavaScript Dersleri
JavaScript çıktı alma
Basit stil görevlerinde, komut dosyanızın bakımını basitleştirmek için JavaScript’te görünüm ve hissi tanımlamaktan kaçınmalısınız. İçinde, modern web geliştirmenin ana özelliğinden bahsettik.
JavaScript’te çok sayıda stil tanımı kullanıyorsanız, sunum ve davranış katmanlarını karıştırırsınız. Birkaç ay sonra uygulamanızın görünümünün ve hissinin değişmesi gerekiyorsa, sizin veya bazı üçüncü taraf geliştiricilerin komut dosyası kodunuzu yeniden gözden geçirmesi ve içindeki tüm ayarları değiştirmesi gerekecektir. Görünümü ve hissi CSS belgesine ayırabileceğiniz için bu ne gerekli ne de tavsiye edilir.
Bu ayrımı, öğelerin sınıf özniteliğini dinamik olarak değiştirerek elde edebilirsiniz. Bu şekilde sitenizin stil sayfasında tanımlanan stil ayarlarını uygulayabilir veya kaldırabilirsiniz. CSS tasarımcısının komut dosyası kodunuz hakkında endişelenmesi gerekmez ve CSS’yi destekleme konusunda tarayıcıların sahip olduğu tüm sorunları bilmeniz gerekmez.
Değerini boş bir dizeye ayarlayarak sınıfı kaldırabilirsiniz. Yine, removeAttribute() farklı tarayıcılarda güvenilir şekilde çalışmaz. Bildiğiniz gibi, HTML öğelerine atanmış birden fazla CSS sınıfı olabilir. Aşağıdaki türden bir yapı, geçerli HTML’dir ve bazen iyi bir fikirdir.
Bu sorunu yardımcı bir yöntemle çözebilirsiniz. Sınıfları dinamik olarak eklemek ve kaldırmak için bu yardımcı yöntemi yazmak kolay olmalıdır: className özniteliği boş değilse ve boşsa boşluk olmadan önüne bir boşluk gelen bir sınıf değeri eklersiniz. Tıpkı bir dizgeden bir kelimeyi kaldırdığınız gibi, sınıf adını orijinal değerinden kaldırırsınız.
Ancak, yetim alanlarla ilgili tarayıcı sorunlarını çözmeniz gerektiğinden, bundan biraz daha karmaşık hale gelir. Aşağıdaki araç yöntemi, DOMhelp’te bulunur ve bir öğeden dinamik olarak sınıflar eklemenize ve kaldırmanıza olanak tanır. Ayrıca belirli bir sınıfın kendisine eklenip eklenmediğini test etmenizi sağlar.
Bu yöntemin iç işleyişi hakkında çok fazla endişelenmeyin – ele alınacak olan match() ve replace() yöntemlerinde ustalaştığınız zaman bu sizin için daha net hale gelecektir. Şimdilik bilmeniz gereken tek şey onu nasıl kullanacağınız ve bunun için yöntemin dört parametresini kullanacaksınız:
• a, yapılması gereken eylemdir ve aşağıdaki seçeneklere sahiptir.
• add yeni bir sınıf ekler.
• remove bir sınıfı kaldırır.
• sınıfın zaten uygulanıp uygulanmadığını test edin.
• o, sınıf eklemek veya sınıf kaldırmak istediğiniz nesnedir.
• c1 ve c2 sınıf adlarıdır—c2 yalnızca eylem takas olduğunda gereklidir.
Yöntemi, önceki örneği yeniden kodlamak için kullanalım – bu sefer bir sınıfı dinamik olarak uygulayarak ve kaldırarak adresi gizleyip gösterelim.
Stil sayfası, diğerlerinin yanı sıra, uygulandığı herhangi bir öğeyi gizleyecek olan hide adlı bir sınıf içerir. Bu örnekte, bunun için muhtemelen içeriği gizlemenin en erişilebilir yolu olan soldan çıkma tekniğini kullanıyorsunuz.
Öğeleri gizlemek için görünürlük veya görüntüleme özelliklerini değiştirmeyle ilgili sorun, görme engelli kullanıcılara yardımcı olan ekran okuyucuların, bir tarayıcıda görünür olmasına rağmen içeriği onlara sunamamasıdır.
