Javascript

Butonlar

2010-11-27T08:21:00.001-08:00

Javascript Butonlar

Bu örnekte input type="button" giriş elemanının bir buton olduğunu, name="but1" programda bu butonu but1 olarak isimlendirdiğinizi value="Buraya Basınız" de butonun üzerinde Buraya Basınız metninin yazılacağını gösterir.

Text Alanları

2010-11-27T08:20:00.001-08:00

Javascript Text Alanları

Örnek ıçin tıklayınız...

///////////////////////////////////////////////

Bu kodda Goster isimli bir fonksiyonumuz var ve metin ismiyle bir parametre alıyor.Daha sonra da bu parametreyi alert fonksiyonuyla gösteriyor. Bu parametreyi gönderen de butonun onclick olayı. Ve butonun gönderdiği parametre form1 formunun text1 nesnesinin değeri. Programda ilk olarak bu değeri Buraya gireceğiniz yazı butona basınca alert olarak gelecektir. vermiştik. Buradan da anlaşılacağı gibi bu değer text alanının içindeki metin. Yani text box'a birşey yazılmadığı durumda bu alanda Buraya gireceğiniz yazı butona basınca alert olarak gelecektir. yazacak ve butona basıldığında da uyarı kutusunda bu mesaj gelecektir.

Eğer çok satırlı bir text alanı yaratmak istiyorsak

komutu yerine ;

<textarea name="TextBox" rows="10" cols="80">Alanın içindeki yazı</textarea>

Textarea tanımında rows alandaki satır sayısı, cols her bir satırın kaç karakter uzunluğunda olacağını belirten sayıdır.

Radio Butonlar

2010-11-27T08:19:00.001-08:00

Javascript Radio Butonlar

Radio Butonlar genellikle bir çok seçenekten sadece bir tanesinin seçilmesini istediğimiz durumlarda kullanılır. Radio butonların sadece bir tanesinin seçilmesini sağlamak için name özelliklerinin aynı olması gerekmektedir. Aşağıdaki örnekte bilgisayarınızın işlemcisinin markası sorulmaktadır:

<form name="form1">
<input type="radio" value="Intel" name="cpu" checked> Intel
<input type="radio" value="Cyrix" name="cpu"> Cyrix
<input type="radio" value="AMD" name="cpu">AMD
</form>

Değeri Intel olan radio butonda bulunan checked kodu sayfa açıldığına bu butonun işaretli olarak geleceğini belirtir. Radio butonların değerlerini alırken (örnekte üç tane olmasına rağmen) cpu adında tek bir nesnemiz varmış gibi form1.cpu.value dememiz gerekecektir. Seçili olan radio butonun değeri Intel, Cyrix veya AMD olarak gelecektir.

Check Boxlar

2010-11-27T08:17:00.001-08:00

Javascript Check Boxlar

Check Boxlar da radio butonlar gibi iki durumlu giriş elemanlardır. Yalnız burada fark check boxların birden fazlasının da seçili olabilmesi durumudur. Her biri ayrı nesnedir ve her birinin seçili olma veay olmama durumu vardır. Durumunun anlaşılması ise checked komutu ile yapılmaktadır. Örneğin;

Şeklinde tanşmlanmşþ bir check box, daha sonra form.chck1.checked komutuyla kontrol edildiginde seçili ise True seçili değilse False degeri getirecektir.

Drop-Down Menüler

2010-11-27T08:16:00.001-08:00

Javascript Drop-Down Menüler

Bu eleman birçok seçeneği açılan bir menü şeklinde sunar.

<FORM name="guideform">
<SELECT name="guidelinks">
<OPTION SELECTED value="http://google.com">Google
<OPTION value="http://javascript-dersi.blogspot..com">Ana Sayfa
</SELECT>

<INPUT type="button" name="go" value="Go!"
onClick="window.location=document.guideform.guidelinks.options
[document.guideform.guidelinks.selectedIndex].value"> </FORM>

Örnek ıçin tıklayınız...

Burada önemli olan bir özellik size özelliğidir. Kaç seçeneğin gösterilmesini istiyorsak size değerini o kadar artırmalıyız. Ayrıca bir çok eleman olduğu gibi onClick olayını değil onChange olayını kullanıyoruz.

Form Komutları

2010-11-27T08:15:00.001-08:00

Javascript Form Komutları

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

Bu form komutlar daha çok asp , php ve cgi gibi web programlama dillerinde kullanılır. Çunkü formların asıl kullanım alanları ziyaretcilerden bilgi girişi için kullanılır. Javascirpt de ise bilgileri saklamaz, depolamaz, veri tabanı oluşturmaz; javascript sadece asp , php ve cgi gibi web programlama dillerinde kullanıcın girdigi bilgilerin dogrulugunu sunucuyu yormadan tespit etmek için kullanılanılır örnegin ziyaretcinin dogru e-posta adresi girdigini sunucuya sormadan javascript ile belirlenebilir. Böylece sunucu tarafına bu iş bırakılmadıgından hem hız kazanılır ve sunucu boş yere işlem yapmaktan kurtulur.

///////////////////////////////////////////////

Güzel Bir Javascript Form Uygulaması

Örnek Uygulama için tıklayınız...

Form Nesnesi

2010-10-26T10:48:00.001-07:00

Javascript Form Nesnesi

Form, Javascript için bir nesnedir. Ayrıca Form nesnesinin bir ögesi olan INPUT, kendisi de ad ve değer alabildiğine göre, Javascript için bir nesne sayılır. bu nesneye daima içinde bulunduğu nesne “dolayısıyla” atıfta bulunabilirsiniz. Bu tür atıflarda bulunurken, şu kurala uymanız gerekir:

nesneAdı.özellikAdı

Her nesnenin kendine ait bir metodu olabilir; bir metod birden fazla nesne ile birlikte kullanılabilir. Bu gibi ifadeleri şöyle yazarız:

nesneAdı.metodAdı (argüman)

Javascript’e olayın olması halinde icra edilmek üzere özel emirler verilebilir.

Bu tür komutların yazılmasında şu yöntem izlenir:

event=”fonksiyon_veya_metod (argüman)”

Java script nesnelerden Window- Tarayıcı ve Çerçeve nesnelerini inceleyelim

Form nesneleri ile ilgili bilgiye Formlar kısmında bulabilirler.

Window Nesnesi

2010-10-26T10:40:00.001-07:00

Javascript Window Nesnesi

Window Nesnesi-Pencere açma ve kapama

Pencere açmak için:

window.open("Url_adı" , "pencere_adı" , "pencere_özellikleri");

Url_adı: Açılacak pencerenin adresini

Örnek :

window.open("http://javascript-dersi.blogspot.com")

veya site içi bir sayfa açmak için

window.open("pencere-acma.html")

Pencere_adı: Pencerenin adını gosterir. Birden fazla pencere ile çalışma yapıyorsak hangi pencereye bir komut gönderdiğinizin belli olması için gereklidir.

Örnek:
Window.open("index.html" , "ilksayfa");

Pencere_özellikleri: Pencerenin özellikleri ile alakalıdır. Bir pencerenin değiştirilebilir özellikleri şunlardır

menubar: Tarayıcıların en üst kısmında bulunan File(Dosya) , Edit(Düzen) vb.menülerin bulunduğu satırdır. gösterilmesi (=1) veya gizlenmesi (=0).
toolbar: Tarayıcılarda üst kısımda Back(Geri) , Forward(İleri) vb. tuşların bulunduğu kısımdır. gösterilmesi (=1) veya gizlenmesi (=0).
location: Tarayıcılarda ziyaret etmek istediğiniz web adresini yazdığınız kısım. çubunun gösterilmesi (=1) veya gizlenmesi (=0).
status: Tarayıcıların en alt kısmında hangi dosyanın yüklendiği ile ilgili bilgi veren kısımdır. gösterilmesi (=1) veya gizlenmesi (=0).
scrollbars: Sağ tarafta bulunan sürgü çubuklarıdır.
resizable: Pencerenin boyutlarının kullanıcıya bırakılması veya kesin değerler almasıyla ilgilidir.
width: Açılacak olan pencerenin piksel cinsinden genişliğidir.
height: Açılacak olan pencerenin piksel cinsinden boyudur.
left: Açılacak olan pencerenin ekranın sol tarafından kaç piksel uzaklıkta olacağını belirler.
top: Açılacak olan pencerenin ekranın üstünden kaç piksel aşağıda olacağını belirler. Eğer pencere özellikleri kısmında değişmesini istemediğiniz bir özellik varsa onu yazmanıza gerek yoktur. Bu değerler tarayıcının banko(default) değerlerinden alınır.
copyhistory: Açılacak olan pencerenin history kaydının (daha önce ziyaret edilen URl adreslerinin tutulduğu çizelgenin) yeni pencereye de kopyalanması.
outerWidth: Açılacak olan pencerenin piksel olarak genişliği.
outerHeight: Açılacak olan pencerenin piksel olarak yüksekliği.
alwaysRaised: Açılacak olan pencerenin masaüstünde açık bütün pencerelerin üzerinde kalmasını sağlar. (Sadece Windows ve MacOS’de işler.)
z-lock: Açılacak olan pencerenin içi tıklansa bile masaüstünde açık bütün pencerelerin altında kalmasını sağlar. (Sadece Windows ve MacOS’de işler.)

(Evet-Hayır anlamına değer alan özellikleri 1 ve 0 ile belirtebileceğiniz gibi yes (evet) ve no (hayır) ile de belirtebilirsiniz.)

Şimdi bir pencere açalım. Açtığımız pencerede dosya,düzen ve ileri,geri tuş takımı olmasın. Pencerenin boyutları 200x300 piksel olsun. Bizi www.javascript.fatfreehost.com adresine göndersin.

Şimdi buna göre kodumuz :

<SCRIPT language="JavaScript1.2">
function openwindow()
{
window.open("http://javascript-dersi.blogspot.com",
"mywindow","location=1,status=1,scrollbars=1,menubar=no, toolbar=no, scrollbars, width=200,height=300");
}
</SCRIPT>

<A href="javascript: openwindow()">Bu Örnegi İncelemek İçin Tıklayınız</A>

Pencere kapatmak için: Window.close()

2010-10-26T10:39:00.003-07:00

Javascript Pencere kapatmak için: Window.close()

<a href="JavaScript:onClick= window.close()">Pencereyi kapat</a>

Örnek İçin tıklayınız...

window.location.protocol

2010-10-26T10:39:00.001-07:00

Javascript window.location.protocol

Window nesnesinin location.protocol nesnesi ise yüklenen dosyanın sabit diskten mi yoksa internetten mi yüklendiğini gösterir.

http: ile dosyanın internetten yüklendiğini belirtir.
file: ile dosyanın sabit diskten yüklendiğin belirtir.

Mesela şöyle bir örnekle dosyanın nerden yüklendiğini kontrol edelim.

Örnek İçin tıklayınız...

Window Nesnesi - window.history

2010-10-26T10:38:00.002-07:00

Javascript Window Nesnesi - window.history

Tarayıcımızda ki İleri-Geri Tuşları ('back' ve 'forward') görevini üstlenmektedir bu nesne

Window'un history özelliği ile bir önceki sayfaya erişim sağlanabilir.

<A HREF="javascript: window.history. go( -1 ) " title="Java Script Dersi - nesneler"> Geri Gidiniz </a>

Geri Gidiniz

Bir önceki sayfaya -1 ile ulaşabilirsiniz. Bu değeri arttırarak daha önceki sayfalara da ulaşım sağlanabilir.

Ya da history.back() için history.go(-1) ve history.forward() için history.go(1) de yazabilirsiniz.

Window Nesnesi-Status Bar kullanımı

2010-10-26T10:38:00.001-07:00

Javascript Window Nesnesi-Status Bar kullanımı

Status bar window nesnesinde belirttiğimiz gibi tarayıcıların en alt kısmında yer alan hangi dosyaya gidileceği veya yüklendiği ile ilgili bilgi veren kısımdır.

Status barı değiştirmek için şu kodları yazmalıyız.

window.status="Javascript Derslerine Hoş Geldiniz";

Tarayıcı Nesnesi

2010-10-26T10:37:00.000-07:00

Javascript Tarayıcı Nesnesi

Tarayıcılar Javascript tarafından bir nesne olarak algılanır. Bu nesnenin özelliklerini şöyle sıralayabilir.

appname : Tarayıcının adı
appVersion : Tarayıcının Versionu
appCode Name : Tarayıcının kod adı
userAgent : Tarayıcının ana makinaya (sunucuya) kendini tanıtırken verdiği isim

<html>
<head><title>Tarayıcı Özellikleri</title></head>
<body>
<script language="javascript1.2">

</script>
</body>
</html>

Örnek İçin tıklayınız...

Javascript Çerçeve (Frame) Nesnesi

2010-10-26T10:36:00.000-07:00

Javascript Çerçeve (Frame) Nesnesi

Çerçeve tekniği bir web sayfası üzerinde birden fazla web sayfası görüntülenmek istendiğinde kullanılır.

Javascript açısından her bir çerçeve bir pencere sayılır. Bunların içeriğini kontrol etmek için belli komut stilleri vardır.

Şimdi onları görelim:

Top: En üst pencere (Yani tarayıcının kendisi)
Parent: Herhangi bir çerçeveyi oluşturan düzenleyici bölüm
Self: Çerçevenin kendisi

Javascript çerçeve düzenleyici(FrameSet)leri içerisindeki diğer alt çerçeveleri 0 'dan başlayarak numaralar. Bu numaralar yardımıyla çerçeve özelliklerini değiştirebiliriz. Örneğin iki tane çerçeveye sahip bir sayfada birinci çerçeve parent.frames[0] diğeri ise parent.frames[1] olarak adlandırılır. Örneğini verdiğimiz gibi iki çerçeveli bir web sayfamız olduğunu varsayalım.

Ana sayfamız ki bu sayfa tarayıcıya sayfanın iki html sayfasında oluştuğunu söyleyen , çerçeve düzenleyicisinin olduğu sayfanın kodları şu şekilde yapın.

Bu sayfayı frame.html olarak kaydedin.

<html>
<head>
<title>Frame (Cerceve)</title>
</head>

<frameset cols="50%,*">
<frame name="sol" src="sol.html">
<frame name="sag" src="sag.html">
</frameset>
</html>

Bu sayfayı sol.html olarak kaydedin.

<html>
<head>
<title>Sol Frame</title>
</head>
<body>
<script language="javascript1.2">

</script>
</body>
</html>

Bu sayfayı sag.html olarak kaydedin.

<html>
<head>
<title>Sag Frame</title>
</head>
<body>
<script language="javascript1.2">

</script>
</body>
</html>

Bu Örnegi İncelemek İçin tıklayınız...

Zaman Değeri Atama

2010-10-01T08:56:00.001-07:00

Javascript Zaman Değeri Atama

İstersek zaman ayarını istediğimiz tarihe veya saate getirebiliriz. Bu 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")

Zaman Aralığı

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

[ Url Yonlendirme ] [ Tarih Fonksiyonu ]

Url Yonlendirme

2010-10-01T08:55:00.000-07:00

Javascript Url Yonlendirme

<html>
<head>
<title>Javascript Yönlendirme Uygulaması</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
</head>

Örnek İçin tıklayınız...

[ Zaman Değeri Atama ] [ Tarih Fonksiyonu ]

Değişkenleri Tanımlamak

2010-08-22T10:39:00.000-07:00

Javascript Değişkenleri Tanımlamak

Global değişkenlerin var kullanılarak tanımlanması gerekmez Bununla birlikte Lokal değişkenler her zaman var kullanılarak tanımlanmalıdır.

var a=115;
var cevap=null ;
var bedel=37.5;
var durum=true;
var str=”selam”;

Dikkat ederseniz satır sonlarında birer tane " ; " konulmuştur.

----- * * -----

Değişken Türleri
Değişken Adlandırma Kuralları
Değişkenleri Tanımlamak
DİZİLER
- Dizi Yaratmak
- Dizi Yöntemleri

----- * * -----

Değişken Türleri

2010-08-22T10:38:00.000-07:00

Javascript Değişken Türleri

Numbers Integer ve kayan noktalı sayılar içerir. Positif, 0 ya da negatif olabilir. Booleans True ya da False, alabiirler

Strings Karakter bilgi içeren bir değişkendir.

Objects nesne= new Object();

Null Değersiz. hiç veri olmadığı anlamına gelir (Sıfır yada boş dizgi null’a eşit değildir)

Undefined Bir değişken yaratıldıktan sonra içerdiği tanımsın değer.

Değişkenler büyük küçük harfe duyarlıdır. Genel kural, sadece küçük harfli değişkenler kullanma şeklinde oluşmuştur

----- * * -----

Değişken Türleri
Değişken Adlandırma Kuralları
Değişkenleri Tanımlamak
DİZİLER
- Dizi Yaratmak
- Dizi Yöntemleri

----- * * -----

Değişken Adlandırma Kuralları

2010-08-22T10:37:00.002-07:00

Javascript Değişken Adlandırma Kuralları

Bir değişkeni adlandırırken şu kullara dikkat edilmeli.

1.) Boşluk içeremez.

2.) 255 karakteri geçemez.

3.) Adlanrılan ad tek olmalıdır.

4.) - işareti kullanılabilir.

----- * * -----

Değişken Türleri
Değişken Adlandırma Kuralları
Değişkenleri Tanımlamak
DİZİLER
- Dizi Yaratmak
- Dizi Yöntemleri

----- * * -----

Diziler

2010-08-22T10:37:00.001-07:00

Javascript Diziler

Bir değişkene birden fazla değer atamak istediğimizde dizileri kullanırız.
Diziler aynı anda sahip bir seri değişkeni saklamak için kullanılır. Diziler Javascript de sıfır dizinle başlar

----- * * -----

Değişken Türleri
Değişken Adlandırma Kuralları
Değişkenleri Tanımlamak
DİZİLER
- Dizi Yaratmak
- Dizi Yöntemleri

----- * * -----

Dizi Yaratmak

2010-08-22T10:36:00.000-07:00

Javascript Dizi Yaratmak

----- * * -----

Değişken Türleri
Değişken Adlandırma Kuralları
Değişkenleri Tanımlamak
DİZİLER
- Dizi Yaratmak
- Dizi Yöntemleri

----- * * -----

Dizi Yöntemleri

2010-08-22T10:35:00.000-07:00

Javascript Dizi Yöntemleri

Diziyi yönetebilmek için dizi nesnesinin yöntemlerini kullanmamız gerekir.

concat Üçüncü bir dizi yaratmak için iki diziyi birleştirir
join Bir dizinin öğelerini bir dizi içerisinde bir araya getirir.
Pop dizinin son öğesini siler
Shift dizinin ilk öğesine siler
Push diziye eleman ekler
Reverse dizi öğelerini tersine çevirir.
Sort dizi elemanlarını sıralar
concat Üçüncü bir dizi yaratmak için iki diziyi birleştirir
join : Bir dizinin öğelerini bir dizi içerisinde bir araya getirir.
Pop : dizinin son öğesini siler
Shift : dizinin ilk öğesine siler
Push : diziye eleman ekler
Reverse :dizi öğelerini tersine çevirir.
Sort : dizi elemanlarını sıralar

Bu Örnegi Görmek İçin tıklayınız...

----- * * -----

Değişken Türleri
Değişken Adlandırma Kuralları
Değişkenleri Tanımlamak
DİZİLER
- Dizi Yaratmak
- Dizi Yöntemleri

----- * * -----

Kodlara Açıklamalar Yapmak

2010-07-12T14:21:00.000-07:00

Javascript Kodlara Açıklamalar Yapmak

Bütün programlama dillerinde olduğu gibi, kod yazarken açıklama yazmak için kullanabileceğimiz bir karakter vardır

Örnek yapı.

<!-bu bir açıklamadır //-->.
sayilar[0]=5; //diziye değer aktarıldı

<!- açıklma //--> ve // açıklama;

Bu işaretlerin arkasına yazılan metinler, içeriği ne olursa olsun kod olarak algılanmaz.

Dış Dosyaları Kullanma

2010-07-12T14:19:00.003-07:00

Dış Dosyaları Kullanma

JavaScript kodu URL olarak da kullanmak mümkündür:

Dış dosya , javascript kodunu içeren bir metin dosyasıdır ve dosya adı bir “.js” uzantısıyla biter. Dış dosyaya Html etiketleri ekleyemezsiniz.

Örnek Kullanım;

BODY İçine

2010-07-12T14:19:00.001-07:00

<BODY> İçine

TML belgesinin BODY kısmında JavaScript kullanmak için iki yol vardır:

Doğrudan çalışacak kodlar ve kullanıcı tarafından çalışacak kodlar:

Doğrudan çalışacak JavaScript kodları <SCRIPT> etiketi kullanılarak HTML belgesinin istenilen yerine yazılır. Bu cümleler tarayıcı tarafından okunduğu anda yerine getirilir:

Daha çok kullanılan diğer bir yöntem ise kullanıcı tarafından bir olayın başlatılmasıyla bir JavaScript kodunun çalıştırılmasıdır. Örneğin bir düğmeye tıklamak gibi:

<HTML>
<HEAD>

<SCRIPT Language="JavaScript">
function Test() {
………………
}
</SCRIPT>

</HEAD>
<BODY>

Butona tıklanıldıgında function Test() javascript fonksiyonu çalışacaktır.

HEAD bölümü içinde

2010-07-12T14:17:00.000-07:00

<HEAD> İçine: HEAD bölümü içinde <SCRIPT>ve </SCRIPT> etiketlerini kullanarak istediğiniz JavaScrip kodunu HTML belgesine ekleyebilinir.

<head> kısmanı yerleştirilen kodlar sayfa tamamen yüklendikten sonar script kodları işlenmeye başlanır.

Örnek:

for…in Döngüsü

2010-06-29T10:13:00.002-07:00

Javascript for…in Döngüsü

for..in ifadesi, bir nesnenin özelliklerini ya da bir dizinin öğelerine erişmek için kullanılır

[ for ] [ do … while ] [ while ]

do…while döngüsü

2010-06-29T10:13:00.001-07:00

Javascript do…while Döngüsü

do..while döngü ifadesi, bir koşul doğru olduğu sürece ifade bloğunun çalışmasını sağlar.

Yapısı:

do

{ deyimler;}

while (koşul)

[ for ] [ while ] [ for…in ]

while Döngüsü

2010-06-29T10:12:00.000-07:00

Javascript while Döngüsü

do..while ile aynıdır yalnız koşul döngünün başında kontrol ediliyor.

Yapısı:

while (koşul)

{ deyimler; }

Not: Deyimlerde oluşturmada fonksiyonlardan, karşılaştırma işleçleri ve değişkenlerden faydalanılır.

[ for ] [ do … while ] [ for…in ]

for döngüsü

2010-06-29T10:11:00.000-07:00

Javascript for döngüsü

for döngüsünde koşul sağlaması bozuluncaya kadar döngü sürdürülür. Döngünün yineleneceği sayı bir sayaca bağlıdır.

Yapısı:

for (başlangıç değeri; koşul; artırım)

{ deyimler; }

Örnek:

for (i=0; i<10; i++)

{ deyimler; }

[ do … while ] [ while ] [ for…in ]

switch ifadesi

2010-06-29T10:10:00.002-07:00

Javascript switch ifadesi

Birden çok if…else kullanmak gerekiyorsa, switch ifadesini kullanmak daha iyidir.

< p> switch ifadesi, bir deyimin değerine bağlı olarak çeşitli ifade seceneklerinden birini işletir. Eğer hiçbir eşleşme yoksa, default bloktaki ifadeler işlenir. break; ifadesi eşleşmenin altındaki seceneklerin işletilmesini engellemek içindir.

Kullanımı:

Burada “deyim” bir degeri vardır ve “etiket1”, “etiket2” degerlerinde hangise eşitse ilgili ifade işlenir eger “etiket1”, “etiket2” degerleri “deyim” degerine eşit degilse default ifade işlenir.

[ if...else ]

if….else ifadeleri

2010-06-29T10:10:00.001-07:00

Javascript if….else döngüsü

[ switch ]

Statusbar Uygulamarı

2010-02-24T11:58:00.001-08:00

Statusbar Uygulamarı

Sayfa Başlığında İlerleyen Yazı - Örneği İncelemek İçin Tıklayınız ..

Sayfa Başlığında Terten İlerleyen Yazılar - Örneği İncelemek İçin Tıklayınız ..

Status Bar Uygulaması - Örneği İncelemek İçin Tıklayınız ..

Status bar Bedava Örnekleri - Örneği İncelemek İçin Tıklayınız ..

Zemin Background Arkaplan Uygulamaları

2010-02-24T11:57:00.004-08:00

Zemin Background Arkaplan Uygulamaları

Zemin Background Rengini Değiştiren Uygulama - Kodları İncelemek için Tıklayın

Background Rengi Yanar Döner Renkte - Kodları İncelemek için Tıklayın

ArkaPlan Rengini Kullanıcı Değiştirsin - Kodları İncelemek için Tıklayın

Takvim Ve Sayaç Uygulamaları

2010-02-24T11:57:00.003-08:00

Takvim Ve Sayaç Uygulamaları

Tarih ve saati gösteren Script - Bu Uygulama İçin Yıklayın ..

Tarih ve saati ve ziyaret süresini Textbox içinde gösteren Script - Bu Uygulama İçin Yıklayın ..

Takvim Calendar - Bu Uygulama İçin Yıklayın ..

Sayfaya Ziyaret ettiğiniz Saati Gösterir - Bu Uygulama İçin Yıklayın ..

Sadece Saati Gösteren Script - Bu Uygulama İçin Yıklayın ..

Günün Tarihini ve Gününün Adını veren Script - Bu Uygulama İçin Yıklayın ..

Kol Saati şeklinde bir Örnek - Bu Uygulama İçin Yıklayın ..

Button Üzerinde Saat - Bu Uygulama İçin Yıklayın ..

Sadece Tarihi gösteren Script - Bu Uygulama İçin Yıklayın ..

Animasyon Uygulamalar

2010-02-24T11:57:00.001-08:00

Animasyon Uygulamalar

Animasyonlu Resim Uygulaması - Örnek İçin Tıklayın ..

Blur Efetkli Animasyonlu Resim Uygulaması - Örnek İçin Tıklayın ..

Her Sayfa Yenilemede Farklı Yazı - Örnek İçin Tıklayın ..

Animasyonlu Yazı Uygulaması - Örnek İçin Tıklayın ..

Yanar Söner Yazılar Scripti - Örnek İçin Tıklayın ..

Efektli Yazı Uygulaması - Örnek İçin Tıklayın ..

Yazılar Teker teker Geliyor - Örnek İçin Tıklayın ..

Sayfaya Animasyonla Gelen Yazı - Örnek İçin Tıklayın ..

Daktilo Yazı - Örnek İçin Tıklayın ..

Diger Uygulamalar

2010-02-24T11:55:00.000-08:00

Diger Uygulamalar

Doviz Örnegi İncelemek İçin tıklayınız...Uygulamanın Kodlarını Görmek İçin Tıklayın

Javayı Destekliyormu Örnegi İncelemek İçin tıklayınız...Uygulamanın Kodlarını Görmek İçin Tıklayın

Kacıncı Geliş Örnegi İncelemek İçin tıklayınız...Uygulamanın Kodlarını Görmek İçin Tıklayın

Son Gncelleme Örnegi İncelemek İçin tıklayınız...Uygulamanın Kodlarını Görmek İçin Tıklayın

Refresh Örnegi İncelemek İçin tıklayınız...Uygulamanın Kodlarını Görmek İçin Tıklayın

Sag Tuş Engel Örnegi İncelemek İçin tıklayınız...Uygulamanın Kodlarını Görmek İçin Tıklayın

Print Etme Örnegi İncelemek İçin tıklayınız...Uygulamanın Kodlarını Görmek İçin Tıklayın

E Posta - e mail Kontrol tıklayınız...Uygulamanın Kodlarını Görmek İçin Tıklayın

İleri Geri Buttonları tıklayınız...Uygulamanın Kodlarını Görmek İçin Tıklayın

Yasal Uyari

2010-02-24T11:36:00.001-08:00

javascript-dersi.blogspot.com reklam sponsorlarıyla çalışmaktadır. Sponsorumuz olan Google Adsense Reklamlarının yayıncısıdır. Google üçüncü taraf satıcısı olarak javascript-dersi.blogspot.com'da reklam yayınlamak için çerezlerden yararlanır. Bu sebeble hem Google hemde DoubleClick DART çerezi kullanmaktadır bu sayede kullanıcılarının ilgi alanlarına göre Reklam yayınlama Tekniğini kullanmaktadır. Ziyaretçilerimiz ve üyelerimiz Google Reklam ve içerik ağı ve gizlilik ağı politikası'nın yayınlandığı Advertising and Privacy - Google Privacy Center web adresini ziyaret ederk DART çerezinin kullanmamızı engelleyebilirler.

Özetle: Web sitemizi ziyaret ettiğiniz zamanlarda reklam hizmeti vermek için üçüncü taraf reklam şirketlerini kullanmaktayız. Söz konusu şirketler, bu sitelere ve diğer web sitelerine yaptığınız ziyaretlerden elde ettikleri (adınız, adresiniz, e-posta adresiniz veya telefon numaranız dışındaki) bilgileri ilginizi çekecek ürün ve hizmetlerin reklamını size göstermek için kullanabilir. Bu uygulama hakkında bilgi edinmek için ve söz konusu bilgilerin bu şirketler tarafından kullanılmasını engellemek üzere seçeneklerinizin neler olduğunu öğrenmek isterseniz bu linkten PDF dosyasını indirerek belgenin A ekinden daha fazla bilgiye ulaşabilirsiniz. Pdf Dosyası

javascript-dersi.blogspot.com sitesinde uygulanan gizlilik politikası ile ilgili; her türlü soru, görüş ve düşüncelerinizi bize iletişim sayfasından iletebilirsiniz.

Fonksiyonu Tanımlamak

2010-02-01T11:07:00.000-08:00

Bir Fonksiyonu Tanımlamak

Bir fonksiyon, kendisini göreve çağıran komuttan veya fonksiyondan veri kümesi (argument) alabilir.

Hiçbir arguman kullanılmayacak olsa bile parantezleri kullanmanız gerekir.

Sonuç olarak kendisini çagıran komuta bir değer gönderebilir.

Fonksiyonlar mutlaka SCRIPT etiketinin içinde yer alır.

Bir fonksiyonu çağırmadan önce, onu tanımlanması gerekir.Genel olarak fonksiyonlar HTML belgenin HEAD bölümünde tanımlanır.

Bir fonksiyon istenildiği kadar çağrılabilir(kullanılabillir).

Bunlar İlğinizi Çekebilir »» [Bir Javascript Fonksiyonu Çağırmak]
[Javascript Fonksiyona Değer Gönderme ve Değer Alma]
[Javascript Return İfadesi]
[Javascript Fonksiyonlar - Olay İsmi Ne Zaman Olur]
[JavaScript Fonksiyonlar (Functions)]

Fonksiyonu Çağırmak

2010-02-01T11:06:00.000-08:00

Bir Javascript Fonksiyonu Çağırmak

Bir fonksiyonu işletmek için onu çağırmanız gerekir. Bir fonksiyonu çağırmak için adını ve varsa argümanlarını belirtmemiz gerekir.

Basit Örnek :

<html>
<head>
<script language="Javascript">
function Deneme()
{
alert("Merhaba Javascript");
}
</script>
</head>
<body>
<form name="form1">
<input type="button" value="Buraya Tıkla" onclick="Deneme()">
</form>
</body>
</html>

Örnek İçin tıklayınız...

Burda form daki button elemanın onclick yordamınyla meta taglar arasına yerleştirdigimiz deneme fonksiyonunu çagırmaktadır. Deneme fonsiyonuda javascript’ de hazır bulunan alert metodunu kullanılarak ekrana merhaba uyarısını çıkartacaktır.Bu Örnek Fonksiyonda arguman kullanılmamıştır.

Bunlar İlğinizi Çekebilir »» [Bir Fonksiyonu Tanımlamak]
[Javascript Fonksiyona Değer Gönderme ve Değer Alma]
[Javascript Return İfadesi]
[Javascript Fonksiyonlar - Olay İsmi Ne Zaman Olur]
[JavaScript Fonksiyonlar (Functions)]

Fonksiyona Değer Gönderme ve Değer Alma

2010-02-01T11:04:00.000-08:00

Javascript Fonksiyona Değer Gönderme ve Değer Alma

Bir fonksiyon ile Javascript programının diğer işlemlerinin ilk ilişkisi fonksiyona bir değer gönderme ve ondan bir değer almaktır. Bir fonksiyon, yaptığı işin sonucu olarak, kendisini göreve çağıran komuta veya fonksiyona bir değer verebilir.

Örnek :

<html>
<head>
<script language="Javascript">
function Deneme(param)
{
alert(param);
}
</script>
</head>
<body>
<form name="form1">
<input type="button" value="Buraya Bas" onclick="Deneme('Merhaba Hoşgeldiniz)">
</form>
</body>
</html>

Örnek İçin tıklayınız...

Yukardaki örnekte deneme fonksiyonuna “Merhaba Hoşgeldiniz” argumanı gönderilmekte ve bu argumanı deneme fonksiyonu “param” paremetresine alarak işlemekte.

Bunlar İlğinizi Çekebilir »» [Bir Fonksiyonu Tanımlamak]
[Bir Javascript Fonksiyonu Çağırmak]
[Javascript Return İfadesi]
[Javascript Fonksiyonlar - Olay İsmi Ne Zaman Olur]
[JavaScript Fonksiyonlar (Functions)]

Return ifadesi

2010-02-01T11:03:00.000-08:00

Javascript Return İfadesi

Bu ifade , bir değeri döndürmek için function ifadesiyle birlikte kullanılır.

Bir fonksiyon içinde return ifadesinin kullanımı isteğe bağlıdır. Çünkü javascript fonksiyonlarının hepsi belli bir değeri döndürmez.

function fonksiyonun adı (argüman1, argüman2,....,argümanN)

{
İŞLEMLER;
return değer
}

Buradaki return kodu, işlemlerle bulunan bir değeri fonksiyona atamakta kullanılır. Aşağıdaki uygulamayla daha iyi anlayacaksınız.

function kareal(x)
{
x = x * x
return x
}
</script>
</head>
<body>

Yukardaki örnek Değer Atamalı Fonksiyonlara örnektir.

Değer Atamalı Fonksiyonlar; yaptığı işlemleri bir değere dönüştürüp, bu değeri değişkenlere veya HTML nesnelerine aktarması.

Fonksiyonların gerçekleşmesi için fonksiyonun çağırıldığı olay'ın olması gerekmektedir. Bu olaylardan bazıları şunlardır.

Bunlar İlğinizi Çekebilir »» [Bir Fonksiyonu Tanımlamak]
[Bir Javascript Fonksiyonu Çağırmak]
[Javascript Fonksiyona Değer Gönderme ve Değer Alma]
[Javascript Fonksiyonlar - Olay İsmi Ne Zaman Olur]
[JavaScript Fonksiyonlar (Functions)]

Fonksiyonlar - Olay İsmi Ne Zaman Olur

2010-02-01T11:02:00.000-08:00

Javascript Fonksiyonlar - Olay İsmi Ne Zaman Olur

onClick : Butona basıldığında

onAbort : Stop düğmesine veya bir linke basılarak yüklenme durdurulduğunda

onChange : Seçim yapıldığında veya metin değiştirildiğinde

onError : Resmin veya ekranın yüklenmesinde hata oluştuğu zamanlar

onLoad : Sayfa yüklenmesi tamamlandığında

onMouseOut : Mouse pointer bir alan veya linkten uzaklaştırıldığında

onMouseOver : Mouse pointer bir alan veya linkin üzerine geldiğinde

onSelect : Seçim için ayrılmış bir nesne seçildiğinde

onSubmit : Submit(gönder) butonu basıldığında

onUnload : Sayfa yüklenmesi bittiğinde(kullanıcı sayfadan çıktığında)

Bunlar İlğinizi Çekebilir »» [Bir Fonksiyonu Tanımlamak]
[Bir Javascript Fonksiyonu Çağırmak]
[Javascript Fonksiyona Değer Gönderme ve Değer Alma]
[Javascript Return İfadesi]
[JavaScript Fonksiyonlar (Functions)]

JavaScript Nedir Tarihçe Kaynak Bilgi

2008-04-03T14:16:00.001-07:00

Netscape HTML'nin yetersizliğini çok önceden gördüğü ve bir programlama dili geliştirdi. JavaScript Netscape firması tarafından C'den türetilmiş bir programlama dilidir daha dogrusu Web scripting dilidir.

JavaScript, Java dilinin bir alt versiyonu değildir, kendi başına bir script dilidir.

Stratejik bir ticari kararla ona Javascript ismi verilmiştir.

JavaScript dili kodun bulunduğu ana bilgisayarda ( server' da ) değil istemcinin bilgisayarında (client-side) çalışır. JavaScript ‘ lerin çalışabilmesi için web brower’e ihtiyaç duyarlar.

Javascript’ in sunucu tarafında script yazılabilir bunu için temel JavaScript'e ek olarak nesneler ve işlevler katılarak 'JavaScript (SSJS) 'yapılmaktadır.

İlk başta Netscape tarayıcıları için tasarlanan JavaScript, sonradan diğer web tarayıcılar tarafından da desteklenen genel bir script dili haline geldi.

Netscape firması JavaScript dilini hazırladığında Microsoft firması bu dilin özelliklerini veya yazılım tarzını tam anlamıyla Internet Explorer'a eklemedi. Kendi yazım kurallarını belirledi. Bu yüzden biz JavaScript kodu yazarken bu iki tarayıcı özelliklerini de göz önünde bulundurmalıyız. Fakat bu her kodda karşımıza çıkmaz.

Bircok tarayıcı Internet Explorer, moziila firefox ve benzerleri JavaScript dilinin özelliklerini ve yazılım tarzını tam olarak kendi bünyelerine katmadılar ve kendi tarayıcılarında çalışacak scriptler için yazım kuralları belirlediler. Bu yüzden bir javascript yazarken güncel kullanılan tarayıcılarda test etmek gerekir.

JavaScript ile dinamik html sayfalar yapmak münkün, ayrıca asp ve php web programlarıyla birlikte kullanılanarak bir çok işi sunucuyu yormadan istemci tarafında yapılabildiginden, amatör veya profesyonel webmasterlar için vazgecilmez bir script dilidir.

Web Programlama javascript’ den kullanıcı bilgilerinin doğru girilip girilmediği ya da kullanıcıya veri girişinde ya da menü kullanımında seçenekler sağlamak amaçıyla kullanılır.

Uygulamalar Örnekler

2008-04-03T13:09:00.001-07:00

Bütün Uygulamalar örnekler Hem internet explorer da hemde mozilla firefox ' ta çalışır

Firefox ve İnternet explorer için örnek javascript kodları

Statusbar Uygulamarı

Zemin Background Arkaplan Uygulamaları

Takvim Ve Sayaç Uygulamaları

Animasyon Uygulamalar

Diger Uygulamalar

JavaScript Operatorler - İşleçler -işlemler

2008-02-20T17:48:00.000-08:00

JavaScript İşleçler (Operators)

İşleçler, iki ya da daha fazla değer üzerinde işlem yapılmasını sağlar.
Aritmetik işleçler

+	Toplama
-	Çıkarma
*	Çarpma
/	Bölme
%	bölmeden sonra kalan
Örneğin: 12%5 işlemi 2 değerini verir.
++	Bir artırma
--	Bir azaltma.
-	Negatifleştirme: İşlenenin negatif değerini döndürür.

Karşılaştırma İşlemleri

Bunlar karşılaştırma için kullanılan ilişkisel işleçlerdir ve karşılaştırmaya bağlı olarak mantıksal bir değer “True” yada “False” ( Doğru veya Yanlış) değeri döndürürler. İşlenenler sayısal ya da karakter değer olabilir.

= =	İstenenler eşitse true döndürür
!=	Eşit değil
>	Büyüktür
<	Küçüktür
>=	Büyük Eşit
<=	Küçük Eşit

Mantıksal İşleçler

Mantıksal işleçler her biri true yada false değeri olan iki işlenen alır ve bir true ya da false döndürür.

&&	ve "And" - İki ifade de doğruysa True döndürür onun dışında false döndürür
\|\|	veya - "Or" İfadelerden birisi doğruysa True döndürür. Sadece iki ifade de false oldugunda false dödürür.
!	Degil - "Not" Negatifleştirme işlemi doğruysa True döndürür. true ise false, false ise true yapar

Atama işleci

Atama işleci (=) bir değişkene bir değer atar. Değişkenlere türlerine ve tanımlamalarına uygun olan herhangi bir değer atanabilir. ( Ayrıntı için Değişkenler bölümene göz atın )

sayi=10 ; sayı değişkenine 10 degerini atar.
rakam=5 , rakam değişkenine 5 degerini atar.

sayi=sayi+3 ile sayi+=3 aynıdır
sayi=sayi-5 ile sayi-=5 aynıdır
sayi=sayi/rakam ile sayi/=rakam aynıdır.

İşleç Önceliği

Bir deyimde değerlendirilecek birkaç işleç olduğunda işlecin önceliği işleçlerin hangi sırada değerlendirileceğine bağlıdır. Bir deyim soldan sağa doğru okunur ve öncelik sırasında en yüksekten en düşüğe doğru değerlendirilir.

En düşükten en yükseğe

Atama	=,+=,-=, …
Mantısal	or \|\|
Mantısal	and &&
Bitle işlem yapan	or \|
Bitle işlem yapan	and &
Eşitlik	== , !=
Toplama, çıkarma	+ , -
Çarpma bölme	*,/
Ters alma/artırma	! , ~ , ++, --

İşleç önceliğini geçersiz kılmak istiyorsak gerekli bölümleri parantez içine almalısınız.

Örnek : sayi = sayi*(rakam+5)

Tarih Fonksiyonu -Sayaç Date Zaman Tarih Takvim

2008-02-20T17:41:00.001-08:00

JavaScript Tarih Fonksiyonu

new Date() bu kod bir değişkene bilgisayarın saatindeki zaman degerini verir.

Örnek : takvim: new Date()

Aşağıdaki kodlarla bu zaman değerini özelleştirebiliriz.

getDate() : Ayın kaçı olduğunu gösterir.
takvim.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.
takvim.getMonth()
getFullYear() : İçinde bulunduğumuz yılı dört rakamıyla gösterir.
takvim.getFullYear()
getHours() : Saat değerini ifade eder. 24`lük sistem kullanılır.
takvim.getHours()
getMinutes() : Dakika değerini ifade eder.
takvim.getMinutes()
getSeconds() : Saniye değerini ifade eder.
takvim.getSeconds()
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.
takvim.getDay()

Örnek :

<html>
<head>
<title>Zaman Komutları</title>
</head>
<body>
<h3>Tarih Komutları ve Sonuçları</h3>
<script language="JavaScript">
var takvim = new Date()
document.write("<b>Zaman</b>: " + takvim)
document.write("<br><b>getFullYear</b>: " + takvim.getFullYear())
document.write("<br><b>getDate</b>: " + takvim.getDate())
document.write("<br><b>getMonth</b>: " + takvim.getMonth())
document.write("<br><b>getHours</b>: " + takvim.getHours())
document.write("<br><b>getMinutes</b>: " + takvim.getMinutes())
document.write("<br><b>getSeconds</b>: " + takvim.getSeconds())
document.write("<br><b>getDay</b>: " + takvim.getDay())
</script>
</body>
</html>

Örnek İçin tıklayınız...

[ Zaman Değeri Atama ] [ Url Yonlendirme ]

Fonksiyonlar Functions Fonksiyon

2008-02-20T17:32:00.001-08:00

JavaScript Fonksiyonlar (Functions)

Bir fonksiyon bir dizi işlemi yerine getirir ve bir sonuç döndürür

Kullanımı:

function fonksiyonAdı(arguman1,arguman2,arguman3..... arguman_n)
{
ifade1;
ifade2;
ifade3;
}

JavaScript Events Olaylar Mouse onload

2008-02-20T17:17:00.001-08:00

JavaScript Events - Olaylar

Events yani olayları Javascript nesnelerini tetikleyenler unsurlar olarak görmeliyiz.

Örnegin; Mause linklerin üzerinde geldiginde, "onMouseOver" özelliği tetiklenmiş olur.

Eğer linki tıklarsa, bu sefer önce "onMouseDown", sonra ise "onMouseUp" ve "onClick" tetiklenmiş olur.

Nesnelere Tanımlanabilecek olaylar şunlardır.

1. onclick Fareyle tıklamayı ifade eder.
2. ondblclick Fareyle çift tıklamayı ifade eder.
3. onmouseover Farenin imleciyle üzerine gelmeyi ifade eder.
4. onmouseout Farenin imlecini üzerinden çekmeyi ifade eder.
5. onmousedown Fare düğmesine basmayı ifade eder.
6. onmouseup Fare düğmesini bırakmayı ifade eder.
7. onload Sayfanın yüklenmesini ifade eder.
8. onunload Sayfanın kapatılmasını ifade eder.
9. onchange Form aracının değişmesini ifade eder.
10. onsubmit Form bilgilerinin gönderilmesini ifade eder.
11. onreset Form bilgilerinin silinmesini ifade eder.
12. onselect Form aracının seçilmesini ifade eder.
13. onblur Form aracının pasif hale geçmesini ifade eder.
14. onfocus Form aracının aktif hale geçmesini ifade eder.
15. accesskey İstenen karakterin girilmesini ifade eder.
16. tabindex Nesnelerin işlem sıralamasını numaralandırır.
17. onkeydown Tuşun basılmasını ifade eder.
18. onkeyup Tuşun salınmasını ifade eder.
19. onfocus Tuşun basılıp salınmasını ifade eder.

bu olaylardan en çok kullanılanları inceleyelim.

onClick

Web sayfası üzerinde bir nesnenin mouse ile üzerine tıklanması sonucu onClick olayı gerçekleşir. Olayın gerçekleşmesi için mouse'un nesneyi tıklayıp bırakması gereklidir. Bağlantılar, resimler, form düğmeleri tıklanabilecek nesneler arasındadır.

Örnek :

<html>
<head>
<title>OnClick Olayı</title>
<script language="javascript1.2">

</script></head>
<body>
<form>
<input type="button" name="tikla" value="tikla" onClick=tiklandi()>
</form>
</body>
</html>

Örnek İçin tıklayınız...

Butana tıklanıp bırakıldıgında onlick olayı gercekleşir ve ardından <head> etiketleri arasında yerleştirilen tiklandi() fonksiyonı çağrılır.

onMouseOver , onMouseOut

onMouseOver = mouse işaretçisi(imleç) üzerindeyken , onMouseOut = mouse işaretçisi üzerinden ayrıldığında.

Örnek :

<html>
<head>
<title>onMouseOver ve onMouseOut Olayı </title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<script language="javascript1.2">

</script>
</head>
<body>
<a href="http://javascript-dersi.blogspot.com" onMouseOver = uzerinde()
onMouseOut =disinda()>
http://javascript-dersi.blogspot.com</a>
</body>
</html>

Bur örnek birak htmlde bağlara verilen title özelliğine benziyor.

onSubmit

Web programlamada action olayında bilgileri doldurulan formu sunucuya yollar.
Javascript’ de bu onSubmit olayı ile form gönderilmeden önce formun düzgün doldurulup doldurulmadığını kontrol edebiliriz.

Basit bir örnek.

<html>
<head>
<title>OnSubmit Olayı </title>
<script language="javascript1.2">
function Dogrumu()
{ confirm ("Formu düzgün doldurduysanız OK'i tıklayınız'); }
</script>

</head>
<body>
<form action="mail.asp" method="post" onSubmit=" Dogrumu()">
Buraya birde submit butonu koy
</body>
</html>

Örnek İçin tıklayınız...

OnSubmit nesnesi ile kullanıcıya OK ve Cancel tuşları ile emin misin ? uyarı penceri çıkartıyoruz.

onReset

Bu olay ile web sayfanızda bulunan formdaki yazdıklarınızın tamamen silinir. Sil (Reset) tuşunu tıklarsınız size boş bir form gelir.

Fakat siz onReset olayı ile bu durum için son bir ziyaretçiye seçenek sunabilirsiniz.

Bunun ile ilgili bir örnek yapalım :

<html>
<head>
<title>JAvascript Reset</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
</head>
<body>
<form name="form1" method="post" action="">
<input type="text" name="textfield">
<input type="text" name="textfield2">
<textarea name="textarea" ></textarea>
<input type="reset" name="Reset" value="Temizle">
</form>
</body>
</html>

>
Örnek İçin tıklayınız...

onChange

Web sayfası üzerinde ziyaretçinin değiştirebileceği üç tür alan vardır. Bunlar text (metin) textarea (geniş metin alanı) select (seçim alanı) dır.

Mouse u bu alanlar üzerine getirip tıkladığınızda onChange(değişti) olayını gerçekleştirmiş olursunuz.

Güzel Bir Örnek yapalım..

<html>
<head>
<script language="JavaScript">
function ss() {
var al="hotmail"
var as ="super"
var ad="mynet"
var af="yahoo"
if(document.fff.secenek.value==al){
ms= window.open('http://www.hotmail.com')}
if(document.fff.secenek.value==as){
ms= window.open('http://www.superonline.com.tr')}
if(document.fff.secenek.value==ad){
ms= window.open('http://www.mynet.com.tr')}
if(document.fff.secenek.value==af){
ams= window.open('http://www.yahoo.com')}}
</script>
<title>java Script Onchange</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body >
<form name="fff" >
<select name="secenek" onchange="ss()" >
<option >site seciniz!!1
<option value="hotmail" >hotmail.com
<option value="yahoo" >yahoo.com
<option value="super" >superonline.com
<option value="mynet" >mynet.com
</select>
Gitmek Istediginiz Site!!!
</form>
<br><br><br>
<div align="center"><a href="JavaScript:onClick= window.close()" title="JavaScript Pencereyi Kapat" >Kapat</A>
</div>
</body>
</html>

Örnek İçin tıklayınız...

onLoad , onUnLoad

Bu olaylar bize sayfanın yüklenmeye başlamasında (onLoad) sayfadan ayrılıncaya (onUnLoad) kadar olan yapılacak işlemler için gereklidir.

Bir Javascript fonksiyonun web sayfası yüklenmeye başladığında otomatik olarak çalışmasını istiyorsak onLoad olayını kullanırız.

Mesela sayfa yüklenmeye başladığında (onLoad) ziyaretçiye Web sitemiz hoş geldiniz diyebiliriz. Sayfadan ayrıldığında (onUnLoad) ise Güle Güle diyebiliriz.

Head kısmında sayanın nasıl görüntüleneceği gibi bölümler yer alır. Bu yüzden onLoad ve onUnload kısmı body etiketleri arasında yer alır.

Şimdi de bunun için gerekli kodlara bir göz atalım.

<html>
<head>
<title>onLoad onUnLoad Olayı</title>
<script language="javascript1.2">

</script>
</head>
<body onLoad="hosgeldiniz()" onUnload="gulegule()">
</body>
</html>

Örnek İçin tıklayınız...

onError onAbort

Ziyaretçinin Browser’ı açmak üzere olduğu sayfayı transfer hatası yüzünden açamaz, HTML veya Javascript kodunu doğru yorumlayamazsa, Error (hata) olayı oluşur.

Bir resminde image map yaptınız ve dolayısıyla düzgün çalışabilmesi için resmin tam yüklenmesi gerekir.

Örnek :

Eger resmin yüklenmesi ziyaterci stop( dur) tuşu ile durdurursa ( onabort olayı gerçekleşir) olaşacak hatayı ziyaretcinize bildirebilirsiniz.

onFocus, onBlur

HTML sayfasında da Browser’ın Focus’unu (dikkat odağını) üzerinde topladığı veya odağın çekildiği üç nesne olabilir: Text (Metin), Textarea (Metinalanı) ve Select (Seç) etiketleri. Bu nesnelerden biri tıklanınca Browser’ın focus’u bu nesneye dönmüş, yani “focus” olayı olmuş demektir; bu durumda, biz de bu olayı yönlendiren onFocus’u kullanabiliriz.

Aynı mantıkla, ziyaretçi Browser’ın focus’unu bu nesneden başka bir yere çektiği zaman bu nesne focus’u kaybeder, “blur” (netlikten çıkma, flulaşma) olayı olur. Bunu da onBlur ile yönlendiririz. Bu iki yönlendiricinin birlikte kullanıldığı şu örnek kodu, onFocus.htm adıyla kaydederseniz ve Browser’da ekrandaki talimatları izlerseniz, her iki yönlendiriciyi de kullanmış olacaksınız:

<HTML>
<HEAD>
<TITLE> onFocus ve onBlur Olayı</TITLE>
<SCRIPT LANGUAGE="JavaScript1.2">
function goster()
{
document.isimForm.ad.value="Adınız kayda geçmiştir."
}
function uyar()
{
document.isimForm.ad.value="Lütfen yanlışlık yapmayınız!"
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<BR>
<FORM NAME="isimForm">
<P>Lütfen adınızı yazın ve sayfa üzerinde başka bir yeri tıklayın:
<BR><INPUT TYPE="text" NAME="ad" VALUE="Adınızı buraya yazınız" SIZE=25 onBlur="goster()">
<P>Şimdi de aşağıdaki kutuya mesleğinizi yazın:
<BR><INPUT TYPE="text" NAME="meslek" VALUE="Mesleğinizi buraya yazınız" SIZE=25 onFocus="uyar()">
</FORM>
</BODY>
</HTML>

Örnek İçin tıklayınız...

Javascript, üstteki kutuya adınızı yazdıktan sonra başka bir yeri tıkladığınızda olan iş, “ad” isimli metin kutusunun “blur” olayına onBlur’ün çağırdığı goster() fonksiyonu ile; alttaki kutuyu mesleğinizi yazmak üzere tıkladığınız anda “meslek” kutusunda olan “focus” olayına da uyar() fonksiyonu ile karşılık veriyor.

JavaScript Forms Form Elemanları Formlar

2008-02-20T17:07:00.001-08:00

JavaScript Form

Text alanları
Butonlar
Radio Butonlar
Check boxlar
drop-down menüler

JScript form elemanlarıdır nesneleridir.

Javascript Form Komutları

Burada unutulmaması gereken durum nesnelerin bir form içinde olmaları yani <FORM> ve </FORM> HTML kodları arasında tanımlanmaları gerektiğidir.

Tanımladığınız bu form elemanları içinde bulunduğu formun bir elemanıdır ve ulaşılması gerektiğinde ilgili form adıyla birlikte anılır.

Şeklinde tanştşlmış bir butona daha sonra erişmek istediğimizde form1.but1 yazmamşz gerekecektir. Forma isim verilmediği durumlarda aynş butona form.but1 diye erişecektik ki aynı sayfada birden fazla form bulunmasş durumunda karşışıklık çıkacaktı.

JavaScript Nesneler Objects

2008-02-20T16:28:00.000-08:00

Javascript Nesneler Objects

Javascript programcılığında nesne (object), ve nesnenin özellikleri (properties), genellikle HTML belgesinin adı (name) ve değeri (value) olan herşeydir. Bir HTML unsurunun etiketinde NAME ve VALUE bölümleri varsa, bu unsur, Javascript için nesne sayılır.

Javascript Nesnesi -- HTML Karşılığı
Pencere (Window) -- Yok
Çerçeve (Frame) --<FRAME>
Belge (Document) -- <BODY>
Form -- <FORM>
Düğme -- <INPUT TYPE=”button”>
İşaretleme Kutusu -- <INPUT TYPE=”checkbox”>
Gizli (Hidden) -- <INPUT TYPE=”hidden”>
Dosya Çıkart -- (file upload) <INPUT TYPE=”file”>
Parola (password) -- <INPUT TYPE=”password”>
Radyo düğmesi -- (Radio) <INPUT TYPE=”radio”>
Başa dön (Reset) -- <INPUT TYPE=”reset”>
Seç (Select) -- <SELECT>
Gönder (Submit) -- <INPUT TYPE=”submit”>
Metin (Text) -- <INPUT TYPE=”text”>
Metin Alanı (Textarea) -- <TEXTAREA>
Bağ (Link) -- <A HREF=””>
Bağlantı (Anchor) -- <A NAME=””>
Applet -- <APPLET>
Resim (Image) -- <IMG>
Plugin -- <EMBED>
Alan (Area) -- <MAP>

//////////////////////////////////////////////////////////////////

[ Çerçeve (Frame) Nesnesi ]

[ Tarayıcı Nesnesi ]

[ Window Nesnesi-Status Bar kullanımı ]

[ Window Nesnesi - window.history ]

[ window.location.protocol ]

[ Pencere kapatmak için: Window.close() ]

[ Window Nesnesi ]

[ Form Nesnesi ]

Değişkenler Değişken Veri Tanımlama

2008-02-20T11:06:00.001-08:00

JavasCript Değişkenler Ve Veri Türleri “Variables”

Değişkenler verileri saklarlar ve onlara erişimi sağlarlar.

Bir değişkenin kapsamı global ya da lokal olabilir. Bir global değişkene sayfa üzerinde herhangi bir JavaScript'ten erişilebilir. Lokal değişken ise değerin atandığı yordam içinde geçerlidir.

Bir değişkeni bir fonksiyonun dışında tanımlarsanız o global bir değişken olarak düşünülür

Bir değişkeni bir fonksiyon içinde tanımlarsanız Lokal bir değişken olarak düşünülür

Verinin türüne bağlı olarak değer üzerinde belli işlemler yapılabilir ya da yapılamaz. Örneğin iki string değer üzerinde aritmetik işlem yapılamaz. ,

Değişken Türleri
Değişken Adlandırma Kuralları
Değişkenleri Tanımlamak
DİZİLER
- Dizi Yaratmak
- Dizi Yöntemleri

JavaScript Kodu Html Yerleşitrme Ekleme

2008-02-20T11:00:00.000-08:00

JavaScript Kodları Html Yerleşitrme

Bir tarayıcının anlayacağı temel dil HTML'dir. JavaScript dilinin HTML belgesi içinde yazılabilmesi için <SCRIPT> etiketleri kullanılır.

Web Browser programları, Javascript komutlarını yorumlayabilmek için HTML’in içinde <SCRIPT LANGUAGE=”Javascript”> etiketini ararlar ve </SCRIPT> etiketini gördükleri anda bu yoruma son verir; HTML yorumuna dönerler.

Javascript kodlarınız yazaken arguman, fonkisyon, parametre ve tanımlarımızda Türkçe ve diğer dillerdeki high-ASCII karakterleri (ı, İ, ğ, Ğ, Ş, Ş ile ü, Ü, ö, Ö, ç ve Ç) kullanmıyoruz.

SCRIPT LANGUAGE=”Javascript” ile versiyon belirtilir. LANGUAGE=”Javascript1.0”
veya LANGUAGE=”Javascript1.21” gibi böylece web tarayıcı bu versiyonu dersteklemiyorsa script kodlarını görmezden gelecektir. Aksi Halde Hata mesajı verir.

Javascript Sürümleri

Javascript 1.0 ,1.1,1.2,1.3

JavaScript'leri Web sayfasına eklemek için 3 yöntem mevcutur.

1. HEAD bölümünde
2. BODY bölümünde
3. Dış Dosyaları Kullanma

İfadeler Döngüler

2008-02-20T10:59:00.000-08:00

JavaScript İfadeler

Bir ifade bloğu ise { } arasına yerleştirilir. Bir javascript ifadesibir noktalı virgülle sonlandırılmalıdır. Bir satırda bir çok ifade olabilir.

Koşullu İfadeler

Koşullu bir ifade , bir koşulu sınamak için kullanılır.

if...else
switch

Javascript Döngüler

for
do … while
while
for…in

JavaScript Alert İkaz Metodu Mesaj

2008-02-19T11:22:00.001-08:00

Alert -İkaz- Metodu

Alert yöntemi, Ziyaretcimize bir uyarı mesajı ve bir OK düğmesi görüntülemek için kullanılır

Örnek : Sitemize Ziyaret Eden Birisini Selamlama

<html>
<head>
<script type="text/javascript">
function load()
{
alert("Merhaba");
}
</script>
</head>
<body onload="load()">
</body>
</html>

Bu Örnegi İncelemek İçin tıklayınız...

JavaScript DOM İlişkisi Nedir Nasıldır

2008-02-19T11:20:00.000-08:00

Javascript ve DOM

Dom Nedir? (Document Object Model - Doküman nesne modeli)

DOM, bir programlama lisanı veya sadece Javascript için tasarlanmış bir olgu değildir. DOM, HTML ve XML dokümanları için ve web sayfalarını scriptlere ve programlama lisanlarına bağlayan bir API'dir.

Bir dokümandaki başlık, tablo, tablo hücrelerindeki yazı, dokümanın kendisi ve buton gibi her öge o doküman için doküman nesne modelinin bir parçasıdır. DOM (Document Object Model - Doküman nesne modeli) dokümanın/web sayfasının yapısal bir grup olarak temsilini sağlayarak, JavaScript gibi bir script lisanının web sayfası düğümlerine erişilebileceği ve kullanabileceği yolu tanımlar.

Tanımdan da anlaşılacağı gibi JavaScript, doküman üzerindeki herhangi bir elemente erişip içeriği veya özellikleri ile ilgili işlemleri yapmak için doküman nesne modelini kullanır.

JavaScript Confirm Metodu Yöntemi Örnegi

2008-02-19T11:15:00.001-08:00

JavaScript Confirm

Confirm yöntemi OK ve Cancel düğmelerine sahip bir mesaj görüntülemek için kullanılır. Ok basarsa True, Cancel’ a basılırsa false döndürür

<a href="http://javascript-dersi.blogspot.com" onclick="return window.confirm('Ana Sayfa Gitmek İstermisiniz');">Ana Sayfam</a>

Bu Örnegi İncelemek İçin tıklayınız...

JavaScript Frames Çerçeveler Pencere Örnek

2008-02-19T11:11:00.000-08:00

Javascript Frames (Çerçeveler)

Javascriptte frameler pencerelerle eşit işlem görür. Erişim şekli haricinde başka hiç bir fark yoktur.

Frameler arası komünikasyon

Buda aynı HTML de olduğu gibi çalışır. Prensip aynıdır. HTML ile, başka bir frame'e bağlanmak için target="cerceveadi" kullanılır,

Örnek Yapı;

parent.cerceveadi.location.href = 'http://javascript-dersi.blogspot.com'

Örnek: Öncelikle aşagıdaki frameset oluşturuyoruz

<head>
<title>Javascript Çerceve Frame uygulaması</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
</head>
<frameset cols="50%,*">
<frame name="ana_frame" src="ana.htm">
<frame name="hedef" src="hedef.htm">
</frameset>
<noframes></noframes>
</html>

hedef.htm in içerigini boş bırakıyoruz.

ana.htm aşagıdaki köprüyü yazıyorum.

<a href="#" onClick="parent. hedef_frame.document.write(‘Hey!<br>Oldu’)">Tıklarsak ne olur</a>

Yurkardaki örnekte ligili linkin onclick yordamı kullanılmıştır.

Bu Örnegi İncelemek İçin tıklayınız...

JavaScript Prompt Medotu Örneği

2008-02-19T11:00:00.000-08:00

JavaScript Prompt yöntemi kullanmak

kullanıcı girdilerini almak için bir iletişim kutusunu görüntüler.

Örnek:

<html>
<head>
<title>Prompt , write örneği </title>
</head>
<body>
<script>
function load()
{
var tara
tara=window.prompt ("Adınız : " ,
"lütfen adınızı yazınız");
document.write ("Adınız : " , tara );
}

</script>
<body onload="load()">
</html>

Yukardaki Örnekte onload metodu ile load fonksiyonını çagırdık. Bu fonksiyon once promt yöntemini kullanarak ziyareticden ismini istemekte ve alınan isimde document.writr metodu ile sayfaya yazılmakta.

javascript Write Writeln Yazı Yazmak

2008-02-19T08:56:00.000-08:00

JavaScript Sayfaya Yazı Yazmak

JavaScript kullanarak ekrana yazı yazdırmak document.write komutu ile yapılır.

write komutunu tek başına kullanamaz, html üzerinde yazı yazmak istediğinde document.write komutundan sonra parantez açılır.

Kullanım şekli

document.write ("görüntülenmek istenenler" , değişken_ismi );

Değişkenler çift tırnak içerisinde yazılmazlar. Sadece görüntülenmek istenenler çift tırnak içerisinde yazılır

Örnek:

<Html>
< head>
<SCRIPT language="JavaScript">

var ad= prompt('Lütfen Adınızı Yazınızın', ' ');

if ( (ad==' ') || (ad==null) )
{
ad="isimsiz";
}

</SCRIPT>

</HEAD>

<BODY>

<SCRIPT language="JavaScript">

document.write("<CENTER><H1>Merhaba, " + ad + " ! Hoşgeldin Javascript derslerine <\/H1><\/CENTER>");
</SCRIPT>
</body>
</html>

Sayfaya merhaba yazısı yanında ziyaretcinin verdigi isim yazılır.

Not : html sayfaya document.write ile yazdıgınız yazıları temizlemek için 'document.clear()’ fonksiyonunu kullanabilirsiniz.