JavaScript, esnek ve güçlü yapısıyla en çok kullanılan programlama dillerinden biridir. Öyle ki kullandığınız tüm modern web tarayıcılarda JavaScript yorumlayıcı bulunmaktadır. Web siteleri ve web uygulamalarının çoğu JavaScript’in gücünden istifade eder. Hatta günümüzde sunucu-tarafı (node.js) uygulamalarda da çokça kullanılmaktadır.

JavaScript ile Neler Yapılabilir?

  • Web sitesi tasarımı ve bu web sitelerine interaktif fonksiyonlar ekleme (Front-end)
  • Sunucu-tarafı web uygulamaları geliştirme (Back-end)
  • Android ve iOS mobil uygulama geliştirme
  • Oyun programlama, Sanal gerçeklik (VR)
  • Yapay zeka uygulamaları geliştirme gibi alanlarda kullanılmaktadır.

Neleri Amaçladık:

Modern JavaScript konseptlerini dilin yalın hali olan Vanilla JavaScript ile öğrenmek. React, Vue gibi front-end kütüphane/frameworkler ve/veya NodeJS ile sunucu-tarafı uygulama geliştirmeye geçiş için gereken altyapıyı oluşturmak.

Web’in 3 Temel Yapıtaşı (HTML, CSS, JavaScript)

Modern web sayfaları oluşturmak için 3 farklı dil birlikte çalışmaktadır. (Şimdilik sunucu tarafında çalışan dillerden bahsetmeyelim.)

HTML (Hypertext Markup Language): Bir programlama dili olmayıp, web sayfasına ait içerikleri ilgili elemanlar (HTML etiketleri) aracılığı ile yerleştirmenizi sağlayan işaretleme dilidir. Başlıklar, yazılar, görseller, linkler gibi elemanları örnek verebiliriz.

CSS (Cascading Style Sheets): HTML kullanarak eklediğiniz yalın sayfa içeriğini stilize etmenize yarar (renk, boyut, pozisyon, basit etkileşim animasyonları vb. biçimlemeler)

JavaScript: Web sitenize ait sıradan elemanlara interaktiflik kazandırmak için HTML ve CSS ile birlikte kullanılmaktadır. Kullanıma örnek olarak slider, formlarda butona tıklanınca gerekli doğrulamaların yapılmasını örnek verebiliriz.

Daha İyi Anlamak İçin

Web’in inşasında temel olan bu 3 öğeyi anlamak için Pinokyo metaforunu kullanalım.

HTML

Pinokyo bir odun parçası ve Gepetto usta onu kukla yapmak için yontmaya hazırlıyor.

CSS

Gepetto usta kuklayı oluşturdu, giydirdi ve onu süsledi.

JAVASCRIPT

Sevgili Pinokyomuz hareket ediyor! (Yani çevresiyle etkileşiyor.)

HTML ve CSS’ten bahsetmemizin nedeni web tasarımda JavaScript dosyalarının HTML olmadan hiçbir anlam ifade etmediği ve JavaScript kullanarak HTML elemanlarını, CSS stillerini DOM (Document Object Model) ile manipüle edebilmemiz. Derslerimize ait önemli bir konu da “DOM manipülasyonu ve Olay Yönetimi” olacaktır. JavaScript’i anlayıp etkin kullanabilmek için en az basit düzeyde HTML ve CSS bilgisine ihtiyaç duyacaksınız. Bunun için W3Schools‘un iyi bir referans kaynak olduğunu söyleyebilirim. İlerler iken yeri geldiğinde diğer kaynaklardan da söz edeceğiz.

Neye İhtiyacımız Olacak?

Kodlamaya yeni başlıyorsanız bir kod editörüne ihtiyacınız olacak. Bunun için VS Code’u öneriyoruz. Aşağıdaki linkten indirebilirsiniz. Ayrıca web tarayıcınızda bulunan “geliştirici araçları içersindeki konsol“u kullanacağız.

Web tarayıcısı olarak Google Chrome’u öneririz. Chrome web tarayıcınızda iken konsola ulaşmak için aşağıdaki klavye tuşlarını kullanabilirsiniz.

  • Windows / Linux CTRL + SHIFT + J
  • Mac CONTROL + OPTION + J

Web Sayfaları İçerisinde JavaScript

HTML Etiketleri İçerisinde Kullanım

JavaScript kodlarını script etiketinin içerisine yazabiliriz. Sayfada genelde bitiş body etiketinin (</body>) hemen üstüne yerleştirilir. Basitçe anlatmak gerekirse bunun amacı sayfaya ait bütün elemanların tamamen yüklenip ondan sonra JavaScript ile manipülasyona hazır olmasını beklemek, ayrıca bu pratik sayfanın yüklenme hızını da arttıracaktır.

<html>
	<head>
		<title>Merhaba Dünya</title>
	</head>
	<body>
		<script>
			document.write('Merhaba Dünya!');
		</script>
	</body>
</html>

Yukarıdaki kodu index.html olarak kaydedip web tarayıcınızda açarsanız. Ekrana Merhaba Dünya! yazacaktır.

Harici Bir Dosya (.js) ile Kullanım

Kod editörünüzde bir çalışma klasörü oluşturup bu klasörün içerisinde index.html ve app.js diye iki dosya oluşturun. Harici JavaScript dosyamıza ait yolu index.html dosyamızda script etiketi içerisinde src attribute (nitelik) içerisine ekliyoruz.

index.html

<html>
	<head>
		<title>Merhaba Dünya</title>
	</head>
	<body>
		<script src="app.js"></script>
	</body>
</html>

app.js

document.write('Merhaba Dünya!');

Böylece birden fazla html sayfamız varsa aynı JavaScript kodlarını tümüne ekleme imkanı kazandık ve daha kolay yönetilebilir bir yapı elde ettik. app.js dosyamızda bir değişiklik yaptığımızda bütün sayfalara yansıyacaktır.

Google Chrome JavaScript Konsol

Tarayıcınız penceresinde canlı JavaScript kodları yazabilirsiniz ya da bir sayfadaki JavaScript kodları ile konsola yazdırma işlemi yapabilirsiniz. Öğrenirken ve testlerde için sıklıkla başvurulan bir yöntemdir.

Yukarıda kullandığımız app.js dosyamızı açalım ve içerisini aşağıdaki kodla değiştirip kaydedelim.

console.log('Merhaba Dünya!');

index.html dosyamızı web tarayıcımızda açalım. Ekrana birşey yazılmayacaktır. Web Geliştirici araçları içindeki Konsola baktığımızda ise “Merhaba Dünya!” nın burada göründüğüne dikkat edelim.

JavaScript Açıklama Cümleleri

Açıklamalar, JavaScript Engine tarafından dikkate alınmayan küçük notlardır. Daha sonra ilgili kodlara tekrar bakıldığında ne ile ilgili olduğunu belirten ipuçları içerir. JavaScript kodumuzda 2 tip açıklama (yorum) kullanabiliriz.

1. Tek Satır Açıklama

// Bu açıklama metni

2. Çoklu Satır Açıklama

/* Bu çok satırdan
oluşan bir açıklama
metni */

Sıradaki konumuz JavaScript’te değişkenler ve veri türleri

Bir Yorum Yaz