Arayüz ve şehir girişi

Input ve düğmeyle şehir girişi yapıp click olayını bağlarsın.

Giriş değerini okumak

Bir giriş alanının metnini input.value özelliği ile okuruz. Bu özellik hem okunur hem yazılır: atama yaparak alanı temizleyebilirsin. Bir getWeather işlevi tanımlayacağız. İşlev cityInput.value ile şehir adını okur ve console.log ile yazdırır. Sonra bu işlevi getWeatherButton.addEventListener("click", getWeather) ile düğmenin tıklama olayına bağlarız. İşlevi parantezsiz veririz; çağırmayı tarayıcı yapar.

Tıklamayı dinlemek

Bir düğmenin tıklamasını dinlemek için addEventListener metodunu kullanırız. İlk parametre olay türü ("click"), ikinci parametre çağrılacak işlevdir. getWeatherButton.addEventListener("click", getWeather) çağrısı her tıklamada getWeather işlevini çalıştırır. İşlevi parantezsiz veririz (getWeather, getWeather() değil). Parantezli yazarsak işlev hemen çalışır; biz ise çağırma işini tarayıcıya bırakırız. Bu düzene callback denir.

Uygulama getWeather işlevini tanımla ve düğmeye bağla

Önceki dersin çözümünün üzerine devam et. Bir getWeather işlevi yaz: cityInput.value ile şehir adını city değişkenine al ve console.log(city) ile yazdır. Sonra getWeatherButton.addEventListener("click", getWeather) ile düğmeye bağla.

Örnek çözümü göster

const app = document.querySelector("#app");
const cityInput = document.querySelector("#cityInput");
const getWeatherButton = document.querySelector("#getWeatherButton");
const weatherResult = document.querySelector("#weatherResult");
console.log(app, cityInput, getWeatherButton, weatherResult);

function getWeather() {
  const city = cityInput.value;
  console.log(city);
}

getWeatherButton.addEventListener("click", getWeather);

Kendini test et

cityInput.value ne döndürür?
```
const city = cityInput.value;
```
- Giriş alanının ipucu metni
- Giriş alanının HTML içeriği
- Kullanıcının yazdığı metin
- Giriş alanının kimliği
Cevabı göster

Kullanıcının yazdığı metin — Doğru! value, kullanıcının yazdığı metni verir.

Giriş değerini oku

const city = ____;

Cevabı göster

const city = cityInput.value;

Metodu göreviyle eşleştir

cityInput.value

Girilen metni okur
addEventListener

Olayı dinler
console.log

Ekrana yazar
function

İşlev tanımlar
getWeather adımlarını eşleştir

cityInput.value

Şehri okur
console.log

Ekrana yazar
addEventListener

Tıklamayı bağlar

Sıradaki ders: Fetch ile veri çekme

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler