Seksi ve Güncel blog: javascript

javascript etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

27 Ekim 2012 Cumartesi

Java Script Tablo

HTML derslerinde tablolarla ilgili sayfalarımızda bir çok parametre öğrenmiştik. Ayrıca CSS derslerinde sınır çizgileri, dışkenar ve içkenar boşlukları hakkındaki sayfalarımızda birçok özellik yer alıyordu. Bu parametreleri ve stil özelliklerini id ile isimlendirilmiş tüm tablolar üzerinde JavaScript kodlarıyla uygulayabiliyoruz.

Tablo Çerçeveleri HTML derslerindeki

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:

Javascript:
<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>

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.)

Javascript:
<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>

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.

Javascript:
<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>

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:

Javascript:
<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>

KAYNAK: http://www.bilgisayardershanesi.com/bilgisayar_dersleri/java-script-tablo.html

Java Script Sayfa Nesnesi

Sayfa nesnesi, hiyerarşide pencereden sonra geliyor. Bir sayfa nesnesi form, resim gibi birçok başka nesneyi içerir. Eğer başka bir pencere söz konusu değilse, sayfa komutlarımız document. ile başlar ama uygulama birden çok pencere içeriyorsa pencere isimlerini de belirtmek gerekir: yenipencere.document. gibi.

Elemanlar Dizisi Hiyerarşi sıralamasında sayfaların elemanları olduğunu görmüştük (DHTML sayfasındaki arakladığım grafiği hatırlayın). Bu elemanlar (form, resim) sayfa üzerinde bir dizi oluşturur. Örneğin sayfa üzerindeki formlar document.forms dizisi ile ifade edilir. Aynı şekilde sayfa üzerindeki resimler document.images dizisi halinde ifade edilebilir. Aşağıdaki uygulamada sayfa üzerinde kaç tane form olduğunu bulmak için, diziye length kodu atanıyor. Bu kodu Diziler sayfamızdan hatırlıyoruz, dizinin eleman sayısını buluyor.

Javascript:
<html>
<head>
<title>sayfa Elemanları,</title>
<script language="JavaScript">

function say()
{
alert("sayfada " + document.forms.length + " tane form vardır.")
}

</script>
</head>
<body onload="say()">

<form name="Form1">
Adı:<input><br>
SoyAdı:<input><br>
</form>
<form name="Form2">
Adresi:<input><br>
Telefonu:<input><br>
</form>
<form name="Form3">
E-mail:<input><br>
URL:<input><br>
</form>
<form name="Form4">
Mesleği:<input><br>
</form>

</body>
</html>

Aynı şekilde forumda kaç resim olduğunu görmek için document.images.length kodunu kullanabilirdik. Daha önce dediğimiz gibi forms ve images dediklerimiz, birer dizidir(array). Yaptığımız şey, bu dizinin eleman sayısını bulmak. Ayrıca istediğimiz elemanların tanımlanmış parametrelerini bu dizi sayesinde öğrenebiliyoruz. Bunun için dizinin elemanını ve sonra parametre kodunu yazıyoruz: mesela document.images[3].src kodu ile 4. resmin kaynak adresini edinmiş oluruz. Aşağıdaki uygulamada sayfa üzerindeki formların tanımlanmış bgcolor ve name parametrelerini öğreniyoruz.

Javascript:
<html>
<head>
<title>sayfa Elemanları,</title>
<script language="JavaScript">

function say()
{
var isim,renk
isim = "Birinci formun ismi: "+document.forms[0].name
isim += "n İkinci formun ismi: "+document.forms[1].name
isim += "n Üçüncü formun ismi: "+document.forms[2].name
isim += "n Dördüncü formun ismi: "+document.forms[3].name
renk = "Birinci formun rengi: "+document.forms[0].bgcolor
renk += "n İkinci formun rengi: "+document.forms[1].bgcolor
renk += "n Üçüncü formun rengi: "+document.forms[2].bgcolor
renk += "n Dördüncü formun rengi: "+document.forms[3].bgcolor
alert(isim)
alert(renk)
}

</script>
</head>
<body onload="say()">

<form name="AdSoyad" bgcolor="red">
Adı:<input><br>
SoyAdı:<input><br>
</form>
<form name="AdresTel" bgcolor="green">
Adresi:<input><br>
Telefonu:<input><br>
</form>
<form name="EmailURL" bgcolor="pink">
E-mail:<input><br>
URL:<input><br>
</form>
<form name="Meslek" bgcolor="yellow">
Mesleği:<input><br>
</form>

</body>
</html>

Form ve resim elemanları değil, başka sayfa dizilerimiz de var. Örneğin anchors dizisi ile sayfa üzerindeki anchor`ları () tanımlayabiliyoruz. Veya aynı şekilde links dizisi ile sayfadaki linklerin dizisini, applets ile sayfadaki applet`lerin dizisini oluşturabiliyoruz.

Sayfa Bilgileri Yapacağımız yazılımda, sayfayla ilgili bazı bilgileri kullanabiliriz. Sayfanın başlığını kodla öğrenmek için title sayfa kodunu kullanırız. Şöyle kısaca listeleyim:

title Sayfanın başlığını metinsel olarak ifade eder.

document.title

URL Sayfanın URL adresini metinsel olarak ifade eder.

document.URL

referrer Sayfanın refere edilen URL adresini metinsel olarak ifade eder.

document.referrer

domain Sayfanın domain ismini metinsel olarak ifade eder.

document.domain

cookie Sayfanın cookie`lerini metinsel olarak ifade eder.

document.cookie

body Sayfanın gövde bölümünü metinsel olarak ifade eder.

document.body

Javascript:
<html>
<head>
<title>Sayfa bilgileri,</title>
<style>table {visibility:hidden}</style>
<script language="JavaScript">

function sayfa()
{
tablo.style.visibility="visible"
baslik0.innerHTML=document.title
baslik1.innerHTML=document.URL
baslik2.innerHTML=domain
baslik3.innerHTML=document.cookie
baslik4.innerHTML=document.body
baslik5.innerHTML=document.referrer
}

</script>
</head>
<body>

<form>
<input type="button" value="Sayfa Bilgileri" onclick="sayfa()">
</form>
<table id="tablo" cellpadding="3" cellspacing="0" border="1" bgcolor="#d5c481">
<tr><td>Sayfanın başlığı:</td><td>
<a id="baslik0">Görünmüyor</a></td></tr>
<tr><td>Sayfanın URL adresi:</td><td>
<a id="baslik1">Görünmüyor</a></td></tr>
<tr><td>Sayfanın domain ismi:</td><td>
<a id="baslik2">Görünmüyor</a></td></tr>
<tr><td>Sayfanın cookie`si:</td><td>
<a id="baslik3">Görünmüyor</a></td></tr>
<tr><td>Sayfanın gövdesi:</td><td>
<a id="baslik4">Görünmüyor</a></td></tr>
<tr><td>Refere URL adresi:</td><td>
<a id="baslik5">Görünmüyor</a></td></tr>
</table>
</body>
</html>

Bu uygulamamızda bazı bilgiler "" değerini taşıdığı için tabloda yer almıyor.

Yeni Sayfa Açma Aynı pencerede başka sayfa açmak için document.open() sayfa kodunu kullanırız. Bu bomboş bir sayfa demek, bu sayfayı HTML kodlarıyla doldurmak için write sayfa kodu veya writeln sayfa kodundan yararlanırız. Bunu JavaScript derslerimizin başından beri yapıyorduk zaten. writeln kodunun write kodundan farkı en sona satır koyması. Kısa bir uygulama geliştirelim.

Javascript:
<html>
<head>
<title>Sayfa bilgileri,</title>
<script language="JavaScript">

function yenisayfa()
{
var x=document.open()
document.writeln("<html><title>Aha Size Beyaz Sayfa!</title></html>")
}

</script>
</head>
<body>
<form>
<input type="button" value="Beyaz Sayfa Açalım" onclick="yenisayfa()">
</form>
</body>
</html>

KAYNAK: http://www.bilgisayardershanesi.com/bilgisayar_dersleri/java-script-sayfa-nesnesi.html

Java Script Olay Komutları

Daha önceki Olaylar sayfasında, üzerine kod yazacağımız olayları görmüştük:
onclick Fareyle tıklamayı ifade eder.

ondblclick Fareyle çift tıklamayı ifade eder.

onmouseover Farenin imleciyle üzerine gelmeyi ifade eder.

onmouseout Farenin imlecini üzerinden çekmeyi ifade eder.

onmousedown Fare düğmesine basmayı ifade eder.

onmouseup Fare düğmesini bırakmayı ifade eder.

onload Sayfanın yüklenmesini ifade eder.

onunload Sayfanın kapatılmasını ifade eder.

onchange Form aracının değişmesini ifade eder.

onsubmit Form bilgilerinin gönderilmesini ifade eder.

onreset Form bilgilerinin silinmesini ifade eder.

onselect Form aracının seçilmesini ifade eder.

onblur Form aracının pasif hale geçmesini ifade eder.

onfocus Form aracının aktif hale geçmesini ifade eder.

accesskey İstenen karakterin girilmesini ifade eder.

tabindex Nesnelerin işlem sıralamasını numaralandırır.

onkeydown Tuşun basılmasını ifade eder.

onkeyup Tuşun salınmasını ifade eder.

onfocus Tuşun basılıp salınmasını ifade eder.

Bu olaylar yaratıcı web tasarımcılar için yeterli değildir. Başka olaylar oluşturmak için event (olay) komutlarından yararlanılır. Olay komutlarının önüne event. kodu getirilir. Önemli Not: Bu komutlar sadece IE gözatıcıları tarafından desteklenmektedir.

Sağ Tıklama, Sol Tıklama Fareyle sağ tıklanıldığında, bir fonksiyon çağırmak için button (düğme) olay komutu kullanılır. event.button şeklinde yazılır ve sol tıklanırsa 1, sağ tıklanırsa 2 değerini alır.

Javascript:
<html>
<head>
<title>Sağ ve sol tıklama,</title>
<script language="JavaScript">

function tikla()
{
if (event.button==1) yazi.innerHTML="Sol tıkladınız..."
if (event.button==2) yazi.innerHTML="Sağ tıkladınız..."
}

</script>
</head>
<body onmousedown="tikla()">
<a id="yazi">Fareyle sayfanın üzerine tıklayınız.</a>
</body>
</html>

İmlecin Koordinatları İmlecin sayfadaki konumuna göre kod yazmak isteyebiliriz. İ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. Kısa bir uygulama yapalım:

Javascript:
<html>
<head>
<title>Pencere koordinatları,</title>
<script language="JavaScript">

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>

Verdiğimiz diğer kodları da siz deneyin, aynı sonuca ulaşacaksınız. 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.

Javascript:
<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>

Tuş Fare Kombinasyonları 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.

Javascript:
<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>

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: http://www.bilgisayardershanesi.com/bilgisayar_dersleri/java-script-olay-komutlari.html

Java Script Gözatıcı Komutları

Bir önceki sayfada kullanıcının ekran çözünürlüğünü ve renk derinliğini belirleyen ekran kodlarını görmüştük. Aynı şekilde kullanıcının hangi gözatıcıyı (browser) kullandığını ve bu gözatıcının özelliklerini bilmek isteyebiliriz. Bunun için gözatıcı kodları kullanılmaktadır.

Gözatıcı Özellikleri Kullanıcının kullandığı gözatıcının özellikleri hakkında bilgi edinmek için aşağıdaki navigator kodları kullanılır.
appCodeName Kullanılan gözatıcının kod ismini belirler. (örneğin Mozilla)
navigator.appCodeName
appMinorVersion Kullanılan gözatıcı versiyonunun hangi sürümü olduğunu belirler. (örneğin 5.0`ın 0`ı.)
navigator.appMinorVersion
appName Kullanılan gözatıcının ismini belirler. (Örneğin Microsoft Internet Explorer)
navigator.appName
appVersion Kullanılan gözatıcının versiyonunu belirler. (Örneğin 4.0)
navigator.appVersion
browserLanguage Kullanılan gözatıcının dilini gösterir.
navigator.browserLanguage
cookieEnabled Kullanılan gözatıcının cookie (ziyaretçinin öbür girişinde, ziyaretçiyi siteye tanıtan ve ziyaretçinin harddiskine kaydedilen yazılımcık; biz da yapacağız, orada görürsünüz.) kabul edip, etmediğini gösterir.
navigator.cookieEnabled
cpuClass Kullanılan gözatıcının bulunduğu sistemin CPU sınıfını gösterir.
navigator.cpuClass
onLine sistemin on-line olup olmadığını gösterir.
navigator.onLine
platform Kullanılan gözatıcının bulunduğu platformu gösterir. (örneğin Wind32)
navigator.platform
systemLanguage Sistemin dilini gösterir.
navigator.systemLanguage
userLanguage Kullanıcı dilini gösterir.
navigator.userLanguage
userAgent Gözatıcının kodunu ve versiyonunu beraber gösterir.
navigator.userAgent

Bu kodların işe yarayıp, yaramadığını görmek mi istiyorsunuz? O zaman aşağıdaki uygulamaya bakın.

Javascript:
<html>
<head>
<title>Gözatıcı Özellikleri</title>
<style>table {visibility:hidden}</style>
<script language="JavaScript">

function gozatici()
{
tablo.style.visibility="visible"
baslik0.innerHTML=navigator.appCodeName
baslik1.innerHTML=navigator.appMinorVersion
baslik2.innerHTML=navigator.appName
baslik3.innerHTML=navigator.appVersion
baslik4.innerHTML=navigator.browserLanguage
baslik5.innerHTML=navigator.cookieEnabled
baslik6.innerHTML=navigator.cpuClass
baslik7.innerHTML=navigator.onLine
baslik8.innerHTML=navigator.platform
baslik9.innerHTML=navigator.systemLanguage
baslik10.innerHTML=navigator.userLanguage
baslik11.innerHTML=navigator.userAgent
}

</script>
</head>
<body>
<form>
<input type="button" value="Gözatıcı Bilgileri" onclick="gozatici()">
</form>
<table id="tablo" cellpadding="3" cellspacing="0" border="1" bgcolor="#d5c481">
<tr><td>Gözatıcının kod ismi:</td><td>
<a id="baslik0">bilgi</a></td></tr>
<tr><td>Gözatıcının sürümü:</td><td>
<a id="baslik1">bilgi</a></td></tr>
<tr><td>Gözatıcının ismi:</td><td>
<a id="baslik2">bilgi</a></td></tr>
<tr><td>Gözatıcının versiyonu:</td><td>
<a id="baslik3">bilgi</a></td></tr>
<tr><td>Gözatıcının dili:</td><td>
<a id="baslik4">bilgi</a></td></tr>
<tr><td>Gözatıcının cookie kabul durumu:</td><td>
<a id="baslik5">bilgi</a></td></tr>
<tr><td>Sistemin CPU sınıfı:</td><td>
<a id="baslik6">bilgi</a></td></tr>
<tr><td>Sistemin online durumu:</td><td>
<a id="baslik7">bilgi</a></td></tr>
<tr><td>Gözatıcının platformu:</td><td>
<a id="baslik8">bilgi</a></td></tr>
<tr><td>Sistemin varsayılan dili:</td><td>
<a id="baslik9">bilgi</a></td></tr>
<tr><td>Kullanıcı dili:</td><td>
<a id="baslik10">bilgi</a></td></tr>
<tr><td>Gözatıcının kodu ve versiyonu:</td><td>
<a id="baslik11">bilgi</a></td></tr>
</table>
</body>
</html>

Gözatıcıya Göre Sayfa Yönlendirme
HTML ve CSS derslerinde, bazı komutların Internet Explorer`da başka, Netscape Navigator`da başka olduğunu görmüştük. Bu nedenle elimizden geldiğince sayfaları iki gözatıcıya da uygun bir şekilde hazırlarız ama bu her zaman yapılamıyor. Böyle durumlarda NN için başka, IE için başka sayfalar tasarlarız. Önce kullanıcının kullandığı gözatıcıyı belirler ve ona göre sayfayı yönlendiririz. Bu açıklamadan sonra, kendiniz de yapabilirsiniz ama ben yine de göstereyim:

Javascript:
<html>
<head>
<title>Gözatıcıya göre yönlendirme</title>
<style>table {visibility:hidden}</style>
<script language="JavaScript">

function yonlendir()
{
var gozatici=navigator.appName
if (gozatici.indexOf("Netscape") != -1) window.location="nnsite.html"
if (gozatici.indexOf("Microsoft") != -1) window.location="iesite.html"
//Tabi siz kendi dosya adreslerinizi yazacaksınız.
}

</script>
</head>
<body onload="yonlendir()">
Bu sayfa bir uygulama değil, sadece nasıl yapılacağını gösteriyorum.
</body>
</html>

Bilmediğimiz birşey yer almıyor. (indexOF() kodunu unutanlar Metin Komutları dersine bakıp hatırlasınlar.) Bu fonksiyonda navigator.appName koduyla öğrenilen kullanıcının gözatıcı ismi "Netscape" ifadesini içeriyorsa Netscape kullanıcıları için hazırladığımız sayfaya yönlendiriyor, "Microsoft" ifadesi içeriyorsa Microsoft IE kullanıcıları için hazırladığımız sayfaya yönlendiriyor. IE veya NN kullanılmıyorsa, hiçbir yere yönlendirilmiyor.

Visual Basic veya benzeri bir dille basit bir gözatıcı yapabilirsiniz ve ismini kendiniz koyabilir ve arkadaşlarınıza dağıtabilirsiniz. Sonra da sitenize gözatıcınızla bağlananları, onlara özel hazırladığınız sayfalara yönlendirebilirsiniz.

KAYNAK: http://www.bilgisayardershanesi.com/bilgisayar_dersleri/java-script-gozatici-komutlari.html

Java Script Doküman Nesnesi

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:

Javascript:
<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>

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.

Javascript:

<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>

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.

Javascript:

<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>

Arka Plan Rengini Değiştirmek Arka plan rengini değiştirmek için document.bgcolor komutunu kullanırız.

Javascript:

<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: http://www.bilgisayardershanesi.com/bilgisayar_dersleri/java-script-dokuman-nesnesi.html

Java Script Pencere Nesnesi

Pencere nesnesi, JavaScript nesnele hiyerarşisinde en tepede yer almaktadır. Daha önceki Pencere Komutları sayfasında bir bakıma bu konuya giriş yapmıştık. Şimdi o sayfadan devam edelim:

alert(...) Uyarı kutusuyla kullanıcıya mesaj gönderir.
alert("Bu sayfa henüz hazırlanmamıştır!")
confirm(...) Onay kutusuyla kullanıcı tarafından yönlendirilme olanağı tanır.
confirm("Sayfaya girmek istiyor musunuz?")
prompt(...) Yazı kutusuyla kullanıcıdan bilgi alır.
prompt("Yaşınızı girin lütfen!","Buraya...")
window.open(...) Özelliklerini belirleyebileceğiniz yeni bir sayfa açar.
window.open("http://www.imdb.com", "sinema", "toolbar=0, menubar=0, resizable=1")
location Sayfaya yönlendirmeyi sağlar.
location = "http://www.imdb.com"
location.reload() Sayfayı yeniden yüklemeye (refresh) yarar.
location.reload()
window.close Pencereyi kapatır.
window.close
window.status Pencere kutusuna yazı yazmayı sağlar.
window.status = "Sayfama hoş geldiniz."

Ve pencere komutları bütün hızıyla devam ediyor...

Ekran Komutları Kullanıcıların ekranı hakkında bilgiler almak isteyebiliriz. Bunun için aşağıdaki screen (ekran) komutları kullanılır. Not: Ekran ile monitörün farklı şeyler olduğunu aklınızda tutun.
screen.width Kullanıcının ekran genişliğini piksel cinsinden ifade eder.
screen.width
screen.height Kullanıcının ekran yüksekliğini piksel cinsinden ifade eder.
screen.height
screen.availWidth Kullanıcının kullanılabilir ekran genişliğini piksel cinsinden ifade eder.
screen.availWidth
screen.availHeight Kullanıcının kullanılabilir ekran yüksekliğini piksel cinsinden ifade eder.
screen.availHeight
screen.colorDepth Kullanıcının kullandığı renk derinliğini bit (byte) cinsinden ifade eder.
screen.colorDepth

Javascript:
<html>
<head>
<title>Ekran Değerleri</title>
<script language="JavaScript">

function etiket()
{
baslik.innerHTML="Ekran Değerleri"
}

function ekran(kosul)
{
switch(kosul)
{
case 1: baslik.innerHTML="Ekran genişliği: " + screen.width + "piksel"
break
case 2: baslik.innerHTML="Ekran yüksekliği: " + screen.height + "piksel"
break
case 3: baslik.innerHTML="Kullanılabilir ekran genişliği: " + screen.availWidth + "piksel"
break
case 4: baslik.innerHTML="Kullanılabilir ekran yüksekliği: " + screen.availHeight + "piksel"
break
case 5: baslik.innerHTML="Ekran renk derinliği: " + screen.colorDepth + "bit"
break
case 6: baslik.innerHTML="Ekran çözünürlüğü: " + screen.width + "x" + screen.height + "piksel"
}
}

</script>
</head>
<body>

<h2 id="baslik" >Ekran Değerleri</h2>
<a href="denjstg1.html" onmouseover="ekran(1)" onmouseout="etiket()">Ekran genişliği.</a><br>
<a href="denjstg1.html" onmouseover="ekran(2)" onmouseout="etiket()">Ekran yüksekliği.</a><br>
<a href="denjstg1.html" onmouseover="ekran(3)" onmouseout="etiket()">Kullanılabilir ekran genişliği.</a><br>
<a href="denjstg1.html" onmouseover="ekran(4)" onmouseout="etiket()">Kullanılabilir ekran yüksekliği.</a><br>
<a href="denjstg1.html" onmouseover="ekran(5)" onmouseout="etiket()">Ekran çözünürlüğü.</a><br>
<a href="denjstg1.html" onmouseover="ekran(6)" onmouseout="etiket()">Ekran renk derinliği.</a><br>

</body>
</html>

Bundan sonra uygulamalarımız biraz daha uzun olacak. Amacım kullanıcıları CSS, HTML ve JavaScript`i beraber kullanmaya ısındırmak. Şimdi çok sorulan bir kodu göstereyim: Kullanıcının çözünürlüğüne göre sayfa yönlendirme:

Javascript:
<html>
<head>
<title>Çözünürlük değerine göre sayfa yönlendirme...</title>
<script language="JavaScript">

function yonlendir()
{
var x=screen.width //Yönlendirilecek sayfaları tanımlıyoruz.
var sayfa640x480="sayfa1.html"
var sayfa800x600="sayfa2.html"
var sayfa1024x768="sayfa3.html"
switch(x)
{
case 640: window.location.href=sayfa640x480
break
case 800: window.location.href=sayfa800x600

break
case 1024: default: window.location.href=sayfa1024x768

}
}

</script>
</head>
<body onload="yonlendir()">

</body>
</html>

Ekran hakkında yukarıdaki bilgilerden başka, pencerenin ekrana olan yatay ve düşey uzaklıklarını da ifade edebiliyoruz: screenLeft (sola yatay uzaklık), screenTop (sağa yatay uzaklık):

Javascript:
<html>
<head>
<title>Pencere Koordinatları</title>

<style>
table {visibility: hidden}
</style>

<script language="JavaScript">
function konum()
{
var x, y
x = screenLeft
y = screenTop
tablo.style.visibility="visible"
baslik1.innerHTML="Pencerenin, ekranın sol kenarına yatay uzaklığı: " + x + " piksel"
baslik2.innerHTML="Pencerenin, ekranın üst kenarına düşey uzaklığı: " + y + " piksel"
}
</script>

</head>
<body>

Pencerenin ekrana olan koordinatlarını bilmek istiyorsanız, düğmeye basın.
<form>
<input type="button" value="Koordinatlar" onclick="konum()">
</form>
<table id="tablo" cellpadding="3" cellspacing="0" border="1" bgcolor="3399cc">
<tr><td>
<a id="baslik1">yatay</a></td></tr>
<tr><td>
<a id="baslik2">düşey</a>
</td></tr></table>

</body>
</html>

Bu uygulamamızda, düğmeye basıldığında pencerenin ekrana olan yatay ve düşey mesafelerini ediniyoruz. Düğmeye bastıktan sonra pencereyi ekranın başka bir bölümüne taşıyın ve bir daha düğmeye basın. Bu uygulamada CSS derslerinden tanıdığımız visibility özelliğini kullanarak tabloyu başta sakladık, sonra da JavaKodlarıyla tabloyu görünür yaptık. Bu yöntemin hoşunuza gittiğini umuyorum.

Pencere Boyutları Penceremizin boyutlarını JavaScript kodları kullanarak istediğimiz ölçüye getirebiliriz. Bunun için resizeTo(..., ...) kodu kullanılır. Parantez içindeki ilk veri pencerenin genişlik değerini, ikinci veri ise pencerenin uzunluk değerini (piksel cinsinden) ifade ediyor. Uygulamamıza geçelim:

Javascript:
<html>
<head>
<title>Pencere Konumu</title>

<script language="JavaScript">
function yeniboyut()
{
var x=prompt("Pencere genişlik değerini girin lütfen...","piksel cinsinden")
var y=prompt("Pencere yükseklik değerini girin lütfen...","piksel cinsinden")
window.resizeTo(x,y)
baslik1.innerHTML="Pencere genişliği: " + x + " piksel"
baslik2.innerHTML="Pencerenin yüksekliği: " + y + " piksel"
}
</script>

</head>
<body onload="yeniboyut()">

<table cellpadding="3" cellspacing="0" border="1" bgcolor="3399cc">
<tr><td>
<a id="baslik1">yatay</a></td></tr>
<tr><td>
<a id="baslik2">düşey</a>
</td></tr></table>
<b>F5</b>`e basarak, pencere genişliğini yeniden ayarlayabilirsiniz.

</body>
</html>

Uygulamamız herşeyi anlatıyor sanırım. resizeTo ile pencerenin konumlarını istediğimiz değerlere getiriyoruz. Şimdiki kodumuz resizeBy(..., ...) ise pencere boyutunu parantez içinde yer alan piksel değerleriyle artırmaya (negatif piksel değerleriyle azaltmaya) yarıyor. Önceki uygulamamızdaki resizeTo(x,y) yerine resizeBy(x,y) ifadesi koyarsanız, uygulama yürürlükteki pencereyi artırma (negatif değer koyarsanız azaltma) işlemi yaparsınız.

Penceredeki sayfa boyutu, pencereninkinden büyükse, kayma kutuları (scrollbars) kullanılır. JavaScript kodlarıyla sayfayı kaydırmak istiyorsak scroll(..., ...) komutunu kullanırız. Örneğin window.scroll(0,300) kodu ile penceredeki sayfanın, en tepeden 300 piksel aşağıya kaymasını sağlarız. Aynı işlevi gören scrollTo komutunu da kullanabiliriz. Sayfanın yürürlükteki konumundan aşağıya kaymasını istiyorsak, scrollBy komutunu kullanırız. (Kendi kayar kutularını (scrollbars) kendileri yapmak isteyenlerin dikkatine...). Bu komutlarla ilgili şimdilik uygulama yapmayım, hem anlamış olduğunuzu düşünüyorum, hem de ileri de bu komutların da yer aldığı ileri JavaScript uygulamaları yapacağız.

Pencere Konumu Pencere nesnesinin ekrana göre konumunu screenLeft ve screenTop kodları ile belirleyebiliyorduk. Peki pencereyi istediğimiz konuma JavaScript kodlarıyla nasıl getiririz? Sorunun cevabı: moveTo ve moveBy kodları. moveTo komutu ile pencerenin sol üst köşesini istediğimiz koordinatlara getirebiliyoruz, moveBy ise pencerenin sol üst köşesini istenen miktarda hareket ettirmeye yarıyor.

Javascript:
<html>
<head>
<title>Pencere Ortalama</title>

<script language="JavaScript">
function boyut()
{
window.resizeTo(300,200)
}

function ortala()
{
var x=screen.availWidth
var y=screen.availHeight
window.moveTo(x/2-150, y/2-100)
}
</script>

</head>
<body onload="boyut()">

<form>
<input type="button" value="ortala" onclick="ortala()">
</form>
</body>
</html>

Bu uygulamamızda pencerenin 300x200 piksel boyutlarında açılmasını sağlıyoruz. Düğmeye atanana ortala() fonksiyonu ile, önce kullanıcı ekranının boyutlarını öğreniyoruz, sonra ekranı ortalayacak şekilde; moveTo() komutu ile pencerenin sol üst köşesini hareket ettiriyoruz.

Zaman Aralığı Fonksiyonu harekete geçiren olayın oluşmasından belli miktar zaman geçtikten sonra birşey oluşmasını istiyorsak, setTimeout(..., ...) komutu kullanılır. Örneğin bir düğmeye basıldıktan sonra uyarı kutusunun çıkmasını istiyorsak:

setTimeout("alert(`Bu mesaj 3 saniye sonra çıkar.`)", 3000)

İlk değer parantez içinde bir JavaScript kodudur, ikinci değer ise ilk değerin ne kadar süre sonra oluşacağını belirleyen, mili saniye cinsinden zaman değeridir. (1 saniye = 1000 mili saniye) Bu komut ile uyarı kutusu 3 saniye bekledikten sonra görünecektir. Aşağıdaki uygulamamıza bakalım:

Javascript:
<html>
<head>
<title>Pencere Dansı</title>

<script language="JavaScript">
function boyut()
{
for(var i=0; i<=10; i+=2)
{
setTimeout("window.resizeTo(400,100)", i*1000)
setTimeout("window.resizeTo(100,400)", (i+1)*1000)
}
}
</script>

</head>
<body onload="boyut()" bgcolor="crimson">
Bu işlem sadece 12 saniye sürer.
</body>
</html>

Bu uygulamamızda; 12 saniye boyunca, sayfanın boyutları saniyede bir değişmektedir.

KAYNAK: http://www.bilgisayardershanesi.com/bilgisayar_dersleri/java-script-pencere-nesnesi.html

Java Script ve DHTML

Hareketli (dinamik) bir sayfa yapmak için, sayfa nesnelerini ve onlara komutlar vermeliyiz. Buna DHTML (dynamik hypertext markup language) denmektedir. Aslında DHTML diye bir dil veya standart yok, HTML nesneleri ve CSS özelliklerini JavaScript (veya başka bir dille) sayfa içinde değiştirerek, hareketli web sayfaları yaratma işlemidir. Fare imlecini kovalayan yaylar, toplar, martılar; üzerine gelindiğinde değişen ışıklı düğmeler; tıklanıldığında perde gibi açılan menüler; Star Wars jeneriğine benzeyen kayan metinler, daha neler neler...

DOM (Document Object Model; Doküman Nesne Modeli) Hareketli web sayfaları oluşturmak için HTML, CSS ve JavaScript (başka bir script dil de olabilir) kodlarını bir şekilde ilişkilendirmek gerekir; burada DOM devreye girer. DOM bir modelleme şeklidir, sayfa nesnelerinin belli bir hiyerarşi içinde tanımlanmasıdır. Sayfa nesnelerini komutlandırmak için, önce tanımlamamız gerekir. Bu tanımlam için, üzerinde işlem yapılacak her HTML nesnesi id="..." parametresiyle isimlendirilir. Bu isim kullanılarak nesnenin parametreleri, CSS özellikleri veya metinsel değerleri üzerinde değişiklik yapılır.

Mesela bir HTML nesnesinin parametresi üzerinde oynayalım:

Javascript:
<html>
<head>
<title>Parametre Değişimi</title>
<script language="JavaScript">
function yan()
{
resim.src="dhtml2.jpg" }
function son()
{
resim.src="dhtml1.jpg" }
</script>
</head>
<body>

<img id="resim" onmouseover="yan()" onmouseout="son()" src="dhtml1.jpg" border="0">

<br><br>Yazının parlaması için DHTML yazısının üzerine gelin.
</body>
</html>

Bu uygulama farenin hareketiyle iki resmin yer değişmesini sağlıyor ve ortaya hoş bir görünüm çıkıyor. Eminim web efendisi olmak isteyen bir çok arkadaş başkalarının bu işi nasıl yaptığını merak ediyordur. Peşin söyleyim: Böyle yapmıyorlar, böyle yapsalardı kullanıcılar ikinci resmin yüklenmesi için fazladan beklemek zorunda kalacaklardı. Nasıl yapıldığını ileriki bölümlerde anlatacağım, şimdilik adım adım ilerleyelim.

Şimdi CSS özellikleri üzerinde değişiklik yapalım. Bu uygulamayı ilk uygulamanın üzerine inşa ediyorum:

Javascript:
<html>
<head>
<title>CSS Özellikleri</title>
<script language="JavaScript">
function buyut()
{
resim.style.width="500" }
function kucult()
{
resim.style.width="347" }
function yan()
{
resim.src="dhtml2.jpg" }
function son()
{
resim.src="dhtml1.jpg" }
</script>
</head>
<body>

<img id="resim" onmouseover="yan()" onmouseout="son()" onclick="buyut()" ondblclick="kucult()" src="dhtml1.jpg" border="0">
<br><br>Yazının parlaması için DHTML yazısının üzerine gelin.
<br>Yazının büyümesi için DHTML yazısının üzerine tıklayın.
<br>Yazının küçülmesi için DHTML yazısının üzerine çift tıklayın.

</body>
</html>

CSS özellikleriyle oynamak için şu yapı kullanılıyor: nesnenin ismi.style.css özelliği=değer. Yukarıdaki uygulamada CSS derslerinde gördüğümüz width özelliği kullanılmış. Öğrendiğimiz onca CSS özelliğiyle neler yapılır, neler... Ben CSS derslerinde yeterince örnek verdiğimizi düşündüğüm için, buraya yeni örnekler koymayacağım. Ama sizlere pratik yapmanızı tavsiye ederim.

Nesne Hiyerarşisi Aşağıdaki resmi siz değerli okuyucularım için Joe Burns adlı bir adamın sitesinden arakladım:

Şekilde nesneler bir hiyerarşi içinde gösterilmiş. Görüldüğü üzere hiyerarşinin en tepesinde windows (pencere) bulunuyor. Altındaki parent, self, top ve Frames Windows nesnesinin elemanlarıdır. Birden çok pencere söz konusu değilse, bu nesneleri belirtmeniz gerekmez. Pencere Komutları sayfasında bu konunun ön hazırlığını yaptık aslında, sayfaları sırasıyla takip eden arkadaşlarımıza bu terimler hiç yabancı gelmeyecektir.

DOM nesneleri için başlangıç yapacağımız nesne doküman (document).

KAYNAK: http://www.bilgisayardershanesi.com/bilgisayar_dersleri/java-script-ve-dhtml.html

Java Script Matematik Komutları

Programlar matematiğin bir dalı olan algoritmalar üzerine kuruludur. Matematiği kötü olup da iyi yazılımcı olabilen kişi yoktur. Eğer matematik üzerine daha önce fazla düşmemişseniz, belki program yaparken matematiği sevebilir ve içinizde kalmış gizli bir yeteneğinizi keşfedebilirsiniz.

Ondalık Sayıları Tam Sayılara Çevirme Şekilleri JavaScript`te bir sürü matematik komutu var ve bu kodların başına math. ön komutu konur. Hemen başlasak iyi olur. İlk kodumuz ondalık sayıları en yakın tam sayıya yuvarlamaya yarayan round() komutu. Uygulamada kullanım şeklini görüyoruz:

Javascript:
<html>
<head>
<title>Yuvarlama</title>
</head>
<body>

<script language="JavaScript">
var i = 6.232, j= 43.534, k=17.4999999
document.write(i + " sayısını yuvarlarsak: " + Math.round(i) + "<br>")
document.write(j + " sayısını yuvarlarsak: " + Math.round(j) + "<br>")
document.write(k + " sayısını yuvarlarsak: " + Math.round(k) + "<br>")
</script>

</body>
</html>

Benzer bir kod olan ceil()`e (Türkçesi: tavan) bakalım. Bu komutla ondalık sayılar en yakında ve daha büyük olan tamsayıya eşitlenir; tamsayılar için değişen birşey olmaz. round kodunda ise ondalık sayı kendisinden düşük tamsayılara da eşitlenebiliyordu, aradaki fark bu.

Javascript:
<html>
<head>
<title>Tamamlama</title>
</head>
<body>

<script language="JavaScript">
var i = 6.232, j= 43.534, k=17.4999999
document.write(i + " sayısını tamamlarsak: " + Math.ceil(i) + "<br>")
document.write(j + " sayısını tamamlarsak: " + Math.ceil(j) + "<br>")
document.write(k + " sayısını tamamlarsak: " + Math.ceil(k) + "<br>")
</script>

</body>
</html>

Yukarıdaki iki uygulamayı karşılaştırırsanız round() ile ceil() komutları arasındaki farkı görürsünüz. Şimdi bu iki koda benzeyen diğer koda geçiyorum: floor() (Türkçesi: taban). Ondalık sayıyı en yakındaki ve daha küçük olan tamsayıya çevirir. Yani bu kodu kullanarak ondalık sayının ondalıklı kısmını atıyoruz.

Javascript:
<html>
<head>
<title>Ondalık kısmı atma</title>
</head>
<body>

<script language="JavaScript">
var i = 6.232, j= 43.534, k=17.4999999
document.write(i + " sayısının ondalık kısmını atarsak: " + Math.floor(i) + "<br>")
document.write(j + " sayısının ondalık kısmını atarsak: " + Math.floor(j) + "<br>")
document.write(k + " sayısının ondalık kısmını atarsak: " + Math.floor(k) + "<br>")
</script>

</body>
</html>

Maksimum ve Minimum Değerleri Bulma Şimdi istatistiksel kodlara geçelim. İki sayıdan büyük olanını belirlemek için max() matematik kodundan yararlanırız. Hadi yararlanalım:

Javascript:
<html>
<head>
<title>Büyüğü seç</title>
</head>
<body>

<script language="JavaScript">
document.write(Math.max(46, 95))
</script>

</body>
</html>

max() kodunun karşıtı min() kodudur, iki sayı arasından büyük olanı belirler.

Javascript:
<html>
<head>
<title>Küçüğü seç</title>
</head>
<body>

<script language="JavaScript">
document.write(Math.min(46, 95))
</script>

</body>
</html>

Karekök Alma Bir sayının karekökünü almak istersek sqrt() matematik kökünden yararlanabiliriz.

Javascript:
<html>
<head>
<title>Karekök</title>
</head>
<body>

<script language="JavaScript">
var i = 6.232, j= 43.534, k=17.4999999
document.write(i + " sayısının karekökü: " + Math.sqrt(i) + "<br>")
document.write(j + " sayısının karekökü: " + Math.sqrt(j) + "<br>")
document.write(k + " sayısının karekökü: " + Math.sqrt(k) + "<br>")
</script>

</body>
</html>

Biraz bu uygulama üzerinde duralım. Uygulama sonucunda sayıların karekökleri noktadan sonra 15 rakamlı halde veriliyor. Mesela biz noktadan sonra sadece iki sayı olmasını istiyoruz. Nasıl yaparız? Bunun için ayrı bir koda ihtiyacımız yok, basit bir mantıkla hallederiz. Önce sayıları 100`le çarparız (üçlü ondalık isteseydik 1000`le çarpardık) sonra bu sayıları yuvarlar ve yine 100`e bölerdik. İşte sonuç:

Javascript:
<html>
<head>
<title>İki Ondalıklı Karekök</title>
</head>
<body>

<script language="JavaScript">
var i = 6.232, j= 43.534, k=17.4999999
var a, b, c
document.write(i + " sayısının karekökü: " + Math.sqrt(i) + "<br>")
document.write(j + " sayısının karekökü: " + Math.sqrt(j) + "<br>")
document.write(k + " sayısının karekökü: " + Math.sqrt(k) + "<br><br>")
a = Math.round(Math.sqrt(i) * 100) / 100
b = Math.round(Math.sqrt(j) * 100) / 100
c = Math.round(Math.sqrt(k) * 100) / 100
document.write(i + " sayısının iki ondalıklı karekökü: " + a + "<br>")
document.write(j + " sayısının iki ondalıklı karekökü: " + b + "<br>")
document.write(k + " sayısının iki ondalıklı karekökü: " + c + "<br>")
</script>

</body>
</html>

Uygulamamızın sonucunda ikiondalıklı 2.50 ve 6.60 sayıları, tek ondalıklı 2.5 ve 6.6 halinde görünürler. (İstersek koşul deyimleriyle bunu da engelleriz ama uğraşmayalım şimdi.)

Mutlak Değer Alma Sayıların mutlak değerini elde etmek için abs() kodunu kullanırız. Kullanalım:

Javascript:
<html>
<head>
<title>Mutlak Değer</title>
</head>
<body>

<script language="JavaScript">
var i = -6.232, j= 43.534, k=-17.4999999
document.write(i + " sayısının mutlak değeri: " + Math.abs(i) + "<br>")
document.write(j + " sayısının mutlak değeri: " + Math.abs(j) + "<br>")
document.write(k + " sayısının mutlak değeri: " + Math.abs(k) + "<br>")
</script>

</body>
</html>

Trigonometrik İşlemler Aşağıda trigonometrik işlemler yapan matematik kodlarını listeledim. Sayfa uzamasın diye örnek çözmüyorum, aynı şekilde Math. uzantılı kullanılırlar.
cos() Sayının kosinüsünü gösterir. (radyal değerler kullanın)
Math.cos(3.141592653589793)
sin() Sayının sinüsünü gösterir
Math.sin(3.141592653589793/2)
tan() Sayının tanjantını gösterir.
Math.tan(3.141592653589793/4)
acos() Sayının arkkosinüsünü gösterir. (radyal değerler verir.)
Math.acos(0.5)
asin() Sayının arksinüsünü gösterir.
Math.asin(0.25)
atan() Sayının arktanjantını gösterir.
Math.atan(1)

Değişkenlere Rasgele Sayı Değeri Atama Şimdi çok geniş alanlarda kullanılabilen bir kod öğreneceğiz: random(). Bu kod rasgele bir sayı verir. Aşağıdaki uygulamaya bakalım.

Javascript:
<html>
<head>
<title>Rasgele Sayı</title>
<script language="JavaScript">
function rasgele()
{
var i = Math.random()
sayfa = window.open("","yeni_sayfa", "toolbar=0,location=0,directories=0, status=0, menubar=0,scrollbars=0,resizable=1, copyhistory=0,width=280, height=300, left=200, screenX=200, top=100, screenY=100")
sayfa.document.write(i + "<br>")
}
</script>
</head>
<body>

<form>
<input type="button" value="Rasgele Sayı" onclick="rasgele()">
</form>

</body>
</html>

Uygulamamızdaki düğmeye 40 defa falan basın ve sonuç penceresindeki rasgele sayıları inceleyin. Şöyleyebileceklerimiz: Bu sayıların hepsi ondalık tabanda bulunuyor. İki basamaklı rasgele tamsayılar elde etmek istersek ne yaparız? Cevap: Sayıyı 100 ile çarpar ve yuvarlarız:

Javascript:
<html>
<head>
<title>Rasgele İki Basamaklı Sayılar</title>
<script language="JavaScript">
function rasgele()
{
var i = Math.random()
sayfa = window.open("","yeni_sayfa", "toolbar=0,location=0,directories=0, status=0, menubar=0,scrollbars=0,resizable=1, copyhistory=0,width=280, height=300, left=200, screenX=200, top=100, screenY=100")
sayfa.document.write(Math.round(i * 100) + "<br>")
}
</script>
</head>
<body>

<form>
<input type="button" value="Rasgele Sayı" onclick="rasgele()">
</form>

</body>
</html>

Düğmeye defalarca basarsanız, uygulamanızın doğru olup, olmadığı hakkında fikir edinebilirsiniz. Nihayet bu dersi de devirdik. DHTML`e geçmeye az kaldı, biraz gayret.

KAYNAK: http://www.bilgisayardershanesi.com/bilgisayar_dersleri/java-script-matematik-komutlari.html

Java Script Olaylar

JavaScript için olay nedir? Kullanıcının sayfa üzerinde yaptığı her türlü işlem olaydır. Sayfayı açmak, bir nesnenin üzerine tıklamak, fareyle bir nesnenin üzerine gelmek, bir tuşa basmak, bir değeri değiştirmek. Bunların hepsi bir olaydır. HTML nesneleridir ve küçük harfle veya büyük harfle yazılmalarında sakınca yoktur.

"onClick" Olayı
Bu sayfaya kadar onclick (tıklanıldığında) olayını düğme üzerinde birçok uygulamamızda kullandık. Bu olayı uygulamak için düğmeye ihtiyacımız yok, herhangi bir HTML nesnesi de olur: resim, hiperlink, metin vb. onclick olayı kullanıcının fareyle oluşturduğu olaylardandır.

Javascript:
<html>
<head>
<title>Olay: Onclick</title>
<script language="JavaScript">
function mesaj()
{
sayfa = window.open("","yeni_sayfa", "toolbar=0,location=0,directories=0, status=0, menubar=0,scrollbars=0,resizable=0, copyhistory=0,width=280, height=80, left=200, screenX=200, top=100, screenY=100")
sayfa.document.write("<h1>Merhaba</h1>")
}
</script>
</head>
<body>

<a href="#" onclick="mesaj()">Mesajınız var.</a>

</body>
</html>

"onDblClick" Olayı onclick olayına çok benzeyen diğer olay: ondblclick (çift tıklanıldığında). Adından da anlaşılacağı gibi kullanıcının fareyle çift tıklamasını ifade eder. Aşağıdaki uygulamaya bakalım:

Javascript:
<html>
<head>
<title>Olay: OnDblclick</title>
<script language="JavaScript">
function mesaj()
{
alert("Hiperlinkin üzerine geldiniz.")
}
</script>
</head>
<body>

<img src="web.jpg" border="0" ondblclick="mesaj()"><br>
<p>Resmin üzerine çift tıklarsanız mesaj kutusu görünür.</p>

</body>
</html>

"onMouseOver" Olayı Fareyle yaratılan bir diğer olay: onmouseover olayıdır, fare imlecinin bir HTML nesnesi üzerine gelmesini ifade eder. Daha önceki uygulamayı onmouseover olayına uyarlıyalım.

Javascript:
<html>
<head>
<title>Olay: OnMouseOver</title>
<script language="JavaScript">
function mesaj()
{
alert("Hiperlinkin üzerine geldiniz.")
}
</script>
</head>
<body>

<a href="#" onmouseover="mesaj()">Hiperlinkin üzerine gelirseniz mesaj görünür.</a>

</body>
</html>

"onMouseOut" Olayı Bir başka benzer fare olayı ise onmouseout. Bu olay fare imlecin herhangi bir HTML nesnesi üzerinden gitmesini ifade eder. Uygulamamıza bakalım.

Javascript:
<html>
<head>
<title>Olay: OnMouseOut</title>
<script language="JavaScript">
function mesaj()
{
alert("Hiperlinkten çıktınız.")
}
</script>
</head>
<body>

<a href="#" onmouseout="mesaj()">İmleci hiperlinkin üzerinden çekerseniz mesaj görünür.</a>

</body>
</html>

Genellikle onmouseover ve onmouseout olay kodları birlikte kullanılıyor. Bunlar en çok kullanılan fare kodlarıdır. Böyle bir başka ikili fare olay koduna bakalım: onmousedown (fare tuşuna basıldığında), onmouseup (fare tuşu bırakıldığında). Basit bir uygulama yapalım:

KAYNAK: http://www.bilgisayardershanesi.com/bilgisayar_dersleri/java-script-olaylar.html

Java Script Zaman Komutları

Bu sayfada zaman yöntem kodları üzerinde duracağız. Bu kodlar zaman birimlerini ifade etmekte, nesneleri zamana göre sıralamakta ve sorgulamakta kullanılır. (ASP derslerinde üzerinde duracağız.)

Zaman Değişkeni Tanımlama ve Yürürlükteki Zaman Değerini İfade Etme
İlk kodumuz: new Date(). Bu kod değişkenin zaman değeri taşıdığını belirtiyor. Ve değişkene bilgisayarın saatinde yer alan zaman değerini veriyor. Aşağıdaki kodlarla bu zaman değerini özelleştirebiliriz.
getDate() Ayın kaçı olduğunu gösterir.
tarih.getDate()
getMonth() Hangi ayda olduğumuzu gösterir. Ocak için 0, Şubat için 1, Mart için 2, ..., Aralık için 11 değerini verir.
tarih.getMonth()
getFullYear() İçinde bulunduğumuz yılı dört rakamıyla gösterir.
tarih.getFullYear()
getHours() Saat değerini ifade eder. 24`lük sistem kullanılır.
tarih.getHours()
getMinutes() Dakika değerini ifade eder.
tarih.getMinutes()
getSeconds() Saniye değerini ifade eder.
tarih.getSeconds()
getUTCHours() UTC saat değerini ifade eder. UTC bir zaman standardı; NASA falan kullanıyor olsa gerek.
tarih.getUTCHours()
getUTCMinutes() UTC dakika değerini ifade eder.
tarih.getUTCMinutes()
getUTCSeconds() UTC saniye değerini ifade eder.
tarih.getUTCSeconds()
getDay() Haftanın günlerini ifade eder. Pazar için 0, Pazartesi için 1, Salı için 2, ..., Cumartesi için 6 değerini verir.
tarih.getDay()

Eğer bu kodların tanımlandığı değişken önceden var değişken = new Date() şeklinde tanımlanmazsa çalışmaz. Şimdi bir uygulamayla tüm bu kodların nasıl sonuç verdiğini görelim. Uygulama sonuçlarını, bilgisayarınızın saatiyle karşılaştırın.

Javascript:
<html>
<head>
<title>Zaman Komutları</title>
</head>
<body>

<h3>Zaman Komutları ve Sonuçları</h3>
<script language="JavaScript">
var zaman = new Date()
document.write("<b>Zaman</b>: " + zaman)
document.write("<br><b>getFullYear</b>: " + zaman.getFullYear())
document.write("<br><b>getDate</b>: " + zaman.getDate())
document.write("<br><b>getMonth</b>: " + zaman.getMonth())
document.write("<br><b>getHours</b>: " + zaman.getHours())
document.write("<br><b>getMinutes</b>: " + zaman.getMinutes())
document.write("<br><b>getSeconds</b>: " + zaman.getSeconds())
document.write("<br><b>getUTCHours</b>: " + zaman.getUTCHours())
document.write("<br><b>getUTCMinutes</b>: " + zaman.getUTCMinutes())
document.write("<br><b>getUTCSeconds</b>: " + zaman.getUTCSeconds())
document.write("<br><b>getDay</b>: " + zaman.getDay())
</script>

</body>
</html>

Uygulamayı dikkatli inceleyen okuyucular, tek rakamlı zaman birimlerinin önüne 0 gelmediğini görmüşlerdir. Yani saniye 08 yerine 8 diye geçer. (Saat yapmak isteyenlerin dikkatine.) Bir başka özellik de, bu kodlarla sadece sayfanın çalıştırıldığı anın zamanı gösteriliyor. Örneğin saniye ifadesi olduğu gibi duruyor ve çalıştırıldığı zamanın saniyesini gösteriyor. (Saat yapmak isteyenlerin bir daha dikkatine.)

Zaman Değeri Atama İstersek zaman ayarlarıyla oynayabilir, istediğimiz tarihe veya saate kurabiliriz. Bu kurma işlemi için aşağıdaki komutlar kullanılır.

setFullYear() Girilen yılı ayarlar.
tarih.setFullYear("1963")
setMonth() Girilen ayı ayarlar.
tarih.setMonth("5")
setDate() Ayın gününü ayarlar.
tarih.setDate("13")
setHours() Saati ayarlar.
tarih.setHours("10")
setMinutes() Dakikayı ayarlar.
tarih.setMinutes("34")
setSeconds() Saniyeyi ayarlar.
tarih.setSeconds("22")
setUTCHours() UTC saatini ayarlar.
tarih.setUTCHours("10")
setUTCMinutes() UTC dakikasını ayarlar.
tarih.setUTCMinutes("34")
setUTCSeconds() UTC saniyesini ayarlar.
tarih.setUTCSeconds("22")

Dikkat ederseniz zamanı ayarlarken haftanın günlerini ayarlamıyoruz. Bilgisayar ayarlanan yıl, ay ve güne göre haftanın gününü hesaplıyor. Şimdi uygulamamızı inceleyelim; her ayarlamadan sonra zaman yeniden gösteriliyor.

Javascript:
<html>
<head>
<title>Zaman Komutları</title>
</head>
<body>

<h3>Zaman Komutları ve Sonuçları</h3>
<script language="JavaScript">
var zaman = new Date()
document.write("<b>Zaman</b>: " + zaman)
document.write("<br><b>getFullYear</b>: " + zaman.getFullYear())
document.write("<br><b>getDate</b>: " + zaman.getDate())
document.write("<br><b>getMonth</b>: " + zaman.getMonth())
document.write("<br><b>getHours</b>: " + zaman.getHours())
document.write("<br><b>getMinutes</b>: " + zaman.getMinutes())
document.write("<br><b>getSeconds</b>: " + zaman.getSeconds())
document.write("<br><b>getUTCHours</b>: " + zaman.getUTCHours())
document.write("<br><b>getUTCMinutes</b>: " + zaman.getUTCMinutes())
document.write("<br><b>getUTCSeconds</b>: " + zaman.getUTCSeconds())
document.write("<br><b>getDay</b>: " + zaman.getDay())
</script>

</body>
</html>

Zaman Aralığı Fonksiyonu harekete geçiren olayın oluşmasından belli miktar zaman geçtikten sonra birşey oluşmasını istiyorsak, setTimeout(..., ...) komutu kullanılır. Örneğin bir düğmeye basıldıktan sonra uyarı kutusunun çıkmasını istiyorsak:

setTimeout("alert(`Bu mesaj 3 saniye sonra çıkar.`)", 3000)

İlk değer parantez içinde bir JavaScript kodudur, ikinci değer ise ilk değerin ne kadar süre sonra oluşacağını belirleyen, mili saniye cinsinden zaman değeridir. (1 saniye = 1000 mili saniye) Bu komut ile uyarı kutusu 3 saniye bekledikten sonra görünecektir.

setTimeout komutu daha çok zaman aralıklarıyla tekrar eden hareketler oluşturmak için kullanılır. Aşağıdaki uygulamamıza bakalım:

Javascript:
<html>
<head>
<title>setTimeout</title>

<script language="JavaScript">
var metin;
function Slogan(n)
{
if(n%2==1) {metin="EN BÜYÜK"}
else
{metin="ALTAY!!!"}
katman.innerHTML=metin
setTimeout("Slogan(" + (n+1) + ")", 1000);
}
</script>
</head>
<body onload="Slogan(1)">
<div id="katman" align="center">Deneme</div>
</body>
</html>

Bu uygulama ile 1000 milisaniye (1 saniye) arayla "EN BÜYÜK" ve "ALTAY!!!" yazıları birbirinin yerine geçiyor. Bunu yapmak için Slogan() fonksiyonunun içinde tekrar Slogan() fonksiyonu çağrılarak bir döngü oluşturdum. Örnek uygulamalar bölümünde bu kullanım tarzını bolca göreceksiniz.

Bu sayfayı burada bitiriyorum. Bir takım zaman kodlarına değinmedim bile; onları referans sayfalarından öğrenebilirsiniz. (Milisaniyeyi falan ölçüyorlar, lazım olunca bakar öğrenirsiniz.) Şimdilik bu kadarı işinizi görür.

KAYNAK: http://www.bilgisayardershanesi.com/bilgisayar_dersleri/java-script-zaman-komutlari.html