Category Archives: JavaScript

JavaScript ile Taş Kırmak Internet Semineri Notları

Geçmişte masaüstü uygulamaları ile başlayan süreç, günümüz de Web ve Mobile uygulamalar ile devam etmektedir. Oluşturulan uygulamaların, geliştirme süresinin ve bilinmesi gereken özel bilgilerin artmasın, gereksinimlerin çoğu zaman çözüm olmaktan çıkarak, problem olmasına sebep olmaktadır.

Zaman hızla ilerlemektedir. İnsanların istekleri ve hayalleri değişmektedir. Kullanıcıların yapmış oldukları taleplerin en hızlı ve en az maliyet ile çözümlenmesi büyük avantajlar sunmaktadır.

Günümüzde kullanılan uygulamaların çeşitliliğinin artması, kullanılan uygulamaların kolay ve hızlı geliştirebilir olmasına sebep olmaktadır. Gelişen teknoloji, özellikle Web uygulama geliştirme sürecinde yükü olarak görülen, JavaScript ve Html’in uygulama geliştirmenin merkezine gelmesine neden oldu.

JavaScript ve html’in uygulama geliştirme süreçlerinin merkezine gelmesinin en büyük sebebi, kolay ve hızlı öğrenilebilir,  uygulanabilir olmasıdır.

Teknolojik gelişmesinin anlaşılması ve örnek uygulamalar ile yeni bakış açıların kazandırılması amacı ile Yazgeliştir ekibi olarak, “JavaScript ile Taş Kırmak” isimli internet seminerini sizlere sunmuş bulunmaktayız. Internet seminerinde Jasminejs, backbonejs gibi JavaScript kütüphaneler anlatılarak, ASP.Net MVC ve Node.js teknolojileri ile uygulamalar geliştirilmiştir.

Konu ile ilgili sorularınızı info@ibrahimatay.org eposta adresine yöneltebilirsiniz.

İbrahim ATAY

jQuery ile ASP.NET Uygulamaları Geliştirme Internet Semineri Notları

Geçtiğimiz günlerde gerçekleştirmiş olduğum jQuery ile ASP.NET Uygulamaları Geliştirme internet seminerinde ASP.Net uygulamalarında JQuery kullanımı ve kolaylıklarından bahsetmeye çalışmıştım. Bu yazımla internet seminerinde kullananmış olduğum sunumu sizler ile paylaşmaktayım.

JQuery, Web tabanlı uygulamamalarında JavaScript kod yazımını en makul hale getiren bir araçtır. Eğer Web uygulaması geliştiriyor ya da bu konuda kendinizi geliştirmek istiyorsanız, eğitim listenize JQuery de koymayı unutmayın.

IBRAHIM ATAY

Teşekkürler

jQuery ve Mobil Web Uygulamaları Internet Semineri

Değişen kullanıcı istekler karşılık olarak, teknolojide gelişmeler devam ediyor. Artık insanlar her noktadan internette bağlanmak ve sosyal ağlardaki arkadaşları ile iletişim kurmak istiyorlar. Bu istekler ilk olarak taşınabilir bilgisayarlar, cep telefonları ve şuna da akılı cep telefonları ile cevap çözüm bulunmasına çalışılmıştır.


Yaklaşık iki yıldır, araştırdığım Mobile Web konusunu sizlere anlatmak istemekteyim. Bu çalışmamızda ASP.Net MVC ve popüler olarak kullanılan JavaScript araçlarında biri olan JQuery için hazırlanmış JQuery Mobile UI yapısını inceleyeceğiz.

jQuery ve Mobil Web Uygulamaları” Internet Seminerini 8 Şubat 2011 tarihinde saat 21.00 da katılabilirsiniz. Katılım dosyasını bağlantıdan edinebilirsiniz.

IBRAHIM ATAY 

Saygılarımla

Internet Explorer 9 ve Web Uygulamaları

image

Internet Explorer 9 daha beta olsa da ilk Beta sürümü ile kullanıcıları çok etkiledi. Özelliklede Windows 7 ile gelen bazı özelliklerin Web sayfalarında desteklemesi sağlaması çok büyük bir özellikle olarak görmekteyim. Internet Explorer 9 sürümü ile internet tarayıcıları içinde büyük bir parlama yaptığını söyleyebilirim. Geçtiğimiz günlerde yayınlana Beta sürümleri ile birçok Blog yazarı kendi ortamlarında Internet Explorer 9 özelliklerinde bahsetti ama ben bu özellikleri kendi geliştirdiğim uygulamalarda nasıl kullanabilirim sorunu aramaya başladım.

Geçenlerde Blog (htt://www.ibrahimatay.com) da bazı değişimlerde bulundum. Bu değişimlerin başında Internet Explorer 9 ile birlikte genle Jump ve Pinned eklem özelliğidir. Internet Explorer 9 yeniliklerini kaleme almadan önce kendi blog dahil 2 uygulamada kullandım. Kullanıcı tarafından dönen olumlu bildirimler beni mutlu etti.

Şimdi bu özelliklerin nasıl kullanacağımızı inceleyelim. Bu işlem için uygulamamızda kullanmak amacı ile uygun boyutlarda simgeler sahip olmamız gerekmektedir. Aşağıda kullanacağımız simgelerin boyutları ile ilgili bilgiler bulunmaktadır.

  • Önerilen boyutlar: 16×16, 32×32, 48×48
  • Normal boyutlar : 16×16, 24×24, 32×32, 64×64

Ben geliştireceğimiz uygulamamızda (kendi blog da) 48×48 simge seti kullanacağım. Gerekli boyutlarda simge setlerimizi hazırladıktan sonra ilk olarak Internet Explorer Jump özelliğini kullanacağımız Web sayfasının simgesini tanımlayalım. Bu tanımlama işlemi için aşağıdaki meta bildirimini(head etiketinin arasına) gerçekleştireceğiz.

<link rel="shortcut icon" href="/favicon.ico" type="image/vnd.microsoft.icon" />

Yukarıdaki tanımlama ile birlikte Web sayfamızın simgesini tanımladık. Tanımlana bu simge Internet Explorer üzerinde aşağıdaki gibi yerleşecektir.

image

Web sayfamızın simgesi tanımlamasını gerçekleştirdikten sonra adres çubuğundaki simgeyi Windows 7 de bulunan görev çubuğuna sürükleyelim ve sabitleyelim.

Web sayfamızı Internet Explorer tanımlamalarını yapmaya devam edebilim. Bu aşamada ise Web uygulamamızı ismini Internet Explorer tanımlayalım. Bu tanımlama Internet Explorer Jump listesinde Web sayamızın görmek için kullanacaktır.

<meta name="application-name" content="Ibrahim ATAY’s Blog" />

Windows 7 de görev çubuğun üzerine gelindiğin, görev çubuğunda bulunan uygulamanın adı ya da herhangi bir bilgi yazısı çıkmaktadır. Şimdi bu işlemi Internet Explorer 9 ile gerçekleştirdiğimizi inceleyelim.

<meta name="msapplication-tooltip" content="Ibrahim ATAY’s Blog" />

image

Bir sonra ki adım olarak Web uygulamamızda nasıl Task listesi oluşturabileceğimizi inceleyelim. Bu tanımlama işlemini yapmadan önce Web uygulamamız başlangıç adresin(url bilgisini) tanımlamamız gerekmektedir. Bu tanımlama işlemi için aşağıdaki meta bildirimini kullanacağız.

<meta name="msapplication-starturl" content="./" />

Windows tabanında WPFile uygulama geliştirme yapara iken kullanılan bu özellikler zaman zaman bir Web geliştiricisi olarak çok fazla ilgisini çekmekte. Windows 7ile WPFuygulama geliştir iken diğer bir güzel özellik ise görev çubuğu üzerinde yer alan simgelere sayesinde görevler tanımlama gelmektedir. Şimdi bu işlemi bir Web uygulamasında nasıl gerçekleştireceğimizi inceleyelim.

<meta name="msapplication-task" content="name=Complete Archives;action-uri=/Archives.aspx;icon-uri=/pics/archives.ico" />

image

Yukarıdaki resimde işaretli olduğu gibi Web gülüğümün Archile bölümü için yukarıdaki tanımlamayı yapmış bulunmaktayım. Aşağıdaki tabloda, yukarıdaki tanımlamada kullanılan parametreleri açıklamaktayım.

Parametre

Açıklaması

Name

Görev listesin görünecek olan isimi

action-uri

Görev listesinde bulunan simgeye tıklandıktan sonra yönleneceğin sayfa adesinidir.

icon-uri

Görev listesinde görünecek olan simge adresi

Not: Internet Explorer Jump ve Task yenilikleri ile ilgili daha detaylı bilgiler için bağlantıda bulunan msdn kaynağının incelemenizi tavsiye etmekteyim.

image

Kendi blog temel alarak gerçekleştirmiş olduğumuz örnek gerçekleştirmek istediğinizde yukarıdaki resimdeki gibi olacaktır. Bu yazımda Internet Explorer 9 yenilikleri olan Jump ve Task özelliklerine değinmeye çalıştım. Konu ile ilgili sorularınızı info@ibrahimatay.org eposta adresine gönderebilirsiniz.

İyi çalışmalar

IBRAHIM ATAY

JavaScript de Tarayıcı Nesneleri

Navigator nesnesin özellikleri :

AppName    : tarayıcın adını verir.
AppVersion : tarayıcının versiyonu verir

Örnek:

<html>

   <head>

    <script>

         document.write("versiyon :"+navigator.appVersion+"ad :"+navigator.appName);

    </script>

   </head>

  </html>

 

naraycnesleri1_thumb5

window nesnesi özellikleri:

Alert : mesaj vermek için kullanır.

Close : pencere kapatmak için

Confirm : kullanıcıdan onay almak için kullanır.

Open(url,isim,özellik) : verilen isimde sayfa acar ve verilen url deki web sayfasını yükler

Örnek:Pencere açma Örneği

<html>

   <head>

      <script>

          var pencere=window.open("","pencere","toolbar=1");

    </script>

  </head>

</html>

 

windows_thumb2

 Open Metodun özellikleri

Toolbar : tarayıcın araç çubuğun belirler

Menubar : tarayıcı menü çubuğunu belirler

Scrollbar : kaydırma çubuğu belirler

Resizable : açılan pencerenin boyutlandırmasına yarar

width : pencere genişlik

Height : yükseklik

Örnek:Navigator ve Pencere Açma Örneği

<html>
<head>
   <script>
    function pencere()
    {
      if(navigator.appName=="Microsoft Internet Explorer"){
         window.open("ie.html","pencere","width=100,Height=100");
      }
      else if(navigator.appName=="Netscape"){
          window.open("fix.html","pencere","width=100,Height=100");
      }
    }
   </script>
</head>
<body onload="pencere()">
</body>
</html>

ÖRNEK:Pencere Açma ve Açlan Pencere de Çalışma Örneği

<html>
<head>
   <script>
    function msg(){
     alert("merhaba");
    }
    function onay(){
    var cevap=confirm("Pencere acmak istiyor musunuz ??");
    if(cevap==true){
      var pencere;   
      pencere= window.open("","Pencere","width=100,Height=100");
      pencere.document.write("<p><input type=submit value="Tiklasana" onclick="msg()"/></p>"
      pencere.document.write("merhaba");
    }
    else{
      alert("False");
    }
   }
   </script>
</head>
<body onload="onay()">
</body>
</html>

Örnek:Prompt Örneği

<html>
<head>
   <script>
    var deger=prompt("Deger Giriniz..");
    document.write(deger);
   </script>
</head>
<body>
</body>
</html>