JavaScript nedir? Yeni Başlayanlar İçin JS’ye Temel Bir Giriş

42

JavaScript , yirmi yılı aşkın geçmişi ile dünyanın en popüler programlama dillerinden biridir. Ayrıca web geliştiricileri için üç ana dilden biridir:

  1. HTML : Bir web sayfasına içerik eklemenizi sağlar.
  2. CSS : Web sayfalarının düzenini, stilini, hizalamasını belirtir.
  3. JavaScript: Web sayfalarının davranış biçimini geliştirir.

JavaScript, hızlı ve kolay bir şekilde öğrenilebilir ve bir web sitesinin işlevselliğini artırmaktan oyun ve web tabanlı yazılımlara kadar çok çeşitli amaçlar için kullanılabilir. Daha da iyisi, Github gibi siteler sayesinde binlerce JavaScript şablonu ve uygulaması ücretsiz olarak kullanılabilirsiniz.

Dünden Bugüne JavaScript

JavaScript, Netscape çalışanı Brandan Eich tarafından Eylül 1995’te on günlük bir süre zarfında oluşturuldu. Başlangıçta Mocha olarak adlandırılan dilin adı, daha sonra JavaScript olarak bilinmeden önce Mona ve LiveScript olarak değiştirildi. Dilin ilk sürümleri yalnızca Netscape ile sınırlıydı. Ancak onunla çalışmaya devam eden geliştiriciler topluluğu sayesinde zamanla büyümeye devam etti.

1996’da JavaScript’e resmen ECMAScript adı verildi, ECMAScript 2 1998’de çıktı ve ECMAScript 3 1999’da izlendi. Bu, günümüzde sadece farklı tarayıcılarda değil, aynı zamanda cep telefonları ve masaüstü de dahil olmak üzere farklı cihazlarda çalışan JavaScript’e dönüştü.

JavaScript o zamandan beri, web sitelerinin% 92’sinin JavaScript kullandıklarını belirtmek isterim. Sadece yirmi yıl içinde ilkel bir programlama dilinden bir web geliştiricisine geçti. İnterneti kullanan kişilerin hemen hemen hepsi JavaScript ile de karşılaşmışdır.

JavaScript’i harika yapan nedir?

JavaScript’in, özellikle belirli kullanım durumlarında, rakiplerinden daha iyi bir seçim olmasını sağlayan bir takım avantajları vardır. JavaScript kullanmanın yararlarından sadece birkaçı:

  1. Web tarayıcıları HTML ile yorumladığından derleyiciye ihtiyacınız yoktur;
  2. Öğrenmek diğer programlama dillerinden daha kolaydır;
  3. Hataların tespit edilmesi ve dolayısıyla düzeltilmesi daha kolaydır;
  4. Belirli web sayfası öğelerine veya tıklamalar veya fareyle üzerine gelme gibi belirli etkinliklere atanabilir;
  5. JS, birden fazla tarayıcıda, platformda vb.
  6. Girişleri doğrulamak ve manuel veri kontrolü gereksinimini azaltmak için JavaScript’i kullanabilirsiniz;
  7. Web sitelerini daha etkileşimli hale getirir ve ziyaretçilerin ilgisini çeker;
  8. Diğer programlama dillerinden daha hızlı ve daha hafiftir.
    * Kaynak kodu bilgisayarın anlayabileceği makine diline çeviren programa derleyici denir.

JavaScript’in zayıf yönleri nelerdir?

Aklınıza gelebilecek her programlama dilinde zayıflıklar vardır. JavaScript popüler hale geldiğinde, bilgisayar korsanlarının, dolandırıcıların ve diğer kötü niyetli üçüncü tarafların dan boşluklar ve güvenlik kusurları bulunmaya çalışılmıştır. Bulunan bazı zayıflıklar şunlardır;

  1. Saldırılara karşı savunmasız;
  2. Kullanıcının bilgisayarında kötü amaçlı kod yürütmek için kullanılabilir;
  3. Farklı tarayıcılar ve cihazlar tarafından her zaman desteklenmeyebilir;
  4. JS kod parçacıkları oldukça uzundur;
  5. Tutarsızlığa yol açar; farklı cihazlarda farklı şekilde görüntüler elde edilebilir.

Web sitenizde JavaScript nasıl çalışır?

JavaScript genellikle doğrudan bir web sayfasına yerleştirilir veya ayrı bir .js dosyası aracılığıyla başvurulur. İstemci taraflı bir dildir; bu, komut dosyasının ziyaretçilerin makinelerine indirildiği ve dosyaları ziyaretçilere göndermeden önce bir sunucu tarafından işlendiği anlamına gelir.

Çoğu web tarayıcısının kullanıcılarına JavaScript’i devre dışı bırakma olanağı sunduğunu unutmayın. Kodlarınızı oluştururken bu durumu göz ardı etmeyiniz.

JavaScript’in diğer programlama dillerinden farkı nedir?

JavaScript’in en popüler programlama dillerinden biri olmasının nedeni, çok yönlü olmasıdır. Aslında, birçok geliştirici programlama dili olarak javascript’e başvurur ve spesifik bir şeye ihtiyaç duyduklarında ise listedeki diğer programlama dillerini kullanırlar.

En popüler programlama dillerinden birkaçına bakalım:

JavaScriptJavaScript veya JS kısaca web sitelerine etkileşim eklemekle ilgilidir. 
HTML“Köprü Metni Biçimlendirme Dili” kısaltması olan HTML, web’deki en yaygın programlama dillerinden biridir ve bir web sayfasının yapı taşlarını oluşturur. HTML etiketlerine örnek olarak paragraflar için <p> ve görüntüler için <img> gösterilebilir.
PHPPHP, istemcinin makinesinde çalışan JavaScript’in aksine sunucu tarafı bir dildir. Yani oluşturduğunuz kodları kullanmak için bilgisayarınıza bir sunucu kurmanız gerekecektir.  En yaygın olarak WordPress gibi PHP tabanlı içerik yönetim sistemlerinde görülür.
CSSCSS, “Basamaklı Stil Sayfaları” anlamına gelir ve web yöneticilerinin stilleri belirlemelerine ve farklı içerik türlerinin görüntülenme şeklini tanımlamasına olanak tanır. Bunu HTML’deki her öğe için manuel olarak yapabilirsiniz, ancak CSS’de yaparak, öğeleri her kullandığınızda nasıl görüntüleneceğini tekrar tekrar belirtmek zorunda kalmazsınız.

Programlamayı bir ev inşa etmekle karşılaştırırsak, HTML evin yapısını ve duvarların ve kapıların nerede olduğunu belirtirken, CSS evi dekore eden halıları ve duvar kağıtlarını kaplayacak ve güzel görünmesini sağlayacaktır. Kapıları ve pencereleri açmak için ise JavaScript kullanırız .

Bir web sitesine nasıl JavaScript eklersiniz?

Genel bir kural olarak, belirli bir zamanda veya belirli bir web sayfası öğesiyle yürütülmesi gerekmediği sürece JavaScript’inizi web siteniz için <header> etiketlerine dahil etmek iyi bir fikirdir. Ayrıca JavaScript kodunuzu ayrı dosyalar olarak kaydedebilir ve web sitesinde gerektiği gibi çağırabilirsiniz.

Bir web sayfasına bir JavaScript kodu dizesi eklemek için <script> etiketini kullanmanız gerekir. Pratikte neye benzediğini görmek için aşağıdaki örneklere bakabilirsiniz.

Örnek 1 : Javascript’de değişken oluşturup ekrana yazdırma

<!DOCTYPE html>
<html>
<title>Modern Öğretmen</title>
<body>

<h1>JavaScript Değişkenleri</h1>

<p>Bu örnekte, x bir değişken olarak tanımlanmıştır. Daha sonra, x'e 6 değeri atanır: </p>

<p id="demo"></p>

<script>
var x; // x adında değişken oluşturuldu.
x = 6; // x değişkenine 6 değeri atandı.
document.getElementById("demo").innerHTML = x; //id demo olan nesneye x değişkenini yazdır dedik.
</script>

</body>
</html>

Örnek 2 : Doğdugundan beri geçen süreyi ekrana yazdırma


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Modern Öğretmen</title>
</head>
 
<body>
Toplam <span id="fark"></span> gundur yasiyorsun !

<script>
   var simdi = new Date();
   var tarih = new Date(1993, 06, 14, 14, 0, 0, 0);
   var gecen = new Date(simdi - tarih);

   var saniye = Math.floor((simdi - tarih)/1000);
   var dakika = Math.floor(saniye/60);
   var saat = Math.floor(dakika/60);
   var gunler = Math.floor(saat/24);

   document.getElementById("fark").innerHTML = gunler;
</script>
</body>
</html>

Örnek 3 : Butona tıklandığında istediğiniz kadar sayı yazdırma

<!DOCTYPE html>
<html>
<title>Modern Öğretmen</title>
<body>

<p>Beş kez döngü yapmak için butona tıklayın.</p>

<button onclick="myFunction()">Tıkla</button>

<p id="deneme"></p>

<script>
function myFunction() {
    var text = " "; 
    var i; //i adında değişken tanımladık
    for (i = 0; i < 5; i++)  // i adındaki değişkene 0 değerini atadık ve beşten küçük oluncaya kadar birer birer artırdık.
	 {  
        text += "Gösterilen sayı: " + i + "<br>";
  	  }
    document.getElementById("deneme").innerHTML = text;
}
</script>

</body>
</html>

Çevrimiçi Kurslar

Genellikle anlatımını yaptığım programlama dilleriyle ilgili 3 örnek veriyorum. Eğer ilginizi çektiyse aşağıda paylaşacağım çevrimiçi kurslara göz atabilirsiniz.

  1. https://www.w3bai.com/tr/js/default.html

W3ii popüler bir öğretici web sitesidir. İnsanların programlamayı daha kolay öğrenebilmesi yaklaşık 2000 çeşit öğretici dersler vardır. Sitede öncelikle programlama dili ile ilgili genel bilgiler ardından her kod ile ilgili örnekler bulunuyor. En son olarak da sitedeki testleri çözerek konu hakkında öz değerlendirme yapabilirsiniz.

2. https://www.tutorialspoint.com/jquery/jquery-multiscroll.htm

Bu sitede Javascript hakkında detaylı bilgilere ulaşabilirsiniz. https://www.w3bai.com ‘dan avantajı örneklerin daha detaylı oluşudur. Dezavantajı ise gösterilen örnekleri deneme imkanınız yok. Kendiniz yazıp oluşturmanız lazım. Benim tavsiyem biraz altyapı oluşturduktan sonra bu sitedeki örnekleri incelemeniz.

3. https://upskillcourses.com/courses

Önceki sitelerden farkı buradaki ders anlatımları video üzerinden gerçekleşiyor. Ders anlatım dili İngilizce olmasına rağmen dersler gayet açıklayıcı. Çünkü eğitmen videonun sağ tarafında kod yazıyor sol tarafında da kod çıktısını gösteriyor.