<?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>KnbykL Official Web Site &#124; Web Security, Web Application Security &#187; java Script&#8217; te Uyarı Mesajları</title>
	<atom:link href="http://www.knbykl.org/tag/java-script-te-uyari-mesajlari/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.knbykl.org</link>
	<description>Web Security, Articles and Application, Hacking Methods, SQL Injection, CSRF, XSRF and Server Security</description>
	<lastBuildDate>Wed, 23 Jun 2010 23:43:48 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>JavaScript ile Web Sayfa Düzenlemeleri</title>
		<link>http://www.knbykl.org/javascript-ile-web-sayfa-duzenlemeleri/</link>
		<comments>http://www.knbykl.org/javascript-ile-web-sayfa-duzenlemeleri/#comments</comments>
		<pubDate>Mon, 22 Jun 2009 11:18:16 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Advisories]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[java Script' te Uyarı Mesajları]]></category>
		<category><![CDATA[Java Script'te Değişkenler]]></category>
		<category><![CDATA[Java Script'te Döngüler]]></category>
		<category><![CDATA[Java Script'te Fonksiyon Kullanımı]]></category>
		<category><![CDATA[Java Script'te Form Nesneleri]]></category>
		<category><![CDATA[Java Script'te Karşılaştırma İşlemi]]></category>
		<category><![CDATA[Java Script'te Nesne Yaratmak]]></category>
		<category><![CDATA[Java Scrtipt'te Değer Girişi]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[JS]]></category>
		<category><![CDATA[Özel Nesneler]]></category>
		<category><![CDATA[Sayfaya Yazı Yazdırmak]]></category>
		<category><![CDATA[Window Nesnesi]]></category>

		<guid isPermaLink="false">http://www.knbykl.org/?p=183</guid>
		<description><![CDATA[Bir Web sayfasına Java Script Eklemek Bir Web sayfasında JScript ile kod yazabilmek için ilk önce tarayıcımıza kullanacağımız script dilini tanıtmamız gereklidir. &#60;scriptfont-family: Verdana; color: blue;&#8221;&#62; &#8230; JScript kodları &#8230; &#60;/script&#62; Burada; &#60;script&#62; &#60;/script&#62; tag&#8217;leri tarayıcımıza komutların HTML değil JScript olduğunu gösterir.Bu satırları eklemememiz halinde tarayıcı komutları tanımayacağından JScript komutlarımız dökümanın bir parçası olarak algılanacak [...]]]></description>
			<content:encoded><![CDATA[<p><strong>Bir Web sayfasına Java Script Eklemek<br />
</strong>Bir Web sayfasında JScript ile kod yazabilmek için ilk önce tarayıcımıza kullanacağımız script dilini tanıtmamız gereklidir.<br />
<img class="alignnone size-full wp-image-194" title="javascript-image-img" src="http://www.knbykl.org/wp-content/uploads/2009/06/javascript-image-img.jpg" alt="javascript-image-img" width="615" height="100" /></p>
<p><span id="more-183"></span></p>
<h4><span style="color: #99ccff;">&lt;scriptfont-family: Verdana; color: blue;&#8221;&gt;</span></h4>
<h4><span style="color: #99ccff;"><br />
&#8230;</span></h4>
<h4><span style="color: #99ccff;"></p>
<p><span style="color: #99cc00;">JScript kodları</span></p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>&#8230;</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>&lt;/script&gt;</p>
<p></span></h4>
<p>Burada;</p>
<h4><span style="color: #99ccff;">&lt;script&gt; &lt;/script&gt;</span></h4>
<p>tag&#8217;leri tarayıcımıza komutların HTML değil JScript olduğunu gösterir.Bu satırları eklemememiz halinde tarayıcı komutları tanımayacağından JScript komutlarımız dökümanın bir parçası olarak algılanacak ve ekranda görünecektir.<br />
Unutmamamız gereken noktalar tüm fonksiyonların ve blokların { ve } işaretleri arasında yazılması gerektiği ve her komut satırından sonra ; (noktalı virgül) işaretinin koyulması gerektiğidir.<br />
Ayrıca JScript kodları her tarayıcının her sürümünde doğru olarak çalışmayacağı için özellikle eski tarayıcılarda hata verecektir. Bunu engellemek için</p>
<h4><span style="color: #99ccff;">&lt;script&gt;</span></h4>
<h4><span style="color: #99ccff;"></p>
<p>&lt;!&#8211; Hide script from older browsers</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>&#8230;</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p><span style="color: #99cc00;">JScript kodları</span></p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>&#8230;</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>// End hiding &#8211;&gt;</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>&lt;/script&gt;</p>
<p></span></h4>
<p><strong>Sayfaya Yazı Yazdırmak </strong></p>
<hr size="2" />Java Script kullanarak ekrana yazı yazdırmak document.write komutu ile yapılır. Kullanımı ise:</p>
<h4><span style="color: #99ccff;">window.document.write(&#8220;<span style="color: #99cc00;">Merhaba Dünya !</span>&#8220;);</span></h4>
<p>şeklindedir.<br />
window.documen t kodu nesnemizin şu anda açık olan sayfamız olduğunu anlatır. Write komutu ait olduğu nesneye yazılmasını sağlar. Parametreleri ise parantezler arasına verilir. Eğer yazdırmak istediğimiz metni kodun içinde gireceksek metni &#8220;&#8230;.&#8221; tırnak işaretlerini kullanarak girmemiz gereklidir. Ayrıca + işaretini kullanarak birden fazla giriş yapmak ta mümkündür.</p>
<h4><span style="color: #99ccff;">window.document.write(&#8220;<span style="color: #99cc00;">Merhaba</span>&#8221; + &#8220;<span style="color: #99cc00;">Dünya</span>&#8220;);</span></h4>
<p>veya isim, kullanıcının ismini taşıyan bir değişken olmak üzere</p>
<h4><span style="color: #99ccff;">window.document.write(&#8220;<span style="color: #99cc00;">Merhaba</span>&#8221; + <span style="color: #99cc00;">isim</span>);</span></h4>
<p>yazmamız halinde bu ayrı metinler aralarında bir boşluk karakteri bırakılmak üzere ard arda yazılacaktır.<br />
Ayrıca JScript&#8217;le yazdıracağımız metinleri HTML kodlarıyla şekillendirmemiz mümkündür.</p>
<h4><span style="color: #99ccff;">window.document.write(&#8220;&lt;center&gt;&lt;B&gt;<span style="color: #99cc00;">Merhaba Dünya</span>&lt;/B&gt;&lt;/center&gt;&#8221;)</span></h4>
<p>Her ne kadar linkleri HTML kullanarak yaratmak mümkünse de gelişmiş uygulamalarda gidilecek sayfalara parametre aktarımı yapabilmek için linki JScript&#8217;le oluşturmak gerekebilir. Bunun için JScript&#8217;te window.location.href komutu kullanılır.</p>
<p>Örnek olarak Java.htm isimli sayfaya gitmek için bu komutun kullanımı:</p>
<h4><span style="color: #99ccff;">window.location.href=&#8221;java.htm&#8221;;</span></h4>
<h4>olacaktır. Tırnak işaretleri arasına URL girmek te mümkündür.<span style="color: #99ccff;"> </span></h4>
<h4><span style="color: #99ccff;">window.location.href=&#8221;<span style="color: #99cc00;">http://www.knbykl.org</span>&#8220;;</span></h4>
<p><strong>java Script&#8217; te Uyarı Mesajları </strong></p>
<hr size="2" />JScript&#8217;te uyarı mesajları yazmak için alert komutu kullanılır. Örneğin</p>
<h4><span style="color: #99ccff;">&lt;script&gt;</span></h4>
<h4><span style="color: #99ccff;"></p>
<p>alert(&#8220;<span style="color: #99cc00;">Uyarı Mesajı</span>&#8220;);</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>&lt;/script&gt;</p>
<p></span></h4>
<p>scripti ekrana <strong>Uyarı Mesajı </strong>yazılı ve bir OK butonu bulunan bir mesaj kutusu getirir. OK butonuna basılınca Script, bir alt satırdan çalışmaya devam edecektir</p>
<p><strong>Java Script&#8217;te Fonksiyon Kullanımı </strong></p>
<hr size="2" />JScript te C++ gibi nesneye yönelik bir dildir ve fonksiyonlar bu yapıda en önemli yeri alır. JScript fonksiyonları çağırıldıkları zaman işlemeye başlayan scriptlerdir. Aşağıdaki örnek, butona basıldığında &#8220;Merhaba Dünya&#8221; uyarı mesajı çıkartan fonksiyondur.</p>
<h4><span style="color: #99ccff;">&lt;script&gt;</span></h4>
<h4><span style="color: #99ccff;"></p>
<p>function Deneme()</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>{</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>alert(&#8220;<span style="color: #99cc00;">Merhaba Dünya</span>&#8220;);</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>}</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>&lt;/script&gt;</p>
<p></span></h4>
<p>Şimdi düğmeye basıldığında bu fonksiyonu çağıran HTML kodunu yazalım</p>
<h4><span style="color: #99ccff;">&lt;form&gt;</span></h4>
<h4><span style="color: #99ccff;"></p>
<p>&lt;input value=&#8221;<span style="color: #99cc00;">Buraya Bas</span>&#8220;&gt;</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>&lt;/form&gt;</p>
<p></span></h4>
<p>JScript fonksiyonunda sadece alert(&#8220;Merhaba Dünya&#8221;) komutu var. HTML&#8217;de de üzerinde &#8220;Buraya Bas&#8221; yazılı bir buton var ve onclick olayı Deneme isimli fonksiyona yönlendirilmiş. Bu fonksiyona hiç bir parametre gelmiyor ve bir dönüş parametresi de yok. Aynı fonksiyon şu şekilde yazılısaydı:</p>
<h4><span style="color: #99ccff;">&lt;script&gt;</span></h4>
<h4><span style="color: #99ccff;"></p>
<p>function Deneme(param)</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>{</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>alert(param);</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>}</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>&lt;/script&gt;</p>
<p></span></h4>
<p>ve onu çağıran HTML satırında da fonksiyona &#8220;Merhaba Dünya&#8221; parametresini gönderseydik alınan sonuçta hiç bir değişiklik olmayacaktır.</p>
<h4><span style="color: #99ccff;">&lt;form&gt;</span></h4>
<h4><span style="color: #99ccff;"></p>
<p>&lt;input value=&#8221;<span style="color: #99cc00;">Buraya Bas</span>&#8220;&gt;</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>&lt;/form&gt;</p>
<p></span></h4>
<p>Burada dikkat edilmesi gereken nokta HTML&#8217;den parametreyi gönderirken fonksiyon adından sonra açılan parantezlere &#8216; ve &#8216; işaretleri arasına yazılması ve fonksiyon için param artık bir parametre olduğu için alert fonksiyonunda parantezlerin içinde tırnak içine alınmaması gereğidir.</p>
<p>JScript fonksiyonları hakkında bilinmesi gereken bir diğer nokta da fonksiyonlar tarayıcı tarafından işlendikten sonra HTML koduna dönüştürüleceğinden (C&#8217;deki precompiler mantığıyla) HTML&#8217;de yerine koyulacak bir değer de fonksiyonla verilebilir. Yani linker fonksiyonu yapılan bir seçime göre bir URL döndürüyorsa HTML&#8217;de &lt;a href=linker(seçim)&gt; yazımında hiç bir sakınca yoktur.</p>
<p>Fonksiyonların gerçekleşmesi için fonksiyonun çağırıldığı <strong>olay </strong>&#8216;ın alması gerekmektedir. Bu olaylardan bazıları:</p>
<p>Olay İsmi Ne Zaman Olur</p>
<p><strong>onClick : </strong>Butona basıldığında</p>
<p><strong>onAbort : </strong>Stop düğmesine veya bir linke basılarak yüklenme durdurulduğunda</p>
<p><strong>onChange : </strong>Seçim yapıldığında veya metin değiştirildiğinde</p>
<p><strong>onError : </strong>Resmin veya ekranın yüklenmesinde hata oluştuğu zamanlar</p>
<p><strong>onLoad : </strong>Sayfa yüklenmesi tamamlandığında</p>
<p><strong>onMouseOut : </strong>Mouse pointer bir alan veya linkten uzaklaştırıldığında</p>
<p><strong>onMouseOver : </strong>Mouse pointer bir alan veya linkin üzerine geldiğinde</p>
<p><strong>onSelect : </strong>Seçim için ayrılmış bir nesne seçildiğinde</p>
<p><strong>onSubmit : </strong>Submit(gönder) butonu basıldığında</p>
<p><strong>onUnload : </strong>Sayfa yüklenmesi bittiğinde(kullanıcı sayfadan çıktığında)</p>
<p><strong>Java Scrtipt&#8217;te Değer Girişi </strong></p>
<hr size="2" />JScript&#8217;te alert komutunu bir çıkış komutu olarak düşünürsek bunun karşılığı olan giriş komutu prompt komutudur. Bu komut</p>
<h4><span style="color: #99ccff;">adsoyad=prompt(&#8220;<span style="color: #99cc00;">Adınızı ve soyadınızı giriniz</span>&#8220;,&#8221;");</span></h4>
<p>şeklinde kullanılır ve kullanıcı tarafından girilen değer adsoyad isinmli değişkene atanır.</p>
<p><strong>Java Script&#8217;te Karşılaştırma İşlemi </strong></p>
<hr size="2" />Conditional statement veya If statement olarak bilinen komut grubu yani IF-THEN-ELSE JScript&#8217;te de mevcuttur. Bu komut grubu bir değerle bir diğerini karşılaştırıp sonuca göre farklı işlemler yapmamızı sağlar. Şimdi az önceki örnekte olduğu gibi kullanıcıdan ismini girmesini isteyelim ve bir karşılaştırma yapalım. Dikkat etmemiz gereken nokta aynı C dilinde olduğu gibi then komutunu kullanmamamızdır.</p>
<h4><span style="color: #99ccff;">adsoyad=prompt(&#8220;<span style="color: #99cc00;">Adınızı ve soyadınızı giriniz</span>&#8220;,&#8221;");</span></h4>
<h4><span style="color: #99ccff;"></p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>if(adsoyad==&#8221;<span style="color: #99cc00;">Emre ER</span>&#8220;) alert(&#8220;<span style="color: #99cc00;">Hosgeldin Emre</span>&#8220;);</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>else alert(&#8220;<span style="color: #99cc00;">Seni Tanımıyorum</span>&#8220;);</p>
<p></span></h4>
<p>Burada bahsedilmesi gereken bir diğer konu da karşılaştırma operatörleri ve mantıksal operatörler. Karşılaştırma operatörleri:</p>
<p>Denk ==</p>
<p>Eşit değil !=</p>
<p>Küçük</p>
<p>&lt; Büyük &gt;</p>
<p>Küçük veya Eşit</p>
<p>&lt;= Büyük veya Eşit &gt;=</p>
<p>Mantıksal operatörler:</p>
<p>Ve &amp;</p>
<p>Veya |</p>
<p>Değil !</p>
<p>XOR ^</p>
<p>Bir de birden fazla karşılaştırmayı birleştirmek için</p>
<p>Ve &amp;&amp;</p>
<p>Veya ||</p>
<p>Ayrıca ++ operatörü birer birer artırmak için ve – operatörü de birer birer azaltmak için kullanılır.</p>
<p>operatörlerini kullanabiliriz. Dikkat edilmesi gereken nokta bir adet = operatörünün eşitleme iki adet ==operatörünün karşılaştırma işleminde kullanılması gerektiği ve ! operatörünün her yerde değil anlamı taşıdığıdır. Yani ! operatörü diğer operatörlerle birlikte değil anlamı vermek üzere kullanılabilir</p>
<p><strong>Java Script&#8217;te Değişkenler </strong></p>
<hr size="2" />JScript&#8217;te değişkenlere diğer diller gibi bir değişken tipi atamak zorunda değiliz. Daha sonra bu değişkeni eşitlediğiniz değere göre bir tip alacaktır.</p>
<p>JScript&#8217;te değişken tipleri olmadığı gibi bir dizi tanımı da yoktur. Bir dizi oluşturmak için basit bir foksksiyon yazmamız ve daha sonra kaç elemanlı dizi açmak istiyorsak bu fonksiyona onu parametre olarak göndermemiz gerekecektir. Bu fonksiyon şu şekilde olabilir:</p>
<h4><span style="color: #99ccff;">function makearray(n) </span></h4>
<h4><span style="color: #99ccff;"></p>
<p>{</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>this.lenght=n;</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>for( var i=1;i&lt;=n;i++)</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>{</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>this[i]=0;</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>return this;</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>}</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>}</p>
<p></span></h4>
<p>Daha sonra da dizimize vermek istediğimiz ismi ve uzunluğunu bu fonksiyona göndermemiz gerekecek. Yani</p>
<h4><span style="color: #99ccff;">dizi= new makearray(20); </span></h4>
<p>dediğimizde 20 elemanlı ve her elemanı 0 olan bir dizi oluşturalacaktır.</p>
<p>Tabi ki bu ilk değeri olmayan veya çok uzun bir dizi yaratmak için aksi halde Array komutuyla da bir dizi yaratılabilir. Şöyle ki:</p>
<h4><span style="color: #99ccff;">dizi = Array(&#8220;<span style="color: #99cc00;">Ali</span>&#8220;,&#8221;<span style="color: #99cc00;">Ayse</span>&#8220;,&#8221;<span style="color: #99cc00;">Selim</span>&#8220;,&#8221;<span style="color: #99cc00;">Yahya</span>&#8220;,&#8221;<span style="color: #99cc00;">Kemal</span>&#8220;); </span></h4>
<p>Burada dikkat edilmesi gereken nokta dizi elemanlarına ulaşırken diziadı[indexno] syntax&#8217;ı ve dizi index numaralarının( biz aksini belirtmedikçe) 0&#8242;dan başladığıdır. Bu arada bir değişkene string değer atandığı zaman o değişkenin otomatik olarak bir karakterler dizisi olarak algılanmayacağı da önemli bir özelliktir. Yani;</p>
<h4><span style="color: #99ccff;">ad=&#8221;<span style="color: #99cc00;">Emre</span>&#8220;; </span></h4>
<p>şeklinde bir tanımlamada ad[1]=S , ad[2]=e &#8230; olmayacaktır.</p>
<p>Bir stringin içinden bir harfi ya da harf grubunu almak istediğimizde kullanmamız gereken komut substring komutudur.</p>
<h4><span style="color: #99ccff;">harf=ad.substring(0,1); </span></h4>
<p>yazdığımızda harf değişkeni S harfini içerecektir. Buradaki parametrelerden 0, kaçıncı karakterden başlanacağını 1 ise kaçıncı karaktere kadar alınacağını gösterir.(1 hariç)</p>
<p>Yani harf=ad.substring(0,2) deseydik harf değişkeni &#8220;Se&#8221; değerini içerecekti.</p>
<p>Bu işlemin tam tersi de mümkündür. Yani girilen bir karakterin kaçıncı karakter olduğunu bulmak. Bunun için de indexOf komutunu kullanıyoruz.</p>
<h4><span style="color: #99ccff;">sayi=ad.indexOf(&#8220;e&#8221;); </span></h4>
<p>yazdığımızda sayi değişkenine 2 değeri atanır.</p>
<p>Ayrıca bu değişkenin uzunluğunu bulmak için lenght komutu kullanılır.</p>
<h4><span style="color: #99ccff;">sayi=ad.lenght; </span></h4>
<p>dediğimizde sayi değişkeninde 6 değeri bulunacaktır.</p>
<p><strong>Java Script&#8217;te Döngüler </strong></p>
<hr size="2" /><strong>For Döngüsü </strong></p>
<h4><span style="color: #99ccff;">for (var i=0;i&lt;10;i++)</span></h4>
<h4><span style="color: #99ccff;"></p>
<p>{</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>window.write(&#8220;<span style="color: #99cc00;">Şu anda</span>&#8221; + i + &#8220;. <span style="color: #99cc00;">numaradasını</span>z&#8221;);</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>if (i==5) window.write(&#8220;<span style="color: #99cc00;">Yarısına geldiniz bile</span>&#8220;);</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>}</p>
<p></span></h4>
<p>döngüsünde önce i değişkenine 0&#8242;dan başlaması gerektiğini, i 10&#8242;dan küçük olduğu sürece devam edeceğini ve i&#8217;nin birer birer artacağını söylüyoruz. Bu şartlarda ekrana &#8220;Şu anda 1. numaradasınız&#8221; , &#8220;Şu anda 2. numaradasınız&#8221; gibi mesajlar gelecek i, 5 olduğunda ise ayrıca &#8220;Yarısına geldiniz bile&#8221; mesajı gelecektir.</p>
<p><strong>While Döngüsü </strong></p>
<p>Bir döngüye ihtiyaç duyduğunuzda döngü içindeki işlemlerin kaç kere yapılması değil de bir durum gerçekleştiği sürece yapılması önemliyse while döngüsü kullanılır.</p>
<h4><span style="color: #99ccff;">isim=array(&#8220;&#8221;<span style="color: #99cc00;">Ali</span>&#8220;,&#8221;<span style="color: #99cc00;">Ayse</span>&#8220;,&#8221;<span style="color: #99cc00;">Selim</span>&#8220;,&#8221;<span style="color: #99cc00;">Yahya</span>&#8220;,&#8221;<span style="color: #99cc00;">Kemal</span>&#8220;);</span></h4>
<h4><span style="color: #99ccff;"></p>
<p>i=0;</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>j=0;</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>while(i != 1)</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>{</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>if isim[j]==&#8221;<span style="color: #99cc00;">Yahya</span>&#8221; i=1;</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>j++;</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>}</p>
<p></span></h4>
<p>kodunda dizide &#8220;Yahya&#8221; ismini bulmak için bir döngü yarattık. Yahya ismini bulduktan sonra döngüde kalması programın yavaş çalışmasını sağlayacağından döngüyü 0&#8242;dan 4&#8242;e kadar for döngüsü yerine bir kontrol elemanının değerine bağladık. Yahya ismi bulununca kontrol değeri 1 yapıldı ve döngüden çıkıldı. J değeri ise Yahya isminin kaçıncı eleman olduğunu gösteren rakamın bir fazlasında kaldı.</p>
<p><strong>Break Komutu </strong></p>
<p>Herhangi bir şart gerçekleştiğine döngüden anında çıkmamız gerekiyorsa break komutunu kullanırız. Deminki örnekte Yahya ismini bulduğumuz halde kontrol döngünün başında olduğu için j bir kez daha artırıldı ve olmasını istediğimiz değerden bir fazla oldu. Oysa ki scripti şöyle yazsaydık:</p>
<h4><span style="color: #99ccff;">isim=array(&#8220;&#8221;<span style="color: #99cc00;">Ali</span>&#8220;,&#8221;<span style="color: #99cc00;">Ayse</span>&#8220;,&#8221;<span style="color: #99cc00;">Selim</span>&#8220;,&#8221;<span style="color: #99cc00;">Yahya</span>&#8220;,&#8221;<span style="color: #99cc00;">Kema</span>l&#8221;);</span></h4>
<h4><span style="color: #99ccff;"></p>
<p>i=0;</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>j=0;</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>while(i != 1)</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>{</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>if isim[j]==&#8221;<span style="color: #99cc00;">Yahya</span>&#8221;</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>{</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>i=1;</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>break;</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>}</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>j++;</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>}</p>
<p></span></h4>
<p>Yahya ismi bulununca break komutuyla döngüden çıkacak ve j bir kez daha boşu boşuna artırılmamış olacaktı.</p>
<p><strong>Java Script&#8217;te Nesne Yaratmak </strong></p>
<hr size="2" />Burada bahsedeceğimiz nesne birden fazla özelliği olan bir değişkendir. Bir insanın adı, soyadı, yaşı, kredi kart numarası gibi bilgileri tek bir değişken altında tutmak mümkündür. Bunun için de önce bunu yaratan bir fonksiyon yazıp sonra istediğimiz değişkeni gerekli parametrelerle bu fonksiyon cinsinden tanımlamalıyız.</p>
<h4><span style="color: #99ccff;">function insan(<span style="color: #99cc00;">ad</span>,<span style="color: #99cc00;">soyad</span>,<span style="color: #99cc00;">yas</span>,<span style="color: #99cc00;">kartno</span>)</span></h4>
<h4><span style="color: #99ccff;"></p>
<p>{</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>this.ad=<span style="color: #99cc00;">ad</span>;</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>this.soyad=<span style="color: #99cc00;">soyad</span>;</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>this.yas=<span style="color: #99cc00;">yas</span>;</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>this.kartno=<span style="color: #99cc00;">kartno</span>;</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>}</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>kisi[1]= new insan(<span style="color: #99cc00;">Emre</span>,<span style="color: #99cc00;">Er</span>,<span style="color: #99cc00;">22</span>,<span style="color: #99cc00;">1234567890123456</span>)</p>
<p></span></h4>
<p>Bu scriptte önce insan nesnesini yaratan fonksiyonu görüyoruz. Buradaki this keyword&#8217;ü bu nesneye ait olan özellikler için(sadece fonksiyonun içinde) kullanılır. Daha sonra kisi isimli dizinin birinci elemanını insan cinsinden yeni bir nesne olduğunu belirtmek için new keyword&#8217;ünü kullanarak ve gerekli parametreleri vererek fonksiyonu çağırıyoruz. Daha sonra gerekli özelliklere erişmek için kisi[1].ad , kisi[1].soyad &#8230; yazılır.</p>
<p><strong>Özel Nesneler </strong></p>
<hr size="2" />JScript&#8217;te bir önceki konuda anlattığımız gibi kendi tanımladığımız nesnelerin yanı sıra halihazırda var olan nesneler de vardır. Bizim için önemli olan document nesnesinin özelliklerini şöyle sıralayabiliriz.</p>
<p>window<br />
parent,frame,self,_top&#8230;<br />
location<br />
history<br />
document<br />
form<br />
text field<br />
text area<br />
checkbox<br />
radio<br />
password<br />
select<br />
button<br />
submit<br />
reset<br />
link<br />
anchor</p>
<p><strong>Window Nesnesi </strong></p>
<hr size="2" />Window nesnesi en üst düzeyli nesne olduğu için özellikleri ve metodların başlarına window. yazmaya gerek yoktur. Frame ve Status Bar window nesnesinin özellikleridir. Status Bar kontrolü</p>
<h4><span style="color: #99ccff;">window.status=&#8221;<span style="color: #99cc00;">Merhaba Dünya</span>&#8220;; </span></h4>
<p>gibi bir kodla kontrol edilebilir. Ayrıca window nesnesinin alert, prompt,confirm ve open gibi metodları vardır. Bunlardan alert ve prompt metodlarını daha önce gördük.</p>
<p><strong>Confirm Metodu: </strong></p>
<p>Confirm metodu kullanıcıdan onay almak için kullanılır. Kullanıcıya sorulan bir soruyu ve birer OK ve CANCEL butonu içerir.</p>
<p><strong>Java Script&#8217;te Form Nesneleri </strong></p>
<hr size="2" />Nesneler JScript&#8217;te özel fonksiyonları bulunabilen birbirinden bağımsız elemanlardır. Text alanları, radio butonlar,check boxlar, butonlar ve drop-down menüler JScript nesneleridir.</p>
<p>Burada unutulmaması gereken durum nesnelerin bir form içinde olmaları yani &lt;FORM&gt; ve &lt;/FORM&gt; HTML kodları arasında tanımlanmaları gerektiğidir. Tanımladığınız nesne içinde bulunduğu formun bir elemanıdır ve daha sonraulaşılması gerektiğinde form adıyla birlikte anılır.</p>
<h4><span style="color: #99ccff;">&lt;form&gt;</span></h4>
<h4><span style="color: #99ccff;"></p>
<p>&lt;input value=&#8221;<span style="color: #99cc00;">Buraya Basınız</span>&#8220;&gt;</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>&lt;/form&gt;</p>
<p></span></h4>
<p>şeklinde tanıtılmış bir butona daha sonra erişmek istediğimizde form1.but1 yazmamız gerekecektir. Forma isim verilmediği durumlarda aynı butona form.but1 diye erişecektik ki aynı sayfada birden fazla form bulunması durumunda karışıklık çıkacaktı.</p>
<p><strong>Butonlar </strong></p>
<hr size="2" />
<h4><span style="color: #99ccff;">&lt;form&gt; </span></h4>
<h4><span style="color: #99ccff;"> &lt;input value=&#8221;<span style="color: #99cc00;">Buraya Basınız</span>&#8220;&gt; </span></h4>
<h4><span style="color: #99ccff;"> &lt;/form&gt; </span></h4>
<p>Bu örnekte input giriş elemanının bir buton olduğunu, name=&#8221;but1&#8243; programda bu butonu but1 olarak isimlendirdiğinizi value=&#8221;Buraya Basınız&#8221; de butonun üzerinde Buraya Basınız metninin yazılacağını gösterir.</p>
<p><strong>Text Alanları </strong></p>
<hr size="2" />
<h4><span style="color: #99ccff;">&lt;script&gt; </span></h4>
<h4><span style="color: #99ccff;"> function Goster (metin) { </span></h4>
<h4><span style="color: #99ccff;"> alert(metin); </span></h4>
<h4><span style="color: #99ccff;"> } </span></h4>
<h4><span style="color: #99ccff;"><br />
&lt;/script&gt; </span></h4>
<h4><span style="color: #99ccff;"> &lt;form&gt; </span></h4>
<h4><span style="color: #99ccff;"> &lt;input value=&#8221;<span style="color: #99cc00;">Buraya gireceğiniz yazı butona basınca alert olarak gelecektir.</span>&#8220;&gt; </span></h4>
<h4><span style="color: #99ccff;"> &lt;input value=&#8221;<span style="color: #99cc00;">Buraya Basın</span>&#8220;&gt; </span></h4>
<h4><span style="color: #99ccff;"> &lt;/form&gt; </span></h4>
<p>Bu kodda Goster isimli bir fonksiyonumuz var ve metin ismiyle bir parametre alıyor.Daha sonra da bu parametreyi alert fonksiyonuyla gösteriyor. Bu parametreyi gönderen de butonun onclick olayı. Ve butonun gönderdiği parametre form1 formunun text1 nesnesinin değeri. Programda ilk olarak bu değeri Buraya gireceğiniz yazı butona basınca alert olarak gelecektir. vermiştik. Buradan da anlaşılacağı gibi bu değer text alanının içindeki metin. Yani text box&#8217;a birşey yazılmadığı durumda bu alanda Buraya gireceğiniz yazı butona basınca alert olarak gelecektir. yazacak ve butona basıldığında da uyarı kutusunda bu mesaj gelecektir.</p>
<p>Eğer çok satırlı bir text alanı yaratmak istiyorsak</p>
<h4><span style="color: #99ccff;">&lt;input value=&#8221;<span style="color: #99cc00;">Alanın içindeki yazı</span>&#8220;&gt;</span> komutu yerine</h4>
<h4><span style="color: #99ccff;">&lt;textarea rows=&#8221;10&#8243; cols=&#8221;80&#8243;&gt;<span style="color: #99cc00;">Alanın içindeki yazı</span>&lt;/textarea&gt; </span></h4>
<p>Textarea tanımında rows alandaki satır sayısı, cols her bir satırın kaç karakter uzunluğunda olacağını belirten sayıdır.</p>
<p><strong>Radio Butonlar </strong></p>
<hr size="2" />Radio Butonlar genellikle bir çok seçenekten sadece bir tanesinin seçilmesini istediğimiz durumlarda kullanılır. Radio butonların sadece bir tanesinin seçilmesini sağlamak için name özelliklerinin aynı olması gerekmektedir. Aşağıdaki örnekte bilgisayarınızın işlemcisinin markası sorulmaktadır:</p>
<h4><span style="color: #99ccff;">&lt;form&gt; </span></h4>
<h4><span style="color: #99ccff;"> &lt;input value=&#8221;Intel&#8221; checked&gt; </span></h4>
<h4><span style="color: #99ccff;"> &lt;input value=&#8221;Cyrix&#8221; name=&#8221;cpu&#8221;&gt; </span></h4>
<h4><span style="color: #99ccff;"> &lt;input value=&#8221;AMD&#8221;&gt; </span></h4>
<h4><span style="color: #99ccff;"> &lt;/form&gt; </span></h4>
<p>Değeri Intel olan radio butonda bulunan checked kodu sayfa açıldığına bu butonun işaretli olarak geleceğini belirtir. Radio butonların değerlerini alırken (örnekte üç tane olmasına rağmen) cpu adında tek bir nesnemiz varmış gibi form1.cpu.value dememiz gerekecektir. Seçili olan radio butonun değeri Intel, Cyrix veya AMD olarak gelecektir.</p>
<p><strong>Check Boxlar </strong></p>
<hr size="2" />Check Boxlar da radio butonlar gibi iki durumlu giriş elemanlardır. Yalnız burada fark check boxların birden fazlasının da seçili olabilmesi durumudur. Her biri ayrı nesnedir ve her birinin seçili olma veay olmama durumu vardır. Durumunun anlaşılması ise checked komutu ile yapılmaktadır. Örneğin;</p>
<h4><span style="color: #99ccff;">&lt;input name=&#8221;chck1&#8243; value=&#8221;1&#8243;&gt; </span></h4>
<p>şeklinde tanımlanmış bir check box, daha sonra form.chck1.checked komutuyla kontrol edildiğinde seçili ise True seçili değilse False değeri getirecektir.</p>
<p><strong>Drop-Down Menüler </strong></p>
<hr size="2" />Bu eleman birçok seçeneği açılan bir menü şeklinde sunar.</p>
<h4><span style="color: #99ccff;">&lt;script&gt;</span></h4>
<h4><span style="color: #99ccff;"></p>
<p>function goster(metin) {</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>alert(metin);</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>}</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>&lt;/script&gt;</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>&lt;select size=&#8221;1&#8243;</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>onchange=&#8221;goster (form.drp1.options[drp1.selectedIndex]value)&#8221;&gt;</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>&lt;option value=&#8221;Intel&#8221;&lt;Intel&lt;/option&gt;</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>&lt;option value=&#8221;Cyrix&#8221;&lt;Cyrix&lt;/option&gt;</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>&lt;option value=&#8221;AMD&#8221;&lt;AMD&lt;/option&gt;</p>
<p></span></h4>
<h4><span style="color: #99ccff;"></p>
<p>&lt;/select&gt;</p>
<p></span></h4>
<p>Burada önemli olan bir özellik size özelliğidir. Kaç seçeneğin gösterilmesini istiyorsak size değerini o kadar artırmalıyız. Ayrıca bir çok eleman gibi onClick olayını değil onChange olayını kullanıyoruz. option value=&#8221;Intel&#8221; seçildiğinde gönderilecek değeri, daha sonra yazdığımız isim de menüde gösterilecek yazıyı ifade eder.</p>
<p>&lt;%@%&gt;<br />
&lt;HTML&gt;<br />
&lt;HEAD&gt;<br />
&lt;SCRIPT&gt;<br />
&lt;/SCRIPT&gt;<br />
&lt;TITLE&gt;JavaScript Mesaj Denemeleri&lt;/TITLE&gt;<br />
&lt;/HEAD&gt;<br />
&lt;BODY BGCOLOR=FFFFFF TEXT=000000&gt;<br />
&lt;CENTER&gt;<br />
&lt;FONT SIZE=+2&gt;JavaScript Mesaj Denemeleri&lt;/FONT&gt;&lt;BR&gt;<br />
&lt;/CENTER&gt;<br />
&lt;HR&gt;<br />
&lt;HR&gt;<br />
&lt;FONT SIZE=+2&gt;<br />
&lt;UL&gt;<br />
&lt;LI&gt;&lt;A HREF=&#8221;INDEX1.HTML&#8221;&gt;Sana bir soru.&lt;/A&gt;P&gt;<br />
&lt;UL&gt;<br />
&lt;LI&gt;Status bar&#8217;a bak:<br />
&lt;A HREF=&#8221;index.php3&#8243;&gt;A&lt;/A&gt;<br />
&lt;A HREF=&#8221;index.php3&#8243;&gt;B&lt;/A&gt;<br />
&lt;A HREF=&#8221;index.php3&#8243;&gt;C&lt;/A&gt;<br />
&lt;A HREF=&#8221;index.php3&#8243;&gt;D&lt;/A&gt;<br />
&lt;A HREF=&#8221;index.php3&#8243;&gt;E&lt;/A&gt;&lt;P&gt;<br />
&lt;UL&gt;<br />
&lt;LI&gt;&lt;A HREF=index.php3&#8243;&gt;Bana yaklaşma!&lt;/A&gt;&lt;P&gt;<br />
&lt;/UL&gt;&lt;/UL&gt;&lt;/UL&gt;&lt;/UL&gt;<br />
&lt;/FONT&gt;&lt;P&gt;&lt;HR&gt;<br />
&lt;/BODY&gt;<br />
&lt;/HTML&gt;</p>
<p>Bu örnekte kullanıcıya mesaj göndermenin değişik yolları gösterilmiştir. Confirm ve Alert komutlarının nasıl kullanıldığını görmüştük. İkinci satırda ise Status Bar&#8217;a mesaj yazdırmanın yolu görülüyor. Burada self.status denmesinin sebebi ise şu anda aktif olan nesnenin window nesnesi olasıdır. Bunun gibi herhangi bir nesne ile ilgili olarak yapacağımız işlemlerde <strong>self </strong>kullanacağız.</p>
<p>&lt;HTML&gt;<br />
&lt;HEAD&gt;<br />
&lt;SCRIPT&gt;<br />
&lt;!&#8211;<br />
function person(name,pass) {<br />
this.name=name;<br />
this.pass=pass;<br />
}<br />
function makearray(n) {<br />
this.lenght=n;<br />
for (var i=0;i&lt;=n;i++) {<br />
this[i]=&#8221;";<br />
return this;<br />
}<br />
}<br />
function submit1_onclick(form) {<br />
var x=0;<br />
pers= new makearray(3);<br />
var isim;<br />
var pas;<br />
isim=text1.value;<br />
pas=password1.value;<br />
if(!isFieldBlank(isim)) alert(&#8216;ID field cannot be blank&#8217;);<br />
else {<br />
pers[1] =new person(&#8220;serdar&#8221;,&#8221;");<br />
pers[2] =new person(&#8220;yucel&#8221;,&#8221;yucel&#8221;);<br />
pers[3] =new person(&#8220;ali&#8221;,&#8221;veli&#8221;);<br />
for(i=1;i&lt;4;i++) {<br />
if(isim==pers[i].name) {<br />
if(pas==pers[i].pass) x=1; }<br />
}<br />
if(x==1) document.write(&#8216;You made a good job&#8217;);<br />
else alert(&#8216;Password is invalid&#8217;);<br />
}<br />
}<br />
function isFieldBlank(ad) {<br />
if(ad)<br />
return true;<br />
else<br />
return false;<br />
}<br />
//&#8211;&gt;<br />
&lt;/SCRIPT&gt;<br />
&lt;/HEAD&gt;<br />
&lt;BODY&gt;<br />
&lt;P&gt;<br />
İsim:&lt;BR&gt;<br />
&lt;P&gt;&lt;INPUT&gt;&lt;/P&gt;<br />
&lt;P&gt; &lt;/P&gt;<br />
Şifre:&lt;BR&gt;<br />
&lt;INPUT&gt;&lt;/P&gt;<br />
&lt;P&gt; &lt;/P&gt;<br />
&lt;P&gt;&lt;INPUT value=Gir onclick=&#8221;submit1_onclick()&#8221;&gt;&lt;/P&gt; &lt;P&gt; &lt;/P&gt;<br />
&lt;/BODY&gt;<br />
&lt;/HTML&gt;</p>
<p>Bu örneğimiz biraz karışık. Öncelikle iki tane form nesnemiz var. Biri text alanı diğeri ise password. Scriptimizde ise <strong>person </strong>isimli bir fonksiyonumuz var. Bu fonksiyondaki <strong>this.name=name </strong>komutu bu fonksiyonu çağıran değişkenin name özelliğinin name ismiyle aktarılan değişken olacağını gösterir. <strong>pers[3] =new person(&#8220;ali&#8221;,&#8221;veli&#8221;); </strong>satırında olduğu gibi pers dizisinin 3. elemanı name özelliği ali, pass özelliği veli olan bir yapı olacak.</p>
<p><strong>isfieldblank </strong>fonksiyonu parametre olarak aktarılan alanın boş olup olmadığını kontrol eden fonksiyonumuz. İsim alanı boş olamayacağından önce bunu kontrol edip eğer boşsa bir uyarı mesajı gönderiyoruz.</p>
<p><strong>makearray </strong>fonksiyonu daha önce de bahsettiğim gibi dizi yaratmak için yazılmış bir fonksiyon. Aynı şekilde bu fonksiyonu çağıran değişkeni aktarılan parametre uzunluğunda bir dizi yapıyor. <strong>pers </strong>dizisi bu fonksiyonla yaratıldıktan sonra her bir elemanına <strong>person </strong>fonksiyonu tarafından name ve pass özellikleri atanıyor. Gerisi ise oldukça basit. Alanlara girilen değerler bir döngü içerisinde pers dizisinin elemanlarıyla karşılaştırılıyor.</p>
<p><strong>Java Script Kullanarak Yeni Bir Pencere Açmak </strong></p>
<hr size="2" />Aşağıdaki scriptte butona tıklayarak yeni bir ekran açılması için bir örnek vardır.Burada kullanılan birtakım özellikler olacaktır.</p>
<p>window.close() komutunun özellikleri yoktur. Sadece o anda aktif olan pencereyi kapatır. window.open(özellikler) komutundaki özellikler ise:<br />
&#8220;HTML&#8221; ; gösterilmesini istediğimiz sayfa<br />
&#8220;window.name&#8221; ; istediğimiz bir başlık<br />
&#8220;toolbar&#8221; ; toolbar&#8217;ın gösterilme özelliği (yes/no ya da 0/1 olarak belirtilir).<br />
&#8220;status&#8221; ; statusbar&#8217;ın gösterilme özelliği (yes/no ya da 0/1 olarak belirtilir).<br />
&#8220;menubar&#8221; ; menubar&#8217;ın gösterilme özelliği (yes/no ya da 0/1 olarak belirtilir).<br />
&#8220;scrollbars&#8221; ; scrollbar denilen sayfayı aşağı-yukarı ve sağa-sola oynatmamızı sağlayan barların gösterilme özelliği (yes/no ya da 0/1 olarak belirtilir).<br />
&#8220;resizable&#8221; ; açılacak olan ekranın boyutunun değiştirilebilir olup olmama özelliği (yes/no ya da 0/1 olarak belirtilir).<br />
&#8220;width&#8221; ; genişlik (pixel olarak belilenir).<br />
&#8220;height&#8221; ; yükseklik (pixel olarak belirlenir).</p>
<p>Gelelim scriptimize ve nasıl kullandığımıza:</p>
<p>&lt;script&gt;<br />
function ekranac()<br />
options=&#8217;toolbar=0,status=0,menubar=0,scrollbars=0,resizable=0,width=300,height=200&#8242;;<br />
content=<br />
&#8216;&lt;body bgcolor=&#8221;beige&#8221;&gt;&#8217;+<br />
&#8216;&lt;p align=&#8221;left&#8221;&gt;&lt;big&gt;&lt;strong&gt;Selam !&lt;/strong&gt;&lt;/big&gt;&lt;br&gt;&lt;/p&gt;&#8217;+<br />
&#8216;&lt;p align=&#8221;left&#8221;&gt;&lt;small&gt;Buraya basarak ekranı kapatabilirsiniz&lt;/small&gt;&lt;/p&gt;&#8217;+<br />
&#8216;&lt;form&gt;&lt;input value=&#8221;Ekranı Kapat !&#8221;&gt;&#8217;+<br />
&#8216;&lt;/form&gt;&#8217;;<br />
acilan = window.open(&#8220;&#8221;,&#8221;mywindow&#8221;,options);<br />
acilan.document.write(content)<br />
&lt;/script&gt;<br />
&lt;form&gt;<br />
&lt;input value=&#8221;Ekran Aç !&#8221; onclick=&#8221;ekranac()&#8221;&gt;<br />
&lt;/form&gt;</p>
<p>Script çok basit ve öğrenmesi kolay. Özellikleri biliyosanız window.open komutunu kullanmak zor olmayacaktır. Fakat Netscape Navigator&#8217;ın bazı bozuklukları sebebiyle bizim scriptimizde yaptığımız gibi bu özellikleri bir değişkene atayarak kullanmak yararlı olacaktır.</p>
<p>ekran = window.open(&#8220;http://www.programlama.com&#8221;,&#8221;programlama&#8221;,options)</p>
<p>gibi&#8230; Böylece ekrana da Javascript&#8217;in anlayabileceği bir isim vermiş oldunuz; &#8220;ekran&#8221;. Bu ismi kullanarak açılan yeni ekrana istediğinizi yaptırabilirsiniz. Bu özelliği aklınızda tutun. Çünkü frame kontrolünde de bu özellik kullanılmaktadır.</p>
<p>ekran.document.write(&#8216;Selam&#8217;)</p>
<p>gibi pek çok komutu &#8220;ekran&#8221; isimli yeni açılan ekrana aktarabiliriz.<br />
Aşağıdaki scripti kullanarak komutları ve özellikleri biraz daha rahat öğrenebilirsiniz. Her boşluğu doldurmak zorunda değilsiniz. Tek tek de denemeniz mümkün.</p>
<p>Bu komut Internet Explorer&#8217;ın bazı sürümlerinde çalışmamaktadır.</p>
<p><strong>Kullanıcının Tarayıcısını Kontrol Etmek </strong></p>
<hr size="2" />Daha önce de gördüğümüz gibi Javascript komutları tarayıcılara göre değişiklik gösterebiliyor veya hiç çalışmıyor. Bu durumlarda kullanıcının kullandığı tarayıcıyı tespit etmek ve ona göre hareket etmek akıllıca olacaktır. Bunun için kullanılan fonksiyon:</p>
<p>navigator.appName</p>
<p>Tabi sadece tarayıcıyı tespit etmek yeterli olmayabilir. Tarayıcı tanımlama ile ilgili tüm komutlar :</p>
<p>navigator.appName<br />
navigator.appVersion<br />
navigator.CodeName<br />
navigator.userAgent</p>
<p>Javascript ile kullanıcının bilgisayarından o anki tarihi ve saati almanız mümkün. Internet tüm dünyaya hitap ettiğinden sizin sayfanızın bulunduğu Web Server ile kullanıcının bilgisayarındaki saat ve tarih birbirine uymayabilir. Böyle bir durumda kullanıcının bilgisayarından saati ve tarihi almak faydalı olabilir.<br />
Önce saatin ve tarihin atanacağı bir değişken ile new Date() fonksiyonu çağırılır.<br />
zaman = new Date() Böylece zaman isimli değişkenin bir tarih değişkeni olduğunu belirttik. Fakat bu şekilde alınan tarih ve zaman bilgileri ekranda biraz düzensiz görülür. 14 Eylül 1998 tarihinde saat 22:10&#8242;da alınan bilgi ekranda şu şekilde görünecektir:<br />
Fri Aug 14 22:10:54 UTC+0300 1998 Bunu daha anlaşılı bir şekle sokmak için JScript&#8217;in .toLocaleString() komutundan yararlanılır.<br />
Deminki örneğimizde aldığımız zaman değişkenini zaman.toLocaleString() fonksiyonundan geçirdikten sonra alacağımız sonuç:</p>
<p><strong>08/14/1998 22:10:37 </strong>şeklinde olur.</p>
<p>Aynı zamanda kullanacağımız şu zaman fonksiyonlarıyla alacağımız değerler de şöyle olur:</p>
<table border="0" cellpadding="0">
<tbody>
<tr>
<td><strong>KOMUT </strong></td>
<td><strong>YANIT </strong></td>
<td><strong>AÇIKLAMA </strong></td>
</tr>
<tr>
<td><strong>zaman.getDay() </strong></td>
<td>5</td>
<td>Haftanın günü (0 = Pazar)</td>
</tr>
<tr>
<td><strong>zaman.getMonth() </strong></td>
<td>7</td>
<td>Ay (0 = Ocak , 0 &#8211; 11 arası)</td>
</tr>
<tr>
<td><strong>zaman.getDate() </strong></td>
<td>14</td>
<td>14 Ayın kaçıncı günü</td>
</tr>
<tr>
<td><strong>zaman.getYear() </strong></td>
<td>98</td>
<td>Yıl</td>
</tr>
<tr>
<td><strong>zaman.getHours() </strong></td>
<td>22</td>
<td>Saat</td>
</tr>
<tr>
<td><strong>zaman.getMinutes() </strong></td>
<td>10</td>
<td>Dakika</td>
</tr>
<tr>
<td><strong>zaman.getSeconds() </strong></td>
<td>37</td>
<td>Saniye</td>
</tr>
<tr>
<td><strong>zaman.getTime() </strong></td>
<td>903122773920</td>
<td>&#8220;1 Ocak 1990 Geceyarısı&#8221; tarihinden itibaren geçen milisaniye</td>
</tr>
<tr>
<td><strong>zaman.getTimezoneOffset() </strong></td>
<td>-180</td>
<td>Greenwitch&#8217;e göre (GMT) dakika olarak saat farkı</td>
</tr>
</tbody>
</table>
<p><strong>Java Script&#8217;te Resim İşleme </strong></p>
<hr size="2" />Aşağıdaki örnek Internet&#8217;te sıkça kullanılan ve Java Button diye anılan butonların nasıl çalıştığına bir örnektir. Bu butonlar mouse pointer üstlerine geldiği anda değişiyorlar ve pointer üstlerinden çekildiğinde eski hallerine dönüyorlar. Biz de bu işlemi yapan bir fonksiyon yazacağız ve butonun onMouseOver ve onMouseOut olaylarını bu fonksiyona göndererek resmi değiştireceğiz.</p>
<p>&lt;html&gt;<br />
&lt;head&gt;<br />
&lt;script&gt;<br />
{<br />
res1 = new Image();<br />
res1.src = &#8220;resim1.gif&#8221;;<br />
res2= new Image();<br />
res2.src=&#8221;resim2.gif&#8221;;<br />
}<br />
function changeImage(imgDocId,imgObjName) {<br />
document.images[imgDocId].src = eval(imgObjName + &#8220;.src&#8221;);<br />
}<br />
// &#8211;&gt;&lt;/script&gt;<br />
&lt;/head&gt;<br />
&lt;body&gt;<br />
&lt;a href=&#8221;http://www.programlama.com&#8221; onMouseOver=&#8221;changeImage(&#8216;buton&#8217;,'res1&#8242;)&#8221;<br />
onMouseOut=&#8221;changeImage(&#8216;buton&#8217;,'res2&#8242;)&#8221;&gt;<br />
&lt;img src=&#8221;resim1.gif&#8221; border=&#8221;0&#8243; name=&#8221;buton&#8221;&gt;&lt;/a&gt;&lt;br&gt;<br />
&lt;/body&gt;<br />
&lt;/html&gt;</p>
<p>Bir de Internet&#8217;te her gün rastladığımız linklere renk ve hareket getirecek bir script örneği verelim:</p>
<p>&lt;HTML&gt;<br />
&lt;HEAD&gt;<br />
&lt;STYLE&gt;<br />
.on {<br />
font-size:12;<br />
text-decoration:underline;<br />
color:red;<br />
}<br />
.off {<br />
font-size:12;<br />
color:black;<br />
}<br />
&lt;/STYLE&gt;<br />
&lt;/HEAD&gt;<br />
&lt;BODY&gt;<br />
&lt;A HREF=&#8221;http://www.programlama.com&#8221; onMouseOver=&#8221;this.className=&#8217;on&#8217;;&#8221; onMouseOut=&#8221;this.className=&#8217;off&#8217;;&#8221;&gt;Gel Bakalim&lt;/A&gt;<br />
&lt;/BODY&gt;<br />
&lt;/HTML&gt;<br />
Burada STYLE tag&#8217;i içinde iki adet class tanımlıyoruz ve bunlara on ve off adlarını veriyoruz. Linkimize de başlangıç olarak off classını atıyoruz. onMouseOver olayında linkin classını on, onMouseOut olayında ise tekrar off yapıyoruz. Örnekte normalde siyah olan link, üzerine gelindiğinde kırmızı ve alt çizgili olmaktadır. Bu classların yapılarıyla oynayarak çok değişik linkler elde etmek mümkün</p>
<p>Yazan : Serdar Kalaycı</p>
]]></content:encoded>
			<wfw:commentRss>http://www.knbykl.org/javascript-ile-web-sayfa-duzenlemeleri/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
