Aktif (client-based) Web Teknolojileri ve Programlama

Transkript

KARADENİZ TEKNİK ÜNİVERSİTESİ
BİLGİSAYAR MÜHENDİSLİĞİ BÖLÜMÜ
BİLGİSAYAR AĞLARI LABORATUARI
Aktif (client-based) Web Teknolojileri ve 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 aktif web sayfalarının geliştirilme aşamaları incelenecek ve örnek uygulamalar
üzerinde durulacaktır.
Web sayfaları kabaca dinamik sayfalar ve durgun(statik) sayfalar olmak üzere ikiye
ayrılabilir.
1.1.Statik (Durgun) Sayfalar
Statik sayfa yapısı genelde bilgi vermeye yönelik sayfalarda kullanılır. Sayfa ziyaretçisi
ile herhangi bir enteraktif iletişim yoktur. Bu sayfalar gazeteye ya da dergilere benzetilebilir.
Bu tür sayfalarda sadece sayfaya işlenmiş olan veriler (yazı, resim) görülür. Sayfaya herhangi
bir veri gönderilmez. Bir habere yorum yapılamaz veya ankete oy verilemez. Sadece alıcı
olarak sayfada var olanlar algılanır. Bu gibi sayfaların yapısında %90 HTML kodu ve %10 ise
istemci taraflı kodlar (Javascript, CSS) bulunmaktadır. Statik (durgun) sayfalar dinamik
sayfalara göre yapım maliyeti daha düşüktür. Güncellemek veya yapı değişiklikleri dinamik
sayfalara göre daha zordur; yüksek maliyet gerektirir. Sayfa ziyaretçilerine herhangi bir
hizmet verilemez. Bu tür sayfalara etkileşim aktif web uygulamaları ile mümkün
olabilmektedir.
1.2. Dinamik Sayfalar
Bu tür sayfalar genelde. asp, .php, .jsp, .shtml gibi sunucu taraflı dil uzantılarından oluşur.
Sayfa ziyaretçisi ile enteraktif iletişim vardır. Sayfa ziyaretçisine çeşitli hizmetler sunulabilir.
Site güncellemesi kullanıcı tarafından yapılabilir. (örn: Fiyat listelerinin değiştirilebilmesi,
yeni sayfaların eklenmesi, çevrimiçi broşür hazırlama ve tek tuşla binlerce müşteriye
gönderimi gibi ...). Web sayfalarında şirket amaçlarına uygun hizmetler verilebilir. Şirket
ürünleri e-ticaret vasıtası ile satılabilir veya bayi ağı çevrimiçi çalışır hale getirilebilir.
Dinamik sayfaları dinamik yapan içerdiği kodun dinamikliğidir. Bu sayfalarda mesaj
gönderilebilmekte, oy kullanılabilmekte ve e-posta atılabilmektedir
KTÜ Bilgisayar Mühendisliği Bölümü – Bilgisayar Ağları Laboratuarı
1
2. HTML
İlk olarak 1980 yılında Lee tarafından çalıştığı kurumdaki araştırmacılarının bilgilerini ve
dökümanlarını birbirleriyle paylaşabilmeleri için ENQUIRE isimli bir sistem geliştirilmiştir.
Daha sonra aynı kişi tarafından HTML dili geliştirilerek World Wide Web(WWW)’in ve
bugün ki web sayfalarının temeli oluşturulmuştur.
HTML (Zengin Metin İşaret Dili), günümüzde internet üzerinde veri paylaşımı için
kullanılan en yaygın metin tabanlı dildir. HTML bir programlama dilinden ziyade dbir
işareleme dilidir. Temel görevi, metin, görüntü, video gibi değişik öğeleri ve bunları içeren
sayfaları birbirine basitçe bağlamak, buna ek olarak söz konusu sayfaların web tarayıcısı
yazılımları tarafından düzgün olarak görüntülenmesi için gerekli kuralları belirlemektir.
Günümüzde tüm web tarayıcıları tarafından desteklenen ve W3 konsorsiyum tarafından
1999’da standard olarak kabul edilen HTML 4.01 versiyonu kullanılmaktadır. Ayrıca
gelecekte web için standart olacak olan HTML 5, günümüzde çoğu modern web tarayıcıları
tarafından desteklenmekte ve önümüzdeki yılarda W3 konsorsiyum tarafından standart olarak
kabul edileceği bildirilmektedir.
HTML dili, basitçe metinleri etiketlerle biçimlendirmekte ve web sayfalarında yer alan
öğeleri (başlık, liste, bağlantı, tablo, görüntü vb.) web tarayıcıları tarafından kolayca
görüntüleyebilmek için birbirine bağlamaktadır. Kod Parçası 1’de basit bir web sayfası
oluşturacak HTML kodları verilmektedir. İnternet üzerinde yer alan herhangi bir sayfanın
HTML kodlarını “Sayfa Kaynağını Görüntüle” seçeneği ile görebilirsiniz. Deneye gelmeden
önce HTML dili ile ilgili temel bilgileri edinmeli ve en azından basit bir web sayfasını kod
yazarak oluşturabilecek seviyede olmalısınız.
<!DOCTYPE html>
<html>
<head>
<title>Hello HTML</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Kod Parçası 1 : Basit bir web sayfasının HTML kodu.
3. JavaScript
Javascript, durağan HTML sayfalarına kullanıcı etkileşimi kazandırmak ve HTML’nin bir
programlama dili olamasından dolayı durağan wen sayfalarına programlanabilirlik özelliği
kazandırmak için kullanılan bir betik dilidir. Perlscript, VBScript gibi aynı işlevi yerine
getiren alternatif betik dilleri de mevcuttur. Ancak hemen hemen tüm web tarayıcıları
tarafından koşulsuz desteklendiği için diğerlerine göre avantajlı hale gelmektedir.
Javascript dili bir nesne tabanlı programlama dili olan Java ile karıştırılmamalıdır. Java
dili ile özgün ve kendikendine çalıştırılabilen programlar yazmak mümkünken, Javascript ile
yazılan betikler ancak bir web tararyıcının yorumlamasıyla birlikte çalıştırılabilirler.
Javascript kodları doğrudan HTML kodları içerisine yazılırlar. Bir başka deyişle javascript
kodları HTML kodları ile aynı dosyaya yazılırlar. Kod Parçası 2’de örnek bir javascript kodu
verilmektedir.
<html>
<head>
<title>Örnek bir JavaScript Kodu!</title>
</head>
<body>
2
<br>
Bu normal bir HTML yazısıdır.
<br>
<script language="JavaScript">
document.write("Merhaba Dünya!")
</script>
<br>
HTML'ye dönüş.
</body>
</html>
Kod Parçası 2 : Örnek bir javascript kodu.
3.1. Javascript Kodlama
Javascript dili, Pascal ile C dillerinin karışımı bir sözdizimine sahiptir. Kodlar doğrudan
HTML kodları arasına yazılır ve kodlar istemci tarfında çalışırlar. Bu nedenle istemci-tabanlı
(client-based) web programlama olarak da isimlendirilir.
Değişkenler Javascript'te de diğer programlama dillerinde olduğu gibi bilgi depolamak bu
bilgiyi kullanmak amacıyla kullanılırlar. Değişkenler "var" komutu ile oluşturulurlar. Diğer
dillerde yer alan değişken türleri burada değişken kullanılırken belirtilirler. Örneğin var
a=10; yazıldığında a değişkeni sayı türünden bir değişken iken var b=”KTÜ”;
yazıldığında b değişkeni string türünden bir değişken olmaktadır.
Değişkenlere işlem yaptırabilecek operatörler ise 4 kategori altında toplanabilir. Aritmetik
operatörler (+ , - , * , / , %), mantıksal operatörler (&& , || , !), karşılaştırma operatörleri (==,
!=, >, >=, <, <=) ve özel operatörler (+=, -=, *=, /=, ++, --, koşul operatörü<?... : …>)
javascripte kullanılan en yaygın operatörlerdir. Bu operatörlerin kullanımları C diline çok
benzerdir. Kod Parçası 3’te örnek değişken ve operatör kullanımları verilmektedir.
var i=1; var j=2;
var k=3; var m=4;
var n=5;
var p=6;
var q=7;
i=+j;
j++;
k--;
m=m+k;
n=*j;
i < j ? 3 : 1 ;
k >= n ? 0 : 1 ;
k=2 && j=5 ? p : q ;
i=2 || j=3 ? m : n ;
p!=2 ? k : 10 ;
Kod Parçası 3 : Örnek değişken ve operatör kullanımı
Javascript dilinde kullanılan koşul ve döngü deyimleri de aynen C dilinde olduğu gibi
kullanılmaktadır. Kod Parçası 4’te koşul ve döngü deyimlerinin kullanımına ilişkin örnek bir
uygulama verilmiştir.
<html>
<head>
<title>Örnek bir JavaScript Kodu!</title>
</head>
<body>
Tek ve Çift Sayılar
<br>
var i;
3
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>
Kod Parçası 4 : Koşul ve döngü deyimlerinin kullanımına ilişkin örnek bir uygulama
Benzer şekilde switch-case deyimi ile break; continue; deyimleri de C diline
benzer şekilde kullanıma sahiptir.
3.1.1. Javascript’te Fonksiyon Kavramı
Fonksiyonlar modüler program yazmanın vazgeçilmez öğeleridir. Aktif web sayfaları
geliştirirken fonksiyonlar kullanılarak daha etkin interaktif web uygulamaları
geliştirilebilmektedir. Javascript dilinde fonksiyon tanımlama söz dizimi şu şekildedir.
function fonksiyon_ismi (parametre1 , parametre2 , .... )
{
yapılması istenen işlemler
return geri_donus_degeri; // varsa
}
Fonksiyon kullanılarak geliştirilen örnek bir program Kod Parçası 5’te verilmiştir.
<html>
<head>
<title>Fonksiyon İçeren JavaScript Kodu!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
</head>
<body>
Toplama İşleminin Fonsiyon ile Gerçekleştirilmesi
<br>
function toplam(a,b)
{
var toplam = a+b;
return toplam;
}
document.write("5 + 7 = " + toplam(5,7));
</script>
</body>
</html>
Kod Parçası 5 : Fonksiyon örneği
3.1.2. Javascript’te 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 : window.open("Url_adı" , "pencere_adı" , "pencere_özellikleri"); Pencere
kapatmak için window.close(); komutu kullanılır. Window nesnesinin location.protocol
nesnesi ise yüklenen dosyanın sabit diskten mi yoksa internetten mi yüklendiğini gösterir.
Örneğin http: ile dosyanın web protokolü kullanarak yüklendiği belirtilir. file: ile
dosyanın sabit diskten yüklendiği belirtilir. Window'un histrory özelliği ile bir önceki
sayfaya erişim sağlanabilir. Aşağıda Windows nesnesinin kullanımına bir örnekler verilmiştir.
4
window.open("http://ceng.ktu.edu.tr","ceng","menubar=no,toolbar=no,scrollbars=yes,location
=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.1.3. Javascript’te Olaylar
Ziyaretçiye sunulan bir web sayfası üzerinde ziyaretçinin yaptığı her türlü hareket,
örneğin bir bağlantıyı tıklaması , bir resmin üzerine gelmesi , resmin üzerinde ayrılması , bir
formu yanlış doldurup hataya yol açması gibi davranışların tümü bir olaydır.
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. Kod Parçası 6’da onClick olayına bir örnek verilmiştir.
OnDblClick olayı da onClick olayı ile yapı olarak aynıdır. onClick'ten farkı nesneye çift
tıklandığında çalışmasıdır. Diğer yöntemler onClick ile aynıdır.
<html>
<head>
<title>Olaylar</title>
</head>
5
<body>
onClick Olayı
<br>
function f()
{
alert("Button a tıklandı.");
}
</script>
<input type="button" name="tikla" value="tikla" onClick=f()>
</body>
</html>
Kod Parçası 6 : onClick olayı için örnek bir uygulama
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 Kod Parçası 6’de verilmektedir.
<html>
<head><title>OnMouseOver</title>
<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>
Kod Parçası 7 : onMouseOver olayı için örnek bir uygulama
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. Bu işlemlerin yapıldığı örnek uygulama Kod Parçası 8’de verilmektedir.
<html>
<head><title>onSubmit</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9"> </head>
<body>
<script type="text/javascript">
function regKontrol(pattern, value)
{
r = new RegExp(pattern, "g");
return r.test(value);
}
function formKontrol(form)
{
6
patternEposta
= "[abcdefghijklmnopqrstuvwxyz]"+ "@"+"[abcdefghijklmnopqrstuvwxyz]"+
"[\.]" +"[abcdefghijklmnopqrstuvwxyz]";
if ( !regKontrol(patternEposta,form.email.value))
{
alert("Lütfen Doğru Bir E-posta Adresi Giriniz.");
form.email.value="";
form.email.focus();
return false;
}
return true;
}
</script>
<form
method="post"
action="form_isle.html"
name="frmKayitFormu"
onsubmit="return
formKontrol(this);">
E-Posta: <input type="text" name="email" maxlength="50"/><input type="submit" value="
Gönder "/>
</form>
</body>
</html>
Kod Parçası 8 : onSubmit olayı için örnek bir uygulama
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.
Bu işlemlerin yapıldığı örnek uygulama Kod Parçası 9’de verilmektedir.
<html><head><title>onLoad onUnLoad</title>
<script language="javascript1.2">
function hosgeldiniz()
{
alert("Web Sitemize Hosgeldiniz")
}
</script>
</head>
<body onLoad="hosgeldiniz()">
<a href="http://ceng.ktu.edu.tr/index.php">CENG</a>
</body> </html>
Kod Parçası 9 : onLoad olayı için örnek bir uygulama
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 uygulama dosyaları bilgisayar masaüstünde aktif_web_programlama
klasöründe bulunmaktadır. Bu klasördeki uygulamalar incelenecektir.
2. Deney föyünde yer alan temel kavramlar soru-cevap şeklinde kontrol edilecektir.
3. Deney föyünde yer alan kodlar teker teker incelenerek gerekli değişiklikler yapılarak
çalışma mantıkları kavratılacaktır.
7
4. İstemci ile sunucu saat uygulaması ile web programlarının çalıştıkları taraf
kavratılacaktır.
5. Arkaplan rengi değiştirme uygulaması incelenecektir.
6. Javascript animasyonları incelenecektir.
6. Deney Soruları
1. İstemci taraflı scripting nedir? Avantajları ve dezavantajları nelerdir?
2. Javascript kodları HTML dosyalarına nasıl yerleştirilir?
3. Döngü kullanarak 4x4 lük bir tablo oluşturunuz.
4. Deney föyünde yer alan kodlar, sunucu tarafında kodlansaydı çalışma mantıkları nasıl
olurdu, örnek vererek açıklayınız.
7. Deney Raporu
Deney raporu, deney esnasında yazılarak teslim edilecektir. Bu nedenle rapor şablon
dosyasını buradan indirerek çıktısını alınız, gerekli alanları (öğrenci no, ad, soyad …)
doldurunuz, hazırlık sorularını cevaplayarak el yazısı ile “Deneye Hazırlık” kısmına yazınız.
Raporunuzun diğer alanları deney esnasında doldurulacaktır. Her öğrenci bireysel rapor
hazırlayacaktır.
8. Kaynaklar
[1]
[2]
[3]
[4]
[5]
[6]
[7]
[8]
www.w3schools.com
www.hotscripts.com
www.php.net
www.phpbuilder.com
www.wampserver.com
www.csharpnedir.com
tr.wikipedia.org
www.programlamadili.net
8

Aktif (client-based) Web Teknolojileri ve Programlama

Transkript

Benzer belgeler

8. OLAYLAR

NO: AD SOYAD:

HTML Kullanımı

Web Programlama

Örün Tabanlı Coğrafi Bilgi Sistemi Uygulama - CEUR

Javascript : Javascript Nedir?

JavaScript Ders Slaytları