Web Sayfalarının Beyni: Javascript -1
Javascript Nedir?
Javascript, yaygın olarak web programlama alanında kullanılan dinamik bir programlama dilidir. Etkileşimli ve dinamik web sayfaları oluşturmamıza olanak sağlar. Javascript ile kullanıcı etkileşimini maksimize ediyoruz. Dinamik programlamaya örnek olarak butona tıklandığında sayfanın renginin değişmesini gösterebiliriz. Kısaca, Javascript web sayfalarının beyni diyebiliriz.
Javascript nasıl yazılır?
Javascript yazmak için .js uzantılı dosya kullanmamız gerekmektedir. Bu .js uzantılı dosyayı herhangi bir text editöründe açarak Javascript kodlayabiliriz. Herhangi bir text editöründe açabiliriz dedik ama kodlama yaparken bize hatalarımızı söyleyen ve birçok açıdan işimizi kolaylaştıran editörler olan Ide (tümleşik geliştirme ortamı) ortamlarında geliştirme yapmak çok daha iyidir. Javascript geliştirmek için kullanılan en yaygın geliştirme ortamı Visual Studio Code’dur.
Şimdi gerekli geliştirme ortamımızı indirip Javascript kodlamaya başlayalım.
Adım 1: Tarayıcıya Vs code yazın ve çıkan ilk siteye tıklayın. Açılan sitede eğer windows kullanıyorsanız Download for Windows’ a tıklayın. Başka bir işletim sistemi kullanıyorsanız Download for Windows tuşunun sağındaki tuşla indirme yapabilirsiniz. İndirme tamamlandıktan sonra indirilen dosyaya tıklayın ve next next diyerek kurulumu tamamlayın.
Adım 2: Masaüstüne bir klasör oluşturun ve Visual Studio Code’u açın. Open Folder’a tıklayarak masaüstünde oluşturduğunuz klasörün içindeyken klasörü seçin.
Adım 3: Okla gösterilen New File’ a tıklayın. Ve dosyanın adına app.js yazın ve enter’a basın. Sonra Javascript kodlarımızı tarayıcıda gösterebilmek için index.html adında yeni bir dosya daha oluşturun. oluşturduğunuz html dosyasında ! işaretine basın ve enter’a tıklayın.
Adım 4: Javascript’i göstermek için html dosyamıza Javascript kullanacağımzı söylememiz gerekmektedir. Bu 2 şekilde olabilir.
Html dosyamızın içine aşağıdaki kod bloğundaki gibi Javascript kodlarımızı yazabiliriz.
Veya bir tane .js uzantılı dosya oluşturup onu html dosyamız içinde çağırabiliriz. Genelde bu yöntem kullanılır. script etiketleri arasına src=”dosyaadi.js” yazarak kendi javascript dosyamızı çağırabiliriz.
Adım 5: Son olarak çalışan halinin ekran görüntüsünü atıyorum. Her güncelleme yapıldığında html uzantılı dosyamızın tarayıcıda otomatik olarak güncellenmesi için Live server eklentisini ekliyoruz. Daha sonra index.html dosyasına sağ tıklayarak Open with Live Server’a tıklayarak html sayfamızı tarayıcıda gösteriyoruz. App.js dosyamızdaki console.log() komutunu görebilmek için tarayıcıdaki html sayfamızda f12'ye tıklıyoruz ve açılan pencerede console’ a tıklıyoruz.
İlk yazımızda Javascript’in ne olduğunu ve hangi geliştirme ortamında kodlayabileceğimize baktık. Sonraki yazımızda Javascript’i daha detaylı inceleyeceğiz.
