JavaScript Öğrenme Serisi yazılarımıza kaldığımız yerden devam ediyoruz.

Kodlarımızı tarayıcı konsoluna yazabiliriz, ancak daha büyük projeler için mümkün olmayacaktır. Gerçek bir çalışma ortamında, developers(geliştiriciler)
kodlarını yazmak için farklı kod editörleri kullanırlar. Biz de JavaScript Öğrenme Serisi yazılarımız boyunca, Visual Studio Code kullanacağız.

Visual Studio Code Yükleme

Visual Studio Code çok popüler bir open-source text editor (açık kaynak metin editörü) dür.Visual Studio Code indirmenizi tavsiye ederim, ancak diğer editörlerden yanaysanız, sahip olduklarınızı takip etmekten çekinmeyin.

Visual Studio Code Install - JavaScript
Visual Studio Code Install – JavaScript

Visual Studio Code yüklediyseniz, kullanmaya başlayalım.

Visual Studio Code nasıl kullanılır ?

Visual Studio Code simgesini çift tıklatarak Visual Studio Code’u açın. Açtığınızda, bu tür bir arayüz elde edersiniz. Etiketli simgelerle etkileşime geçmeye çalışın.

Visual Studio Code Welcome - JavaScript
Visual Studio Code Welcome – JavaScript

Visual Studio Code açılış ekranımızdan New File ile yeni bir dosya açalım.

Visual Studio Code NewFile - JavaScript
Visual Studio Code NewFile – JavaScript

Visual Studio Code açmış olduğumuz yeni dosyamıza birazdan örnek kodumuzu yazacağız.

Visual Studio Code Tanıtım - JavaScript
Visual Studio Code Tanıtım – JavaScript

Visual Studio Code ekranındaki etiketli simgelerle etkileşime geçmeye çalışın.

Visual Studio Code açtığımız yeni dosya içeriğine örnek olarak aşağıdaki kod bloğunu yazıp index.html adıyla kaydediyoruz.

<!DOCTYPE html>
<html>
    <title>JavaScriptOgrenmeSerisi</title>

<body>
    <button onclick="alert('JavaScript Ogrenme Serisi yazılarımıza hoşgeldiniz.')" >Hoşgeldiniz</button>
    <button onclick="alert('Evde Kal TÜRKİYE!')">En İyi Dilek</button>

<script>
    console.log('Merhaba,Ev')
</script>

<script src="introduction.js"></script>

</body>

</html>
Visual Studio Code index.html - JavaScript
Visual Studio Code index.html – JavaScript

Visual Studio Code ‘da introduction.js adında yeni bir dosya açıp içerisine JavaScript kodumuzu yazıyoruz.

console.log('JavaScript Ogrenme Serisi yazılarımıza hoşgeldiniz.')
Visual Studio Code introduction.js - JavaScript
Visual Studio Code introduction.js – JavaScript
Visual Studio Code index.html eklenti
Visual Studio Code index.html eklenti

Visual Studio Code index.html dosyasına yukarıda etiketli alanda görüldüğü üzere yeni oluşturduğumuz introduction.js dosyasının çalışması için ekleme yapıyoruz.

Şimdi de bu oluşturduğumuz iki dosyanın çalışmasını test edeceğiz. Bunun için şuanda Visual Studio Code ‘ da yüklü olmayan Live Server paketini yüklememiz gerekiyor.

Visual Studio Code Live Server Install
Visual Studio Code Live Server Install

Visual Studio Code ‘da Live Server paket kurulumunu yaptıktan sonra şimdi sıra örnek kodlarımızı test etme zamanı geldi.

Visual Studio Code Live Server Start - JavaScript
Visual Studio Code Live Server Start

Open with Live Server dedikten sonra kodumuz çalışıyor.

Visual Studio Code Live Server Start
Visual Studio Code Live Server Start

Visual Studio Code ‘da yazdığımız kodu Live Server ile çalıştırdığımızda Console da çıktılarımızı görüyoruz.

Oluşturmuş olduğumuz butonlara tıkladığımızda ise durum aşağıdaki görsellerde gördüğünüz gibidir.

Visual Studio Code Live Start
Visual Studio Code Live Start
Visual Studio Code Live Start
Visual Studio Code Live Start

Kaynakça