KARADENİZ TEKNİK ÜNİVERSİTESİ BİLGİSAYAR

 KARADENİZ TEKNİK ÜNİVERSİTESİ BİLGİSAYAR MÜHENDİSLİĞİ BÖLÜMÜ BİLGİSAYAR AĞLARI LABORATUVARI İstemci Tabanlı Web Programlama 1. Giriş İnternetin son yıllarda hızla gelişmesi ve önemini arttırması nedeniyle web teknolojilerinin önemi de giderek artmaktadır. Web teknolojilerinin ortaya çıktığı ilk zamanlarda durağan ve sırf HTML diline dayalı web sayfaları iş görebilirken günümüzde artık bu mümkün olmamaktadır. Bu nedenle web sayfaları içerisinde kullanıcı ile etkileşim sağlayan uygulamalara ve dinamik içerikli web sayfalarına ihtiyaç doğmuştur. Web programlama teknolojileri genellikle aktif (istemci taraflı) ve dinamik web programlama olarak iki kategoride incelenmektedir. Bu deneyde kodları istemci tarafında çalışan istemci tabanlı web sayfalarının geliştirilme aşamaları ve kavramları incelenecek ve örnek uygulamalar üzerinde durulacaktır. Web sayfaları kabaca dinamik sayfalar ve durgun(statik) sayfalar olmak üzere ikiye ayrılabilir. 2. Web Dillerinin Sınıflandırılması Web sayfaları ve uygulamaları geliştirmek için kullanılan dillerdir. Kullanılan teknolojiye ve geliştirilen uygulamanın çalıştığı ortama göre sınıflandırılmaktadırlar. 2.1. İşaretleme ve Stil Dilleri Bu diller doğrudan uygulama geliştirmeye yönelik değildirler. Daha çok verilerin biçimlendirilmesi amacıyla kullanılırlar. Tam olarak programlama dili sayılmazlar ancak kendi içerisinde web sayfalarındaki verilerin farklı şekillerde biçimlendirilmesi için belirli kurallara sahiptirler. İşaretleme dillerine örnek olarak HTML, XHTML, DHTML, XML, JSON gibi dilleri örnek verebiliriz. HTML (HyperText Markup Language) ve türevi diller web sayfalarının temel biçimlendirme dilidir. Bir web sayfasının istemciye gönderilen kaynağını oluşturan kodların büyük çoğunluğu HTML dili ile kodlanmış ve biçimsel olarak yorumlanarak web tarayıcısında gösterilir. HTML dilinin günümüzde HTML5 versiyonu yaygın olarak kullanılmaktadır. XML ve JSON gibi diller ise web uygulamaları arasında veri saklama ve iletme ihtiyacını karşılayan dillerdir. İnsanlar tarafından okunması ve yazılması kolaydır. Aynı zamanda 1/7
KTÜ Bilgisayar Mühendisliği Bölümü – Bilgisayar Ağları Laboratuvarı / ​
İstemci Tabanlı Web Programlama herhangi bir veritabanı yönetim sistemine ihtiyaç duymadan web uygulamalarının veri saklama işlevini de görmektedirler. İşaretleme dillerinin dışında web sayfalarının biçimlendirilmesi amacıyla stil diller de kullanılmaktadır. CSS bu dil sınıfındadır. HTML sayfalarının görsel görünümlerini biçimlendirmek amacıyla kullanılmaktadır. CSS dilinin günümüzde ikinci ve üçüncü veriyonu CSS2 ile CSS3 yaygın olarak kullanılmaktadır. CSS stil diline benzer olarak XML verilerinin görünümlerini biçimlendirmek için kullanılan XSL stil dili de bazı uygulamalarda nadiren kullanılmaktadır. 2.2. Betik (Scripting) Diller Betik diller, web uygulamaları geliştirmek için kullanılan dillerdir. Yazılan kodun çalıştığı (kaynaklarını kullandığı) yere göre istemci taraflı ve sunucu taraflı olmak üzere ikiye ayrılırlar. 2.2.1. İstemci Taraflı Betik Diller Bu diller kullanılarak yazılan web uygulamaları istemci tarafında yorumlanarak çalıştırılırlar. Bu dillere örnek olarak Javascript (JS), Postscript, VBScript gibi diller örnek verilebilir. Günümüzde Javascript istemci tarafında çalışan uygulamalar için standart hale gelmiştir. Bir web sayfasının kaynak kodunda HTML ve CSS kodlarının yanında azımsanmayacak şekilde JS kodları yer almaktadır. İstemci tarafında çalışan ve JS ye göre daha az kullanılan teknolojiler de bulunmaktadır. Adobe firmasının Flash animasyon uygulamaları (Actionscript) ve Microsoft firmasının Silverligt uygulamaları bu sınıfta yer almaktadırlar. Yüksek düzeyli ve nesne yönelimli bir dil olan JAVA ile yazılan ve web sayfalarına gömülen, çalışması içinde Java sanal makinesi gerektiren uygulamalar da istemci taraflı uygulama olarak düşünülebilir. 2.2.2. Sunucu Taraflı Betik Diller Bu diller sunucu tarafında yorumlanarak sonucu istemciye gönderilen dillerdir. ASP.NET, JSP, PHP, Python, Ruby gibi diller bu sınıftandır. Dinamik web sayfaları oluşturmak amacıyla kullanılırlar. Bu deneyde sunucu taraflı programlama kavramları incelenecek ve bu kavramları pekiştirmek için örnek uygulamalar geliştirilecektir. 3. İstemci Tabanlı Web Programlama Web sayfaları kabaca dinamik sayfalar ve durgun (statik) sayfalar olmak üzere ikiye ayrılabilir. Dinamik sayfaların kullanıcı ile etkileşimi ve daha kullanışlı olması sebebiyle yaygın olarak kullanılmaktadır. Bu tür sayfaları işlemek için sunucunun kaynakları (işlemci zamanı, bellek, dosya sistemi vb...) kullanılmaktadır. Bazı işlemlerin sunucu üzerinde yapılması gereksiz yere sunucuyu yorabileceği gibi web sayfalarının yavaş çalışmasına da sebep olmaktadır. Bu nedenle istemci tarafında sunucuya yormayacak şekilde ve kritik öneme sahip olmayan işlemler istemci tarafında yapılabilmektedir. Bu tür web uygulamaları geliştirme işlemi istemci tabanlı web programlama olarak kabul edilir. 2/7
KTÜ Bilgisayar Mühendisliği Bölümü – Bilgisayar Ağları Laboratuvarı / ​
İstemci Tabanlı Web Programlama İstemci tabanlı web uygulamaları genellikle Javascript dili kullanılarak ve HTML kodları arasına yazılır. Web tarayıcı tarafından başka herhangi bir ek pakete ihtiyaç duymadan çalışırlar. İnternette yer alan web sayfalarının çoğunluğu HTML in bir önceki sürümü HTML 4.1 ile hazırlanmıştır. En güncel sürüm olan HTML 5, getirdiği yeni özellikler, CSS3 ve javascrit dili ile birlikte kullanıldığında istemci tarafında oldukça güçlü uygulamalar geliştirme imkanını da doğurmaktadır. HTML 5, sadece bir biçimlendirme (işaretleme) dili değil aynı zamanda güçlü web uygulamaları yapmak için de önemli bir dil haline gelmiştir. Güncel tarayıcıların hemen hemen hepsinin destek verdiği HTML 5 ile yeni uygulamalar geliştirildikçe kullanım payı daha da artmaktadır. 3.1. İstemci Tarafında Problem Çözümü için Programlama İstemci tarafında yazılan Javascript kodları ile diğer programlama dillerinde çözülebilen problemler problemin çözümüne yönelik algoritma geliştirilerek çözülebilmektedir. Javascript dili, tip tanımlaması gerektirmeyen, bir çok programlama dilinde bulunan yapıları destekleyen nesnel bir betik dilidir. Aşağıda örnek bir javascript kodu verilmiştir. <body> Tek ve Çift Sayılar <br> <script language="JavaScript"> var i; for(i=0;i<100;i++) { if(i%2==0) document.write(i + " sayısı çifttir <br>"); else document.write(i + " sayısı tektir <br>"); } </script> </body> </html> 3.2. Nesneler ve Özellikleri Javascritp dili, nesne tabanlı bir programlama dilidir. Bu nedenle interaktif web uygulamaları geliştirirken javascript dili nesnelerden yararlanmaktadır. Windows Nesnesi : Genel olarak pencere özellikleri ile ilgili bir nesnedir. Pencere açmak için : w
​
indow.open("Url_adı" , "pencere_adı" , "pencere_özellikleri"); Pencere kapatmak için w
​
indow.close(); komutu kullanılır. Window nesnesinin l
​
ocation.protocol nesnesi ise yüklenen dosyanın sabit diskten mi yoksa internetten mi yüklendiğini gösterir. Örneğin h
​
ttp: ile dosyanın web protokolü kullanarak yüklendiği belirtilir. f
​
ile: ile dosyanın sabit diskten yüklendiği belirtilir. Window'un h
​
istrory özelliği ile bir önceki sayfaya erişim sağlanabilir. Aşağıda Windows nesnesinin kullanımına bir örnekler verilmiştir. 3/7
KTÜ Bilgisayar Mühendisliği Bölümü – Bilgisayar Ağları Laboratuvarı / ​
İstemci Tabanlı Web Programlama window.open("http://ceng.ktu.edu.tr","ceng","menubar=no,toolbar=no,scrollbars=yes,locati
on=yes,status=no,resizable=yes,left=0,top=100,width=200,heigt=300"); if (window.location.protocol == "http:" ) { document.write ("Bu belge Internet'ten geliyor."); } else { document.write ("Bu belge sabit diskten geliyor"); } // 1 önceki sayfaya dönmek için kullanılır. Window.history.go(­1); Tarayıcı (navigator) Nesnesi ​
: Tarayıcılar Javascript tarafından bir nesne olarak algılanır. Kullanımına ilişkin örnek kodlar aşağıda verilmiştir. document.write("Şu anda kullandığınız tarayıcının özellikleri :" , "<br>"); document.write(navigator.appname + navigator.appVersion + navigator.appCodeName + navigator.useAgent ) ; Form Nesnesi : Javascript açısından HTML'in en önemli nesneleri formlardır. Çünkü ziyaretçi ile etkileşmede en büyük unsurlardan birisi formlardır. HTML kendi form nesnesini kendisi oluşturabilir. Javascript ise form verilerinin yorumlanması ve işlenmesinde devreye girer. ∙ Name : Formun ismi ∙ Action : Formun işleneceği perl veya cgi programının tanımlanacağı etiket ∙ Enctype : Formun kodlanma türü ∙ Method : Formun gönderme(post) mi yoksa alma(get) işlemi göreceğini belirler. ∙ Target : Pencere ismi ∙ OnSubmit : Gönderme metodunun ismi Bunlardan yararlanarak bir form nesnesinin kodu aşağıdaki şekilde yazılabilmektedir. <form name="mail" action="http://www.webteknikleri.com/cgi­bin/mail.pl" method="POST"> Form unsurları </form> 3.3. Olaylar Bir web sayfasını tarayıcı işlerken ve kullanıcı sayfa üzerinde işlem yaparken bazı olaylar gerçekleşir. Burada Olay, tarayıcının sayfayı yüklemesi, kullanıcının bir linke tıklaması veya sayfa üzerindeki bir resmin üzerine gitmesi gibi işlemleri ifade eder. onClick : Web sayfası üzerinde bir nesnenin fare ile üzerine tıklanması sonucu ​
onClick olayı gerçekleşir. Olayın gerçekleşmesi için nesneni tıklanıp bırakılması yeterlidir. ​
onClick olayı tuşa basılıp bırakıldıktan sonra gerçekleşir. Bağlantılar, resimler, form düğmeleri tıklanabilecek nesneler arasındadır. OnDblClickolayı
da ​
onClickolayı
ile yapı olarak aynıdır. ​
onClick​
'ten farkı nesneye 4/7
KTÜ Bilgisayar Mühendisliği Bölümü – Bilgisayar Ağları Laboratuvarı / ​
İstemci Tabanlı Web Programlama çift tıklandığında çalışmasıdır. Diğer yöntemler ​
onClick​
ile aynıdır. onMouseOver , onMouseOut : Bu tür nesne olayları ingilizce adı (onMouseOver à fare işaretçisi/imleç üzerindeyken , onMouseOut à fare işaretçisi üzerinden ayrıldığında) üzerinde olmakla birlikte farenin nesnenin üzerinde olup olmadığı ile ilgilenir. Bu olayla ilgili örnek uygulama aşağıda verilmektedir. <html> <head><title>OnMouseOver</title> <meta http­equiv="Content­Type" content="text/html; charset=iso­8859­9"> <script language="javascript"> function resim_degis(ind) { var res = document.getElementById('rsm'); var res_dizi = new Array(); res_dizi[0] = "ckose.png"; res_dizi[1] = "ocakir.png"; res_dizi[2] = "zyavuz.png"; res.src = res_dizi[ind]; } </script> </head> <body> <table> <tr> <td><p onMouseOver="resim_degis(0)">Cemal Köse</p></td> <td rowspan="3"><img id="rsm" name="resim" src="ckose.png" height="75" width="60"/></td> </tr> <tr> <td><p onMouseOver="resim_degis(1)">Ömer Çakır</p></td> </tr> <tr> <td><p onmouseover="resim_degis(2)">Zafer Yavuz</p></td> </tr> </table> </body> </html> onSubmit : Web üzerinde sayfalar arasında gezinirken kullanıcı bilgi girişi için formlar kullanılmaktadır. Bir form doldurulduktan sonra sunucu (server) bilgisayara gönderilerek bilgiler burada işlenir. Bilindiği gibi sunucu bilgisayarda çalışan kodlar sunucu taraflı scripting olarak adlandırılır. Ancak bazı durumlarda form üzerinde doldurulan veriler, sunucuya gönderilmeden önce istemci bilgisayarda düzgün doldurulup doldurulmadığına bakılabilir. onChange :​
Web sayfası üzerinde ziyaretçinin değiştirebileceği üç tür alan vardır. Bunlar text (metin), textarea (geniş metin alanı), select (seçim alanı) dır. Fare bu alanlar üzerine getirip tıkladığınıldığında onChange(değişti) olayı gerçeklenmiş olur. onLoad :​
Bu olay sayfanın yüklenmeye başlamasında yapılacak işlemler için gereklidir. 3.4. Sayfaiçi Öğelere Erişim ve İçerikleri Değiştirme (DOM, Document Object Model) Doküman Nesne Modeli (DOM ­ Document Object Model), web sayfalarının yapısal bir grup olarak temsilini sağlayarak, yazılan script kodlarının dokümanların içeriğine, yapısına ve biçim özelliklerine erişimini ve kullanımını sağlayan bir arabirimdir. DOM hiyerarşisinde documentnesnesi,
HTML belgelerini tüm düğümlerinin kökü olarak temsil edilir ve ​
window nesnesinin altında yer alır. ​
document nesnesi sayfanın, sayfadaki düğümlerin ve HTML etiketleriyle tanımlanan sayfa içi öğelerin yönetimi ile ilgili özelliklere ve metotlara sahiptir. En 5/7
KTÜ Bilgisayar Mühendisliği Bölümü – Bilgisayar Ağları Laboratuvarı / ​
İstemci Tabanlı Web Programlama çok kullanılan metotlar arasında ​
getElementById ve ​
getElementByName yer almaktadır. Bu metotlar kullanarak yazılan örnek bir javascript kodu yukarıda ​
onMouseOver , onMouseOut​
bölümünde verilmiştir. document​
.​
getElementById metodu, ​
id özelliği belirtilen sayfa içi öğenin referansının alınmasını sağlar. Aynı ​
id ​
kimliğine sahip başka bir öğe varsa ilk öğenin referansını verir. Bu metodun sağlıklı bir şekilde çalışabilmesi için tasarım aşamasında, her öğenin ​
id ​
özelliği ​
eşsiz bir kimlik​
şeklinde tanımlanmalıdır. Aşağıda bu metotların kullanımına bir örnek verilmiştir.
<script> function getValue() { var x=document.getElementById("Header"); alert(x.innerHTML); } </script> </head> <body> <h1 id="Header" onclick="getValue()">Buraya Tıkla!</h1> </body>
4. Deney Hazırlığı 1.
2.
3.
4.
Aktif (istemci taraflı) web programlama kavramlarını öğreniniz. HTML ile kodlar yazarak statik web sayfaları yapımını öğreniniz. Javasript programlama ile basit istemci taraflı web uygulamaları yapımını öğreniniz. Deney föyünde yer alan kod parçalarını kendiniz yazarak değişiklikler yapınız. 5. Deney Tasarımı ve Uygulaması 1. Deney föyü ile ilgili istemci taraflı web programlama ilgili soruların sorulması ve cevaplanması. 2. Deney föyünde yer alan kodlar teker teker incelenerek gerekli değişiklikler yapılarak çalışma mantıkları kavratılacaktır. 3. Örnek olarak verilen bir problemin Javascript dili ile çözümünün kodlanması 4. Javascript ve DOM ile ilgili örnek bir uygulama geliştirme ve sayfa içi öğelerin içeriklerine erişim ve değiştirme. 5. Javascript nesneleri ile ilgili örnek uygulama geliştirme. 6. Deney Soruları 1.
2.
3.
4.
6/7
İstemci taraflı scripting nedir? Avantajları ve dezavantajları nelerdir? Javascript kodları HTML dosyalarına nasıl yerleştirilir? Döngü kullanarak 4x4 lük bir tablo oluşturunuz. Deney föyünde yer alan kodlar, sunucu tarafında kodlansaydı çalışma mantıkları nasıl KTÜ Bilgisayar Mühendisliği Bölümü – Bilgisayar Ağları Laboratuvarı / ​
İstemci Tabanlı Web Programlama olurdu, örnek vererek açıklayınız. 7. Deney Raporu Deney raporu, laboratuvar sayfasında ilan edilen biçimde yazılarak teslim edilecektir. 8. Kaynaklar [1] www.w3schools.com [2] www.hotscripts.com [3]​
​
​
tr.wikipedia.org 7/7
KTÜ Bilgisayar Mühendisliği Bölümü – Bilgisayar Ağları Laboratuvarı / ​
İstemci Tabanlı Web Programlama