Web Sitesi İçin Translater (Javascript Translater)

Web sitenizi dünyaya açmak yabancı kullanıcıların da site içeriğinizden faydalanmasını sağlamak istiyorsanız web sayfanıza dil seçenekleri koymak zorundasınız. Bunu sağlamak için elinizde üç seçenek bulunmakta (ya da en azından benim bildiğim bu kadar)

1. Sitenin her sayfası için farklı dillerde HTML dosyaları oluşturmak
2. İnternetten bulacağınız ASP ya da PHP tabanlı yazılmış bir çeviri programını kendi sunucunuza entegre etmek
3. Google Translate kullanmak

İlk seçenek ufak çaplı siteler için uygulanabilir. Ama pek de verimli olmaz.

İkinci seçeneği tercih etmek daha mantıklı. Ancak bu tip programların ücretsiz olanlarından bulmak kolay mı? Ücretsiz yazılımlar ne kadar verimli? denemeden bilemeyiz. Bunun haricinde ücretli programlardan/servislerden de faydalanılabilir. Ayrıca Joomla, Moodle, gibi web portalları kullanıyorsanız bu portalların dil paketlerini sunucuya yükleyerek de kullanıcılar için farklı dil seçenekleri oluşturabilirsiniz. Ancak bu sadece sayfa şablonuun ve bu şablona bağlı üyelerin görünümünü etkiler, içeriğiniz yine aynı kalır. Burda amacım şablonu da dahil olarak tüm siteyi istenen dile çevirmek.

Üçüncü seçenek benim gibi bedavacılar için... Diğer iki seçenekte bahsedilen işlemler sitenin sunucu kısmında(host üzerinde) gerçekleştirilir. Eğer benim gibi Blogger kullanıcıysanız maalese size ulaşabileceğiniz bir host alanı verilmiyor. bu durumda alternatif yollara başvurmanız gerekiyor. Bloggerın sunduğu bazı Gadget'lar bu sorun için çözüm olabilse de Bu gadgetlar ile birlikte gösterilen reklamlar, gadgetın sayfa tasarımına uymuyor oluşu dil bloguna seçeneği koymak isteyen bir blog sahibi için büyük bir problem. Tabii ki bu elimizin kolumuzun bağlı olduğu anlamına gelmiyor. İşte tam bu noktada Google'un çeviri servisi olan Google Translate imdadımıza yetişiyor. Bilindiği gibi bu servis sadece metinleri değil, tüm site içeriğini istenen dile çevirebiliyor. siteyi komple çevirmek için tek yapmamız gereken sitenin tam adresini çeviri kutucuğuna yazmak. Google tüm siteyi otomatik olarak, büyük bir doğrulukla istediğiniz dile çevirecektir. Ancak ziyaretçilerinizden bunu yapmalarını isteyemezsiniz.

İşte ben de tam bu noktada şunu düşündüm. Acaba javascript kullanarak(Javascript kullanıcı tarafında çalıştığı için yukarıda saydığım hosting ve yükleme sorunum olmayacak)bunu otomatik olarak yaptırabilir miyim? Yani ziyaretçi aynı diğer büyük sitelerde olduğu gibi, dil seçeneği menüsünden tek bir tuşa basarak tüm siteyi istediği dile çevirmesini sağlayabilir miyim? Bu düşünce üzerine küçük bir araştırma yaptım ve şu sonuçlara ulaştım,

-İlk olarak google translate'nin nasıl çalıştığını, çeviri ile ilgili sorgulamaların google çeviri sunucusuna nasıl yollandığını araştırdım. Türkçe'den İngilizce'ye çevirmesi için çeviri kutusuna bir metin ya da site adresi yazdığımda bu bilgiler sunucuya şu şekilde gönderiliyordu,

"http://translate.google.com/translate?hl=tr&sl=tr&tl=en&u="

Adres çubuğunda bu ifadenin karşısında çevirlmesi için yazdığım metin ya da site adresi yazıyordu. Böylelikle google sunucusuna sorgu göndermenin yolunu da bulmuş oldum. Yukarıdaki kod sadece ingilizce için geçerlidir. Diğer dillerin kodunu elde etmek için de ayrıca çeviri işlemleri yaptırılmalı ve adres çubuğunda baştan çeviri metnine kadar olan kısım kopyalanmalıdır. Bu şekilde google'un sunduğu tüm çeviri seçenekleri elde edilebilir.

-Sonra bunu javascript'e otomatik olarak nasıl yaptırabileceğim üzerine çalışmaya başladım. Yazacağım program iki şey yapmalıydı,

1. Kullanıcı herhangi bir dili seçtiğinde program sitenin o anki sayfasına ait url'yi adres çubuğundan kopyalamalı ve bir değişkene aktarmalı
2. Sonra da bu değişkenin değeri ile google'dan aldığımız o dille ilgili kodu birleştirip ardes satırına yazmalı ve googe sunucusuna dil sorgulamasını yollamalı

İşte aşağıda yazdığım kodlar bu işi yapıyor. Kulanıcı herhangi bir butona bastığında o butonla ilgili bir fonksiyon çalışıyor. Seçeneklerdeki her dil için ayrı bir fonksiyon yazdım. Hepsi temelde aynı işi yapıyor sadece değişken isimleri ve dil sorgusu için kullandığı kodlar farklı. dil sorgusu için kullanılan kodlar turuncu renkle renklendirilmiştir. Bu program üç dil için yapılmıştır. istenirse aynı mantıkla diğer diller de eklenebilr.

<div style="heigth:23px;">

<script language="javascript" type="text/javascript">

function eng(){

var a

a=document.location.href;

parent.location.href='http://translate.google.com/translate?hl=tr&sl=tr&tl=en&u=' +a

}

function ger(){

var g

g=document.location.href;

parent.location.href='http://translate.google.com/translate?js=n&prev=_t&hl=tr&ie=UTF-8&layout=2&eotf=1&sl=tr&tl=de&u=' +g

}

function frn(){

var f

f=document.location.href;

parent.location.href='http://translate.google.com/translate?js=n&prev=_t&hl=tr&ie=UTF-8&layout=2&eotf=1&sl=tr&tl=fr&u=' +f

}

</script>

<input type="button" value="" onclick="eng()" style=" background-image:url(ingiliz.jpeg); width:26px; height:22px; cursor:pointer; " title="English" /><input type="button" value="" onclick="ger()" style="background-image:url(alman.jpeg); width:26px; height:22px; cursor:pointer; " title="German" /><input type="button" value="" onclick="frn()" style="background-image:url(fransiz.jpeg); width:26px; height:22px; cursor:pointer;" title="French" />

</div>

Bu kodlamanın sonucunda oluşturulan javascript dil menü çubuğu şu şekilde görüntülenir,

Javascript if Uygulaması (Javascript ile Basit Bir Hesap Makinesi)

Programlama öğrenmeye çalışan herkesin eninde sonunda karşılaşacağı bir problem vardır. Programcılar buna "Program Akış Denetimi" derler. Bilgisayar programı dediğimiz şey esasen akış halinde birbirini takip eden bir dizi işlemden ibarettir. Program akışı içinde bu işlemler bilgisayar tarafından süratle gerçekleştirilir ve sonuçları ekrana yansıtılır. Bazı programlar yapı itibariyle basittir. Sadece kullanıcıdan ya da herhangi bir yerden aldığı verileri işleyerek sonucunu gösterirler. Bu tip programlar tek yönde çalışırlar ve genelde sadece tek bir şarta dayalı işlemleri gerçekleştirirler ve çözüme ulaşırlar. Ancak bazı problemlerin çözümü bu kadar basit olmaz. Programcılar sıklıkla bilgisayara, "Şu şart halinde şunu yap, bu şart halinde bunu yap" şeklinde komutlar etkleyerek programa farklı durumlar için esneklik kazandırmak zorunda kalırlar. İşte bu farklı durumların sorgulandığı yer, belirlenen şarta göre program akışının yön değiştirdiği ya da olağan akışına devam ettiği bir kavşak noktası gibidir. Program akışı bu noktalardan denetlenir. Hemen hemen tüm programlama dillerinde bu denetleme "if" komutu ile yapılır. "if" komutu program akışını iki kola ayırır. İngilizce'de "eğer" anlamına gelen bu sözcük programa işleyeceği verileri, programcı tarafından önceden belirlenen kriterlere göre(büyüklük, küçüklük, eşitlik gibi)karşılaştırıp sonuca göre (evet yada hayır) program akışını yönlendirme olanağı verir.

Buraya kadar anlatılanlar Javascript için de geçerlidir. Javascript'te "if" komutu şu şekilde kullanılır;

if(aranan şart){

uygulanacak işlem

}

Bir sonraki işlem

Aranan Şart: x==5, secim=="yeni", a<5 gibi şartların sorgulandığı bölüm.

Uygulanacak İşlem: x=sayi1+sayi2, document.hesap.sonuc.value=islem gibi komutların uygulandığı, çeşitli işlemlerin yapıldığı kısım. Bu bölümde çeşitli aritmetik işlemler, karşılaştırmalar, döngüler gerçekleştirilebilir. Bir sonraki işlem: aranan şartın sağlanamadığı durumlarda yapıl Javascript'te "if komutu şu şekilde çalışır;

1- Önce parantez içindeki şart sorgulanır. Sorgulama sonucu evet ya da hayır dır.

2- Sonuç evet ise yani şart sağlanıyorsa, süslü parantezler içindeki işlemler gerçekleştirilir.

3- Sonuç hayır ise yani şart sağlanmıyorsa süslü parantez içindeki işlemler uygulanmaz. "if" bloğundan çıkılır ve hemen bir sonraki işlem gerçekleştirilir.

Birden fazla "if" komutunu iç içe kullanabilirsiniz. Yani bilgisayara "şu şart halinde, şu şartta şu şartı sorgula" şeklinde komutlar verebilirsiniz. Bu komutun iç içe uygulamasını daha sonraki bir yazıya bırakıp örnek bir program ile yazımı sonlandırmak istiyorum. Aşağıdaki kodlar web sayfasında çok basit, ilkel bir hesap makinesi oluşturmak için yazıldı. Kullanıcı arayüzü olarak HTML'nin form elemanlarını (textbox ve button) kullandım. Program yaı ve işlevsellik açısından o kadar iyi olmasa da "if" komutunu anlamamız açısından yararlı olacaktr. Ayrıca şunu da belirtmek istiyorum bu programın "endeks=selectedIndex " ile başlayan kısmını "Hakkı İcal"'in Javascript ders notlarından aldım. Oradan öğrendiklerimi geliştirip değiştirerek ürettiğim uygulamaları buradan sizlerle paylaşıyorum. Umarım hem sizin için hem de benim için faydalı olur.

İşte hesap makinesi kodları:

<script language="javascript1.2">

function hesapla(secme){ /* Bu satırda bir fonksiyon tanımlanıyor*/

var sayi1,sayi2,endeks, secilenIslem,islem /*değişkenler belirleniyor*/

endeks=secme.selectedIndex

secilenIslem=secme.options[endeks].text /*bu kısımda açılır menüden seçilen değeri"secilenIslem" değişkenine aktarıyor */

sayi1=eval(document.hesap.birinci.value)/* Sayısal işlem yapılacak değişkenlere*/

sayi2=eval(document.hesap.ikinci.value) /* kullanıcının girdiğideğerleraktarılıyor*/

if(secilenIslem=="Topla"){ /* bu kısımda kullanıcının seçtiği işlem*/

islem=sayi1+sayi2 /* sorgulanıyor ve işlem gerçekleştirilip sonucu*/

document.hesap.sonuc.value=islem /* "Sonuç" adlı text box'a yazdırılıyor*/

}

if(secilenIslem=="Çıkar"){

islem=sayi1-sayi2

document.hesap.sonuc.value=islem

}

if(secilenIslem=="Çarp"){

islem=sayi1*sayi2

document.hesap.sonuc.value=islem

}

if(secilenIslem=="Böl"){

islem=sayi1/sayi2

document.hesap.sonuc.value=islem

}

if (secilenIslem=="İşlemi Seçiniz"){ /*kullanıcı işlem seçimi yapmazsa uyarı*/

alert("Lütfen Bir İşlem Seçiniz") /*mesajı veriyor*/

}

}

</script>

<form name="hesap">

<div style="float:left;">

1. Sayı : <input type="text" value="" name="birinci" maxlength="10"

/><br />

2. Sayı : <input type="text" value="" name="ikinci" maxlength="10"

/><br />

Sonuç = <input type="text" value="" name="sonuc" maxlength="10" />

</div>

<div style="float:left;">

<select name="secim" onchange="hesapla(this)">

<option selected>İşlemi Seçiniz

<option>Topla

<option>Çıkar

<option>Çarp

<option>Böl

</select>

<input type="reset" value="Sil" />

</div>

</form>

Bu kodlamanın sonucunda hesap makinemiz şu şekilde görüntülenir.

1. Sayı :

2. Sayı :

Sonuç =

İşlemi Seçiniz Topla Çıkar Çarp Böl