Ali GÜNDOĞDU
blog.vuska.net
Bir iş için lazım oldu bende ekleyeyim belki bir daha lazım olur dedim,
kimi zaman oluyor, java script ile o an aktif olan sayfayı “refresh” etmemiz gerekebiliyor.
Yenileme işlemi için ben 3 adet yöntem açıklayacağım.
Yöntem 1 : Javascript Reload fonksiyonu ile
window.location.reload() : bu fonksiyon o an aktif olan sayfayı yeniler.
<a href='javascript:window.location.reload()'>Yenile</a>
Yöntem 2 : Tarayıcının history nesnesi ile
history.go(0) : İnternet sayfalarını görüntülememizi sağlayan tarayıcıların içerisinde bulunan history nesnesi bize daha önce gezdiğimiz sayfaların bir listesini verir. En son gezdiğimizden ilk önce gezdiğimize kadar olan sayfaları index numarasını küçükten büyüğe sıralanacak şekilde ayarlar ve o an aktif olan sayfaya da 0 değerini verir.
<a href='javascript:history.go(0)'>Yenile</a>
Yöntem 3 : Location nesnesi ile
window.location.href=window.location.href : Yine bir javascript nesnesi olan location nesnesi içerisinde o an bulunduğumuz adresin bilgilerini tutar. Javascript ile bir başka sayfaya yönlendirme yapmak istersek location.href nesnesine değer vermemiz yeterlidir.Yine aynı nesneyi değer vermeden çağırırsak bize geçerli olan adres bilgisini döndürecektir. Biz içinde bulunduğumuz sayfa bilgisini, location.href nesnesine değer olarak verirsek tarayıcı sayfayı yenilecektir.
<a href='javascript:window.location.href=window.location.href'>Yenile</a>
son 10 dakikadır java script ile NaN değerini yakalamaya çalışıyordum ki en son aklıma acaba isNaN fonksiyonu varmı diye bakmak geldi.
var deger = "Abbas";
degersayi = parseInt(deger);
alert(degersayi);
yukarıdaki javascript kodunu işleme koyduğunuzda ekrana alert kutusu ile “NaN” değerini görürsünüz.
yine program içerisinde degersayi degerinin NaN’a eşit olup olmadığını anlamak için
if(degersayi == “NaN”) yada if(degersayi == NaN) kullandığınızda her durumda true değeri döndürüyor.
bunun yerine javascript fonksiyonlarından isNaN fonksiyonunu kullanmak daha sağlıklı sonuçlar doğurmaktadır.
if(isNaN(degersayi )){alert(“blog.vuska”;}
alert(“Namaste”);
Yine uzun bir başlık yine kısa bir örnek kod (:
normalde böyle şeylere ne gerek var diyebilirsiniz ama an geliyor ki,elinizde bulunan bir js dosyasından başka bir dosyayı çağırmanız gerekiyor işte böyle durumlarda yapacaklarınız ;
function include(filename)
{
var body = document.getElementsByTagName('body').item(0);
script = document.createElement('script');
script.src = filename;
script.type = 'text/javascript';
body.appendChild(script)
}
işin mantığı basit aslında, xhtml şıtandardına göre her web sayfasında olması gereken body tagına yeni bir script nesnesi oluşturarak ekleme düzenine göre çalışan bir fonksiyonumuz var adı include,
bu include tanımı sitedeki statik olarak eklenen diğer JS dosyalarından ve Script nesnelerinden önce yazılır yada eklenirse daha güzel olur.zira fonksiyon herşeyden önce tanıtılmış olacaktır.
Kullanması son derece basittir;
<script type="'text/javascript'">
include('falanca.js');
include('filanca.js');
include('http://www.amanda.com/falanca.js');
</script>
Günümüz internet teknolojisinde inline model kod yazmak ile oop kod yazmak tartışıladursun,asıl ihtiyaç farklı kulvarlarda at koşturan dillerin ortak şekilde geçinmesi birbirleri arasında kayıpsız ve kolay yoldan bilgi transfer edilebilmesidir.
Ajax denilen tekniğin gelişmesi ile birlikte bir çok internet sitesi artık sanki masaüstü programı gibi işlem yapmaya,animasyonlar hızlı yüklemeler ile kullanım kolaylığı oluşturmaya başlamışlardır.
bu tur işlemleri iki farklı kısımda incelemek gerekir,
eğer çok istisnai durumlar yok ise (wget,flash,java applet,javaFX,silverlight) kullanıcı tarafında gerçekleşen işlemler için javascript temeldir. (buda kendi içerisinde dallanabilir ama istisnai durumlar içerisinde belirttiğim bir çok dil bile tarayıcıya JS kodu derleyip göndermektedir)
siz javascript ve JS kütüphaneleri kullanarak kullanıcı tarafında yani ajax,animasyonlar,etkileşimli tasarım renklendirmeleri gibi kullanım kolaylığı sunacak arabirimi yaparsınız,
sunulacak bilgi ve form değerlerinin işlenerek yeni sonuçlar çıkarma,veritabanı işlemleri gibi derin mevzuları ise sunucu taraflı programlama dilleri ile yaparsınız, bunlar asp ,.net,jsp,php,ruby,python,go olabilir.
peki bir birinden bağımsız ve alakasız iki farklı dili (dillerin) nasıl bir ortak paydada buluşturabiliriz ?
ben burada Php ile Js arasındaki metodlardan bahsedeceğim.
1.Metod : HTML içine gömme metodu.
en çok bilinen uygulanan metod budur, mantığı basittir. php değişkenlerinin jsye aktarılmasında çok etkilidir.
<script type='text/javascript'>
var phpdengelecek = '<?php echo 'php den gelen değişken değeri'; ?>';
alert(phpdengelecek);
</script>
yukarıdaki basit örneği çalıştırdığınızda ekrana bir mesaj kutusu açılacak ve “php den gelen değişken değeri” yazdırılacaktır.
burdaki mantık şudur : javascript kodları kullanıcı tarafında yorumlanır yani html içerisinde gömülü halde gelir,php kodları ise sunucuda yorumlanır ve php’den dönen değerlere göre html kodu şekillenir, kullanıcıya gönderilir.
yukarıdaki kuraldan ortaya çıkacak sonuç , php ile gönderilecek html koduna müdahale edip,js den önce php komutlarını çalıştırabildiğimize göre neden javascript komutlarına ve değişken içeriklerine müdahale edemeyelim ki.
şimdi örneği biraz genişletelim,
kullanıcı adı kadi değişkeni ile querystring’den $_GET metodu ile geliyor biz javascript ile hoşgeldin kullanıcı adı dedirteceğiz, tabiki kullanıcı adı değişken olacak.
<script type='text/javascript'>
alert('Hoş geldin <?php $_GET['kadi']; ?>');
</script>
örneğin çalıştığı sayfa http://localhost/deneme.php olsun biz tarayıcıdan direk olarak http://localhost/deneme.php dosyasını çağırırsak javascript sadece hoşgeldin içerikli bir mesaj kutusu çıkaracaktır. ama biz adresi http://localhost/deneme.php?kadi=kerim_abdül_cabbar şeklinde çağırırsak javascript hoşgeldin kerim_abdül_cabbar şeklinde sonuç döndürüp mesaj kutusu çıkaracaktır.
birinci metodun özeti : javascript dosyası html kodları içinde statik olarak bulunduğu için php ile kolaylıkla yönlenebilir.
2. metod : javascriptten php’ye komut göndermek :
burada iş tam tersine dönüyor, kullanıcı tarafında oluşturulan bilgiler php’ye değişken olarak gönderilecek
eskiden olsa bu iş tam bir ütopya idi ama ajax bu iş için çıkmıştı. ama sadece ajax kendi başına hiç bir işe yaramayabiliyor, çünkü her geçen gün ihtiyaçlar ve hayal gücü genişliyor.
2.metodun birinci kısmı öğren ve gönder kısmı,
bir örnekle açıklamak gerekirse php ile farklı ekran boy ve genişliklerine göre farklı siteler tasarladınız,
php sunucu tarafında olduğu için kullanıcı bilgilerinin hepsine hakim değil işte böyle durumlarda önce javascript ile gerekli bilgileri alıp php yi uygun yönergeler ile tetiklemeniz gerekiyor,
örneğimizi koda dökelim
index.php içeriği
<?php
if(!$_GET["en"] or !$_GET["boy"]){
echo "
<script type='text/javascript'>
var adres = ;
location.href='<?php echo $_SERVER['php_self']; ?>'+'?en="+screen.width+'&boy='+screen.heigh;
</script>
";
exit();
}else{
echo $_GET["en"]." x ".$_GET["boy"];
}
?>
örneği açıklamak gerekirse,
önce index.php dosyamızın yüklenmesi talimatı verildi, eğer $_GET metodu ile (querystring) en ve boy değerleri gelmemiş ise JS yardımı ile en ve boy değerlerini oluşturarak aynı sayfaya bu sefer $_GET metodu ile gerekli değişkenler ile gönderdik. böylelikle javascript değişkenlerini php’ye aktarmış olduk.
aslında biraz taşıma su gibi gözüksede kodlama yaparken bu tür değişkenleri class yüklemelerinden önce kontrol ettirirseniz / ettirirsek gereksiz yüklemelerin önüne geçmiş oluruz.
bu metod hem php’den js’ye aynı zamanda js’den php’ye bilgi aktarılması gereken yerlerde %100 etkilidir. mesela örneğimizi geliştirerek anlatacak olursak js ile ekran en boyunu öğrendip php’ye gönderen, php gelen veriyi işleyip ona göre yönlenme yapan ve sonunda javascript mesaj kutusunda ekran en boy değerini söyleyen bir kod yazalım.
yine index.php
<?php
if(!$_GET["en"] or !$_GET["boy"]){
echo "
<script type='text/javascript'>
var adres = ;
location.href='<?php echo $_SERVER['php_self']; ?>'+'?en="+screen.width+'&boy='+screen.heigh;
</script>
";
exit();
}else{
switch($_GET["boy"){
case "600":
include("in800.php");
break;
case "768":
include("in768.php");
break;}
}
?>
<script type='text/javascript'>
alert('<?php echo $_GET["en"]." x ".$_GET["boy"]; ?>');
</script>
umarım buraya kadar anlattıklarım kafanızda bir şeyleri tetiklemiştir.
gelelim 2.metodun diğer kısmı lan anlık işlem hacmine bu kısım ajax tekniği ile işlem görüyor yani sayfa yenilenmeden sadece belirli bir alanı güncellemek için kullanılıyor.bu kısım ile ajax’ı araştırabilirsiniz.
giriş :
Uzun süredir böyle bir yazı yazmak istiyordum ,bugüne nasipmiş,
web siteleri,barındığı sunuculardan sizin bilgisayarınıza geldiği anda içerisinde html kodlarını getirir,
web sitesi hangi dille yazılırsa yazılsın,size html olarak gelir,gelmek zorundadır.Çünkü sizin web sitelerini görüntülemek için kullandığınız tarayıcılar (firefox,chrome os,internet explorer,safari) aslında birer html yorumlayıcısıdır.Birbirlerinden ayrıldıkları tek noktada bu html kodlarını yorumlama hızlarıdır.
** benim yukarıda bahsettiğim html terimi aslında salt html değil (javascript,embed,css) gibi html 4 ve üstü teknolojiler bütünüdür.
Nasıl oluyor ? :
kodlarınızda en iyi korumayı sağlamak için,kodların size ve ziyaretcinize hangi aşamalardan geçerek geldiğini iyi bilmek gerekir.Siz ne kadar iyi bilirseniz,o kadar iyi önlem alabilirsiniz.
kullanıcı / ziyaretçi, sizin site adresinizi tarayıcısına yazıp sayfayı çağırdığı andan itibaren,tarayıcınız sizin sitenizi kendi üzerine çekerek yorumlamaya başlar.
bu süreç içerisinde web siteninize bağladığınız tüm css ve js komut dosyaları da tarayıcıya yüklenir.hatta resim dosyalarıda bu yüklenme kervanı içerisindedir.
hal böyle olunca yazmış olduğunuz ve web sayfasına etki etmesini istediğiniz css ve js kodları önce tarayıcının ön havuzuna alınıyor ardındanda işleme konuluyor.
buraya kadar anlattığım olaylardan çıkacak sonuç şu; sizin kodlarınızın işlenebilmesi için kısmende olsa ziyaretçi bilgisayarına yüklenmesi gerek.
Peki ya sonra ? :
sizin yazmış olduğunuz kodların bulunduğu tüm dosyalar (css – js ) ziyaretçinin bilgisayarına tarayıcı vasıtası ile yüklendikten sonra tarayıcı bu kodları okuyarak ne yapacağına karar veriyor ve kullanıcının tarayıcı ayarlarında yapmış olduğu ziyaret edilmiş sayfaların artık dosyalarını silme aralığına göre sizin kodlarınızın bulunduğu artık dosyalar siliniyor.(tempory internet files,firefox cache vb.) kimi kullanıcı bu ayarları hiç değiştirmediği için uzun bir süre sizin kodlarınız kullanıcı bilgisayarında kalabiliyor.
Sorunu kavradık peki çözümü yok mu ?
yazdığınızın ve yayınladığınız kodların (php ve asp kodları gibi sunucu tarafında yorumlanan kodlar değil,js css gibi ziyaretçi tarafında yorumlanan kodlar) ziyaretçinin bilgisayarına yüklenmemesini engelleyemediğimizi öğrendik.peki yüklenen kodlara tarayıcı dışında kimse erişmesin diyebilir miyiz, tabiki hayır diyemeyiz.
bunca işlem süreci içerisinde biz kod yazarlarının kodlarını saklaması için hiç mi bir önlem alınmamış ? cevap yine hayır. eğer hala bu soruyu sorabiliyorsak zaten işin özünü anlamamışız demektir.
Çözüm olarak kullanılabilecek yöntemler ?
Son söz:
Web 2.0 felsefesi ile birlikte,amaç görsellikten çok içeriğe döndüğü için artık çoğu şeyi saklamanın manası kalmamıştır.
web sitelerinin hepsi görsel birbirine benzese bile içerik olarak birbirini tutmamaktadır.işin amacı ve doğası bu yöndedir. Eğer çok iyi yazdığınıza inandığınız bir js kodunu saklamak istiyorsanız bunu başaramaz,beyhude çabalamış olursunuz.siz sadece önlem alabilirsiniz.
Firefox ayar bilgilerini regedit kayıt defterinde değilde, kendi profil klasörü altında sqlite database dosyaları yada javascript değişken dosyaları içerisinde tutar ve okur.
Firefox’un herhangi bir ayarını dışarıdan (firefox programı dışında başka bir yazılım ile) değiştirmek istenildiğinde izlenmesi gereken dosya yolu gereken yol şu
C:\Documents and Settings\CeaSeR\Application Data\Mozilla\Firefox\Profiles\xhaquz7i.default\prefs.js
yalnız burada dikkat edilmesi gereken kısım şu kalın puntolarla belirttiğim kısımlar (klasörler) her bilgisayarda veyahut her windows sisteminde (xp – vista – 7) farklılık gösterir.
birinci kalın kısım ceaser windows kullanıcı adıdır.
ikinci kalın kısım ise firefox’un varsayılan profil klasörüdür. ancak burada bir ip ucu vereyim firefox varsayılan klasör dosyaları sonu hep .default olarak biter
firefox’un ayar dosyası olan prefs.js dosyasına nasıl ulaştığını anlattıktan sonra gelelim bu dosyanın içeriği hakkında bilgi vermeye,
prefs.js bir javascript dosyasıdır ve firefox kullanacağı bilgileri (değişkenleri) bu dosya yardımı ile kendi sistemine aktarmaktadır. bu dosya ile firefox’un kullandığı proxyden açılış sayfalarına kadar herşeyi düzenlemen mümkündür. (firefox dışından yada içinden)
bu dosya içerisinde (prefs.js) değişkenler ve değerleri şu şekilde yazılır
user_pref("DEĞİKEN ADI", DEĞER);
dosya içerisindeki mevcut değişkenleri düzenleyip firefox’u yeniden başlattığınızda tüm ayarların değişmiş olduğunu görürsünüz.
bu blog gönderisi bu adreste sorulan bir soruya verdiğim bir cevabtan yola çıkarak oluşturulmuştur.
GreaseMonkey ?
Firefox eklentisi olarak çalışan ve web sayfaları üzerinde kullanıcı taraflı javascript dosyalarının (userscripts) yorumlanmasına izin veren teknolocik güzellik.
Bu işlem neticesinde bir siteye kendinizce yeni görsellikler yada yeni özellikler ekleyebilirsiniz.
jQuery ?
Bir çeşit javascript kütüphanesi, kolay yazılım, kolay öğrenim ve bol eklentileri ile en çok tercih edilen kütüphaneler arasında.
Peki GreaseMonkey ile jQuery’i bir arada kullanarak dehşet userscriptler yazmak için ne yapmak gerekli ?
Öncelikle jquery’in en son çıkmış sürümünü GreaseMonkey scripti içerisine ekleyelim,
javascript’te direk include komutu olmadığı için
var GM_JQ = document.createElement('script');
GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';
GM_JQ.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(GM_JQ);
yukarıdaki kod ile jquery fonksiyonlarını ekledik
çalışmasını ise
$(document).ready(function(){
alert('yirim sini cigerim yirim');
}
yordamı ile test edebilirsiniz.