P - Tarea JS - 01

tarea Tarea 01 - Cómo ver el resultado del código JavaScript

Ejercicio 1: Crea el script necesario para que aparezca en una página web tu nombre, grupo y curso académico. El script debe estar en la propia página HTML.

Ejercicio 2: Crea el script necesario para que aparezca en una página web el significado, en inglés, de las siglas DOM. El script debe estar en un archivo externo llamado codigo.js dentro de una carpeta llamada js.

Ejercicio 3: Crea el script necesario para que al pulsar un botón de la página HTML aprezca una ventana emergente con el mensaje " ¡ Hola Mundo ! ". El script debe estar en la propia página HTML.

Ejercicio 4: Crea el script necesario para que aprezcan, en consola, dos mensajes: 1º) "JavaScript" y 2º) "ECMAScript® 2015". El primero como resultado de código JS colocado en la página HTML y el segundo como resultado de código JS colocado en el archivo externo codigo.js.

Guarda la tarea en una carpeta llamada [01-ver_codigo] que deberá estar dentro de otra carpeta general llamada [tareas_JS] donde irás guardando todas las tareas propuestas del curso.

Detalles teóricos

El código JavaScript, dentro de un archivo HTML, debe estar encerrado entre las etiquetas script ... /script
El código JavaScript, en un archivo externo, no debe estar encerrado entre las etiquetas script. El archivo externo (con extensión .js) debe llamarse desde el archivo HTML utilizando el atributo src de la etiqueta script (que debe estar vacía). Ejemplo:

<script src="/js/codigo.js"></script>

Podemos colocar código JavaScript, dentro de HTML, en uno o varios de estos lugares:

Antes del cierre /head
Intercalado entre elementos HTML
Incluido dentro de elementos HTML
Antes del cierre /body

Para ver el resultado de las instrucciones JavaScript, podemos utilizar:

El método alert() del objeto window que presenta un cuadro de diálogo con la información que coloquemos (encerrada entre comillas simples o dobles si es texto, o sin ellas si son números) dentro de los paréntesis.
El método write() del objeto document que escribe dentro de la página web la información que coloquemos (encerrada entre comillas simples o dobles si es texto, o sin ellas si son números) dentro de los paréntesis. Este método borra lo que tenga la página.
El método console.log() del objeto window que muestra por consola la información que coloquemos (encerrada entre comillas simples o dobles si es texto, o sin ellas si son números) dentro de los paréntesis.
Utilizando el atributo onclick de un elemento (normalmente un botón), de forma que al pulsar sobre él, se ejecute uno de los métodos decritos anteriormente.

Observación: no es necesario colocar el nombre del objeto window delante de alert, console.log y algunos otros métodos ya que el navegador entiende que es window.

Ejemplo resuelto

Dentro de una página HTML, mostramos un mensaje así:



<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mensajes</title>
</head>
<body>
  <button onclick="document.write('Has pulsado el botón!')">Pulsar</button>
  <button onclick="alert('Esto es una ventana de alerta!')">Ventana</button>
  <script>
    document.write('Hola Mundo!');  // Muestra el mensaje en la misma página HTML
    console.log('Hola Mundo!');     // Muestra el mensaje en la consola del navegador (F12)
  </script>
</body>
</html>

Desde un archivo externo (p. ejm. codigo.js) lo codificamos de este modo:



document.write('Hola Mundo!');  // Muestra el mensaje en la página HTML
console.log('Hola Mundo!');     // Muestra el mensaje en la consola del navegador (F12)

Observación: para que funcione debemos enlazar el archivo codigo.js desde nuestra página HTML, normalmente antes de la etiqueta de cierre /body, de la siguiente forma, suponiendo que dicho archivo está dentro de una carpeta llamada js:

<script src="/js/codigo.js"></script>

Imprimir