-document.write() , (Solo debe usarse para pruebas)
-windows.alert() , (En un cuadro de alerta)
-console.log() , (Se utiliza para depurar)
-innerHTML , (Insertando texto en una elemento HTML)
Hagamos un pequeño ejemplo de todos.
document.write()
Este es un método muy utilizado en pruebas o practicas de aprendizaje, lo único que hay que hacer , es escribir entre paréntesis lo que queremos mostrar.
-En el HTML solo necesitamos una estructura básica y el enlace a nuestro archivo JavaScript
Código HTML
<html lang="en">
<head>
<title></title>
</head>
<body>
<script src="apuntes.js"></script>
</body>
</html>
Código JavaScript
document.write("texto a mostrar")
y en pantalla se mostrara así.
El detalle con este método , es que cuando llamemos este método en un documento ya cargado, hara que se elimine el código HTML.
window.alert()
Utilizara un cuadro de alerta para mostrarnos el texto que le pasemos , pero vayamos al ejemplo;
-En el HTML utilizaremos el código que ya tenemos (Estructura básica con enlace al archivo JavaScript)
Código JavaScript
podemos omitir la palabra window ,ya que esta pertenece a un alcance global
alert("Texto a mostrar")
Se mostrara en consola de la siguiente forma
Console.log()
mostraremos texto en la consola de nuestro navegador
Se utiliza en la practica y generalmente en la depuración (La depuración se vera mas adelante).
Probaremos el método solo modificando el JavaScript
Código JavaScript
console.log("Texto a mostrar")
así se vera en la consola
te dejaremos un articulo sencillo del uso de la consola.
innerHTML
Tocaremos algunas cosas que aun no hemos explicado a detalle , pero trata de seguirnos.
necesitamos acceder a un elemento HTML desde JavaScript , lo aremos con el siguiente método.
document.getElementById(id)
id es igual al identificador que le hemos puesto a nuestra etiqueta HTML
y enseguida de innerHTML el texto que queremos agregar , pero vamos al código.
Código HTML
Estructura básica , enlace JavaScript y escribiremos un párrafo con identificador.
<html lang="en">
<head>
<title></title>
</head>
<body>
<p id="SobreEscribir">Este parrafo deberia Visualizarse</p>
<script src="apuntes.js"></script>
</body>
</html>
Código JavaScript
document.getElementById("SobreEscribir").innerHTML ="Texto nuevo"
Se vera en pantalla lo siguiente.
Observamos que hemos formateado el texto HTML ,para incluir el que tenemos en JavaScript.
Tenemos algunos articulo mas detallados de esta forma de visualizar datos , ya que es la mas utilizada y un poquito mas compleja cuando vas iniciando, pero ntp entraremos mas detalle y uso conforme vayamos avanzando.
Conclusión
Para mostrar datos (Texto , numeros ,etc) al iniciar a practicar este lenguaje se utilizan mucho
-document.write() (Solo debe usarse para pruebas)
-windows.alert() (En un cuadro de alerta)
-console.log (Se utiliza para depurar)
ya que facilitan el entendimiento , pero al ir avanzando terminaremos utilizando
-innerHTML (Insertando texto en una elemento HTML)
-console.log (Se utiliza para depurar)
-En este articulo solamente tocamos el tema de mostrar texto , poco a poco iremos demostrando como se muestran números u otro tipo de datos , no desesperes
Despedida
Esperemos te haya servido de utilidad este articulo , síguenos en nuestras redes sociales para seguir aprendiendo juntos , compártenos cualquier duda o comentario que te haya surgido , puede ayudarnos a crecer a ambos.
Guarda esta imagen como nota de estudio.
No hay comentarios:
Publicar un comentario