Web Tabanlı Programlama – Etkileşim

4. Etkileşim

Şimdiye kadar HTML kodları ile oluşan bir site şablonu, CSS kodları ile görsel hâle geldi. Şimdi siteyi ziyaret eden kullanıcıların site içerisinde neler yapabileceği ile ilgili beyin fırtınası yapılacaktır. İçerik okunabilir, linkleri kullanarak sayfalar arası geçiş yapılabilir. Eklenmesi istenilen başka bir madde var mıdır?

Örneğin;

Her hangi bir HTML elementi içerisinde yazılı olan bir metni değiştirebilir mi?

Ya da bir div elementinin arka plan rengini değiştirebilir mi?

İşte, kullanıcıların bu türden işlemleri gerçekleştirebilmesi için HTML ve CSS kodları yeterli olmayabilir. Bunun için farklı kod yapılarına gereksinim duyulur. Bu noktada Javascript:

HTML içeriğini değiştirebilir.

HTML niteliklerini değiştirebilir.

CSS stilini değiştirebilir.

Bu işlemleri mantıksal sınamalara göre de yapabilir. Örneğin siteyi ziyaret eden kullanıcı harf yerine metin girişi yaptıysa, uyarı gösterebilir.

Özetle, HTML web sayfalarının içeriğini tanımlamak, CSS web sayfalarının biçimini belirlemek, Javascript ise web sayfalarının davranışını programlamak için kullanılır. Peki Javascript kodları nereye eklenir. Daha önce görüldüğü üzere, farklı CSS kodlama yöntemleri gibi Javascript kodlama yöntemleri de vardır.

Javascript Kodlama Yöntemleri

İşlevsel Olmayan Kullanımı

levsel Olmayan Kullanımı

Head Elementi Arasındaki Kullanımı

Head Elementi Arasındaki Kullanımı

Body Elementi Arasındaki Kullanımı

Body Elementi Arasındaki Kullanımı

Dış Bir Dosyaya Bağlantı Verilerek Kullanımı

Dış Bir Dosyaya Bağlantı Verilerek Kullanımı

Şimdi bu yöntemlerden bazılarını kullanarak senaryo temelinde kodlama yapılacaktır.

HTML İçeriği Değiştirme

Javascriptle HTML içeriğinin değiştirilebileceğinden bahsedilmiştir. Web sayfamızda bir buton aracılığıyla güncel tarih ve saatin gösterilmesi bu türden uygulamalara bir örnek olarak verilebilir.

HTML İÇERİĞİ DEĞİŞTİRME

Aşağıdaki ekran görüntüsünde “Göster” butonuna her tıklandığında butonun altındaki saat de değişmektedir.

Güncel Tarih ve Saat Uygulaması

HTML Niteliklerini Değiştirme

Hatırlanıldığı üzere, Html sayfaları etiketlerden oluşmaktadır. Örneğin div, p, a, button, input, vb. sayfa ile kullanıcının etkileşimi sonucunda, herhangi bir etiketin özelliğini Javascript ile değiştirmek mümkündür. Örneğin kullanıcının herhangi bir butona tıklaması ile div olan bir etiketi butona ya da input olan bir etiketi butona dönüştürmek mümkündür.

HTML NİTELİKLERİNİ DEĞİŞTİRME

Kullanıcı Butona Tıklamadan Önce

Kullanıcı Butona Tıklamadan Önce

Kullanıcı Butona Tıkladıktan Sonra

Kullanıcı Butona Tıkladıktan Sonra

CSS Değiştirme

HTML sayfaları biçimlendirilirken CSS kullanılmıştır. Bu biçimlendirme özelliklerini de kullanıcıların eylemlerine göre (Örneğin bir butona tıkladığında ya da bir veri girişi yaptığında) Javascriptle değiştirmek mümkündür.

CSS DEĞİŞTİRME

Elementleri Gizleme ve Görünür Yapma

Elementleri Gizleme ve Görünür Yapma2

Şimdiye kadar Javascript kullanarak basit etkileşimli kodlamalar yapıldı. Artık hedefi daha yükseklere taşımanın sırası gelmedi mi sizce? Hatırlarsanız, javascript’ de mantıksal sınamalara göre işlem yapılabileceğinden bahsedilmişti. Örneğin

Eğer … olduysa, …. yap.

Eğer … ise … değiştir.

Eğer … ise … göster.

Bu şekilde sayısız senaryolar oluşturulabilir. Peki bu sınama işlemini javascript ile nasıl yapabiliriz?

Mantıksal Sınama

Bu konu başlığı altında javascript’ de mantıksal sınama yapılmasına olanak sağlayan kontrol yapıları görülecektir.

if-else kontrol yapısı

if else kontrol yapısı

Şimdi, bir senaryo üzerinden if-else kontrol yapısı kullanılacaktır. Örneğin siteye giriş zamanına göre kullanıcıya “Günaydın”, “İyi günler” ya da “İyi akşamlar” mesajı veren bir kodlama yapılacaktır.

if else kontrol yapısı2

Switch Kontrol Yapısı

SWİTCH KONTROL YAPISI

Şimdi bir senaryo üzerinden switch kontrol yapısı kullanılacaktır. Örneğin siteye hangi günde giriş yapıldığının mesajını veren bir kodlama yapılacaktır.

SWİTCH KONTROL YAPISI2

Tekrarlı (Döngü) Yapılar

Diğer programlama dillerinde olduğu gibi, Javascript’ de de aynı kod her seferinde farklı bir değer için çalıştırılmak isteniyorsa tekrarlı yapılar (Döngüler) kullanılır. Örneğin birden 100’e kadar sayı yazdırmak istenirse 100 satır kodlama yapmak yerine bunu 3 satır kodlama ile yazdırabilmek mümkündür. Şimdi, senaryolar temelinde tekrarlı yapılar kullanılacaktır.

For Döngüsü

For Döngüsü

1-100 arasındaki sayıların 3’e ya da 5’e bölünenlerini yazdıran javascript kodlaması

For Döngüsü2

For Döngüsü Örneği

While Döngüsü

While Döngüsü

1 den n’ e kadar olan sayıların toplamı

While Döngüsü2

While Döngüsü Örneği

Javascript’ de herhangi bir değişkenin değerini sadece metin, sadece sayı atanabileceği gibi HTML ya da CSS kodları olarak da atanabilir. Yukarıdaki kodlama bir string birleştirme işlemidir. Burada kullanıcının girmiş olduğu n sayısı ile toplam sayıları bir anlam ifade edebilecek şekilde birleştirilmiştir. Javascript, bu kodları web sayfası içerisine sadece yazmakla görevlidir. Bu kodun nasıl görüntüleneceği ise daha önceden de değinildiği üzere tarayıcının görevidir.

Do While Döngüsü

Do While Döngüsü

Fonksiyon Yazımı

Fonksiyonlar belirli bir görevi gerçekleştirmek için tasarlanmış kod bloklarıdır. Herhangi bir eylem sonucunda çağrıldıklarında yürütülmeye başlarlar.

Fonksiyonlarla ilgili daha önceden siteyi ziyaret eden bir kullanıcının bir butona tıklamasıyla elementlerin niteliğini değiştirebilen bir kodlama yapılmıştı. Bu senaryo üzerindeki kodlama iki bölüme ayrılabilir.

I. Elementlerin niteliğini değiştiren kod bloğu

Elementlerin niteliğini değiştiren kod bloğu

II. Kullanıcı bir butona tıkladığında elementlerin niteliğini değiştiren kod bloğunun çağrılması

Kullanıcı bir butona tıkladığında elementlerin niteliğini değiştiren kod bloğunun çağrılması

Şimdi fonksiyon kullanım yöntemlerini karşılaştırmalı olarak inceleyelim.

fonksiyon kullanım yöntemlerini

Uygulama

Aşağıda kullanıcının doğum tarihine göre yaşını hesaplamayan bir kodlama örneği paylaşılmıştır.

1- Kullanıcının doğum tarihini girebileceği bir sayfa tasarımının yapılması

fonksiyon kullanım örneği

2- Kullanıcının doğum tarihine göre yaşını hesaplayan fonksiyonun yazılması

Kullanıcının doğum tarihine göre yaşını hesaplayan fonksiyon

3- Kullanıcının yaşını gösteren fonksiyonun yazılması

Kullanıcının yaşını gösteren fonksiyon

4- Javascirpt Kodları ile HTML kodlarının birleştirilmesi

Javascirpt Kodları ile HTML kodlarının birleştirilmesi

Bu örnekte, Yöntem 1 ve Yöntem 2’ ye göre fonksiyon kullanımları birleştirilmiştir. Şimdi, örnek Yöntem 3 ‘ e göre değiştirilecektir.

yöntem 1 le kullanıcının yaşını gösterme

Diziler

Diziler, birden çok değeri tek bir değişkende depolamak için kullanılır. Önceki örneklerde, her bir değer için yeni değişken tanımlamaları yapıldı. Örneğin:

diziler

Bu türden bir değişken tanımlama yerine, benzer niteliklere sahip olan değişkenler bir dizi değişkende toplanabilir ve daha kolay yönetilebilir. Örneğin:

diziler2

ya da

diziler3

Yukarıdaki iki örnek de aynı şeyi yapmaktadır. Basitlik, okunabilirlik ve kodun çalıştırılma hızı için birincisinin kullanılması tavsiye edilmektedir. Peki, dizi içerisindeki bir öğeye (ör: Muğlaspor) nasıl ulaşılabilir?

Diziler, içerisindeki öğelere erişmek için sayıları kullanır. Bu sayılar 0’ dan başlayarak dizinin içerisindeki öğe sayısından 1 eksik değer arasında olabilir. Örneğin takımlar dizisi 3 öğe içermektedir. Burada “Muğlaspor” değerini ekrana yazdırmak için;

diziler4

kodlaması kullanılabilir. Dizinin tüm öğelerini ekrana yazdırmak için ise,

diziler5

Uygulama

Şimdi bir senaryo temelinde yukarıdaki örnekler kodlanacaktır. Kullanıcının girmiş olduğu değere göre dizinin elemanını ekranda gösteren bir kodlama aşağıdaki şekilde olabilir.

1- Kullanıcının veri giriş yapabilmesi için HTML kodları

1 Kullanıcının veri giriş yapabilmesi için HTML kodları

2- Kullanıcının girmiş olduğu değere göre dizinin öğesini gösterme

2 Kullanıcının girmiş olduğu değere göre dizinin öğesini gösterme

dizi kullanım örneği

Hatırlanacağı üzere, bu gibi durumlar için bir mantıksal sınama yapılması gerektiği daha önceden öğrenilmişti. Buna göre kullanıcı herhangi bir değer girmez ya da dizinin öğe sayısı aralığında olmayan bir değer girdiğinde dizinin tüm öğelerini ekrana yazan bir kodlama yapalım.

bir değer girdiğinde dizinin tüm öğelerini ekrana yazan bir kodlama

dizi kullanım örneği2

Basit Dizi İşlemleri

Önceki örneklerde sabit bir dizi tanımlayarak, dizi içerisindeki öğelere erişilmeye çalışıldı. Şimdi ise, diziye öğe eklemek, silmek, değiştirmek gibi işlemler görülecektir.

1- Dizinin öğelerini değiştirme

En basit şekliyle dizinin herhangi bir öğesi aşağıdaki gibi değiştirilebilir.

1 Dizinin öğelerini değiştirme

2- Kullanıcının seçmiş olduğu değeri dizinin başına ya da sonuna ekleme ve dizinin başından ya da sonundan veri silme

HTML kodları

Kullanıcının seçmiş olduğu değeri dizinin başına ya da sonuna ekleme ve dizinin başından

Javascript Kodları

Kullanıcının seçmiş olduğu değeri dizinin başına ya da sonuna ekleme ve dizinin başından2

3- Dizinin Herhangi Bir Yerine (ör: 3. Ögesinden sonra) Yeni Bir Öğe Ekleme ya da Herhangi Bir Öğesini Değiştirme

HTML kodları

Dizinin Herhangi Bir Yerine Yeni Bir Öğe Ekleme ya da Herhangi

Javascript Kodları

Dizinin Herhangi Bir Yerine Yeni Bir Öğe Ekleme ya da Herhangi2

Ekleme

ekleme

Değiştirme

değiştirme

4. Dizinin Ögelerini Sıralama

Programlama dilleri ile iki tür sıralama yapılabilir. İlk olarak harf, metin ya da sayıları alfabetik sıralayabilir (Ör: 0, 1, 10, 2, 20, a, ab, b, bd). İkinci olarak ise sayıları numerik olarak sıralayabilir (Ör: 0, 1, 2, 10, 20). Javascriptle de dizi içerisindeki öğeleri alfabetik ya da numerik şekilde sıralayabilirsiniz. Bu işlem için .sort() komutu kullanılır. sort(), varsayılan olarak değerleri metin olarak sıralar. “Ankara”, “10” ve “?” öğelerini kıyaslandığında, rakamlar harflerden daha önce geldiği için 10 ilk sırada olmalıdır. “a” harfi “m” den önce geldiği için de dizinin sıralaması 10, Ankara, Muğla olur. Sayılar metin hâlinde sıralanırsa “25”, “100”den büyüktür, çünkü “2”, “1”den büyüktür.

HTML Kodları

4. Dizinin Ögelerini Sıralama

Javascript Kodları

4. Dizinin Ögelerini Sıralama2

4. Dizinin Ögelerini Sıralama3

Nesneler

Gerçek yaşam içerisinde herhangi bir nesne düşününüz. Örneğin bir bilgisayarı ele alalım. Genel bir nesne ismini içeriyor değil mi? Bir diğer ifadeyle bir bilgisayar tür, renk, işlemci, ram gibi özelliklerin alt özelliklerinin birleşiminden doğan bir varlığı simgeliyor.

NESNELER

Benzer şekilde kişileri, arabaları nesneleştirmek mümkündür. Peki bu nesne yapısı kodlama yapmak ne işe yarar?

Dizileri kullanarak benzer niteliklere sahip olan değişkenler tek bir değişkende toplanabilir.

NESNELER2

Peki, şekil 9 ‘daki bilgisayar özellikleri bir değişkende nasıl tutulabilir? İşte bu durumda nesne temelli değişken tanımlanabilir. Javascript’te bu işlem aşağıdaki gibidir:

NESNELER3

Dizi içerisindeki herhangi bir öğeye erişirken dizi sıra numarası (Ör: dizi [0]) kullanılırdı. Nesne içerisindeki bir öğeye erişirken de, “nesne” . “özelliği” şeklinde erişilebilir.

NESNELER4

Uygulama

Kullanıcının girmiş olduğu bilgisayar özelliklerini bir nesneye aktaran ve bu nesneleri bir dizi içerisinde tutup girilen bilgisayar özelliklerini bir tabloda gösteren sayfa kodlamasını yapınız.

1. Kullanıcının Girmiş Olduğu Bilgisayar Özelliklerini Bir Nesneye Aktarma

HTML Kodu

1. Kullanıcının Girmiş Olduğu Bilgisayar Özelliklerini Bir Nesneye Aktarma

Javascript Kodu

1. Kullanıcının Girmiş Olduğu Bilgisayar Özelliklerini Bir Nesneye Aktarma2

2. Oluşturulan Nesneleri Bir Dizi İçerisinde Tutma

2. Oluşturulan Nesneleri Bir Dizi İçerisinde Tutma

3. Dizi İçerisindeki Nesneleri Bir Tabloda Gösterme

Yeni CSS Kodları

3. Dizi İçerisindeki Nesneleri Bir Tabloda Gösterme

Javascript Kodu

3. Dizi İçerisindeki Nesneleri Bir Tabloda Gösterme2

3. Dizi İçerisindeki Nesneleri Bir Tabloda Gösterme3

3. Dizi İçerisindeki Nesneleri Bir Tabloda Gösterme4

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir