Alıştırma - JavaScript ile etkileşim ekleme

10 dakika

JavaScript (veya ECMAScript), web sayfalarınıza etkileşim eklemenize yardımcı olan bir programlama dilidir.

Örneğin, Bir kullanıcı bir düğme seçtiğinde gerçekleşen davranışı tanımlamak için JavaScript kullanabilirsiniz( örneğin, bir açılır pencere açmak gibi). JavaScript kullanarak bir web sayfasını yeniden yüklemeden içerik ekleyebilir veya kaldırabilirsiniz.

Bu ünitede, web sayfanız için örnek bir JavaScript dosyası ayarlarsınız. Bunun içinde açık ve koyu temalar arasında geçiş yapmak için bir düğme oluşturursunuz. Ardından, gerçek tema değiştirme işlemini gerçekleştiren JavaScript koduna düğmeyi eklersiniz. Son olarak, tarayıcınızın geliştirici araçlarını kullanarak tamamlanmış projeyi kontrol edebilirsiniz.

JavaScript bağlantısı

CSS gibi, JavaScript'i doğrudan HTML dosyasına ekleyebilirsiniz, ancak önerilen en iyi yöntem JavaScript'inizi ayrı bir dosyaya kaydetmektir. JavaScript kodunuzu ayrı bir dosyaya eklemek, birkaç web sayfasında yeniden kullanılmasını kolaylaştırır. Örneğin, web sayfalarınızın gövdesinin herhangi bir yerine aşağıdaki kodu ekleyerek bir açılır uyarı oluşturabilirsiniz:

<script>alert('Hello World')</script>

Ancak JavaScript kodunuzu, özel işlevselliğinize ihtiyaç duyan her dosyaya bağlayabileceğiniz ayrı bir dosyaya eklemek daha iyidir.

HTML betik etiketi <script> , bu alıştırmada web uygulamanızı nasıl yapılandırdığınıza ilişkin bir dış JavaScript dosyasına bağlanmamıza olanak tanır.

Visual Studio Code'da dosyanızı index.html açın.
Kapanış </body> öğesini bulun ve imlecinizi üzerinde yeni bir satıra yerleştirin. Girin script:src ve Enter tuşuna basın. Açma ve kapatma etiketleri <script> öğesi için kodunuza eklenir.

<script> öğesini, aşağıdaki örnekte gösterildiği gibi dosyanızı app.js yüklenecek şekilde değiştirin. Listenin kapanış </ul> öğesinden sonra bulunduğundan emin olun.

...
<ul>
  <li class="list">Add visual styles</li>
  <li class="list">Add light and dark themes</li>
  <li>Enable switching the theme</li>
</ul>
<script src="app.js"></script>
...

<script> öğesini <head> veya <body> içinde başka bir yere yerleştirebilirsiniz. Ancak, <script> öğesini <body> bölümün sonuna yerleştirmek, betik yüklenmeden önce tüm sayfa içeriğinin ekranda görüntülenmesini sağlar.

Hataya dayanıklılık ekleme

HTML dosyanızda, javascript devre dışı bırakılırsa ileti göstermek için kullanılabilecek kapanış <noscript> etiketinden sonra bir </script> öğe ekleyin.
```
<script src="app.js"></script>
<noscript>You need to enable JavaScript to view the full site.</noscript>
```
<noscript> öğesinin eklenmesi, hataya dayanıklılık veya zarif bozulma örneğidir. <noscript> öğesini kullandığınızda, kodunuz bir özelliğin desteklenmediğini veya kullanılamadığını algılayabilir ve bu duruma göre plan yapabilir.

Katı modu ayarlama

JavaScript öğrenmesi kolay olacak şekilde tasarlanmıştır ve geliştiricinin belirli hatalar yapmasına olanak tanır. Örneğin, yanlış yazılmış bir değişken kullandığınızda JavaScript hata oluşturmaz ve bunun yerine yeni bir genel değişken oluşturur. JavaScript'i öğrenmeye başladığınızda daha az hata olması kullanışlı olur. Ancak, tarayıcıların iyileştirmesi daha zor olan ve hata ayıklamanız daha zor olan kod yazmaya yol açabilir.

Hata yaptığınızda daha faydalı hata raporları almak için katı moda geçin.

Visual Studio Code'da dosyayı açın app.js ve aşağıdakileri girin:
```
'use strict';
```

Düğme ekleyin

Kullanıcılarınızın web sayfanızdaki açık ve koyu temalar arasında geçiş yapmasına izin vermek için bir yönteme ihtiyacınız vardır. Bu alıştırmada, bu işlevi bir HTML <button> öğesiyle uygulayacaksınız.

HTML dosyanıza ()index.html bir <button> öğe ekleyin. Düğmeyi öğenin <div> içine yerleştirin ve listenin</ul> () sonundan hemen sonra ekleyin.
```
...
<ul>
  <li class="list">Add visual styles</li>
  <li class="list">Add light and dark themes</li>
  <li>Enable switching the theme</li>
</ul>
<div>
  <button class="btn">Dark</button>
</div>
<script src="app.js"></script>
...
```
Bu örnekteki öğesinin <button> CSS stillerini uygulamak için kullanabileceğiniz bir sınıf özniteliğine sahip olduğuna dikkat edin.
Windows'da Control+S veya macOS üzerinde Command+S klavye kısayoluyla HTML dosyanızdaki değişiklikleri kaydedin.
CSS dosyanızda ()main.css HTML düğmeniz için sınıf seçicisi olan yeni bir .btn kural ekleyin. Düğme renklerini genel açık veya koyu tema renklerinden farklı yapmak için, bu kuralda color ve background-color özelliklerini ayarlayın. Sayfanız görüntülendiğinde, bu .btn özellikler CSS dosyanızın kuralında body ayarlanan varsayılan özellikleri geçersiz kılar.
```
.btn {
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}
```
Ardından, düğmenin .btn boyutu, şekli, görünümü ve yerleşimi için bazı stiller eklemek üzere kuralı değiştirin. Aşağıdaki CSS, sayfa başlığının sağındaki yuvarlak düğmeyi oluşturur.
```
.btn {
  position: absolute;
  top: 20px;
  left: 250px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: none;
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}
```

Ardından, açık ve koyu tema için CSS'yi güncelleştirin. Düğmeye özgü arka plan rengini ve yazı tipi rengini belirtmek için --btnBg ve --btnFontColor adlı bazı yeni değişkenler tanımlayın.

.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
  --btnBg: var(--black);
  --btnFontColor: var(--white);
}

.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
  --btnBg: var(--white);
  --btnFontColor: var(--black);
}

Windows'da Control+S veya macOS'ta Command+S klavye kısayoluyla CSS dosyanızdaki değişiklikleri kaydedin.

Olay işleyicisi ekleme

Düğmeyi seçtiğinizde bir şey yapmak için JavaScript dosyanızda bir olay işleyicisi gerekir. Olay işleyicisi, sayfada bir olay gerçekleştiğinde JavaScript işlevini çalıştırmanın bir yoludur. Düğme için click olayına bir olay işleyicisi ekleyelim; olay işleyici, click olayı gerçekleştiğinde çalışır.

Olay işleyicisini ekleyebilmeniz için önce düğme öğesine bir başvuru gerekir.

JavaScript dosyanızda app.jsdocument.querySelector kullanarak düğmeye referans edinin.
```
const switcher = document.querySelector('.btn');
```
İşlev, document.querySelector CSS dosyanızda kullandığınız gibi CSS seçicilerini kullanır. switcher artık sayfadaki düğmeye yapılan bir referanstır.
Ardından, olay için olay işleyicisini click ekleyin. Aşağıdaki kodda, olay için click bir dinleyici ekler ve olay gerçekleştiğinde tarayıcının yürüttüğü click bir olay işleyici işlevi tanımlarsınız.
```
switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');
});
```

Önceki kodda, toggle yöntemini kullanarak <body> öğesinin sınıf özniteliğini değiştirdiniz. Bu yöntem light-theme ve dark-theme sınıflarını otomatik olarak ekler veya kaldırır. Bu kod, tıklarsanız açık stiller yerine koyu stilleri ve yeniden tıkladığınızda koyu yerine açık stilleri uygular.

Ancak, düğmenin etiketinin de doğru temayı gösterecek şekilde güncelleştirilmesi gerekir, bu nedenle geçerli temayı belirlemek ve düğme etiketini güncelleştirmek için bir if deyim eklemeniz gerekir.

Olay işleyicisi eklendikten sonra JavaScript kodunuzun nasıl görünmesi gerektiği aşağıda açıklanmalıdır:

'use strict';

const switcher = document.querySelector('.btn');

switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');

    const className = document.body.className;
    if(className == "light-theme") {
        this.textContent = "Dark";
    } else {
        this.textContent = "Light";
    }
});

Birden fazla sözcük içeren değişken adları için camelCase kullanmak bir JavaScript kuralıdır; örneğin, değişken adı.

Konsol iletisi

Web geliştiricisi olarak, web sayfanızda görünür olmayan, ancak Konsol sekmesindeki Geliştirici Araçları'nda okuyabileceğiniz gizli iletiler oluşturabilirsiniz. Konsol iletilerini kullanmak kodunuzun sonucunu görmek için yararlıdır.

JavaScript dosyanızda, olay dinleyicisinin içine, ancak if deyiminin arkasına, bir console.log çağrısı ekleyin.

Bu değişikliği yaptıktan sonra, tüm JavaScript kodunuz şöyle görünmelidir.

'use strict';

const switcher = document.querySelector('.btn');

switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');

    const className = document.body.className;
    if(className == "light-theme") {
        this.textContent = "Dark";
    } else {
        this.textContent = "Light";
    }

    console.log('current class name: ' + className);
});

Visual Studio Code'da bir JavaScript dosyasındayken, enter tuşuna girip enterconsole.logiçin log otomatik tamamlama özelliğini kullanabilirsiniz.

Metnin çevresinde tek veya çift tırnak işareti olan bir metin dizesi tanımlayabilirsiniz.

Tarayıcıda aç

Önizleme için sağ tıklayıp index.html Varsayılan Tarayıcıda Aç'ı seçin veya F5 tuşuna basarak aynı tarayıcı sekmesini yeniden yükleyin.
Koyu temaya geçmek için yeni Koyu düğmesini seçin.
Her şeyin doğru göründüğüne ve beklendiği gibi davrandığından emin olun. Aksi takdirde, bir şeyi atladığınıza bakmak için önceki adımları gözden geçirmeniz gerekir.

Geliştirici araçlarında sayfayı denetleyin

Sağ tıklayıp İncele'yi seçerek veya F12 klavye kısayolunu kullanarak Geliştirici Araçları'nı açın. Alternatif olarak, Windows veya Linux'ta Ctrl+Shift+I kısayolunu ve macOS'ta Option+Command+I kısayolunu kullanın.
Öğeler sekmesini seçin ve Stiller sekmesini seçin.
<body> öğesini seçin. Stiller sekmesinde, uygulanan temaya bakın. Geçerli tema koyuysa, dark-theme stiller uygulanır.

Koyu temanın seçili olduğundan emin olun.
konsol sekmesini seçerek iletisini console.loggörüntüleyincurrent class name: dark-theme.

Konsolunu kullanarak JavaScript kodunuzdan ilginç içgörüler elde edebilirsiniz. Kodunuzun hangi bölümlerinin yürütülür olduğunu anlamak ve diğer değişkenlerin geçerli değerlerini öğrenmek için daha fazla konsol iletisi ekleyin.

Konsol hakkında daha fazla bilgi edinmek için Konsola genel bakış makalesine bakın.