Cómo cambiar el título de la pestaña del navegador con JavaScript

Autor: | Última modificación: 3 de octubre de 2022 | Tiempo de Lectura: 2 minutos
Temas en este post: ,

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.

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.

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!