محرر ويب أونلاين

<!DOCTYPE html>
<html>
<head>
    <style>
        .online {color: green;}
        .offline {color: red;}
    </style>
</head>
<body>
    <h1>JavaScript Watch Internet Connection Status</h1>
	<p>You can use the "online" and "offline" events to 
        keep watching whether the browser is online or offline.</p>
    <p>Toggle your internet connection on/off to see how it works.</p>
    <p id="internetStatus"></p>

    <script>
        // يمكن استخدامها لطباعة حالة الإتصال بالنت updateConnectionStatus هنا قمنا بتعريف دالة إسمها
        function updateConnectionStatus() {
            // لأننا سنعرض حالة النت فيه internetStatus يساوي id هنا قمنا بتخزين العنصر الذي يملك
            var internetStatus = document.getElementById('internetStatus');

            // لإعلام المستخدم internetStatus حين يكون المتصفح متصل بالنت سيتم تحديث نص العنصر
            // حتى يظهر باللون الأخضر online أنه متصل بالنت مع جعل العنصر يستخدم الكلاس 
            if (navigator.onLine) {
                internetStatus.innerHTML = 'You are online.';
                internetStatus.className = 'online';
            }
            // لإعلام المستخدم internetStatus حين يكون المتصفح متصل بالنت سيتم تحديث نص العنصر
            // حتى يظهر باللون الأحمر offline أنه غير متصل بالنت مع جعل العنصر يستخدم الكلاس 
            else {
                internetStatus.innerHTML = 'You are offline.';
                internetStatus.className = 'offline';
            }
        }

        // لطباعة حالة النت عندما تفتح الصفحة load هنا قمنا بإضافة الحدث
        window.addEventListener('load', updateConnectionStatus);

        // لمراقبة متى يكون جهاز المستخدم متصل بالنت online هنا قمنا بإضافة الحدث
        window.addEventListener('online', updateConnectionStatus);

        // لمراقبة متى يكون جهاز المستخدم غير متصل بالنت offline هنا قمنا بإضافة الحدث
        window.addEventListener('offline', updateConnectionStatus);
    </script>
</body>
</html>