Yeni Başlayanlar için jQuery
Yeni Başlayanlar için jQuery
Yeni Başlayanlar için jQuery, CoddyKit'te ücretsiz bir jQuery Academy dersidir. Bu, 1 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, jQuery Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. jQuery Academy kursu toplamda 1 dersten oluşur.
Giriş
Merhaba,
Yeni Başlayanlar için jQuery kursuna hoş geldiniz.
Bu bölümde jQuery hakkında ayrıntılı bilgiler öğrenmeye başlayacağız.
Giriş 2
Bu kursa başlamadan önce,
aşağıdaki kursları almış olmanız ön koşuldur.
- HTML'e Giriş
- CSS'e Giriş
- JavaScript Temelleri
- Bu konular hakkında zaten bilgi sahibiyseniz kursa devam edebilirsiniz.
Başlayalım
Başlayalım.
Öncelikle jQuery'nin ne için kullanıldığı sorusunu yanıtlayalım.
Soruyu yanıtlamadan önce temellerimizi tekrarlayalım
Soruyu yanıtlamadan önce temellerimizi tekrarlayalım.
HTML bir işaretleme dilidir. Yani bir programlama dili değil, metin işaretleme dilidir. Nesne yönelimli programlama gibi kavramlardan oldukça uzaktır. Başka bir deyişle, yapısında nesne yoktur; bildiğimiz şeyler HTML etiketleri, öznitelikleri ve benzerleridir.
JavaScript DOM üzerinde işlemler gerçekleştirir
Web sayfalarındaki HTML öğeleri üzerinde işlem yapmamız gereken birçok durum vardır. Bunu sağlamak ve HTML öğelerine JS ile erişebilmek için, DOM (Belge Nesne Modeli) adı verilen bir model kullanırız.
JavaScript, web sayfasının nesne karşılığı olan DOM üzerinde işlemler gerçekleştirir. Buna DOM işleme denir.
Örnek
Bir örnek verelim.
Aşağıdaki örnekteki gibi bir düğme öğemiz var ve bu öğede 'Not Clicked' metni bulunuyor. Düğmeye tıkladığımızda, düğmenin metnini 'Clicked' olarak değiştireceğiz.
Bunu gerçekleştirmek için JavaScript diliyle DOM işlemesi yapmamız gerekir.
JavaScript'e Giriş kursumuzda, JavaScript kullanarak bir Web Belgesini nasıl yöneteceğimizi öğrendik. jQuery, JavaScript ile gerçekleştirdiğimiz DOM işlemesini daha kısa ve öz hâle getirmemizi sağlayan bir kitaplıktır.
<!--Initial Element -->
<button id="my-button">Not Clicked</button>
<!---Desired Element after clicking the button-->
<button id="my-button">Clicked</button>Soru
Sizin için bir soru!
Örnek 2
Aşağıdaki örnekte my-button kimliğine sahip bir düğme tanımladık.
Şimdi bu öğeye DOM aracılığıyla JavaScript kullanarak erişelim.
Düğmeye tıkladığımızda, JS koduyla DOM'a erişecek ve my-button kimliğine sahip öğenin innerHTML özelliğini click olarak değiştireceğiz.
<button id="my-button">
Not Clicked
</button>
<script>
let myButton = document.getElementById('my-button');
myButton.addEventListener("click",
function(){
myButton.innerHTML = "Clicked"
})
</script>Uyarı
jQuery, JS Core'daki işlevlerin ve yöntemlerin kullanımını kolaylaştırmak için ortaya çıkmış bir kitaplıktan başka bir şey değildir.
Başka bir deyişle, VanillaJS ile yapabildiğimiz birçok işlemi daha kolay bir söz dizimiyle ve daha okunaklı şekilde gerçekleştirmemizi sağlar.
Örnek Açıklaması
Kodu açıklayalım.
let myButton = document.getElementById('my-button');
JavaScript document nesnesini getElementById yöntemiyle myButton adlı değişkene atıyoruz.
myButton.addEventListener("click", function(){
myButton.innerHTML = "Clicked"
})
Daha sonra hem düğmenin click olayını dinledik hem de düğmede değişiklik yaptık.
Yukarıda native veya vanilla olarak adlandırılan, herhangi bir kitaplık ya da çerçeve kullanmadan dilin temel özelliklerinden yararlanarak DOM işlemesi yaptık.
Aynı kodu şimdi jQuery ile yazalım ve jQuery kitaplığının bize sunduğu özelliklerden yararlanalım.
Uyarı
Birçok yerde VanillaJS olarak ifade edilen kavram, aslında yalnızca JavaScript'in saf ve temiz çekirdek nesnelerini, methodlarını ve function'larını ve tarayıcının sunduğu olanakların kullanımını ifade eder.
jQuery Örneği
Aşağıda önceki örneğimizi jQuery kullanarak yaptık.
Söz dizimini göz ardı ederek kodu ne kadar kısalttığınıza dikkat edin.
<script>
$('#my-button').on('click', function(){
$(this).text('Clicked');
})
</script>
<button id="my-button">Not Clicked</button>Tebrikler
Tebrikler 🎉
Bu bölümde jQuery öğrenmeye başladık ve jQuery'nin hayatımızı ne kadar kolaylaştırabileceğini anladık.
Bir sonraki bölümde görüşmek üzere!
Sıkça Sorulan Sorular
“Yeni Başlayanlar için jQuery” dersi ücretsiz mi?
Evet — “Yeni Başlayanlar için jQuery” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve jQuery Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. jQuery Academy kursu toplamda 1 dersten oluşur.
“Yeni Başlayanlar için jQuery” dersinde ne öğreneceğim?
Yeni Başlayanlar için jQuery jQuery Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
jQuery Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te jQuery Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 1 dersinin 1. dersidir.
“Yeni Başlayanlar için jQuery” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu jQuery Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her jQuery Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.