<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>BLOCRACY &#187; Javascript</title>
	<atom:link href="http://www.blocracy.com/category/javascript/feed" rel="self" type="application/rss+xml" />
	<link>http://www.blocracy.com</link>
	<description>no like other</description>
	<lastBuildDate>Thu, 24 Jun 2010 20:23:08 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Google Translation API</title>
		<link>http://www.blocracy.com/google-translation-api</link>
		<comments>http://www.blocracy.com/google-translation-api#comments</comments>
		<pubDate>Wed, 19 Aug 2009 18:39:57 +0000</pubDate>
		<dc:creator>Kerem Bekman</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[api]]></category>
		<category><![CDATA[çeviri]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://www.blocracy.com/?p=95</guid>
		<description><![CDATA[
Biliyoruz ki, &#8220;google&#8221; bir çok servislerinin API&#8217;leri bizlerle paylaşıyor. En çok kullanılan YouTube, Maps ve Search API&#8217;lerinin yanında, bence ilerde en gözde olacak API&#8217;si Translation API 
Translation API&#8217;leri sayesinde web sitemizin tüm içeriğini ziyaretçi&#8217;nin ana diline dinamik olarak çevirir aynı zamanda ziyaretçinin yaptığı yorum veya postları kendi ana dilimize çevirebiliriz..
Kullanım alanı tamamen bizim yaratıcılığımıza kalmış..

API [...]]]></description>
			<content:encoded><![CDATA[<p><img class="ocr" alt="Google Translation API" src="http://www.blocracy.com/dosyalar/gjava.jpg" class="aligncenter" width="510" height="72" /><br />
Biliyoruz ki, &#8220;<a href="http://www.google.com">google</a>&#8221; bir çok servislerinin API&#8217;leri bizlerle paylaşıyor. En çok kullanılan YouTube, Maps ve Search API&#8217;lerinin yanında, bence ilerde en gözde olacak API&#8217;si <a href="http://translate.google.com">Translation API</a> </p>
<p>Translation API&#8217;leri sayesinde web sitemizin tüm içeriğini ziyaretçi&#8217;nin ana diline dinamik olarak çevirir aynı zamanda ziyaretçinin yaptığı yorum veya postları kendi ana dilimize çevirebiliriz..</p>
<p>Kullanım alanı tamamen bizim yaratıcılığımıza kalmış..<br />
<span id="more-95"></span><br />
API Kullanımından önce artık jquery herkes tarafından bilinen bir sentaks haline geldi ama, yinede text() ve val() fonksiyonları hatırlayalım.. </p>
<p>1. text() &#8211; Input elementleri hariç, diğer herhangi bir tag&#8217;ın içeriğini almak veya değiştirmek için kullanılır..</p>
<p>Örneğin:</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&lt;p&gt;İçerik1&lt;/p&gt;</div>
</li>
<li class="li1">
<div class="de1">&lt;div id=<span class="st0">&quot;beni&quot;</span>&gt;İçerik2&lt;/div&gt;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2">$<span class="br0">&#40;</span><span class="st0">&quot;p&quot;</span><span class="br0">&#41;</span>.<span class="me1">text</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="co1">// İçerik1</span></div>
</li>
<li class="li1">
<div class="de1">$<span class="br0">&#40;</span><span class="st0">&quot;#beni&quot;</span><span class="br0">&#41;</span>.<span class="me1">text</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="co1">//İçerik2 </span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
</ol>
</div>
<p>Eğer seçtiğimiz element&#8217;in içeriğine değiştirmek istersek.. .text() fonksiyonuna yeni metni argüment olarak yollayabiliriz.</p>
<p>Örneğin:</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">önce: &nbsp;&lt;p&gt;eski içerik&lt;/p&gt;</div>
</li>
<li class="li1">
<div class="de1">$<span class="br0">&#40;</span><span class="st0">&quot;p&quot;</span><span class="br0">&#41;</span>.<span class="me1">text</span><span class="br0">&#40;</span><span class="st0">&quot;yeni içerik&quot;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">sonra: &lt;p&gt;yeni içerik&lt;/p&gt;</div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
</ol>
</div>
<p>1.val() &#8211; input elementlerinin value yani değerlerini çekmek veya değiştirmek için kullanılır..</p>
<p>Örneğin:</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&lt;input type=button value=deger1 /&gt;</div>
</li>
<li class="li1">
<div class="de1">&lt;textarea id=<span class="st0">&quot;beni&quot;</span>&gt;deger2&lt;/textarea&gt;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2">$<span class="br0">&#40;</span><span class="st0">&quot;input&quot;</span><span class="br0">&#41;</span>.<span class="me1">val</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="co1">// deger1</span></div>
</li>
<li class="li1">
<div class="de1">$<span class="br0">&#40;</span><span class="st0">&quot;#beni&quot;</span><span class="br0">&#41;</span>.<span class="me1">val</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="co1">// deger2</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
</ol>
</div>
<p>Eğer seçtiğimiz element&#8217;in değerini değiştirmek istersek.. .val() fonksiyonuna yeni değeri argüment olarak yollayabiliriz.</p>
<p>Örneğin:</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">önce: &nbsp;&lt;input type=button value=<span class="st0">&quot;eski değer&quot;</span>/&gt;</div>
</li>
<li class="li1">
<div class="de1">$<span class="br0">&#40;</span><span class="st0">&quot;input&quot;</span><span class="br0">&#41;</span>.<span class="me1">val</span><span class="br0">&#40;</span><span class="st0">&quot;yeni değer&quot;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">sonra: &lt;input type=button value=<span class="st0">&quot;yeni değer&quot;</span>/&gt;</div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
</ol>
</div>
<p>Şimdi gelelim translation&#8217;a<br />
Google&#8217;un API&#8217;lerini kullanabilmek için, Aşağıdaki javascript dosyasını sayfamıza dahil etmek gerekiyor..</p>
<p><script type="text/javascript" src= "http://www.google.com/jsapi"></script></p>
<p>1. Translate (Çeviri)<br />
<script>	
	google.load("language", "1");
	google.language.translate("Çevrilecek Metin","Hangi Dilden","Hangi Dile","Çeviri_Fonksiyonu"); 
</script><br />
Örneğin:</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&lt;script&gt;&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> metin = <span class="st0">&#8216;Çevrilecek metin&#8217;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> dil = <span class="st0">&#8216;tr&#8217;</span> <span class="co1">//Türkçe&#8217;den</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> cvr = <span class="st0">&#8216;en&#8217;</span> <span class="co1">// İngilizce&#8217;ye</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">function</span> ceviri<span class="br0">&#40;</span>ocr<span class="br0">&#41;</span><span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ocr.<span class="me1">translation</span> <span class="co1">//Çevrilmiş metin</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; google.<span class="me1">language</span>.<span class="me1">translate</span><span class="br0">&#40;</span>metin,dil,cvr,ceviri<span class="br0">&#41;</span>; </div>
</li>
<li class="li2">
<div class="de2">&lt;/script&gt;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
</ol>
</div>
<p>Herşey bu kadar :)<br />
Jquery ile beraber örnek html dosyası:</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &lt;body&gt;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;textarea id=<span class="st0">&quot;metin&quot;</span>&gt;Beautiful dawn!&lt;/textarea&gt;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type=<span class="st0">&quot;button&quot;</span> id=<span class="st0">&quot;cevir&quot;</span> value=<span class="st0">&quot;Çevir&quot;</span> /&gt;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=<span class="st0">&quot;sonuc&quot;</span>&gt;&#8230;&lt;/div&gt;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &lt;/body&gt;</div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
</ol>
</div>
<p>Şu şekilde html yapımız olsun..</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&lt;script&gt;</div>
</li>
<li class="li1">
<div class="de1">google.<span class="me1">load</span><span class="br0">&#40;</span><span class="st0">&quot;language&quot;</span>, <span class="st0">&quot;1&quot;</span><span class="br0">&#41;</span>; <span class="co1">// Paketimizi dahil ediyoruz.&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </span></div>
</li>
<li class="li1">
<div class="de1">$<span class="br0">&#40;</span>document<span class="br0">&#41;</span>.<span class="me1">ready</span><span class="br0">&#40;</span><span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#123;</span> <span class="co1">//Sayfa hazır olduğunda&nbsp;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp;$<span class="br0">&#40;</span><span class="st0">&quot;#cevir&quot;</span><span class="br0">&#41;</span>.<span class="me1">click</span><span class="br0">&#40;</span><span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#123;</span> <span class="co1">//Çevir id&#8217;li buton&#8217;a tıklandığında</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; google.<span class="me1">language</span>.<span class="me1">translate</span><span class="br0">&#40;</span>$<span class="br0">&#40;</span><span class="st0">&quot;#metin&quot;</span><span class="br0">&#41;</span>.<span class="me1">val</span><span class="br0">&#40;</span><span class="br0">&#41;</span>, <span class="st0">&#8216;en&#8217;</span>, <span class="st0">&#8216;tr&#8217;</span>, cevir<span class="br0">&#41;</span>; <span class="co1">//metin id&#8217;li textarea&#8217;daki yazıyı çevir</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp;<span class="br0">&#125;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp;<span class="kw2">function</span> cevir<span class="br0">&#40;</span>e<span class="br0">&#41;</span><span class="br0">&#123;</span> <span class="co1">//Çeviri fonksiyonumuz..&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">if</span><span class="br0">&#40;</span>e.<span class="me1">translation</span><span class="br0">&#41;</span><span class="br0">&#123;</span><span class="co1">//Çeviri yapıldığında..&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$<span class="br0">&#40;</span><span class="st0">&quot;#sonuc&quot;</span><span class="br0">&#41;</span>.<span class="me1">text</span><span class="br0">&#40;</span>e.<span class="me1">translation</span><span class="br0">&#41;</span>; <span class="co1">// sonuc id&#8217;li div&#8217;e çevrilmiş metni yaz.&nbsp; &nbsp; &nbsp;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">else</span><span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$<span class="br0">&#40;</span><span class="st0">&quot;#sonuc&quot;</span><span class="br0">&#41;</span>.<span class="me1">text</span><span class="br0">&#40;</span><span class="st0">&quot;Çeviri yapılamadı!&quot;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span>&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp;<span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&lt;/script&gt;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
</ol>
</div>
<p>Çalışan hali: <a href="http://www.blocracy.com/html/ceviri/">http://www.blocracy.com/html/ceviri/</a><br />
Google Kaynak: <a href="http://code.google.com/apis/ajax/playground/#translate">http://code.google.com/apis/ajax/playground/#translate</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.blocracy.com/google-translation-api/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
