JavaScript ve HTML

Bu makale JavaScript ve HTML'yi açıklar.

YouTube Video

JavaScript'teki window Nesnesi

window nesnesi JavaScript'te tarayıcı ortamındaki global nesnedir ve web sayfası ile tarayıcı penceresiyle ilgili işlevler ve bilgiler sağlar. window, tarayıcının global kapsamı olduğundan, tarayıcıda çalışan tüm JavaScript kodu window nesnesinin bir parçası olur. window nesnesi, tarayıcı ortamında JavaScript çalıştırmada önemli bir rol oynar ve birçok API ve özellik sağlar.

window Nesnesinin Temel Özellikleri

Özellikler

 1// Get and display the document's title
 2console.log(window.document.title);
 3
 4// Get and display the current URL
 5console.log(window.location.href);
 6
 7// Go back to the previous page
 8window.history.back();
 9
10// Display the browser's user agent
11console.log(window.navigator.userAgent);
12
13// Display the width and height of the viewport
14console.log(`Width: ${window.innerWidth}, Height: ${window.innerHeight}`);

• window.document: Mevcut HTML dökümanına erişir.
• window.location: Mevcut URL'yi ve tarayıcı dolaşımını yönetir.
• window.history: Tarayıcının geçmiş bilgilerine erişir ve ileri-geri dolaşım sağlar.
• window.navigator: Tarayıcı ve cihaz hakkında bilgi sağlar.
• window.innerWidth / window.innerHeight: Görüntüleme alanının genişliği ve yüksekliğini alır.

Metotlar

 1// Show an alert
 2window.alert('Hello, this is an alert!');
 3
 4// Show a confirmation dialog
 5if (window.confirm('Are you sure you want to proceed?')) {
 6    console.log('User clicked OK');
 7} else {
 8    console.log('User clicked Cancel');
 9}
10
11// Show a prompt dialog
12const userInput = window.prompt('Please enter your name:');
13console.log(`Hello, ${userInput}!`);
14
15// Open a new tab
16window.open('https://www.example.com', '_blank');
17
18// Display a message after 3 seconds
19window.setTimeout(() => {
20    console.log('This message appears after 3 seconds!');
21}, 3000);
22
23// Display a message every second
24const intervalId = window.setInterval(() => {
25    console.log('This message appears every second!');
26}, 1000);
27
28// Clear the interval after 5 seconds
29setTimeout(() => {
30    clearInterval(intervalId);
31    console.log('Interval cleared.');
32}, 5000);

• window.alert(): Bir uyarı iletişim kutusu gösterir.
• window.confirm(): Kullanıcı onayı isteyen bir iletişim kutusu gösterir ve Tamam veya İptal sonucunu döndürür.
• window.prompt(): Kullanıcı girdisi isteyen bir iletişim kutusu gösterir ve girilen değeri alır.
• window.open(): Yeni bir pencere veya sekme açar.
• window.setTimeout() / window.setInterval(): Belirli bir süre sonra ya da düzenli aralıklarla bir fonksiyonu çalıştırmak için bir zamanlayıcı ayarlar.

Olay Yönetimi

 1// Display a message when the page is fully loaded
 2window.onload = () => {
 3    console.log('Page is fully loaded!');
 4};
 5
 6// Display a message when the window is resized
 7window.onresize = () => {
 8    console.log('Window resized! New size:', window.innerWidth, 'x', window.innerHeight);
 9};
10
11// Display a message when the page is being scrolled
12window.onscroll = () => {
13    console.log('Page is being scrolled!');
14};

• window.onload: Sayfa tamamen yüklendiğinde tetiklenen bir olay.
• window.onresize: Pencere boyutu değiştiğinde tetiklenen bir olay.
• window.onscroll: Kullanıcı sayfayı kaydırdığında tetiklenen bir olay.

Küresel Bir Değişken Olarak Rol

1var myVar = 10;
2console.log(window.myVar); // 10

• window nesnesi küresel değişkenleri ve fonksiyonları tutar. Başka bir deyişle, tanımlanan değişkenler ve fonksiyonlar otomatik olarak window'un özellikleri haline gelir.

JavaScript'te DOM Manipülasyonu

JavaScript DOM (Document Object Model) manipülasyonu, web sayfasındaki öğelerle dinamik olarak etkileşim kurmak için kullanılır. DOM, bir HTML belgesinin yapısını bir ağaç olarak temsil eder ve bu yapı, JavaScript kullanılarak değiştirilebilir, böylece sayfanın yapısı ve görüntüsü kontrol edilebilir.

DOM'un Temelleri

DOM, bir web sayfasının HTML'ini nesneler olarak ele alır ve öğelere ve özniteliklere erişim ve bunların değiştirilmesini sağlar. HTML belgesine erişmek için document nesnesini kullanın.

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <title>Example of DOM Manipulation</title>
 5  </head>
 6  <body>
 7    <div id="content">Hello, World!</div>
 8    <button id="changeText">Change Text</button>
 9  </body>
10</html>

DOM Öğelerini Alma

JavaScript'in, DOM'daki öğelere erişmek için bir dizi yöntemi vardır.

• document.getElementById(): Bir öğeyi id özelliğine göre alın
• document.getElementsByClassName(): Sınıf adına göre öğeleri alın (HTMLCollection)
• document.getElementsByTagName(): Etiket adına göre öğeleri alın (HTMLCollection)
• document.querySelector(): Bir CSS seçicisi kullanarak eşleşen ilk öğeyi alın
• document.querySelectorAll(): Bir CSS seçicisi kullanarak tüm eşleşen öğeleri alın (NodeList)

Örnek: getElementById ve querySelector

1const content = document.getElementById('content');
2console.log(content.textContent); // "Hello, World!"
3
4const button = document.querySelector('#changeText');

DOM Manipülasyonu

Alınan öğeler üzerinde çeşitli işlemler yapılabilir.

Metni Değiştirme

Bir öğenin metnini değiştirmek için textContent veya innerHTML kullanın.

• textContent: Bir öğenin metin içeriğini alın veya değiştirin. HTML etiketleri yorumlanmaz.
• innerHTML: Bir öğenin HTML içeriğini alın veya değiştirin. HTML etiketleri içeren dizeler de işlenir.

1content.textContent = 'Hello, world!';  // Change the text
2button.innerHTML = '<strong>Click to change</strong>';  // Change including HTML

Özellikleri Değiştirme

Element özelliklerini değiştirmek için setAttribute() ve getAttribute() kullanın.

1button.setAttribute('disabled', 'true');  // Disable the button
2const id = content.getAttribute('id');  // Get the "content"

CSS'yi Değiştirme

style özelliğini kullanarak CSS stillerini değiştirin.

1content.style.color = 'red';  // Change the text color to red
2content.style.fontSize = '20px';  // Change the font size

Sınıfları Yönetme

Bir elemente sınıf eklemek veya sınıfı kaldırmak için classList kullanın.

• add(): Bir sınıf ekler
• remove(): Bir sınıfı kaldırır
• toggle(): Bir sınıfın varlığına göre ekler veya kaldırır
• contains(): Bir sınıfın mevcut olup olmadığını kontrol eder

1content.classList.add('highlight');  // Add a class
2button.classList.toggle('active');   // Toggle a class

DOM Elemanlarını Oluşturma ve Silme

Yeni Elemanlar Oluşturma

Yeni bir eleman oluşturup DOM'a eklemek için document.createElement() kullanın.

1const newDiv = document.createElement('div');  // Create a new div element
2newDiv.textContent = 'This is a new element';
3document.body.appendChild(newDiv);  // Append to the body element

Ögeleri Silmek

Bir elemanı silmek için remove() yöntemini kullanın.

1newDiv.remove();  // Remove the created element

Olayları Eklemek

DOM manipülasyonunun bir parçası olarak, kullanıcı etkileşimlerine yanıt veren olay işlemleri ekleyebilirsiniz. Tıklamalar ve klavye etkileşimleri gibi olayları işlemek için addEventListener() kullanın.

1button.addEventListener('click', () => {
2    content.textContent = 'The text has been changed';
3});

Bu örnekte, bir düğmeye tıklamak #content elementinin metnini değiştirir.

DOM Ağacında Gezinme

Ebeveyn ve kardeş elemanlara erişmek için DOM'da gezinebilirsiniz.

• parentNode: Ebeveyn düğüme erişim
• childNodes: Alt düğümlere erişim (tüm türlerde)
• firstChild / lastChild: İlk/son alt eleman
• nextSibling / previousSibling: Bir sonraki/önceki kardeş eleman

1const parent = content.parentNode;  // Get the parent element
2const firstChild = parent.firstChild;  // Get the first child element
3console.log(firstChild);

Örnek: Bir Listeye Yeni Bir Öğe Ekleme

Bir listeye yeni bir öğe ekleme örneği burada.

 1<ul id="list">
 2  <li>Item 1</li>
 3  <li>Item 2</li>
 4</ul>
 5<button id="addItem">Add Item</button>
 6
 7<script>
 8    const list = document.getElementById('list');
 9    const addItemButton = document.getElementById('addItem');
10
11    addItemButton.addEventListener('click', () => {
12        const newItem = document.createElement('li');
13        newItem.textContent = 'New Item';
14        list.appendChild(newItem);
15    });
16</script>

Bu kodda, "Öğe Ekle" düğmesine tıklamak listeye yeni bir <li> öğesi ekler.

Özet

• JavaScript DOM manipülasyonu, bir HTML belgesindeki öğeleri almanıza, değiştirmenize, oluşturmanıza ve silmenize olanak tanır.
• getElementById() ve querySelector() gibi yöntemleri kullanarak öğeleri alabilirsiniz.
• Metni ve HTML'yi değiştirmek için textContent veya innerHTML kullanın ve özellikleri manipüle etmek için setAttribute() kullanın.
• Yeni öğeler oluşturmak için createElement() kullanın ve öğeleri silmek için remove() kullanın.
• Olay yönetimiyle kullanıcı eylemlerine yanıt veren etkileşimli web sayfaları oluşturabilirsiniz.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video