jQuery Academy · Ders

ES6+ Söz Dizimiyle Birlikte Kullanım

Çakışma yaşamadan jQuery kodunu ok işlevleri, const/let ve şablon dizeleri gibi modern JavaScript özellikleriyle birlikte nasıl yazacağınızı anlayın.

ES6+ Söz Dizimiyle Birlikte Kullanım, CoddyKit'te ücretsiz bir jQuery Academy dersidir. Bu, 3 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 3 dersten oluşur.

jQuery ve Modern JavaScript

Modern ES6+ JavaScript ile jQuery'yi birleştirmeye yönelik derse hoş geldiniz! Temiz, verimli ve bakımı kolay kodlar yazmak için bunların güçlü yönlerini nasıl bir araya getireceğinizi öğreneceksiniz.

Neden Modern JavaScript?

ES6+ (ECMAScript 2015 ve sonrası), const, let, ok işlevleri ve şablon dizeleri gibi güçlü özellikler sunar.

Kodun okunabilirliğini ve özlülüğünü artırırlar.
Yaygın programlama sorunlarını çözmek için yeni yollar sunarlar.
jQuery ile bütünleştirilmeleri geliştirme iş akışınızı iyileştirir.

Değişkenler İçin `const` ve `let`

var yerine yeniden atanmayacak değişkenler (örneğin bir jQuery öğe seçimi) için const, değişebilecek değişkenler için let kullanın. Bu, yanlışlıkla yeniden atamaları önler ve açıklığı artırır.

Düğmeye tıklamayı deneyin:

// Assume HTML: <div id="output"></div><button id="myBtn">Click Me</button>
const $outputDiv = $('#output');
const $myButton = $('#myBtn');

let counter = 0;

$myButton.on('click', () => {
  counter++;
  $outputDiv.text(`Button clicked ${counter} times.`);
});

Geri Çağrılarda Ok İşlevleri

Ok işlevleri, geri çağrılar için kısa bir söz dizimi sağlar ve this değerini çevredeki sözcüksel bağlama otomatik olarak bağlar. this değerinin DOM öğesinin kendisini belirtmesine gerek olmadığında bu genellikle kullanışlıdır.

appName değişkenine ne kadar kolay erişilebildiğine dikkat edin:

// Assume HTML: <button id="greetBtn">Greet</button><div id="greeting"></div>
const $greetButton = $('#greetBtn');
const $greetingDiv = $('#greeting');

const appName = "CoddyKit App";

$greetButton.on('click', () => {
  // 'this' here refers to the surrounding context (window), not the button
  $greetingDiv.text(`Hello from ${appName}!`);
});

HTML İçin Şablon Dizeleri

Şablon dizeleri (ters tırnaklar ` ` kullanılarak), özellikle değişkenler veya birden çok satırlı içerik eklerken, geleneksel dize birleştirmeye kıyasla dinamik dizeler oluşturmayı çok daha kolay hâle getirir.

Dinamik HTML'nin ne kadar kolay oluşturulduğunu görün:

// Assume HTML: <ul id="items"></ul>
const $itemsList = $('#items');
const userName = "Alice";
const itemCount = 3;

const listItemHtml = `
  <li>
    <b>User:</b> ${userName}
    <br>
    Items: ${itemCount}
  </li>
`;

$itemsList.append(listItemHtml);

Olay Nesnelerini Yapı Bozma

Olayları işlerken olay nesnesi birçok özellik içerir. ES6 yapı bozma özelliği, ihtiyacınız olan özellikleri doğrudan işlevin parametre listesinde ayıklamanıza olanak tanır ve kodunuzu daha temiz hâle getirir.

Olay ayrıntılarını görmek için tıklayın:

// Assume HTML: <button id="eventBtn">Log Target</button><div id="eventOutput"></div>
const $eventButton = $('#eventBtn');
const $eventOutput = $('#eventOutput');

$eventButton.on('click', ({ target, type }) => {
  // Destructured 'target' and 'type' from the event object
  $eventOutput.text(`Event: ${type}, Target ID: ${target.id}`);
});

`this` ve Ok Fonksiyonlarına Dikkat

Ok fonksiyonları çok kullanışlı olsa da kendi this bağlamlarına sahip olmadıklarını unutmayın. this ifadesinin olayı tetikleyen DOM öğesini göstermesi gerekiyorsa jQuery geri çağırmaları için hâlâ normal bir fonksiyon gerekir.

Farklı düğmelere tıkladığınızda çıktıyı inceleyin:

// Assume HTML: <button class="colorBtn" id="red">Red</button><button class="colorBtn" id="blue">Blue</button><div id="log"></div>
const $colorButtons = $('.colorBtn');
const $logDiv = $('#log');

$colorButtons.on('click', function() {
  // 'this' here refers to the clicked button element
  $logDiv.text(`Clicked button with ID: ${this.id}`);
});

// An arrow function here would bind 'this' to the global window

Birlikte Çalışabilirlik için `$.noConflict()`

$ sembolünü kullanan başka JavaScript kitaplıkları da kullanıyorsanız jQuery'nin $.noConflict() yöntemi kritik önem taşır. $ tanımlayıcısını serbest bırakarak bunun yerine jQuery kullanmanızı sağlar ve çakışmaları önler.

// Assume another library uses '$'
// jQuery is loaded first
$.noConflict();

// Now, '$' is free for another library
// Use 'jQuery' for jQuery methods
jQuery(document).ready(() => {
  jQuery('#status').text('jQuery is active with noConflict!');
});
// Assume HTML: <div id="status"></div>

En İyi Entegrasyon Uygulamaları

jQuery'yi modern JS ile etkili bir şekilde bütünleştirmek için:

Tutarlı Tanımlamalar: const ve let ifadelerini tutarlı şekilde kullanın.
Amaca Yönelik Ok Fonksiyonları: this bağlamının DOM öğesi olmadığı geri çağırmalarda ok fonksiyonlarını kullanın.
Şablon Değişmezleri: Dinamik HTML veya dizeler oluştururken bunlardan yararlanın.
jQuery'yi Kapsülleme: jQuery'ye özgü mantığı gruplayın ve saf ES6+ yardımcı fonksiyonlarından ayrı tutun.

Kısa Kontrol: ES6+ ve jQuery

Daha temiz ve modern kod yazmak için aşağıdaki ES6+ özelliklerinden hangileri jQuery ile etkili bir şekilde kullanılabilir?

Özet: jQuery'yi Modernleştirme

const/let, ok fonksiyonları, şablon değişmezleri ve yapı bozma gibi ES6+ özelliklerini jQuery ile sorunsuz şekilde nasıl bütünleştireceğinizi öğrendiniz.

Bu yaklaşım, jQuery'nin güçlü DOM değiştirme özelliklerinden yararlanmaya devam ederken daha kısa, okunabilir ve bakımı kolay JavaScript yazmanızı sağlar. Bu güçlü birleşimde ustalaşmak için pratik yapmayı sürdürün!

Sıkça Sorulan Sorular

“ES6+ Söz Dizimiyle Birlikte Kullanım” dersi ücretsiz mi?

Evet — “ES6+ Söz Dizimiyle Birlikte Kullanım” 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 3 dersten oluşur.

“ES6+ Söz Dizimiyle Birlikte Kullanım” dersinde ne öğreneceğim?

Çakışma yaşamadan jQuery kodunu ok işlevleri, const/let ve şablon dizeleri gibi modern JavaScript özellikleriyle birlikte nasıl yazacağınızı anlayın. 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, 3 dersinin 1. dersidir.

“ES6+ Söz Dizimiyle Birlikte Kullanım” 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.

Bu kursun tüm dersleri

ES6+ Söz Dizimiyle Birlikte Kullanım
Modül Ortamlarında jQuery
jQuery ile Modern Çerçeveleri Birleştirme

← jQuery Academy Sayfasına Dön