T - JavaScript útil dentro de HTML

tip Aquí os dejo algunas llamadas a código JS dentro de HTML que nos pueden resultar útilies en ciertas ocasiones:



<!-- Ejemplo 1: una ventana de alerta -->
<a href="javascript:alert('Esta es una alerta!');">Hacer clic para abrir una ventana</a>

<!-- Ejemplo 2: imprimir una página web -->
<a href="javascript:window.print();">Imprimir esta página</a>

<!-- Ejemplo 3: recargar la página -->
<a href="javascript:window.location.reload();">Refrescar la página</a>

<!-- Ejemplo 4: ejecutar una función al cargar la página -->
<body onload="miFuncion();"> 

<!-- Ejemplo 5: salir de la página -->
<script>
function salir() {
  var pregunta = confirm("Salir de esta página?");
  if (pregunta){
    alert("Gracias por su visita");
    window.location = "http://www.google.com/";
  } else {
  alert("Gracias por permanecer en mi página!");
  }
}
</script>
<button onclick=" salir()"> Salir de la página </button>

<!-- Ejemplo 6: Abrir una nueva ventana de navegador -->
<script>
  function abrirPagina() {
    window.open("https://www.3con14.pro", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400");
  }
</script>
<button onclick="abrirPagina()">Abrir página en nueva ventana</button>

Cambiar algunos estilos de los elementos de una página web con Javascript

Más abajo he colocado un div con el id="demo" para que observéis algunas de las cosas que podemos hacer con JavaScript.

  • Hacer clic para poner en azul el primer párrafo
  • Hacer clic para tachar el texto del segundo párrafo
  • Hacer clic para poner en negrita el título de la caja
  • Hacer clic para cambiar el color de fondo de la caja "demo"
  • Hacer clic para ocultar la caja "demo"
  • Hacer clic para mostrar la caja "demo"
  • Refrescar la página

Y de esta forma podríamos hacer todo lo que se nos ocurra.

Texto tipográfico Lorem ipsum

Primer párrafo: lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas officia quae praesentium tenetur iure tempora odio et officiis quaerat facere consequatur molestias, sint fuga, dolorem itaque sed ut repellat qui!

Segundo párrafo: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas sequi impedit inventore asperiores porro, architecto nobis corporis a molestiae? Eaque, libero quae debitis consequuntur cupiditate, perspiciatis nemo nulla quod sit!

Código de todos los cambios anteriores:



<ul>
<li>Hacer <a href="javascript:void(document.getElementById('p1').style.color='blue')">clic</a> para poner en azul el primer párrafo</li>
<li>Hacer <a href="javascript:void(document.getElementById('p2').style.textDecoration='line-through')">clic</a> para tachar el texto del segundo párrafo</li>
<li>Hacer <a href="javascript:void(document.getElementById('tit').style.fontWeight='900')">clic</a> para poner en negrita el título de la caja</li>
<li>Hacer <a href="javascript:void(document.getElementById('demo').style.backgroundColor='#deb887')">clic</a> para cambiar el color de fondo de la caja "demo"</li>
<li>Hacer <a href="javascript:void(document.getElementById('demo').style.visibility='hidden')">clic</a> para ocultar la caja "demo"</li>
<li>Hacer <a href="javascript:void(document.getElementById('demo').style.visibility='visible')">clic</a> para mostrar la caja "demo"</li>
<li><a href="javascript:window.location.reload();">Refrescar la página</a></li>
</ul>

Visitas...

Hoy ........ 0

Ayer ....... 1

Mes ........ 37

Total ........ 5556

En línea...

Hay 6 invitados y ningún miembro en línea

< 3con14 - LAB / >

1998 - 2017, www.3con14.biz
(cc) Jesús Plaza M.
RECONOCIMIENTOS