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

27 Ekim 2012 Cumartesi

Java Script Metin Komutları

Şu ana kadar document. başlangıçlı tek kod gördük: document.write şimdilik bu kodla devam edeceğiz ve metinsel yöntemler üzerinde duracağız. DHTML sayfalarında document. başlangıçlı kodların hepsini ayrıca ele alacağız 

Karakter Sayısı Belirleme Bu sayfadaki metinsel kodlar, metinsel değerleri şekillendirme yöntemleridir. Örneğin değişken.length yöntemiyle metinsel bir ifadenin kaç karakterden oluştuğunu bulabiliriz. Not: Boşluklar da karakter ifade eder. 


Javascript:
<html>
<head>
<title>Karakter sayısı</title>
<script language="JavaScript">
function bul()
{
var metin
metin = prompt("Metinsel bir ifade yazın.", "Buraya lütfen...")
if (metin == null || metin == "") alert("Yazı kutusuna birşey yazmadınız.")
else
{
document.write("Yazılan metin: " + metin + "<br>")
document.write("Karakter sayısı: " + metin.length)
}
}
</script>
</head>
<body>

<form>
<p>Aşağıdaki düğme yazılan bir ifadenin karakter sayısını bulmaya yarar:</p>
<input type="button" value="Karakter Sayısı" onclick="bul()">
</form>

</body>
</html>



Uygulamamız da metin isimli değişkene length yöntemi uygulanıyor. (Kalın harflerle yazdım.) 

Metin İçinde Metin Arama Aynı yapıda başka bir yöntem koduna geçelim: indexOf("..."). indexOf yöntem kodu ile metinsel bir ifadeyi, başka metinlerin arasında ararız. (Arama motoru yapmak isteyenler iyi okusun.) Mesela i değişkenin değeri "Cameron Diaz" olsun. Biz "Diaz" metinsel ifadesinin bu metin içinde bulunup bulunmadığını bu kodla şöyle anlarız: j = i.indexOf("Diaz"). "Diaz" metinsel ifadesi "Cameron Diaz" metin değerli i içinde var. Bu durumda j pozitif bir tamsayı değeri alır. Olmasaydı -1 değeri alacaktı. Aşağıdaki uygulama herşeyi anlatıyor: 


Javascript:
<html>
<head>
<title>Karakter Bulma</title>
<script language="JavaScript">
function bul()
{
var metin = prompt("Öyle bir şey yazın ki içinde küçük "a" harfi olmasın.")
var karakter=metin.indexOf("a")
if (karakter >= 0)
{
document.write("<b>"" + metin + ""</b> ifadesinde "a" harfi var.")
}
else
{
document.write("<b>"" + metin + ""</b> ifadesinde "a" harfi yok.")
}
}
</script>
</head>
<body>

<form>
<p>Aşağıdaki düğmeye basın...</p>
<input type="button" value="Karakter Arama" onclick="bul()">
</form>

</body>
</html>



indexOf koduna çok benzeyen bir başka yöntem koduna geçelim: match. Kullanım şekli indexOf() ile aynıdır. Tek farkı, eğer ifade aranan metnin içinde yoksa null (yok) değerini, varsa ifadenin metinsel değerini alır: 


Javascript:
<html>
<head>
<title>Karakter Bulma</title>
<script language="JavaScript">
function bul()
{
var metin = prompt("Öyle bir şey yazın ki içinde küçük "a" harfi olmasın.")
var karakter=metin.match("a")
if (karakter == "a")
{
document.write("<b>"" + metin + ""</b> ifadesinde "a" harfi var.")
}
else
{
document.write("<b>"" + metin + ""</b> ifadesinde "a" harfi yok.")
}
}
</script>
</head>
<body>

<form>
<p>Aşağıdaki düğmeye basın...</p>
<input type="button" value="Karakter Arama" onclick="bul()">
</form>

</body>
</html>



Yukarıdaki uygulama bir öncekiyle aynı sonucu veriyor ancak match kodu kullanılmakta. 

Metin İçinde Bölüm Belirleme Bir başka yöntem koduna geçiyorum: substr(...,...). substr kodu metinin belli bir bölümünü ifade etmeye yarar. Örneğin met = "Cameron Diaz" şeklindeki metinsel değerlikli bir değişkene kodu şöyle uygularsak: met.substr(7,4), "Diaz" metinsel değerini elde ederiz. Buradaki 7 sayısı, alıntı bölümünün 8. harften başladığını (ilk harf 0. sırada sayılıyor) ve 4 sayısı alıntının 4 harften oluştuğunu belirtiyor. Aşağıdaki uygulamaya bakalım: 


Javascript:
<html>
<head>
<title>Karakter Alıntısı</title>
<script language="JavaScript">
function al()
{
var metin = prompt("Yazılım buraya yazacağınız metnin 3. harfinden itibaren 5 harflik kısmını yazdırır.")
var karakter=metin.substr(2,5)
document.write("<b>"" + metin + ""</b> ifadesindeki 3. harften itibaren 5 harflik kısım şöyledir:")
document.write("<br>"" + karakter + """)
}
</script>
</head>
<body>

<form>
<p>Aşağıdaki düğmeye basın...</p>
<input type="button" value="Karakter Alıntısı" onclick="al()">
</form>

</body>
</html>



Uygulama sayesinde kodun işlevi iyice anlaşıldığını sanıyorum. Boşluklarında birer karakter olduğunu tekrar hatırlatayım. 

Büyük Harfe veya Küçük Harfe Çevirme Bu bölümün son yöntem kodları: toLowerCase (küçük harfe çevirir), toUpperCase (büyük harfe çevirir). Bu kodlar da öncekiler gibi değişkenden sonra .toLowerCase(...) veya .toUpperCase(...) şeklinde kullanılır. Anlaşılması çok kolay olduğu için hemen uygulamamıza geçelim. 


Javascript:
<html>
<head>
<title>Babalama</title>
<script language="JavaScript">
function babala()
{
var metin = prompt("İsminizi yazın...","Buraya lütfen")
var buyuk=metin.toUpperCase(metin)
var kucuk=metin.toLowerCase(metin)
babalasayfa=window.open("","Yeni_Sayfa", "toolbar=no,location=no,directories=no, status=no, menubar=no,scrollbars=yes, resizable=no,copyhistory=no,width=480, height=180, left=200, screenX=200, top=100, screenY=100")
babalasayfa.document.write("<html><head></head><body bgcolor=#ffffcc>")
babalasayfa.document.write("<h1>En büyük " + buyuk + "! Başka büyük yok!</h1><br>")
babalasayfa.document.write("<h4>Sayın " + kucuk + ", babalama ücreti 50 milyon! Hemen ödeyin</h4>")
babalasayfa.document.write("</body></html>")
}
</script>
</head>
<body>

<form>
<p>İsmini yazın lütfen...</p>
<input type="button" value="Babalama Düğmesi" onclick="babala()">
</form>

</body>
</html>



Bu sayfada metinsel yöntem kodlarının bir kısmını inceledik. O kadar çok var ki bu sayfada hepsini incelemenin imkanı yok. Ama hepsi böyle kullanımı basit kodlar. JavaScript Komutlarını anlatan referans sayfalarında tüm metinsel kodları görebilirsiniz.

Java Script Pencere Komutları

Bu sayfaya kadar JavaScript`in temellerini öğrenmek için alert(...) ve document.write(...) komutlarıyla idare ettik. Artık JavaScript`in kodlarına ve inceliklerine ağırlık vereceğiz. 

Bu sayfanın konusu pencere komutları. Birçok öğretici site pencere komutlarını sonlara doğru anlatmış. Ama bence bu konu çok zevkli ve daha önce anlatarak okuyucuları JavaScript`in renkli dünyasına daha kolay çekmek mümkün. Hem neler yapabileceklerini zihinlerinde düşünmeye başlattırabilecek bir konu bu. Sanırım konuyu yeterince övdüm. Sayfamız bir sürü örnekle dolu. Seveceğinizi umarım 

Uyarı Kutusu İlk pencere komutumuz alert(...) kodu. Bu kodu daha önceki sayfalarda da kullanmıştık ve biliyoruz ki uyarı kutusu yapmaya yarar. JavaScript değişkenlerini ve tırnak içinde olmak şartıyla HTML kodlarını uyarı kutusuyla gösterebiliyorduk ve "+" işareti ile bunları birleştirebiliyorduk. Şimdi küçük bir tekrar uygulaması yapalım. 


Javascript:
<html>
<head>
<title>Uyarı Kutusu</title>
<script language="JavaScript">
//Fonksiyonu hazırlıyoruz.
function kup()
{
var y
y = 59 * 59 * 59
alert("59 sayısının kübü = " + y)
}
</script>
</head>
<body>

<form>
59 sayısının kübünü öğrenmek istiyorsanız düğmeye basın.<br>
<!--Düğmeye basıldığında fonksiyon çağrılır.-->
<input type="button" onclick="kup()" value="Sayının kübünü al!">
</form>

</body>
</html>



Onay Kutusu Uyarı kutusu haricinde kullanabileceğimiz bir başka pencere aracı da onay kutusudur. Bu kutu ile kullanıcının onayı alınır. Bu kutuyu yaratmak için confirm(...) komutunu bir değişkene eşitleriz. Kullanıcının onayı true, onay vermemesi ise false şeklinde ifadelendirilir. Uygulamamıza bakalım. 


Javascript:
<html>
<head>
<title>Onay Kutusu</title>
<script language="JavaScript">
//Fonksiyonu hazırlıyoruz.
function bomba()
{
var onay
onay = confirm("Mars gezegenine doğrulttuğunuz nükleer bombalar hazır. Gezegeni yok etmek için onay verin.")
if (onay == true) document.write("Koskoca gezegeni yok ettin de eline ne geçti?")
else document.write("Yok etme operasyonu iptal edildi, tüm Marslılar size teşekkür ediyor.")
}
</script>
</head>
<body>

<form>
Nükleer bombaları ateşlemek için düğmeye basınız.<br>
<!--Düğmeye basıldığında fonksiyon çağrılır.-->
<input type="button" onclick="bomba()" value="ATEŞ!">
</form>

</body>
</html>



Yazı Kutusu Hemen bir başka pencere komutuna geçiyorum. Kullanacağımız pencere aracı yazı kutusu. Yazı kutusu sayesinde kullanıcıyla program arasında bir veri alışverişi yapılır. Kullanıcı kutusu, tıpkı onay kutusu gibi bir değişkene eşitlenir ve prompt(...,...) komutu ile ifade edilir. Görüldüğü üzere prompt komutu iki değer alır. İlk değer yazı kutusunda yer alan bilgi verici yazıyı belirler, ikinci değer ise yazı kutusunun yazma yerinde yer alan yazıyı belirler, bu yazı genellikle girdi bilgisi içerir. Kullanıcının yazdığı yazı, prompt komutunun eşitlendiği değişkene değer olarak atanır. Yazı kutusunda Cancel (iptal) düğmesi yer almaktadır. Kullanıcı bu düğmeye bastığında değişken null (sıfır yani) değeri alacaktır. 


Javascript:
<html>
<head>
<title>Yazı Kutusu</title>
<script language="JavaScript">
//İlk fonksiyonu hazırlıyoruz.
function kabul()
{
alert("İçeri girebilirsin.")
document.write("<h1>Barımıza Hoşgeldiniz!</h1>")
}
//İkinci fonksiyonu hazırlıyoruz.
function red()
{
alert("Hoop ufaklık. Bas geri!")
document.write("<h1>18 yaşından küçükler giremez!</h1>")
}
//Üçüncü fonksiyonu hazırlıyoruz.
function geri()
{
alert("Cevap veremiyorsun değil mi?")
document.write("<h1>Evine dön!</h1>")
}
</script>
</head>
<body>

<script language="JavaScript">
var yas= prompt("Yaşınız kaç acaba?","Lütfen yaşınızı rakam ile yazınız...")
if (yas >= 18) kabul()
if (yas < 18 && yas > 0) red()
if (yas == null || yas == "") geri()
</script>

</body>
</html>



Yeni Pencere Açma Yeni bir pencerede sayfa açmak için window.open(...) kodundan yararlanılır. Parantez içine açılacak sayfanın adresi yazılır. 


Javascript:
<html>
<head>
<title>Yeni Pencere, yeni sayfa.</title>
<script language="JavaScript">
//Fonksiyonu hazırlıyoruz.
function pencere()
{
//Açılacak sayfanın dosya ismi: dersjscr.asp
window.open("dersjscr.asp") }
</script>
</head>
<body>

<form>
JavaScipt`e giriş sayfasını açmak için düğmeye basın.<br>
<!--Düğmeye basıldığında fonksiyon çağrılır.-->
<input type="button" onclick="pencere()" value="JavaScript`e Giriş">
</form>

</body>
</html> 



Bu uygulamayı çok rahat anlamışsınızdır, bu uygulamada kod varsayılan değerleriyle biçimlendiriliyor. Ama şimdiki uygulamayı çok dikkatli inceleyin, uygulamadan sonra gerekli açıklamayı yapacağım. 


Javascript:
<html>
<head>
<title>Yeni Pencere, yeni sayfa.</title>
<script language="JavaScript">
//Fonksiyonu hazırlıyoruz.
function pencere()
{
//Açılacak sayfanın dosya ismi: dersjscr.asp
window.open("dersjscr.asp", "Yeni_Sayfa", "toolbar=no,location=no,directories=no, status=no, menubar=yes,scrollbars=yes,resizable=no,copyhistory=yes,width=760, height=460") }
</script>
</head>
<body>

<form>
JavaScipt`e giriş sayfasını açmak için düğmeye basın.<br>
<!--Düğmeye basıldığında fonksiyon çağrılır.-->
<input type="button" onclick="pencere()" value="JavaScript`e Giriş">
</form>

</body>
</html> 



Bu uygulamadaki pencere açma komutu biraz daha değişik: open.window(dosya adresi, pencere ismi, pencere özellikleri). Aşağıdaki listede pencere özelliklerini ve açıklamalarını görüyorsunuz: 
menubar Pencerenin üst bölümünde yer alan gözatıcı (browser) menü çubuğunu ifade eder. 
menubar=yes 
status Pencerenin alt bölümünde yer alan küçük mesajları ifade eder. 
status = no 
scrollbars Kaydırma çubuklarını ifade eder. 
scrollbars = yes 
resizable Pencerenin büyüklüğünün fare ile değiştirilebilirliğini ifade eder. 
resizable = no 
width Pencere genişliğini piksel cinsinden ifade eder. 
width = 600 
heigth Pencere yüksekliğini piksel cinsinden ifade eder. 
heigth = 400 
toolbar Pencerenin üstünde, menü çubuğunun altında yer alan gözatıcı araç çubuğunu ifade eder. 
menubar = no 
location Pencerenin adres kutusunu ifade eder. 
location = 600 
directories Netscape gözatıcılarının "What`s new!", "What`s cool!" isimli dizinlerini ifade eder. 
directories = no 
left Pencerenin ne kadar solda yer alacağını belirler; Netscape göz atıcıları desteklemiyor. 
left = 100 
screenX Pencerenin ne kadar solda yer alacağını belirler; Internet Explorer göz atıcıları desteklemiyor. 
screenX = 100 
top Pencerenin ne kadar üstte yer alacağını belirler; Netscape göz atıcıları desteklemiyor. 
top = 50 
screenY Pencerenin ne kadar üstte yer alacağını belirler; Internet Explorer göz atıcıları desteklemiyor. 
screenY = 50 

NOT1: Internet Explorer ve Netscape Navigator pencereyi konumlandırmak için farklı özellikler kullanılıyor. Her ikisinin desteklediği özellikleri beraber kullanırsanız sorun kalmaz. 

NOT2: Evet/hayır tipi değer alan (boolean) özellikleri yes/no veya 1/0 gibi değerler alır. 

Çok Sayıda Pencere Açma 
Birden fazla pencereyi tek tıklamayla nasıl açarız? Her pencere açma komutunu bir değişkene eşitleyen fonksiyon kurarız: 


Javascript:
<html>
<head>
<title>Yeni pencereler.</title>
<script language="JavaScript">
//Fonksiyonu hazırlıyoruz.
function pencere()
{
//Sayfalar açılıyor.
a1 = window.open("dersjscr.asp?DersNo=1", "Ders1", "toolbar=no,location=no,directories=no, status=no, menubar=no,scrollbars=yes,resizable=no,copyhistory=yes,width=760, height=460")
a2 = window.open("dersjscr.asp?DersNo=2", "Ders2", "toolbar=no,location=no,directories=no, status=no, menubar=no,scrollbars=yes,resizable=no,copyhistory=yes,width=760, height=460")
a3 = window.open("dersjscr.asp?DersNo=3", "Ders3", "toolbar=no,location=no,directories=no, status=no, menubar=no,scrollbars=yes,resizable=no,copyhistory=yes,width=760, height=460")
a4 = window.open("dersjscr.asp?DersNo=4", "Ders4", "toolbar=no,location=no,directories=no, status=no, menubar=no,scrollbars=yes,resizable=no,copyhistory=yes,width=760, height=460")
a5 = window.open("dersjscr.asp?DersNo=5", "Ders5", "toolbar=no,location=no,directories=no, status=no, menubar=no,scrollbars=yes,resizable=no,copyhistory=yes,width=760, height=460")
}
</script>
</head>
<body>

<form>
JavaScipt derslerinin ilk beş sayfasını açmak için düğmeye basın.<br>
<!--Düğmeye basıldığında fonksiyon çağrılır.-->
<input type="button" onclick="pencere()" value="JavaScript Dersleri">
</form>

</body>
</html>



Sayfa Yönlendirme JavaScript kullanarak mevcut pencerede kullanıcının istenen sayfaya yönlendirilmesi için location = "adres" komutunu kullanırız: 


Javascript:
<html>
<head>
<title>Sayfa yönlendirme.</title>
<script language="JavaScript">
//Fonksiyonu hazırlıyoruz.
function yonlendir()
{
//Yönlendirilecek adres: dersjscr.asp?DersNo=1
location = "dersjscr.asp?DersNo=1"
}
</script>
</head>
<body>

<form>
Pencerenizi "JavaScipt`e Giriş" sayfasına yönlendirmek için düğmeye basın.<br>
<!--Düğmeye basıldığında fonksiyon çağrılır.-->
<input type="button" onclick="yonlendir()" value="JavaScript`e Giriş">
</form>

</body>
</html>



Sayfayı Yeniden Yükleme JavaScript kullanarak sayfanın yeniden yüklenmesini (refresh) sağlamak için location.reload() komutundan yararlanılır. 


Javascript:
<html>
<head>
<title>Sayfa yönlendirme.</title>
<script language="JavaScript">
//Fonksiyonu hazırlıyoruz.
function tazele()
{
//Yönlendirilecek adres: derjsct1.html
location.reload()
}
</script>
</head>
<body>

<form>
Sayfayı yeniden yüklemek için aşağıdaki düğmeye basınız.<br>
<!--Düğmeye basıldığında fonksiyon çağrılır.-->
<input type="button" onclick="tazele()" value="Sayfayı yeniden yükle">
</form>

</body>
</html>



Çok Sayfalı Uygulama Geliştirme 
Buraya kadar hep önceden hazırlanmış sayfaları açmayı inceledik. Peki daha önce olmayan bir sayfayı açabilir miyiz? Soruyu daha doğru bir şekilde sorayım: JavaScript ile yazıların bir kısmını yeni bir pencerede yazdırabilir miyiz? Elbette. open.window("...","...","...") komutundaki ilk yere sayfa adresi yazıyorduk; eğer yazmazsak yeni bir sayfa açılmış olur. Bu kodu bir değişkene eşitleyerek, yeni sayfanın ismini belirlemiş oluruz ve o sayfaya yazılması gerekenleri, o isimle tanımladığımız nesnelere yazarız. Uygulamayı inceleyince anlayacaksınız. 


Javascript:
<html>
<head>
<title>Dokümanları başka sayfada gösterme.</title>
<script language="JavaScript">
//Fonksiyonu hazırlıyoruz.
function yenipencere()
{
//Yepyeni bir sayfa açıyoruz.
yenisayfa = window.open("", "Yeni_Sayfa", "toolbar=no,location=no,directories=no, status=no, menubar=no,scrollbars=no,resizable=no,copyhistory=no,width=280, height=50, left=200, screenX=200, top=100, screenY=100")
yenisayfa.document.write("<font color= blue>Yeni bir pencere açmak ve o pencereye yazı yazmak.</font>")
yenisayfa.document.write("<br>İşte bütün mesele bu!")
yenisayfa.document.write("<br>Bu yöntemle daha neler yapılır, neler!")
}
</script>
</head>
<body>

<form>
Başka bir sayfa yaratmak için düğmeye basın.<br>
<!--Düğmeye basıldığında fonksiyon çağrılır.-->
<input type="button" onclick="yenipencere()" value="Yeni Pencere">
</form>

</body>
</html>



Pencere Kapatma Bu ders konumuz gereği bir sürü sayfayı JavaScript ile açtık ama hepsini elimizle kapattık. İsterseniz bir de JavaScript`le kapatalım. Komutumuz çok basit: window.close(). 


Javascript:
<html>
<head>
<title>Sayfayı kapatmak.</title>
<script language="JavaScript">
//Fonksiyonu hazırlıyoruz.
function kapat()
{
//Sayfa kapatılıyor.
window.close()
}
</script>
</head>
<body>

<form>
Sayfayı kapatmak için aşağıdaki düğmeye basınız.<br>
<!--Düğmeye basıldığında fonksiyon çağrılır.-->
<input type="button" onclick="kapat()" value="Sayfayı kapat">
</form>

</body>
</html>



Pencere Kutusu Son olarak window.status komutu üzerinde duralım. Pencerenin altında linklerin yazılı olduğu kutucuğa yazı yazmaya yarar. Örneğin "Doğum günün kutlu olsun Banu" yazdıralım. 


Javascript:
<html>
<head>
<title>Sayfayı kapatmak.</title>
<script language="JavaScript">
//Fonksiyonu hazırlıyoruz.
function kutlama()
{
//Sayfa kapatılıyor.
window.status = "Doğum günün kutlu olsun Banu"
}
</script>
</head>
<body>

<form>
Düğmeye basarsanız pencerenin alt kısmında bir mesaj göreceksiniz.<br>
<!--Düğmeye basıldığında fonksiyon çağrılır.-->
<input type="button" onclick="kutlama()" value="Banu`ya mesaj">
</form>

</body>
</html>



Bu bölümde pencerelerle ilgili windows. başlangıçlı bazı kodlar gördük. Böyle birçok kod var; hepsini ileriki (DHTML) derslerimizde ayrıntılı olarak işleyeceğiz.