Mühendisler Dünyası

Web sitesi yaparken kullandığınız template'lerden bağımsız olarak özellikle SPA’da (Single Page Application) ekran yüksekliğini kullanıcın bilgisayarının yüksekliğine göre ayarlamak isteyebilirsiniz. Bu makalede bunun nasıl yapılacağını örnekle açıklamaya çalışacağım. Projelerimde JQuery kullandığım için bunu JQuery kütüphanesini kullanarak yapacağım. Eğer siz JQuery kullanmıyorsanız veya başka kütüphane kullanıyorsanız da bu işlemleri kendi kütüphanenize göre manipüle edebilirsiniz. Yaptığım işlemlerde JQuery kütüphanesini sadece verdiğim ID değerine ulaşmak ve bu değerin boyutunu manipüle etmek için kullanıyorum. İsterseniz fazla laf kalabalığı yapmadan konuyu örnek üzerinden anlatayım. Örnek olması açısından gerekli kodları verdikten sonra açıklamasını yapacağım.

Javascript programlama dilinde değişken tanımlaması için var kullanıldığı için ve bu değişken türlerinin otomatik algılanması javascript engine'ler tarafından yapıldığı için ilk başta bu metodu kullanmak gereksizmiş gibi gelebilir. Ama özellikle string değişkenleri üzerinde işlemler yaparken değişkenler her zaman otomatik olarak stringe çevrilmeyebilir. Bu cümle biraz karışık olabileceği için anlatmak istediğim konuyu örnek üzerinden açıklayalım. Örneğin bir var değişkeni tanımladınız ve bu değişken üzerinde split işlemi yapacaksınız. Bu tanımlamada bir sorun yaşamadan işlemlerinizi halledebilirsiniz. Ama örneğin metod içinde gelen değeriniz türü belli değilse o zaman split ve başka metin işlemlerini toString()  metodunu kullanarak yapamayabilirsiniz. Bizim örneğimizde de metoda rowInfo diye bir değişken geldiğini ve bu değişken üzerinde işlem yapıyoruz. 

Bu makalemizde, CSS önemli ve çok kullanılan özelliklerinden biri olan genişlik ve yüksekliğin ayarlanması için height, width, min-height, max-height, min-width ve max-width özelliklerini anlatacağım. Bu özellikleri kısaca açıklayacak olursak: height: yükseklik değerlerini ayarlamak için kullanılır. width: genişlik değerlerini ayarlamak için kullanılır. min-height: yükseklik için olabilecek minimum değerleri ayarlamak için kullanılır. max-height: yükseklik için olabilecek maksimum değerleri ayarlamak için kullanılır min-width: genişlik için olabilecek minimum değerleri ayarlamak için kullanılır max-width: genişlik için olabilecek maksimum değerleri ayarlamak için kullanılır.

Web sitesi tasarlarken belirli bir alanının görünüm özelliklerini değiştirirken az tercih edilen yöntemlerden bir tanesi de etikete verilen ID değerlerine göre görünümü özelleştirmektir. Bu yöntem web sitesi tasarlarken profesyonel tasarımcıların tercih etmediği bir yöntemdir. Bunun temel nedenlerinden bir tanesi de web siteniz büyüdükçe ID değerlerini takip etmeniz zorlaşır ve belirli bir süre sonra projenizde kod kalabalığı veya kod çirkinliği oluşmasına neden olur. Aynı zamanda verdiğiniz ID değerlerini de takip etmeniz gerekiyor. Çünkü aynı ID değerine sahip birkaç kod bloğunun olması web sitenizde sorunlara yol açabilir. Genelde ID değerleri JavaScript ile birlikte kullanılabilmek için kod bloklarına eklenir. Bunun temel nedeni de bir kod bloğunun yapacağı işlemleri tekilleştirmektir. Tüm bu olumsuzluklara rağmen bazen ID bazlı görünüm ayarlamasının kullanışlı olduğu durumlar da olabilir.

CSS Class Kullanımı Web site görünümü özelleştirirken en çok kullanılan ve profesyonel tasarımcılar tarafından tercih edilen yöntem class yapısını kullanarak kod bloğuna erişmektir. En çok kullanılan Görünüm kütüphanelerinden olan Bootsrap ya da Foundation yapılarına da dikkat ederseniz  bu yapılarda da görünümü özelleştirmek için class’ların kullanıldığını görebilirsiniz. Classları kullanmak aynı zamanda yaptığınız özel görünümleri kütüphane halinde toplayarak birçok projede tekrar tekrar kullanmanıza yardımcı olur. Ayrıca class yapılarındaki bir çok class tanımlamasının aynı anda kullanılabilirliği avantajından dolayı, mümkün olduğunca tüm görünümleri ayrı ayrı parçalara bölmekte fayda var. Örneğin kalın görünümlü bir kod bloğu için bold-text diye bir tanımlama yapılabilir. Class yapılarını iyi öğrenmek aynı zamanda CSS konusunda kullanacağınız kütüphaneleri daha etkili kullanabilmek için de çok önemlidir. 

Bu makalemizde Front-End developer'lar tarafından en çok tercih edilen CSS kütüphanelerinden biri olan Bootsrapta collapse'nin nasıl kullanıldığı ve uygulandığını anlatacağım. Öncelikle belirtmem gereken önemli konulardan bir tanesi de collapse işlemini uygulamak için tek yöntem bootsrap collapse kullanmak değil. Ama uygulaması açısından ve en basit olanı budur. Kütüphane tarafından sağlanan yazılım formatı doğru uygulandığı sürece bu işlemi yapmak çok basittir. Collapse işlemini de kısaca açıklayacak olursak bir butona veya bir söze tıklandığında altına veya web sayfasının her hangi bir yerinde belirli bir şeyin aktif olması gibi anlayabilirsiniz.

Javascript programlama dilinde diğer programalama dillerinde olduğu gibi (örneğin C# olduğu gibi) Lambda Expression yapısı olmasa da JavaScript dilinin esnek yapısı sayesinde bu yapya benzer ifadeleri program yazarken kullanabiliriz. Bildiğiniz gibi Lambda Expressionlar belirli bir dizide sorgulama ya da filtreleme yapmamıza imkan sağlar. JavaScript dilinde filter metodu ile birlikte diğer programlama dillerinde olan Lambda Expression'lara benzer yapıyı kullanabiliriz. Ne demek istediğimi anlatabilmek için bir örnek üzerinden konuyu inceleyelim. Aşağıdaki gibi bir dizi verildiğini düşünün. Bu dizi üzerinde filtreleme yapmak için JavaScript Lambda Expressionları kullanacağız. Bu kullanım üzerinden JavaScript Lambda Expressionların ne olduğunu açıklayacağız.