Sales1 min read114 words

JavaScript ile basit bir şekilde arka plan değiştiren ufak uygulama geliştirelim

Emir Eskici

PlusClouds Author

Cloud & SaaS

JavaScript ile Arka Plan Renk Değiştirme Nasıl Yapılır

JavaScript ile Arka Plan Değiştirici

Selamlar, bu blogda diğer bloglarda olduğu gibi sizlere ufak çaplı ama üstüne geliştirmeler yapabileceğiniz bir uygulama göstereceğim. JavaScript ile Arka Plan Değiştirici (Change the Background Color in JavaScript) sayesinde oldukça basit ve eğlenceli olan bu uygulamayı birlikte inceleyelim

wordpress6.2_Banner.jpg

Diğer projeler/uygulamalar için (bknz: Blog)

HTML

Bize istediğimiz renk seçeneklerini sunacak bir takım butonlar ve bu butonlara onClick özelliği vererek Html Tarafında işlemlerimizi halledelim öncellikle
Description

JS

Html kodlarımızda butonlara verdiğimiz onClick fonksiyonlarımızı tanımlayalım.

function green(){
    document.getElementById("ColorBody").style.backgroundColor="green"
}
// Basitçe Id'si ColorBody olan elementi seçtim ve stil(style) backgroundColor özelliği ile seçili olan elemente yeşil(green) rengini verdim
function red(){
    document.getElementById("ColorBody").style.backgroundColor="red"
}

function blue(){ document.getElementById("ColorBody").style.backgroundColor="blue" }

function yellow(){ document.getElementById("ColorBody").style.backgroundColor="yellow" }

Sonuç

Description

Frequently Asked Questions

Arka plan rengini değiştirmek için hangi HTML elemanı hedefleniyor?

ColorBody kimliğine sahip öğenin arka plan rengi değiştirilir. JavaScript fonksiyonları bu öğenin backgroundColor özelliğini ayarlayarak rengi değiştirir.

Arka plan rengini değiştirmek için hangi dört JavaScript fonksiyonu mevcut ve hangi renklere ayarlanıyor?

green, red, blue ve yellow adlı dört fonksiyon renkleri sırasıyla yeşil, kırmızı, mavi ve sarı olarak arka plana uygular.

HTML tarafında bu renk değişimini tetiklemek için ne yapılır?

Butonlara onClick özelliği eklenerek tetiklenir ve ilgili JavaScript fonksiyonları çalıştırılır.

ColorBody id'li öğe nasıl seçilir ve arka plan rengi nasıl değiştirilir?

ColorBody id’li öğe seçilir ve bu öğenin backgroundColor özelliği değiştirilerek renk uygulanır.

Kendi renk seçeneklerinizi eklemek için hangi adımlar gerekir?

Yeni renkler için ek fonksiyonlar yazılır ve bunlar HTML’deki uygun butonlara onClick ile bağlanır.

Kod örneğinde kullanılan renk değerleri nelerdir?

Renkler green, red, blue ve yellow olarak kullanılmıştır ve bu değerlerle arka plan rengi değiştirilir.

Bu yöntemi hangi amaçlar için kullanabilirsiniz?

Kullanıcıya renk seçenekleri sunmak ve basit bir arayüzle arka planı değiştirmek için kullanılabilir; ufak bir uygulama olarak gösterilmiştir.