Bir Web sayfası tasarlanırken sayfaya ait içerik, sunum ve davranış şekilleri belirlenir. Buna “3 katman mimarisi” denir. İçerik, sayfa içinde göstereceğiniz verilerin tümüdür. Sunum, bu verileri kullanıcıya nasıl göstereceğinizi belirler. Davranış ise sayfanın olaylar karşısında verdiği tepkidir. Bu katmanlar aşağıda gösterilmiştir.

Content-->Web sayfasının içeriği

Presentation-->Web sayfasının sunumu

Behavior-->Web sayfasının davranışı

Content katmanı Web sayfamızın içeriğini belirler. Web sayfamızda kullandığımız tüm yazılar, resimler, linkler, formlar vs. content kapsamında ele alınır. Content’i belirlemek için HTML kullanılır. Yani Web sayfamızdaki içeriği HTML ile belirtiyoruz. Bu içeriği kullanıcıya sunmak için presentation katmanı kullanılır. Bu katman ile Web sayfasında bulunan içeriği görsel olarak şekillendirip kullanıcya sunarız. Bu sunumu gerçekleştirmek için CSS kullanılır ve son olarak behavior katmanı ise Web sayfamızın davranışını belirler. Sayfamızda bulunan olaylar, tetiklemeler, işlemler vs. davranış kapsamında ele alınır ve sayfanın davranışını belirlemek için JavaScript kullanılır.

İşte biz de, bu makalemizde 3. katman olan Behavior (davranış) katmanında kullanılan JavaScript dilini inceleyip kısa bir giriş yapacağız.

Katmanların Sıralanması

Kullandığımız bu 3 katman yukarıda gördüğünüz şekilde sıralanır. Önce content katmanı belirtilir, daha sonra presentation ve en sonda da behavior katmanı ele alınır.

Bir Web sayfası tasarlarken öncelikle sayfa içeriğini belirlemeniz gerekir çünkü içerik belli değilse sunum ve davranış anlamsızdır. Yani olmayan içeriğin sunumu yapılamaz ve olmayan içerik için davranış belirtilemez. İşte bu sebeple ilk sırada kullanılan katman content (içerik) katmanıdır. Content tanımlarken HTML dili kullanılır.

İçerik belirlendikten sonra bu içeriğin görsel tasarımı yapılır ve kullanıcıya nasıl sunulması gerektiği belirtilir. Web sayfamızda bulunan renkler, hizalama, görsel efektler vs. gibi yapılar presentation yani sunum katmanı kapsamına girer. Sunum katmanı için CSS kullanılır. Her ne kadar HTML kullanarak da Web sayfanızın içeriğini şekillendirebiliyor olsanız da bu şekilde bir sunum yapmak 3 katman mimarisine ters gelir çünkü sunum ve içerik birbirinden ayrı olmalı ki ilerde web sayfamıza yeni bileşenler eklendiğinde bu bileşeni şekillendirmek için içerik katmanıyla uğraşmamıza gerek kalmasın.

İçerik ve sunum katmanları gerçekleştirildikten sonra en son olarak sayfamızı dinamik hale getirmek için behavior (davranış) katmanı tasarlanır. Bu katman ile sayfanızda bulunan statik içeriğe dinamik davranışlar ekleyebilirsiniz. Aksi halde sayfamız sadece içeriği sunmaktan öteye gidemez. Günümüz Web sayfalarında kullanıcı etkileşimi sağlamak ve daha aktif Web sayfaları oluşturmak için mutlaka sayfanın dinamik olması gerekir. Bunu sağlamak için de JavaScript kullanılır.

Aşağıda bir Web sayfasının içeriğini görmektesiniz. Bu içerik HTML ile tasarlanmıştır. Bu veriler content katmanını oluşturur.

Bu içeriği kullanıcıya sunmak için CSS kullanılır. Bu da presentation katmanıdır.

Sayfadaki olayları tetiklemek ve davranışları belirlemek için de JavaScript kullanılır. Buna da behavior katmanı denir.

JavaScript Nedir ?

Daha önce de bahsettiğimiz gibi sadece HTML kullanarak dinamik Web sayfaları yazmak mümkün değildir. Bunu yapmak için ya istemci taraflı ya da sunucu taraflı kod yazmak gerekir. Sunucu taraflı kodlamada PHP, ASP, ASP.NET gibi diller kullanılır. İstemci taraflı kodlamada ise JavaScript, VBScript gibi script dilleri kullanılır. Biz de bu yazıda en çok kullanılan script dili olan JavaScript dilini inceleyeceğiz.

JavaScript öğrenilmesi kolay, hafif bir script dilidir. JavaScript kodları istemci taraflı çalıştığından Web sayfasını yormaz çünkü kodlar server üzerinde değil kullanıcının bilgisayarında işletilir.

JavaScript kodları sayfa içinde etiketleri arasında yazılır ve sayfanızın istediğiniz herhangi bir bölümüne eklenebilir. JavaScript kodları HTML ile bütünleşik çalışır.

Aşağıda basit bir JavaScript kodu görmektesiniz.

Java ile JavaScript aynı şey midir ?

Hayır! Birçok kişi bu iki dili karıştırmaktadır fakat ikisi de hem yapı hem de kullanım açısından farklı dillerdir. Java karmaşık ve gelişmiş bir programlama dilidir. JavaScript ise sadece istemci taraflı scriptler yazmak için tasarlanmış bir script dilidir.

JavaScript’in Avantajları

• JavaScript HTML tasarlayıcılarına bir programlama aracı sunmaktadır. Böylece HTML tasarımcıları HTML içinde çok rahat bir şekilde kod yazabilecekler.

• JavaScript HTML ile bütünleşik çalışır. Böylece HTML içine dinamik bir şekilde kod yerleştirebilirsiniz.

• JavaScript ile sayfa üzerindeki olayları yakalayabilirsiniz ve bu olaylar gerçekleştiğinde çeşitli işlemleri tetikleyebilirsiniz. Böylece sayfa zerinde tam hakimiyet sağlamış olacaksınız.

• JavaScript ile HTML elemanlarını okuyabilirsiniz. Bu elemanların değerini kullanabilir veya fiziksel görüntülerini değiştirebilirsiniz.

• JavaScript ile tarayıcıya ait birtakım özellikleri kullanabilirsiniz.

• JavaScript ile cookie oluşturabilir ve cookie okuyabilirsiniz.

• JavaScript ile dinamik menüler oluşturabilirsiniz.

Kısacası JavaScript ile HTML‘in yapamayacağı birçok şeyi yapabilir ve sayfa üzerinde dinamik bir hakimiyet kurabilirsiniz.

JavaScript Nasıl Çalışır?

Şimdi JavaScript’in yaptığı işi anlamanız açısından basit bir örnek yapalım. Sayfamızda bir buton olduğunu düşünün. Bu butona tıkladığımızda kullanıcıya bir mesaj vermek istiyoruz.

Bunu sadece HTML kullanarak yapabilir miyiz?

Tabii ki hayır… Bu davranışı belirleyebilmemiz için istemci ya da sunucu taraflı kod yazmalıyız.

Öncelikle HTML kullanarak butonumuzu sayfaya ekleyelim.

Butona tıkladığımızda herhangi bir işlem gerçekleşmediğini görürsünüz çünkü buton tıklama olayı için herhangi bir kod yazmadık henüz. Bunu sadece HTML kullanarak yapamayız. Sayfamıza JavaScript kodu eklememiz gerekir.

Şimdi sayfamızın script bölümüne JavaScript kodumuzu ekliyoruz.

Kodumuzu ekledik fakat henüz buton için tetikleme işlemi belirtmedik. Bunu yapmak için de butona ait “Onclick” olayını tetiklememiz gerekir.

Burada yaptığımız işlemi kısaca anlatmak gerekirse,

Sayfamızın bölümünde mesaj_goster() isminde bir fonksiyon oluşturduk ve butonumuza ait “onclick” olayına bu fonksiyonumuzun ismini yazarak butona tıklandığında mesaj_goster() fonksiyonunun çalışmasını sağladık. Butona tıklanınca mesaj_goster() fonksiyonu içindeki alert() komutu çalışacak ve ekrana belirttiğimiz mesajı gösterecektir.

Şimdi sayfamızı yükleyip butona tıkladığımızda aşağıdaki gibi bir mesaj ile karşılaşırız.

Amacımıza ulaştık. HTML kodları içinde dinamik bir yapı kullandık ve statik olan butonumuza tıklanınca dinamik olarak ekranda mesaj gösterdik.

Web sayfasının kaynağını görüntülediğimiz zaman JavaScript kodları görünmektedir çünkü bu kodlar istemci bilgisayarında tarayıcı üzerinden çalışmaktadır.

Sayfada kullandığınız tüm JavaScript kodları görünmektedir.

Bu bir dezavantaj olarak algılanabilir mi?

Aslında bir Web sayfasında güvenlik açısından yazılan kodların ve kullanılan değişkenlerin kullanıcılar tarafından görüntülenmesi istenmez. Kötü niyetli kişilerin sayfanızın işlev yapısı hakkında bilgi sahibi olması bir güvenlik tehlikesini beraberinde getirmektedir. Bu sebeple güvenlik gerektiren işlemlerde istemci taraflı kodlar yerine PHP, ASP gibi sunucu taraflı kodlar kullanmanızı tavsiye ederiz.

Evet değerli arkadaşlar, bu makalemizde Web tasarımın temeli olan 3 katman mimarisini inceledik ve JavaScript hakkında bilgi sahibi olduk.

Herkese faydalı olması dileğiyle.