JavaScriptYazılım

JAVASCRIPT’TE DOCUMENT OBJECT MODEL #12

JAVASCRIPT’TE DOCUMENT OBJECT MODEL NEDİR?

Javascript’te artık javascript’in ilk çıkış amacı olan DOM yani Document Object Model’e geçebiliriz. Aslında ilk başlarda web sayfaları oluştururken sadece HTML dökümanı yazabiliyorduk. Yani HTML’de normal bir text yazar gibi HTML etiketlerimizle biz sadece sabit yani statik sayfalar oluşturabiliyorduk.

Ancak javascript’in çıkmasıyla birlikte sayfalara interaktiflik ve dinamiklik katabiliyoruz. Ve bunun adı da aslında DOM Manipülasyonu diye geçiyor.

Şimdi ilk başta DOM ne demektir ona bakalım.

DOM NE DEMEKTİR ?

HTML etiketleri bir araya gelerek Document Object Modeli yani Döküman Obje Modelini oluşturur. Biz elementlerimizi javascript tarafından seçmek için html elementlerimize class veya id veririz. Biz de bu document üzerinde bulunan etiketleri javascript ile manipüle edebiliriz.

BİTİRİŞ

Biz bundan sonraki DOM bölümü içinde bulunan derslerimizde Javascript ile bir elemanı nasıl seçeriz ona nasıl değişik özellikler veririz. Bir butona bastığımızda elemanları nasıl etkileriz bunları göreceğiz. Bu zor ve ayrıntılı kısımlara geçmeden önce yapılan bir dersti genel olarak anlatmaya çalıştım okuduğunuz için teşekkür ederim. Buraya ileride yapacağımız işlerden birkaç örnek kod bırakacağım.

<html>
<head>
</head>
<body>
   <h1 id="header">Kodportalı</h1>

   <input id="name" type="text" placeholder="Enter a name..."></input>
   <input id="surname" type="text" placeholder="Enter a surname..." ></input>
   <button id="btn">Infos</button>

   <div id="alert"></div>
   <div id="success"></div>

   <button id="press">Enter Game</button>

   <div id="usersInfos"></div>

</body>
<script type="text/javascript">
   const header = document.getElementById("header");
   const nameInput = document.getElementById("name");
   const surnameInput = document.getElementById("surname");
   const btn = document.getElementById("btn");
   const alertDiv = document.getElementById("alert");
   const successDiv = document.getElementById("success");
   const gameBtn = document.getElementById("press");
   const usersInfos = document.getElementById("usersInfos");

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

       setTimeout(() => {
          header.textContent = "Kodportali.com";
          header.style.color = "#e12d43";
       } , 2000);
   });

   btn.addEventListener('click', () => {
       if(nameInput.value === ' ' || surnameInput.value === ' '){
           alertDiv.style.display = "block";
           alertDiv.textContent = "Please enter all values.";
 
           setTimeout(() => {
              alertDiv.style.display = "none";
           } , 2000);
       }
       else {
           successDiv.style.display = "block";
           successDiv.textContent = `Your name is ${name.value} surname is ${surname.value}`;

           setTimeout(() => {
              successDiv.style.display = "none";
           } , 2000);
       }
   });

   gameBtn.addEventListener("click" , () => {
      const name = prompt("Enter your nickname : ");
      const email = prompt("Enter your email");
      const secondPlayer = prompt("Do you want second player ? (y/n)");

      if(secondPlayer.value === 'y'){
         const secondName = prompt("Enter second player's name : ");
         const secondEmail = prompt("Enter your second player's email : ");

         usersInfos.style.display = "block";
         usersInfos.textContent = `Firs player ${name.value} , Second Player : {secondName.value}`;
      }
      else {
         usersInfos.style.display = "block";
         usersInfos.textContent = `Your nickname : ${name.value}`;
      }
   });
</script> 
</body>
</html>

Javascript’te Arraylerin Özellikleri

 

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

İlgili Makaleler

Bir cevap yazın

Başa dön tuşu
Kapalı

Reklam Engelleyici Algılandı !

Reklam engelleyiciyi kapatarak bize destek olabilirsiniz..