HTML'e Javascript Ekleme

HTML'ye <script> etiketi kullanarak Javascript eklemeyi, dosya oluşturmayı, fonksiyon tanımlamayı, event listener eklemeyi ve DOM manipülasyonunu öğrenin.

HTML'de <script> etiketi kullanma​

HTML'de &lt;script&gt; etiketi kullanarak Javascript dosyası eklemek oldukça kolaydır. &lt;script&gt; etiketi, HTML dosyasının içine yazılarak ya da başka bir dosya yoluyla çağrılarak kullanılabilir.
Javascript dosyası oluşturmak için, öncelikle bir metin düzenleyici kullanarak .js uzantılı bir dosya oluşturmalısınız. Ardından, &lt;script&gt; etiketini kullanarak HTML dosyasına bu dosyayı bağlayabilirsiniz.
Fonksiyon tanımlamak için, Javascript dosyasında function anahtar kelimesi kullanarak istediğiniz fonksiyonu oluşturabilirsiniz. Bu fonksiyonları daha sonra HTML dosyanızın içinde &lt;script&gt; etiketi içinde çağırabilirsiniz.
Event listener eklemek, kullanıcıların sayfada yapılan çeşitli etkinlikleri algılamasına ve bu etkinliklere tepki vermesine imkan sağlar. Bu özelliği kullanmak için, &lt;script&gt; etiketi içinde addEventListener metoduyla istediğiniz eventi belirleyebilirsiniz.
DOM manipülasyonu ise, HTML dokümanın yapısını değiştirmek ve içeriğini güncellemek için kullanılır. Javascript kodunuzun içinde, &lt;script&gt; etiketi ile DOM elemanlarına erişerek istediğiniz değişiklikleri yapabilirsiniz.

Javascript dosyası oluşturma​

Javascript dosyası oluşturma, HTML sayfanıza Javascript eklemenin en etkili yollarından biridir. Javascript dosyası oluşturmak, HTML dosyasından ayrı olarak Javascript kodlarını içeren bir dosya oluşturarak sayfanızın daha temiz ve yönetilebilir olmasını sağlar. Böylece, Javascript kodunuzu istediğiniz sayfada kullanarak tekrar tekrar aynı kodu yazmak zorunda kalmazsınız.
Javascript dosyası oluşturmak için, bir metin düzenleyici kullanarak yeni bir dosya oluşturabilirsiniz. Dosyayı oluşturduktan sonra, içine Javascript kodlarınızı yazabilir ve kaydedebilirsiniz. Bu dosyanın uzantısı genellikle .js olarak bilinir. Örneğin, script.js adında bir dosya oluşturarak içine Javascript kodlarınızı yazabilirsiniz.
Javascript dosyası oluşturmanın en büyük faydalarından biri, kodlarınızı modüler hale getirmenizi sağlamasıdır. Bu sayede, sayfalarınız arasında kod tekrarı yapmadan aynı Javascript kodlarını kullanabilirsiniz. Ayrıca, dosyanızın adını ve içeriğini kolayca değiştirerek, kodlar üzerinde kolay bakım yapabilirsiniz.
Javascript dosyası oluştururken dikkat etmeniz gereken bir diğer nokta da, bu dosyayı HTML sayfanıza nasıl bağlayacağınızdır. Oluşturduğunuz Javascript dosyasını HTML sayfanıza bağlamak için, HTML dosyasının etiketi içinde dosyanın yolunu belirtmeniz gerekmektedir. Böylece, HTML sayfanızın head veya body bölümünde, src niteliği ile oluşturduğunuz Javascript dosyasını ekleyebilirsiniz.

Fonksiyon tanımlama​

Fonksiyon Tanımlama


Fonksiyon tanımlama
HTML sayfalarına JavaScript eklemek, sitenizin işlevselliğini artırmanın harika bir yoludur. JavaScript kullanarak, web sayfalarınızda her türlü etkileşimi ve dinamizmi sağlayabilirsiniz. Bu yazıda, HTML sayfalarına JavaScript eklemek için kullanılan 'fonksiyon tanımlama' konusuna değineceğiz.
Fonksiyon tanımlama, JavaScript'in en temel yapı taşlarından biridir. Bir fonksiyon, belirli bir görevi yerine getiren kod bloklarını içeren bir JavaScript kod parçasıdır. Fonksiyonları tanımlamak için function anahtar kelimesi kullanılır. Örneğin;
&lt;script&gt;
function selamVer() {
&emsp;document.write(Merhaba Dünya!);
}
&lt;/script&gt;
Yukarıdaki örnekte, selamVer() adında bir fonksiyon tanımladık ve bu fonksiyon içinde document.write methodunu kullanarak Merhaba Dünya! yazısını sayfamıza bastırdık. Fonksiyonları tanımladık ve çağırdık, şimdi sıra sizde! Bu basit adımları izleyerek HTML sayfalarınıza JavaScript fonksiyonları ekleyebilir ve sitenizin etkileşimli özellikler kazanmasını sağlayabilirsiniz.

Event listener ekleme​

HTML'e Javascript Ekleme



Event listener ekleme

Event listener ekleme, web sayfalarında kullanıcı etkileşimlerini takip etmek ve işlemek için kullanılan bir Javascript özelliğidir. Bir olayın (event) gerçekleştiğinde, belirli bir DOM öğesine atanan bir event listener, o olayı algılar ve belirli bir işlevi (function) tetikler.

Event listener eklemek için addEventListener() metodunu kullanabiliriz. Bu metod, bir DOM öğesine belirli bir olayı dinlemek için bir event listener eklememize olanak sağlar. Örneğin, bir butona tıklandığında bir işlev çalıştırmak için aşağıdaki gibi bir event listener ekleyebiliriz:

document.getElementById('btn').addEventListener('click', function() {
alert('Butona tıklandı!');
});

Bu kod parçası, id'si 'btn' olan buton üzerine bir click event listener ekler ve butona tıklandığında ekrana Butona tıklandı! mesajı basar.

Event listener ekleme, web sayfalarını etkileşimli hale getirmenin önemli bir yoludur ve Javascript'in güçlü bir özelliğidir. Event listener'lar sayesinde kullanıcı etkileşimleri takip edilebilir ve istenilen işlemler gerçekleştirilebilir.

DOM manipülasyonu​

DOM manipülasyonu



DOM manipülasyonu

HTML dosyasındaki DOM manipülasyonu, Document Object Model'in (Belge Nesne Modeli) değiştirilmesini ve güncellenmesini içeren birçok farklı işlemi ifade eder. Bu, web sayfasındaki içeriğin dinamik olarak değiştirilmesine, eklenti veya widget'ların eklenmesine ve kaldırılmasına olanak tanır.

DOM manipülasyonu yaparken, genellikle bir elementin içeriğini değiştirme, yeni bir element ekleme, mevcut bir elementi kaldırma veya bir elemente yeni bir stil veya özellik ekleme gibi işlemler gerçekleştirilir.

Örneğin, bir web sayfasının başlığını değiştirmek için JavaScript kullanarak DOM manipülasyonu yapabilirsiniz. Ayrıca, kullanıcı bir düğmeye tıkladığında sayfadaki içeriği güncellemek veya yeni bir öğe eklemek de mümkündür.

DOM manipülasyonu yapmak için, JavaScript ile document nesnesini kullanarak belirli bir HTML elementi seçilir ve bu element üzerinde değişiklikler yapılır.

Özetle, DOM manipülasyonu, web sayfalarının dinamik ve etkileşimli olmasını sağlayan önemli bir işlemdir ve bu işlem sayesinde web sayfaları daha zengin ve kullanıcı dostu hale getirilebilir.