JavaScript ile kod ayrıştırması yapmanın önemi ve teknikleri üzerine bir makaledir Fonksiyonların, değişkenlerin ve event listenerların kullanımı ile kodun daha düzenli ve okunaklı hale getirilebileceği anlatılmaktadır Ayrıca, değişken tanımlama yöntemleri var, let, const ve global/yerel değişkenlerin farklarına da değinilmektedir Makalenin sonunda, bir ödev belirtilerek okuyucuların uygulama yapması teşvik edilmiştir

JavaScript, günümüzün en popüler programlama dillerinden biridir ve web uygulamalarının geliştirilmesinde oldukça yaygın olarak kullanılır. Ancak, büyük ve karmaşık kod dosyaları yazarken, kodların okunaklılığı ve düzeni önemlidir. Bu noktada, kodların ayrıştırılması ve daha küçük parçalara bölünmesi, kodun daha anlaşılır ve düzenli hale getirilmesine yardımcı olur. Bu makalede, JavaScript ile kod ayrıştırması yapmak için kullanılan teknikleri öğreneceksiniz.

1. Fonksiyonlar

JavaScript'te fonksiyonlar, kodun farklı parçalara ayrılmasını sağlayarak daha düzenli ve okunaklı hale getirir. Bir fonksiyon, belirli bir işlemi gerçekleştiren ve belirli bir değeri veya sonucu döndüren bir blok koddur. Bu sayede, aynı işlemi farklı yerlerde kullanmanız gerektiğinde, fonksiyonu tekrar tekrar yazmak yerine, sadece bir defa tanımlayabilir ve her seferinde fonksiyonu çağırdığınızda doğru sonucu alabilirsiniz.

Fonksiyonlar ayrıca, kodun yeniden kullanılabilirliği ve bakım kolaylığı açısından da büyük bir öneme sahiptir. Kodunuzdaki belirli bir işlevin gerektirdiği değişiklikleri yapmak istediğinizde, sadece fonksiyonu değiştirmeniz yeterlidir. Bu da programlama sürecinde büyük bir avantaj sağlar.

2. Değişkenler

Değişkenler, programlama dillerinde oldukça önemli bir yer tutar. JavaScript'te de değişkenler, tekrar eden işlemlerin daha az kod yazılarak yapılmasını sağlar. Bu sayede, kodun okunaklılığı ve düzeni artar. Aynı zamanda, değişkenler ile işlevi değiştirmek de daha kolay hale gelir. Örneğin, bir sayının belirli bir sayı ile çarpılması işleminde, belirtilen sayı değişken olarak tanımlanarak, hem kodun okunaklılığı artırılabilir hem de sayının farklı değerler ile çarpılması kolaylaştırılabilir.

2.1. Var, Let ve Const Değişkenleri

JavaScript'te değişken tanımlama yöntemleri arasında var, let ve const tercih edilir. Bu yöntemler, değişkenlerin nasıl kullanılabileceği konusunda farklı kısıtlamalara sahiptir. Var, kodun her yerinde kullanılabilirken let ve const daha yerel kullanım ihtiyaçlarına yöneliktir. Aynı zamanda, const ile tanımlanan değişkenler daha sonra değiştirilemezken let ve var değişkenleri değiştirilebilirdir. Kullanılan değişken tanımlama yöntemleri, kodun daha tutarlı ve anlaşılır olmasını sağlar.

2.1.1. Var Değişkenleri

Var değişkenleri, JavaScript kodlarında sıkça kullanılan bir değişken tanımlama yöntemidir. Bu yöntemle tanımlanan değişkenler, genellikle kodun en üstünde belirtilerek tüm kodun kullanımına açık hale getirilir. Bu sayede, değişkenin kullanıldığı herhangi bir noktada kodun düzenli ve anlaşılır olması sağlanır.

Bunun yanı sıra, var değişkenleri global değişkenlerdir. Yani değişken, kodun herhangi bir yerinde kullanılabilir. Bu özellik, var değişkenlerinin tüm kod tarafından erişilebilir ve manipüle edilebilir olmasını sağlar. Ancak, bu özellik aynı zamanda kodun düzenini de bozabilir ve hatalara neden olabilir. Bu sebeple, var değişkenleri kullanırken dikkatli olunmalı ve gerektiğinde yerel değişkenler kullanılmalıdır.

2.1.2. Let ve Const Değişkenleri

Let ve const değişkenleri, genellikle fonksiyonların içinde veya belirli bir blok kapsamındaki değişkenler için kullanılır. Let değişkenleri, değeri daha sonradan değiştirilebilen bir değişken tipidir. Const değişkenleri ise, değeri değişmeyen bir değişken tipidir. Let değişkeni, aynı isimde birden fazla kez kullanılabilirken const değişkeni, aynı isimde tekrar tanımlanamaz. Bu sayede kodun daha tutarlı ve anlaşılır olması sağlanır. Let ve const değişkenlerini kullanarak kodlar, daha kolay anlaşılabilir ve okunaklı hale getirilebilir.

2.2. Global ve Yerel Değişkenler

Global değişkenler, kodun herhangi bir yerinde tanımlanan ve herhangi bir yerde kullanılabilen değişkenlerdir. Bu değişkenler, kodun farklı bölümlerinde kullanılan bilgilerin kolayca erişilebilir olmasını sağlar. Yerel değişkenler ise sadece tanımlandıkları bölge içinde kullanılabilen değişkenlerdir. Bu değişkenler, sadece belirli bir kod bloğunda kullanılmak üzere tanımlanır ve bu bloktan çıktıktan sonra artık erişilemez hale gelirler. Yerel değişkenler genellikle kodun daha sıkı bir şekilde kontrol edilmesine ve belli bir işlevin yerine getirilmesine yardımcı olurlar.

3. Eventler

Eventler, JavaScript kodlarının farklı olaylar gerçekleştirdiğinde farklı şekillerde çalışmasını sağlayan yapılardır. Bu olaylar, kullanıcıların sayfadaki butonlara tıklaması, bir input alanına veri girilmesi veya sayfanın yüklenmesi gibi durumlar olabilir. Bu olayların gerçekleşmesi durumunda, JavaScript kodlarında belirli işlemler yapılabilir.

Eventler, öncelikle HTML elementlerine atanarak kullanılırlar. Örneğin, bir butonun üzerine mouse ile gelindiğinde çalışacak bir JavaScript fonksiyonu atanabilir. Bu işlem için "onmouseover" event'i kullanılabilir. Ayrıca bir butona tıklandığında çalışacak bir fonksiyon için "onclick" event'i kullanılabilir.

Bu event'ler genellikle Event listenerlar kullanılarak atanırlar. Event listenerlar, belirli bir HTML elementinin üzerine atanarak, bu elemente ait farklı event'lerin dinlenmesine olanak sağlarlar. Örneğin, bir butonun üzerine atanacak bir "click" event listener'ı sayesinde, o butona tıklanması durumunda belirli bir fonksiyon çalıştırılabilir.

3.1. Event Listenerlar

Event listenerlar, kodun belirli olaylar gerçekleştirdiğinde çalışacak fonksiyonları belirlememizi sağlar. Örneğin, bir butona tıklanması veya bir input alanının değiştirilmesi gibi durumlar event listenerlar sayesinde yakalanabilir.

addEventListener() fonksiyonu, bir elementin üzerine tıklanması veya klavyeden belirli bir tuşa basılması gibi olaylar gerçekleştiğinde çalışacak fonksiyonları belirleyebilir. Bu sayede daha dinamik ve etkileşimli web siteleri oluşturabiliriz.

Ayrıca, bir elementin üzerinde birden çok event listener kullanabiliriz. Örneğin, bir butona tıklanması ve üzerine mouse'un geldiğinde farklı işlemler yapmak istediğimizde, her bir event için farklı fonksiyonlar oluşturarak bu işlemi gerçekleştirebiliriz.

event.preventDefault() fonksiyonu, belirli bir eventin varsayılan davranışını engeller. Örneğin, bir form gönderildiğinde sayfanın yenilenmesini engellemek gibi.

Event listenerlar, kodumuzu daha modüler ve organize bir hale getirerek bakım ve geliştirme sürecini de kolaylaştırır.

3.1.1. AddEventListener()

AddEventListener() fonksiyonu, HTML elementleri üzerinde gerçekleştirilen herhangi bir olayda çalışacak fonksiyonları belirlemek için kullanılır. Bu fonksiyon, bir elemente tıklandığında, bir tuşa basıldığında veya bir form gönderildiğinde gibi birçok olayda kullanılabilir. Elementin hangi olayına yanıt verileceği, hangi elementin seçileceği ve hangi işlevin çalışacağı, AddEventListener() fonksiyonunun parametrelerine bağlıdır.

AddEventListener() fonksiyonu ile belirlenen fonksiyonlar, herhangi bir HTML elementinde çalıştırılabilen JavaScript kodlarıdır. Bu fonksiyon, kodun daha okunaklı ve sürdürülebilir olmasını sağlar. Böylece bir HTML elementinde gerçekleşen olaylarla ilgili tüm kodlar, daha ayrıntılı bir şekilde belirtilir ve kodun düzenliği artırılır. AddEventListener() fonksiyonu, HTML elementlerinde gerçekleştirilen herhangi bir olay için birden fazla fonksiyon belirlemek de mümkündür.

4. Sınıflar

Sınıflar, bir programda birden fazla benzer nesnenin bulunması durumunda kullanışlıdır. Sınıflar ile bu nesnelerin özellikleri ve işlevleri daha düzenli bir şekilde tanımlanabilir. Bu sayede programın daha okunaklı, anlaşılır ve geliştirilebilir hale gelmesi sağlanır.

Sınıfların tanımlanması için constructorlar kullanılır. Constructorlar, sınıfın özelliklerinin ve işlevlerinin nasıl tanımlanacağını belirlemektedir. Özellikler ve işlevler, this anahtar kelimesi kullanılarak tanımlanabilir.

Ayrıca, sınıfların ve nesnelerin özellikleri daha iyi anlaşılması için tablolar kullanılabilir. Örneğin, bir hayvan sınıfı için tabloda hayvanın türü, yaşam alanı, beslenme şekli gibi bilgiler sıralanabilir. Bu sayede, programın geliştirilmesi ve bakımı daha kolay olur.

4.1. Constructorlar

JavaScript’te sınıfların özellikleri ve işlevleri, ‘Constructor’ adı verilen özel bir fonksiyon kullanılarak tanımlanır. Constructor fonksiyonu, bir sınıfın özelliklerine ve işlevlerine değer atar ve sınıfın her bir örneği için bu özellikler ve işlevler geçerli olur. Constructorlar, yalnızca bir kez oluşturulduktan sonra class içinde birden çok kez kullanılabilir. Bu, sınıfın özellik ve işlevlerindeki değişikliklerin tüm örnekleri etkilemesini sağlar.

Constructorlar, this anahtar kelimesi kullanarak sınıfın özelliklerine erişir. Bu, sınıfın yeni örneği oluşturulduğunda her bir özelliğin özelleştirilmesine olanak tanır. Constructorlar ayrıca sınıfın işlevlerini de tanımlar. İşlevler, sınıfın özelliklerine erişebilir ve bu özellikler ile ilişkili işlemleri gerçekleştirebilir.

4.1.1. This Anahtar Kelimesi

This anahtar kelimesi, genellikle bir sınıfın içinde tanımlanan özelliklere erişmek için kullanılır. Constructor içinde de kullanılabilir ve bu durumda this anahtar kelimesi, o constructorun içinde tanımlanmış olan özelliklere erişmek için kullanılır. Örneğin, bir kitap nesnesi oluşturulurken kitap adı, yazarı ve sayfa sayısı gibi özellikler tanımlanır. Bu özelliklere erişmek için this anahtar kelimesi kullanılır. Örneğin:

class Kitap {  constructor(ad, yazar, sayfaSayisi) {    this.ad = ad;    this.yazar = yazar;    this.sayfaSayisi = sayfaSayisi;  }}

Yukarıdaki örnekte, this anahtar kelimesi, constructor içinde tanımlanmış olan ad, yazar ve sayfaSayisi özelliklerine erişmek için kullanılmıştır.