19.08.19/18:41

Web TasaRıM --Java Script--

Başlatan sessizlik senfonisi, 02.02.05/19:37

« önceki - sonraki »

0 Üye ve 1 Ziyaretçi konuyu incelemekte.

sessizlik senfonisi

JavaScript Nedir:

JavaScript; web tasarımı ile ilgilenenler için HTML dilinden sonra en önemli dildir. İyi bir web tasarımcısı olmak için en az html ve JavaScript dillerini bilmeniz lazım. Bu dilin en büyük özelliği html dili ile iç içe kullanılması ve kolay anlaşılır olmasıdır. Bu özellikleri JavaScript 'i en çok kullanılan diller arasına sokmuştur. JavaScript dilini öğrenebilmek için html dilini çok iyi bilmek gerekir. Html dilini bilmiyorsanız hiç şansınız yok :) Şey aslında bi şansınız var... Bu sitede sevgili Savaş 'ın yazdığı HTML dersleri de var... Ama bence Savaş 'ın o iğrenç esprilerine katlanmak yerine webmaster olmaktan vazgeçin daha iyi :) Yani en azından HTML'den nefret etmemiş olursunuz.

JavaScript Ne İşe Yarar:


Kuru kuruya bir kaç resim ve yazıdan oluşan sitelerden bıktıysanız ve zorlanmadan daha fazlasını  öğrenmek istiyorsanız, JavaScript dili tam size göre, bu dil sayesinde kolayca sitenizi canlandırıp, ziyaretçi ile diyalog içine sokabilirsiniz. Bu dil sayesinde bir çok şey yapabilirsiniz bunların başında form kontrolü, ufak oyun ve programlar gelir. Kısacası html dilini biliyor ve kendinizi daha fazla geliştirmek istiyorsanız aramıza hoş geldiniz :)

JavaScript Diline Giriş:

JavaScript dili de diğer tüm programlama dilleri gibi komutlardan meydana gelir. İsterseniz önce bu komutların yazılış formatını görelim.

     Temel olarak JavaScript komutları Html de <script></script> tagları arasına yazılır.


<html>
<script language="javascript">  Bu satırda kullanacağımız scriptin versiyonunu belirtiyoruz.
{
Bu raya JavaScript komutları yazılır
}
</script>
<body>
Bu araya html kodları yazılır ve JavaScripte yönlendirme yapılır
</body>
<html>

       Yukarıdaki örnekte kullandığımız JavaScript'in versiyonunu language komutunu kullanarak belirtiyoruz. JavaScript'in bir den fazla versiyonu vardır (JavaScript1.0, JavaScript1,2 vs.). Bu versiyonların her birinde yeni komutlar eklenmiştir bu nedenle scriptin versiyonunu belirtmek önemlidir. Daha sonra hangi versiyonla hangi komutların eklendiğini daha ayrıntılı olarak inceleyeceğiz.

       JavaScript komutları sadece bu formatla sınırlı değildir. Direk html kodları arasında ya da "js" uzantılı dosyalar olarak da kullanılabilirler. İlerde bu değişik formatları daha detaylı olarak ele alacağız. Biz anlatımımız boyunca bu formatları karışık olarak kullanacağız.



sessizlik senfonisi

02.02.05/19:44 #1 Son düzenlenme: 02.02.05/19:47 sessizliksenfonisi
Fonksiyonlar

      JavaScript komutları genelde fonsiyon içinde tanımlanırlar. Basit scriplerde fonksiyona pek gerek duyulmasa da scriptin karmaşıklığı artıkça fonksiyon kullanımı gerekebilir ve çoğu zaman zorunlu hale gelir. Biz de anlatımımız boyunca vereceğimiz örneklerin hemen hemen hepsinde fonksiyon kullanacağımız için ilk dersimize fonksiyon kullanımı ile başlamak istedim. Umarım bi sakıncası yoktur? Gerçi olsa ne yazar..

     JavaScript'te foksiyon kabaca    function fonksiyonun_adı()  şeklinde tanımlanır ve fonksiyonun çalışabilmesi için herhangi bir komutla tetiklenmesi gerekir.  

Örnek :


<html>
<script language="javascript">
function  mesaj()
{
alert("fonksiyon örneği çalışıyor.")
}
</script>
<body>
<center>
<p> Function Örneği</p>
<input type="button" value="Tıklayın!.." onclick="mesaj()">
</body>
</html>


Örnek için Tıklayınız

Not: Bu JavaScript'te fonksiyonu tetiklemek için "<button></button>" ve "onclick" komutlarını kullandık bunları ilerleyen derslerde daha ayrıntılı olarak inceleyeceğiz şimdilik bilmeniz gereken bu komutların genelde beraber kullanıldığıdır. Diğer örneklerimizde de bu komutlardan yararlanacağız..


<button onclick="fonksiyonun adı">tıklayıın</button>

Fonksiyona Dışarıdan Değişken Gönderme.

       Foksiyonların en çok kullandığımız özelliklerinden biri de dışarıdan değişken alabilme özelliğidir.
function deneme(a)   'şeklinde tanımlanan bir fonksiyona dışarıdan her hangi bir "a" ve değişkeni yollanabilir. Dışardan bir değişken yollanabileceği gibi birden fazla değişkende yollana bilir.
function deneme(x,y) 'şeklindeki bir fonksiyona dışarıdan "x" ve "y" gibi iki değişken gönderilebilir. Gönderilen ilk değişken "x" ikinci değişken "y" olarak algılanır.
dışarıdan yollanan  değişken, tetikleme komutunun sonuna eklenen deneme('ali','veli')  (burada deneme('ali','veli') yazmamızın nedeni tetiklenecek fonksiyonun adının deneme() olmasıdır) komutu ile yollanır burada 'ali' birinci değişken 'veli' ise ikinci değişkendir.

Örnek :

<htm>
<script language="javascript">
function deneme(a , B)
{
alert("birinci değişkeniniz="+ a)
alert("ikinci değişkeniniz="+ B)
}
</script>
<body>
<center>
<p>İkinci Function Örneği</p>
<input type="button" value="Tıklayın!.." onclick="deneme('bilim','teknoloji')">
</body>
</html>


scriptin çalışan örneğini görmek için tıklayın.

sessizlik senfonisi

Mesaj Kutuları

Alert Kutusu: Alert kutusu uyarı mesajları vermek için kullanılır. Mesaj kutuları içinde  en çok kullanılanı alert kutusudur. Bu kutu bir ünlem işareti, yazdığınız mesaj ve bir tamam butonundan oluşur.



alert(deşğişken)  yada  alert("Masj buraya yazılır")

Örnek:

<html>
<script language="javascript">
function mesaj()
{
alert("ilk örneğimiz çalışıyor")
}
</script>
<body>
<center>
<p>Alert Kutusu Örneği</p>
<input type="button" value="Tıklayın!.." onclick="mesaj()">
</body>
</html>


scriptin çalışan örneğini görmek için tıklayın.





sessizlik senfonisi

Confirm Kutusu: Confirm kutusu genelde yapılacak olan işlem hakkında kullanıcıya soru sormak için kullanılır. Bir soru işareti, mesajınız, bir Tamam ve bir İptal butonlarından oluşur.

* Bu mesaj kutusuyla verilen mesajın cevabı bir değişkene atanarak değişik işlemler yapılabilir.
- Cevap olarak, "Tamam" butonunun tıklanması değişkene "1" değerini atar.
- "İptal" butonunun tıklanması ise değişkene "0" değerini atar. (Pencerenin köşesinden kapatılması, "İptal" butonuna basmak ile aynı işlevi görür)




confirm(Değişken)  yada confirm("mesaj buraya yazılır")

Örnek:

<html>
<script language="javascript">
function mesaj()
{
var a
a = confirm("Tamam yada İptali tıklayın.")
if (a==1)
{
alert("Tamam tuşunu tıkladınız.")
}
if (a==0)
{
alert("İptal tuşunu tıkladınız.")
}
}
</script>
<body>
<center>
<p>Confirm Kutusu Örneği</p>
<input type="button" value="Tıklayın!.." onclick="mesaj()">
</body>
</html>



scriptin çalışan örneğini görmek için tıklayın.

Not: Bu örnekte "if (a==1)"  kısmıyla başlayan satırdan scripti kapattığımız satıra kadar olan kısımda if() komutu yardımı ile karşılaştırma yapıyoruz. Şimdilik bu bölüm sizi alakadar etmiyor sadece scriptin anlaşılır olması için eklenmiştir. Ayrıca var a şeklinde kullanılan satır "a" isminde bir değişken tanımlamak için kullanılmıştır. Şimdilik bu kısımlara takılmayın ilerleyen derslerde bunlar ayrıntılı olarak anlatılacak

sessizlik senfonisi

Prompt() Mesaj Kutusu : Prompt mesaj kutusu diğer mesaj kutularından farklı olarak kullanıcının değer girişi yapabildiği bir kutudur. Yani kullanıcıya verilen mesaj karşılığında bir değer girmesi istenir. Değişkene atanan bu değer script içinde isteğe göre değerlendirile bilinir.

değişken = prompt('mesaj','örnek')



Örnek:

<html>
<script language="javascript">
function mesaj()
{
var a
a = prompt("Adınızı Giriniz","Adınız")
alert(a+" JavaScript Öğrenmeye başladın artık!")
}
</script>
<body>
<center>
<p>Confirm Kutusu Örneği</p>
<input type="button" value="Tıklayın!.." onclick="mesaj()">
</body>
</html>



scriptin çalışan örneğini görmek için tıklayın.

sessizlik senfonisi

Değişkenler

Değişken : Değişken, JavaScript de dahil olmak üzere tüm programlama dillerinde kullanılan, içeriği tamamen isteğe bağlı olarak atanan ve programcı tarafından ihtiyaca göre oluşturulan nesnelerdir. Değişkenin içeriği metin yada sayı olabilir.

JavaScripte Değişken Kullanımı : JavaScript'te değişken kullanmak için ilk olarak, değişken isminin "var" komutu kullanılarak belirtilmesi gerekir. (Evet bu değişkeni önceden belirtme işi çok gıcık ama napalım gülü seven dikenine katlanır). Hemen değişkeni belirtirken yada daha sonra script içerisinde değişkene  bir değer atanabilir. Eğer değişken tanıtılmadan içeriğine bir değer atanılmaya çalışırsa script çalışmaz.

var gezegen
gezegen = "mars"

yada

var gezegen = "mars"    ' Bu örneklerde değişkenimiz "gezegen", değeri "mars" tır.

* Bir var komutu ile birden çok değişken tanımlana bilir.

var okul,sınıf,no    'burada var komutu okul,sınıf ve no olmak üzere üç değişken oluşturduk.

Örnek:

<html>
<script language="javascript">
function deneme()
{
var mesaj
mesaj = "örneğimiz çalışıyor"
alert(mesaj)
}
</script>
<body>
<center>
<p>Değişken Örneği</p>
<input type="button" value="Tıklayın!.." onclick="deneme()">
</body>
</html>



scriptin çalışan örneğini görmek için tıklayın.

sessizlik senfonisi

JavaScript Değişkenlerinin Özellikleri:

  - JavaScrip'te değişken kullanılmadan önce "var" komutu ile tanımlanmalıdır.
  - JavaScrip'te değişkene atanan değer " " yada ' ' imleri arasına yazılır.
  - Küsuratlı sayısal değerler "." (nokta) ile gösterilir.   3.5  ( "," virgül kullanılmaz.)
  - JavaScrip'te değişken algılanırken büyük küçük harf ayrımı yapılır. Örneğin "okul" ile "Okul" kelimeleri JavaScript tarafından iki farklı değişken olarak algılanır.


Değişken Çeşitleri


Boolean Değişkeni : Bu değişkenler iki farklı değer alabilen değişkenlerdir. Bu değişkenin "true" değerini alması değişkenin geçerli yada kullanıla bilir olduğu, "false" değerini alması ise geçersiz yada kullanılamaz olduğu anlamına gelir. Ayrıca "false" yerine "0", "true" yerine "1" değerleri de kullanıla bilir. Bu değişkeni ilerde bazı örneklerde kullanacağız.

Global Değişken : Global değişken, diğer değişkenler gibi hemen hemen tüm programlama dillerinde kullanılır. Kullanım amacı; Bir fonksiyon içinde tanımladığımız bir değişken başka bir fonksiyon için geçerli değildir. Yani bir fonksiyonda tanımlayıp kullandığımız bir değişkeni başka bir fonksiyonda kullanmak için yeniden tanımlayıp değer atamamız gerekir. Ama bazı durumlarda aynı değişkenin bir çok fonksiyonda kullanılması gerekebilir. Yani değişkene verdiğimiz değerin tüm fonksiyonlarda geçerli olması ve değerinin değiştirilebilmesi istenebilir. Bu durumda global değişkene ihtiyaç duyulur.

    JavaScrip'te global değişken kullanımı çok kolaydır. Yapmanız gereken tek şey, global değişken olarak kullanmak istediğiniz değişkeni fonksiyon içinde degil de hemen scripti tanımladıktan sonra yani fonksiyon açmadan tanımlamaktır. Yani hiç bir ek komuta gerek yoktur. Bu şekilde tanımladığınız bir değişkeni script içindeki tüm fonksiyonlarda tekrar tanımlamaya gerek kalmadan kullana bilirsiniz.

Örnek:

<html>
<script language="javascript">
var sayi = '10'
function deneme1()
{
alert("1. fonksiyon, global değişken ="+sayi)
}
function deneme2()
{
alert("2. fonksiyon, global değişken ="+sayi )
}
</script>
<body>
<center>
<p>Global Değişken Örneği</p>
<p>Fonsiyon 1</p>
<input type="button" value="Tıklayın!.." onclick="deneme1()">

<p>Fonsiyon 2</p>
<input type="button" value="Tıklayın!.." onclick="deneme2()">
</body>
</html>


scriptin çalışan örneğini görmek için tıklayın.

sessizlik senfonisi

02.02.05/20:05 #7 Son düzenlenme: 02.02.05/20:06 sessizliksenfonisi
Array (Dizi) Değişken : Diğer tüm değişken türleri sadece bir tek değer alabilmekteydi. Ama dizi değişkende birden fazla değer tek değişken içinde tutulabilir. Dizi değişken oluşturmak için diğer değişkenler gibi önce değişkenin adı "var" komutu ile tanımlanır. Daha sonra "new Array()" komutu ile değişkene değerler atanır.

* Dikkat edilmesi gereken en önemli unsur "Array" komutunun ilk "A" harfi mutlaka büyük harfle yazılmalıdır. Küçük a yazılırsa script çalışmaz.

var degisken
degisken = new Array(deger1,deger2,deger3,deger4....)

       Dizi değişkenin değerleri okunurken degişken[0], degişken[1], degişken[2] şeklinde okunur. Burada dikkat edilmesi gereken en önemli unsur. ilk değerin
  •  olarak tutuluyor olmasıdır, sonra sırası ile [1], [2] ...  şeklinde devam eder.

    Örnek:

    <html>
    <script language="javascript">
    function dizi_degisken()
    {
    var gezegenler
    gezegenler = new Array("merkur","venus","dunya","mars","jupiter")
    alert("değişkenleriniz = "+gezegenler[0]+gezegenler[1]+gezegenler[2]+gezegenler[3]+gezegenler[4])
    }
    </script>
    <body>
    <center>
    <p>Dizi Değişken Örneği.</p>
    <input type="button" value="Tıklayın!.." onclick="dizi_degisken()">
    </body>
    </html>
    ;


    scriptin çalışan örneğini görmek için tıklayın.

sessizlik senfonisi

Mantıksal ve Matematiksel İşlemler

Karşılaştırmalar : Karşılaştırma işlemleri genellikle scripte koşul vermek için kullanılır. Değerler koşula uygunsa sonuç "true", değilse "false" dir.

JavaScrip'te karşılaştırma operatörleri tablosu ;
OPERATÖR
ADI
ANLAMI


==
Eşit  
Sol ve sağdaki değerler biribirlerine eşitse  

!=
Eşitdeğil

Sol ve sağdaki değerler birbirlerine eşitdeğilse

<
Küçük
Soldaki değer sağdaki değerden küçüse

>
Büyük
Soldaki değer sağdaki değerden büyükse

<=
Küçük yada eşit
Soldaki değer sağdaki değere eşit yada küçükse

>=
Büyük yada eşit
Soldaki değer sağdaki değere eşit yada büyükse













sessizlik senfonisi

Mantıksal İşlemler : Mantıksal işlemler genelde birden fazla karşılaştırma işlemi arasında bağ kurmak içim kullanılır. Örneğin iki koşul arasında "||" operatörü kullanıldığında sağdaki yada soldaki koşullardan herhangi birinin sonucu "true" (doğru) ise mantıksal işlemin sonucunda "true" dir.

JavaScrip'te mantıksal işlem operatörleri tablosu ;

OPERATÖR
ADI
ANLAMI



&&
Ve (and)  
Sol ve sağdaki koşulların her ikiside doğruysa  

|| Veya (or)
Sol ve sağdaki koşullardan herhangi biri doğruysa

!
Değil
Verilen koşul doğru ise

Not: Karşılaştırma işlemleri ve mantıksal işlemler hakkındaki  örnekleri if() komutunu incelerken kullanacağız.