JavaScript ile İnternet Kontrolü
20 Kasım 2024
Yazılım 
Web sayfaları, kullanıcı deneyimini iyileştirmek için çeşitli dinamik özellikler sunar. Bu özelliklerden biri de, internet bağlantı durumu değiştiğinde kullanıcıyı bilgilendirmektir. Kullanıcıların internet bağlantı durumlarına göre anlık bildirim alması, web uygulamalarının etkileşimini artırabilir. Özellikle internet bağlantısı kaybolduğunda, kullanıcılar genellikle bir hata mesajı görmek istemezler; bunun yerine bağlantı durumunun değiştiğini belirten bir uyarı almak daha kullanıcı dostu olacaktır.
Bu makalede, HTML ve JavaScript kullanarak, web sayfanızda internet bağlantı durumunu kontrol eden ve kullanıcıya bildiren basit bir uygulama nasıl yapılır, bunu inceleyeceğiz.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>İnternet Durumu</title>
<style>
/* Uyarı mesajını stillendirelim */
#internet-status {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 10px;
text-align: center;
font-size: 18px;
color: white;
background-color: #f44336; /* Kırmızı renk, internet yoksa */
display: none; /* Başlangıçta gizle */
}
#internet-status.online {
background-color: #4CAF50; /* Yeşil renk, internet varsa */
}
</style>
</head>
<body>
<div id="internet-status">İnternet Bağlantınız Yok</div>
<script>
// İnternet bağlantısını kontrol et ve durumu göster
function updateConnectionStatus() {
const statusElement = document.getElementById('internet-status');
if (navigator.onLine) {
// İnternet bağlantısı varsa
statusElement.textContent = 'İnternete Bağlısınız';
statusElement.classList.remove('offline');
statusElement.classList.add('online');
} else {
// İnternet bağlantısı yoksa
statusElement.textContent = 'İnternet Bağlantınız Yok';
statusElement.classList.remove('online');
statusElement.classList.add('offline');
}
// Uyarı mesajını göstermek
statusElement.style.display = 'block';
// 5 saniye sonra mesajı gizle
setTimeout(() => {
statusElement.style.display = 'none';
}, 5000); // 5000 milisaniye = 5 saniye
}
// Bağlantı durumu değiştiğinde güncelle
window.addEventListener('online', updateConnectionStatus);
window.addEventListener('offline', updateConnectionStatus);
// Sayfa yüklendiğinde durumu kontrol et
window.addEventListener('load', updateConnectionStatus);
</script>
</body>
</html>navigator.onLine:- Bu özellik, kullanıcının internet bağlantısının aktif olup olmadığını kontrol eder.
truedönerse kullanıcı çevrimiçidir,falsedönerse kullanıcı çevrimdışıdır.
- Bu özellik, kullanıcının internet bağlantısının aktif olup olmadığını kontrol eder.
updateConnectionStatus:- Bu fonksiyon, internet bağlantı durumu değiştiğinde çağrılır. Eğer kullanıcı çevrimiçi ise, mesaj “İnternete Bağlısınız” olarak güncellenir ve yeşil renk gösterilir. Eğer kullanıcı çevrimdışı ise, mesaj “İnternet Bağlantınız Yok” olarak güncellenir ve kırmızı renk gösterilir.
setTimeout:- Bu fonksiyon, mesajın ekranda 5 saniye boyunca görünüp sonra kaybolmasını sağlar. Yani kullanıcıya kısa bir süre bildirim gösterildikten sonra, ekran temizlenir.
- Event Listeners:
window.addEventListener('online', updateConnectionStatus);: Kullanıcı internet bağlantısına tekrar bağlandığında bu event tetiklenir.window.addEventListener('offline', updateConnectionStatus);: Kullanıcı internet bağlantısını kaybettiğinde bu event tetiklenir.window.addEventListener('load', updateConnectionStatus);: Sayfa yüklendiğinde, bağlantı durumu bir kez kontrol edilir.