JavaScriptYazılım

ELEMENTLERİN STYLE ÖZELLİKLERİNİ DEĞİŞTİRME #15

ELEMENTLERİN STYLE ÖZELLİKLERİNİ DEĞİŞTİRME


Javascript’te önceki derste bahsettiğim gibi elementleri seçip bu seçtiğimiz elementlerin üzerinde çok sayıda işlem yapabiliyorduk. Bildiğiniz gibi biz HTML sayfalarındaki etiketlere CSS ile gerekli stil işlemlerini yapabiliyoruz. Javascript’te elementlere style verebiliyoruz demek bu elementlerin stillerini javascript ile yazacağız demek değildir. Bu CSS’in görevi. Javascript’in bu konudaki yararı bir şeyleri dinamik olarak yapması. Mesela bir butona tıkladığımızda arkaplanının değişmesi. Ya da bu butona bastığımızda kullanıcıdan bir değer alıp verdiği cevaba göre bir div’in arkaplan rengini kırmızı veya mavi yapabiliriz. İşte javascript stillere bu dinamikliği katar. Bu dersimizde elementleri seçtikten sonra bu elementlerin style özelliklerini nasıl değiştirebiliriz bu konuyu göreceğiz.

BELİRLİ STYLE TANIMLARI


Javascript’te style değiştirmeyi görmeden önce bazı tanımları bilmemiz gerekiyor. Mesela bu tanımlardan biri CSS’de id’si kodportali olan bir “p” etiketinin stilini, örneğin arkaplan rengi değiştirmek istediğinizde bu tanımı şöyle yaparsınız :

#kodportali {
  background-color : #e12d43;
}

fakat işler javascript kısmında böyle değil. Baya önceki derslerimizden değişken tanımlama da javascript’te büyük küçük harf duyarlılığının çok önemli olduğunu söylemiştik. Eğer ben bu etiketin arkaplan rengini javascript ile değiştirmek istersem :

const kodportali = document.getElementById("kodportali");
kodportali.style.backgroundColor = "#e12d43";

gördüğünüz gibi javascript’te arada ” – ” işareti falan gelmez o işaretten sonra gelen ifadeyi büyük harf ile belirtiriz. Örneğin background-image css’de böyle yazılır iken javascript’te “backgroundImage” diye yazılır.

Şimdi önemli bulduğum bazı css ifadelerini buraya yazacağım : 

  • background
  • backgroundColor
  • color
  • display
  • justifyContent
  • alignItems
  • border
  • padding
  • margin
  • marginBottom
  • marginTop
  • flex
  • cursor
  • fontSize
  • listStyleType

ELEMENTLERİN STİLİNİ DEĞİŞTİRME


Bunca şeyi öğrendikten sonra artık javascript ile uygulamalarımıza geçebiliriz. Ben burada küçük bir HTML sayfası oluşturarak gidicem. Eğer siz daha fazla uygulama yapmak istiyorsanız önceki derslerde bahsetmiş olduğum todo-list projesinde kullanacağımız HTML sayfası üzerinde de yapabilirsiniz. Şimdi yavaştan kodlara geçelim :

<html>
<head>
   <title>Javascript'te style değiştirme</title>
</head>
<body>
   <div id="website">Kodportalı</div>
   <div id="alert">Error!!</div>
   <p id="paragraph">Lorem ipsum dolor sit amet.</p>

   <ul id="list">
     <li>Berkay Çimşir</li>
     <li>Anıl Kısıroğlu</li>
     <li>Yakışıklı Batuhan</li>
   </ul>

<script type="text/javascript">
   const website = document.getElementById("website");
   const alert = document.getElementById("alert");
   const paragraph = document.getElementById("paragraph"); 
   const list = document.getElementById("list");

   website.style.color = "red";
   alert.style.backgroundColor = "#e12d43";
   alert.style.color = "red";
   paragraph.style.color = "blue";
   
   setTimeout(() => {
      paragraph.style.display = "none";
   }, 2000);
</script>
</body>
</html>

Bunlar javascript’le yapılması çok gereksiz olan şeyler. Bunları burda yazmak yerine CSS ile yazmanız her zaman daha iyi olacaktır. Artık ileride göreceğimiz uygulamalar gibi bu style değiştirmelerini belli olaylar içerisine atıyalım. Mesela burda gördüğünüz bir setTimeout function’ı gibi olaylar ile bu işleri yapalım.

EVENT’LAR İLE UYGULAMA


Şimdi ileride göreceğemiz event’lar ile style değiştirme ya da bir setTimeout fonksiyonu ile stil değiştirme gibi işlemleri bu derslere geçmeden önce yapalım. Böylece o derslere geçtiğimizde kafanızda fikir oluşsun hem de böyle sıkıcı şeylerden uzak kalmış olursunuz biraz.

<html>
<head>

</head>
<body>
    <input id="name" type="text" placeholder="Enter a name..." />
    <input id="surname" type="text" placeholder="Enter a surname..." />
    <button id="btn">Show Infos</button> 
    <div id="alertDiv">*Name and Surname can't be blank. <br> *Name and Surname cant'be number.</div>
    <div id="successDiv">Success!! Please wait...</div>  
    <div id="infos"></div>
<script>
    const nameInput = document.getElementById("name");
    const surnameInput = document.getElementById("surname");
    const btn = document.getElementById("btn");
    const alertDiv = document.getElementById("alertDiv");
    const successDiv = document.getElementById("successDiv");
    const infos = document.getElementById("infos");

    document.addEventListener("DOMContentLoaded", () => {
       alertDiv.style.display = "none";
       successDiv.style.display = "none";
       infos.style.display = "none";
    });

    function checkAlertDiv(){
        alertDiv.style.display = "block"; 
        alertDiv.style.backgroundColor = "#e12d43";
        alertDiv.style.color = "red"; 
        setTimeout(() => { 
           alertDiv.style.display = "none"; 
        }, 2000);
    }

    btn.addEventListener("click", () => {
       if(nameInput.value === "" || surnameInput.value === ""){
          checkAlertDiv();
       }
       else if(nameInput.value === Number || surnameInput.value === Number){
          checkAlertDiv();
       }
       else {
          successDiv.style.display = "block";
          setTimeout(() => {
             successDiv.style.display = "none";
          }, 1500);

          info.textContent = `Your Name : ${nameInput.value} \nYour Surname : ${surnameInput.value}`;
          info.style.color = "#336cff";
       }
    });
</script>
</body>
</html>

Burda ne yaptığımızın bir kısmını anlamamanız normal. Çünkü daha işlemedik ama ben basitçe bir yaptıklarımızı anlatacağım.

Öncelikle uygulamadan bahsedeyim : 

Uygulama sizden isim ve soyisim alıp gerekli kontrollere göre bunları ekrana yazdıran bir uygulama. Peki nasıl yaptık ? 

Öncelikle html sayfalarımızı oluşturduk name ve surname için iki input ve bilgileri yazdırmak için bir button. Eğer hata varsa çıkacak alert div’i ve başarılı durumda çıkacak success div’i en sonda bilgilerin yazacağı info div’i.

Öncelikle gerekli işlemleri yapabilmek için html sayfasındaki etiketlere vermiş olduğumuz id’ye göre elementlerimizi seçtik.

DOMContentLoaded olayı sayfa yüklendiğinde demektir. Sayfaya girildiğinde kullanıcı daha değer girememiş olacağı için alert, success ve info div’inin ortada olması mantıklı değildir bu yüzden sayfa yüklendiğinde bunların display’ini none yaparak görünmemesini sağladık.

Daha sonra butona tıklandığı anda artık işlemlerimiz çalışacaktır. Öncelikle checkAlertDiv fonksiyonunu neden yazdığımızdan bahsedeyim. Bunu yazdık çünkü if ve else if durumlarında yapacağımız işlem o fonksiyon içinde ki aynı işlem bu yüzden bunu kopyala yapıştır yapmak yerine bir fonksiyon içine alıp bunu gerekli yerlerde çağırmak daha mantıklıdır.

Bir if bloğu içinde inputların boş olma durumunu kontrol ettik. Eğer boş ise fonksiyonumuz içindeki kodlar çalışacak ve bu kodlarda başta display’ini none yaptığımız alertDiv’inin displayini block yaparak görünmesini ve gerekli stil işlemlerinin yapılmasını sağlayacaktır.

Else if durumunda ise input’taki değerlerin sayısal bir değer olup olmadığını kontrol ettik eğer input’lar boş değilse bu bölüme geçilecektir. Eğer sayısal bir değerse yine aynı checkAlertDiv fonksiyonumuz çalışacaktır.

Else bloğunda ise artık tüm şartlarımızın sağlanmış olduğu durumu belirttik. Eğer tüm koşullarımız tamam ise artık success div’ini gösterebiliriz. Gösterdikten sonra setTimeout ile iki saniye sonra bunu yok edip bu sefer bilgilerin yazılacağı infoDiv’ini ortaya çıkardık ve daha önceki derslerde bahsetmiş olduğum template literal yapısını kullanarak gerekli bilgileri içine doldurduk.

BİTİRİŞ


Evet arkadaşlar. Bu dersimizin sonuna gelmiş bulunmaktayız. Güzel bir uygulama ile dersi sonlandırdık bir sonraki derslerde görüşmek üzere.

Javascript’te DOM Elementlerini Seçme

Oylamak için tıklayınız :
[Toplam: 0 Puan: 0]
Etiketler

İlgili Makaleler

Bir Yorum

Bir cevap yazın

Başa dön tuşu
Kapalı

Reklam Engelleyici Algılandı !

Reklam engelleyiciyi kapatarak bize destek olabilirsiniz..