Category Archives: JQuery

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 ile ASP.NET Uygulamaları Geliştirme Internet Semineri

Web uygulaması geliştiren kişilerin, bazı temel dilleri(Html, CSS ve JavaScript) bilmesi gerekmektedir. Bilinmesi gereken dillerden biri de JavaScript’ dir. JavaScript ile örneklerini birçok yerde gördüğümüz, kullanıcı etkileşimli Web uygulamaları hazırlanabilmektedir.

JQuery_logo_color_onwhite

Yapmaya çalıştığımız bu gibi çalışmalarda JavaScirpt kod yığınları ile uğraşmaktayız. Bu geliştirmeleri yaparken, tarayıcı uyumluğunda unutmamamız gereken noktaların başında gelmektedir. İşte bu gibi durumlarda, işlerimizi kolaylaştıran JavaScript kütüphaneleri imdadımıza koşmaktadır. Uygulamalarımızda kullandığımız en popüler JavaScirpt kütüphanesi ise JQuery’ dir.

 JQuery açık kaynak olarak devam etmekte olan bir projedir. JQuery ‘ yi bağlantıdaki adresten edinebilirsiniz.

internet seminerinde JQuery ve ASP.Net WeForm, MVC uygulamalarımızda nasıl kullanabileceğimiz konusunda bilgiler vermeye çalışacağız.

Temel Seminer içeriği

  • Neden JQuery ve benzeri kütüphaneler kullanmalıyız.
  • JQuery Alternatifleri nelerdir?
  • Sizzle nedir?
  • Temel bilinmesi gereken başlıklar
  • Temel seçiciler
  • CSS işlemleri
  • Animasyon
  • AJAX(ASP.Net & ASP.Net MVC)
  • Uygulamalarımız zenginleştirecek JQuery eklentileri

jQuery ile ASP.NET Uygulamaları Geliştirme” Internet Semineri 8 mart salı saat 21.00 da başlayacaktır. Katılım ile ilgili bilgileri aşağıdaki bağlantıdan edinebilirsiniz.

Katılım bağlantısı / http://nedirtv.com/webiner/38

Not: İnternet seminerine katılmak için kullanacağınız Live Meeting aracı ile ilgili bilgileri bağlantıdaki görseli izleyerek çözebilirsiniz.

 

jQuery ve Mobil Web Uygulamaları Internet Semineri Notları

Geçtiğimiz tarihlerde gerçekleştirmiş olduğum jQuery ve Mobil Web Uygulamaları internet Seminerinde Mobile Web konusunu incelemeye çalıştık. Seminerinde ASP.Net MVC ve JQuery araçlarını kullanarak Mobile Web uygulamaları konusunda bilgiler vermeye çalıştık.

İçerisinde bulunduğumuz Mobile Çılgınlık diyebileceğimiz dönemde, Web geliştiricisi olarak Mobile Web uygulamaları geliştirebilmekteyiz. Mobile Web uygulamaları sayesinde, internet ortamında kullanan mobile cihazlar ile sunmak istediğimiz ürün ya da bilgileri her yerden erişebiliriz. (Dünya’ ya her yerden ulaş… )

 

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

JQuery Öğreniyorum – 5(Style Shreet – CSS )

JQuery makale serimin, 5 bölümünde JQuery ile web sayfalarımıza can veren css nasıl kontrol edebileceğimizi inceleyeceğiz. Söz konusu konuda JQuery de seçme işlemlerini bilmek çok büyük önem taşımaktadır. Bu nedenle bu konuda eksiği var olduğunu düşünüyor iseniz seçiciler ile ilgili yazımı inceleye bilirsiniz.

JQuery ile css yönetimi yazımızda ilk olarak, seçmiş olduğumuz html elemanında hazırladığımız css class ekleme işlemini görelim.

<html>
  <head>
    <script type=”text/javascript” src=”jquery-1.2.6.pack.js”></script>
    <style type=”text/css”>
      .news{
         Color:Red;
      }
    </style>
    <script type=”text/javascript”>
      $(function(){
         $(“p”).addClass(“news”);
        });
    </script>
  </head>
  <body>
   <p>JQuery Css işlemleri yazısı hazırlandı…</p> 
  </body>
</html>

Yukarıdaki örneğimizde “p” html elemanına dinamik olara news css class eklemiş olduk.

Not: Burada seçilerde olduğu gibi “,” ile ayrım şeklinde birden fazla Class atayamıyoruz. Ama şu şekilde bir kullanımda bulunabiliyoruz; 

$(“p”).addClass(“news”).addClass(“itl”);

<html>
  <head>
    <script type=”text/javascript” src=”jquery-1.2.6.pack.js”></script>
    <style type=”text/css”>
      .news{
         Color:Red;
      }
      .itl{
          font-style:italic;
      }
    </style>
    <script type=”text/javascript”>
      $(function(){
         $(“p”).addClass(“news”).addClass(“itl”);
      });
    </script>
  </head>
  <body>
   <p>JQuery Css işlemleri yazısı hazırlandı…</p> 
  </body>
</html>

Not da belirdiğim gibi html elemanlarına dinamik olarak class eklemek için ayrı ayrı fonksiyonlar kullanmamız gerekmektedir.

Class ekleme senaryosunu işledikten sonra karşı senaryo olarak dinamik olarak nasıl kaldıracağımızı inceleyelim.

<html>
  <head>
    <script type=”text/javascript” src=”jquery-1.2.6.pack.js”></script>
    <style type=”text/css”>
      .news{
         Color:Red;
      }
    </style>
    <script type=”text/javascript”>
      function ClassRemove(){
         $(“p”).removeClass(“news”);
      }
    </script>
  </head>
  <body>
   <p class=”news”>JQuery Css işlemleri yazısı hazırlandı…</p> 
   <input type=”submit” onclick=”ClassRemove()” value=”Class remove et..”/>
  </body>
</html>

Yukarıdaki örnekte “p” html elemanına static olarak atamış olana .news class butona basıldığında ClassRemove() fonksiyonu çalıştırarak tanımlanmış olan özelliği kaldırmış olduk.

JQuery ile Css yönetimi konusunda class ekle ve çıkarma dışında konu ile ilgili olarak bazı hazır fonksiyonlarda bulunmaktadır. Şimdi fonksiyonları inceleyerek konuya daha iyi hakim olaya çalışalım.

.width()

alert($(document).width());

Örnekte documnet nesnesini uzunluğu alert(mesaj) fonksiyonu ile öğrenmiş olduk.

.height()

Bu fonksiyon bir önceki fonksiyonla aynı şekilde kullanır tek fark olarak, seçili olan nesnenin yüksekliğini vermeyi amaçlanmaktadır.

alert($(document).height());

.position()

Position fonksiyon, isimden de anlaşılacağı gibi; nesnenin top ve left koordinatlarımı veren bir fonksiyondur.

<html>
   <head>

      <script src=”jquery.js”></script>

     <style>

          p { margin-left:10px; }

    </style>

   <script type=”text/javascript”>
          alert(“Left : “+$(“p”).position().left+” “+”Top : “+$(“p”).position().top);

   </script>

</head>

<body>
      <p> JQuery Öğreniyorum – www.ibrahimatay.com </p>

</body>

</html>

css()

Bu fonksiyon ile seçim yapılmış olan html elemanı kendimizi css kullanarak istediğimiz gibi atama yapmamızı sağlamaktadır(Özellikle effekler konusunda detaylı olarak incelyeceğiz.).

  <html>
  <head>
    <script src=”jquery.js”></script>
         <script type=”text/javascript”>
          $(function(){
             $(“p”).css(“display”,”none”);
        });
   </script>

  </head>
<body>
   <p> JQuery Öğreniyorum – www.ibrahimatay.com </p>
</body>
</html>

Yukarıdaki örnekte css de bulunan “display” özelliğini “none” yaparak seçili olana html elemanın gizlemiş olduk.

Not: Css konusunda yeterli bilginiz olmadığınız düşünüyor iseniz.w3school ya da Türkçe ve e kitap olan Sayın Fatih HAYRİOĞLU ‘ nu hazırlamış olduğu e kitabı inceleyebilirsiniz.

Serimin bu bölümden JQuery ile uygulama geliştirme esnasında en çok kullanış olduğumuz css yönetim fonksiyonlarını incelemiş olduk. Konu ile ilgili sorularınızı iletişim bölümünde sorabilirsiniz.

Herkese kolay gelsin.

IBRAHIM ATAY

Kaynaklar

http://api.jquery.com/css/
http://www.fatihhayrioglu.com/kitap/
http://www.w3schools.com/css/default.asp