El código de ejemplo detalla las diversas formas de generar datos en JavaScript

Autor：Eve Cole Fecha de actualización：2022-08-05 09:45:26

Este artículo le brinda conocimientos relevantes sobre JavaScript. En JavaScript, a diferencia de lenguajes como Java, no tiene ningún método de impresión o salida. En js, se utilizan cuatro métodos para generar datos. Este artículo utiliza código de ejemplo para presentarlo. en detalle, espero que sea de ayuda para todos.

Prefacio

En JavaScript, a diferencia de lenguajes como Java, no tiene ningún método de impresión o salida. Los siguientes cuatro métodos se utilizan generalmente para generar datos.

Utilice window.alert() para que aparezca un cuadro de advertencia.
console.log()
innerHTML escribir elementos HTML
document.write() el documento.

Úsalos a continuación. Mostremos un ejemplo.

window.alert()

crea un nuevo archivo HTML y luego usa VSCode para escribir el siguiente código.

<!DOCTYPE html>
<html>
    <cabeza>
        <meta juego de caracteres="utf-8" />
        <meta nombre="viewport" content="ancho=ancho-dispositivo, escala-inicial=1">
        <título>ventana.alert()</título>
    </cabeza>
    <cuerpo>
        <p>Visualización de ventana emergente</p>
        <tipo de script="texto/javascript">
            window.alert("¡Esta es una prueba emergente!");
        </script>

    </cuerpo>
</html>

Luego abra el archivo anterior con un navegador. Al abrirlo, se mostrará la siguiente ventana emergente. Después de hacer clic en Aceptar, la ventana emergente se cerrará y el contenido se mostrará en la página web.

documento.write()

<!DOCTYPE html>
<html>
    <cabeza>
        <meta juego de caracteres="utf-8" />
        <meta nombre="viewport" content="ancho=ancho-dispositivo, escala-inicial=1">
        <título>documento.write()</título>
    </cabeza>
    <cuerpo>
        <p>Escribir documento HTML</p>
        <tipo de script="texto/javascript">
            documento.write(Fecha());
        </script>

    </cuerpo>
</html>

Después de crear un nuevo archivo HTML y escribir el contenido anterior, se abre el navegador y la página mostrará el siguiente contenido. Puede ver que escribir la hora actual usando document.write() se realizó correctamente. Sin embargo, cabe señalar que si document.write() se carga al mismo tiempo que otro contenido y antes de que se cargue el contenido, se puede mostrar junto con otro contenido. Sin embargo, si se ejecuta document.write() después de que se haya cargado el contenido de la página, todo el contenido cargado previamente será sobrescrito por el contenido escrito.

Mostrar simultáneamente

<!DOCTYPE html>
<html>
    <cabeza>
        <meta juego de caracteres="utf-8" />
        <meta nombre="viewport" content="ancho=ancho-dispositivo, escala-inicial=1">
        <título>documento.write()</título>
    </cabeza>
    <cuerpo>
        <p>Escribir documento HTML</p>
        <button onclick="showDate()">Mostrar hora</button>
        <tipo de script="texto/javascript">
            función mostrarFecha() {
                documento.write(Fecha());
            }
        </script>
    </cuerpo>
</html>

La siguiente es una comparación antes y después de ejecutar document.write() después de cargar la página, lo que indica que llamar a document.write() después de cargar la página sobrescribirá el contenido de la página anterior.

antes y después

imagen-20220228153609330

InnerHTML

JavaScript Si desea acceder a un determinado elemento HTML, puede utilizar el método document.getElementById(id) y luego puede utilizar innerHTML para obtener o insertar el contenido del elemento.

<!DOCTYPE html>
<html>
    <cabeza>
        <meta juego de caracteres="utf-8" />
        <meta nombre="viewport" content="ancho=ancho-dispositivo, escala-inicial=1">
        <título>HTML interno</título>
    </cabeza>
    <cuerpo>
        <p id="inner">Manipular elementos HTML</p>
        <button onclick="changeContext()">Haga clic para modificar el contenido anterior</button>

        <tipo de script="texto/javascript">
            función cambiarContexto() {
                document.getElementById("inner").innerHTML = "Contenido modificado";
            }
        </script>

    </cuerpo>
</html>

Antes de la modificación Después de la modificación

console.log()

Para utilizar console.log() , generalmente se recomienda que nuestro navegador admita la depuración. Luego use la tecla de acceso directo F12 para abrir el modo de depuración y cambie al menú Console en la ventana de depuración. Como estoy usando Edge aquí, se muestra la consola. Esta elección de navegador se basa principalmente en sus propias preferencias, pero generalmente se recomienda Chrome.

<!DOCTYPE html>
<html>
    <cabeza>
        <meta juego de caracteres="utf-8" />
        <meta nombre="viewport" content="ancho=ancho-dispositivo, escala-inicial=1">
        <título>consola.log</título>
    </cabeza>
    <cuerpo>
        <p>Ver en modo de depuración del navegador</p>
        <tipo de script="texto/javascript">
            var número1 = 11;
            var número2 = 10;
            console.log(núm1 + núm2);
        </script>
    </cuerpo>
</html>

En resumen

, lo anterior trata sobre la salida en JavaScript. Aunque no existe un método System.out.println() para imprimir y generar como Java, los cuatro métodos anteriores básicamente pueden satisfacer las necesidades del desarrollo diario.