Ritim İstanbul A5 Blok No:46, D:112, 34846 Maltepe/İstanbul

JavaScript ile HTML sayfadaki kelimelere otomatik sınıf nasıl atanır?

Web geliştirme süreçlerinde, sayfaları daha düzenli hale getirme ve kullanıcı deneyimini geliştirme ihtiyacı sıkça karşımıza çıkar. Bu yazıda, JavaScript’in gücünü kullanarak HTML sayfasındaki kelimelere otomatik olarak sınıf atamanın nasıl yapılabileceğini adım adım inceleyeceğiz.

Modern web projeleri, kullanıcı deneyimini iyileştirmek ve içeriği daha etkili bir şekilde iletmek için HTML sayfalarındaki kelimeleri CSS ile stilize etmek ve vurgulamak için çeşitli tekniklere başvurur. Özellikle eğitim içerikli web projelerinde, anahtar kelimelerin veya önemli kavramların vurgulanması, öğrenme süreçlerini daha verimli hale getirmenin bir yolu olarak önemlidir. Ancak, büyük ve karmaşık bir web sitesinde bu işlemi her sayfa için manuel olarak yapmak zaman alıcı ve hata yapmaya açık bir süreç olabilir.

- ADT Çözümleri -
Yönetilen Hizmetler Görseli
Advanced Dynamics Teknoloji'de işletmeler için dış kaynaktan hizmet modeliyle Yönetilen Hizmetler çözümleri sunuyoruz.

İşte bu noktada JavaScript, web geliştiricilerin HTML sayfalarında otomatik sınıflandırma ve vurgulama işlemlerini kolaylaştıran güçlü bir araç haline gelir. JavaScript kullanarak, belirli kelimeleri veya öğeleri otomatik olarak seçebilir ve bu öğelere sınıflar ekleyebilirsiniz. Bu sayede, her bir sayfada aynı işlemi tekrar tekrar yapmak zorunda kalmadan kelimeleri vurgulayabilir veya özelleştirebilirsiniz. Bu, konsolide ve tutarlı bir görünüm ve işlevsellik sağlar, ayrıca geliştirme sürecini daha hızlı ve verimli hale getirir.

JavaScript’in dinamik özellikleri, kullanıcıların sayfanızdaki içeriği daha iyi anlamalarına ve daha rahat bir deneyim yaşamalarına yardımcı olabilir. Ayrıca, kullanıcıların dikkatini çekmek istediğiniz önemli bilgilere odaklanmalarına da olanak tanır. Özetle, JavaScript ile HTML sayfalardaki kelimeleri otomatik olarak sınıflandırmak, modern web geliştirmenin vazgeçilmez bir unsuru haline gelmiştir.

Otomatik sınıf atamanın amacı

Öncelikle, neden otomatik sınıf atamanın önemli olduğunu anlamak önemlidir. Büyük ve karmaşık HTML belgeleri içerisinde belirli kelimeleri veya öğeleri düzenlemek, tarayıcıda görünümü etkilemek ve işlevsellik eklemek için kritik bir işlemdir. Manuel olarak her öğeye sınıf eklemek veya düzenlemek zaman alıcı olabilir ve hatalara yol açabilir. İşte bu nedenle otomatik sınıf atama, geliştirme süreçlerini hızlandırmak ve daha yönetilebilir hale getirmek için önemlidir.

JavaScript ile otomatik sınıf atama

JavaScript kullanarak HTML sayfasındaki kelimelere otomatik sınıf atama işlemi oldukça basittir. İlk adım, belirli koşulları veya desenleri karşılayan kelimeleri veya öğeleri seçmektir. Ardından, bu seçilen kelimelere veya öğelere sınıf ekleyerek otomatik sınıf atama işlemini tamamlarsınız.

Örnek kod ve kullanım senaryoları

Yazınızda, JavaScript kullanarak HTML sayfasındaki kelimelere otomatik sınıf atamanın nasıl yapılabileceğini göstermek için örnek kodlar ve farklı kullanım senaryoları sunabilirsiniz. Örneğin, belirli bir kelimeyi içeren metin paragraflarına sınıf eklemek veya bir liste öğesini vurgulamak gibi senaryoları ele alabilirsiniz.

JavaScript

// HTML sayfasındaki tüm <p> elementlerini seç
let pElements = document.querySelectorAll("p");

// Her bir <p> elementi için bir döngü başlat
for (let p of pElements) {
  // Eğer <p> elementi "sentence-sample" classına sahipse
  if (p.classList.contains("sentence-sample")) {
    // <p> elementinin içeriğini al
    let pContent = p.innerHTML;
    // "gemeinsam" kelimesini arat ve bulunan her bir eşleşme için bir fonksiyon çalıştır
    pContent = pContent.replace(/Förderung/g, function(match) {
      // Eşleşen kelimelerin etrafına <span> tagları ekle ve "word-underline" classı ata
      return "<span class='word-underline'>" + match + "</span>";
    });
    // <p> elementinin içeriğini güncelle
    p.innerHTML = pContent;
  }
  // Eğer <p> elementi "sentence-translation" classına sahipse
  else if (p.classList.contains("sentence-translation")) {
    // <p> elementinin içeriğini al
    let pContent = p.innerHTML;
    // "birlikte" veya "beraber" kelimelerini arat ve bulunan her bir eşleşme için bir fonksiyon çalıştır
    pContent = pContent.replace(/(teşvik edilmesi|beraber|desteğe|teşvik)/gi, function(match) {
      // Eşleşen kelimelerin etrafına <span> tagları ekle ve "word-underline" classı ata
      return "<span class='word-underline'>" + match + "</span>";
    });
    // <p> elementinin içeriğini güncelle
    p.innerHTML = pContent;
  }
}

Öncelikle, JavaScript kodumuzu anlamak için ne yaptığını adım adım inceleyelim:

  1. document.querySelectorAll("p") kodu, HTML belgesindeki tüm <p> (paragraf) elementlerini seçer ve bunları pElements adlı bir diziye atar.
  2. Ardından, for döngüsü <p> elementlerini tek tek gezmeye başlar.
  3. Eğer bir <p> elementi sentence-sample sınıfını içeriyorsa, bu paragrafın içeriğini işlemeye başlarız. Bu paragrafların içinde “Förderung” kelimesini ararız ve her bulunan eşleşme için bir işlev çalıştırırız.
  4. Bu işlev, eşleşen kelimenin etrafına <span> etiketi ekler ve bu etikete “word-underline” sınıfını atar. Sonuç olarak, “Förderung” kelimesi altı çizgili hale gelir.
  5. Eğer bir <p> elementi sentence-translation sınıfını içeriyorsa, bu paragrafın içeriğini işlemeye başlarız. Bu paragrafların içinde “teşvik edilmesi”, “beraber”, “desteğe” veya “teşvik” gibi kelimeleri büyük/küçük harf farkı olmaksızın ararız ve her bulunan eşleşme için yine bir işlev çalıştırırız.
  6. Bu işlev, eşleşen kelimelerin etrafına <span> etiketi ekler ve bu etikete yine “word-underline” sınıfını atar.

Sonuç olarak, bu kod web sayfasındaki belirli kelimeleri vurgular ve bu kelimelerin altını çizer. Bu, belirli kelimelerin önemli olduğu veya dikkat çekmesi gerektiği metinleri vurgulamak veya özel bir şekilde işaretlemek istediğiniz durumlarda kullanışlı olabilir. Özellikle eğitim materyali veya öğrenme içerikleri gibi metinlerde kullanılabilir.

Bu tür bir kod, kullanıcıların belirli kelimeleri daha rahat bir şekilde görmelerine yardımcı olabilir ve web sayfanızın etkileşimliliğini artırabilir.

Sonuç

JavaScript ile HTML sayfasındaki kelimelere otomatik sınıf atama, web geliştirme süreçlerini daha verimli ve yönetilebilir hale getirebilir. Bu yazı, bu konsepti anlamak ve pratiğe dökmek için kullanabileceğiniz temel bilgileri ve örnek kodları içerecektir. Bu yöntemi kullanarak, web sayfalarınızı daha düzenli ve kullanıcı dostu hale getirebilirsiniz.

Moment.js nedir ve nasıl kullanılır?

JavaScript kütüphaneleri programlama sektöründe sıklıkla karşılaşılan sorunları çözmek ve otomatikleştirmek için geliştirilir. Popüler JavaScript kütüphanelerinden biri de Moment.js'tir. Peki Moment.js nedir ve programlama dünyasında...

JavaScript’te değişkenler ve aralarındaki farklar: var, let & const

JavaScript, web geliştirmenin temel taşlarından biri olarak, dinamik ve etkileşimli web siteleri oluşturmanın anahtarıdır. Bu güçlü programlama dilinin en temel yönlerinden biri, veri saklama...

Fiyat takip yazılımları nasıl çalışır?

E-ticaret dünyası her geçen gün daha rekabetçi bir hal alıyor. Bu ortamda, işletmelerin rakiplerini ve pazar trendlerini yakından takip etmeleri hayati önem taşıyor. İşte...

HTML div elementi ve kullanım senaryoları

Her gün milyonlarca web sayfasını ziyaret ediyor, okuyor veya üzerlerinde işlem yapıyoruz. Peki, son kullanıcılar için görsel olarak renderlanan bu sayfaların arkasındaki kodlarda kullanılan...

React ‘hook’ nedir ve ne için kullanılır?

React hook, React JavaScript kitaplığındaki bir özelliktir. Hook'lar, sınıf bileşenlerine ihtiyaç duymadan, fonksiyon bileşenlerinde durum (state) ve diğer React özelliklerini kullanmaya olanak tanır. İlk...

IPv4 ve IPv6 nedir? Aralarındaki farklar nelerdir?

Her gün internete bağlanıyoruz, ancak teknik olarak internete nasıl bağlandığımızla ilgili bir fikriniz var mı? İnternet, modern yaşamın ayrılmaz bir parçası haline geldi ve...

Daha fazla blog içerik

Moment.js nedir ve nasıl kullanılır?

JavaScript kütüphaneleri programlama sektöründe sıklıkla karşılaşılan sorunları çözmek ve otomatikleştirmek için geliştirilir. Popüler JavaScript kütüphanelerinden biri de Moment.js'tir. Peki Moment.js nedir ve programlama dünyasında...

JavaScript’te değişkenler ve aralarındaki farklar: var, let & const

JavaScript, web geliştirmenin temel taşlarından biri olarak, dinamik ve etkileşimli web siteleri oluşturmanın anahtarıdır. Bu güçlü programlama dilinin en temel yönlerinden biri, veri saklama...

Fiyat takip yazılımları nasıl çalışır?

E-ticaret dünyası her geçen gün daha rekabetçi bir hal alıyor. Bu ortamda, işletmelerin rakiplerini ve pazar trendlerini yakından takip etmeleri hayati önem taşıyor. İşte...

HTML div elementi ve kullanım senaryoları

Her gün milyonlarca web sayfasını ziyaret ediyor, okuyor veya üzerlerinde işlem yapıyoruz. Peki, son kullanıcılar için görsel olarak renderlanan bu sayfaların arkasındaki kodlarda kullanılan...