Tagjavascript

Javascript RGB Color Picker Uygulaması

Bu yazımda yeni bir Javascript RGB Color Picker uygulaması yapacağız. Yapacağımız uygulamanın temel mantıkını anlatmak gerekirse bildiğiniz üzere RGB ile renk tanımlarken ne kadar kırmızı, ne kadar yeşil ve ne kadar mavi renklerinin karıştırıldığını 0 ile 255 arasında belirliyoruz.

Tasarımımız da 3 adet range tipinde input olucak bunlar kırmızı, yeşil ve mavi renklerinin ne kadar yoğun olduklarını temsil edicekler. Bunlar oynatıldıkça rengin değişimini göreceğiz. Yapıcağımız uygulamanın nasıl göründüğünden bahsetmek gerekirse

Tasarımsal kısımların nasıl yapılacağı size kalmış bu yüzden sadece Javascript kısmından bahsedeceğim.

Javascript kısmında bazı kısımların anlaşılması için yaptığım tasarımla ilgili şu bilgileri vermem gerekiyor.

range tipli inputların idleri red, green ve blue ve en altta elde ettiğimiz rengi gösteren alanının id si display’dir.

Javascript

var input = document.querySelectorAll(“input”);

for(var i=0;i<input.length;i++){

input[i].addEventListener(“input”,function(){

var red = document.getElementById(“red”).value;

var green = document.getElementById(“green”).value;

var blue = document.getElementById(“blue”).value;

});

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

display.style.background = “rgb(“+ red +”, “+ green +”, “+ blue +”)”;

}

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

var input = document.querySelectorAll(“input”);

querySelectorAll fonksiyonu içinde belirttiğimiz elementten kaç tane varsa hepsini bir bize dizi olarak döndürecektir. querySelectorAll ile ilgili daha detaylı bilgi almak için Javascript DOM Element İşlemleri yazısına gidebilirsiniz.

for(var i=0; i<input.length; i++){

//kodlar

}

Bu döngü querySelectorAll ile döndürmüş olduğumuz dizinin tüm elemanlara ulaşmamızı sağlayacak.

input[i].addEventListener(“input”,function(){

var red = document.getElementById(“red”).value;

var green = document.getElementById(“green”).value;

var blue = document.getElementById(“blue”).value;

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

display.style.background = “rgb(“+ red +”, “+ green +”, “+ blue +”)”;

});

Şimdi burada öncelikle idsi red, green ve blue olan inputların değerlerini aldık daha sonra display adında bir değişken oluşturarak bize id’si display olan elementi döndürüyor.

display.style.background = “rgba(“+ red +”,”+ green +”,”+ blue +”)”;

Bu kod ise display değişkeni ile seçtiğimiz elementin stil özelliklerinden background özelliğini red, green ve blue inputlarının değerlerine eşitliyoruz ve bize o anda seçilen renkleri veriyor.

Düşüncede karmaşık bir uygulama olarak gözükse bile aslında sadece bir rengin nasıl rgb olarak yazıldığını bilmemiz yetiyor.

Bu yazımda RGB Color Picker uygulaması yaptık ve yazdığımız kodların ne işe yaradıklarını açıkladım. Bu yazımı beğendiyseniz ve Javascript hakkında yazmış olduğum yazıları merak ediyorsanız buraya tıklayabilirsiniz.

Javascript DOM Element İşlemleri

Bir önceki yazımda bahsetmiş olduğum Javascript DOM Fonksiyonları yazısının devamı niteliğinde Javascript DOM Element İşlemleri yazısını yazmaya karar verdim.

Bu yazımda bahsedeceğim fonksiyonlardan bahsetmek gerekirse

  • ID’ye göre element bulma
  • Etiket adına göre element bulma
  • Class özelliğine göre element bulma
  • CSS Selector ile element bulma

ID’ye göre Element Bulma

ID’ye göre element bulma işleminden aslında Javascript ile DOM İşlemleri konusunda bahsetmiştim ama hine de bahsetmek gerekiyor.

HTML – Javascript

<!doctype html>

<html>

<head></head>

<body>

<p id=”demo”>Aydın Can Altun</p>

<script>

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

</script>

</body>

</html>


Bu örnekte kullandığımız getElementById fonksiyonunun girilen değere sahip elementi geri döndürür. Bu fonksiyonunun genel bir kullanımından bahsetmek gerekirse.

var myElement = document.getElementById(id);

Etiket Adına göre Element Bulma

Etiket adına göre element bulma işleminde kullanacağımız fonksiyon getElementsByTagName() ile gerçekleştirilir.

HTML – Javascript

<!doctype html>

<html>

<head></head>

<body>

<p>Etiket Adına göre Element Bulma</p>

<p>Aydın Can Altun</p>

<p>getElementsByTagName</p>

<script>

var pElements = document.getElementsByTagName(“p”);

</script>

</body>

</html>

Bu örnekte de gördüğünüz gibi getElementsByTagName() fonksiyonunu kullanarak etiket adına göre elementleri çekebiliriz. Bu fonksiyon bize bir dizi döndürür ve o sayfadaki tüm elementleri belirtilen etikete göre yukarıdan aşağıya doğru sıralar. Bu fonksiyonun basit kullanımından bahsetmek gerekirse

var elements = document.getElementsByTagName(tagName);

Class Özelliğine göre Element Bulma

Class özelliğine göre element bulma işleminde kullanıcağımız fonksiyon getElementsByClassName() ile gerçekleştirilir.

HTML – Javascript

<!doctype html>

<html>

<head></head>

<body>

<div id=”demo”>

<h5 class=”aydin”>Class Özelliğine göre Element Bulma</h5>

<p class=”aydin”>Aydın Can Altun</p>

</div>

<script>

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

var className = demo.getElementsByClassName(“aydin”);

</script>

</body>

</html>

Bu örnekte iki adet fonksiyon kullandık. Önce getElementById fonksiyonu ile id değeri demo olan elemente ulaşıyoruz daha sonra getElementByClassName fonksiyonu ile id değeri ile ulaştığımızdan elementin içinde class özelliği aydin olan elementleri bir dizi halinde geri döndürmesini sağlıyoruz.

var className = document.getElementsByClassName(className);

CSS Selector ile Element Bulma

Eğer bazı CSS özelliklerine göre kısıtlayacak şekilde element bulma işlemi yapmak istiyorsak CSS Selector kullanmamız gerekiyor. Burada querySelectorAll fonksiyonunu kullanacağız.

HTML – Javascript

<!doctype html>

<html>

<head></head>

<body>

<p class=”demo”>CSS Selector ile Element Bulma</p>

<p class=”demo”>Aydın Can Altun</p>

<p>Deneme</p>

<script>

var selector = document.querySelectorAll(“p.demo”);

</script>

</body>

</html>

Yukarıda ki örnekte 3 adet p elementimiz mevcut ve querySelectorAll fonksiyonu ile class özelliği demo olan tüm p elementlerini seçmesini sağladık. querySelectorAll fonksiyonu bize class özelliği demo olan tüm p elementlerini bize bir dizi olarak göndericek yani

console.log(selector[0]);

console.log(selector[1]);

Bu kodları yazarsak önce CSS Selector ile Element Bulma yazısını içinde barındıran p elementini bize döndürürken daha sonra Aydın Can Altun yazanı döndürecektir ama eğer bu dizinin içinde başka bir eleman var mı diye bakarsak hata ile karşılaşırız. Çünkü class özelliği demo olan 2 adet p elementimiz bulunmaktadır yaptığımız sorguda içinde Deneme yazan p elementi dahil olmayacaktır.

Bu yazımda bir önceki Javascript yazım olan Javascript DOM Fonksiyonlarının ilk kısmı olan HTML Elementleri Bulma kısmını anlatmış oldum. Bu yazımı beğendiyseniz ve Javascript hakkında yazmış olduğum diğer yazılarıda merak ediyorsanız buraya tıklayınız.

Javascript ile Yeni HTML Elementi Oluşturma

Merhaba bu yazımda Javascript ile HTML Elementi Oluşturma konusuna değineceğiz.

Bu başlığı okuduğunuzda size çok mantıklı gelen bir durum olmadığını tahmin edebiliyorum HTML ile element oluşturmak varken neden Javascript ile oluşturalım ? Aslında haklısınız HTML ile oluşturmak daha mantıklı ve daha az kod yükü gerektiriyor ama varsayalım ki bir Javascript uygulaması geliştirdiniz ve bunu GitHub üzerinde paylaşacaksınız ve uygulamanın çalışması için sizin hazırlamış olduğunuz tasarım kullanılmalı. Uygulamanızı kullanacak kişilerden bu HTML kodunu internet sitelerini eklemesini istemeniz çok doğru bir karar olmayacaktır.

Bu yüzden bu işlemleri Javascript ile yapmamız daha doğru olacaktır. Bu işlemleri yapmak için HTML dosyanızda html etiketi, head etiketi, body etiketi olsa yeter ekstra bir şey eklemeye gerek yok.

Bu işlem için kullanmamız gereken üç adet javascript fonksiyonu var. Bunlar,

  • createElement()
  • setAttribute()
  • appendChild()

createElement()

createElement() fonksiyonu bir element oluşturmamız için gereklidir ama sadece createElement kullanmak yeterli değil şimdi basit bir şekilde nasıl div oluşturacağımızı göstereyim.

var yenidiv = document.createElement(“DIV”);

şeklinde basit bir kullanımı vardır bunu bir değişken içine atamamız ileri ki kullanımlar için işimizi kolaylaştıracaktır.

setAttribute()

setAttribute() fonksiyonu oluşturacağımız yeni html elementine id, class gibi özellikler vermemizi sağlar. Bunun da kullanımı basittir.

yenidiv.setAttribute(“class”,”class_adi”)

setAttribute() fonksiyonu iki adet parametre alır. Birincisi ne özelliği ekleneceği ikincisi ise bu özelliğin hangi değere eşit olacağıdır. Yani yukarıda verdiğimiz elementi oluşturduğumuz zaman HTML kodlarımızda şu şekilde gözükecektir.

<div class=”class_adi”></div>

arka arkaya bir kaç kez setAttribute() fonksiyonu kullanılarak farklı farklı özellikler oluşturlacak HTML elementine ve ya zaten olan bir HTML elementine eklenebilir.

appendChild()

appendChild() fonksiyonu ise oluşturacağımız element hangi HTML elementinin içinde olacağını temsil eder. Bizim tasarım kısmında sadece HTML kodlarında ekstra bir tasarımla uğraşmadığımız için body elementinin içine oluşturacağımız DIV elementini ekleyeceğiz.

document.body.appendChild(yenidiv);

şeklinde kullanırız appendChild() fonksiyonunun tek bir parametresi vardır buda oluşturulacak elementtir.

Sonuç olarak HTML kodlarımız şu hale gelecektir.

<body>

<div class=”class_adi”></div>

</body>

Eğer oluşturduğumuz Elementin içine yazı eklemek istiyorsak. innerText özelliğini kullanmamız gerekecek. Bunu da şöyle yapabiliriz.

yenidiv.innerText = “Aydın Can Altun”

yazarsak div oluşturulduktan sonra içine Aydın Can Altun yazacaktır.

Bu konu hakkında daha detaylı bilgiler öğrenmek isterseniz buraya tıklamanız yeterli olacaktır. Yazımı beğendiyseniz ve Javascript ile alakalı yazdığım diğer yazılarımı incelemek isterseniz buraya tıklayınız.

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.