İçinde büyük harf-küçük harf ayrımı olan bir değeri büyük harf-küçük harf ayrımı olmayan Düzenli İfadeler haline çevirir. Bu fonksiyon bizden Düzenli İfade almaz, tersine Düzenli İfade oluşturur. Örnek:
php:
<?php
$metin = "Sözler";
echo(sql_regcase($metin);
?>
kaynak: ordan burdan
PHP programında kimi zaman sunucunun kullanmamıza izin verdiği haricî programları çalıştırız; PHP programımızın düzgün işlemesi bu harici programa bağlı olabilir. Böyle bir programı çalıştırmaya karar vermeden önce bir dosyanın çalıştırılabilir olup olmadığını sınayan bu fonksiyon, dosya çalıştırılabilir ise true/doğru, değilse false/yanlış sonuç verir. Örnek:
php:
if ( is_executable ( "bir_dosya" ) )
print ("Bu dosya çalıştırılabilir!");
Dosya çalıştırılabilir bir program değilse PHP programı "Bu dosya çalıştırılabilir!" yazmadan yoluna devam edecektir. (Unix ortamında varlığını görebildiğimiz her pprogram dosyasının çalıştırma izni bulunmayabilir.)
kaynak: ordan burdan
tek veya çift tırnak içine de alsak, PHP, bir değişken adını gördüğü zaman onun yerine o değişkenin tuttuğu değeri yazar. PHP bunu, değişken adının başındaki $ görerek yaparak. $ işareti gibi PHP için özel anlamı olan işaretlerin anlamlandırılmasını önlemek ve bu işaretleri düz metin saymasını sağlamak için bu işaretlerin önüne ters-bölü işareti koyarız. Buna o karakteri kurtarma veya ESCaping denir. PHP`nin anlamlı işaretleri ve bunların ESCape-yazılışı şöyledir:
` Tek tırnak
" Çift tırnak
Ters-bölü
$ Dolar işareti
n Yeni Satır (New Line)
r Satır Başı (Return)
t Sekme (Tab) karakteri
Kimi zaman bir değişkene atadığımız değerin türünü değiştirmek gerekir. Bunu settype() fonksiyonu ile yaparız. Elimizde böyle bir imkan var diye, bir değişkenin alfanümerik (String) olan değerini sayıya çevirebileceğini sanmayın. PHP buna çok kızar! Şu örneği de tur_degistir.php adıyla kaydedelim:
php:
<HTML>
<HEAD>
<TITLE>PHP`de Degisken Turleri</TITLE>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-9">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
</HEAD>
<BODY>
<B>
<H2>
<?php
$degisken = 5.67890;
print("Değişkenin değeri : ");
print "$degisken<br>";
print("Türü : ");
print gettype( $degisken ) ; //çift,ondalık/double
print "<br>";
print "<br>";
print "İlk değiştirme işlemi: Alfanümerik/String:<br>";
settype( $degisken, string ); //alfanümerik/string
print "Değeri : ";
print "$degisken<br>";
print("Türü : ");
print gettype( $degisken ) ; //alfanümerik/string
print "<br>";
print "<br>";
print "İkinci değiştirme işlemi: Tamsayı/Integer:<br>";
settype( $degisken, integer ); //Tamsayı/Integer
print "Değeri : ";
kaynak: ordan burdan
cropImage(225, 165, '/path/to/source/image.jpg', 'jpg', '/path/to/dest/image.jpg');
function cropImage($nw, $nh, $source, $stype, $dest) {
$size = getimagesize($source);
$w = $size[0];
$h = $size[1];
switch($stype) {
case 'gif':
$simg = imagecreatefromgif($source);
break;
case 'jpg':
$simg = imagecreatefromjpeg($source);
break;
case 'png':
$simg = imagecreatefrompng($source);
break;
}
$dimg = imagecreatetruecolor($nw, $nh);
$wm = $w/$nw;
$hm = $h/$nh;
$h_height = $nh/2;
$w_height = $nw/2;
if($w> $h) {
$adjusted_width = $w / $hm;
$half_width = $adjusted_width / 2;
$int_width = $half_width - $w_height;
imagecopyresampled($dimg,$simg,-$int_width,0,0,0,$adjusted_width,$nh,$w,$h);
} elseif(($w <$h) || ($w == $h)) {
$adjusted_height = $h / $wm;
$half_height = $adjusted_height / 2;
$int_height = $half_height - $h_height;
imagecopyresampled($dimg,$simg,0,-$int_height,0,0,$nw,$adjusted_height,$w,$h);
} else {
imagecopyresampled($dimg,$simg,0,0,0,0,$nw,$nh,$w,$h);
}
imagejpeg($dimg,$dest,100);
}
kaynak: ordan burdan
Diziler programcılığın temel konularından biridir. Bu sayfada öğrenecekleriniz, diğer programlarda da aynen veya benzer şekilde yer almaktadır. Bu sayfayı hemen değişkenlerden sonra anlatmayı düşünüyordum ama daha önce hiçbir yazılım dili bilmeyen arkadaşlara Pencere ve Metin kodları gibi somut derslerin daha öncelikli olduğuna karar verdim. Şimdi diziler konusuna geçebiliriz.
Dizi Tanımlama
Dizileri değişkenler kümesi şeklinde tanımlayabiliriz. Bellekte aynı isim altında saklanan değerleri ifade eder; değerler new Array(…) kodu kullanılarak girilir. Dizilerin iki yazım türü vardır:
var hafta = new Array("pazartesi", "salı", "çarşamba", "perşembe", "cuma", "cumartesi", "pazar")
veya,
var hafta = new Array(6)
hafta[0] = "pazartesi"
hafta[1] = "salı"
hafta[2] = "çarşamba"
hafta[3] = "perşembe"
hafta[4] = "cuma"
hafta[5] = "cumartesi"
hafta[6] = "pazar"
Buradaki hafta isimli değişken 7 değerli bir dizidir. İlk değer 0. sırada sayılmaktadır. hafta[0] değişkeninin değeri "pazartesi", hafta[3]'ün değeri "perşembe"'dir. Değişkenlerden tek farkı, aynı ismi taşımaları. Değerleri yazılım boyunca değişebilir, birbirlerine değerlerini aktarabilirler.
Aşağıdaki uygulamada kullanıcının girdiği 10 sayı küçükten büyüğe doğru sıralanmaktadır.
<html>
<head>
<title>Sıralama</title>
<script language="JavaScript">
function sirala()
{
var kelime = new Array(9)
var i, j, k, m, ara
for (i=0; i <=9; i++)
{
kelime[i] = prompt("Metinsel bir ifade girin lütfen…","Buraya,")
}
//Sayıları sıralıyoruz.
for (j=0; j <=9; j++)
{
for (k=0; k <=8; k++)
{
if (kelime[k] > kelime[k+1])
{
ara =kelime[k]
kelime[k] = kelime[k+1]
kelime[k+1] = ara
}
}
}
for (m=0; m <= 9; m++) document.write(m + 1 + ". kelime = " + kelime[m] + "<br>")
}
</script>
</head>
<body>
<form>
<p>Düğmeye basarak 10 tane yazıyı alfabetik sıraya sokabilirsiniz.</p>
<input type="button" value="Sırala" onclick="sirala()">
</form>
</body>
</html>
Bu uygulama için söylemek istediğim birkaç şey var. prompt kodunun yazılanları metinsel ifade olarak gördüğünü unutmayalım, bu nedenle bu yazılım alfabetik sıraya sokuyor. Yani "245" değerini, "3" değerinden küçük sayıyor. Bir diğer nokta, JavaScript İngilizce karakterleri esas aldığı için Türkçe karakterler sonda yer alıyor. Yani "z" değeri, "ş" harfinden önce geliyor. Sayısal bir sıralama yapmak isterseniz, metinsel ifadeleri sayısal ifadeye çevirmelisiniz ki, bunu henüz öğrenmediniz; yakında öğreneceksiniz.
Çok Boyutlu Diziler
Diziler tek boyutlu olmak zorunda değil. Şu ana kadar tek boyutlu dizileri gördük, oysa çok boyutlu diziler kullanmamız gerekebilir. JavaScript'te çok boyutlu dizi yok aslında ama bu bizim için bir engel değil: Tek boyutlu bir dizinin her elemanını yeni bir dizi haline getirip, iki boyutlu dizi haline getirebiliriz:
var hafta = new Array (6,1)
for(var i=0; i<=6;i++) hafta[i]= new Array()
hafta[0][0] = "pazartesi sabahı"
hafta[0][1] = "pazartesi akşamı"
hafta[1][0] = "salı sabahı"
hafta[1][1] = "salı akşamı"
hafta[2][0] = "çarşamba sabahı"
hafta[2][1] = "çarşamba akşamı"
hafta[3][0] = "perşembe sabahı"
hafta[3][1] = "perşembe akşamı"
hafta[4][0] = "cuma sabahı"
hafta[4][1] = "cuma akşamı"
hafta[5][0] = "cumartesi sabahı"
hafta[5][1] = "cumartesi akşamı"
hafta[6][0] = "pazar sabahı"
hafta[6][1] = "pazar akşamı"
Burada 7 x 2 = 14 tane değer söz konusudur ve iki değer grubunun (haftanın günleri, gün vakti) aralarında bir ilişki vardır. Bu örneğe 7 x 2'li bir matris de diyebiliriz, zira diziler bir matris ifadesidir. Matris bilgisi olmayan arkadaşlarımız kendi kendilerine yaptıkları denemelerle bazı temel bilgileri edinebilirler. Küçük bir uygulama yapalım:
<html>
<head>
<title>Sıralama</title>
<script language="JavaScript">
function rehber()
{
var kayit = new Array()
for (var i=0; i<=100; i++)
{
kayit[i] = new Array()
kayit[i][0]=prompt("Arkadaşınızın ismini girin lütfen","İsim")
if (kayit[i][0]==null || kayit[i][0]=="") break
kayit[i][1]=prompt(kayit[i][0] + " isimli arkadaşınızın telefonunu girin lütfen", "Telefon")
}
document.write("Rehbere kaydedilmiş isim ve telefon numaraları:<br>")
for (var j=0; j<=i;j++)
{
document.write(kayit[j][0] + ": " + kayit[j][1] + "<br>")
}
}
</script>
</head>
<body>
Aşağıdaki düğmeye basarak telefon numaralarını öğrenebilirsiniz.<br><br>
<form>
<input type="button" value="Telefon Rehberi" onclick="rehber()">
</form>
</body>
</html>
Diziler Üzerinde İşlemler
Diziyi yazılım içinde değer vermişsek, o dizinin kaç değeri olduğunu biliriz ve değer sayısını bulmaya çalışmayız. Ama eğer diziye girilecek değer sayısını kullanıcıya bırakmışsak, dizinin taşıdığı değer sayısını yazılım içinde ifade etmek isteriz. Dizilerin taşıdığı değer sayısını ifade etmek için length komutu kullanılır.
kaynak: ordan burdan
Doküman (document) nesnesi HTML dokümanının tamamını ifade etmektedir ve HTML'de kullandığımız <p>, <h1>, <div>, vb. gibi tüm komutları içerir. Doküman nesnesini HTML'deki <body> bölümü olarak düşünebilirsiniz.
Aslında ilk JavaScript dersinden başlayarak, document.write() komutu ile HTML dokümanlarına yazı eklemeyi öğrenmiştik.
Doküman Nesnesinin İçeriğini Değiştirmek
Doküman nesnenin içeriğini değiştirmek için innerHTML kullanılır. Önce doküman id="…" parametresi ile tanımlanır. Tanımlanan doküman dokümantanımı.innerHTML ile içerik değiştirilir:
<html>
<head>
<title>InnerHTML</title>
<script language="JavaScript">
function cikis()
{
ilan.innerHTML="Barımızdan çıkış 50 milyon TL!!!"
ilan.style.color="blue"
}
function giris()
{
ilan.innerHTML="Barımıza giriş bedavadır."
ilan.style.color="black"
}
</script>
</head>
<body>
<h1 id="ilan" onmouseover="cikis()" onmouseout="giris()" >Barımıza giriş bedavadır.</h1>
</body>
</html>
[Sayfayı göster] [Temizle] [İlk haline getir]
Doküman Başlığını Belirlemek
HTML'de <title> komutu ile sayfa başlığını belirliyorduk. Sayfa başlığını değiştirmek için document.title komutunu kullanacağız.
document.title komutu, sayfa başlığı değerini taşıyor. Bu değeri değiştirdiğimizde sayfa başlığı da değişir.
<html>
<head>
<title>Sayfa Başlığını Değiştirmek</title>
</head>
<body>
<p>Sayfa başlığı: <b><script language="JavaScript">document.write(document.title)</script></b></p>
</body>
</html>
[Sayfayı göster] [Temizle] [İlk haline getir]
Bu örnek biraz basit oldu ama document.title komutunun ne işe yaradığını gösteriyor. Form araçları sayfasından sonra sayfa başlığını ziyaretçiye yazdırabiliriz. Veya saat bilgisini başlığa yansıtabiliriz.
Doküman Nesnesini Türünü Belirlemek
Daha önce belirttiğimiz gibi doküman nesnesi HTML'in herhangi bir doküman nesnesi olabilir: <p>, <h1>, <div>, vb. Nesne ne olursa olsun id parametresiyle isimlendirerek o nesne içeriğine dilediğimiz komutları verebiliriz.
Peki elimizde id ile verdiğimiz ismi kullanarak, nesnenin ne olduğunu sayfada gösterebilir miyiz? (Bazen oldukça işe yarıyor.) O nesnenin ne olduğunu bilmek istersek getElementById().tagName komutunu kullanırız.
<html>
<head>
<title>getElementById() Kullanımı</title>
<script language="JavaScript">
function bul(metin)
{
var x=document.getElementById(metin)
alert("Ben bir <" + x.tagName + "> elemanıyım")
}
</script>
</head>
<body>
<h1 id="eleman1" onclick="bul('eleman1')">Bana tıklarsanız, hangi HTML nesnesi olduğumu görürsünüz!!!</h1>
<h2 id="eleman2" onclick="bul('eleman2')">Bana tıklarsanız, hangi HTML nesnesi olduğumu görürsünüz!!!</h2>
<h3 id="eleman3" onclick="bul('eleman3')">Bana tıklarsanız, hangi HTML nesnesi olduğumu görürsünüz!!!</h3>
<h4 id="eleman4" onclick="bul('eleman4')">Bana tıklarsanız, hangi HTML nesnesi olduğumu görürsünüz!!!</h4>
<p id="eleman5" onclick="bul('eleman5')">Bana tıklarsanız, hangi HTML nesnesi olduğumu görürsünüz!!!</p>
<div id="eleman6" onclick="bul('eleman6')">Bana tıklarsanız, hangi HTML nesnesi olduğumu görürsünüz!!!</div>
</body>
</html>
[Sayfayı göster] [Temizle] [İlk haline getir]
Arka Plan Rengini Değiştirmek
Arka plan rengini değiştirmek için document.bgcolor komutunu kullanırız.
<html>
<head>
<title>Arka Plan Renkleri</title>
<script language="JavaScript">
function renklendir(n)
{
switch(n)
{
case 1: document.bgColor="red"
break
case 2: document.bgColor="yellow"
break
case 3: document.bgColor="blue"
break
case 4: document.bgColor="orange"
break
case 5: document.bgColor="green"
break
case 6: document.bgColor="crimson"
break
default: document.bgColor="white"
break
}
}
</script>
</head>
<body>
<a href="#" onclick="renklendir(1)">Kırmızı</a><br /><br />
<a href="#" onclick="renklendir(2)">Sarı</a><br /><br />
<a href="#" onclick="renklendir(3)">Mavi</a><br /><br />
<a href="#" onclick="renklendir(4)">Turuncu</a><br /><br />
<a href="#" onclick="renklendir(5)">Yeşil</a><br /><br />
<a href="#" onclick="renklendir(6)">Bordo</a><br /><br />
<a href="#" onclick="renklendir(7)">Beyaz</a><br /><br />
</body>
</html>
kaynak: ordan burdan
Tablo Biçimi
sayfasında sınır çizgileri ile ilgili öğrendiğimiz parametreleri kullanabiliriz. Örnek olması açısından bu parametrelerin bir kısmını içeren bir uygulama geliştirelim:
<html>
<head>
<title>Tablo parametreleri ve özellikleri</title>
<script language="JavaScript">
function cerceve(x,y)
{
switch(x)
{
case 1: tablo.frame=y;yazi1.innerHTML="frame: "+y; break
case 2: tablo.rules=y;yazi2.innerHTML="rules: "+y; break
tablo.x
}
}
</script>
</head>
<body>
Tablonun hücrelerine tıklayarak istediğiniz parametre değerini atayın<br><br>
<table id="tablo" border="1" bordercolor="black" cellspacing="0" cellpadding="0" width="720">
<tr>
<td onclick="cerceve(1,'above')"><b>frame=</b><em>"above"</em></td>
<td onclick="cerceve(1,'below')"><b>frame=</b><em>"below"</em></td>
<td onclick="cerceve(1,'vsides')"><b>frame=</b><em>"vsides"</em></td>
<td onclick="cerceve(1,'hsides')"><b>frame=</b><em>"hsides"</em></td>
</tr><tr>
<td onclick="cerceve(1,'rhs')"><b>frame=</b><em>"rhs"</em></td>
<td onclick="cerceve(1,'lhs')"><b>frame=</b><em>"lhs"</em></td>
<td onclick="cerceve(1,'box')"><b>frame=</b><em>"box"</em></td>
<td onclick="cerceve(1,'border')"><b>frame=</b><em>"border"</em></td>
</tr><tr>
<td onclick="cerceve(1,'void')"><b>frame=</b><em>"void"</em></td>
<td onclick="cerceve(2,'rows')"><b>rules=</b><em>"rows"</em></td>
<td onclick="cerceve(2,'cols')"><b>rules=</b><em>"cols"</em></td>
<td onclick="cerceve(2,'all')"><b>rules=</b><em>"all"</em></td>
</tr><tr>
<td onclick="cerceve(2,'groups')"><b>rules=</b><em>"groups"</em></td>
<td onclick="cerceve(2,'none')"><b>rules=</b><em>"none"</em></td>
<td> </td>
<td> </td>
</tr></table><br><br>
<a id="yazi1">frame:</a><br>
<a id="yazi2">rules:</a>
</body>
</html>
[Sayfayı göster] [Temizle] [İlk haline getir]
Bu uygulamayla frame ve rules parametre kombinasyonlarını oluşturabiliyoruz. HTML ve CSS derslerinde bunun gibi daha birçok parametre ve stil özelliği görmüştük. Hepsini; DHTML dersindeki DOM başlığı altında anlatıldığı gibi, uygulayabiliyoruz.
Satır Dizisi ve Satır Komutları
Tablo satırlarını tabloismi.rows(satır no) dizisi ile bir tanımlayabiliyoruz. Örneğin beyaztablo.rows(0) komut ifadesiyle beyaztablo isimli tablonun birinci satırını belirtmiş oluyoruz. Satırların yüksekliğini height komutu ile, satırların yatay hizalama şeklini align komutu ile belirleyebiliriz. (Bunu daha önce olduğu gibi, <tr> koduna id parametresi ile isim verdikten sonra parametre atayarak da yapabiliriz.)
<html>
<head>
<title>rows dizisi</title>
<script language="JavaScript">
function satir()
{
var x=document.forms.form_satir.yuksek.selectedIndex
var y=document.forms.form_satir.hiza.selectedIndex
var z=document.forms.form_satir.satir_no.selectedIndex
tablo.rows[z].height=document.forms.form_satir.yuksek.options[x].text
tablo.rows[z].align=document.forms.form_satir.hiza.options[y].text
}
</script>
</head>
<body>
Aşağıdaki komutları ve bu komutları uygulayacağınız satır numarasını seçin ve düğmeye basın:<br>
<form name="form_satir">
height:
<select name="yuksek">
<option>10
<option>25
<option>50
<option>75
<option>100
</select>
align:
<select name="hiza">
<option>left
<option>center
<option>right
</select>
Satır no:
<select name="satir_no">
<option>1
<option>2
<option>3
<option>4
<option>5
</select><br><br>
<input type="button" value="bas" onclick="satir()"><br>
</form>
<table id="tablo" border="1" cellspacing="2" cellpadding="2" width="500">
<tr><td>satır1sütun1</td><td>satır1sütun2</td></tr>
<tr><td>satır2sütun1</td><td>satır2sütun2</td></tr>
<tr><td>satır3sütun1</td><td>satır3sütun2</td></tr>
<tr><td>satır4sütun1</td><td>satır4sütun2</td></tr>
<tr><td>satır5sütun1</td><td>satır5sütun2</td></tr>
</table><br><br>
</body>
</html>
[Sayfayı göster] [Temizle] [İlk haline getir]
Uygulamada height ve align komutlarını kullandık, ancak rows dizisine bgcolor, width, vb. parametreleri komut olarak atayamazsınız, sonuç vermez.
Tabloya satır eklemek ve tablodan satır çıkarmak için deleteRow(satır no) (satır sil) ve insertRow(satır no) (satır ekle) komutlarını kullanırız. beyaztablo.deleteRow(2) kodu ile beyaztablo isimli tablonun 3. satırını sileriz. beyaztablo.insertRow(2) komutu 3. satırın yukarısına satır eklemeye yarar.
<html>
<head>
<title>rows dizisi</title>
<script language="JavaScript">
function satir_sil()
{
var x=tablo.rows.length - 1
if (x != 0) tablo.deleteRow(x)
}
function satir_ekle()
{
var y=tablo.rows.length
tablo.insertRow(y)
}
</script>
</head>
<body>
<form>
<input type="button" value="Satır Ekle" onclick="satir_ekle()">
<input type="button" value="Satır Sil" onclick="satir_sil()"><br>
</form><br>
<table id="tablo" border="1" cellspacing="2" cellpadding="2" width="500">
<tr><td>satır1sütun1</td><td>satır1sütun2</td></tr>
<tr><td>satır2sütun1</td><td>satır2sütun2</td></tr>
<tr><td>satır3sütun1</td><td>satır3sütun2</td></tr>
<tr><td>satır4sütun1</td><td>satır4sütun2</td></tr>
<tr><td>satır5sütun1</td><td>satır5sütun2</td></tr>
</table><br><br>
</body>
</html>
[Sayfayı göster] [Temizle] [İlk haline getir]
Uygulamada da görüldüğü üzere insertRow() ile sadece satır ekleriz ama satırların içine hücre ekleyemeyiz.
Hücre Dizisi ve Hücre Komutları
Tabloda önce satırlar, sonra satırların içinde hücreler tanımlanır. Tablodaki satırları rows dizisi ile ifade edilebileceğini görmüştük, şimdi de satırlardaki hücreleri cells dizisi ile ifade edeceğiz. cells dizisi rows dizisindeki hücreleri ifade ediyor: tablo_adi.rows[1].cells[0] kodu ile tablodaki ikinci satırın ilk hücresini belirtmiş oluruz.
rows dizisine align ve height parametrelerini komut olarak atayabiliyorduk, cells dizisine komut olarak atanabilen parametreler şunlardır: align, valign, colSpan ve rowSpan. Aşağıdaki uygulama ile colspan parametresinin cells dizisine nasıl komut olarak atandığını göreceğiz:
<html>
<head>
<title>Colspan Parametre Komutu</title>
<script language="JavaScript">
function hucre()
{
var x=document.forms.form_hucre.secenek.selectedIndex
tablo.rows[0].cells[0].colSpan=document.forms.form_hucre.secenek.options[x].text
tablo.rows[0].cells[1].colSpan=document.forms.form_hucre.secenek.options[4-x].text
}
</script>
</head>
<body>
<form name="form_hucre">
Hücre1 için <b>colspan</b>:
<select name="secenek">
<option>1
<option>2
<option>3
<option>4
<option>5
</select>
<input type="button" value="bas" onclick="hucre()"><br>
</form>
<table id="tablo" border="1" cellspacing="2" cellpadding="2" width="500">
<tr><td colspan="3">hücre1</td><td colspan="3">hücre2</td></tr>
<tr>
<td>hücre3</td><td>hücre4</td>
<td>hücre5</td><td>hücre6</td>
<td>hücre7</td><td>hücre8</td>
</tr></table>
</body>
</html>
[Sayfayı göster] [Temizle] [İlk haline getir]
kaynak: ordan burdan
Sayfadaki form nesnelerini, name parametresiyle tanımladığımız isimler aracılığıyla çağırabiliriz: document.forms.yeniform gibi. Form komutlarını da bu kök üzerine yerleştiririz. Form komutlarını topluca listeledim.
action Formun işlem sayfasına girmesini sağlar.
method Formun metodunu girer (post/get).
reset() Form bilgilerini siler (resetler).
submit() Form bilgilerini girer.
acceptCharset İstemcinin (server'ın) desteklediği karakter listesini girer.
elements Form elemanlarını bir dizi haline getirerek girer.
Bu komutlar üzerinde şimdilik fazla durmayalım, çünkü henüz bu tip bir uygulama yapmaya bilgilerimiz yeterli değil. ASP ve CGI derslerimizde bu komutları fazlasıyla kullanacağız. Yine de bazılarının işlevini sizler anlamışsınızdır. Çoğu okuyucunun Ziyaretçi Defteri, Bilgi Giriş Formu, Tartışma Forumu, Arama Motoru yapmak için sabırsızlandığını hatta için için henüz göstermediğim için bana kızdığını biliyorum. 
Ama şunu belirtmeliyim ki bu tip araçları sadece HTML ve JavaScript ile yapamazsınız. JavaScript bilgileri saklamaz, depolamaz, veri tabanı oluşturmaz; sadece sayfa yüklüyken değişkenlerinde veri tutabilir. Herşeyi hemen yapmak isteyen arkadaşlar birazcık sabretsin ve bu sayfanın altındaki bilgileri öğrenmeye çalışsınlar. CGI ve ASP derslerinde acısını çıkaracağız ama önce bir script dilini çok iyi öğrenmek gerekir.
Bilgi Giriş Elemanları
Bilgi giriş elemanlarının (düğme, metin kutusu, kontrol kutusu,vb.) yapısını HTML derslerimizde görmüştük. O sayfada form araçlarının parametreleri de tanıtılmıştı. İstersek o parametreleri JavaScript koduyla tanımlayabiliriz. Örneğin metin kutusunun uzunluğunu karakter cinsinden belirleyen size parametresini JavaScript kodlarıyla tanımlayalım:
<html>
<head>
<title>Size Parametresi,</title>
<script language="JavaScript">
function uzunluk(x)
{
document.forms.Form1.mesaj.size=x
}
</script>
</head>
<body>
<form name="Form1">
Notunuz:<input name="mesaj"><br><br>
<table cellpadding="0" cellspacing="0" border="0" width="400"><tr>
<td><input type="button" onclick="uzunluk(10)" value="Kısa Not"></td>
<td><input type="button" onclick="uzunluk(40)" value="Orta Not"></td>
<td><input type="button" onclick="uzunluk(70)" value="Uzun Not"></td>
</tr></table>
</form>
</body>
</html>
[Sayfayı göster] [Temizle] [İlk haline getir]
size parametresi öğrendiklerimizden sadece bir tanesi. Diğer parametreleri de bu şekilde kullanabiliriz. Örneğin maksimum karakter girişini belirlemek için document.forms.Form1.mesaj.maxlength kodundan yararlanabiliriz. Gerisini sizlerin yaratıcılığına bırakayım.
Hatırlarsanız, bir de value parametresi vardı. Bu parametreyle metin kutusuna yazı yazdırabiliyorduk. JavaScript kodlarıyla bu parametreyi, metin kutusuna yazılı olan ifadeyi değişkenlere aktarmak için kullanabiliriz:
<html>
<head>
<title>Form Sayfası,</title>
<script language="JavaScript">
function gir()
{
bilgi1.innerHTML=document.forms.kimlik.veri1.value
bilgi2.innerHTML=document.forms.kimlik.veri2.value
bilgi3.innerHTML=document.forms.kimlik.veri3.value
bilgi4.innerHTML=document.forms.kimlik.veri4.value
bilgi5.innerHTML=document.forms.kimlik.veri5.value
}
</script>
</head>
<body>
<form name="kimlik">
Adınız:<input name="veri1">
SoyAdınız:<input name="veri2"><br>
Yaşınız:<input name="veri3">
Cinsiyetiniz:<input name="veri4">
Telefonunuz:<input name="veri5"><br><br>
<input type="button" value="Bilgileri Tabloya Gir" onclick="gir()"><br><br>
<table cellpadding="5" cellspacing="0" border="1">
<tr><td width="100">Adı:</td><td id="bilgi1" width="300"> </td></tr>
<tr><td>SoyAdı:</td><td id="bilgi2"> </td></tr>
<tr><td>Yaşı:</td><td id="bilgi3"> </td></tr>
<tr><td>Cinsiyeti:</td><td id="bilgi4"> </td></tr>
<tr><td>Telefonu:</td><td id="bilgi5"> </td></tr>
</table>
</form>
</body>
</html>
[Sayfayı göster] [Temizle] [İlk haline getir]
Bu uygulamayla bir Bilgi Giriş Formu yaptık aslında. Ama bir farkla, girdiğimiz bilgiler pencere kapatılınca yok oluyor. Buradan şu sonucu çıkartabilirsiniz: JavaScript bilgileri aktarmaya ve dönüştürmeye yarar ancak o bilgileri saklamaya yaramaz. Bunun için veri tabanı gereklidir ve bu veri tabanını CGI ve ASP derslerimizde oluşturacağız. Sanırım şimdi daha iyi anlaşıldı.
Veri tabansız da birçok güzel şey yapılabiliniyor. Son uygulamamızı anlayan arkadaşlar rahatlıkla basit bir hesap makinesi yapabileceklerdir. Normal metin kutusu ve düğmeler yerine resimler de kullanılabilinir. İsterseniz deneyin, zor bir tarafı yok. Ders sayfalarının sonunda yer alan Hesap Makineleri örneklerine de bakabilirsiniz.
Kontrol kutularını seçmek için checked parametresini true değeri verebiliriz veya bunu JavaScript ile document.forms.form1.kontrolkutusu1.checked=true şeklinde ifade edebiliriz. Hatırlayacağınız üzere; radyo kutusunun işlevi gereği sadece birinin seçilmesi için, her kutuya aynı ismi veriyorduk. Bu durumda yukarıda yazıldığı gibi name özelliğini kullanamayız ama id parametresini kullanarak bu sorunu halledebiliriz. Aşağıdaki uygulamaya bakalım.
<html>
<head>
<title>Bundylogy Sorusu,</title>
<script language="JavaScript">
function cevap()
{
if (document.soru.rad3.checked==true) paragraf.innerHTML="En doğru cevabı işaretlediniz. Bravooo!"
else paragraf.innerHTML="Doğru ama en doğru değil, Al Bundy mantığıyla düşünün."
}
</script>
</head>
<body>
<form name="soru">
<b>Al Bundy soruyor:</b>Marcy Darcy kimdir? (Doğruluk derecesi en yüksek olanı işaretleyin lütfen…)<br>
<label for="rad1">
<input type="radio" id="rad1" name="radyo"> Part time çalışan bir paperboy'dur.
</label><br>
<label for="rad2">
<input type="radio" id="rad2" name="radyo"> Jefferson Darcy'nin kocasıdır.
</label><br>
<label for="rad3">
<input type="radio" id="rad3" name="radyo"> Bir tavuktur.
</label><br>
<label for="rad4">
<input type="radio" id="rad4" name="radyo"> Materyalist ruhu gelişkin bir banka çalışanıdır.
</label><br>
<label for="rad5">
<input type="radio" id="rad5" name="radyo"> Bundy'lerin komşusudur.
</label><br>
<input type="button" value="Değerlendir" onclick="cevap()">
<p id="paragraf">Doğru seçeneği işaretlediğinizden eminseniz, yukarıdaki düğmeye basın.</p> </form>
</body>
</html>
[Sayfayı göster] [Temizle] [İlk haline getir]
Sözün özü, tüm parametreleri komut haline getirebiliyoruz. Bunun yanısıra Form Elemanları için kullanılan başka komutlar da var:
focus() Tanımlanan bilgi giriş aracına odaklanmayı sağlar.
blur() Tanımlanan bilgi giriş aracının odak halinden çıkmasını sağlar.
click() Tanımlanan bilgi giriş aracını tıklamaya yarar.
select() Tanımlanan bilgi giriş aracının seçili hale gelmesini sağlar..
Tüm bu komutların yer aldığı öğretici bir uygulama yapalım:
<html>
<head>
<title>Bilgi giriş eleman komutları,</title>
<script language="JavaScript">
function komut(x)
{
switch(x)
{
case 1: document.form1.metinkutusu.select()
break
case 2: document.form1.metinkutusu.focus()
break
case 3: document.form1.metinkutusu.blur()
break
case 4: document.form1.dugme.click()
}
}
</script>
</head>
<body>
<form name="form1">
<input name="metinkutusu" value="metin kutusu">
<input type="button" name="dugme" value="uyarı düğmesi" onclick="alert('Alarm!!!')"><br><br>
<input type="button" value="Metin kutusuna odaklan" onclick="komut(2)"><br>
<input type="button" value="Metin kutusundaki yazıyı seç" onclick="komut(1)"><br>
<input type="button" value="Metin kutusunu seçili halden çıkar" onclick="komut(3)"><br>
<input type="button" value="Uyarı düğmesine bas" onclick="komut(4)"><br>
</form>
</body>
</html>
[Sayfayı göster] [Temizle] [İlk haline getir]
Bu uygulamamızı irdeleyelim biraz: select() komutu form aracını seçili hale getiriyor ve odaklıyor. Yani ayrıca odaklamamıza gerek kalmıyor, üzerine blur() komutunu uygularsak, odaklanma kalkıyor ama seçili hal devam ediyor tabi.
Seçenek Kutusu
HTML derslerinde seçenek kutusunun nasıl görüntülendiği anlatılmıştı ama nasıl kullanıldığı üzerine birşey söylenilmemişti. Şimdi söyleyelim. Seçenek kutusunda kullanıcının işaretlediği seçeneği selectedIndex komutuyla indeks (sıra) numarası cinsinden ifade ediyoruz:
<html>
<head>
<title>Seçenek Kutusu İndeksleri,</title>
<script language="JavaScript">
function sec()
{
var x=document.sira_no.yazar.selectedIndex
alert(x+1)
}
</script>
</head>
<body>
<form name="sira_no">
<select name="yazar"
<option>Mario Llosa Vargas
<option>Amin Maalouf
<option>John Steinback
<option>Ursula K. Leguin
<option>Panait Istrati
</select>
<input type="button" value="Kaçıncı Seçenek" onclick="sec()">
</form>
</body>
</html>
[Sayfayı göster] [Temizle] [İlk haline getir]
Bu uygulama, kullanıcının seçtiği seçeneğin sıra numarasını gösteriyor. selectedIndex komutu ile seçeneğe 0 (sıfır) değeri verdiğinden, uygulamada sıra numarasını x+1 şeklinde ifade ettik.
Seçenek kutusundaki seçenekler options isimli bir dizi oluşturur. İlk seçenek options[0] şeklinde belirtilir. options[0].text ise, ilk seçeneği metinsel değer olarak ifade eder. Önceki uygulamada kullanıcının seçtiği seçeneğin sıra numarasını ifade ediyorduk. Sıra numarası yerine, seçeneği doğrudan nasıl ifade edebiliriz?
<html>
<head>
<title>Seçenek Kutusu: Seçilen Seçeneği Gösterme,</title>
<script language="JavaScript">
function sec()
{
var x=document.secenek.yazar.selectedIndex
var y=document.secenek.yazar.options[x].text
alert(y)
}
</script>
</head>
<body>
<form name="secenek">
<select name="yazar"
<option>Mario Llosa Vargas
<option>Amin Maalouf
<option>John Steinback
<option>Ursula K. Leguin
<option>Panait Istrati
</select>
<input type="button" value="Hangi Seçenek" onclick="sec()">
</form>
</body>
</html>
[Sayfayı göster] [Temizle] [İlk haline getir]
Ne yaptık? Kullanıcının seçtiği seçeneği sıra sayısı cinsinden ifade ettik. (selectedIndex ile) Sonra seçilen sıra numarasını options dizini ve text komutu sayesinde metinsel değere dönüştürdük. text yerine index komutu kullansaydık, yine sıra numarası elde edecektik.
Dilersek text komutunu seçeneklerin metnini değiştirmek için kullanabiliriz.
<html>
<head>
<title>Seçenek Kutusu Seçenek Değiştirme,</title>
<script language="JavaScript">
function secenekekle()
{
var x=document.forms.secenek.adsoyad.value
var y=document.secenek.yazar.selectedIndex
document.secenek.yazar.options[y].text=x
}
</script>
</head>
<body>
<form name="secenek">
<select name="yazar"
<option>Mario Llosa Vargas
<option>Amin Maalouf
<option>John Steinback
<option>Ursula K. Leguin
<option>Panait Istrati
</select><br>
Yazar ismi:
<input name="adsoyad" size="80">
<input type="button" value="Seçeneği Değiştir" onclick="secenekekle()">
</form>
</body>
</html>
[Sayfayı göster] [Temizle] [İlk haline getir]
Seçenek kutusunu düğmeyle beraber kullanmak zorunda değiliz. Seçenek kutusunda başka bir seçeneği işaretlediğimiz zaman işlem yapılacaksa onchange olayı kullanılmalıdır.
<html>
<head>
<title>Seçenek Kutusu: OnChange Olayı,</title>
<script language="JavaScript">
function degistir()
{
var x=document.secenek.yazar.selectedIndex
yazi.innerHTML=document.secenek.yazar.options[x].text
}
</script>
</head>
<body>
<form name="secenek" onchange="degistir()">
<select name="yazar">
<option>Mario Llosa Vargas
<option>Amin Maalouf
<option>John Steinback
<option>Ursula K. Leguin
<option>Panait Istrati
</select><br>
<p id="yazi">Seçeneği değiştiriniz…</p>
</form>
</body>
</html>
kaynak: ordan burdan
Gelişmiş programlarda (MS Office, Adobe Photoshop vb.) tıklamak ile shift'e basarak tıklamak arasında fark vardır. Eğer bu farkı web sayfalarınıza taşımak istiyorsanız event.shiftKey olay komutunu kullanabilirsiniz. Bu komut shift tuşuna basılıp, basılmadığını gösterir; eğer onclick durumunda event.shiftkey kodu kullanırsanız, kullanıcının tıkladığında shift'e basıp basmadığını kontrol etmiş olursunuz. Aynı şekilde bu kodu onmouseover durumunda kullandığınızda, fareyle nesnenin üzerine gelindiğinde shift'e basılıp, basılmadığını kontrol etmiş oluruz. Bu çeşit fare tuş kombinasyonları türetebiliriz.
<html>
<head>
<title>Tuş fare kombinasyonları,</title>
<style>
table {visibility:hidden} </style>
<script language="JavaScript">
function rubai()
{
if (event.shiftKey==0)
{
hayyam.style.visibility="visible"
yazi.innerHTML="Ey kör! Bu yer, bu gök, bu yıldızlar boştur boş!<br>Bırak onu bunu da gönlünü hoş tut hoş!<br>Şu durmadan kurulup dağılan evrende<br>Bir nefestir alacağın, o da boştur boş!"
}
else
{
var yenisayfa = window.open("", "Yeni_Sayfa", "toolbar=no,location=no,directories=no, status=no, menubar=no,scrollbars=no, resizable=no,copyhistory=no,width=400, height=120")
yenisayfa.document.write("Ey kör! Bu yer, bu gök, bu yıldızlar boştur boş!<br>Bırak onu bunu da gönlünü hoş tut hoş!<br>Şu durmadan kurulup dağılan evrende<br>Bir nefestir alacağın, o da boştur boş!")
}
}
</script>
</head>
<body>
<form>
<p>Düğmeye normal tıklamakla, <b>Shift</b>'e basarak tıklamak arasında fark var.</p>
<input type="button" value="Ömer Hayyam" onclick="rubai()">
</form>
<center><table id="hayyam" cellpadding="5" cellspacing="0" border="0" width="400" bgcolor="#D0BB82">
<tr><td id="yazi">Rubai</td></tr></table></center>
</body>
</html>
[Sayfayı göster] [Temizle] [İlk haline getir]
Bu uygulamamızda onclick olayında event.shiftKey kodu kullandık, böylece fare ile shift tuşunun beraber basılmasına kod yazdık. event.shiftKey'e 1/0 gibi true/false değerleri verebiliriz. Benzer şekilde Alt ve Ctrl tuşları için şu olay kodlarını kullanabilirsiniz: altKey, ctrlKey.
kaynak: ordan burdan
<html>
<head>
<title>Pencere koordinatları,</title>
<script language="JavaScript">
İmlecin hangi yatay ve düşey koordinatlarda olduğunu belirlemek için clientX, clientY veya offsetX, offsetY veya x, y olay komutlarından yararlanılır.
function imlec()
{
var a=event.x
var b=event.y
yazi.innerHTML="Pencere Koordinatları = (" + a + ";" + b + ")"
}
</script>
</head>
<body onclick="imlec()">
<h3 id="yazi">Fareyle sayfanın üzerine tıklayınız.</h3>
</body>
</html>
Bu kodların hepsi imlecin, pencerenin sol üst köşesine olan yatay ve düşey mesafeyi piksel cinsinden vermektedir. Eğer pencerenin değil de ekranın sol üst köşesine olan yatay ve düşey mesafeyi edinmek istiyorsak, screenX, screenY komutlarını kullanırız.
<html>
<head>
<title>Ekran koordinatları,</title>
<script language="JavaScript">
function imlec()
{
var a=event.screenX
var b=event.screenY
yazi.innerHTML="Ekran Koordinatları = (" + a + ";" + b + ")"
}
</script>
</head>
<body onclick="imlec()">
<h3 id="yazi">Fareyle sayfanın üzerine tıklayınız.</h3>
</body>
</html>
kaynak: ordan burdan