Crear una botones de avance y retroceso en JavaScript

Un objeto es un grupo de datos que se almacena como una serie de pares de nombre y valor encapsulados en una sola entidad. En este artículo, vamos a aprender diferentes maneras a crear un objeto en JavaScript .

La navegación es una parte importante de un sitio web. Un sitio web de fácil navegación ayuda a mejorar la experiencia del usuario y el visitante se sienta cómodo. En este artículo vamos a aprender cómo crear un botones de avance y retroceso en JavaScript ?

La navegación es una parte importante de un sitio web. Un sitio web de fácil navegación ayuda a mejorar la experiencia del usuario y el visitante se sienta cómodo. La navegación no sólo incluye enlaces del menú de navegación y pie de página, sino también hacia adelante y hacia atrás de navegación durante la navegación por la página web también es importante.

En este artículo, vamos a crear un hacia adelante y un botón de retroceso en JavaScript . Aviso que tiene la misma funcionalidad que la parte trasera y botones de avance en el navegador. Pueden ser útiles cuando alguien está viendo su sitio web en el modo de pantalla completa y pueden navegar fácilmente hacia adelante y hacia atrás páginas web.

Definamos primero HTML. Vamos a crear dos botones, uno class hacia delante y otra hacia atrás for.

Código – HTML

<button id="back" onclick="goBack()">BACK</button>
<button id="forward" onclick="goForward()">FORWARD</button>

Luego aplicamos onclick parametros que ejecutará las funciones mencionadas, cuando se hace clic en estos botones. El goBack () y GoForward () funciones se definen a continuación.

Código – JavaScript

function goBack() {
window.history.back();
console.log('We are in previous page');
}
function goForward() {
window.history.back();
console.log('We are in next page');
}

En estas funciones, tenemos un objeto de la ventana global que tiene por objeto la historia en ella. El objeto de historial se utiliza para navegar utilizando las dos funciones atrás () a ir hacia atrás y hacia adelante () para seguir adelante. Si no hay maneras delante o hacia atrás para el final, esta función no funcionará.

Luego imprimimos el mensaje en la consola para que los usuarios sepan que han cambiado de página.

He aquí una demostración del siguiente programa.

DEMO

HTML con JavaScript

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Javascript back demo</title>
</head>
<body>
<h1>PAGE 1</h1>
<p>Go to <a href="javascript-back-demo-two.html">Next Page</a></p>
<button id="back" onclick="goBack()">BACK</button>
<button id="forward" onclick="goForward()">FORWARD</button>
<script id="jsbin-javascript">
function goBack() {
window.history.back();
console.log('We are in previous page');
}
function goForward() {
window.history.back();
console.log('We are in next page');
}
</script>
</body>
</html>

salida

Create a forward and back buttons in JavaScript - 4

Si te gusta este artículo, comparta sus pensamientos y preguntas en los comentarios.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *