Bazıları buna sihir diyor - nesneleri birdenbire birdenbire ortaya çıkarma yeteneği. Web sitenizde birkaç satır JavaScript kullanarak bu tür bir sihir yaratabilirsiniz. Örneğin metin kutuları, nesneleri dinamik olarak göstermeyi öğrenirken kullanmak için iyi HTML öğeleridir. Web sayfanızı tasarlarken bunları kodunuzda oluşturmak yerine, gerektiği gibi metin kutuları ekleyin ve aynı zamanda site ziyaretçilerini etkileyin.
Metin Kutusu Oluşturma
Bir metin kutusunu gerçekleştirmeden önce, metin kutusunun ne olduğunu anlamalısınız. HTML, aşağıdaki örnekte gösterildiği gibi bunu bir giriş etiketi olarak bilir:
Bu girdi etiketi, iki önemli niteliğe sahip bir metin kutusu oluşturur; id ve type. Değeri "metin" olan type özelliği, tarayıcılara düğme gibi başka bir denetim türü yerine bir metin kutusu oluşturmasını söyler. İsteğe bağlı olan id niteliği, metin kutusunu daha sonra değiştirmeniz gerekirse kullanışlı olabilir. Yine isteğe bağlı olan değer seçeneği, Web sayfası açıldığında metin kutusunda görmek istediğiniz değeri içerir.
Dinamik Metin Kutuları
HTML, bir yerde değerler verdiğiniz sürece, bir öğenin niteliklerini tanımladığınızda umursamaz. Bu, dinamik olarak bir metin kutusu öğesi oluşturabileceğiniz ve özelliklerini istediğiniz zaman belirleyebileceğiniz anlamına gelir. Document.createElement işlevi bunu aşağıda gösterildiği gibi mümkün kılar:
var box = document.createElement ("input");
Bir HTML giriş öğesi oluşturmak ve bunu "kutu" adlı bir değişkene atamak için gereken tek şey bu. Kutu nesnesi, siz onun type özniteliğine bu örnekte gösterildiği gibi bir "metin" değeri verene kadar metin kutusu haline gelmez:
box.type = "metin";
Web Sayfası Entegrasyonu
Aşağıdaki kod, yararlı appendChild işlevini kullanarak metin kutusunu HTML belgesine ekler:
document.body.appendChild (kutu);
Metin kutusunu belirli bir denetimin arkasına eklemek isterseniz, bunun yerine aşağıdaki ifadeyi kullanın:
document.getElementById ("some_Element_ID"). appendChild (kutu);
"Bir_Element_ID" yi, metin kutusunu eklemek istediğiniz öğenin adıyla değiştirin. Örneğin, bu öğe kimliği "button1" olan bir düğmeyse, appendChild ifadesi şu şekilde görünür:
document.getElementById ("button1"). appendChild (kutu);
İsteğe Bağlı Özellikler
Yeni metin kutunuz bu kodu kullanarak mükemmel şekilde çalışacaktır. İfadeyi içeren bir JavaScript işlevi oluşturun ve bir metin kutusuna ihtiyacınız olduğunda onu çağırın. Bununla birlikte, metin kutusunun değerini ve kimlik özelliklerini aşağıdaki gibi de ayarlayabilirsiniz:
box.value = boxValue; box.id = boxID;
BoxValue ve boxID değerlerini işleve geçirin ve bu öznitelikleri metin kutusuna uygular. Bir kimlik değeri atarsanız, bunu daha sonra metin kutusunun özelliklerini aşağıdaki örnekte gösterildiği gibi güncellemek için kullanabilirsiniz:
var boxObject = document.getElementById (boxID); boxObject.style.backgroundColor = "kırmızı";
İlk ifade, metin kutusuna bir referans alır ve son ifade, metin kutusunun arka plan rengini kırmızıya dönüştürür.