Tagjavascript uygulaması

Rastgele Renk Üretme Uygulaması

Merhaba arkadaşlar bu yazımda Javascript ile rastgele renk üreten basit bir uygulama yazacağız.

Yaptığım tasarımı örnek vermek gerekirse

Uygulama için Yaptığım Tasarım

HTML

<div class = “color”>

<span class=”hex”>#390C60</span>

<button onclick=”colorGenerator()”>Yeni Renk Üret</button>

</div>

Javascript

function colorGenerator(){

var symbols,color;

symbols = “0123456789ABCDEF”;

color = “#”;

for(var i=0;i<6;i++){

color = color + symbols[Math.floor(Math.random() * 16)];

}

document.body.style.background = color;

document.getElementById(“hex”).innerHTML = color;

}

Şimdi bu kodları açıklamakla başlayalım

var symbols, color;

symbols = “0123456789ABCDEF”;

color = “#”;

Buradaki symbols değişkeni bir renk kodunda olabilecek tüm elemanları içine yazıyoruz renk kodlarını incelersiniz 0-9’a kadar ve A-F’ye kadar olan rakam ve harflerin karışımından oluşur.

color değişkeni ise renk kodlarının başındaki # işaretine eşitliyoruz.

for (var i=0;i<6;i++){

color = color + symbols[Math.floor(Math.random()*16)];

}

Burada bir döngü oluşturuyoruz ve bu döngü 6 kez çalışması gerekiyor çünkü bir renk kodunda 6 adet karakterden oluşur.

symbols[Math.floor(Math.random()*16)];

Burada önemli olan iki fonksiyon

  • Math.floor()
  • Math.random()

Math.floor()

Bu fonksiyon girilen sayının en yakın değerine yuvarlar 0.9 girersek 1 olarak geri döner 6.1 girersek 6 değerini döndüren bir fonksiyondur.

Math.random()

Bu ise rastgele bir sayı üretmek için vardır ama 0 ile 1 arasında bir sayı üretir biz ise kodumuzda

Math.random()*16 olarak kullanıyoruz böylece 0-16 arasında bir sayı üretecektir ama asla 16 sayısını geri döndürmeyecektir. 16 sayısını döndürmemesini istememizim sebebi ise symbols değişkeninin bir dizi olması. Yani symbols değişkenin de 16 adet karakter olsa bile dizilerin key değerleri 0’dan başlayacağı için bize vereceği maksimum değerin 15 olmasını istiyoruz.

Daha sonra bu değeri color’a eşitleyerek yeni bir renk üretiyoruz.

document.body.style.background = color;

document.getElementById(“hex”).innerHTML = color;

Bu kodların ilk olanı arka plan rengini yeni oluşturulan renge çevirecektir.

2. kod ise id özelliği hex olan elementin HTML kodlarını oluşturduğumuz a eşitliyor. Böylece ürettiğimiz rengin, renk kodunu almış oluyoruz.

Bu yazımda Javascript kullanarak Yeni Renk Üretme uygulamasını yaptık ve bazı matematik fonksiyonlarını öğrenmiş olduk.

Javascript ile Scroll İşlemleri

Bu yazımda Javascript ile Scroll İşlemleri konusunda basit bir giriş yapacağım Scroll ile yapabileceğimiz basit bir uygulama yapacağım. Bu yapacağım uygulama aşağı doğru kaydırdıkça sayfaya yeni içerik eklemekten bahsedeceğim.

Öncelikle oluşturduğum basit bir tasarımı göstermem gerekli.

Oluşturduğumuz tasarım.

Şimdi Javascript kodlarını sizlerle paylaşayım daha sonra bu kodların ne işe yaradığından bahsedeyim.

function sonsuzsayfa()
{
var main = document.getElementById(‘main’);
var cHeight = main.offsetHeight;
var yOffSet = window.pageYOffset;
var y = yOffSet + window.innerHeight;
if(y >= cHeight){
main.innerHTML += (‘<div id=”eklenen”>Aydın Can Altun</div>’);
}
}
window.onscroll = sonsuzsayfa;

Şimdi bu kodların ne işe yaradıklarından bahsedeyim

window.onscroll = sonsuzsayfa;

sayfa yukarıya ve ya aşağıya oynatılırken sonsuzsayfa adındaki fonksiyonu çalıştırmamızı sağlar.

Şimdi ise sonsuzsayfa fonksiyonumuzun ne yaptığına bakalım.

var main = document.getElementById(“main”);

Bu kod ile main adında oluşturduğumuz değişkenin içine sayfamızın içinde id’si main olan etiketin verilerini tutmamızı sağlar.

var cHeight = main.offsetHeight;

Bu kod ise cHeight adını verdiğimiz değişkenin içine main değişkeninde seçilen etiketin dikey olarak hangi uzunluğunda olduğumuzu tutar.

var yOffSet = window.pageYOffset;

Bu kod bize sayfanın dikey olarak ne kadar aşağı ve ya yukarı oynatıldığını pixel cinsinden verir.

var y = yOffSet + window.innerHeight

İşte burası aslında önemli olan kısım burada y değişkenine yukarı ve aşağıya ne kadar oynatıldığını ve kullandığınız tarayıcının kapladığı alan hesaplanmadan gördüğünüz sayfanın uzunluğunun boyutlarını toplar

if(y >= cHeight){
main.innerHTML += (‘<div id=”eklenen”>Aydın Can Altun</div>’);
}
}

Burada ise bir kontrol yapıyoruz eğer y değişkenimizde belirtilen değer bizim seçtiğimiz elementin uzunluk olarak sonuna geldiğinde bu elementin sonuna yeni bir html kodu eklemesini sağlar böylece aşağı indikçe yeni verilerin eklenmesini sağlarız.

Bu işlem peki ne işimize yarar diye soracak olursanız Facebook’da görmüş olduğunuz sayfayı aşağı indikçe sürekli olarak gönderilen eski paylaşımları görmeye başlarız işte bu tarz bir işlem kendi internet sitenizde yapmak istiyorsanız bu sistemi kullanmanız işinize her türlü yarayacaktır.

Sonuç olarak elde ettiğimiz görüntü şöyle olacaktır.

Yaptığımız Uygulamanın Görüntüsü

Bu Javascript uygulamasında Javascript ile Scroll İşlemlerini basit bir örnek ile bahsettik. Yaptığımız uygulama üzerinde değişiklik yaparak daha farklı şeyler yapmaya başlayabilirsiniz. Javascript ile yaptığım diğer uygulamaları görmek için tıklayınız.