Usando un poquito de Javascript
En el diseño curricular, los cálculos son una parte muy importante, por ello vamos a utilizar el navegador web (Chrome, firefox, Opera, Safari u otros ) como calculadora, mediante el uso de un bloque de programación, para hacer sumas, restas, multiplicaciones o divisiones o incluso tareas mas complejas y repetitivas.Para la actividad de esta clase pueden hacer click con el boton derecho del mouse sobre este link: Archivo de Hoy e ir a la opción "GUARDAR ENLACE COMO" para editarlo en brackets.
Le agregué un estilo de degradado al body como se ve en la línea 8 desde rojo a amarillo hacia la derecha, solo para que luzca un poco más cool, y el color de todos los textos serán blanco como se indica en la línea 6.
¿QUE SON LOS SCRIPTS?
Hasta ahora vimos HTML que es el lenguaje de la web, que permite poner contenidos mas o menos estáticos en pantalla, imágenes, videos, etc.
Un script es un bloque de programación en un lenguaje llamado JAVASCRIPT (que no tiene nada que ver con JAVA, en serio, NADA QUE VER) que permite convertir una página en casi una APP en el navegador web. Tanto es así que hasta hace poco cuando se lanzaba un iPhone o un nuevo dispositivo Android competían sobre cual ejecutaba más rápido Javascript. Algunos televisores actualmente incluso usan Javascript para las operaciones de "smart" en particular los basados en los Televisores LG WebOS.
Para declarar un area de script debemos usar las etiquetas <script></script> entre ambas estará el código que deseamos ejecutar. Para éste ejemplo usé uno de calculos de esta pagina.
Dentro de este pequeño script solo hay una linea (linea 16) que utiliza document.writeln() para crear una salida al Body del documento. En este caso hice un calculo con paréntesis, que incluye SUMA, DIVISION y MULTIPLICACION (el asterico * es ek signo de multiplicar en programación.
Como ven de esta forma podemos agregar más cálculos, pero hagamos algo más interesante como ayudar a Bart Simpson a escribir muchas veces lo mismo. Para eso utilizaremos un ciclo FOR .
Este ciclo (linea 16, 17 7 18 del proximo grafico) se lee de la siguiente manera:
(PARA la variable i que va desde 1 hasta un valor menor a 100, incrementar de a 1)
Scripts Externos
Como vimos antes, podemos meter bloquecitos de codigo aquí o allá, pero eso termina convirtiendo nuestro archivo HTML en algo muy grande, largo y difícil de leer ya que tiene etiquetas HTML y código Javascript.
Para evitar ese problema, podemos guardar los scripts en archivos con extensión .js y "llamarlos" mediante src (como en las imágenes). Para evitar que lo copien, les digo que pueden bajarlo desde éste link (click con el botón derecho en el link>guardar como y ponerlo junto al index.html).
Así quedaría el index.html:
Así es el archivo planetas.js
En este caso, fabriqué una variable por planeta (antes que pregunten, Plutón NO ES un planeta, no voy a iniciar una grieta por eso de nuevo), que son espacios de memoria que contienen un número (el tamaño de memoria en kilómetros, que lo usamos con los chicos de Cuarto en basic256).
Luego usé un document.writeln() para presentar el resultado como respuesta en un H1, por lo cual se requiere COMILLAS (" ") para encerrar todo lo que será texto, y con los signos + concatenamos lo numérico a lo alfanumérico. Entre paréntesis hice la cuenta jupiter/tierra para obtener un resultado de la operación entre los números que contienen.
Esta es una pequeña muestra de lo que puede hacerse en Javascript, nosotros lo usaremos de forma superficial, aunque con P5*JS podremos conectarnos a una poderosa librería que nos permitirá hacer cosas extraordinarias con muy poco código.