Preguntas que pueden parecer simples, como la de cómo cambiar el título de la pestaña del navegador con JavaScript, son fundamentales para el desarrollo y aprendizaje en el camino de la programación y el desarrollo web. Es de esta manera como se aprenden las bases y se construye un camino exitoso. Así pues, para ayudarte, a continuación te contaremos cómo cambiar el título de la pestaña del navegador con JavaScript.
Seguramente has llegado aquí porque estás realizando una de tus primeras páginas web o un ejercicio relacionado y necesitas ayuda para poder cambiar el título de la pestaña de tu navegador. Para ayudarte con este y otros proyectos futuros, te contaremos cómo hacerlo.
Cómo poner un título a la pestaña
Para empezar y antes de enseñarte cómo cambiar el título de la pestaña del navegador con JavaScript, tenemos que hablar sobre cómo poner el título de la pestaña.
Para hacerlo hay varios formas, pero para que entiendas su relación con el siguiente proceso, te hablaremos acerca del método document.title o solo title. A continuación lo veremos bajo el fichero del lenguaje de marcado de HTML:
<head>
<title>
Bootcamps de Keepcoding
</title> </head>
De esta manera, ya habremos dibujo el título
Cambiar el título de la pestaña (cuando se cambia de página)
Ahora que sabes cómo poner el título de la pestaña, vamos a pasar al extracto de código que se utiliza para cambiarlo. Aquí debes incluir el proceso que has realizado hace un momento con las etiquetas <title> </title>. Utilizarás una de las distintas formas en las que se puede cambiar el título de la pestaña.
Lo haremos a partir de un botón que deberá pulsar el usuario y, con la construcción de una función en JavaScript, podrás establecer el método changePageTitle().
Acompañado de métodos como newPageTitle y document.title, que corresponde a la figura del primer título establecido.
<!DOCTYPE html>
<html>
<head>
<title>
Bootcamps de Keepcoding
</title>
</head>
<p>
Pulsa el botón para cambiar el título de la pestaña: "Desarrollo Web Full Stack Bootcamp"
</p>
<button onclick="changePageTitle()">
Cambiar el título de la pestaña
</button>
<script type="text/javascript">
function changePageTitle() {
newPageTitle = 'Desarrollo Web Full Stack Bootcamp';
document.title = newPageTitle;
}
</script>
</body>
</html>Consigue dominar JavaScript
Si bien, gracias a este artículo, ya sabes cómo cambiar el título de la pestaña del navegador con JavaScript, tal vez tengas más preguntas similares a esta u otras más complejas. Por eso, te recomendamos visitar el temario del Desarrollo Web Full Stack Bootcamp, donde nos enfocaremos en JavaScript. ¡Anímate e inscríbete pronto! Es una oportunidad que no te puedes perder, ya que, en pocos meses, conseguirás convertirte en un experto en el sector.
