Índice

Ejemplo completo

Apliquemos todo esto con el siguiente ejemplo.

images/CAP25IMG03.png

Tanto las imágenes como los archivos de los ejemplos están disponibles en el espacio de descarga asociado a esta obra.

Un archivo JavaScript (script.js)

Para este ejemplo, tenemos el archivo JavaScript externo script.js, que tiene como función mostrar el estado conectado o fuera de línea.

function init(){ 
if (!window.applicationCache){ 
msg = "La API offline no está implementada"; 
document.querySelector(’#box’).innerHTML =  msg; 
} 
if (window.navigator.onLine) { 
document.querySelector(’#caja’).className= ’online’; 
msg = "Conectado"; 
document.querySelector(’#caja’).innerHTML =  msg; 
} else { 
document.querySelector(’#caja’).className= ’offline’; 
msg = "Desconectado"; 
document.querySelector(’#caja’).innerHTML =  msg; 
} 
}

Un archivo de hojas de estilo CSS externa (style.css)

a { color: black; } 
#box{ margin: 0px auto; 
      background: white; 
      width: 340px; 
      border:5px solid rgb(195,215,235); 
      padding-left:5px;  
      -webkit-border-radius: 10px; 
      -moz-border-radius: 10px; 
      border-radius: 10px;} 
#caja { width: 80px;  
         border: 1px solid black; 
       ...