28 Subat

Web Programcl
<<
Sihirli men ve cookie adaptasyonu

Sihirli mennze ziyaretinizi en son brakt noktada karlama yetenei kazandrmak iin cookieleri adapte etmeyi dnebilirsiniz.
een sayda hatrlayacaksnz olduka etkileyici zelliklere sahip bir men iin atlye almalarmzdan ilkini yapmtk. Menmzn en son hali zerine tklandka hiyerarik olarak alp katlanabilen, 3 seviyeli, gerektiinde script ile bizzat sayfa kodlarndan kontrol edilebilen, bir tklama ile grsel stilini annda deitirebileceiniz, istediiniz eleman seili olarak gsterebilen, hem navigasyon hem de bulunulan yerin yol adresini gsterme ilevini haiz bir men eklindeydi. almamzn bu ayki ikinci blmnde ise bir adm daha ileri gideceiz ve menmzn zaten scriptsel olarak kontrol edilebilmesinin avantajn kullanarak durum bilgisi kaydn tutmak iin cookieleri adapte edeceiz.
Geen saymzda bizimle beraber olamayan okurlar iin yzeysel olarak bir tekrar yapalm:
UMenmz zerinde yaplandrdmz en nemli teknik zellik CSS display propertysi. Bu property, tanmland elementlerin sayfa zerindeki ierikte yer alp almamasn kontrol eder ama bir dier benzer zellik olan visibility (grnrlk) propertysinden farkldr. Kullanacamz display propertysi 2 boyut olarak dnmeniz gereken bir ortamda sayfann dzenini deyim yerindeyse yeniden oluturur. Bu bakmdan bu zellikten faydalanarak form alanlarn arta bal olarak tekrardan dzenlenebilmesi mmkndr. Menmzde bu teknikten faydalanmamzn temel nedeni ise bu teknik ile alacamz elementlerin sayfa zerindeki pozisyonlar hakknda hibir hesaplama yapmamza gerek olmay. Geen sefer yapm olduumuz basit form rneinin bir kopyasn bu ay da CDde bulabilirsiniz. Geen sayda bizimle olamayanlar bu rnei inceleyebilirler.
<link rel=stylesheet href="stil_1.css" type="text/css">
satrnda CSS dosya ismini stil_2.css veya stil_3.css veya stil_4.css diye deitirerek mennzn stilini tamamen deitirebileceinizi,
hatta bunu scriptle kontrol edilebilir hale getirmeyi dnmenizi belirtmek isterim. Mennzde teknik adan bir deiiklik yapmayacaksanz sizi ilgilendiren en nemli blmn <body> taklar iinde kalan blm olduunu, bu blmn menmzn iskeletini ve hiyerarik yapsn oluturan temel blok olduunu, mendeki her bir elemann bir id numaras olduu ve bu numarann geliigzel olmayp bizzat mennn yapsn belirleyen bir dzene sahip olmas gerekliliini, mendeki elemanlarn iki farkl eitte, ya zerine tklandnda sahip olduu alt seviyeleri gsteren veya katlayan bir dm ya da gsterecek hi bir alt seviyeye sahip deilse tklannca ilgili sayfaya gidilecek bir link olduunu, ayn elemann alt seviyesinde 10dan fazla elemann yer almas gerektii durumlarda id numaralarnda en fazla 1 basamakl bir deerler kullanlmas gerektiini (mesela _4_10_3 yerine _4_A_3 gibi, 4_11_3 yerine _4_B_3 gibi) bir kez daha hatrlattktan sonra gelelim bu ayki almamza: Sihirli menmzde ziyaretimizin hedefi istedii altbala ulaana kadar meny kullanmak ve bir linke tklad anda ilgili sayfaya gitmek. Diyelim ki 241 numaral linke tkland. Bu linke karlk gelen sayfaya (ki ben karklk olmasn diye herhangi241.html olarak isimlendirdim) gidildiinde mennn 241 nolu eleman gstermesi gerekir. Ancak bu sayede ziyareti sitede nere olduunu anlayabilir. Eer mennz framset ile baka bir framede ise sorun yok. Men olduu gibi kalacaktr. Ama frameset kullanmyorsanz gidilecek olan sayfada mennn hangi elemann ak olacan bildirmeniz gerekir. Bunu yapmann iki yolu var. Ya sitedeki her bir sayfann bana kendine ait olan elemann ak olacan bildiren bir ifade yerletirmek (buna arma yntemi diyelim) ya da cookie yardmyla en son tklanan linki kaydetmek. Bu iki yntemi de ayr ayr incelemeden nce getiimiz ay tek bir sayfadan oluan uygulamamz daha kullanl ve geree yakn uyarlanm klmak iin farkl dosyalara blelim. Menmzn stilini tanmlayan CSS dosya(lar)mz zaten harici idiler. ncelikle madem ki script kodlarmz her sayfa iin ayn olacak o zaman script kodlarn harici JavaScript dosyas olarak kaydedelim. sihirlimenu.js
Noktal stil
Klasik
<!-function tumAltKapat(){ // 1. seviyeye kadar tm altlar kapat var ar = document.getElementsByTagName("ul"); for (var i=0; i<ar.length; i++){ ar[i].style.display = "none"; } } var oncekiAktif; // bir nceki aktif objeyi kaydedecek var classOncekiAktif; // bir nceki aktif objenin olaan class ismini kaydedecek function katla(obj){ // navigasyon if(document.getElementById){
3 boyutlu butonlar
Modern
160 CHIP Workshop > >
>>
<ul> takl tm elementler (obj.indexOf("x")){
Web Programcl
var el = document.getElementById(obj); // id numaras verili nesne var ar = document.getElementsByTagName("ul"); // if(el.style.display != "block"){ // eer element grnr durumda deilse a //nce dierlerini kapat if } for (var i=0; i<ar.length; i++){ ar[i].style.display = "none"; // bir st dm ak ise tm alt ve st dmleri kapat } } else if (ar[i].className=="subaltmenu"){ ar[i].style.display = "none"; // Eer baka bir alt dm ak ise ayn seviyedeki tm alt dmleri kapat } } } //imdi elementi a el.style.display = "block"; } else{ el.style.display = "none"; } } } function acil(str){ // istenen elemente ulaana kadar a ve seili hale getir // id namarasn analiz et var param1 = str.substring(0,1) var param2 = str.substring(1,2) var param3 = str.substring(3,4) var param4 = str.substring(5,6) tumAltKapat(); if (param4==0){ if (param3==0){ // Eer 1. seviyede linkse (dm deilse) sadece seili hale getir aktiflestir(document.getElementById(str)) } else { // Eer 1. seviyede dmse .. katla("s" + param2 + "_" + 0 + "_" + 0); // bir st a ... aktiflestir(document.getElementById(str)) // ve seili hale getir } } else {// Eer 2. seviyede dmse .. katla("s" + param2 + "_" + 0 + "_" + 0); // iki stn a ... katla("x" + param2 + "_" + param3 + "_" + 0); // bir st a ... aktiflestir(document.getElementById(str)) ve seili hale getir } } function aktiflestir(obj){ // seili hale getirir deaktiflestir(); // bir nceki seili olan kaydet // </head> { for (var i=0; i<ar.length; i++){ }
oncekiAktif = obj; // seili hale getirilecek element classOncekiAktif = obj.className; // seili hale getirilecek elementin olaan class ismi obj.className = "secili"; function deaktiflestir(){ // seili olan resetle if (oncekiAktif) {oncekiAktif.className = classOncekiAktif;} function degis(){tumAltKapat();} // ilk seviyeye kadar kapat (Meny Sfrla) --> Menmz kullanacak her bir sayfadan JavaScript dosyasna bir link vermeyi unutmayn. <script type="text/javascript" src="sihirlimenu.js"></script>
arma yntemi
Bulunulan sayfa iin meny amak amacyla kullanacamz yntemlerden ilki cookieli versiyona gre ok daha basit ve kolay olan. nce sitemizde ierik sayfalar olarak bir ka model sayfa yapalm. Ben 110, 241 ve 400 numaral linkler iin birer sayfa hazrladm. 241 numaral link iin herhangi241.html adl sayfa aadaki gibi olutu. herhangi241.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-9"> <link rel=stylesheet href="stil_1.css" type="text/css"> <script type="text/javascript" src="sihirlimenu.js"></script> <body onload="acil('_2_4_1')" leftmargin="0" topmargin="0" marginheight="0" marginwidth="0" bgcolor="#ffffff"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td width="230" valign="top"> <a class="menuUst">Menu</a> <div id="menu" style="position: absolute; background-color:#EBEBEB; top:21; left:0; width:0; height:0; visibility:visible; z-index:0;"> <a class="analink" href="#" id="_1_0_0" onclick="katla('s1_0_0'); this.blur()">100 > </a> <ul class="altmenu" id="s1_0_0"> <li><a class="altlink" href="herhangi110.html" id="_1_1_0"> 110</a></li> <li><a class="altlink" href="herhangi120.html" id="_1_2_0"> 120</a></li> </ul> <a class="analink" href="#" id="_2_0_0" onclick="katla('s2_0_0'); this.blur()">200 > </a> <ul class="altmenu" id="s2_0_0"> <li><a class="altlink"
< CHIP Workshop 161 <
Web Programcl
<<
href="herhangi210.html" id="_2_1_0"> 210</a></li> <li><a class="altlink" href="herhangi220.html" id="_2_2_0"> 220</a></li> <li><a class="altlink" href="#" onclick="katla('x2_3_0'); this.blur()"> 230 > </a></li> <ul class="subaltmenu" id="x2_3_0">
yarn da artarak etkisini srdrmesi beklenen kar yana kar tedbirli olunmas uyarsnda bulundu. .... vs Sayfann ierii .... <br><br> </td> </tr> </table> </body> </html>
<li><a class="subaltlink" href="herhangi231.html" id="_2_3_1">  231</a></li> <li><a class="subaltlink" href="herhangi232.html" id="_2_3_2">  232</a></li> <li><a class="subaltlink" href="herhangi233.html" id="_2_3_3">  233</a></li> </ul> <li><a class="altlink" href="#" onclick="katla('x2_4_0'); this.blur()"> 240 > </a></li> <ul class="subaltmenu" id="x2_4_0"> <li><a class="subaltlink" href="herhangi241.html" id="_2_4_1">  241</a></li> <li><a class="subaltlink" href="herhangi242.html" id="_2_4_2">  242</a></li> </ul> <li><a class="altlink" href="herhangi250.html" id="_2_5_0"> 250</a></li> </ul> <a class="analink" href="#" id="_3_0_0" onclick="katla('s3_0_0'); this.blur()">300 > </a> <ul class="altmenu" id="s3_0_0"> <li><a class="altlink" href="herhangi310.html" id="_3_1_0"> 310</a></li> <li><a class="altlink" href="herhangi320.html" id="_3_2_0"> 320</a></li> <li><a class="altlink" href="#" onclick="katla('x3_3_0'); this.blur()"> 330 > </a></li> <ul class="subaltmenu" id="x3_3_0">
Bu sayfaya gelindiinde mennn 241 nolu eleman iin ak ve seili grnmesini salamak amacyla <body> taks iine
onload="acil('_2_4_1')"
ifadesini yerletirdik. Her bir sayfa iin kendi id numarasn parametre olarak yazmanz gerekir. Dikkat ederseniz bu sayfada biri men dieri sayfann ierii olarak iki blm var. Tm sayfalardaki menlerin ayn olacan dnrsek her bir sayfaya ayn blou tekrar tekrar yazmaya gerek yok. Bunu yapmak iin bu blou harici JavaScript dosyasnda u ekilde deiken olarak kaydedebilir
var blokmenu = ; blokmenu += <div id=menu style=position:absolute; . . . ; blokmenu += <a class=analink href=# id=_1_0_0 . . . ; ... ...
ve her bir sayfaya

document.write(blokmenu);
satryla yazdrabilirsiniz. Ya da sunucu tarafl bir uygulama kullanyorsanz iiniz daha kolay. Tm blou bir dosya olarak kaydedip bu dosyay sayfalara ekleyebilirsiniz. Mesela JSP iin
<%@ include file="menu.html" %>
<li><a class="subaltlink" href="herhangi331.html" id="_3_3_1">  331</a></li> <li><a class="subaltlink" href="herhangi332.html" id="_3_3_2">  332</a></li> <li><a class="subaltlink" href="herhangi333.html" id="_3_3_3">  333</a></li> </ul> </ul> <a class="analink" href="herhangi400.html" id="_4_0_0">400</a> <a class="analink" href="herhangi500.html" id="_5_0_0">500</a> <a class="analink" href="herhangi600.html" id="_6_0_0">600</a> </div> </td> <td width="500" valign="top"> <br> <h2>Sayfa 241</h2> <b>Boaz ve Anadolu yakas fel olabilir</b> <br><br> Istanbul Valilii Afet Ynetim Merkezi, bu akam saatlerinde balamas ve
>>
PHP iin gibi.
Web Programcl
} } var oncekiAktif; // bir nceki aktif objeyi kaydedecek <? include('menu.html') ?> var classOncekiAktif; // bir nceki aktif objenin olaan class ismini kaydedecek function katla(obj){ // navigasyon if(document.getElementById){ var el = document.getElementById(obj); // id numaras verili nesne var ar = document.getElementsByTagName("ul"); // <ul> takl tm elementler if(el.style.display != "block"){ // eer element grnr durumda deilse a //nce dierlerini kapat if (obj.indexOf("x")){ for (var i=0; i<ar.length; i++){ ar[i].style.display = "none"; // bir st dm ak ise tm alt ve st dmleri kapat } } else { for (var i=0; i<ar.length; i++){ if (ar[i].className=="subaltmenu"){ ar[i].style.display = "none"; // Eer baka bir alt dm ak ise ayn seviyedeki tm alt dmleri kapat } } } //imdi elementi a el.style.display = "block"; } else{ el.style.display = "none"; } } } function acil(str){ // istenen elemente ulaana kadar a ve seili hale getir // id namarasn analiz et var param1 = str.substring(0,1) var param2 = str.substring(1,2) var param3 = str.substring(3,4) var param4 = str.substring(5,6) tumAltKapat(); if (param4==0){ if (param3==0){ // Eer 1. seviyede linkse (dm deilse) sadece seili hale getir aktiflestir(document.getElementById(str)) } else { // Eer 1. seviyede dmse .. katla("s" + param2 + "_" + 0 + "_" + 0); // bir st a ... aktiflestir(document.getElementById(str)) // ve seili hale getir } } else {// Eer 2. seviyede dmse .. katla("s" + param2 + "_" + 0 + "_" + 0); // iki stn a ... katla("x" + param2 + "_" + param3 + "_" + 0); // bir st a ... aktiflestir(document.getElementById(str)) ve seili hale getir } // tarih = new Date tarih.setDate(tarih.getDate()-1) birSonrakiCookie = document.cookie.split("; ") for (x=0; x<birSonrakiCookie.length; x++) { cookieName = birSonrakiCookie[x].split("=")[0] document.cookie = cookieName + "=;expires=" + tarih.toGMTString() } } } //---------------------------function tumAltKapat(){ // 1. seviyeye kadar tm altlar kapat var ar = document.getElementsByTagName("ul"); for (var i=0; i<ar.length; i++){ ar[i].style.display = "none"; if (document.cookie != "") { cookiemiz = document.cookie.split("; ") for (i=0; i<cookiemiz.length; i++) { if (cookieIsmi == cookiemiz[i].split("=")[0]) { return cookiemiz[i].split("=")[1] } } return 0 } function cookieSil() { stat = cookieGetir("stat"); } function cookieGetir(cookieIsmi) {
Ancak bu teknolojilerden hangisini tercih edeceinizi bilemeyeceim iin ve bu haliyle sizler iin daha okunakl ve anlalabilir olduundan ben HTML olarak brakyorum. Uygulamamz bu haliyle test etmeye hazr. Her bir ierik sayfasna geldiinizde mende o sayfaya ait linkin seili olduunu gzlemlemelisiniz.
Cookieli yntem
Sayfalarn dinamik olarak oluturulduu baz durumlarda her bir sayfaya arma ilemini yapacak id numarasn eklemek zor olabilir. Bu gibi durumlarda mennze cookieleri adapte etmeyi de dnebilirsiniz. ncelikle JavaScript kodlarmzda baz deiiklikler yapmamz gerek. Aadaki kodlarda scriptimize cookie fonksiyonlarnn ilave edilmi halini grebilirsiniz. sihirlimenu_cookie.js <!-//Cookie fonksiyonlar-----------tarih = new Date tarih.setMonth(tarih.getMonth()+1) function cookieYaz(stat) { document.cookie = "stat="+stat+";expires=" + tarih.toGMT String(); } stat = ""; if (document.cookie != "") {
Web Programcl
<<
} function aktiflestir(obj){ // seili hale getirir deaktiflestir(); // bir nceki seili olan kaydet oncekiAktif = obj; // seili hale getirilecek element classOncekiAktif = obj.className; // seili hale getirilecek elementin olaan class ismi obj.className = "secili"; } function deaktiflestir(){ // seili olan resetle if (oncekiAktif) {oncekiAktif.className = classOncekiAktif;} } function degis(){ tumAltKapat();} // ilk seviyeye kadar kapat (Meny Sfrla) -->
onclick="cookieYaz(this.id)"> 210</a></li> <li><a class="altlink" href="herhangi220.html" id="_2_2_0" onclick="cookieYaz(this.id)"> 220</a></li> <li><a class="altlink" href="#" onclick="katla('x2_3_0'); this.blur()"> 230 > </a></li> <ul class="subaltmenu" id="x2_3_0"> <li><a class="subaltlink" href="herhangi231.html " id="_2_3_1" onclick="cookieYaz(this.id)">  231</a></li> <li><a class="subaltlink" href="herhangi232.html" id="_2_3_2" onclick="cookieYaz(this.id)">  232</a></li> <li><a class="subaltlink" href="herhangi233.html" id="_2_3_3" onclick="cookieYaz(this.id)">  233</a></li> </ul> <li><a class="altlink" href="#" onclick="katla('x2_4_0'); this.blur()"> 240 > </a></li> <ul class="subaltmenu" id="x2_4_0"> <li><a class="subaltlink" href="herhangi241 . html" id="_2_4_1" onclick="cookieYaz(this.id)">  241</a></li> <li><a class="subaltlink" href="herhangi242.html" <title></title> <meta http-equiv="Content-Type" content="text/html; id="_2_4_2" onclick="cookieYaz(this.id)">  242</a></li> </ul> <li><a class="altlink" href="herhangi250.html" id="_2_5_0" onclick="cookieYaz(this.id)"> 250</a></li> </ul> <a class="analink" href="#" id="_3_0_0" onclick=" atla('s3_0_0'); this.blur()">300 > </a> <ul class="altmenu" id="s3_0_0"> <li><a class="altlink" href="herhangi310.html" id="_3_1_0" onclick="cookieYaz(this.id)"> 310</a></li> <li><a class="altlink" href="herhangi320.html" id="_3_2_0" onclick="cookieYaz(this.id)"> 320</a></li> <li><a class="altlink" href="#" <td width="230" valign="top"> <a class="menuUst" href="#" onclick="katla('x3_3_0'); this.blur()"> 330 > </a></li> <ul class="subaltmenu" id="x3_3_0"> <li><a class="subaltlink" href="herhangi331.html" id="_3_3_1" onclick="cookieYaz(this.id)">  331</a></li> <li><a class="subaltlink" href="herhangi332.html" id="_3_3_2" onclick="cookieYaz(this.id)">  332</a></li> <a <li><a class="subaltlink" href="herhangi333.html" id="_3_3_3" onclick="cookieYaz(this.id)">  333</a></li> </ul> <ul </ul> <a class="analink" href="herhangi400.html" <li><a id="_4_0_0" onclick="cookieYaz(this.id)">400</a> <a class="analink" href="herhangi500.html" id="_5_0_0" onclick="cookieYaz(this.id)">500</a> <a class="analink" href="herhangi600.html" id="_6_0_0" onclick="cookieYaz(this.id)">600</a> </div> </ul> <a </td> <td width="500" valign="top"> <br> <h2>Sayfa 241</h2> <ul <b>Boaz ve Anadolu yakas fel olabilir</b> <br><br> Istanbul Valilii Afet Ynetim Merkezi, bu akam saatlerinde balamas ve <li><a
Yine sitemizde ierik sayfalar olarak bir ka model sayfa yapalm. 241 nolu link iin herhangi241.html adl sayfa aadaki gibi olutu. herhangi241.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head>
charset=windows-1254"> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-9"> <link rel=stylesheet href="stil_2.css" type="text/css"> <script type="text/javascript" src="sihirlimenu_cookie.js"></script> </head> <body onload="if(stat){acil(stat)}" leftmargin="0" topmargin="0" marginheight="0" marginwidth="0" bgcolor="#ffffff"> <table border="0" cellpadding="0" cellspacing="0"> <tr>
onclick="this.blur()">Menu</a> <div id="menu" style="position:absolute; background-color:#EBEBEB; top:21; left:0; width:0; height:0; visibility:visible; z-index:0;"> class="analink" href="#" id="_1_0_0" onclick="katla('s1_0_0'); this.blur()">100 > </a> class="altmenu" id="s1_0_0"> class="altlink" href="herhangi110.html" id="_1_1_0" onclick="cookieYaz(this.id)"> 110</a></li> class="altlink" href="herhangi120.html" id="_1_2_0" onclick="cookieYaz(this.id)"> 120</a></li>
class="analink" href="#" id="_2_0_0" onclick="katla('s2_0_0'); this.blur()">200 > </a> class="altmenu" id="s2_0_0"> <li><a class="altlink" href="herhangi210.html" id="_2_1_0"
>>
</td> </tr> </table> </body> </html>
Web Programcl
yarn da artarak etkisini srdrmesi beklenen kar yana kar tedbirli olunmas uyarsnda bulundu. Istanbul'da akam saatlerinden itibaren balamas beklenen karla kark yamur ve kar yann, yarn le saatlerinde etkisini artraca tahmin ediliyor. . . . vs .. . <br><br>
Sayfamzda bir nceki ynteme gre en nemli deiiklik mendeki linklerin tklandnda farkl bir fonksiyonu aryor olmalar. Bu sefer linke tklandnda ayn zamanda cookieYaz fonksiyonu ilgili id parametresiyle birlikte arlyor. Bu durumda en son tklanan sayfann id numaras cookiede kaytl oluyor.
<a class="subaltlink" href="herhangi241.html" id="_2_4_1" onclick="cookieYaz(this.id)">  241</a>
cookiemiz = document.cookie.split("; ") for (i=0; i<cookiemiz.length; i++) { if (cookieIsmi == cookiemiz[i].split("=")[0]) { return cookiemiz[i].split("=")[1] } } return 0 }
Herhangi bir ierik sayfasna gittiinizde ise hangi sayfada bulunduunuz fark etmeksizin script nce cookiede kaytl bir deerin olup olmadn kontrol ediyor, varsa bu deer gre meny ap ilgili eleman seili hale getiriyor.
<body onload="if(stat){acil(stat)}"
Cookie fonksiyonlarnn nasl altna gelelim. Cookielerimiz 1 ay sre ile ziyareti bilgisayarnda korunacaklar.
tarih = new Date tarih.setMonth(tarih.getMonth()+1)
Fonksiyonumuz ayn cookie dosyas iinde birden fazla deiken kaytl olabilecei iin bu deerleri nce ayrarak analiz ediyor. Daha sonra ismi parametre deeri olarak arlan deikenin deerini geri gnderiyor. Cookiemizi silmek iin kullandmz fonksiyon ise benzer bir ilevle ayn dosya iinde bulunmas muhtemel tm deikenler iin geerliliklerini yitirecei sre olarak gemi bir tarihi atyor. Bu durumda oturumun sona ermesiyle cookieler silinmi oluyor.
function cookieSil() { if (document.cookie != "") { tarih = new Date tarih.setDate(tarih.getDate()-1) birSonrakiCookie = document.cookie.split("; ") for (x=0; x<birSonrakiCookie.length; x++) { cookieName = birSonrakiCookie[x].split("=")[0] document.cookie = cookieName + "=;expires=" + tarih.toGMTString() } } }
Cookiemizi yazdran fonksiyon cookieYaz()da cookiemizin deeri ile birlikte geerliliini yitirecei sreyi de bildiriyoruz. Bunu yapmazsanz ziyaretiniz tarayc ekrann kapad anda cookie de yok olur.
function cookieYaz(stat) { document.cookie = "stat="+stat+";expires=" + tarih.toGMTString(); }
Cookiemizde bizim iin nemli bilgi olan id numarasnn kaydedilecei deikenin ad stat. lk olarak deeri bo.
stat = "";
Eer sayfamzla ilikilendirilmi daha nceden kaytl bir cookie deeri varsa hemen bunu deikenimize atayabiliriz.
if (document.cookie != "") { stat = cookieGetir("stat"); }
Cookieli versiyonumuzda ziyareti sitenize gelir gelmez men en son ziyaret ettii sayfay gsterecektir. Dilerseniz ziyaretinizi en son bulunduu sayfaya ynlendirecek bir ilevi scriptinize eklemeyi dnebilirsiniz.
NOT: Bu ayki atlyemizde yer alan rneklerin kaynak kodlarn CDdeki StudioWeb+ blmnde bulabilirsiniz.
Kaytl cookie deerini ziyareti bilgisayarndan okuyan fonksiyon

function cookieGetir(cookieIsmi) {
Numan Pekgz numanpekgoz@chip.com.tr
Java Serisi
<<
JAVA ile Programlama Blm 8

Bir Java dersimizde daha birlikteyiz. Geen dersimizde renmi olduumuz snflarn tretilmesi konusunu takiben bu dersimizde de yine nesne ynelimli programlama ierisinde yer alan arayzleri ve soyut snflar inceleyeceiz.
Soyut snflar
Soyut snf kavram aslnda tamamen tretme ile ilikilidir. Bu nedenle soyut snflarn anlaml kullanlmas aslnda bir tretme ileminin yaplmasn gerektirir. Tretme ileminde hatrlayacamz gibi; bir snf baka bir snfnn deiken ve metotlarn alabilmektedir. Bylece nceden yazlm birtakm metod ve deikenlerin yer ald bir snf varsa ve biz de bu metot ve deikenlere ihtiya duyuyor ve ayn zamanda yeni metot ya da deikenler de eklemek istiyorsak, mevcut snftan bir tretme yaparak sadece yeni eklemek istediimiz metot ve deikenleri yazmamz yeterli olacaktr. Bir snf ierisinde daha nce grm olduumuz metot tanmlamalarndan farkl olarak soyut metot denilen bir metot tanmlamas daha vardr. Bir metot soyut olarak yazlacaksa, metot prototipinde "public", "private" ya da "protected" anahtar szcnden sonra abstract anahtar szc yazlmadr. Ayrca snf ierisinde bu ekilde prototipi yazlan soyut metodun ierisine de hibir ey yazlmaz. rnein: ... public abstract String ismiVer(); ... Yukardaki rnekte bir soyut metot bildirimi yaplm ve ierisi yazlmadan noktal virgl ile bildirim tamamlanmtr. kinci kural olarak da ierisinde soyut metot barndran bir snftan tretilen yeni bir snf, bu soyut metodun ierisini kendi iinde yazmak zorundadr. Aksi takdirde tretme ilemi hatal saylr. yazlr. O halde ierisinde soyut metotlar barndran bir snftan tretme yapldnda, ondan treyen her snf ierisinde bu metodun yeniden yazlmas gerekecek ve dolaysyla bu snftan treyen tm snflarn byle bir metot barndraca garanti edilmi olacaktr. Bylece birok kiinin grev ald byk bir projede, yazlmas kesinlikle gerekli olan, ancak sadece ileyii deiebilen metotlar temel bir snf ierisinde soyut olarak tanmlarsak ve yazlacak tm yeni snflarn da bu temel snftan tretilerek yazlmasn art koarsak, herhangi bir kontrole gerek kalmakszn, yazlmas zorunlu olan bu metotlarn birbirinden bamsz kiilerin tasarlayaca tm snflarda kesinlikle yer alacandan emin olabiliriz. Bu durum aadaki ekilde de zetlenmitir: Bylece kavramsal olarak soyut metot ve soyut snfn ne olduunu yeterince incelediimizi dnyorum. imdi yukarda okuduklarmz pekitiren olduka klasik bir rnek yapalm. Bu rnekte soyut metot kullanmn ierdii gibi aslnda tretme ileminin de gzel bir kullanmn gstermektedir. rneimizde temel olarak Sekil adnda bir snf yer almakta. Bu snf tm ge47 CHIP Workshop > >
Sonu olarak:
1) Soyut bir metodun temel snf ierisinde sadece prototipi yazlr. 2) Bu temel snftan treyen bir snf, temel snfta sadece prototipi yazlm olan bu soyut metodu kendi ierisinde tamamen yazmak zorundadr. 3) erisinde soyut metot barndran snflara soyut snf denilir ve byle bir snfn bildiriminin bana "class" anahtar szcnden nce abstract yazlmak zorundadr. Peki ama soyut metotlarn bu kullanm ne ie yarar? Snf bildirimi ierisinde yazlm olan soyut metotlarn nasl alaca, bu snftan tretilen snflar ierisinde yazlmaktadr. Temel snf ierisinde bu metotlarn nasl ileyeceklerinden ziyade geri dn deerlerinin ve parametrelerinin ne olduklar
>>
Java Serisi
Sekil.java Snf
Ucgen.java Snf
Java Serisi
<<
Dikdortgen.java Snf
ometrik ekillerin temelini tekil ettiinden, ierisinde yer alacak olan "alanHesapla", "cevreHesapla", "kenarSayisiVer" gibi metotlarn yazlmas anlamszdr. Ancak bir geometrik ekil bu metotlara sahip olmaldr. O halde biz Sekil snfnn bu metotlarn soyut olarak tasarlayp gerekli olan geometrik ekle ilikin bir snf da bu snftan tretirsek, soyut olan bu metotlar ilgili eklin zelliklerine gre yeniden yazabiliriz. Bu dnceyle de rneimizde Sekil snfndan treyen Dikdortgen ve Ucgen snflarn da yazmaktayz: Bu rnekte yazlan tm snflar en son olarak "SekilGenel.java" snf ierisinde test edilmektedir. rnekte yazlm olan "Dikdortgen.java" ve "Ucgen.java" snflar "Sekil.java" snfndan tretilerek elde edil-
mitir. "Sekil.java" snf da ierisinde baz soyut metotlar ierdiinden, tretmenin yapld her iki snf ierisinde bu soyut metotlar ii ksmlar da yazlmtr. Ancak tabi ki "Sekil.java" ierisinde prototipi yazlm olan herhangi bir soyut metodun "Dikdortgen.java" ya da "Ucgen.java" ierisindeki davran biimi farkl olacaktr. Fakat her ikisinin de bu soyut metotlar ierecei garanti edilmitir.
Tm metotlar soyut olarak yazlm snfa arayz (interface) denilmektedir. Mesela aadaki rnekte verilen "Personel" isimli snfn ierisinde yer alan tm metotlar soyut olduundan bu snf bildiriminin bana "abstract" anahtar szc yerine "interface" anahtar szc yazlmtr. Ayrca arayzlerin bildiriminde "class" anahtar szc kullanlmaz:
public interface Personel {
Arayzler
Arayzler aslnda soyut snflardan farkl deildir. Yukarda da anlattmz gibi, ierisinde tek bir tane bile soyut metot ieren bir snf soyut bir snf saylr. Ancak tabi ki byle bir snfn soyut olmayan metotlar da yazlabilir.
public abstract String personelAdiniVer(); public abstract String personel DerecesiniVer(); public abstract void personelBolumunuDegistir(int bolum); public abstract int personelBolumunuVer();
>>
Java Serisi
SekilGenel.java Snf
(Exceptions) [1]
Yukarda da bahsettiim gibi Java'da programn almas srasnda "exception" olarak isimlendirilen bir takm hatalar meydana gelebilir. Bu hatalarn ele alnmas ve program aknn buna gre dzgn bir yere ynlendirilmesi gerekmektedir. Java'da bu ilemlerin yaplmasn salayan bir mekanizma mevcuttur. Aslnda alma zaman srasnda meydana gelen her "exception", "Throwable" olarak isimlendirilen bir nesne trnden rnekler olarak yaratlmaktadr. Bu nesnelerin bazlarn rneklerimizde ele alacaz. ncelikle byle bir nesnenin Java'da nasl yaratldn ve nasl gnderildiini inceleyelim. Aadaki rnekte verilen programda aslnda bir yazm hatas yoktur. Program baarl bir ekilde derlenecek ancak sfra blme ilemi yznden alma zaman srasnda bir "exception" yaratlacaktr. Buradaki rnekte yaratlan "exception" nesnesnin tr "ArithmeticException" dr:
class ExceptionDeneme { public static void main(String arg[]) { int n = 4 / 0; System.out.println("Tamam"); } }
bir exception yaratmaktayz:

class ExceptionDeneme2 { public static double karekok(double n) { if(n < 0) throw new IllegalArgumentException(); return Math.sqrt(n); } public static void main(String arg[]) { System.out.println ("Sonuc: "+ karekok(-25)); System.out.println ("Program Bitiyor"); } }
Eer bir snf bir arayzden tretilerek elde ediliyorsa, bu snf bildiriminde "extends" anahtar szc yerine "implements" anahtar szc yazlmaktadr. Mesela "Personel" snfndan bir tretme yaplarak "Mdr" isimli bir snf yazlacaksa, bu snfn bildirimi aadaki ekilde olmaldr:
public class Mudur implements Personel { ... }
Bunun dnda, arayzler ile soyut snflarn kullanm tamamen ayn prensibe sahip olduundan daha fazla detaya inmeyeceiz. Geldiimiz bu noktada artk snflarn yaratlmas, tretilmesi ve kullanlmas gibi balklar incelemi bulunmaktayz. Bugne kadar anlatlan ilemlerde pratik kazanmak ve konuyu tam anlamyla kavramak, ancak bol bol program yazmakla mmkn olacaktr. Bu balklara ilikin konu anlatmlarn sonlandrmakla beraber yine de bol rnek ve uygulama zerinde detayl aklamalar yaparak konuyu zaman ierisinde daha iyi kavramanz salamak dncesindeyim. Bu nedenle verdiimiz rnekleri mutlaka en batan ve dikkatle yazmanz tekrar hatrlatrm. imdi java programlar ierisinde alma zaman srasnda (run-time) meydana gelen hatalarn nasl ele alndna ilikin bir inceleme yapalm.
Java'da Hata Mekanizmas

Bu rnei ExceptionDeneme.java dosyas adyla kaydedip nce javac ile derledikten sonra java ile altrmak istediimizde ArtihmeticException yaratlacaktr. Aadaki rnekte ise biz kendi elimizle
ExceptionDeneme2.java rneimizde karekok isimli metoda parametre olarak sfrdan kk bir say verildiinde, "karekok" metodu ierisinde tanmland gibi "new IllegalArgumentException" ile yeni bir exception yaratlacak ve bu yaratlan nesne de "throw" anahtar szc ile gnderilecektir. Bunun neticesinde bu program yine javac ile derlenebilecek ancak java komutu ile altrlmak istendiinde "IllegalArgumentException" retecektir. Bu durumda program son satra gelmeden sonlanacak ve dolays ile ekranda "Program Bitiyor" yazs kmayacaktr. Peki o halde gerek bizim isteimizle gerek kontrolsz olarak retilen bu "exception" nesneleri ne ekilde ele alnabilir ve program ak ne ekilde kontrol altnda tutulabilir bunu inceleyelim..
Java Serisi
<<
ExceptionDeneme3.java Snf
Hatann Ele Alnmas (Exception Handling)

Az nceki rneklerde olduu gibi meydana gelen bu hatalar "try" ve "catch" ile kontroll bir ekilde ele alnarak program aknn dzgn bir ekilde ynlendirilmesi mmkn hale getirilebilir. O halde az nce yazm olduumuz "ExceptionDeneme2" isimli snfta hatay dzgn br ekilde yakalayacak mekanizma ile tekrar yazalm. Bu yeni snfn adna da "ExceptionDeneme3" diyelim: ExceptionDeneme3 rneinde kullanlan try blou, hatann kma ihtimali olan satrlar iermektedir. Daha sonra alm olan "catch" blounda da, meydana gelen hatann ele alnd ksmlar yazlmaktadr. Hata nasl ele alnmak istenirse catch blounun ii o ekilde doldurulabilir. catch blouna gelen hata nesnesi catch parantezleri ierisinde tr "Exception" olan ve ad da "hata" olan deikene atanmtr. Netice itibariyle hata baarl bir ekilde yakalandndan , "catch" blou ierisinde ele alndktan sonra program ak nceki rneklerde olduu gibi sonlanmayacaktr. Bu programn almas neticesinde ekrana: Yakalanan hata:java.lang.IllegalArgumentException Hata yakalandi.. Program devam ediyor.. yazacaktr. Burada dikkat edilirse aslnda "IllegalAr-
gumentException" trnden retilen hata "Exception" trndeki nesneye atanmtr. Yani bir tr dnm sz konusudur. Buna ilikin detayl bir incelemeyi daha sonra yapacaz. imdilik sadece hata yakalama mekanizmasna younlamak yeterli olacaktr. Hata yakalama mekanizmasnda son bahsedeceimiz ey de hatalarn yukardaki rnekte olduu gibi genel bir "catch" blou ierisinde deil de hatann trne ilikin bir blok ierisinde ele alnmaldr. Bu ilem iin try ve catch bloklar aadaki ekilde kullanlmaktadr:
... try { ... } catch (ExceptionTuru e) { ... } catch(ExceptionTuru2 e) { ... } finally { } ...
da temel zellikleriyle renmi bulunmaktayz. Bizim bu ekilde kullandmz mekanizmay ilerleyen rneklerimizde bazen zorunlu olarak gz nnde bulundurmamz gerektiini greceksiniz. yle ki daha nce de kullandmz gibi baz hazr Java snflarn kullanrken, bu snflarn ierisindeki bir takm metotlarn exception retiyor olmalarndan dolay, kodun ilgili ksmlarn try bloklar ierisinde yazmak ve daha sonra da catch bloklar ile retilmesi muhtemel exception nesnelerini yakalayacak halde program yazmak zorunda kalacaksnz. Yeri geldike zaten bu kullanmlara deineceiz.
Java'da Dosya lemlerine Giri

Programcln vazgeilmez ilerinden birisi de disk zerindeki dosyalarla almaktr. Buraya kadar konular renmek amacyla kullanm olduumuz rneklerde aslnda veriler sadece o anda alan program ierisinde ele alnabiliyordu. Profesyonel anlamda yazlan programlarn ou kullancnn ihtiya duyaca verileri dosyalar zerinde saklamakta ve gerektiinde bu dosyalardan verileri okuyarak ya da yeni verileri dosyalara yazarak ileyilerini srdrmektedir. Bu nedenle programclkta ama ne olursa olsun dosyalar zerinde ilem yapma ihtiyac mutlaka karnza kacaktr. Bu dersimizde sadece giri yapacamz
Bu yapya gre her catch blou farkl trde bir hatay ele alacaktr. Btn catch bloklar geildikten sonra da program ak finally blounun ierisine ynelecektir. Bylece hata yakalama mekanizmasn
>>
Java Serisi
Dosyalar.java rnei
Dosyalar.java program kts
dosya ilemleri ile ilgili birok rnei devam eden derslerimizde de yapacaz. Java'da dosya ilemlerine ilikin ilk olarak File isimli snfn kullanmn inceleyerek balayalm. B snf disk zerinde yer alan bir dosyay program ierisinde de bir nesne haline getirerek programcnn dosya zerinde ilem yapabilmesini salamaktadr. Snfn balang fonksiyonu temel olarak bir dosyann yol (path) bilgisini alarak File nesnesini yaratr. rnein:
... File dosya1 = new File(Dosya.txt); File dosya2 = new File(c:\ornekler\dosya.txt); File dosya3 = new File(/home/erman/Dosyam.txt) ...
Tabi yukarda verilen bu rneklerde, File snfnn balang fonksiyonuna parametre olarak verilen bu yollarn diskte de dzgn bir ekilde mevcut olmas gerekmektedir. Yani bulunduumuz dizinde Dos< CHIP Workshop 52 <
ya.txt ya da c:\ornekler\ dizini altnda bir dosya.txt ya da /home/erman/ dizini ierisinde bir Dosyam.txt dosyas bulunmaldr. Aksi takdirde dosya1, dosya2 ya da dosya3 ismi ile temsil edilen File nesneleri dzgn bir ekilde yaratlamayacaktr. Not: Java'da dosya ilemlerinin yaplabilmesi iin io.* ktphanelerinin programn en st satrnda import anahtar szc ile programa dahil edilmesi gerekmektedir. Aadaki rnekte temel olarak File snf ile dosya ilemlerinin ele alnmasna ilikin bir program yazlmaktadr. rneimizde temel bir File nesnesi yaratarak aslnda diskte yer alan bir dosya bilgilerinin nasl ele alndn grmekteyiz. Bu rnekte benim girmi olduum /tmp/dosya.txt yolu aslnda kendi sistemimdeki bir dosyann yerini temsil ettiinden siz kendi rneinizi yazarken kendi diskinizdeki yolu yazmaya dikkat ediniz. Program altrldnda InputDialog nesnesi ile aadaki
resimde gsterildii gibi sizden bir dosya yolu istenecektir: Girdiiniz bu yol bilgisi programmzn 8. satrnda yazld ekilde dosyaYolu deikenine aktarlmakta ve daha sonra da 11. satrda olduu gibi bu deiken yardm ile nesne yaratlmaktadr. Bu nesne yardmyla kullanlabilecek birka metodu 14, 15 ve 16. satrlarda grmekteyiz. Sadece konuya giri yapmak amacyla ele aldmz dosya ilemleri tabi ki bu kadaryla snrl deildir. Konuya ilikin ok daha detayl ve elenceli rnekleri bir sonraki dersimizde greceiz. Derslerimizde kullandmz program kodlarn http://cs.bilgi.edu.tr/~erman/ adresine erierek elde edebileceiniz bir kez daha hatrlatmak isterim. Bir sonraki dersimizde grene dek esenlikle kaln.
Sevgi ve Sayglarmla, Erman Ayka ermana@bilgi.edu.tr
Photoshop Serisi
Herkes iin Photoshop

Gne Tutulmas
ncelikle istediiniz boyutta yeni bir belge oluturun. imdi [D] tuuna basarak n ve arka plan renklerini siyah ve beyaz olacak ekilde sfrlayn. Arka plan rengini siyah ile boyadktan sonra alma alannzn tam ortasna Filter / Render / Lens Flare seenei yardmyla bir Lens Flare uygulayn. Brightness %100, Lens Type:50-300mm olabilir. Daha sonra da hem soldan hem de sadan Filter / Stylize / Wind ile rzgar efekti uygulayn. imdi ayn efektleri yukardan ve aadan da uygulayabilmemiz iin resmi dndrmemiz gerekiyor. Bunun iin Image / Rotate Canvas / Rotate 90 CW seenei kullann. Biraz nceki rzgar efektini soldan ve sadan Filter / Stylize / Wind seenei yardmyla tekrar uygulayn. Ardndan da Filter / Distort / Polar Coordinates seeneini sadaki resimdeki ayarlarla uygulayn. Son olarak resmi aynen bir kez daha dndrn.
<<
Photoshopun farkl alanlardaki kullanm ekillerini daha iyi anlayabilmek iin bu sayfalarda yer alan Photoshop derslerinde her ay; fotoraf dzenleme, izim ve efektler eklinde 3 farkl kategoride rnekler yer alacak.
Termal Kamera
Fotoraflarnz zel birimlerin kulland termal kameralar ile ekilmi gibi bir hale dntrmek ister misiniz? te size kolay bir yntem. nce fotorafnz an. lemi Gradient mapping kullanarak yapacaz. Bu ekilde var olan renkler gradient zerindeki farkl bir renk ile deitirilecektir. Gradient map kullanabilmek iin Image / Adjustments / Gradient Map seeneinden yararlanabilirsiniz. Karnza gradient map ayarlar geldii zaman siyah beyaz skalann hemen sandaki kk oka tklayn. Alan menden en alt sradaki ilk gkkua renkli skalay sein ve OK tuuna basn. Fotorafnz tam istediiniz ekilde deiecektir. Eer bu katmann bir kopyasn karr ve motion blur ya da benzeri dier efektleri uygularsanz da sadaki en son fotorafta grdnz gibi farkl etkiler de yakalayabilirsiniz.
Resimden Vektre Dnm

Bu ilem aslnda sanld kadar zor deildir. Bunun iin fotorafnz atktan sonra tek yapmanz gereken Filter / Artistics mens altnda yer alan Cutout seeneini kullanmak. Cutout penceresi karnza geldii zaman Number of Levels deerini 8, Edge Simplicity deerini 4 ve Edge Fidelity deerini de 2 olarak ayarlayp OK tuuna tklayn. te hepsi bu kadar. Resmin detaylarna gre ayarlar zerinde oynamanz gerekebilir.
8
>>
Photoshop Serisi
Gereki Damga
lk olarak damga olarak kullanmak istediiniz metni oluturun. Ardndan bunun hemen evresine 5 piksellik bir dikdrtgen izin. [Ctrl]+[E] ile katmanlar birletirebilirsiniz. Hemen ardndan Filter / Sketch / Torn Edges filtresini sadaki resimdeki ayarlar kullanarak uygulayn. Son olarak da damgaya gereki silik grntsn vermek iin %60 opacity deerinde ve 9 piksel kalnlnda bir silgi kullanarak rastgele silin.
Piksel sanat: Gecekondu

Hatrlarsanz daha nce kk bir duvar rnei ile piksel sanatnn nasl bir ey olduunu temel anlamda grmtk. imdi biraz daha ilerletip basit bir bina yapmaya alacaz. lk olarak 300x300 boyutunda bir belge oluturup arka plann da parlak yeil bir renk ile boyayn. Ardndan zum leini %1.600e getirin ve pencil aracn sein. n plan rengini siyah, fra boyutunu da 1 piksel olarak ayarlayn.
imdi yeni bir katman (layer) oluturun. Artk piksel binamz yapmaya balayabiliriz. Burada unutmamanz gereken izgi izerken ayn perspektifi korumak olmaldr. Yukar doru 1, yana doru 2 piksel ve kelerde de 3 piksel kullanmamz gerekir. Bylece en doru grnen izgiyi yaratabilirsiniz. Resimde de grebileceiniz gibi kk bir bina yapacamz iin tabann da kk izdik. imdi [Ctrl]+[J] tuuna basn.
Bu ekilde tabann kopyasn karm olduk. Binamza ykseklik katmak iin yeni katman bir miktar yukar almak yeterli olacaktr. Artk dik duvarlar izebilirsiniz. Eer sol duvarda alyorsanz tm dik izgileri sol taraftaki pikselden aa doru izmeye zen gsterin. Sa taraf iin de tabii ki bu durumun tam tersi geerli olacaktr. Bu ekilde perspektifi koruyabilirsiniz. Artk renklendirme ilemine balayabiliriz.
Daha nce de bahsettiimiz gibi doldurma ilemi srasnda her zaman setiimiz 3 renk tonundan en ak olan sol tarafa, en koyu olan sa tarafa ve orta rengi de st taraf iin kullanmaya dikkat edin. Kutudan ok eve benzemesi iin kap ve pencereleri de eklemeyi unutmayn. Glgelendirme iin ise hep ortaya bakan taraf kullann ve setiiniz renkten daha ak bir ton sein. En sadaki resmi rnek alabilirsiniz.
10
11
12

28 Subat

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

28 Subat

Uploaded by

Copyright:

Available Formats

Web Programcl

Sihirli men ve cookie adaptasyonu

160 CHIP Workshop > >

< CHIP Workshop 161 <

ve her bir sayfaya

162 CHIP Workshop > >

< CHIP Workshop 163 <

164 CHIP Workshop > >

Kaytl cookie deerini ziyareti bilgisayarndan okuyan fonksiyon

Numan Pekgz numanpekgoz@chip.com.tr

< CHIP Workshop 165 <

JAVA ile Programlama Blm 8

< CHIP Workshop 48 <

49 CHIP Workshop > >

bir exception yaratmaktayz:

Java'da Hata Mekanizmas

Hatann Ele Alnmas (Exception Handling)

Java'da Dosya lemlerine Giri

Dosyalar.java program kts

Sevgi ve Sayglarmla, Erman Ayka ermana@bilgi.edu.tr

Herkes iin Photoshop

Resimden Vektre Dnm

Piksel sanat: Gecekondu

< CHIP Workshop 40 <

You might also like