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