Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan jQuery dersinin beşinci bölümüdür. Eğitmen, izleyicilere adım adım jQuery kullanımını göstermektedir.
- Video, jQuery kütüphanesinin indirilmesi ve HTML sayfasına eklenmesi ile başlayıp, temel jQuery işlemleri (paragrafların ve div'lerin renk değiştirme, yazı boyutunu ayarlama, CSS class'larını ekleme ve kaldırma) ile devam etmektedir. Daha sonra, tıklama olayları üzerine renk değişimi uygulaması ve jQuery kullanarak aç-kapa animasyonu içeren interaktif web sayfası geliştirme teknikleri gösterilmektedir.
- Videoda futbol takımlarına ait renkli kutucuklar oluşturma, tıklanan elemanın arka plan rengini alıp sayfanın arka plan ve yazı rengini bu renge ayarlama, başlıklara tıklandığında altındaki paragrafların animasyonlu bir şekilde açılması gibi pratik örnekler bulunmaktadır.
- 00:01jQuery Örneği Hazırlama
- jQuery dersinin beşinci videosunda örnekler yapılacak.
- jQuery kullanmak için jquery.com'dan indirilecek dosya iki versiyonu vardır: sıkıştırılmış ve sıkıştırılmamış.
- Sıkıştırılmamış versiyon daha okunaklıdır çünkü yorum satırları ve açıklama metinleri içerir.
- 03:32jQuery Kütüphanesinin Kullanımı
- jQuery kütüphanesi içinde hazır metotlar bulunur ve bu metotları kullanarak kısa yoldan işlemler yapılabilir.
- jQuery dosyası sayfaya eklenmelidir, genellikle head etiketi arasına yerleştirilir.
- jQuery sayfasında basit işler yapılabilir, örneğin renk değiştirme gibi.
- 06:22jQuery ile Renk Değiştirme
- jQuery ile renk değiştirme işlemi için $ işareti ile seçim yapılır ve css() metodu kullanılır.
- Renk değeri için internetten alınan renk kodları kullanılabilir.
- Renk değiştirme fonksiyonu bir tıklama olayı ile tetiklenebilir.
- 10:19CSS Özelliklerini Değiştirme
- jQuery ile yazı boyutu gibi CSS özellikleri değiştirilebilir.
- Birden fazla CSS özelliği aynı anda değiştirilebilir, süslü parantez içinde virgülle ayrılarak.
- CSS class'ları eklenebilir, örneğin "add class" metodu ile.
- 16:32Class İşlemleri
- jQuery ile class'lar eklenebilir, kaldırılabilir veya toggle edilebilir.
- "Add class" metodu class'ı ekler, "remove class" metodu kaldırır, "toggle class" metodu varsa kaldırır yoksa ekler.
- Class işlemleri, belirli bir elementin içeriğindeki elemanlar için de yapılabilir.
- 18:40Renk Değiştirme Uygulaması
- Farklı renklerdeki kutucuklar oluşturulup, her kutucuğa tıklandığında sayfa renkleri değişebilir.
- Kutucuklar için CSS özellikleri belirlenir ve her kutucuğa özel renkler verilir.
- Div elementlerine tıklama olayı eklemek için jQuery kullanılır ve sayfa yüklendiğinde otomatik olarak çalışacak fonksiyon yazılır.
- 26:29CSS Özelliklerini Alarak Tasarım Yapma
- CSS özelliklerini alarak arka plan rengi ve yazı rengini otomatik olarak ayarlamak için kodlar kullanılıyor.
- Tıklanan kutucuğun CSS özelliklerini alarak arka plan ve yazı rengini değiştirmek mümkün.
- Body'nin arka plan rengi ve yazı rengini otomatik olarak ayarlamak için CSS özellikleri kullanılıyor.
- 30:26Yeni Bir Sayfa Oluşturma
- Yeni bir sayfa açılarak HTML ve CSS kodları yazılıyor.
- Ana div içindeki başlıklar ve içerikler için tasarımlar yapılıyor.
- Div'lerin arka plan rengi, genişliği ve kenarlık özellikleri CSS ile belirleniyor.
- 37:31jQuery ile Animasyon Efektleri
- jQuery kullanılarak sayfa yüklendiğinde tüm paragrafların kapanması ve ilk elemanın açılması sağlanıyor.
- Başlıklara tıklandığında, tıklanan başlığın altındaki paragrafın açılması ve diğerlerinin kapanması için click olayı kullanılıyor.
- setTimeout fonksiyonu ile belirli bir süre bekleyerek animasyon efektleri uygulanıyor.
- 48:35Gelişmiş Fonksiyonel Özellikler
- Parametre göndermek için global değişkenler kullanılıyor.
- Yer tasarrufu sağlayarak küçük bir alanda çok fazla bilgi gösterme özelliği sunuluyor.
- Her beş saniyede bir içerik değişimi gibi gelişmiş özellikler eklenmesi öneriliyor.