JavaScript ve HTML
Bu makale JavaScript ve HTML'yi açıklar.
YouTube Video
javascript-html-dom.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>JavaScript & HTML</title>
6 <style>
7 * {
8 box-sizing: border-box;
9 }
10
11 body {
12 margin: 0;
13 padding: 2em;
14 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
15 background-color: #f7f9fc;
16 color: #333;
17 line-height: 1.6;
18 }
19
20 .container {
21 max-width: 800px;
22 margin: 0 auto;
23 padding: 1em;
24 background-color: #ffffff;
25 border: 1px solid #ccc;
26 border-radius: 10px;
27 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
28 }
29
30 h1, h2 {
31 font-size: 1.5rem;
32 color: #007bff;
33 margin-top: 0.5em;
34 margin-bottom: 0.5em;
35 border-left: 5px solid #007bff;
36 padding-left: 0.6em;
37 background-color: #e9f2ff;
38 }
39
40 button {
41 display: block;
42 margin: 1em auto;
43 padding: 0.75em 1.5em;
44 font-size: 1rem;
45 background-color: #007bff;
46 color: white;
47 border: none;
48 border-radius: 6px;
49 cursor: pointer;
50 transition: background-color 0.3s ease;
51 }
52
53 button:hover {
54 background-color: #0056b3;
55 }
56
57 #output {
58 margin-top: 1em;
59 background-color: #1e1e1e;
60 color: #0f0;
61 padding: 1em;
62 border-radius: 8px;
63 min-height: 200px;
64 font-family: Consolas, monospace;
65 font-size: 0.95rem;
66 overflow-y: auto;
67 white-space: pre-wrap;
68 }
69
70 .highlight {
71 outline: 3px solid #ffc107; /* yellow border */
72 background-color: #fff8e1; /* soft yellow background */
73 transition: background-color 0.3s ease, outline 0.3s ease;
74 }
75
76 .active {
77 background-color: #28a745; /* green background */
78 color: #fff;
79 box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
80 transition: background-color 0.3s ease, box-shadow 0.3s ease;
81 }
82 </style>
83</head>
84<body>
85 <div class="container">
86 <h1>JavaScript Console</h1>
87 <button id="executeBtn">Execute</button>
88 <div id="output"></div>
89 </div>
90
91 <div class="container">
92 <h2>HTML Sample</h2>
93 <div id="content">Hello, World!</div>
94 <button id="changeText">Change Text</button>
95 </div>
96
97 <script>
98 // Override console.log to display messages in the #output element
99 (function () {
100 const originalLog = console.log;
101 console.log = function (...args) {
102 originalLog.apply(console, args);
103 const output = document.getElementById('output');
104 output.textContent += args.map(String).join(' ') + '\n';
105 };
106 })();
107
108 document.getElementById('executeBtn').addEventListener('click', () => {
109 // Prevent multiple loads
110 if (document.getElementById('externalScript')) return;
111
112 const script = document.createElement('script');
113 script.src = 'javascript-html-dom.js';
114 script.id = 'externalScript';
115 //script.onload = () => console.log('javascript-html-dom.js loaded and executed.');
116 //script.onerror = () => console.log('Failed to load javascript-html-dom.js.');
117 document.body.appendChild(script);
118 });
119 </script>
120</body>
121</html>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(`Title: ${window.document.title}`);
3
4// Get and display the current URL
5console.log(`URL: ${window.location.href}`);
6
7// Go back to the previous page
8// Note: this will navigate back in history, so be careful when running it
9console.log("Navigating back to the previous page...");
10window.history.back();
11
12// Display the browser's user agent
13console.log(`User Agent: ${window.navigator.userAgent}`);
14
15// Display the width and height of the viewport
16console.log(`Viewport Width: ${window.innerWidth}`);
17console.log(`Viewport 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: Bu olay, sayfa tamamen yüklendiğinde tetiklenir.window.onresize: Bu olay, pencere yeniden boyutlandırıldığında tetiklenir.window.onscroll: Bu olay, kullanıcı sayfayı kaydırdığında gerçekleşir.
Küresel Bir Değişken Olarak Rol
1var myVar = 10;
2console.log(window.myVar); // 10
windownesnesi küresel değişkenleri ve fonksiyonları tutar. Başka bir deyişle, tanımlanan değişkenler ve fonksiyonlar otomatik olarakwindow'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.
DOM Öğelerini Alma
JavaScript'in, DOM'daki öğelere erişmek için bir dizi yöntemi vardır.
document.getElementById(): Bir öğeyiidözniteliğine göre getirir.document.getElementsByClassName(): Sınıf adına göre öğeleri getirir.HTMLCollectiondöndürür.HTMLCollection, DOM'daki değişiklikleri gerçek zamanlı olarak yansıtan canlı bir koleksiyondur.document.getElementsByTagName(): Etiket adına göre öğeleri getirir.HTMLCollectiondöndürür.document.querySelector(): CSS seçicisi kullanarak eşleşen ilk öğeyi getirir.document.querySelectorAll(): CSS seçicisi kullanarak eşleşen tüm öğeleri getirir.NodeListdöndürür.NodeList, alındığı andaki durumu tutan statik bir koleksiyondur ve sonraki DOM değişikliklerini yansıtmaz.
Örnek: getElementById ve querySelector
1<div id="content">Hello, World!</div>
2<button id="changeText">Change Text</button>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"
3console.log(id);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 var olup olmadığına göre ekler veya kaldırır.contains(): Bir sınıfın var 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: Üst düğüme erişir.childNodes: Alt düğümlere erişir. Tüm türdeki düğümlere erişebilirsiniz; yalnızca HTML etiketleri gibi öğe düğümleri değil, aynı zamanda metin düğümleri ve yorum düğümleri de dahildir.firstChild/lastChild: İlk ve son alt öğeye erişir.nextSibling/previousSibling: Sonraki ve önceki kardeş öğelere erişir.
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// Get the container element where the HTML will be inserted
2const content = document.getElementById('content');
3
4// Create the <ul> element with id="list"
5const list = document.createElement('ul');
6list.id = 'list';
7
8// Add initial list items
9const item1 = document.createElement('li');
10item1.textContent = 'Item 1';
11list.appendChild(item1);
12
13const item2 = document.createElement('li');
14item2.textContent = 'Item 2';
15list.appendChild(item2);
16
17// Create the <button> element with id="addItem"
18const addItemButton = document.createElement('button');
19addItemButton.id = 'addItem';
20addItemButton.textContent = 'Add Item';
21
22// Append the list and button to the content container
23content.appendChild(list);
24content.appendChild(addItemButton);
25
26// Add event listener to the button
27addItemButton.addEventListener('click', () => {
28 const newItem = document.createElement('li');
29 newItem.textContent = 'New Item';
30 list.appendChild(newItem);
31});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()vequerySelector()gibi yöntemleri kullanarak öğeleri alabilirsiniz.- Metni ve HTML'yi değiştirmek için
textContentveyainnerHTMLkullanın ve özellikleri manipüle etmek içinsetAttribute()kullanın. - Yeni öğeler oluşturmak için
createElement()kullanın ve öğeleri silmek içinremove()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.