Javascript Switch Case
Web developerlara selamlar :)
Yep yeni bir javascript makalesinde yine birlikteyiz ve bugünkü makalemizde switch-case yapısını göreceğiz.Konunun
özü javascript karar yapılarına dayandığı için önceki Javascript If-Else makalesini okumanızı öneririm.
Javascript karar yapılarında if-else karar yapısı sıkça kullanılmakta ancak çok olasılıklı senaryolarda sürekli else deyimi kullanıp içerisine koşulları yeniden yazmak oldukça sıkıcı olduğu için switch-case geliştirildi ve sonsuz sayıdaki senaryoya uygun hareket etmek oldukça kolaylaştı.
Switch-Case yapısına hemen hemen tüm programlama dillerinde rastlasakta Visual Basic'te adına select-case şeklinde
karşılaşıyoruz,syntax olarak ise oldukça kolay bir yapı olan switch-case'in genel yapısı aşağıdaki şekildedir:
Switch-case yapısına bakarsak switch deyimi içerisinde hangi koşulu karşılaştıracaksak öncelikle onu belirtip alt satırlardaki her case deyiminde karşılaştırma yapıyoruz,eğer hiçbir karşılaştırma koşulu sağlanmazsa default deyimindeki kod çalışıyor.Ayrıca her break deyimi ise o koşulun sona erdiği noktayı ifade ediyor.
İşin teorik kısmını bırakıp küçük bir javascript örneği yapalım ve kullanıcı ekrandaki input nesnesine takım adını yazsın ve bizde ona hangi tarihte kurulduğunu söyleyelim.
Şimdi Dreamveawer'ımızı açıyor ve boş bir HTML belgesi oluşturuyoruz,ardından body tagları arasına takım adının
yazılacağı bir input ve birde click eventimizi yakalayacak submit tipinde input ekliyoruz:
Şimdi head tagına javascript fonksiyonumuzu yazıyoruz:
Şimdi geldik javascript switch-case konusuna,takım bilgisini "takim" ismindeki değişkenimize atadık ve bu değişkeni
switch deyimine yazıyor,her case deyimine takımları yazıyoruz:
Switch-case yapımızı kurduk ancak henüz her senaryoda ne olacağına dair herhangi bir kod yazmadık,şimdi javascriptin
alert metodunu kullanarak takımların kuruluş tarihlerini ekrana yansıtıyoruz:
Artık programımız her takıma ait kuruluş yıllarını ekrana yansıtacak,eğer kullanıcı bu 3 takım dışında herhangi birşey yazarsa default deyimi devreye girecektir.
Switch-case yapımızı böylece tamamladık ama bir noktaya dikkatinizi çekmek istiyorum: case deyimi sağında yazılan
karşılaştırma senaryosunun çift tırnaklar içerisinde yazılmasının nedeni "takim" isimli değişkenin string tipinde bir
değeri tutmasından gelmektedir,eğer "takim" değişkenimiz sayısal bir değer içerseydi bu durumda case deyimi yanındaki
koşulu tırnaksız numerik olarak yazmamız gerekirdi.
Switch-case yapımız artık hazır ancak bir noktayı atlıyoruz,ya kullanıcı ekrana hiçbirşey yazmadan butona tıklarsa?
Bu durumda hemen önceki makalemizdeki if-else koşulunu kullanıyor ve switch-case yapımızı if-else içerisine alıyoruz:
Javascript programımızı test etmeden önce son yapmamız gereken bu yazdığımız fonksiyonu "submit" tipindeki input'un
click eventine referans vermek:
Artık hazırız ve sayfamızı çalıştırıyoruz:
Gördüğünüz gibi javascript ile switch-case karar yapıları oldukça kolay,tabi bu durum diğer diller için de geçerli :)
Bir sonraki makalemizde görüşmek dileğiyle,hoşçakalın!
Projeyi İndir
Yep yeni bir javascript makalesinde yine birlikteyiz ve bugünkü makalemizde switch-case yapısını göreceğiz.Konunun
özü javascript karar yapılarına dayandığı için önceki Javascript If-Else makalesini okumanızı öneririm.
Javascript karar yapılarında if-else karar yapısı sıkça kullanılmakta ancak çok olasılıklı senaryolarda sürekli else deyimi kullanıp içerisine koşulları yeniden yazmak oldukça sıkıcı olduğu için switch-case geliştirildi ve sonsuz sayıdaki senaryoya uygun hareket etmek oldukça kolaylaştı.
Switch-Case yapısına hemen hemen tüm programlama dillerinde rastlasakta Visual Basic'te adına select-case şeklinde
karşılaşıyoruz,syntax olarak ise oldukça kolay bir yapı olan switch-case'in genel yapısı aşağıdaki şekildedir:
Switch-case yapısına bakarsak switch deyimi içerisinde hangi koşulu karşılaştıracaksak öncelikle onu belirtip alt satırlardaki her case deyiminde karşılaştırma yapıyoruz,eğer hiçbir karşılaştırma koşulu sağlanmazsa default deyimindeki kod çalışıyor.Ayrıca her break deyimi ise o koşulun sona erdiği noktayı ifade ediyor.
İşin teorik kısmını bırakıp küçük bir javascript örneği yapalım ve kullanıcı ekrandaki input nesnesine takım adını yazsın ve bizde ona hangi tarihte kurulduğunu söyleyelim.
Şimdi Dreamveawer'ımızı açıyor ve boş bir HTML belgesi oluşturuyoruz,ardından body tagları arasına takım adının
yazılacağı bir input ve birde click eventimizi yakalayacak submit tipinde input ekliyoruz:
Şimdi head tagına javascript fonksiyonumuzu yazıyoruz:
Şimdi geldik javascript switch-case konusuna,takım bilgisini "takim" ismindeki değişkenimize atadık ve bu değişkeni
switch deyimine yazıyor,her case deyimine takımları yazıyoruz:
Switch-case yapımızı kurduk ancak henüz her senaryoda ne olacağına dair herhangi bir kod yazmadık,şimdi javascriptin
alert metodunu kullanarak takımların kuruluş tarihlerini ekrana yansıtıyoruz:
Artık programımız her takıma ait kuruluş yıllarını ekrana yansıtacak,eğer kullanıcı bu 3 takım dışında herhangi birşey yazarsa default deyimi devreye girecektir.
Switch-case yapımızı böylece tamamladık ama bir noktaya dikkatinizi çekmek istiyorum: case deyimi sağında yazılan
karşılaştırma senaryosunun çift tırnaklar içerisinde yazılmasının nedeni "takim" isimli değişkenin string tipinde bir
değeri tutmasından gelmektedir,eğer "takim" değişkenimiz sayısal bir değer içerseydi bu durumda case deyimi yanındaki
koşulu tırnaksız numerik olarak yazmamız gerekirdi.
Switch-case yapımız artık hazır ancak bir noktayı atlıyoruz,ya kullanıcı ekrana hiçbirşey yazmadan butona tıklarsa?
Bu durumda hemen önceki makalemizdeki if-else koşulunu kullanıyor ve switch-case yapımızı if-else içerisine alıyoruz:
Javascript programımızı test etmeden önce son yapmamız gereken bu yazdığımız fonksiyonu "submit" tipindeki input'un
click eventine referans vermek:
Artık hazırız ve sayfamızı çalıştırıyoruz:
Gördüğünüz gibi javascript ile switch-case karar yapıları oldukça kolay,tabi bu durum diğer diller için de geçerli :)
Bir sonraki makalemizde görüşmek dileğiyle,hoşçakalın!
Projeyi İndir