JavaScript Dersleri – Bilişim & Programlama
JavaScript

JavaScript Dersleri

JavaScript , web sayfalarını etkileşimli hale getirmek için kullanılan bir programlama dilidir. Bir sayfaya hayat veren şey, kullanıcıyı etkileyen interaktif öğeler ve animasyondur. Ana sayfanızda  bir arama kutusu kullandıysanız, bir haber sitesinde canlı bir futbol maçı puanı kontrol ettiyseniz veya bir video izlediyseniz, JavaScript muhtemelen onun içinden geçiyor demektir.

JavaScript hakkında neyin çok özel olduğunu, neleri başarabileceğimizi ve başka hangi teknolojilerin onunla iyi oynadığını görelim.

Bu dilde programlar betik olarak adlandırılır. Bunlar doğrudan HTML’de yazılabilir ve sayfa yüklendikçe otomatik olarak yürütülebilir.

Komut dosyaları düz metin olarak sunulur ve yürütülür. Çalışmak için özel bir hazırlık ya da derleme gerekmiyor.

 

İstediğiniz konuyu okumak için sekme üzerinde tıklayın
JavaScript Dersleri 2019

JavaScript Üzrine…

JavaScript Nedir​

JavaScript, web sayfalarını etkileşimli hale getirmek için kullanılan bir programlama dilidir. Bir sayfaya hayat veren şey, kullanıcıyı etkileyen interaktif öğeler ve animasyondur. Ana sayfanızda  bir arama kutusu kullandıysanız, bir haber sitesinde canlı bir futbol maçı puanı kontrol ettiyseniz veya bir video izlediyseniz, JavaScript muhtemelen onun içinden geçiyor demektir.

Netscape tarayıcılar için tarafından 1996 yılından verisyon 1.0 olarak duyrulan javaScript, 1998 yılında versiyon 1.3 sürümü ile  ECMA-262 standartları ile EcmaScript 1.0 standart dili olarak onaylandı.  2010 yılından beri 1.8.5 sürümü olarak kullanılan javascript, ECMA-262 5. sürüm standartlarını desteklemektedir.

JavaScript ile Java Aynı Mı?

JavaScript’e yeni başlayanların, web ortamında sık karşılaştığı bir kavram da javascript için kısaca java ifadesi kullanılması sorunudur. Java ile javaScript dilleri bir birinden çok ama çok farklı kavramlardır.

Java, bir makine ortamında bağımsız olarak çalıştırabileceği anlamına gelen, nesne yönelimli bir programlama dilidir. Android cihazlar için uygulamalar, terminaller için yazılımlar ve sunucu taraflı web sayfaları hazırlamak için kullanılan güvenilir bir dildir. Java uygulamarı çalışabilmesi için derlenmesi gerekir.

JavaScript, diğer taraftan, web tabanlı bir uygulamanın parçası olarak çalıştırılacak olan metin tabanlı bir programlama dilidir. İlk geliştirildiğinde, Java için bir iltifat olması amaçlandı. Ancak JavaScript, web geliştirme alanındaki üç temelden biri olarak hayatına devam ediyor. Diğeri HTML ve CSS dilleridir.  JavaScript uygulamaları çalışabilmesi için tarayıcılar tarafından yorumlanması gerekir.

JavaScript’e Giriş​

JavaScript Nedir?

JavaScript, yaygın olarak web tarayıcılarında kullanılmakta olan dinamik bir programlama dilidir. JavaScript ile yazılan istemci tarafı betikler sayesinde tarayıcının kullanıcıyla etkileşimde bulunması, tarayıcının kontrol edilmesi, asenkron bir şekilde sunucu ile iletişime geçilmesi ve web sayfası içeriğinin değiştirilmesi gibi işlevler sağlanır.(wikipedia)

Günümüzde node.js gibi platformlar ile sunucu tarafında da kullanılmaya başlanmıştır.

Netscape tarayıcılar için tarafından 1996 yılından verisyon 1.0 olarak duyrulan javaScript, 1998 yılında versiyon 1.3 sürümü ile  ECMA-262 standartları ile EcmaScript 1.0 standart dili olarak onaylandı.  2010 yılından beri 1.8.5 sürümü olarak kullanılan javascript, ECMA-262 5. sürüm standartlarını desteklemektedir.

HTML içinde JavaScript Kullanımı

HTML5 standart tanımlaması ile javascript kodları sadece script etiketleri arasına yazılmaktadır.  Eski tanımlamalarda type ve language niteliklerine ihtiyaç duymasına rağmen güncel kullanımda bu gereksinimler kaldırılmıştır.

Kullanım:

 

Harici JavaScript Dosyasını HTML Belgesine Bağlama

Dahili kullanımda olduğu gibi yine script etiketleri kullanılmaktadır. Burada dikkat edilmesi gerek kısım ise script etiketinin src niteliğine harici olarak yüklenmek istenen javascript dosyası yolu yazılmalıdır.

Not:Harici bir script dosyası çağrıldığında, harici script çalışacağı için script etiketleri arasına yazılacak kodlar çalışmayacaktır.

Kullanım:

JavaScript’teYorum Satırı/Satırları

JavaScript programlama dilinde diğer C tabanlı dillerde olduğu gibi tek satırlık yorum yapılacaksa // işaretlerinden sonra tek satır yorum yapılabilir. Birden fazla satır yorum olarak yapılacaksa /* */ sembolleri arasında istenilen satır kadar yorum bırakılabilir.

 

JavaScript Dosyaları HTML içinde Nereye Yazılır?

Yaygın kullanım head etiketleri arasına yazılmasını önermesine rağmen, javascript kodları sayfanın yüklenmesini yavaşlatacağı için genellikle </body>(body kapanış) etiketinden hemen önce yazılması şiddetle tavsiye edilir. Eğer sayfa yüklenmeden önce yüklenmesi gereken script kodları mevcut ise tabiki head etiketleri arasına da yazılabilir.

Günümüzde yüklenme hatalarını önlemek için <script> etiketine async ve defer niteliklerini ekleyebilirsiniz.

async: sayfa yada istenilen script dosyası sonradan yüklenirse çalıştırılmasını sağlar.(harici dosyalar için geçerli)

defer: script head etiketi arasına yazılmasına rağmen sayfa yüklendikten sonra script dosyasının yüklenmesini sağlamak için kullanılır.(harici dosyalar için geçerli)

 

Kullanım:

async Kullanımı:

defer Kullanımı:

JavaScript Temel Kavramlar

Değişkenler

Değişken Tanımı

Değişkenin tanımını yaparak konuya başlayalım. Değişken, programın çalışması için gerekli verilerin tanımlanarak, bellek üzerinde tutulduğu bölgelere verilen isimlerdir.

Bellek hücrelerini birerli yada bir kaçının bir araya gelerek oluşturdukları grupları kutuya benzetirsek kutunun üzerindeki değişken adı, kutunun içindeki de değişkenin içindeki değer olarak düşünebiliriz.

Yukarıdaki şekilde olduğu gibi kutu değişken adını, içerisindeki değer ise kutunun tuttuğu veriyi ifade etmektedir.

JavaScript Veri Tipleri

JavaScriptte 6 temel veri tipi vardır. JavaScript değişken tanımlama yapıldığında bu tiplerden biri olarak değişken tanımlanmış olur.

Boolean: Mantıksal varlığı ifade eder. İki tip değer içerebilir true ve false
Null: Tam olarak null değerini taşıyan veri türüdür.
Undefined: Değişken tanımlanmış ama değer atanmamış ise değişken içindeki değer undefined dir
Number: EcmaScript standartlarına göre 64bit işaretli tek sayı tipi vardır. Tam yada ondalıklı sayılar number tipi ile ifade edilmektedir. Ek olarak +Infinity-Infinity, and NaN (not-a-number) olmak üzere 3 tane özel sembolik değer vardır.
String: JavaScript dizge üzerinde metinsel verileri temsil etmek için kullandığı veri tipidir. Dizgedeki her öğe 16 bitlik işaretsiz integer bir referansı vardır. Dizgedeki ilk elemanın index numarası 0 dır. Dizgedeki diğer değerler için index numarası 1 artarak devam eder. Özetle: Metinsel bir ifade karakterlerden oluşan bir dizi olarak nitelendirilir.
Symbol ( ECMAScript 6): EcmaScript 6 standartı ile tanımlanmış bir tipdir. Nesne değeri için benzersiz ve sabit bir değeri ifade eder.
Object: Bellekteki belirli bir nesnenin referansını(yolunu) tutmak için kullanılan tiptir. Dizi, Fonksiyon ve Nesneler bu tip ile ifade edilir.

JavaScript Değişken Tanımlama

JavaScript’te değişkenler  var anahtar kelimesi ile tanımlanır. Tüm veri türleri için var ifadesi ile değişken tanımlaması yapılır. JavaScript ile değişken tanımlarken bilinmesi gereken bazı temel kurallar var.

  • Değişken kullanılmadan önce tanımlanmış olması gerekir.
  • Bir değişken bir kapsam içinde tanımlanmış ise sadece o kapsam içinde kullanılabilir. Tanımlandığı aralıkta kullanılabilir.
  • Bir değişken tanımlayıcı (var) kullanılmadan değer atanmış ise bu değişken global olarak tanımlanır ve her yerden ulaşılabilir.

Kural:

Değişken Tanımlama Kuralları

  • Değişken isimleri büyük-küçük harf duyarlıdır. Yani ad ile AD aynı değişkeni göstermez.
  • Değişken isimlerinde Türkçeye özgü karakterler kullanılmamalıdır.
  • Değişken isimleri ?,!,:,%,- gibi özel karakterler içeremez.(_ karakteri hariç)
  • Değişken ismi olarak JavaScript dilindeki özel kelimeler seçilemez.
  • Değişken isimlerinde zorunlu olmamasına karşın küçük harf kullanımı tercih edilir. Eğer değişken ismi iki ya da daha fazla kelimeden oluşuyorsa ilk kelime hariç diğer kelimelerin ilk harfi büyük yazılır. (sayi, maasMiktari, kitapSayisi v.b.)
  • Değişken isimleri sayı ile başlayamaz.

Örnek:

 

JavaScript typeof Operatörünün Kullanımı

typeof operatörü belirtilen değişkenin yada değerin veri tipini dizge olarak döndürür. Aşağıdaki tabloda tiplerin typeof operatörü ile döndürdüğü sonuç görünmektedir.

Tip Sonuç
Undefined “undefined”
Null “object”
Boolean “boolean”
Number “number”
String “string”
Symbol “symbol”
Function “function”
Diğer Tüm Nesneler “object”

Örnek:

Tür Dönüşümü

JavaScript ile bir değişken tipten bağımsız olarak tanımlanır. Fakat değer ataması yapılırken değerin türüne göre değişkenin tipi dinamik olarak belirlenir. Bu  durum javascript dilinin değişken ile veri arasında gevşek bir bağa sahip olduğu anlamına gelir. İlk değer ataması yaparken, elle giriyorsak bu sorun oluşturmayacaktır. Ancak değer bir fonksiyon, json yada farklı bir nesneden geliyorsa bunu kontrol edip ona göre işlemden geçirmek büyük önem oluşturur.

Bu durumu bir örnekle belirtelim. JavaScript ile birleştirme ve toplama için + (artı) sembolü kullanılır.  Eğer “5” +”10″ gibi bir işlemi matematiksel olarak yapmak istiyorsak değerleri string olmaktan çıkarıp number türüne dönüştürmek gerekir. Aksi durumda sonuç:15 yerine sonuç:510 şeklinde oluşacaktır.

Javascript değişkenler konusunu anlatırken, javascript dilinde kullanılan türlerin listesini açıklamaları ile belirtmiştim. Bu açıklamadan sonra javascript  tür dönüşümünü sağlamak için aşağıdaki fonksiyonları kullanarak istediğimiz türlerde dönüşüm sağlayabiliriz.

String Türüne Dönüştürme

Bir değeri string türüne dönüştürmek için aşağıdaki iki fonksiyondan birini kullanabiliriz.

  • deger.toString()
  • String(deger)

Örn:

 

Sayı Türüne Dönüştürme

Aşağıdaki metodlar ile sayı türüne dönüştürebiliriz. En sık kullanılan dönüşüm fonksiyonlarından biridir. json, input yada prompt nesnelerinden okunan değerler string türünde olduğu için sayısal işlem yapılacaksa aşağıdaki fonksiyonlar ile dönüşüm yapılması gerekiyor.

Not: Tür dönüşümü sırasında sayısal değere dönüştürülmeyen değerler için NaN özel sembolik değeri oluşturulur.

Örn: “10A” değeri sayısal değere dönüştürülmek istendiğinde NaN özel değeri oluşturulacaktır.

  • Number(deger)
  • parseInt(deger)
  • parseFloat(deger)

Örn: iki kenarı girilen dikdörtgenin çevresini hesaplama

 

Boolean Türüne Dönüştürme

Boolean fonsiyonu ile true/false değerlerine dönüşüm yapılabilir.

  • Boolean(deger)

 

Kapsam

Javascript ile nesnelere, fonksiyonlar ve değişkenlere nasıl ve nerelerden ulaşma yetkinizin olduğunu örneklerle açıklayalım.

 

Yerel JavaScript değişkenleri:Yerel olarak tanımlanmış javascript değişkeni sadece oluşturulduğu alanda tanınmaktadır.

Fonksiyon dışında bu isim değişkeni tanınmayacaktır.

 

Evrensel(Global) JavaScript değişkeni:Tüm script,fonksiyon ve web nesnelerinde ulaşılabilir.

Script içinde tanımlanmış olan isim değişkenine her yerden ulaşılabilir.

 

Otomatik Küresel değişken: Değişken evrensel olarak tanımlanmamıştır. Ancak fonksiyion yada nesne içinde sonradan tanımlandığında küresel olması için değişken adının yazılması yeterlidir.

Fonksiyon içinde tanımlanan isim tüm scriptler ve web içinde fonksyion kullanıldıktan sonra ulaşılabilir durumdadır.(Not: var ile bildirim yapılmadığına dikkat edilmeli)

 

Tanımlamalar ile ilgili örnekler

HTML örneklerinde açıklamalar yorum satırları içinde yapılmıştır. typeof metodu değişken tanımlanmışsa değişken tipini tanımlanmamışsa undefined tipini çevirmektedir.

Yerel JavaScript değişkeni örneği:

 

Küresel JavaScript değişkeni örneği:

 

Otomatik Küresel JavaScript değişkeni örneği:

isim değişkeni ilk kontrol edildiğinde tanımlanmadığı için undefined tipini döndürüyor. fonksyion kullanıldıktan sonra değişken fonksyion dışında tekrar çağrıldığında artık değişken global olarak tanımlanmış olduğu için string tipini getiriyor.

 

Aritmetik Operatörler

Aritmetik operatörler aldığı sayısal değeri operatör sembolüne göre işleyip geriye tek bir değer döndürürler.  Standart aritmetik operatörler arttırma(+), eksiltme(-), çarpma(*), bölme(/) sembolleridir.

Standart aritmetik operatörlere (+, -, * /) ek olarak, JavaScript’te  aşağıdaki tabloda listelenen aritmetik operatörlerde mevcuttur.

Aritmetik Operatörler

Operatör Tanımı
Kalan(%) İkili bölme işlemindeki tamsayılı bölmede kalan değeri getirir.
Arttırma(++) Belirtilen değeri bir arttırmak için kullanılır.
Azaltma(–) Belirtilen değeri bir azaltmak için kullanılır.
Toplama (+) Belirtilen değerleri toplar. Farklı tipte değerler ise toplama için otomatik tür dönüşümü yapar.
Fark (-) Önüne eklendiği sayısal değerin tersini alır. İki değeri bir birinden çıkarmak içinde bu operatör kullanılır.
Çarpma (*) Matematiksel çarpma işlemi yapar.
Bölme (/) Matematiksel bölme işlemi yapar.
Üsalma (**) Üsalma işlemi için tanımlanmış operatör. (Örn: 2**3  sonuç:8) EcmaScript 7’de stardart olacak

 

JavaScript Toplama Operatörü(+)

Kural:

Örnek

 

JavaScript Çıkarma Operatörü (-)

Kural:

Örnek:

 

JavaScript Bölme Operatörü (/)

Kural:

Örnek:

 

JavaScript Çarpma Operatörü (*)

Kural:

Örnek:

 

JavaScript Kalan Operatörü (%)

Kural:

Örnek:

 

JavaScript Artırma Operatörü (++)

Kural:

Örnek:

 

JavaScript Azaltma Operatörü (–)

Kural:

Örnek:

 

JavaScript Üsalma Operatörü (**)

Kural:

Örnek:

 

JavaScript Olumsuzlama Operatörü (-)

Kural:

Örnek:

 

JavaScript Tekil Artı Operatörü (+): bir değişkeni kolay yoldan sayısal değere dönüştürmek için kullanılır.

Kural:

Örnek:

 

Kaynak:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation

Karşılaştırma Operatörleri

Karşılaştırma operatörleri, değişkenler veya değerler arasındaki eşitliği veya farkı saptamak için mantıksal işlemlerde kullanılır.

 

Eşitlik  Operatörü(==)

JavaScript dilinin çalışma anında tür dönüşümü yapabilme özelliği vardır.  Eşitlik operatörü ile eşitliğin iki tarafındaki değer türden bağımsız olarak aynı ise sonuç true değilse false olarak dönmektedir.

 

Örnek:

 

Örnek:

 

Örnek:

 

Eşitsizlik Operatörü(!=)

Karşılaştırması yapılan iki değer yada değişken arasında türden bağımsız olarak bir birinden farklı ise true  değilse bir biri ile aynı ise false dönmektedir.

 

Örnek:

 

Tam Eşitlik  Operatörü(===)

Karşılaştırması yapılan iki değer yada değişken hem tür hemde değer olarak bir biri ile aynı ise karşılaştırma sonucu true, tür yada değerlerden biri farklı ise false olarak dönmektedir.

 

Örnek:

 

Tam Eşitsizlik  Operatörü (!==)

Karşılaştırılan veri hem tür hemde değer bakımından bir birinden farklı ise true, iki değerde hem tür hemde değer olarak eşitse false olarak dönmektedir.

 

Örnek:

Büyüktür  Operatörü ( > )

Karşılaştırması yapılan iki değerden ilk değer ikinci değerden büyükse true, ikinci değer büyük yada eşitse false sonucunu üretmektedir.

 

Büyük Eşittir Operatörü ( >= )

Karşılaştırması yapılan iki değerden ilk değer ikinci değerden büyük yada eşitse true, ikinci değer büyükse false sonucunu üretmektedir.

 

Küçüktür  Operatörü ( < )

Karşılaştırması yapılan iki değerden ilk değer ikinci değerden küçükse  true, ikinci değer küçük yada eşitse false sonucunu üretmektedir.

 

Küçük Eşittir Operatörü ( <= )

Karşılaştırması yapılan iki değerden ilk değer ikinci değerden küçük yada eşitse true, ikinci değer küçükse false sonucunu üretmektedir.

 

Örnek Karşılaştırma Tablosu:

a=3 olduğunu varsayarak aşağıdaki karşılaştırma operatörleri ve karşılaştırma sonuçlarını gösterilmektedir.

== Eşitlik x == 8 false
x == 3 true
x == “3” true
=== Tam eşitlik (değer ve tür eşitliği) x === 3 true
x === “3” false
!= Eşitsizlik x != 8 true
!== Tam eşitsizlik (değer ve tür) x !== 3 false
x !== “3” true
x !== 8 true
> Büyüktür x > 10 false
< Küçüktür x < 10 true
>= Büyük eşittir x >= 10 false
<= Küçük eşittir x <= 10 true

 

 

 Kaynak:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators

http://www.w3schools.com/js/js_comparisons.asp

Mantıksal Operatörler

Mantıksal operatörler genellikle boolean değerleri ile kullanılır. Bu yüzden boolean türünde değer döndürür.

Operatör Kullanımı Tanımı
Lojik VE ( && ) ifade1 && ifade2 İfade1 true değerine döndürülebiliyorsa ifade1, değilse ifade2 değerini döndürür.
Lojik VEYA ( || ) ifade1 ||  ifade2 ifade1 true değerine çevrilebiliyorsa ifade1, değilse ifade1 değerini döndürür.
Lojik DEĞİL ( ! )  !ifade ifade true ise false, false ise true değerini döndürür.

 

JavaScriptte bir değer true olarak dönüştürülebilirse mantıksal işlemlerde true olarak kullanılır.

Aşağıdaki ifadeler mantıksal olarak dönüştürülürken false olarak dönüştürülmektedir.

  • null;
  • NaN;
  • 0;
  • empty string (“”);
  • undefined

 

JavaScript Mantıksal Ve Operatörü

 

JavaScript Mantıksal Veya Operatörü

 

JavaScript Mantıksal Değil Operatörü

İşlem Önceliği

JavaScript Operatörlerin işlem öncelik sırası aşağıdaki listede sıralandığı gibidir. Eşit önceliğe sahip operatörlerde işleme sırası, “işleme yönünde belirtilen şekildedir.

Öncelik Operatör tipi İşleme yönü Operatör(ler)
1 üye elemanlara erişme soldan sağa .
[]
nesne oluşturma sağdan sola new
2 fonksiyon çağrısı soldan sağa ()
3 bir arttırma mümkün değil ++
bir azaltma mümkün değil --
4 mantıksal değil sağdan sola !
bitsel değil sağdan sola ~
tek operandlı + sağdan sola +
işaret değiştirme sağdan sola -
typeof sağdan sola typeof
void sağdan sola void
delete sağdan sola delete
5 çarpma soldan sağa *
bölme soldan sağa /
mod alma soldan sağa %
6 toplama soldan sağa +
çıkarma soldan sağa -
7 bitsel kaydırma soldan sağa <<
>>
>>>
8 büyüklük-küçüklük karşılaştırması soldan sağa <
<=
>
>=
in soldan sağa in
instanceof soldan sağa instanceof
9 eşitlik karşılaştırması soldan sağa ==
!=
===
!==
10 bitsel ve soldan sağa &
11 bitsel xor soldan sağa ^
12 bitsel veya soldan sağa |
13 mantıksal ve soldan sağa &&
14 mantıksal veya soldan sağa ||
15 koşul sağdan sola ?:
16 atama sağdan sola =
+=
-=
*=
/=
%=
<<=
>>=
>>>=
&=
^=
|=
17 virgül soldan sağa ,

 

Kaynak:

https://tr.wikibooks.org/wiki/JavaScript/Operat%C3%B6rler

JavaScript Koşullar ve Döngüler

if else Kullanımı

Bütün programlama dillerinde olduğu  gibi JavaScript dilinde de en çok kullanılan karar ifadelerinden biridir. if parantezi arasındaki koşul doğru ise ifade çalıştırılır. Koşul sağlamıyorsa else kısmı varsa bu kısımdaki ifade çalıştırılır.

Kullanımı 1:

 

Örnek:Yaşı 18den büyükse ehliyet alabilirsiniz yazdıran uygulamayı yapın.

 

Kullanım 2:

Örnek:Yaşı 18den büyükse ehliyet alabilirsiniz, değilse yaşınız ehliyet alamak için uygun değil ve kalan yılı yazdıran uygulamayı yapın.

 

Kullanım 3:

Örnek:Girilen değer 100,0 ve negatif aralığındaysa ayrı ayrı uyarı verdiren uygulamayı yapınız.

 

Kullanım 4:

Örnek: 100lük sistemdeki notu 5lik sisteme çeviren uygulamayı yapınız.

 

Ternary Operatör Kullanımı

Üç işlemli tek operatördür. Koşul deyiminin kısaltması olarak da kullanılır. JavaScript Ternary If deyiminin kısaltması olarak kullanılabilir.

Yazım Kuraluı:

Parametreler:

Koşul: true yada false olarak değerlendirilecek ifade

ifade1,ifade2: her hangi bir türde değer

 

Tanım:

Eğer koşul doğru ise operatör ifade1 değerini döndürür, aksi takdirde ifade2 değerini döndürür.

 

Ternary Operatör Örnekleri

Örnek 1: ternary operatör ile elde edilen sonucu bir değişkene aktarma

Örnek 2: ternary ile üretilen bir değeri doğrudan sonuç olarak kullanabilirsiniz. durum değişkenin değerine göre ödenecek tutarın değişmesi

 

Örnek 3: Ternary operatörü çoklu olarak kullanabilirsiniz.

 

Örnek 4: Her durum için parantez ve virgül ile birden fazla işlem yürütebilirsiniz.

Örnek 5: Farklı işlemler yapmak için yine ternary operatör kullanabilirsiniz.

 

Kaynak:

https://developer.mozilla.org/tr/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

 

 

 

 

 

switch Case Kullanımı

Switch ifadesi farklı koşullara bağlı olarak farklı eylemleri yürütmek için kullanılır. Switch kendine gelen ifadeyi değerlendirip, uygun olan case ile eşleştirir. Uygun olan case ile eşleşen ifade/ifadeler yürütülür.

Yazım Kuralı

ifade: case değerleri ile eşleştirilecek olan değer

case degerN: ifade ile eşleştirilecek olan kelime/değer

Tanım:
ifade
, case değerleri ile eşleştirilecek olan durumu göstermektedir. Eğer ifade case değerlerinden biri ile eşleşirse, eşleşen değerden break; komutuna kadar olan tüm kodlar çalıştırılır.

Şartlardan sonra break komutu kullanılmazsa program aşağı doğru her case kodunu çalıştırır. Break kullanımı unutulmaması gerek önemli bir noktadır.

 

Örnek 1:new Date().getDay() metodu 0-6 arasında değer üretir. 0->pazar 6->cumartesi gününü göstermektedir.

 

Örnek 2: 

 

Örnek 3: break yazmayı unutunca oluşacak hata ile ilgili örnek

 

Örnek 4: Tek bir işlem için çoklu case kullanabilirsiniz.

 

 

 

for Döngüsü Kullanımı

Tüm C tabanlı programlama dillerinde olduğu gibi süreklilik arz eden komutlarınızı for döngüsü altında ele alabilirsiniz.  JavaScript dilinde de bu yapının kullanımı aynı şekildedir.  Bu yazıda javascript ile for döngüsü kullanımı hakkında bilgi bulabilir ve  bir kaç tane javascript for döngüsü örneğini inceleyebilirsiniz.

JavaScript dilinde for döngüsü dışında şu döngüler de bulunmaktadır.

  • for – Belirli sayıda komutu bloklar arasında yürütmek için kullanılır.
  • for/in – dizi yada nesnelerin özelliklerini okumak için kullanılır(diğer dillerdeki foreach ile aynı)
  • while – şart doğru olduğu sürece bloklar arasındaki kodlar yürütülür.
  • do/while – en az bir kez olmak üzere şart doğru olduğu sürece bloklar arasındaki kodlar yürütülür.

Yazım Kuralı:

for (ifade1; ifade2; ifade3) {
çalıştırılacak olan kod bloğu
}

ifade1: Döngü başlamadan önce başlangıç değişkeninin tanımlanması(örn: i=0)

ifade2: Döngü çalışma koşulunu göstermektedir.(Örn: i<=100)

ifade3: Başlangıç değişkeninin değişimi(artış/azalış)  (Örn: i++)

 

Örnek 1: 0-100 arasındaki sayıları yazdırmak için gerekli kodu yazınız.

Örnek 2: Döngü ve şartları bir arada kullanabilirsiniz. 0-100 arasındaki çift sayıları ekrana yazdıran programı yapınız.

Açıklama:  i sayısının 2 ile bölümünden kalan 0 ise (i%2==0) sayı çifttir.

Örnek 3:Dizi elemanlarını ekrana yazdırabilirsiniz. dizideki eleman sayısını öğrenmek için dizi.length özelliği ile dizideki eleman sayısını öğrenebiliriz. Aşağıdaki örnekte gunler adında bir dizi tanımlandı. gunler.length özelliği ile dizi sayısı öğrenilip döngüde dizinin her öğesi gunler[i] ile ekrana yazdırılmaktadır.

 

Örnek 4: Girilen mesajı ve tekrar sayısını kullanıcıdan alıp ekrana yazdıran javascript örneğini yazınız.

 

while Döngüsü Kullanımı

JavaScript while döngüsünde şart doğru olduğu sürece bloklar arasındaki kodlar yürütülür.

Yazım Kuralı:

while (şart) {
    çalıştırılacak olan kodlar
}

şart: true(doğru) olduğu sürece döngüyü çalıştırır.

 

Örnek 1:  0’dan 9’a kadar olan sayıları yazdırmak için kullanılan örnek.

Açıklama: Döngüden önce var i=0; ile değişken tanımlanıp ilk değer ataması yapılır. i<10 olduğu sürece döngü çalıştırılacaktır. döngü içinde şartı bozmak için i++ ile i değişkeninde ki değer arttırılmıştır.

 

Örnek 2: Dizi elemanlarını while döngüsü ile ekrana yazdırma.

Açıklama: İlk üç satırda değişkenler tanımlanıp değer ataması yapılmıştır. while(meyveler[i]) ile döngü değeri dolu olduğu sürece true değeri üretilecek ve döngü içine girip yazi değişkenine dizi elemanları yazdırılacaktır. i++ değeri  döngü 1 arttırılacak ve meyveler dizisindeki son index değerinden sonra tanımsız(undefined) değer için false değeri üretilecektir.

 

Örnek 3: Döngüdeki en önemli kural; döngü sonsuz döngüye girmemelidir. Bunun için döngüden çıkma komutu(break) yada döngüdeki şartı bozacak değişim yazılmalıdır.

Örnek 3 düzeltme: Programı sonsuz döngüden çıkarmak için aşağıdaki gibi bir kod yazılabilir.

 

 

for-in Kullanımı

Kural:

 

Örnek:

 

Örnek:

Yukarıdaki örnekte nesne yerine bir dizi olduğu dikkatinizi çekmiştir. JavaScriptte bütün diziler birer nesnedir.  Bu yüzden dizi elemanı üzerinde okuma yaparken 0. özellik 1.özellik şeklinde son özelliğe(index) kadar devam etmektedir.

Örnek:

String katarları da birer karakter dizisidir.  

 

Eğer nesneleri doğrudan okumak istiyorsanız. for…of deyimini kullanmanız gerekmektedir.

for-of deyimi örneği:

 

Örnek: pencere (window) özelliklerini öğrenmek için

 

Örnek: tarayıcı (navigator) özelliklerini öğrenmek için

 

for … of Kullanımı

for of deyimi tekrar eden (iterable) nesneler üzerinde hareket ederek nesnenin değerini okumak için kullanılan özel bir javascript deyimidir.  Iterable nesneler (Array, Map, Set, String, TypedArray ve nesne içindeki yield ile oluşturulan değişkenker vb.) üzerinde okumak yapmak için kullanılır. For of ES6 ile javascript içine dahil olmuş bir deyimdir. For in deyiminden farklı olarak koleysiyonlar üzerinde sadece okuma yapmaktadır. C tabalı programlama dillerindeki foreach kavramı ile benzerlik göstermektedir. Yazıyı fazla uzatmadan örneklere geçelim.

Örnek: Dizi üzerinde okuma

 

Örnek: String üzerinde okuma

 

Örnek: Map nesnesi ile kullanım örneği

 

Örnek Generatör foksiyon ile kullanım örneği

 

Örnek: arguments nesnesi ile kullanım

 

 

 


JavaScript Diziler

Dizi Oluşturma

Öncelikle “dizi nedir” sorusuna cevap vererek başlayalım. Dizi benzer ifadelerin bir araya getirildiği özel değişkendir.

Bir değişken içinde bir veri saklana bilirken, dizilerde birden fazla veri saklamak mümkündür. Aşağıdaki örnek kod parçasının ilk satırında diller adında bir dizi oluşturulmuştur. İkinci satırda da idsi örnek olan etiket seçilmiş ve dizi içindeki değerler yerleştirilmiştir.

 

Eğer dizi kullanmasaydık yukarıdaki değerleri şu şekilde yazmak zorunda kalacaktık.

Javascript ile Dizi Nasıl Oluşturulur?  

JS dizi oluşturmanın kuralı şu şekildedir.

Örnek kodda şu şekilde olacaktır.

Ayrıca bilinmesi gereken bir konu da javascript ile veri tipleri dinamik olarak tanımlanır. Bu ifadeden yola çıkarak javascript dizisi içinde kullanılan verilerin tipleri bir birinden farklı olabilir. Şu şekilde dizi tanımlamakta mümkündür.

Not:Sadece bu şekilde değil iç içe dizi ve dizi içinde nesne(diziler de bir nesnedir bu arada) tanımlamak da mümkü[highlight][/highlight]ndür.

New Anahtar Kelimesi ile Dizi Oluşturma

new anahtar kelimesi ile dizi oluşturmak içinde içinde şu şekilde kod yazmak gerekecektir.

Dizi Nesnelerine Nasıl Ulaşılır?

Dizi içindeki her bir değerinin bir adresi vardır. Dizilerdeki bu adreslere programcı olarak index adını verilmektedir.

İlk değerin index(adresi) 0. index olarak ifade edilir ve yine köşeli parantezler içinde index numaraları yazılarak değere ulaşılır.

Örnek:

Dizi içindeki değer nasıl değiştirilir?

Dizi içindeki değeri değiştirmek içinde aynı yöntemle değer değiştirilir.

[highlight]Javascript değerini jquery olarak değiştirdi.[/highlight]

JavaScriptte diziler  nesne olarak tanımlanmıştır. typeof metodu ile dizinin tipini öğrenmek mümkündür.

Dizi içinde Nesne(Object),fonksiyon, başka bir dizi de eklemek mümkündür. 

Dizilerde kullanılan bazı metodlar ve özellikler

lenght özelliği: dizinin uzunluğunu öğrenmek için kullanılır.

Diziye nesne ekleme: 

lenght özelliği ile diziye değer eklemek için;

Sırasız index numarası verip değer eklemek de mümkündür.

Dizi oluştururken dikkat edilmesi gerekenlar

new anahtar kelimesi ile tek değer yazılarak bir dizi oluşturulursa, girilen değer dizi boyutu kabul edilir. Yazılan sayı kadar undefined tipinde değer oluşturulur. Aşağıdaki örnekte içinde değer girilmemiş 12 elemanlı bir dizi oluşturulmuştur.

 

Dizilerde Kullanılan Fonksiyonlar

JavaScript dilinde dizilerde kullanılan bazı metodları kullanım şekil tablo ve örneklerle açıklanmıştır.

 

Dizi oluşturma ve dizilerde kullanılan bazı metodları Dizi Oluşturma isimli makalede belirtmiştim. Bu makalede diziler üzerinde işlem yapan metodların nasıl kullanıldıkları örneklerle açıklanmıştır.

concat() Çağrıldığı dizi ile metodaa gönderilen dizi yada değerleri ekleyip geriye dizi döndürür.  
every() Dizideki tüm elemenları verilen fonksiyon ile test eder.
Geri dönüş değeri false bulana kadar tüm elemanları sırayla kontrol eder. Dönen tüm değerler true ise sonuç true döndürür.
 
filter() Kendisine gönderilen fonksiyondan geçen tüm elemanlardan yeni bir dizi oluşturur.  
forEach() Dizinin her elemanı için belirtilen fonksiyonu çalıştırır.  
indexOf() Kendisine gönderilen parametre ile dizide aramayapıp bulduğu ilk indexi döndürür. eğer dizide yoksa aranan değer -1 değerini çevirir.  
join()  Dizideki tüm değerleri belirtilen yapıştırıyıcıya göre birleştirir.  
lastIndexOf() Belirtilen elemanın dizinin sonunda olup olmadığını kontrol eder. Dizinin sonunda bulamazsa -1 değerini döndürür.
// aranan değerin dışında isteğe bağlı ikinci bir değer daha verilebilir. Pozitif ise dizinin başından kaç değer içinde aranacağı,
//negatif ise dizinin sonunda kaç değerin aramadan çıkarılacağını ifade eder. Unutmayın aramaya eklenmese de dizinin başından aranacaktır.
//değer bulmazsa -1 değerini döndürecektir.
 
map() Dizi içindeki tüm elemanları belirtilen fonksiyondan geçirip yeni bir dizi oluşturur.  
pop() Dizideki son değeri diziden atar.  
push() Belirtilen elemanları dizinin sonuna ekler.  
reverse() Diziyi ters çevirir.  
shift() Dizinin başındaki ilk elemanı çeker.  
sort() Diziyi sıralar.  
some() BAZI elemanların belirtilen fonksiyon ile testi geçip geçmediğini kontrol eder.  
unshift() Dizinin başına değer ekler.  
toString() Diziyi metinsel(string) ifadeye çevirir.  

JavaScript Dizi Metod Örnekleri

 

concat()

 

 

every()

 

 

 

filter()

 

 

forEach()

 

 

indexOf()

 

 

join()

 

 

lastIndexOf()

 

 

map()

 

pop()

 

push()

 

reverse()

 

shift()

 

sort()

 

some()

 

unshift()

 

toString()

 

JavaScript Fonksiyonlar

Fonksiyon Tanımlama

Genellikle bir fonksiyon bir kodun yinelemeli olarak kullanılacağı durumda tanımlanır. Diğer programlama dillerinde de kullanılan fonksiyonlar “altprogram” olarak da ifade edilmektedir. Fonksiyon isim ve gövde olarak iki parçadan oluşur. isim kısmından fonksiyona parametre geçişi sağlanabilir. Gövde üzerinde de çalıştırılacak olan kodlar yürütülmektedir. Bir fonksiyona parametre geçişi olabildiği gibi fonksiyon isimleri üzerinden değer dönüşü de yapılabilmektedir.

Fonksiyon iki parçadan oluştuğunu yazmıştım. Fonksiyon gövdesi yürütülecek komutları barındırır. Fonksiyon ismi ile de fonksiyonu terkar tekrar kullanbiliriz.

Fonksiyonu çağırmak (çalıştırmak) için bilmemiz gerekenler, fonksiyon adı ve fonksiyonunun aldığı parametrelerdir. 

Tanım:

Gelelim javascript ile fonksiyon nasıl tanımlandığına;

JavaScript dilinde her fonksiyon bir nesnedir.

Varsayılan değer dışında bir fonksiyondan bir değer döndürmek için return ifadesi kullanılmak zorundadır.  return değeri olmayan bir fonksiyon varsayılan değeri döndürmektedir.  Kurucu metod ile oluşturulan nesneler dışındaki tüm fonksiyonlardaki varsayılan değerler undefined türüdür.

Yazım Kuralı:

 

Yukarıdaki tanımlama en doğru tanımlama kuralı olmasına rağmen, fonksiyon kavramına yeni olanlar için fonksiyonları 4 ana gruba ayırabiliriz.

 1. Parametresi ve geriye dönüş değeri olmayan fonksiyonlar

Örnek:

 

 2. Parametreli ve geriye dönüş değeri olmayan fonksiyonlar

Bir fonksiyonun parametre alması demek fonksiyonun adından sonraki parantez içine virgüller ile fonksiyonun dışarıdan alacağı parametreler belirtilir. Aşağıdaki selamla fonksiyonu dışarıdan ad gelen değerleri ad değişkeni ile almaktadır. Kendi içinde ad değişkeni ile kullanıp ekrana yazdırmaktadır. Ana programda ise tanımlanan fonksiyon iki sefer farklı parametreler ile çağrılmaktadır.

 3. Parametresiz ve geriye dönüş değeri olan fonksiyonlar

Geriye dönüş değeri olan fonksiyonlarda return ifadesi kullanılması zorunludur. Fonksiyonda üretilen değer return ifadesi üzerinden fonksiyon adı ile ana programa geçirilir. Aşağıdaki örnekte alınan yıl değeri yilGetir() fonksiyonu ile yil değişkenine aktarılır. yil değişkeni de alert ile ekrana yazdırılmaktadır.

 4. Parametresi ve geriye dönüş değeri olan fonksiyonlar

 

 

JavaScript Anonim Fonksiyon Tanımlama

Bir fonksiyonu isim ile tanımlayabileceğimiz gibi isimsiz (ananonim) olarak da tanımlamak mümkündür.

Örnek: İsim ile Çarpım  Fonksiyonu tanımlama

Örnek: Çarpım fonsiyonunu anonim olarak tanımlama

Not 1:Anonim fonksiyonlar fonksiyon alan bir çok javascript metodu ve özelliği için kullanılabilecek ideal tanımlama yöntemleridir.

Not 2:Anonim fonksiyon tanımlama jquery kavramını öğrenecekler için önemli bir adımdır. Jquery kütüphanesinde bir çok işlem anonim tanımlamalar şeklinde yürütülmektedir.

Örnek: Dizideki değerleri okuma örneği. Anonim fonksiyon ile

JavaScript Arrow Fonksiyon /JavaScript Lambda Fonksiyon

C# programlama dili ile ilgilendiyseniz Lambda fonksiyon tanımlama kavramını az çok biliyorsunuz demektir.

EcmaScript 6 ile javasSript diline dahil olan Arrow Fonksiyonlar ile isimsiz bir fonksiyon tanımlayıp değer döndürme işlemini yapabilirsiniz.

Yazım Kuralı: En kapsamlı şu şekilde yazabilirsiniz.

Örnek 1: Basit bir kare alma fonksiyonunu  arrow fonksiyon ile  tanımlama

Örnek 1: Klasik yöntemle tanımlama

 

Örnek 2: Yukarıdaki anonim örneğini arrow fonksiyon ile şu şekilde tanımlayabiliriz.

Örnek 3: dizi içindeki 1,2,3 sayılarının karesini alma

 

Anonim Fonksiyon Tanımlama

Bir fonksiyonu isim ile tanımlayabileceğimiz gibi isimsiz (ananonim) olarak da tanımlamak mümkündür. Bir çok programlama dilinde anonim fonksiyon kullanımı mevcuttur.

Örnek: İsim ile Çarpım  Fonksiyonu tanımlama

Örnek: Çarpım fonsiyonunu anonim olarak tanımlama

Not 1:Anonim fonksiyonlar fonksiyon alan bir çok javascript metodu ve özelliği için kullanılabilecek ideal tanımlama yöntemleridir.

Not 2:Anonim fonksiyon tanımlama jquery kavramını öğrenecekler için önemli bir adımdır. Jquery kütüphanesinde bir çok işlem anonim tanımlamalar şeklinde yürütülmektedir.

Örnek: Dizideki değerleri okuma örneği. Anonim fonksiyon ile

Arrow Fonksiyon Tanımlama

JavaScript Arrow Fonksiyon /JavaScript Lambda Fonksiyon

C# programlama dili ile ilgilendiyseniz Lambda fonksiyon tanımlama kavramını az çok biliyorsunuz demektir.

EcmaScript 6 ile javasSript diline dahil olan Arrow Fonksiyonlar ile isimsiz bir fonksiyon tanımlayıp değer döndürme işlemini yapabilirsiniz.

Yazım Kuralı: En kapsamlı şu şekilde yazabilirsiniz.

Örnek 1: Basit bir kare alma fonksiyonunu  arrow fonksiyon ile  tanımlama

Örnek 1: Klasik yöntemle tanımlama

Örnek 2: Yukarıdaki anonim örneğini arrow fonksiyon ile şu şekilde tanımlayabiliriz.

Örnek 3: dizi içindeki 1,2,3 sayılarının karesini alma

JavaScript DOM İşlemleri

addEventListener ile Nesne Olayları

HTML dökümanı üzerinde belirtilen elementi dinleyip, istenilen olay gerçekleştiğinde bir metod çalıştırmak için kullanılır.

Aslında özetle DOM nesnelerine olay atamak için kullanılır.

Bu yazıda addEventListener kullanımı ve isteğe bağlı bubbling( kabarcıklama) özelliğini anlatacağım.  addEventListener kullanırken son parametreyi genellikle false yapmışızdır. true olsa ne olur onu da inceleyeceğiz.

Kullanımı:

element.addEventListener(olay,fonksiyon,kabarcıklanma);

olay: dinlenecek etikete ait olan hareketlilik. örn: click,mouseover,keypress, cut,scroll,dragenter vs. tüm olay listesine ulaşmak için tıklayın.

fonksiyon :dinlenen olay gerçekleştiğinde çalıştırılacak olan metod adı yada anonim fonksiyon

kabarcıklanma: içi içe olan etiketlerin her birinde olay tanımlanmışsa baştan sonra doğru olayları çalıştırıp çalıştırmyacağı.(true/false alır)

 

Basit kullanımı:

test1 nesnesine tıklandığında anonim bir fonksiyon tetikleniyor.

 

Şimdi gelelim bubbling kavramını aşağıdaki resimde incelemeye. Turuncu(kutu 1),sarı (kutu 2) ve (kırmızı(kutu 3) olarak isimlendirilmiştir.

Bu üç etiket sırasıyla bir biri içindedir. kutu1 > kutu2 > kutu3 şeklinde bir biri içinde durmaktadır. Her etikete bir click olayı ve anonim tanımlama yapılmıştır. Son parametre olan kabarcıklama ilk örnekte false olarak işaretlendiğinde fonksyionlar sırasıyla içeriden dışarıya doğru etkilenen etiketlerde çalıştırılacaktır.

 

 

screenshot_6

1.Durum: kabarcıklanma false yazılıp, kutu3(kırmızı) nesnesine tıklandığında önce kutu3 > kutu2 > kutu1 metodları sırasıyla çalıştırılacaktır.

 

2.Durum kabarcıklanma true olarak yazılırsa, bu seferde etkilenen etiketler metodları içeriden dışarıya doğru değil, dışarıdan içeri doğru çalıştıracaktır. Yine örneğimizdeki kabarcıklamayı true olarak değiştirdiğimizde ve kutu3 (kırmızı) nesnesine tıkladığımızda kutu1 > kutu2 >kutu3 şekilde metodlar çalıştırılacaktır.

Bu durum addEventListener ile bubbling parametresini değiştirerek hangi etiketlerin nasıl etkilendiğini görmüş olduk. Eğer bir etiketin ebeveynlerinde metod yoksa bubbling önemli olmayacaktır. Fakat olay atayacağımız etiketin ebeveynlerinde olaylar varsa bubbling değerinin true/false olma durumu önemli olacaktır.

stopPropagation:

Peki burada kutu3(kırmızı) etikete tıkladığımda ebeveynlerindeki olayları kontrol etmesin istersem ne yapmalıyım.

Bunun içinde Event.stopPropagation metodu işimizi görmektedir. Bubbling değerini false yaparak tıkladığımız etiketten olay kontrolüne başlamasını sağlayıp çalışan metoda Event.stopPropagation metodunu yazıyoruz.

Örnek kullanım: Örnekte kutu3(kırmızı)  etikete tıkladığımızda sadece kutu3 çalışacak ve e.stopPropagation();  değeri ile aşağı doğru kabarcıklanmayı engellemiş olacağız.

 

 

Olaylar

Olaylar, HTML nesnelerinin kullanıcı(fare,klavye yada dokunma) yada Web Apileri(video bitmesi, duraklatılması vs.) ile etkileşimi sonucu meydana gelen değişimlerdir. DOM ile gerçekleşen olaylara JavaScript kullanarak fonksiyon atamak mümkündür.

Bu yazıda DOM nesnelerinin olaylarına javascript fonksiyon atandığını örneklerle açıklayacağız.

JavaScript ile 3 şekilde HTML nesnelerine olay atamak mümkün.

  1. HTML etiketine nitelik tanımlayarak olay kullanımı
  2. addEventListener ile nesneye bağlararak olay kullanımı
  3. Nesneneye özellik olarak olayın kullanımı

 

1.HTML Etiket İçinde Olay Kullanımı

En eski kullanılan yöntemdir. Tavsiye etmemekle birlikte internet ortamında verilen örneklerin çoğu bu şekilde yapılmıştır. Sayfanın sonunda tüm DOM olay listesi mevcuttur.

Kullanımı

<etiket OLAYADI=”javascript kodu/kodları“>

Mantık aslında şu şekildedir.  Tırnaklar arasında yazılan javascript kodu, kırmızı ile belirtilen olay gerçekleştiğinde çalıştırılır.

Not: Çift tırnak içinde tek tırnak metinsel olarak algılanır. Tam tersi durum tek tırnak içinde geçerlidir.

 

Örnek: Butona tıklayınca  ekran uyarı merhaba dünya yazalım.

onclick: tıklama gerçekleştiğinde  window.alert(‘Merhaba Dünya’) javascript kodunu çalıştır.

 

Örnek: Input kutusundaki yazı değiştiğinde ekrana uyarı verdiren kodu yazalım.  Bunun için onchange olayını kullanacağız.

 

this anahtarı ve fonksiyon kullanımı

fonksiyon kullanımı: Genellikle olay gerçekleştiğinde bir fonksiyon çalıştırılır.

this: Olayın gerçekleştiği nesneyi fonksiyona parametre olarak gönderir.

Örnek: Yazı kutusuna girilen  sayı tek mi çift mi olduğunu yazdıran kodu hazırlayalım. Bu sefer ki örnek satır içinde yazılmayacak kadar uzun olsun. Bu yüzden bir tane fonksiyon tanımlayıp fonksiyon içinde şartları yaptırmak daha mantıklı olacaktır.

Ne yazdığımızı inceleyelim. onchange niteliği olay gerçekleştiğinde kontrol fonksiyonunu çalıştırıyor. kontrol fonksiyonuna this ile etkin olan nesneyi(input nesnesi) gönderiyoruz. Kontrol fonksiyonunun tanımlandığı yerde gelen ismiyle this anahtarını karşılayıp gerekli şart işlemini gerçekleştiriyoruz.

Örnek: Yukarıdaki örneği bir butona bağlayarak yapalım. Bu sefer etkin olan nesne buton olacağı için this anahtarı ile  ancak butonu göndermiş olacağız. Text nesnesi için document.getElementById kullanmamız gerekecek. Bunun için nesneye bir tane id ataması yapıyoruz.

Yada örnek şu şekilde daha genel hale getirilebilir. kontrol fonksiyonuna sayi nesnesini ( document.getElementById(‘sayi’) ile çekip ) gönderiyoruz.

 

2. addEventListener ile nesneye olay atayarak kullanma

addEventListener konusunu sitede daha önce anlatmıştım. O yazıdan konuyu anlatan bir kaç alıntı yaparak olay kullanımını açıklayalım.

Kullanımı:

element.addEventListener(olay,fonksiyon,kabarcıklanma);

olay: dinlenecek etikete ait olan hareketlilik. örn: click,mouseover,keypress, cut,scroll,dragenter vs. tüm olay listesine ulaşmak için tıklayın.

fonksiyon :dinlenen olay gerçekleştiğinde çalıştırılacak olan metod adı yada anonim fonksiyon

kabarcıklanma: içi içe olan etiketlerin her birinde olay tanımlanmışsa baştan sonra doğru olayları çalıştırıp çalıştırmyacağı.(true/false alır)

Basit kullanımı:

test1 nesnesine tıklandığında anonim bir fonksiyon tetikleniyor.

 

Örnek:Yazı kutusuna girilen  sayı tek mi çift mi olduğunu yazdıran kodu hazırlayalım. Yukarıdaki örneği addEventListener kullanarak hazırlıyoruz.

Bu örnekte yapılmadı ama olay atanan fonksiyonlara olay ile ilgili parametre geçilebilmektedir.

Yukarıdaki kodda ne oldu, inceleyelim.6. satırda id değeri  sayi olan HTML etiketini javascript nesnesi olarak seçtik.  9. satırda bu nesneye addEventlistener ile change(değer değiştiğinde) olayı ile kontrol fonksiyonunu bağladık.  11-28. satırlar kontrol fonksiyonuna ait olan bölüm. kontrol fonksiyonunda dikkat edilmesi gereken en önemli husus, this anahtarı ile text kutusundaki değişimin kontrol edildiğini bilmektir.  text kutularındaki tüm değerler value niteliğinde tutulmaktadır. this.value ile text kutusuna girilen değeri okuyup şart ile işleme tabi tuttuk.

Örnek:Yukarıdaki örneği bir butona bağlayarak yapalım.  Aradaki kullanım farklılığını görmek için aynı örnekleri farklı tekniklerle yapıyorum.

Bu örnekte yapılmadı ama olay atanan fonksiyonlara olay ile ilgili parametre geçilebilmektedir.

 

Örnek:  pencere üzerinde tıklanan konumu gösterin. Olaya atanan parametreyi göstermek için hazırlanmış bir örnektir. olay parametresi gerçekleşen olaya ait bilgileri göndermektedir. Tıklama olayında farenin nesne üzerinde hangi konuma tıkladığını vermektedir. offsetX yatayda, offsetY dikeyde bulunan konumu göstermektedir.

 

Daha fazla örnek için JavaScript Örnekleri yazısını inceleyin.

3. Nesne Özelliği Olarak Olay Kullanımı

Yazdığım javascript uygulamalarında sıklıkla tercih ettiğim yöntemdir.  JavaScript kodu ile HTML etiketlerini bir birinden ayırmak için kullanılabilecek en iyi olay tanımlama tekniğidir. Nesnenin olay özelliklerini kullanarak daha temiz bir şekilde programlama yapma imkanı sunmaktadır.

Kullanımı

Nesne oluşturulduktan sonra, nesnenin olaylarına bir fonksiyon yada anonim bir fonksiyon bağlanarak olay ataması yapılır. Nesne üzerinden olay kaldırılacaksa tanımlanan özelliğe null değeri geçirilerek olay kaldırılabilir.

Örnek: Pencerede herhangi bir alana tıklama örneği

Window(Pencere) nesnesinin onclick özelliğine anonim bir fonksiyon bağlandı. Pencere üzerinde her hangi bir yere tıklandığında bu fonksiyondaki kodlar yürütülecektir.

 

Örnek: Pencerede herhangi bir alana tıklama örneği (Fonksiyon bağlanarak da yapılabilecek bir yöntem)

 

Örnek: Bir nesneye olay ile ilgili bir fonksiyon bağlandığında, fonksiyonu çalıştırılırken olay ile ilgili bilgiler parametre olarak geçilebilir. Bu örnekte fonksiyona olay parametresi geçilmiş ve tıklanan yerin komunu gösterilmektedir.

 

Örnek:Yazı kutusuna girilen  sayı tek mi çift mi olduğunu yazdıran kodu hazırlayalım. İlk iki kavramdan açıkladığımıza benzer bir şekilde özelliklere bağlayarak da yapmak mümkün.

NOT:Nesne HTML etiketi yüklendikten sonra oluşturulmalıdır. Bunun için çeşitli yöntemler var fakat en basit olanı  </body> etiketinden hemen önce javascript kodlarını yazılmasıdır.

Api Olaylarını Kontrol Etme

Fare ve klavye olayları ile ilgili çok sayıda örneği bulmak mümkün. Bu bölümde medya nesnelerine ait olayları nasıl yöneteceğimizi inceleyeceğiz.

Örnek: sarki.mp3 dosyasını oynatama, durdurma ve ses ayarını değiştirme örneği

DEMO

 

 

Tüm JavaScript DOM Olayları

Window Olay Niteliği

onafterprint onload onpageshow
onbeforeprint onmessage onpopstate
onbeforeunload onoffline onresize
onerror ononline onstorage
onhashchange onpagehide  

Form Olayları

onblur oninvalid
onchange onreset
oncontextmenu onsearch
onfocus onselect
oninput onsubmit

Klavye Olayları

onkeydown
onkeypress
onkeyup

Fare Olayları

onclick onmouseover
ondblclick onmouseup
onmousedown onmousewheel
onmousemove onwheel
onmouseout  

Sürükleme(Drag) Olayları

ondrag ondragover
ondragend ondragstart
ondragenter ondrop
ondragleave onscroll

Pano Olayları

oncopy
oncut
onpaste

Media Olayları

onabort onloadeddata onseeked
oncanplay onloadedmetadata onseeking
oncanplaythrough onloadstart onstalled
oncuechange onpause onsuspend
ondurationchange onplay ontimeupdate
onemptied onplaying onvolumechange
onended onprogress onwaiting
onerror onratechange

Misc

onshow
ontoggle

 

HTML DOM Nesneleri

HTML DOM ile, javaScript kullanarak bir HTML belgesinin tüm elementlerine ulaşıp, değiştirebilirsiniz.  DOM; HTML, SVG, XML gibi yapısal diller için bir arayüz görevi görmektedir. Dom ile bir ağaç gibi belgeye ulaşıp, belgenin yapısını ve stilini değiştirmek mümkündür.

HTML DOM(Document Object Model)

Tarayıcı bir Web sayfasını yüklendiğinde DOM nesnesini de oluşturur. Yüklenen DOM, belge için bir dizi düğüm ve nesne sunmaktadır. Düğümler ile ayrıca olaylar ve tetikleyiciler eklenebilir. Özetle programlama dilini WEB sayfasına bağlamak için kullanılır.

DOM modeli nesneleri aşağıdaki gibi ağaç yapısında oluşturmaktadır.

JavaScript, Nesne Modelini kullanarak  HTML belgesini düzenlemek için gerekli tüm yetkilere sahiptir. Aşağıdaki gibi belge üzerinde tüm işlemleri gerçekleştirebiliriz.

  • JavaScript sayfadaki tüm HTML öğrelerini değiştirebilir.
  • JavaScript sayfadaki tüm HTML niteliklerini değiştirebilir.
  • JavaScript sayfadaki tüm CSS stillerini değiştirebilir.
  • JavaScript mevcut HTML belgesindeki nitelikleri kaldırabilir.
  • JavaScript yeni HTML öğeleri ve nitelikleri ekleyebilir.
  • JavaScript sayfadaki tüm HTML olaylarına tepki gösterebilir.
  • JavaScript yeni HTML olayları oluşturabilir.

 

Bu yazıda şunları öğreneceksiniz.

  • HTML etiketlerinin içeriğini değiştirmeyi
  • HTML etiketlerinin stilini değiştirmeyi
  • DOM olaylarına nasıl tepki verileceğini
  • HTML etiket oluşturmayı ve silmeyi

HTML DOM Nedir?

Yukarıda belirttiğim gibi HTML DOM standart bir nesne ve programlama ara yüzüdür.

Nesne olarak HTML etiketi şunlara sahiptir.

  • HTML etiketleri birer nesnedir.
  • HTML etiketlerinin özellikleri
  • HTML etiketlerine erişim metodları
  • Tüm HTML etiketlerinin olayları 

HTML DOM metodları ile elementler üzerinde işlem yapabilirsiniz.

HTML DOM özellikleri ile elementlerin değerlerini okuyabilir ve değiştirebilirsiniz.

 

DOM Programlama Arayüzü

  • JavaScript ile Tüm HTML DOM ağacına ulaşabilirsiniz.
  • DOM içinde tüm HTML etiketleri birer nesne (object) olarak oluşturulmuştur.
  • Programlama arayüzü her etiket için metot(method) ve özellikler(property) sunar.
  • Özellik( Property) etiket değeri üzerinde okuma ve değiştirme yapma imkanı sunar.(İçeriği değiştirme gibi)
  • Methot (Method) etiket üzerinde eylemler gerçekleştirme imkanı sunar.(Yeni etiketler ekleme gibi)

Örnek: Aşağıdaki örnekte id değeri test olan bir etiketin içesindeki yazıyı değiştirme işlemi gerçekleştirilmiştir.  Örnekte getElementById metodu, innerHTML özelliği göstermektedir.

 

getElementById Metodu

Bir HTML etiketine erişmek için kullanılan en sık yöntemlerden biridir. Etiketin id niteliğini kullanır.

innerHTML Özelliği

Bir HTML etiketinin içeriğini öğrenmenin en kolay yoludur.  innerHTML ile etiketin içeriğini almak yada değiştirmek mümkündür.

 

HTML DOM document Nesnesi

document nesnesi web sayfasını temsil eder.

Sayfa içindeki her hangi bir elemente ulaşmak için document nesnesi ile başlamak zorundasınız.  HTML etiketleri üzerinde düzenleme yapmak için kullanılan bazı document metotları aşağıda gösterilmiştir.

HTML Etiketlerini Seçme

  • document.getElementById(id): id niteliği ile eşleşen ilk kaydı getirir.
  • document.getElementsByName(name): name niteliği ile eşleşen tüm kayıtları dizi olarak  getirir.
  • document.getElementsByTagName(etiketadı):etiket adı ile eşleşen tüm kayıtları dizi olarak getirir.
  • document.getElementsByClassName(classAdı):class niteliği ile eşleşen tüm kayıtları dizi olarak getirir.
  • document.querySelector(seçici): seçici ile eşleşen ilk kaydı getirir.
  • document.querySelectorAll(seçici): seçici ile eşleşen tüm kayıtları dizi olarak getir.

Aşağıdaki  document özellikleri ile de HTML nesnelerine liste olarak erişebilirsiniz. HTML belgesindeki nesneleri dizi listesi olarak çeker.

Not: body, head, documentElement, title tek bir nesneyi döndürür. Diğerleri nesnelerden oluşan bir dizi döndürür.

  • document.anchors  ⇨ Sayfadaki tüm bağlantıları erişmek için kullanılır.
  • document.body  ⇨Body nesnesine ulaşmak için kullanılır
  • document.documentElement ⇨HTML kökünden itibaren tüm dökümana ulaşmak için kullanılır.
  • document.embeds ⇨ eklentilere ulaşmak için kullanılır.
  • document.forms ⇨ Sayfadaki formlara ulaşmak için kullanılır.
  • document.head ⇨ head etiketine ulaşmak için kullanılır.
  • document.images ⇨Sayfadaki resimlere ulaşmak için
  • document.links ⇨ Sayfadaki linklere ulaşmak için kullanılır.(a href olan nesneler)
  • document.scripts ⇨ Sayfada yüklenen Script dosyalarına ulaşmak için kullanılır.
  • document.title ⇨ Sayfa başlığına ulaşmak için kullanılır.

 

Örnek: document.getElementById kullanımı

 

Örnek: document.getElementsByName kullanımı

 

Örnek: document.getElementsByTagName kullanımı

Örnek: document.getElementsByClassName kullanımı

 

Örnek: document.querySelector kullanımı

 

Örnek: document.querySelectorAll kullanımı

 

HTML Etiketlerini Düzenleme

  • etiket.innerHTML: Etiketin içini okuma ve değiştirme için kullanılır.
  • etiket.attribute: Etiketin niteliğini değiştirmek için kullanılır.
  • etiket.setAttribute(nitelik, değeri): Etiketin niteliğini değiştirmek için kullanılır.
  • etiket.style.property:  Etiketin stilini değiştirmek için kullanılır.
  • etiket.classList: etiketlerin class niteliği üzerinde silme,değiştirme, ekleme, class listesini öğrenme gibi işlemleri yapmak için kullanılır.

 

Örnek: etiket.innerHTML kullanımı

 

Örnek: etiket.attribute kullanımı

 

Örnek: etiket.attribute kullanımı

 

Örnek: etiket.setAttribute(nitelik, değeri) kullanımı

örnekte seçilen nesneler üzerinde hareket etmek için forEach metodu kullanılmıştır.

 

Örnek: etiket.style.property kullanımı

Tek tek stil özelliklerini değiştirmek yada stil değerini okumak için bu özelliği kullanabilirsiniz.

 

Örnek: etiket.classList kullanımı

Aşağıdaki örnekleri satır satır çalıştırın.

 

HTML Etiketi Ekleme ve Silme

  • document.createElement(element) :HTML etiketi oluşturma
  • document.removeChild(element): HTML etiketi silme
  • document.appendChild(element): HTML etiketi ekleme
  • document.replaceChild(element): HTML etiketini değiştirme

 

Örnek:select içine yeni bir option ekleme

  • createElement ile nesneyi oluşturduk.
  •  setAttribute ile value niteliğine yeni sayı girişi yapılır.
  • innerHTML ile de oluşturulan etiket içine “Beşiktaş” değerini atıyoruz.
  • appendChild ile select içine oluşturulan option değerini ekledik.

 

HTML Etiketine Olay Ekleme

HTML etiketine olay eklemek için iki yöntem mevcut.

1.Yöntem: HTML etiketlerine addEventListener metotu ile olay eklemesi yapılabilir.

2.Yöntem: HTML etiketine olay özelliği ile olay eklemesi yapılabilir.

Örnek: Aşağıdaki örnekte id’si birinci olan etikete tıkladığında(onclick) belirtilen anonim fonksiyon çalışacak ve ekrana uyarı verecektir.

Tüm JavaScript DOM Olayları

Window Olay Niteliği

onafterprint onload onpageshow
onbeforeprint onmessage onpopstate
onbeforeunload onoffline onresize
onerror ononline onstorage
onhashchange onpagehide  

 

Form Olayları

onblur oninvalid
onchange onreset
oncontextmenu onsearch
onfocus onselect
oninput onsubmit

 

Klavye Olayları

onkeydown
onkeypress
onkeyup

 

Fare Olayları

onclick onmouseover
ondblclick onmouseup
onmousedown onmousewheel
onmousemove onwheel
onmouseout  

 

Sürükleme(Drag) Olayları

ondrag ondragover
ondragend ondragstart
ondragenter ondrop
ondragleave onscroll

 

Pano Olayları

oncopy
oncut
onpaste

 

Media Olayları

onabort onloadeddata onseeked
oncanplay onloadedmetadata onseeking
oncanplaythrough onloadstart onstalled
oncuechange onpause onsuspend
ondurationchange onplay ontimeupdate
onemptied onplaying onvolumechange
onended onprogress onwaiting
onerror onratechange

 

Misc

onshow
ontoggle

JavaScript Form İşlemleri

Form Örnekleri

Text kutusu içine girilen yazıyı Div içine aktarma,Text kutusuna girilen yazıyı select nesnesine option olarak ekleme;Text kutusu boşsa formu göndermeyi iptal etme;JavaScript ile img ekiketindeki resimleri değiştirme……

 

JavaScript ile Text kutusu içine girilen yazıyı div içine aktarma

 

JavaScript ile Text kutusu boşsa formu göndermeyi iptal etme;

 

JavaScript ile Text kutusuna girilen yazıyı select nesnesine option olarak ekleme;

 

JavaScript ile img ekiketindeki resimleri değiştirme;