Java Script Dersleri

selmansonmez 

Yönetici
yönetici rank
moderatör rank
Katılım
30 Ara 2018
Konular
376
Mesajlar
680
Tepkime puanı
52
Çevrimiçi zaman
57 dakika
Yaş
34
Konum
Ankara
Ticaret
0 / 0 / 0
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
smiley.gif
Ş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
smiley.gif
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
smiley.gif


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.
 
Konu Sahibi
selmansonmez

selmansonmez 

Yönetici
yönetici rank
moderatör rank
Katılım
30 Ara 2018
Konular
376
Mesajlar
680
Tepkime puanı
52
Çevrimiçi zaman
57 dakika
Yaş
34
Konum
Ankara
Ticaret
0 / 0 / 0
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>


js.gif


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 ,
cool.gif

{
alert("birinci değişkeniniz="+ a)
alert("ikinci değişkeniniz="+
cool.gif

}
</script>
<body>
<center>
<p>İkinci Function Örneği</p>
<input type="button" value="Tıklayın!.." onclick="deneme('bilim','teknoloji')">
</body>
</html>


js.gif


 
Konu Sahibi
selmansonmez

selmansonmez 

Yönetici
yönetici rank
moderatör rank
Katılım
30 Ara 2018
Konular
376
Mesajlar
680
Tepkime puanı
52
Çevrimiçi zaman
57 dakika
Yaş
34
Konum
Ankara
Ticaret
0 / 0 / 0
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.

mesaj_1.gif


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>


js.gif


 
Konu Sahibi
selmansonmez

selmansonmez 

Yönetici
yönetici rank
moderatör rank
Katılım
30 Ara 2018
Konular
376
Mesajlar
680
Tepkime puanı
52
Çevrimiçi zaman
57 dakika
Yaş
34
Konum
Ankara
Ticaret
0 / 0 / 0
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)


mesaj_2.gif


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>



js.gif


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
 
Konu Sahibi
selmansonmez

selmansonmez 

Yönetici
yönetici rank
moderatör rank
Katılım
30 Ara 2018
Konular
376
Mesajlar
680
Tepkime puanı
52
Çevrimiçi zaman
57 dakika
Yaş
34
Konum
Ankara
Ticaret
0 / 0 / 0
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')

index31.gif


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



js.gif
 
Konu Sahibi
selmansonmez

selmansonmez 

Yönetici
yönetici rank
moderatör rank
Katılım
30 Ara 2018
Konular
376
Mesajlar
680
Tepkime puanı
52
Çevrimiçi zaman
57 dakika
Yaş
34
Konum
Ankara
Ticaret
0 / 0 / 0
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>



js.gif
 
Konu Sahibi
selmansonmez

selmansonmez 

Yönetici
yönetici rank
moderatör rank
Katılım
30 Ara 2018
Konular
376
Mesajlar
680
Tepkime puanı
52
Çevrimiçi zaman
57 dakika
Yaş
34
Konum
Ankara
Ticaret
0 / 0 / 0
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>


js.gif
 
Konu Sahibi
selmansonmez

selmansonmez 

Yönetici
yönetici rank
moderatör rank
Katılım
30 Ara 2018
Konular
376
Mesajlar
680
Tepkime puanı
52
Çevrimiçi zaman
57 dakika
Yaş
34
Konum
Ankara
Ticaret
0 / 0 / 0
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>[
/color]

js.gif
 
Konu Sahibi
selmansonmez

selmansonmez 

Yönetici
yönetici rank
moderatör rank
Katılım
30 Ara 2018
Konular
376
Mesajlar
680
Tepkime puanı
52
Çevrimiçi zaman
57 dakika
Yaş
34
Konum
Ankara
Ticaret
0 / 0 / 0
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
 

Benzer konular

Ana Sayfa Kayıt Ol Giriş Yap
Üst