JQUERY eğitim sitesine hoşgeldiniz.

JQUERY eğitim kodlarını bu sayfada bulabilirsiniz.

image01

HTML5

image02

CSS

image03

JQuery



HTML5 Nedir?

HTML5, HTML in en son çıkan sürümüdür, sürekli gelişen değişen web standartlarının bir yenisidir...

CSS3 Nedir?

Web sayfamızın hızlı yüklenmesini ve derli toplu görünmesini sağlamak amacıyla kullandığımız stillerdir...

JQUERY Nedir?

Flash'ın alternatifi olarak kullanılan bu teknoloji ile birçok işlem yapılmaktadır...




HTML5 Nedir?



HTML5 Nedir?

HTML5, HTML in en son çıkan sürümüdür, sürekli gelişen değişen web standartlarının bir yenisidir.

Şöyleki HTML de bazı şeyleri sürekli ek componentler yardımıyla yapıyorduk ve aynı zamanda gereksiz fazla kod yazıyorduk.

HTML5’te artık birçok şey daha az kod geliştirerek yapılabilmektedir.



HTML5 Ayrıcalıkları Nedir?

Başlıca özellikkleri Flash video oynatıcıların yerini video elementinin olması.

Aynı zamanda daha az kod geliştirilmesi, canvas tagıyla 2 boyutlu çizimlerin (javascript desteğiyle) kolaylıkla yapılabiliyor olması, input typelara eklenmiş ek özellikler (e-posta, tel, date, color...) HTML5’in HTML den başlıca farkları olarak ön plana çıkmaktadır. Bunlar gibi daha bir çok HTML5 etiketide mevcuttur daha sonraki derslerimizde bu taglarla ilgili örnekleriyle anlatmaya çalışacağız.

Ayrıca tüm platformlarda aynı şekilde çalışması da bir nevi tarayıcı bağımlılığını ortadan kaldıracak gibi.



HTML5 Nasıl Kullanılır?
Aşağıdaki kodu sayfanızın En üstüne ekleyerek HTML5 olarak kod yazmaya başlayabiliriz.




CSS Nedir?



CSS Nedir?

CSS bir kısaltmadır. "Cascading Style Sheets" kelimesinin baş harflerinden oluşur. Dilimizdeki anlamı: Basamaklı Stil Sayfası.

Web sayfamızın hızlı yüklenmesini ve derli toplu görünmesini sağlamak amacıyla kullandığımız stillerdir.

HTML dosyamızın daha anlaşılır olmasını sağlar. Stillerimiz tek bir dosyada toplanır ve kolaylıkla okunur - değiştirilir.

Stil dosyalarımızın uzantısı *.css dir. CSS Dosyası birçok stil barındırabilir.



CSS Nasıl Kullanılır?
CSS ile sayfamızı süslemek için sitemizdeki < head> < /head> tagları arasına aşağıdaki kodu eklemeniz gerekmektedir.




Faklı Yol olarak < head> < /head> tagları arasına aşağıdaki kodu eklerseniz CSS dosyamızı dışardan çağırmış oluruz.




JQUERY Nedir?



JQuery Nedir?

John Resig tarafından 2006 yılında geliştirilmiş bir açık kaynak javascript kütüphanesidir.

jQuery yoğun olarak animasyonlarda kullanılır. Flash'ın alternatifi olarak kullanılan bu teknoloji ile Flash galeri, Tab menü, Sayfa geçişleri gibi birçok işlem yapılmaktadır.

jQuery'nin resmi sitesinden jQuery dosyasını indirip web sitenize yükleyebilirsiniz. jQuery boyutu ufak ve işlevi çok olduğundan ayrıca hazır eklentileride çok olduğundan çok yaygındır. 2006 Yılından beri kullanılan jQuery 2012 yılına kadar inanılmaz bir kullanım artışı göstermiştir. Bugün dünyanın en büyük paylaşım sitesi Facebook jQuery teknolojisi de kullanmaktadır.

Jquery kütüphanesi kullanılarak geliştirilen jqueryui gibi daha gelişmiş arayüzleri ve araçları daha kolay kullanabilmemize imkan veren ek kütüphanelerde mevcuttur.



jQuery Nasıl Kullanılır?

Buradan jQuery dosyasını indirdikten sonra proje klasörünüze kopyaladığınızı varsayarak jQuery’i web projenize nasıl dahil edeceğinizi anlatmak istiyorum.

Aşağıdaki kodu sayfanızın < head> < / head> etiketleri arasına ekleyerek jQuery kütüphanesini projenize dahil edebilirsiniz.



JQuery Nasıl Öğrenirim?

jQuery öğrenmek isteyen birçok web geliştiricinin aklındaki asıl soru jQuery öğrenmeye nasıl başlayacağıdır.

jQuery yukarıda da bahsettiğim gibi bir JavaScript kütüphanesi olduğundan dolayı temel düzeyde de olsa JavaScript biliyor olmalısınız. Tabi buna ek olarak temel düzeyde HTML ve CSS bilgilerine de ihtiyacınız olacak.

Eğer okuduğunuzu anlayacak düzeyde ingilizce bilgisine sahipseniz Html, Css ve JavaScipt öğrenmek için w3schools.com‘u tavsiye ederim.




JQuery Çalışmaları

Sayfaya jQuery kütüphanesini ekleme

Bir çok yolla JQueryi web sitenize eklebilirsiniz. Örneğin

  • jQuery kütüphanesini jQuery.com dan indirip web sitenizde kullanarak
  • jQueryi CDN adresinden sitenize dahil ederek, örneğin Google gibi bir adresten.

  • Web Sitenize entegre edebilirsiniz:

    CDN olarak:

    Temel Kullanım

  • $ işağreti kodun jQuery kodu olduğunu tanımlar
  • (seçilen_öğe_adı) nın "üzerinde işlem yapılacak" HTML elemanı veya elemanlarını belirler.
  • jQuery eylem() seçilen eleman veya nesneler üzerinde uygulanacak eylem. Örneğin kaybolma, hareket etme, soluklaştırma gibi...



  • ÖRNEK : JQuery de dolar ($) işağreti en güçlü karakter yada semboldür. Bir $() şeklindeki fonksiyon normal olarak birbirini takip eden nesneler zincirine ait operasyonları döndürür.

  • class adı test olan DIVleri yakala
  • bu DIVler içerisine class adı quote olan P yani paragraf taglarını ekle
  • bu P tagları içerisine şu metni ekle "Yazımı Ekle"
  • ve bu DIVi ön tanımlı fonksiyon olan fadeOut ile işle
  • JQuery CSS Seçicileri

    BODY, TABLE, P, INPUT veya tekil kullanılan ID elemanı ve class name'ler.

    JQuery bir element ile gruplar halindeki elementleri ayırmak için CSS ile aynı erişim metodunu kullanır ve normalde bu CSS bagını sonucu için biz aynı kobinasyonu kullanırız.

  • Class name i note olan tüm P taglarını döndürmek için:


  • Tüm id si note olan P taglarını döndürmek için:


  • Tüm P taglarını döndürmek için:
  • JQuery Fonksiyon Yazma

  • JQuery'de fonksiyonlar oluşturup o fonksiyonları işlemlerde kullanmak için aşağıda görüldüğü gibi bir kod yazmalıyız.

  • "Getir" adında bir fonksiyon tanımlamak için function Getir(){ BU ALANA JQuery Kodlarımızı yazacağız }

    JQuery Buton tıklama olayı

  • Aşağıdaki program satırı Butona tıklandığında Ekrandaki Paragraf sayısını göstermektedir. onClick="Getir();
  • KOD UYGULAMA

    1. paragraf

    2. paragraf

    3. paragraf

    4. paragraf

    HTML Kodu Ekleme

  • Oluşturduğunuz DİV'in içerisine HTML kodu eklemek için .append kodunu kullanıyoruz
  • KOD UYGULAMA
    Resim Yüklenecek
    CSS ve HTML Kodu Ekleme
  • Oluşturduğunuz DİV'in içerisine CSS ve HTML kodu eklemek için .append kodunu kullanıyoruz

  • Kullanımı : .css({"komut":"değer","komut":"değer",...}); Kullanımı : .html( EKLENECEK HTML KODU);

    KOD UYGULAMA


    Tıklanınca Kırmızı ve yazının içeriğini alacak

    Değiştirici (Toggling) Olay (event)

  • JQueryde anahtar kolaylıkta. Eğer bir davranış alışkanlık yapıyorsa, buna bağlı bir komut mutlaka size yardım edecektir.

    Toggling (Değiştirici) elamanların stiline değiştirmek için çok elverişli.

  • KOD UYGULAMA



    Hakkımda


    Hakkımda

    Hakkımda bilgi kısmı buraya yazılacak. İsteğe bağlı