Javascript detect support node

Html sayfamızda body’nin onload metoduna init(); olarak initialize ediyoruz. Aynı zamanda body tagının altına bir de box adında bir div oluşturuyoruz. Daha sonra oluşturduğumuz o div üzerinde işlemler yapıyoruz.


	var boxDiv;

	function init()
	{
		boxDiv = document.body.querySelector('#box');
		boxDiv.style.backgroundColor = '#FFCC00';
		boxDiv.style.width = "100px";
		boxDiv.style.height = "100px";
		boxDiv.style.display = 'block';
		boxDiv.addEventListener('click', clickTranslate);

		console.log('Desteklenen node >> ' + getTransformProperty(boxDiv));
	}

	function clickTranslate(event)
	{
		var counter = 0;

		setInterval(function(){
			console.log(counter);
			boxDiv.style.transform = 'rotate(30deg)';
			boxDiv.style['-webkit-transform'] = 'rotate('+(++counter % 360)+'deg)';
			//boxDiv.style.webkitTransform = 'rotate('+counter+'deg)';

		},100);
	}

	// Bu fonksiyon hangi browser'da hangi attributun desteklendiğini belirtir.
	function getTransformProperty(el)
	{
		var properties = ['transform', 'WebkitTransform', 'msTransform','MozTransform', 'OTransform'];

		var property;

		while(property = properties.shift())
		{
			if(typeof el.style[property] != undefined)
			{
				return property;
			}
		}

		return false;
	}



Advertisements

javascript prototype referans yöntemi

Eğer javascript yazıyorsak ve ek özelliklere ihtiyaç duyuyorsak ( array splice, slice, trim vs.) gibi işlemler için kendimize ek metodlar yapabiliriz. Ben aşağıda sadece mantığını kavrayabilmek için bir örnek yaptım.

function Serhat()
{
	this.name = "serhat";
	this.surname = "sezer";
	this.position = "developer";
}

Serhat.prototype.execute = function()
{
	var object = new Serhat();
	var txt = document.body;

	txt.innerHTML = object.name;
	txt.innerHTML += "<br>";
	txt.innerHTML += object.surname;
	txt.innerHTML += "<br>";
	txt.innerHTML += object.position;
}

window.onload = init;

function init()
{
	/*
            === Referans yönetimiyle isteme şekli ===
        var serhat = new Serhat();
	log(serhat.name);
	log(serhat.surname);
	log(serhat.position);
	
        */
	var serhat = new Serhat();
	serhat.execute();
}

function log($)
{
	console.log($);
}

Javascript reference object

Başlıktanda anlaşılacağı gibi javascriptte bir objeden(.js dosyasından) herhangi bir referans değişkeni ya da metodu isteyebiliriz. Çok basit bir kaç işlemle yapılabilir aslında ama ben kendi işimi kolaylaştırmak için bir kaç bişey yaptım bununla ilgili. Kod yazım stilide denilebilir. 🙂

Bir Main.html olsun bu html bütün javascriptleri çağıran bir döküman.

<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title></title>
		<link rel="stylesheet" media="all" href="style.css"/>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<script type="text/javascript" src="main.js"></script>
		<script type="text/javascript" src="second.js"></script>
	</head>
	
	<body lang="en" onload="init();">
		<article><h1 class="huge">Deneme</h1>Merhaba bu benim ilk denemem ve bu siteyi kendi porfolyo sitemi yapmak için kullanacağım..<br/> sitenin alt yapısını html5 ve css3 kullanarak yapmayı planlıyorum aslında.</article>
	</body>
	
</html>

Görmüş olduğunuz gibi iki tane javascript dosyamız var. Bunlara istediğimiz yerden ulaşabiliriz. OOP’daki public variable gibi düşünebilirsiniz. Ancak ulaşmak istediğimiz objemize ulaşırken değişkenimizin ismini yazmamız yeterli oluyor. Ancak hangi javascript dosyasına ait olduğunu bilmiyoruz. Bunun için bir “instance” yaratmak gerekiyor aslında. Oda şöyle;

main.js

var main = undefined;    // bu bizim instance değerimiz. Bunun sayesinde hangi class'dan haberleştiğimizi öğreniyoruz.
var property;
var num;
var lists = [];

function init()
{
	main = this;
	property = "x";
	num = 0;
	
	lists[0] = "serhat sezer";
	lists[1] = "21 yaşında.";
	lists[2] = "yazılım"

	setTimeout(onAddedToStage, 1000);
}

second.js

function onAddedToStage()
{
	alert("stage is added to html...");
	console.log("this is my variables " + main.num);
	console.log("kullanıcı listeleri " + main.lists[0]);
	console.log("deneme " + num);
	console.log("diğer js "  +str );
}

Yukarıda görmüş olduğunuz bütün değerler “main.js” den alınıyor. İlk iki değerimin main.js den aldığımı bildiren bir ibare mevcut diğerlerinin aslında nerden geldiğini bilmiyorum. Yani kısacası kodlar arasında kaybolmamak için hangi objemizi hangi classdan aldığımızı bilmemiz bizim için önemli olduğunu düşünüyorum. Kafa karışlığını önlemek için bu yola başvurmakta fayda var.

jQuery olmadan sayfaya Javascript ekleme

Bazı projelerde jquery’i kullanma ihtiyacı duymassınız. Örneğin pure-javascript ile yazma ihtiyacı da doğabilir. Örneğin bir kiosk için uygulama yapıyorsanız ya da Akıllı Televizyonlar için bir uygulama büyük ihtimalle jQuery kullanamayacaksınızdır. Aslında bu örnekler çok uçuk örnekler olduğunun farkındayım sadece konuyu iyi kavramak açısından örnek vermek istedim. Şimdi kısaca jquery kullanmak istediğimizde Initialize fonksiyonumuzu nasıl oluştururuz bunun 3 yolu var.

1. Yol (window onload)

window.onload = function(){}

2. Yol (Body onload’a fonksiyon atama)

bunu güvenlik dolayısıyla yazamıyorum. Fakat şu şekilde oluyor. body tagının sonuna onload="initialize()" yazarsak ve bunu javascript etiketlerinde belirtirsek kodumuz çalışır.

3. Yol (jQuery notation)

(function(){

alert("sss")

})(window);

jQuery ile Tabs Yapısına Bakış

Jquery ile tab yapıları neredeyse bütün sitelerde kullanılıyor. Fakat benim yapmak istediğim başka bir şeyken tabs yapısına ulaştım 🙂 Benim yapmak istediğim şeyle birebir aynı olduğunu gördüm. Yapmak istediğim şey sidebar’da iki adet buton olsun ve herhangi bir butona tıkladığımda content’e benim dosyalarımı load etsin istedim fakat daha pratik bir yolunu buldum. Normalde jqueryinin .load metoduyla html dosyalarını load edebiliyorduk fakat bu biraz daha kısayolu diyebilirim.

Yapılacak uygulama

ilk olarak css kodlarımızı gösterelim…

<!-- header -->
.header { position: absolute; width: 800px; height: 600px; font: 14px Helvetica;}</code>

<!-- sidebar -->
.side-bar { width: 800px; height: 40px; float: left }
.side-bar ul { padding: 0; margin:0; }
.side-bar ul li { float: left; margin-right: 10px; }
.side-bar ul li a { width: 90px; height: 20px; color: #fff; display: inline-block; background-color: #333; padding: 10px; text-align: center; text-decoration:none;}

<!-- content -->
.overlay-content { width: 790px; float: left; padding: 10px; border: 2px solid #222; }
.one { background-color: #888; color: #fff; }
.two { background-color: #555; color: #fff;}

Şimdi Html kodlarımızı yazalım

Bu bölümde wordpressin kodlarıyla çakıştığı için yazamıyorum ama yukarıdaki mantıkdan yola çıkarak
ilk olarak header adında genel bir divimiz var butun divleri icine alan. side-bar adinda bir divimiz daha var bunun icinde de listelerimiz var -ul ve li- overlay-content one adında bir content divimiz ve overlay-content two adında ikinci bir divimizde var.

Daha sonra Javascript kodlarımızı dahil edelim.

var SS = {

init : function()
{
$('.overlay-content.one').show();
$('.overlay-content.two').hide();
$('.activities').click(function(){

event.preventDefault();
var selectedDiv = ".overlay-content." + $(this).attr('rel');
$('.overlay-content').hide();
$(selectedDiv).show();
console.log(selectedDiv);

});
}
}

$(function(){
SS.init();
});

 

Javascript ufak bir trick

Jquery kütüphanesini kullanmadan javascript ile değişen efektsiz bir banner alanı yapabiliriz. Bunu genellikle mobil cihazların performansı açısından yapılabilir gibi gözüküyor. Plug’insiz bir şekilde banner yapılabilir. Bunun için sadece img tagının src özelliği ile yapılabilir. Ancak ben sadece ar-ge yaptığım için sadece setTimeout’lu biryapı kurdum.

Mantık bir Object oluşturmak (SERHATS) adında ardından bu objenin içinde kodları başlatan init metodu getirilir. Init metodunda array’lere push metodunu kullanarak elemanlarımızı index kullanarak ekleyebiliriz. Daha sonrasında dışardan st = Interval değeri (timer) sonrasında nCurrent = integer değer arrayları seçeceğimiz değişken olarak düşünülebilir. wrapText = string (htmldeki id’mizi seçecek olan alan) bu da değişen değeri #wrapText div’nin içine yazacaktır. nextBtn ve prevBtn ileri ve geri butonlarımız bunlar da html DOM yapısı içerisinde link sisteminde verildi ve id değerleride bu şekilde verildi.


var SERHATS = {} || new Object();
 var projects = new Array();
var nCurrent = -1;
var wrapText;
var st = null;
var prevBtn;
var nextBtn;

SERHATS = {

init : function()
{
bannerInterval();
projects[0] = "Proje adı 1";
projects[1] = "Proje adı 2";
projects[2] = "Proje adı 3";
projects[3] = "Proje adı 4";
projects[4] = "Proje adı 5";
projects[5] = "Proje adı 6";

nextBtn = document.getElementById('btnNext');
prevBtn = document.getElementById('btnPrev');

nextBtn.addEventListener("click",function(){
nCurrent ++;
nCurrent = nCurrent % projects.length;
wrapText = document.getElementById('wrapper').innerHTML = projects[nCurrent];
console.log('next button clicked.')
});

prevBtn.addEventListener("click",function(){
if(nCurrent&gt;0) nCurrent --;
wrapText = document.getElementById('wrapper').innerHTML = projects[nCurrent];
console.log('prev button clicked.');
});

nextBtn.addEventListener("mouseover",function(){
console.log('Bir sonraki banner adı ==== ' + projects[nCurrent + 1]);
});

prevBtn.addEventListener("mouseover",function(){
console.log('Bir önceki banner adı ==== ' + projects[nCurrent - 1]);
});
}
};

function bannerInterval()
{
st = setInterval(function(){
nCurrent ++;
wrapText = document.getElementById('wrapper').innerHTML = projects[nCurrent];

if(nCurrent === 5)
{
clearInterval(st);
st = null;
}

},3000);
}

//Ayrıca verileri array şeklinde de ekleyebiliriz.
document.body.innerHTML = ['Deneme1','Deneme2','Deneme3'].join('-');

Javascript setTimeout ve setInterval Hakkında Kaynaklar

http://www.w3schools.com/js/js_timing.asp
http://www.pageresource.com/jscript/jtimeout.htm
http://www.west-wind.com/weblog/posts/2006/Mar/28/JavaScript-windowSetTimeout-to-a-JavaScript-Class-method-or-function-with-parameters

Javascript ile Attributelere Ulaşmak

Dinamik ya da dökümanızda eklediğimiz html elemanlarının attributelerine ulaşmak isteyebiliriz bazen bu gibi durumlarda; attirubte değerini alıp değiştirebiliriz.

Html sayfamızda img etiketiyle bir resim gömdüğümüzü varsayarak devam ediyorum sadece javascript kodları yazıyorum

 var imgAttr = document.getElementById('resimID').attributes.getNamedItem('class').value;

Burada kodları kısaca açıklamak gerekirse; İlk olarak resmimizin ID vererek ulaşıyoruz. Daha sonrasında ise ID ile ulaştığımız resimlerin attributteslerine ulaşabilmek için “attributes” değerini kullanıyoruz. Daha sonra ulaştığımız attributeslerin değerlerinin ne olduğunu öğrenebilmek için getNamedItem ile ulaşıyoruz. daha sonra value ya da name şeklinde alabiliyoruz.

JQuery ile Append ve Animasyon

Konunun başlığını ne koyacağıma karar veremedim o yüzden böyle bir başlık açmayı uygun gördüm. Aslında yaptığım örnekte append özelliğinin ne olduğunu görebilmek için yapmıştım ama biranda aklıma animasyon yapmak geldi. Append özelliği ile belirlediğim bir nesnenin altına nesne ekleyebiliyoruz. Ayrıca appendTo() özelliği ile de tam tersini yapabiliyoruz. Yani belirttiğimiz objenin üstüne obje ekleyebiliriz.

İlk olarak jquery kütüphanesini html sayfanıza eklediğinizi ve script taglarının içerisine document.ready direk oluşturduğunuzu varsayarak devam ediyorum. Ayrıca aşağıda html ve javascript taglarını giremediğim için resim olarak paylaşmak zorundayım. Burada basitçe kodlardan bahsetmek gerekirse;

ilk olarak st (setinterval) değerimi oluşturuyorum bu benim 10 saniyede fonksiyon tetikleyecek değişkenim. Eğer ben 10 yerine 30 – 40 vb değerler verseydim o değerler aralığında animasyonu sağlardır. Bir nevi FPS değeri.

body ile append yaparak body tagımın altına bir adet id’li DOM elementi ekliyorum. Daha sonra bununla animasyon yapacağım için ID belirlemem mantıklı bir davranış olacaktır.

Daha sonra CSS özelliklerini veriyorum kutumun belli olabilmesi için. Daha sonra bir IF koşulu koyup eğer belirlediğim değere eşit ya da aynı ise değerimi sabitleyip olduğu yerde kalmasını sağlıyorum. Daha sonra yukarıda oluşturduğum st(setinterval) değerini silip null diyerek boşaltıyorum içini.