Neler yeni

Foruma hoş geldin 👋, Ziyaretçi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.

  • Merhaba Değerli Ziyaretçimiz, ForumaGel ailesi seni bekliyor! 🌟 Aramıza katılarak güçlü ve samimi topluluğumuzun bir parçası olabilirsin. Burada her üye değerli, her katkı kıymetli. Şimdi üye ol, bizimle birlikte gelişmenin ve keyifli sohbetlerin tadını çıkar! Sevgi ve Saygılarla, ForumaGel Yönetimi ❤️
Yan Yana Banner

Java Script Dersleri (1 Görüntüleyici)

selmansonmez
Yan Yana Banner

selmansonmez

Resim Yükle
6
forumagel.com
Katılım
30 Ara 2018
Konular
0
Mesajlar
646
Tepkime puanı
53
Puan
28
Yaş
35
Konum
Antalya
Web sitesi
hesapalimsatim.com.tr
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
forumagel.com Java Script Dersleri
Ş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
forumagel.com Java Script Dersleri
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
forumagel.com Java Script Dersleri


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


forumagel.com Java Script Dersleri
Ziyaretçiler için gizlenmiş link, görmek için kayıt olun. Giriş yap veya üye ol.


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 ,
forumagel.com Java Script Dersleri

{
alert("birinci değişkeniniz="+ a)
alert("ikinci değişkeniniz="+
forumagel.com Java Script Dersleri

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


forumagel.com Java Script Dersleri
Ziyaretçiler için gizlenmiş link, görmek için kayıt olun. Giriş yap veya üye ol.


 
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.

forumagel.com Java Script Dersleri


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>


forumagel.com Java Script Dersleri
Ziyaretçiler için gizlenmiş link, görmek için kayıt olun. Giriş yap veya üye ol.


 
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)


forumagel.com Java Script Dersleri


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>



forumagel.com Java Script Dersleri
Ziyaretçiler için gizlenmiş link, görmek için kayıt olun. Giriş yap veya üye ol.


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

forumagel.com Java Script Dersleri


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



forumagel.com Java Script Dersleri
Ziyaretçiler için gizlenmiş link, görmek için kayıt olun. Giriş yap veya üye ol.
 
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>



forumagel.com Java Script Dersleri
Ziyaretçiler için gizlenmiş link, görmek için kayıt olun. Giriş yap veya üye ol.
 
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>


forumagel.com Java Script Dersleri
Ziyaretçiler için gizlenmiş link, görmek için kayıt olun. Giriş yap veya üye ol.
 
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]

forumagel.com Java Script Dersleri
Ziyaretçiler için gizlenmiş link, görmek için kayıt olun. Giriş yap veya üye ol.
 
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
 

Şu an konuyu görüntüleyenler

Tema özelleştirme sistemi

Bu menüden forum temasının bazı alanlarını kendinize özel olarak düzenleye bilirsiniz

Zevkini yansıtan rengi seç

Geniş / Dar görünüm

Temanızı geniş yada dar olarak kullanmak için kullanabileceğiniz bir yapıyı kontrolünü sağlayabilirsiniz.

Izgara görünümlü forum listesi

Forum listesindeki düzeni ızgara yada sıradan listeleme tarzındaki yapının kontrolünü sağlayabilirsiniz.

Resimli ızgara modu

Izgara forum listesinde resimleri açıp/kapatabileceğiniz yapının kontrolünü sağlayabilirsiniz.

Kenar çubuğunu kapat

Kenar çubuğunu kapatarak forumdaki kalabalık görünümde kurtulabilirsiniz.

Sabit kenar çubuğu

Kenar çubuğunu sabitleyerek daha kullanışlı ve erişiminizi kolaylaştırabilirsiniz.

Köşe kıvrımlarını kapat

Blokların köşelerinde bulunan kıvrımları kapatıp/açarak zevkinize göre kullanabilirsiniz.

Geri