<?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>CETURK &#187; Javascript</title>
	<atom:link href="http://www.ceturk.com/etiket/javascript/feed" rel="self" type="application/rss+xml" />
	<link>http://www.ceturk.com</link>
	<description>Türkiye&#039;nin Bilişim Platformu</description>
	<lastBuildDate>Wed, 08 Sep 2010 08:53:56 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Google Chrome 6.0</title>
		<link>http://www.ceturk.com/haberler/google-chrome-6-0.html</link>
		<comments>http://www.ceturk.com/haberler/google-chrome-6-0.html#comments</comments>
		<pubDate>Sun, 05 Sep 2010 21:30:39 +0000</pubDate>
		<dc:creator>Bilinginci</dc:creator>
				<category><![CDATA[Haberler]]></category>
		<category><![CDATA[Google Chrome]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Linux]]></category>
		<category><![CDATA[Mac]]></category>
		<category><![CDATA[Windows]]></category>

		<guid isPermaLink="false">http://www.ceturk.com/?p=6679</guid>
		<description><![CDATA[
Google Chrome, 2. yaşını yeni sürümüyle kutluyor.

Yeni Chrome&#8217; un, 2 yıl önceki haline göre JavaScript performansında 3 kat daha hızlı ve daha  güvenli olduğu söyleniyor.
Windows, Mac ve Linux için uyumluluk sağlayan Google Chrome, bugün 3 farklı işletim sisteminde hizmet veriyor.
Google Chrome 6.0’ı buradan indirebilirsiniz.
]]></description>
			<content:encoded><![CDATA[<p><img class="size-medium wp-image-6680 alignleft" src="http://www.ceturk.com/images/googleCh-308x300.jpg" alt="" width="167" height="156" /></p>
<p><strong>Google Chrome, 2. yaşını yeni sürümüyle kutluyor.</strong></p>
<p><span id="more-6679"></span><strong></strong></p>
<p>Yeni <strong>Chrome&#8217;</strong> un, 2 yıl önceki haline göre <strong>JavaScript</strong> performansında<strong> 3 kat</strong> daha hızlı ve daha  <strong>güvenli</strong> olduğu söyleniyor.</p>
<p><strong>Windows</strong>, <strong>Mac</strong> ve <strong>Linux</strong> için uyumluluk sağlayan <strong>Google Chrome</strong>, bugün 3 farklı işletim sisteminde hizmet veriyor.</p>
<p><strong>Google Chrome 6.0’ı </strong><a href="http://www.google.com/chrome?brand=CHMP" target="_blank"><strong>buradan</strong></a><strong> indirebilirsiniz.</strong></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ceturk.com/haberler/google-chrome-6-0.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Raphael JavaScript Kütüphanesi</title>
		<link>http://www.ceturk.com/programlama/raphael-javascript-kutuphanesi.html</link>
		<comments>http://www.ceturk.com/programlama/raphael-javascript-kutuphanesi.html#comments</comments>
		<pubDate>Tue, 03 Nov 2009 20:30:04 +0000</pubDate>
		<dc:creator>Kurtman Çelik</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Programlama]]></category>
		<category><![CDATA[Web Teknolojileri]]></category>
		<category><![CDATA[Kurtman Çelik]]></category>
		<category><![CDATA[Raphael JS]]></category>

		<guid isPermaLink="false">http://www.ceturk.com/?p=3617</guid>
		<description><![CDATA[Kütüphane: Raphael JS
Versiyon: 1.0
Deneyim: Başlangıçdan Orta Seviyeye
Yaklaşık Uygulama Süresi: 30 Dakika
1. Hazırlık
İşe Raphael JavaScript Kütüphanesini indirerek başlayalım. Açılan pencerede, ekranın sağ üst köşesindeki sıkıştırılmış ve sıkıştırılmamış seçeneklerinden sıkıştırılmamış olanı indirin. Başlangıç olarak sıkıştırılmamış versiyonu indirmekle, dökümantasyondan daha net şekilde faydalanabilirsiniz.

İndirdiğimiz dosya ile birlikte basit bit HTML dosyası oluşturalım ve Raphael.js dosyasını kodlara dahil edelim. Ayriyetten [...]]]></description>
			<content:encoded><![CDATA[<div style="border: 1px solid #dedede; padding: 6px; display: block; width: 100%; height: auto; background-color: #efefef;">Kütüphane: <a href="http://raphaeljs.com/" target="_blank">Raphael JS</a><br />
Versiyon: 1.0<br />
Deneyim: Başlangıçdan Orta Seviyeye<br />
Yaklaşık Uygulama Süresi: 30 Dakika</div>
<h2><span id="more-3617"></span>1. Hazırlık</h2>
<p>İşe <a href="http://raphaeljs.com/" target="_blank">Raphael JavaScript Kütüphanesi</a>ni indirerek başlayalım. Açılan pencerede, ekranın sağ üst köşesindeki sıkıştırılmış ve sıkıştırılmamış seçeneklerinden sıkıştırılmamış olanı indirin. Başlangıç olarak sıkıştırılmamış versiyonu indirmekle, dökümantasyondan daha net şekilde faydalanabilirsiniz.</p>
<div style="border: 1px solid #dedede; padding: 6px; display: block; width: 100%; height: auto; background-color: #efefef;"><a href="http://raphaeljs.com/" target="_blank"><img src="http://nettuts.s3.amazonaws.com/462_raphael/downloadicon.jpg" alt="raphael js download" /></a></div>
<p>İndirdiğimiz dosya ile birlikte basit bit HTML dosyası oluşturalım ve Raphael.js dosyasını kodlara dahil edelim. Ayriyetten &#8220;our_script.js&#8221; (dosya isimlerini orjinal halde geçiriyorum) adında bir boş dosya daha oluştup onuda sayfamıza dahil edelim. Örnek kodlarımızı bu boş sayfa içine yazp çalıştıracağız. HTML dosyasının gövdesi olarak &#8220;<em>canvas_container</em>&#8221; ID&#8217;sine sahip bir DIV oluşturup, en minimal olacak şekilde bir CSS şablonu atayalım. Çalışmalarımız bu DIV&#8217;in içinde oluşturulacaktır.</p>
<pre class="brush:html">&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Raphael Play&lt;/title&gt;
// &lt;![CDATA[
javascript</span>" src="path/to/raphael.js"&gt;
// ]]&gt;
// &lt;![CDATA[
javascript" src="path/to/our_script.js"&gt;
// ]]&gt;
&lt;style type="text/css"&gt;
#canvas_container {
width: 500px;
border: 1px solid #aaa;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="canvas_container"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
<p>Önemli Not: <em>Raphael JS kütüphanesinin 1.0, en güncel sürümü 7 Ekim 2009  tarihinde yayınlanmıştır. Eğer elinizde daha önceki sürüm bulunuyorsa, en güncel sürümü indirmenizde fayda var. Zira çizim araçlarında önemli değişiklikler olmuş durumda.</em></p>
<h2>2. Kendi Çizim Alanımızı Oluşturalım</h2>
<p>Raphael JS ile çizim yaparken bir çizim alanına ihtiyacımız olacak. Bu alanı sayfamızda &#8220;<em>Raphael()</em>&#8221; nesnesiyle oluşturduğumuz &#8220;paper&#8221; referansıyla kullanacağız. Bu çizim alanının genişlik ve yüksekliğini belirlememiz gerek, ayriyetten isteğe bağlı olarak bu alanın bağımsız (absolute) bir pozisyona mı sahip olacağını veya bir elemente bakılarak mı konumlandırılacağını da belirleyebiliriz.</p>
<pre class="brush:javascript">var paper = new Raphael(x, y, width, height); //option (a)
var paper = new Raphael(element, width, height); //option (b)</pre>
<p>Biz 2. seçenek olan, bir elementi örnek alma yöntemini kullanacağız. Hali hazırda sayfamızda yer alan &#8220;<em>canvas_container</em>&#8221; DIV&#8217;ini kullanarak 500 x 500 boyutlarında bir çizim alanı oluşturalım. (Aşağıdaki kodu <em>&#8220;our_script.js</em>&#8221; içerisine yazıyoruz.)</p>
<pre class="brush:javascript">window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
}</pre>
<p>Bu şekilde; içinde çizim yapabileceğimiz bir alan ve bu alanı referans eden &#8220;<em>paper</em>&#8221; adında bir değişkenimiz oldu.</p>
<h2>3. Yerleşik Şekiller</h2>
<p>Şimdi, alanımıza birkaç şekil çizdirelim. Alanımızın orijin (origin) noktası, yani başlangıç noktası, sol üst köşedir. Yani çizim yaparken belirleyeceğimiz her X ve Y koordinatı, sol üst köşeye göre çizilir.</p>
<p>İlk olarak daire çizimi ile başlayalım:</p>
<pre class="brush:javascript">window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
var circle = paper.circle(100, 100, 80);
}</pre>
<p>Bu kod ekrana, yarıçapı 80 piksel olan ve merkezi X ve Y koordinatlarında 100. piksellere gelen bir daire çizer ve bu daireyi &#8220;circle&#8221; değişkenine referans eder. Yaptığmız çizimleri illa ki bir değişkene referans vermemiz de gerekmez. Doğrudan çizim fonksiyonunu çağırarak da ekrana çizim yaptırabilirsiniz.</p>
<pre class="brush:javascript">for(var i = 0; i &lt; 5; i+=1) {
var multiplier = i*5;
paper.circle(250 + (2*multiplier), 100 + multiplier, 50 - multiplier);
}</pre>
<p>Sırada kare çizimi var: ekrana kare çizdirmek için &#8220;rect()&#8221;  fonksiyou kullanılır. Sırasıyla, X ve Y koordinatlarını ve karenin genişlik-yükseklik değerlerini parametre alır.</p>
<pre class="brush:javascript">var rectangle = paper.rect(200, 200, 250, 100);</pre>
<p>Son olarak elips çizimi: dairenin parametrelerine benzer olarak; X ve Y koordinatlarının, yarı çapın veya dikey-yatay yarıçapların belirtilmesi gereklidir.</p>
<pre class="brush:javascript">var ellipse = paper.ellipse(200, 400, 100, 50);</pre>
<p>Bu kod ekrana; X=200, Y=400 koordinatlarına yatayda yarı çapı 100, dikeyde yarıçapı 50 olan bir elips çizer.</p>
<p>Bu 3 çizim tekniğin uyguladıkdan sonra, &#8220;our_script.js&#8221; dosyamız şu şekilde olmalı.</p>
<pre class="brush:javascript">window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
var circle = paper.circle(100, 100, 80);
for(var i = 0; i &lt; 5; i+=1) {
var multiplier = i*5;
paper.circle(250 + (2*multiplier), 100 + multiplier, 50 - multiplier)
}
var rectangle = paper.rect(200, 200, 250, 100);
var ellipse = paper.ellipse(200, 400, 100, 50);
}</pre>
<p>Eğer &#8220;index.html&#8221; dosyasını, tarayıcınızda açarsanız görüntü aşağıdakine benzer bir şekilde olacaktır.</p>
<div style="border: 1px solid #dedede; padding: 6px; display: block; width: 100%; height: auto; background-color: #efefef;"><img class="alignnone" src="http://nettuts.s3.amazonaws.com/462_raphael/builtinshapes.jpg" alt="" width="495" height="495" /></div>
<h2>4. Çizim Yolları</h2>
<p>Tümleşik şekilleri kullanmak çoğu zaman kullanışlı fakat esas serbest çizim rahatlığını sağlayan şey &#8220;<em>yollar</em>&#8221; (paths). Bir yol çizerken kalem veya fırçanızın ekrana iz bıraktğını hayal edersek; Çizim alanımızı ilk oluşturduğumuzda kalem/fırça varsayılan olarak ekranın sol üst köşesine konumlandırılır. Yapmamız gereken ilk şey kalemimizi çizim yapacağımız alana konumlandırmak.<br />
Örnek olarak kalemimizi, XY=0 noktasından X=250, Y=250 noktasına taşıyalım:</p>
<div style="border: 1px solid #dedede; padding: 6px; display: block; width: 100%; height: auto; background-color: #efefef;"><img src="http://nettuts.s3.amazonaws.com/462_raphael/move_to_centre.jpg" alt="" /></div>
<p>Bu hareket &#8220;<em>yol bildirimi</em>&#8221; (path string) olarak adlandırılmış.</p>
<p>Yol bildirimi, birden fazla metin formatında değerin, sıralı bir halde birbiri ardına yazılarak çalıştırılmasıyla yapılır. Örneğimizde kalemi X=250, Y=250&#8242;ye taşıma istiyoruz, öyleyse:</p>
<pre class="brush:javascript">"M 250 250"</pre>
<p>&#8220;M&#8221; harfi, &#8220;<em>Move</em>&#8221; yani taşımak anlamına gelir, bizim kodumuzda &#8220;Çizim yapma, sadece yerini değiştir&#8221; anlamında kullanılıyor. Sonraki &#8220;<em>250 250</em>&#8221; ise sırasıyla X ve Y koordinatlarıdır.</p>
<p>Şimdi, kalemimiz istediğmiz koordinatlarda olduğuna göre bir çizgi çalışması yapalım. Bunun için &#8220;l&#8221; (Küçük L) yani Line komutunu kullanıyoruz, ve her zaman ki gibi XY koordinatlarını veriyoruz.</p>
<pre class="brush:javascript">"M 250 250 l 0 -50"</pre>
<p>Bu kod sadece Y koordinatında yukarıya doğru 50 piksellik çizgi çizer. Biraz daha komplike olması açısından aşağıdaki satırı da yazabiliriz. Tetris oyunundan bir nesnenin çizimi.</p>
<pre class="brush:javascript">"M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z"</pre>
<p>Satırın sonundaki &#8220;<em>z</em>&#8221; çizim işleminin bittiğini gösterir. Son çizgi nerede olursa olsun &#8220;<em>z</em>&#8220;&#8216;den sonra, çizgi &#8220;<em>M</em>&#8221; ile belirttiğimiz noktaya tamamlanır.</p>
<p>Bu yol bildirimi satırlarını HTML sayfasında çalıştırmak için ise, Raphel JS&#8217;nin &#8220;<em>path()</em>&#8221; fonksiyonunu kullanırız. Örneği çalıştırmak için &#8220;our_script.js&#8221; dosyamızın aşağıdaki gibi olması lazım.</p>
<pre class="brush:javascript">window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
var tetronimo = paper.path("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z");
}</pre>
<p>Kodları çalıştırdığınızda sayfanın görüntüsü aşağıdaki gibi olmalı.</p>
<div style="border: 1px solid #dedede; padding: 6px; display: block; width: 100%; height: auto; background-color: #efefef;"><img src="http://nettuts.s3.amazonaws.com/462_raphael/tetronimo.jpg" alt="" /></div>
<p>Path() fonksyionu ve yol bildirimi (path string) yönteminin kullanımı, Curve ve Arc (Kavis ve Yay) komutları kullanılarak daha da karmaşıklaştırılabilir. Bu tür komutların devamını ve açıklamalarını <a href="http://www.w3.org/TR/SVG/paths.html#PathData" target="_blank"><strong>SVG Path Specification (Yol Tanımları)</strong></a> sayfasında bulabilirsiniz.</p>
<h2>5. Nitelikler ile Stil Verme</h2>
<p>Yukarıda çizdiğimiz tetris parçası, ilk çizim için güzel görünebilir ama hiç estetik durmuyor mu?. Bunun çözümü ise nitelikler yardımı ile çizime stil vermekten geçiyor.<br />
<em>Attr()</em> fonksiyonu, nesnenin niteliklerini &#8220;başlık-değer&#8221; şeklinde ele alıp, bu değerleri değiştirebilmemizi sağlar. Yukarıdaki çizimimizi &#8220;<em>tetronimo</em>&#8221; adlı bir değişkende tutuyorduk, bu demektir ki, biz bu değişkene dolayısıyla çizime attr() ile yeni değerler verebiliriz. Attr() fonksiyonunu Path() ile birlikte kullanıp, yol bildirimi yaptığımız satırın sonuna ekliyoruz.</p>
<pre class="brush:javascript">window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
var tetronimo = paper.path("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z");tetronimo.attr({fill: '#9cf', stroke: '#ddd', 'stroke-width': 5});
}</pre>
<p>Sonuç:</p>
<div style="border: 1px solid #dedede; padding: 6px; display: block; width: 100%; height: auto; background-color: #efefef;"><img src="http://nettuts.s3.amazonaws.com/462_raphael/tetronimo_filled_02.jpg" alt="" /></div>
<p>Daha anlaşılır bir kod bloğu:</p>
<pre class="brush:javascript">window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
var tetronimo = paper.path("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z");tetronimo.attr(
{
gradient: '90-#526c7a-#64a0c1',
stroke: '#3b4449',
'stroke-width': 10,
'stroke-linejoin': 'round',
rotation: -90
}
);
}</pre>
<div style="border: 1px solid #dedede; padding: 6px; display: block; width: 100%; height: auto; background-color: #efefef;"><img src="http://nettuts.s3.amazonaws.com/462_raphael/tetronimo_gradient.jpg" alt="" /></div>
<p><a href="http://raphaeljs.com/reference.html#attr" target="_blank"><strong>Raphael JS&#8217;nin kendi dökümanları</strong></a> arasında Attr() fonksiyonu, oldukça geniş olarak anlatılmış. Nesnelerin diğer nitelikleriyle oynayarak daha farklı çalışmalar yapılabilir.</p>
<h2>6. Animasyonlar</h2>
<p>&#8220;<em>Animate()</em>&#8221; fonksiyonu, Raphael&#8217;in en güzel özelliklerinden bir tanesi. Bize jQoery&#8217;nin esque kütüphanesini (bir animasyon kütüphanesi) kullanarak nesnelerin nitelikleri ile animasyonlar oluşturmamızı sağlıyor ve istersek Easing denilen, animasyonun hızını, yönünü vb. değerleri değiştirmemizi sağlayan yardımcı yöntemleride kullanabiliriz. (Nesneler diyorum çünkü bahsi geçen nesneler doğdurdan çizimlerimize bağlı).<br />
Örnek olarak yine yukarıda çizdiğimiz &#8220;<em>tetronimo</em>&#8221; nesnesini kullanalım ve &#8220;<em>rotation</em>&#8221; yani rotasyon niteliğini değiştirerek 360 derece dönmesini sağlayalım. &#8220;<em>our_script.js</em>&#8221; dsoyasına yazacağımız kod:</p>
<pre class="brush:javascript">window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
var tetronimo = paper.path("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z");
tetronimo.attr(
{
gradient: '90-#526c7a-#64a0c1',
stroke: '#3b4449',
'stroke-width': 10,
'stroke-linejoin': 'round',
rotation: -90
}
);tetronimo.animate({rotation: 360}, 2000, 'bounce');
}</pre>
<p>Koddaki 2000 değeri, animasyonun 2000 milisaniye(2 saniye)&#8217;de tamamlanacağını gösterir. Son olarak &#8220;bounce&#8221; ile de animasyonun nasıl bir ek-efektle tamamlanacağını belirtiyoruz.<br />
Yukarıdaki kodun canlı bir örneğini görmek için <a href="http://www.emunch.co.uk/tutorials/raphael_tut/examples/rotate_tetronimo.php" target="_blank">buraya tıklayın.</a></p>
<p>Ayriyetten animasyonumuz bittikden sonra çalıştırılmak üzere bir fonksiyon belirleyebiliriz, buna &#8220;<em>callback</em>&#8221; denir.<br />
Örnek olarak yukarıdaki animasyonumuz çalıştıkdan sonra &#8220;<em>tetronimo</em>&#8220;&#8216;yu eski haline geri getiren bir &#8220;<em>callback</em>&#8221; fonksiyonu tanımlayalım:</p>
<pre class="brush:javascript">tetronimo.animate({rotation: 360, 'stroke-width': 1}, 2000, 'bounce', function() {
/* callback after original animation finishes */
this.animate({
rotation: -90,
stroke: '#3b4449',
'stroke-width': 10
}, 1000);
});</pre>
<p>Buradaki &#8220;<em>this</em>&#8221; komutu, o an animasyonun içinde bulunan &#8220;tetronimo&#8221; nesnesini gösterir.<br />
Canlı örnek <a href="http://www.emunch.co.uk/tutorials/raphael_tut/examples/rotate_tetronimo_callback.php"><strong>burada.<br />
</strong></a></p>
<h3>Animasyonun Yönü ve Tipi</h3>
<p>Raphael, Flash&#8217;daki gibi; çizdiğiniz şekilleri eğip bükmek gibi olayların aynısı olmasada bezner türde olayları yapabilir (shape tweening). Bu yöntemi &#8220;animate()&#8221;&#8216;in içinde &#8220;path()&#8221; kullanarak gerçekleştiriyoruz. Bu sefer ki örneğimizde yine tetris&#8217;den bir örnek olarak &#8220;Z&#8221; şeklinde bir çizim yapıp onun üzerinde çalışacağız.<br />
İlk önce şeklimizi çizelim:</p>
<pre class="brush:javascript">"M 250 250 l 0 -50 l -50 0 l 0 -50 l -100 0 l 0 50 l 50 0 l 0 50 z"</pre>
<p>Aşağıdakine benzer bir görüntü olması lazım:</p>
<div style="border: 1px solid #dedede; padding: 6px; display: block; width: 100%; height: auto; background-color: #efefef;"><img src="http://nettuts.s3.amazonaws.com/462_raphael/z_tetronimo.jpg" alt="" /></div>
<p>Şimdi bu minimal düzeyde stillendirilmiş nesnemizi kullanarak &#8220;<em>animate()</em>&#8221; fonksiyonunu çağıracağız ve parametre olarak yeni bir &#8220;<em>path()</em>&#8221; nesnesi göndereceğiz.</p>
<pre class="brush:javascript">tetronimo.attr(
{
stroke: 'none',
fill: 'blue'
}
);tetronimo.animate({
path: "M 250 250 l 0 -50 l -50 0 l 0 -50 l -100 0 l 0 50 l 50 0 l 0 50 z"
}, 5000, 'elastic');</pre>
<p>Kodu çalıştırıp baktğınızda, orjinal şeklin eğilip bükülerek vermiş olduğumuz yeni path nesnesine dönüştüğünü görürsünüz.<br />
Canlı örnek <a href="http://www.emunch.co.uk/tutorials/raphael_tut/examples/tween_tetronimo.php"><strong>burada.</strong></a></p>
<h2>7. DOM&#8217;a Erişebilirlik</h2>
<p>Eğer HTML sayfamızdaki DOM elementlerine erişmek istiyorsak, bunu Raphael&#8217;in &#8220;<em>Node</em>&#8221; özelliği ile kolaylıkla yapabiliriz. bunu kullanarak çizimlerimize kullanıcı ile etkileşim geçecek olay fonksiyonları yazabiliriz.<br />
Örnek için ilk önce bir daire çizelim:</p>
<pre class="brush:javascript">window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);var circ = paper.circle(250, 250, 40);
circ.attr({fill: '#000', stroke: 'none'});
}</pre>
<p>Şimdi, dairenin ortasına &#8220;Raphael Js&#8221; yazdıracak fonksiyonu hazırlayalım:</p>
<pre class="brush:javascript">var text = paper.text(250, 250, 'Raphael JS')
text.attr({opacity: 0, 'font-size': 12}).toBack();</pre>
<p>&#8220;<em>Opacity=0</em>&#8221; yani varsayılan olarak sayfa ilk açıldığında, yazımız ekranda görünmeyecektir. Bu satırın hemen arkasından gelen &#8220;<em>.toBack()</em>&#8221; komutu ekrana yazdırığmız yazıyı, çizim alanındaki her nesnenin arkasına itecektir. Yani bu örnekde dairenin üzerine yazdırdığımız yazı aslında <em>.toBack</em> ile dairenin arkasına yerleştirilmiştir. Benzer şekilde &#8220;<em>.toFront()</em>&#8221; komutuda nesneyi diğer nesnelerin önüne getirmekte kullanılır.<br />
Çizmiş olduğumuz dairede &#8220;<em>MouseOver</em>&#8221; olayını yakalamak için &#8220;<em>node</em>&#8221; özelliğini kullanarak bir fonksiyon yazalım ve fare&#8217;nin daire üzerine geldiğinde el işareti olmasını sağlayalım:</p>
<pre class="brush:javascript">circ.node.onmouseover = function() {
this.style.cursor = 'pointer';
}</pre>
<p>Kodumuzun HTML tarafındaki karşılığı aşağıdaki gibidir:</p>
<pre class="brush:html">&lt;circle cx="250.5" cy="250.5" r="40" fill="#000000" stroke="none" style="fill: #000000; stroke: none; cursor: pointer"&gt;
&lt;/circle&gt;</pre>
<p>Son olarak daire nesnemize fare ile tıklandığında çalışacak bir kod bloğu yazalım:</p>
<pre class="brush:javascript">circ.node.onclick = function() {
text.animate({opacity: 1}, 2000);
circ.animate({opacity: 0}, 2000, function() {
this.remove();
});
}</pre>
<p>Kodda da görüldüğü üzere, daireye tıkladığımızda ilk önce görünmez olan yazımız 2 saniye içerisinde görünür olacak ve hemen ardından daire 2 saniye içinde görünmez olacaktır. Tanımladığımız <em>callback</em> fonksiyonu sayesine 2 saniye sonunda görünmez olan daire, &#8220;<em>this.remove()</em>&#8221; kodu ile sayfadan tamamen silinir.<br />
Canlı örnek <a href="http://www.emunch.co.uk/tutorials/raphael_tut/examples/onclick_make_circle_disappear.php"><strong>burada.</strong></a></p>
<h2>8. Örnek Uygulama: Beğeni Ölçme Bileşeni</h2>
<p>Buraya kadar ki öğrendiklerimizi, tek bir uygulamada hep birlikte uygulamak adına ufak bir beğendimbeğenmedim bileşeni yapalım:<br />
Yapacağımız çalışmanın sonucu <a href="http://www.emunch.co.uk/tutorials/raphael_tut/examples/mood_widget.php"><strong>buradaki</strong></a> gibi olacak.</p>
<div style="border: 1px solid #dedede; padding: 6px; display: block; width: 100%; height: auto; background-color: #efefef;"><img src="http://nettuts.s3.amazonaws.com/462_raphael/mood_meter.jpg" alt="" /></div>
<p>Başlangıç için kod bloğumuz aşağıdaki gibidir:</p>
<pre class="brush:javascript">window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
var circ = paper.circle(250, 250, 20).attr({fill: '#000'});
var mood_text = paper.text(250, 250, 'My\nMood').attr({fill: '#fff'});
}</pre>
<p>bu kod yarıçapı 20 piksel ve XY koordinatları 250 olan siyah bir daire çizer. Daha sonra içine &#8220;My \nMood&#8221; yazısı yazılır (My Mood&#8217;un kelime anlamı &#8220;Benim düşüncem&#8221;&#8216;e denk gelmektedir). Kodların arasındaki &#8220;\n&#8221; ise özel karakterdir ve bir alt satıra geçmek anlamına gelir. Yani &#8220;My&#8221;&#8216;dan sonra bir alt satıra geçilir ve &#8220;Mood&#8221; yazılır.<br />
Şimdi, sıra geldi değerlendirme bilgilerini hazırlamaya; Kullanıcının seçebileceği her seçeneğe karşılık bir metin ve renk hazırlayalım.</p>
<pre class="brush:javascript">moods = ['Çöplük', 'Güzel Değil', 'Orta', 'İyi Sayılır', 'Harika'];
colors = ['#cc0000', '#a97e22', '#9f9136', '#7c9a2d', '#3a9a2d']; </span><span style="color: #666699;">//varsayılan olarak 1. seçeneği aktif yap.
var my_mood = 1;</pre>
<p>Şimdi kullanıcının seçtiği değere göre yukarıdaki dizilerden, uygun olanları seçip ekranda gösterecek fonksiyonu yazalım:</p>
<pre class="brush:javascript">function show_mood() {
for(var i = 0; i &lt; my_mood; i+=1) {
(function(i) {
setTimeout(function() {
paper.circle(250, 250, 20).attr({
stroke: 'none',
fill: colors[my_mood - 1]
}).animate({translation: '0 ' + (-42 * (i+1))}, 2000, 'bounce').toBack();
}, 50*i);
})(i);
}
paper.text(250, 300, moods[my_mood - 1]).attr({fill: colors[my_mood - 1]}); </span><span style="color: #666699;">mood_text.node.onclick = function() {
return false;
}
circ.node.onclick = function() {
return false;
}
}</pre>
<p>&#8220;<em>show_mood()</em>&#8221; fonksiyonu içerisinde, kullanıcının seçtiği değeri her 50*i milisaniyede çizime dönüştüren anonim bir fonksiyon var. Her yeni daire oluşturulduğunda fonksiyon kendini çalıştırarak en son çizilen dairenin hemen üstüne yeni bir daire çiziyor ve bunu seçilen değer kadar tekrarlıyor. Her daire 2 saniye içerisinde bir öncekinin Y ekseninde üzerine ve görüntü olarak arkasına yerleştiriliyor.<br />
son olarak ekrana çizilen dairelerin ve yazıların click olayları kaldırılarak her tıklamada yukarıdaki kodun tekrar çalışmasının önüne geçiliyor.</p>
<p>Son olarak fonksiyonumuzu sayfaya entegre edelim, aşağıdaki kod ile yukarıda yazmış olduğumuz fonksiyonu ekrana ilk çizdirdiğimiz siyah daire ve içindeki yazıya bağlayalım:</p>
<pre class="brush:javascript">circ.node.onclick = show_mood;
mood_text.node.onclick = show_mood;</pre>
<p>Bu örneğimizi modifiye ederek ekolayzır benzeri bir bileşende yapabilirsiniz.</p>
<h2>Kapanış</h2>
<p>Umuyorum ki şimdiden Raphael JS&#8217;yi ve birbirinden ilginç çizim araçlarını kurcalamaya biraz daha meraklısınız.<br />
Hepinize iyi günler, iyi çalışmalar.</p>
<p>Kurtman Çelik<br />
kurtman.celik@hotmail.com<br />
<a href="http://kurtmancelik.wordpress.com/" target="_blank">http://kurtmancelik.wordpress.com/</a><br />
Kaynak: <a href="http://net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to-the-raphael-js-library/" target="_blank">http://net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to-the-raphael-js-library/</a><span style="font-size: 8pt;"><br />
</span></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ceturk.com/programlama/raphael-javascript-kutuphanesi.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Ritma Teknoloji : .NET Uzman Programcı</title>
		<link>http://www.ceturk.com/kariyer-ilanlari/ritma-teknoloji-net-uzman-programci.html</link>
		<comments>http://www.ceturk.com/kariyer-ilanlari/ritma-teknoloji-net-uzman-programci.html#comments</comments>
		<pubDate>Sat, 27 Jun 2009 09:48:40 +0000</pubDate>
		<dc:creator>Yönetici</dc:creator>
				<category><![CDATA[Kariyer İlanları]]></category>
		<category><![CDATA[.NET]]></category>
		<category><![CDATA[ASP.NET]]></category>
		<category><![CDATA[C#'ta  Generıc Sınıflar]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Mobil Uygulamalar]]></category>
		<category><![CDATA[Nesneya Dayalı Programlama]]></category>
		<category><![CDATA[Programcı]]></category>
		<category><![CDATA[Sharepoint]]></category>
		<category><![CDATA[Sql Server]]></category>
		<category><![CDATA[XML]]></category>
		<category><![CDATA[Yazılım Mimarisi]]></category>

		<guid isPermaLink="false">http://www.ceturk.com/?p=1719</guid>
		<description><![CDATA[Uzman Programcı (.NET) 
Ritma Teknoloji olarak aşağıdaki özelliklere sahip Uzman bir Programcı aramaktayız.
Teknik Yeterlilikler: 

.NET ve Asp.NET konusunda derin kavrayış


C# ve SQL Server’a hakimiyet


Javascript, Xml, Css


Nesneya Dayalı Programlama

Tecrübe:

Min. 2 adet Web tabanlı Proje Geliştirme Tecrübesi


2 Yıl programcılık tecrübesi

Genel Nitelikler:

Kod yazmayı Sevmek


İyi İletişim

Tercih nedeni sayılabilecek Ek Nitelikler:

Daha fazla Tecrübe


Yazılım Mimarisi ve Framework’ler


Test, Java, Uml


Mobil uygulamalar


Sharepoint


Sigara kullanmamak

İlgilenenlerin;
gerçekleştirdikleri [...]]]></description>
			<content:encoded><![CDATA[<p><span style="font-weight: bold;">Uzman Programcı (.NET) </span></p>
<p><span style="font-weight: bold;">Ritma Teknoloji</span> olarak aşağıdaki özelliklere sahip Uzman bir Programcı aramaktayız.</p>
<p><span style="font-weight: bold;">Teknik Yeterlilikler: </span></p>
<ul>
<li>.NET ve Asp.NET konusunda derin kavrayış</li>
</ul>
<ul>
<li>C# ve SQL Server’a hakimiyet</li>
</ul>
<ul>
<li>Javascript, Xml, Css</li>
</ul>
<ul>
<li>Nesneya Dayalı Programlama</li>
</ul>
<p><span style="font-weight: bold;">Tecrübe:</span></p>
<ul>
<li>Min. 2 adet Web tabanlı Proje Geliştirme Tecrübesi</li>
</ul>
<ul>
<li>2 Yıl programcılık tecrübesi</li>
</ul>
<p><span style="font-weight: bold;">Genel Nitelikler:</span></p>
<ul>
<li>Kod yazmayı Sevmek</li>
</ul>
<ul>
<li>İyi İletişim</li>
</ul>
<p><span style="font-weight: bold;">Tercih nedeni sayılabilecek Ek Nitelikler:</span></p>
<ul>
<li>Daha fazla Tecrübe</li>
</ul>
<ul>
<li>Yazılım Mimarisi ve Framework’ler</li>
</ul>
<ul>
<li>Test, Java, Uml</li>
</ul>
<ul>
<li>Mobil uygulamalar</li>
</ul>
<ul>
<li>Sharepoint</li>
</ul>
<ul>
<li>Sigara kullanmamak</li>
</ul>
<p><span style="font-weight: bold;">İlgilenenlerin;</span></p>
<p>gerçekleştirdikleri projeler ile bu projelerdeki görevleri hakkında açık bilgi ve<br />
cv’lerini <span style="font-weight: bold;">cv@ritmateknoloji.com</span> adresine mail atmalarını rica ederiz.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ceturk.com/kariyer-ilanlari/ritma-teknoloji-net-uzman-programci.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>i-con : .Net Developer ( İstanbul)</title>
		<link>http://www.ceturk.com/kariyer-ilanlari/i-con-net-developer-istanbul.html</link>
		<comments>http://www.ceturk.com/kariyer-ilanlari/i-con-net-developer-istanbul.html#comments</comments>
		<pubDate>Sat, 27 Jun 2009 09:42:43 +0000</pubDate>
		<dc:creator>Yönetici</dc:creator>
				<category><![CDATA[Kariyer İlanları]]></category>
		<category><![CDATA[.NET]]></category>
		<category><![CDATA[.net developer]]></category>
		<category><![CDATA[Ajax]]></category>
		<category><![CDATA[ASP.NET]]></category>
		<category><![CDATA[C#]]></category>
		<category><![CDATA[i-con]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[silverlight]]></category>

		<guid isPermaLink="false">http://www.ceturk.com/?p=1713</guid>
		<description><![CDATA[i-con .net developer aramaktadır.
cv&#8217;inizi info@i-con.com.tr adresine REF: GLO-Dev2 konusu ile yolllayabilirsiniz.
Aranan Nitelikler
1. Tercihen bilgisayar müh., 4 yıllık ilgili fakülte mezunu
2. 1-3 yıl arası iş tecrübesi
3. C# ve asp.net’te uzman
4. Tercihen javascript/silverlight/ajax bilen
5. Anadolu yakasında ikamet eden
6. T-sql/pl-sql bilgisine sahip, tercihen oracle ile geliştirme yapmış
 i-con technologies information consulting Hakkında :
Microsoft Certified Partner olan i-con, Eylül [...]]]></description>
			<content:encoded><![CDATA[<p>i-con .net developer aramaktadır.</p>
<p>cv&#8217;inizi<span style="font-weight: bold;"> info@i-con.com.tr</span> adresine <span style="font-weight: bold;">REF: GLO-Dev2</span> konusu ile yolllayabilirsiniz.<br />
<br style="font-weight: bold;" /><span style="font-weight: bold;">Aranan Nitelikler</span></p>
<p>1. Tercihen bilgisayar müh., 4 yıllık ilgili fakülte mezunu<br />
2. 1-3 yıl arası iş tecrübesi<br />
3. C# ve asp.net’te uzman<br />
4. Tercihen javascript/silverlight/ajax bilen<br />
5. Anadolu yakasında ikamet eden<br />
6. T-sql/pl-sql bilgisine sahip, tercihen oracle ile geliştirme yapmış</p>
<p><span style="font-weight: bold;"> i-con technologies information consulting </span>Hakkında :</p>
<p>Microsoft Certified Partner olan i-con, Eylül 2002&#8242;de üstün kalitede yazılım eğitim ve danışmanlık hizmetleri vermek üzere kurulmuştur. Vizyonu, en yeni teknolojilerin kullanımını kolaylaştırmak ve yaygınlaştırmak üzere, Avrasya&#8217;nın bir numaralı bilgi kaynağı olmaktır. Bu çerçevede i-con, yazılım eğitimi ve proje danışmanlığı hizmetleri sunmaktadır. i-con, tüm Microsoft işletim sistemleri, yönetim araçları, sunucu ve yazılım araçları için uygulamaya kadar tüm teknoloji ihtiyaçlarına uygun danışmanlık ve eğitim çözümünü üretir.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ceturk.com/kariyer-ilanlari/i-con-net-developer-istanbul.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>8. Linux ve Özgür Yazılım Şenliği</title>
		<link>http://www.ceturk.com/haberler/8-linux-ve-ozgur-yazilim-senligi.html</link>
		<comments>http://www.ceturk.com/haberler/8-linux-ve-ozgur-yazilim-senligi.html#comments</comments>
		<pubDate>Tue, 07 Apr 2009 13:44:49 +0000</pubDate>
		<dc:creator>Mehmet ACA</dc:creator>
				<category><![CDATA[Haberler]]></category>
		<category><![CDATA[8. Linux ve Özgür Yazılım Şenliği]]></category>
		<category><![CDATA[Bilgi Üniversitesi]]></category>
		<category><![CDATA[Bilgi Üniversitesi Bilgisayar Bilimleri Bölümü]]></category>
		<category><![CDATA[Bilişim Etkinlikleri]]></category>
		<category><![CDATA[Douglas Crockford]]></category>
		<category><![CDATA[ECMA TC39]]></category>
		<category><![CDATA[ECMAScript standardı]]></category>
		<category><![CDATA[Gallup Organizasyonu]]></category>
		<category><![CDATA[Google Chrome]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Javascript motoru]]></category>
		<category><![CDATA[Jonathan Conradt]]></category>
		<category><![CDATA[JSON]]></category>
		<category><![CDATA[Linux]]></category>
		<category><![CDATA[Linux Kullanıcıları Derneği]]></category>
		<category><![CDATA[Linux ve Özgür Yazılım Şenliği]]></category>
		<category><![CDATA[Microsoft MediaCenter IPTV]]></category>
		<category><![CDATA[özgür yazılım]]></category>
		<category><![CDATA[Seminer]]></category>
		<category><![CDATA[The Good Parts]]></category>

		<guid isPermaLink="false">http://www.ceturk.com/?p=459</guid>
		<description><![CDATA[
İstanbul Bilgi Üniversitesi Bilgisayar Bilimleri Bölümü, gelenekselleştirdiği “Özgür Yazılım ve
Açık Kaynak Günleri” etkinliğinin altıncısına, Linux Kullanıcıları Derneği&#8216;nin düzenlediği “Linux
ve Özgür Yazılım Şenliği” etkinliğinin sekizincisine ev sahipliği yapıyor. Etkinliğe, her sene
bilişim alanında uluslararası arenada tanınmış kişiler konuşmacı olarak katılıyor. 17-18 Nisan tarihlerindeki bu yılki etkinliğin konukları arasında, özgür yazılım dünyasının web teknolojileri
alanında tanınmış isimleri Douglas Crockford, [...]]]></description>
			<content:encoded><![CDATA[<p align="center"><a href="http://senlik.linux.org.tr/2009/" target="_blank"><img src="http://www.ceturk.com/images/Etkinlik/8-linux-ve-ozgur-yazilim-senligi_banner.gif" border="0" alt="" /></a></p>
<p><strong>İstanbul Bilgi Üniversitesi Bilgisayar Bilimleri Bölümü</strong>, gelenekselleştirdiği “<strong>Özgür Yazılım ve<br />
Açık Kaynak Günleri</strong>” etkinliğinin altıncısına,<a href="http://www.lkd.org.tr/" target="_blank"> Linux Kullanıcıları Derneği</a>&#8216;nin düzenlediği “<a href="http://open.bilgi.edu.tr/freedays/" target="_blank">Linux<br />
ve Özgür Yazılım Şenliği</a>” etkinliğinin sekizincisine ev sahipliği yapıyor. Etkinliğe, her sene<br />
bilişim alanında uluslararası arenada tanınmış kişiler konuşmacı olarak katılıyor. 17-18 Nisan tarihlerindeki bu yılki etkinliğin konukları arasında, özgür yazılım dünyasının web teknolojileri<br />
alanında tanınmış isimleri Douglas Crockford, Jonathan Conradt da bulunuyor.</p>
<p>İstanbul Bilgi Üniversitesi Bilgisayar Bilimleri Bölümü ve Linux Kullanıcıları Derneği tarafından<br />
organize edilen “Özgür Yazılım ve Açık Kaynak Günleri 2009” ile “<a href="http://senlik.linux.org.tr/2009/" target="_blank">8. Linux ve Özgür Yazılım<br />
Şenliği</a>”; yazılım endüstrilerini geliştirmek, yazılım maliyetlerini düşürmek, bilgisayar okuryazarlığını<br />
arttırmak amacıyla özgür yazılım ve GNU/Linux konularında ulusal ve uluslarararası düzeyde uzman isimlere ev sahipliği yapıyor.</p>
<p>Türkiye&#8217;nin özgür yazılım ve açık kaynak konularında daha fazla biliçlenmesinin ve üretime geçmesinin<br />
amaçlandığı etkinlikte, geçtiğimiz yıl dünyada ve Türkiye&#8217;de özgür yazılım ve bilişim teknolojileri alanlarında yaşanan önemli gelişmeler tartışılacak. Bu yılın konukları arasında Javascript Programlama<br />
Dili&#8217;nin yaşayan en önemli otoritelerinden Douglas Crockford, Google Chrome web tarayıcısı program yöneticisi Jonathan Conradt bulunuyor.</p>
<p><strong>Etkinlik ilgilenen herkesin katılımına açık ve ücretsiz.</strong></p>
<p><strong>Douglas Crockford</strong> :</p>
<p>Javascript programla dilinin yaşayan en önemli otoritelerindendir. JavaScript: The Good Parts kitabının<br />
yazarıdır. ECMAScript standardını yöneten ECMA TC39 komitesinin üyesidir. Veri değiş tokuş standardı olan JSON&#8217;un<br />
mucididir.</p>
<p><strong>Jonathan Conradt : </strong></p>
<p>Google Chrome Web Tarayıcısı program yöneticilerindendir. Çalışma alanları arasında açık kaynaklı<br />
WebKit entegrasyonu ve eklentiler, yine açık kaynaklı V8 Javascript motoru, eklentiler bulunmaktadır. Google&#8217;dan önce<br />
Microsoft&#8217;ta, Microsoft&#8217;un MediaCenter IPTV ürünü için gömülü XHTML tarayıcı program yöneticiliği yaptı. Microsoft&#8217;tan</p>
<p>önce de Gallup Organizasyonu&#8217;nun web tabanlı anket ve analiz sistemini oluşturdu.</p>
<p><strong>Ayrıntılı Bilgi İçin:</strong></p>
<p><a href="http://open.bilgi.edu.tr" target="_blank">http://open.bilgi.edu.tr</a> – <a href="http://senlik.linux.org.tr" target="_blank">http://senlik.linux.org.tr</a></p>
<p><strong>e-mail</strong>: freedays@open.bilgi.edu.tr – senlik@linux.org.tr<br />
<strong>Tel:</strong> 212 3115188</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ceturk.com/haberler/8-linux-ve-ozgur-yazilim-senligi.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Menü İnceleme</title>
		<link>http://www.ceturk.com/web-teknolojileri/menu-inceleme.html</link>
		<comments>http://www.ceturk.com/web-teknolojileri/menu-inceleme.html#comments</comments>
		<pubDate>Tue, 07 Feb 2006 13:16:40 +0000</pubDate>
		<dc:creator>BlackChambers</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Web Teknolojileri]]></category>
		<category><![CDATA[fonksiyon]]></category>
		<category><![CDATA[menü]]></category>
		<category><![CDATA[Recep Akkoç]]></category>
		<category><![CDATA[tablo]]></category>

		<guid isPermaLink="false">http://www.ceturk.com/?p=268</guid>
		<description><![CDATA[Main Code:
&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-
&#60;table align=center id=Main1Tablo width=&#8221;90%&#8221; cellpadding=0 cellspacing=0&#62;
&#60;tr&#62;
&#60;td bgcolor=&#8221;#949494&#8243; width=&#8221;80%&#8221;&#62; Merhaba Ziyaretci&#60;td&#62;
&#60;td id=&#8221;Menu1Tablo&#8221; bgcolor=&#8221;#949494&#8243; width=&#8221;10%&#8221; align=&#8221;center&#8221; onmouseover=&#8221;Ac(&#8216;Menu1&#8242;,&#8217;Main1&#8242;)&#8221; onmouseout=&#8221;Kapa(&#8216;Menu1&#8242;)&#8221;&#62;Portal Menu&#60;td&#62;
&#60;td id=&#8221;Menu2Tablo&#8221; bgcolor=&#8221;#949494&#8243; width=&#8221;10%&#8221; align=&#8221;center&#8221; onmouseover=&#8221;Ac(&#8216;Menu2&#8242;,&#8217;Main1&#8242;)&#8221; onmouseout=&#8221;Kapa(&#8216;Menu2&#8242;)&#8221;&#62;Kisisel Menu&#60;td&#62;
&#60;/tr&#62;
&#60;/table&#62;
&#60;script language=&#8221;javascript&#8221;&#62;
function Ac(SayStr,SayMStr) {
Konuslandir(SayStr,SayMStr)
Goster(SayStr)
}
function Konuslandir(SayStr,SayMStr) {
var HizzaM = document.getElementById(SayMStr+&#8217;Tablo&#8217;);
var Hizza = document.getElementById(SayStr+&#8217;Tablo&#8217;);
var Konus = document.getElementById(SayStr+&#8217;Div&#8217;);
Konus.style.top = Hizza.offsetTop + Hizza.offsetHeight + HizzaM.offsetTop + &#8216;px&#8217;;
Konus.style.left = Hizza.offsetLeft + HizzaM.offsetLeft + &#8216;px&#8217;;
}
function Kapa(SayStr) {
document.getElementById(SayStr+&#8217;Div&#8217;).style.visibility [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: justify;">Main Code:<br />
&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-<br />
&lt;table align=center id=Main1Tablo width=&#8221;90%&#8221; cellpadding=0 cellspacing=0&gt;<br />
&lt;tr&gt;<br />
&lt;td bgcolor=&#8221;#949494&#8243; width=&#8221;80%&#8221;&gt; Merhaba Ziyaretci&lt;td&gt;<br />
&lt;td id=&#8221;Menu1Tablo&#8221; bgcolor=&#8221;#949494&#8243; width=&#8221;10%&#8221; align=&#8221;center&#8221; onmouseover=&#8221;Ac(&#8216;Menu1&#8242;,&#8217;Main1&#8242;)&#8221; onmouseout=&#8221;Kapa(&#8216;Menu1&#8242;)&#8221;&gt;Portal Menu&lt;td&gt;<br />
&lt;td id=&#8221;Menu2Tablo&#8221; bgcolor=&#8221;#949494&#8243; width=&#8221;10%&#8221; align=&#8221;center&#8221; onmouseover=&#8221;Ac(&#8216;Menu2&#8242;,&#8217;Main1&#8242;)&#8221; onmouseout=&#8221;Kapa(&#8216;Menu2&#8242;)&#8221;&gt;Kisisel Menu&lt;td&gt;<br />
&lt;/tr&gt;<br />
&lt;/table&gt;<br />
&lt;script language=&#8221;javascript&#8221;&gt;</p>
<p>function Ac(SayStr,SayMStr) {<br />
Konuslandir(SayStr,SayMStr)<br />
Goster(SayStr)<br />
}</p>
<p>function Konuslandir(SayStr,SayMStr) {</p>
<p>var HizzaM = document.getElementById(SayMStr+&#8217;Tablo&#8217;);<br />
var Hizza = document.getElementById(SayStr+&#8217;Tablo&#8217;);<br />
var Konus = document.getElementById(SayStr+&#8217;Div&#8217;);<br />
Konus.style.top = Hizza.offsetTop + Hizza.offsetHeight + HizzaM.offsetTop + &#8216;px&#8217;;<br />
Konus.style.left = Hizza.offsetLeft + HizzaM.offsetLeft + &#8216;px&#8217;;<br />
}</p>
<p>function Kapa(SayStr) {<br />
document.getElementById(SayStr+&#8217;Div&#8217;).style.visibility = &#8220;hidden&#8221;;<br />
}</p>
<p>function Goster(SayStr) {<br />
document.getElementById(SayStr+&#8217;Div&#8217;).style.visibility = &#8220;visible&#8221;;<br />
}</p>
<p>&lt;/script&gt;</p>
<p>&lt;div id=&#8221;Menu1Div&#8221; style=&#8221;visibility=hidden; POSITION: absolute; left:-100px; top:-100px;&#8221; onmouseover=&#8221;Goster(&#8216;Menu1&#8242;)&#8221; onmouseout=&#8221;Kapa(&#8216;Menu1&#8242;)&#8221;&gt;<br />
&lt;Table bgcolor=&#8221;#AA6666&#8243;&gt;<br />
&lt;tr&gt;<br />
&lt;td&gt;&lt;a href=uyeler.asp&gt;Uyeler&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;tr&gt;<br />
&lt;td&gt;&lt;a href=Forum.asp&gt;Forum&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;tr&gt;<br />
&lt;td&gt;&lt;a href=Download.asp&gt;Download&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;/Table&gt;</p>
<p>&lt;div id=&#8221;Menu2Div&#8221; style=&#8221;visibility=hidden; POSITION: absolute; left:-100px; top:-100px;&#8221; onmouseover=&#8221;Goster(&#8216;Menu2&#8242;)&#8221; onmouseout=&#8221;Kapa(&#8216;Menu2&#8242;)&#8221;&gt;<br />
&lt;Table bgcolor=&#8221;#AA6666&#8243;&gt;<br />
&lt;tr&gt;<br />
&lt;td&gt;&lt;a href=Profil.asp&gt;Profil&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;tr&gt;<br />
&lt;td&gt;&lt;a href=MsgKutusu.asp&gt;MesajBox&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;tr&gt;<br />
&lt;td&gt;&lt;a href=Bye.asp&gt;Cikis&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;/Table&gt;</p>
<p>&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-</p>
<p>Merhaba Js ile hazirlanmis bir menuyu inceleyerek birazda Javascripte baslama ve isinma alistirmasi yapmak istedim. Simdi yukardaki kodu satir satir ne ise yaradiğini anlayarak inceleyelim.</p>
<p><strong>Satir1 : </strong>&lt;table align=center id=Main1Tablo width=&#8221;90%&#8221; cellpadding=0 cellspacing=0&gt;</p>
<p>- Bu satirda html deki bilindik tablo yu olusturduk burada bizim acizdan onemli olan kisim<br />
- position:absolute&#8221; demistik, top ve left değerlerini sayfaya göre alacaktýr. Yani bağýmsýz değiþken (position:absolute) bir nesne&#8217;nin left&#8217;i, sayfanýn en soluna olan uzaklýğý demektir. Bu durumda ana tablonun sayfa soluna uzaklýğý, tablonun içindeki ilk td&#8217;nin (merhaba yazan yer) geniþliği (width) ve ana tablonun cellspacing/cellpadding değerlerine ediyor demektir. Bunlarý fonksiyon içinden alert ile yazdýrýp görebiliriz. Sorunu cozmek icin ana tablomuzunda saydakileft bilgilisini eklememiz gerekecektir o yuzden bu ana tabloyada bir id tanimliuyoruz</p>
<p><strong>Satir2 : </strong>&lt;tr&gt;<br />
<strong>Satir3 : </strong>&lt;td bgcolor=&#8221;#949494&#8243; width=&#8221;80%&#8221;&gt; Merhaba Ziyaretci&lt;td&gt;<br />
<strong>Satir4 : </strong> &lt;td id=&#8221;Menu1Tablo&#8221; bgcolor=&#8221;#949494&#8243; width=&#8221;10%&#8221; align=&#8221;center&#8221; onmouseover=&#8221;Ac(&#8216;Menu1&#8242;,&#8217;Main1&#8242;)&#8221; onmouseout=&#8221;Kapa(&#8216;Menu1&#8242;)&#8221;&gt;Portal Menu&lt;td&gt;</p>
<p>- himm bu bizim hizzamiz olacak olan tablo ilk menu ismimizi buna veriyoruz. ben kullanim kolayliği olsun diesinden menu1 ile sabitliyicem burayi.baslari değisken yapip sonlari sabit yapiyorum ki acilacak olan div ile tablo id lerimiz karismasin. burada iki tane ozelliğinide kullaniyoruz systemin onmouseover=&#8221;Ac(&#8216;Menu1&#8242;,&#8217;Main1&#8242;)&#8221; onmouseout=&#8221;Kapa(&#8216;Menu1&#8242;)&#8221; onMauseOver ustune gelindiğinde yapilacak islem oluyor onMauseOut ta uzerinden mause ciktiğinda yapilacak olan islem. Js ile tanimladiğmiz fonksiyonlari buradan tetikliyoruz.</p>
<p><strong>Satir5 : </strong>&lt;td id=&#8221;Menu2Tablo&#8221; bgcolor=&#8221;#949494&#8243; width=&#8221;10%&#8221; align=&#8221;center&#8221; onmouseover=&#8221;Ac(&#8216;Menu2&#8242;,&#8217;Main1&#8242;)&#8221; onmouseout=&#8221;Kapa(&#8216;Menu2&#8242;)&#8221;&gt;Kisisel Menu&lt;td&gt;</p>
<p>- az onceki satir ile hemen hemen ayni dediğim gibi sadece idnin basini değistiriyoruz sonu ayni kaliyoruki fonksiyonu cok bilgi gondermek zorunda kalmayalim.</p>
<p><strong>Satir6 : </strong> &lt;/tr&gt;<br />
<strong>Satir7 : </strong>&lt;/table&gt;<br />
<strong>Satir8 : </strong>&lt;script language=&#8221;javascript&#8221;&gt;</p>
<p>- Js kodlarini sayfamizin icinde kullanmaya basliyoruz.</p>
<p><strong>Satir9 : </strong>function Ac(SayStr,SayMStr) {</p>
<p>- bir fonksiyon tanimladik. Ac isminde bir fonksiyon ve disaridan 2 tane deyer aliyor. SayStr ve SayMStr</p>
<p><strong>Satir10 :</strong> Konuslandir(SayStr,SayMStr)</p>
<p>- Daha sonra tanimlayacağimiz konuslandir fonksiyona 2 deyeri yukleyip cağiriyoruz.</p>
<p><strong>Satir11 : </strong>Goster(SayStr)</p>
<p>- Goster fonksiyonuna SayStr yi yukleyip cağiriyoruz</p>
<p><strong>Satir12 :</strong> }</p>
<p>- Js de kod blocklari php c gibi dillerde oldugu seklinde { ile baslar } ile biter. function blogumuzu kapatiyoruz</p>
<p><strong>Satir13 :</strong> function Konuslandir(SayStr,SayMStr) {</p>
<p>- Konuslandir fonksiyonunu actik</p>
<p><strong>Satir13 : </strong> var HizzaM = document.getElementById(SayMStr+&#8217;Tablo&#8217;);</p>
<p>- Ana tablonun idsi ile bir nesneye bagladik HizzaM ismi ile. soyledğim giibi sonunda tabloyu sabit kullanmak burada isimize yarayacak butun bilgiyi alip teker teker baglanmak yerine tek deyerin sonuna ekleyip ekleyip baglanacaz.<br />
<strong><br />
Satir14 : </strong> var Hizza = document.getElementById(SayStr+&#8217;Tablo&#8217;);</p>
<p>- Altina hizzalanacak olan tabloyu bir nesneye bagladik simdide<br />
<strong><br />
Satir15 : </strong> var Konus = document.getElementById(SayStr+&#8217;Div&#8217;);</p>
<p>- alt kisimda cikacak olan div i tanimladik. Div olanin sonunda Div Tablosuna Tablo atadik.</p>
<p><strong>Satir16 : </strong> Konus.style.top = Hizza.offsetTop + Hizza.offsetHeight + HizzaM.offsetTop + &#8216;px&#8217;;</p>
<p>- Konus nesneisin yukardan ne kadar asağida cikacağini, altina hizzalanacak olan tablonun yuksekliği + main tablodan hizzalanacak tablonun yuksekliği + main tablonun yuksekliği olarak atadik. offsetHeight ozelliği bize nesnenin yuksekliğini offsetTop ozelliği ise bize tepeden olan farkini veriyor.</p>
<p><strong>Satir17 : </strong> Konus.style.left = Hizza.offsetLeft + HizzaM.offsetLeft + &#8216;px&#8217;;</p>
<p>- konus nesnesi hizza nesnesinin sagdan main tabloya olan uzakliği + main tablonun ana ekrandan olan uzakliğina esitleniyor.</p>
<p>&#8211; Burada Dikkatinizi cekmek istediğim bir sey var ozelliklerden cektiğimizde sayi deyeri geliyor ama belirtme yapmak icin kac px oldugunu belirtmemiz gerekmekte. bu yuzden sonuna + &#8216;px&#8217; seklinde ekleme yapmaktayiz</p>
<p><strong>Satir18 :</strong> }</p>
<p>- konuslandirmakta kullanacağimiz fonksiyonu kapadik.<br />
<strong><br />
Satir19 : </strong>function Kapa(SayStr) {</p>
<p>- uzeri mause nin uzerinden ciktiğinda yapacaği islemi belirtiken kapa demistik bu fonksiyonu tanimliyoruz burada.<br />
<strong><br />
Satir20 : </strong> document.getElementById(SayStr+&#8217;Div&#8217;).style.visibility = &#8220;hidden&#8221;;</p>
<p>- Menu iceriğinin yukleneceği div tagindaki visibility yi hidden a esitliyoruz. yine burda getElementByID ile nesneyi belirliyip islem yapiyoruz.</p>
<p><strong>Satir21 :</strong> }</p>
<p>- kapa fonksiyonunun kod blogunu kapaiyoruz</p>
<p><strong>Satir22 :</strong> function Goster(SayStr) {</p>
<p>- Kapasini yaptik Div gorulmez oldu simdi bunu birde gostermek lazim :p</p>
<p><strong>Satir23 : </strong> document.getElementById(SayStr+&#8217;Div&#8217;).style.visibility = &#8220;visible&#8221;;</p>
<p>- Kapatma yontemindeki gibi fakat bu sefer visibility ozelliğini visble yapiyoruz.</p>
<p><strong>Satir24 : </strong>}</p>
<p>- block kapanir <img src='http://www.ceturk.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p><strong>Satir25 :</strong> &lt;/script&gt;</p>
<p>- script tagi kapanir</p>
<p><strong>Satir26 :</strong> &lt;div id=&#8221;Menu1Div&#8221; style=&#8221;visibility=hidden; POSITION: absolute; left:-100px; top:-100px;&#8221; onmouseover=&#8221;Goster(&#8216;Menu1&#8242;)&#8221; onmouseout=&#8221;Kapa(&#8216;Menu1&#8242;)&#8221;&gt;</p>
<p>- tablosu belirtilmis olan id nin div&#8217;i olusturulunur. burada dikkat edilecek bir yer hemen belirtiyim. visibility=hidden ve POSITION: absolute visibility zaten gozukmemesi icin hidden edildiğini onceki satirlarda soylemistik fakat POSITION: absolute kismina deyinmedik. bu kisim sayfa daki ust obje yada baska bir değis ile bagimsiz nesne olarak tanimlanmasini sagliyor Bunu baska ornekler ile daha iii anlaya bilirsiniz. burada belirtmek istediğim baska bir noktada onmouseover ve out&#8217;un da gostermeyi saylayan kodlari yeniden kullandik.</p>
<p><strong>Satir27 : </strong> &lt;Table bgcolor=&#8221;#AA6666&#8243;&gt;<br />
<strong>Satir28 : </strong> &lt;tr&gt;<br />
<strong>Satir29 : </strong> &lt;td&gt;&lt;a href=uyeler.asp&gt;Uyeler&lt;/td&gt;<br />
<strong>Satir30 :</strong> &lt;/tr&gt;<br />
<strong>Satir31 :</strong> &lt;tr&gt;<br />
<strong>Satir32 :</strong> &lt;td&gt;&lt;a href=Forum.asp&gt;Forum&lt;/td&gt;<br />
<strong>Satir33 : </strong> &lt;/tr&gt;<br />
<strong>Satir34 : </strong> &lt;tr&gt;<br />
<strong>Satir35 : </strong> &lt;td&gt;&lt;a href=Download.asp&gt;Download&lt;/td&gt;<br />
<strong>Satir36 : </strong> &lt;/tr&gt;<br />
<strong>Satir37 : </strong> &lt;/Table&gt;<br />
<strong>Satir38 :</strong><br />
<strong>Satir39 :</strong> &lt;div id=&#8221;Menu2Div&#8221; style=&#8221;visibility=hidden; POSITION: absolute; left:-100px; top:-100px;&#8221; onmouseover=&#8221;Goster(&#8216;Menu2&#8242;)&#8221; onmouseout=&#8221;Kapa(&#8216;Menu2&#8242;)&#8221;&gt;</p>
<p>- Bu satira kadar olan yerler bildiğiniz html oyuzden yazmadim bu satirda ayni sekilde 26. satirdan farki id si farkli.<br />
&#8211; Aklima gelmisken Left ve top i fix olarak -100px ile sayfa disine konuslandirdim ilk acilista bunun sebebi Netscape ve operanin bazi surumlerinde standar olarak hidden i kabul etmiyor. ilk once olmaz filan dedim ama makineme elime gecen browseri yukleyip kodlarimi hepsinde test etmeye baslayinca sonucu gordumki ilk acilista sol ust kosede duruyorlar menuye gelince yok oluyorlar. bu yuzden acilista ekran disinda yarattim.</p>
<p><strong>Satir40 : </strong>&lt;Table bgcolor=&#8221;#AA6666&#8243;&gt;<br />
<strong>Satir41 : </strong> &lt;tr&gt;<br />
<strong>Satir42 : </strong> &lt;td&gt;&lt;a href=Profil.asp&gt;Profil&lt;/td&gt;<br />
<strong>Satir43 : </strong>&lt;/tr&gt;<br />
<strong>Satir44 : </strong>&lt;tr&gt;<br />
<strong>Satir45 : </strong> &lt;td&gt;&lt;a href=MsgKutusu.asp&gt;MesajBox&lt;/td&gt;<br />
<strong>Satir46 : </strong> &lt;/tr&gt;<br />
<strong>Satir47 : </strong>&lt;tr&gt;<br />
<strong>Satir48 : </strong> &lt;td&gt;&lt;a href=Bye.asp&gt;Cikis&lt;/td&gt;<br />
<strong>Satir49 : </strong> &lt;/tr&gt;</p>
<p><a href="http://www.ceturk.com/dosyalar/ders/372/JsMenu.zip" target="_blank">Uygulamayı indirin</a></p>
<p><strong>Recep Akkoç<br />
Mail &amp; Msn &amp; Gtalk :<br />
BeyazSeytan@gmail.com </strong></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ceturk.com/web-teknolojileri/menu-inceleme.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>JavaScript Nedir?Bende script yazabilir miyim?</title>
		<link>http://www.ceturk.com/web-teknolojileri/javascript-nedirbende-script-yazabilir-miyim.html</link>
		<comments>http://www.ceturk.com/web-teknolojileri/javascript-nedirbende-script-yazabilir-miyim.html#comments</comments>
		<pubDate>Thu, 12 Feb 2004 13:08:13 +0000</pubDate>
		<dc:creator>BlackChambers</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Web Teknolojileri]]></category>
		<category><![CDATA[charset]]></category>
		<category><![CDATA[Mehmet Gani TOMBALAK]]></category>
		<category><![CDATA[script]]></category>
		<category><![CDATA[sınıf]]></category>
		<category><![CDATA[source]]></category>
		<category><![CDATA[tag]]></category>

		<guid isPermaLink="false">http://www.ceturk.com/?p=266</guid>
		<description><![CDATA[JavaScript Nedir?
Uzun bir aradan ve sert bir makaleden sonra geri döndüm.Ve söz verdiğim gibi script derslerine başlıyorum.Buyrun bakalım.
Arkadaşlar belki incelediyseniz bir sürü script dilinde bahsedilir.ECMAScript,JScript,JavaScript,VBScript &#8230;. gibi Biz burada JavaScript&#8217;i inceleyeceğiz fakat şunu söylemek gerekirse diğer script dilleri de temelde farklı değildir.Hepsi aynıdır fakat farklar şirketler arası rekabetten doğmuş olup çok azdır.VBScript ise ASP kullanımı [...]]]></description>
			<content:encoded><![CDATA[<h3>JavaScript Nedir?</h3>
<p>Uzun bir aradan ve sert bir makaleden sonra geri döndüm.Ve söz verdiğim gibi script derslerine başlıyorum.Buyrun bakalım.</p>
<p>Arkadaşlar belki incelediyseniz bir sürü script dilinde bahsedilir.ECMAScript,JScript,JavaScript,VBScript &#8230;. gibi Biz burada JavaScript&#8217;i inceleyeceğiz fakat şunu söylemek gerekirse diğer script dilleri de temelde farklı değildir.Hepsi aynıdır fakat farklar şirketler arası rekabetten doğmuş olup çok azdır.VBScript ise ASP kullanımı ile öne çıkmıştır.</p>
<h3>Ben de script yazabilir miyim?</h3>
<p>Mantık olarak daha önce herhangi bir programlama dili ile uğraşmışsanız çok çok kolay hele hele C ile çalıtıysanız sizlere peynir ekmek gibi gelcektir.Ama programcılık alanında uğraşınız olmasada olur sizin için bir başlangıç olur.(web programmer oluyosunuz bi yerde <img src='http://www.ceturk.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  )</p>
<h3>GİRİŞ</h3>
<p>ÖNEMLİ NOT:</p>
<p>BU DERSTEN FAYDALANACAK ARKADAŞLARIN HTML BİLDİĞİNİ VARSAYARAK ANLATIYORUM.BİLMEYENLER SORUN ETMESİN HTML&#8217;de Bİ OLAY YOK KOLAY ÖĞRENİLİR.</p>
<p>İlk olarak script yazarken kullanacağımız editör konusunda bir şeyler söyliyelim.Notepad,WordPad,Molpad  <img src='http://www.ceturk.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> )  hiç fark etmez hangisini istiyorsanız onu.</p>
<p>Başlayalımmmm&#8230;</p>
<p><strong>&lt;script&gt;&lt;/script&gt;  Tagları?</strong></p>
<p>Bu tag bizim için önemi scriptimizin kodlarını bu aglar arasına yazıyoruz.Bu tag&#8217;ın da diğer HTML TAGLARI GİBİ BİR TAKIM NİTELİKLERİ var.Bunlar-<br />
<strong><br />
CHARSET: </strong>Dil karakter kodlamasını içerir.Varsayılan &#8220;ISO-8859-1&#8243; dir<br />
<strong>CLASS: </strong>Elementin sınıfı<br />
<strong>DEFER:</strong> Tarayıcıya scriptin herhangi bir belge oluşturnayacağını bildirir.<br />
<strong>EVENT:</strong> &lt;script for=ObjectName&gt; ile kullanılarak ObjectName nesnesinin olayını yönetir.&lt;script for=ObjectNme event=&#8221;onclick&#8221; gibi.<br />
<strong>LANGUAGE:</strong> Script dilinin adını ayarlar JavaScript yada VBScript gibi.<br />
<strong>SRC: </strong>Scripttimiz dış kaynaklı ise kaynak dosyanın yolunu verir.<br />
<strong>TYPE: </strong>Script dilimiz MIME (Multipupose Internet Mail Extension) değerini ayarlar.Language niteliğinin yerine kullanılmasını tavsiye ederim çünkü bu nitelik yakında kullanılmayacak type niteliğini hem netscape hem i.e desktekliyor.ÖRN: &lt;script type=&#8221;text/javascript&#8221;&gt; gibi</p>
<p><strong>Scriptlerimizi eski tarayıcılarda gizlemek</strong></p>
<blockquote><p>&lt;script type=&#8221;text/javascript&#8221;&gt;<br />
&lt;!&#8211;<br />
HTML yorum imleri arasına yani buraya yazacağınız kodlar script desteği olmayan browserlarda okunmayacak kullanıcı kaynağa bakıncada kodunuzu göremeyecektir.<br />
&#8211;&gt;<br />
&lt;/script&gt;</p></blockquote>
<p><strong>&lt;script&gt;&lt;/script&gt; tagı(Yada elementi) Nereye Konmalı?</strong></p>
<p>Eğer scriptimiz sayfa üzerinde bir nesneye fonksiyon dışında erişmeye çalışıyor yada  sayfaya veri veri gönderiyor (sayfa üzerine yazdırma yapıyorsa gibi) ise scriptimizi mutlaka &lt;body&gt; tagından SONRA eklmemiz gerekiyor.Yok eğer sadece fonksiyonlar ve bir takım değer ve değişkenler tutuluyor ise &lt;head&gt;&lt;/head&gt; tagları arasında tanımlamamız daha uygun olacaktır.</p>
<p>Önemli Not:Sayfa içersinde bir neseneye erişen kodlarınızı o nesnenin tanımlanmasından sonra yazınız örneğin aşağıdaki kodda bir buttonun üzerindeki yazıyı değiştiriyorum</p>
<blockquote><p>&lt;script type=&#8221;text/javascript&#8221;&gt;<br />
window.button1.value=&#8221;Hoşgeldiniz!&#8221;<br />
&lt;/script&gt;<br />
&lt;input type=&#8221;button&#8221; name=&#8221;button1&#8243; id=&#8221;button1&#8243; value=&#8221;CETURK&#8217;e&#8221;&gt;<br />
Burada oluşacak hata şudur.&#8221;window.button1.value&#8221; bir nesne değil hatasını alırsınız çünkü browser scriptinizi derleyip çalıştırdığı zaman daha button1 adlı nesnemiz bwser tarafında derlenmemiş oluyor bu nedenle scriptimizi,<br />
&lt;input type=&#8221;button&#8221; name=&#8221;button1&#8243; id=&#8221;button1&#8243; value=&#8221;CETURK&#8217;e&#8221;&gt;<br />
&lt;script type=&#8221;text/javascript&#8221;&gt;<br />
window.button1.value=&#8221;Hoşgeldiniz!&#8221;<br />
&lt;/script&gt;</p></blockquote>
<p>şeklinde tanımlamanız daha uygun olur.</p>
<p>Bu ders bu kadar gelecek derste değişkenler(veriler),karar yapıları ve operatörler hakkında bilgi vereceğim</p>
<p>iyi çalışmalar.</p>
<p><strong>Webmaster<br />
Mehmet Gani TOMBALAK</strong></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ceturk.com/web-teknolojileri/javascript-nedirbende-script-yazabilir-miyim.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
