Módulo 4. Escribiendo código.

Introducción.
En este último módulo vamos a poner en práctica los temas conceptuales
de programación, y para ello usaremos uno de los lenguajes más sencillos
de que disponemos, para practicar.
Se trata de JavaScript, un lenguaje interpretado, un estándar incluido en
los navegadores web, que, sin instalar nada, nos permite practicar de forma
simple cada uno de los temas teóricos del curso.
JavaScript es un lenguaje multiplataforma orientado a objetos, liviano, que
te permite realizar actividades complejas en una página web.
Es un lenguaje de programación interpretado, por lo que no es necesario
hacer nada con estos programas, ni tan siquiera compilarlos. Los programas
escritos con JavaScript se pueden probar directamente en cualquier
navegador sin necesidad de procesos intermedios.
Hoy en día, las páginas hacen más que solo mostrar información estática o
imágenes, también permiten actualización de partes de su contenido en el
momento, posibilitan interactuar con mapas y gráficas de manera online y
brindan al usuario una experiencia de navegación mucho más amena y
dinámica.
Debido a su propósito y uso general, todos los navegadores web modernos
interpretan correctamente JavaScript y su uso está por lo general
relacionado con la interfaz de usuario que presenta un sitio web.
Permite crear en una página web, elementos como cuadros de diálogo,
recolectores de información de parte del usuario y pequeños procesos de
seguridad sobre los datos enviados al servidor.
Por ser un lenguaje abierto, existen variantes, como por ejemplo la versión
de Microsoft conocida como JScript que utilizan tanto el navegador Internet
Explorer como el sistema operativo Windows bajo el nombre de Windows
Scripting Host.
Pese a ser utilizado del lado del cliente, también existen implementaciones
del lado del servidor que son ampliamente utilizadas, como por ejemplo
Node.js.
A pesar de todos los cambios y actualizaciones, JavaScript mantiene la
compatibilidad hacia versiones anteriores.

Páginas web dinámicas.

Una página web dinámica, es una página que va actualizando su contenido
a medida que el usuario va realizando peticiones, ya sea navegando por la
propia página, o actualizando todo o parte de su contenido.
A diferencia de las páginas estáticas, que tienen su contenido
predeterminado, las páginas dinámicas, la información tiene un ciclo de vida
determinado por el usuario.
Esto es posible porque la página tiene asociada una aplicación web o una
base de datos que le permite modificar su contenido a demanda.
Los principales lenguajes para el desarrollo de este tipo de páginas web son
ASP, PHP, JSP y por supuesto JavaScript.

Programa, aplicación y sistema.

Mucho antes del uso masivo de internet del que gozamos hoy en día, era
habitual adquirir programas para instalar en nuestras computadoras
personales.
Estos programas iban desde lo más elemental, como un editor de texto a
desarrollos verdaderamente complejos, como el AutoCAD o completos
paquetes que integraban varios programas en un solo entorno para el
usuario.
Un programa informático es un conjunto de instrucciones que le damos a la
computadora para que las ejecute.
Con el tiempo, empezaron a hacerse populares los dispositivos móviles,
como las tablets y los teléfonos inteligentes, y con ellos se popularizaron las
tiendas de aplicaciones.
¿Cuál es la diferencia entre un programa y una aplicación?
Las aplicaciones son programas informáticos con un objetivo concreto, por
ejemplo, en nuestros teléfonos tenemos una aplicación destinada a escanear
documentos, otra a decirnos el clima en nuestra ciudad, etc.
En general son de un tamaño mucho menor al de un programa y consumen
menos recursos, lo que las hace ideales para este tipo de dispositivos.
Su principal función es la de ayudar al usuario en la realización de una
determinada tarea, a diferencia de los programas, que en general requieren
de un curso o capacitación para poder utilizarlos, las aplicaciones son por
demás intuitivas y muy sencillas de utilizar.
Por último, tenemos a los sistemas. Es importante no confundir sistemas
informáticos con sistemas operativos.
Un sistema operativo, es el conjunto de programas destinados a administrar
los recursos de la computadora o más específicamente, los recursos de
hardware del equipo, ya sea PC, Tablet, teléfono, etc.
Un sistema informático, incluye al sistema operativo y a las aplicaciones o
programas y en general también suelen incluir los recursos humanos
necesarios para su funcionamiento.
Básicamente es el conjunto de software (aplicaciones, programas, sistema
operativo) y hardware.
Hoy en día es difícil que como desarrolladores nos pidan algún trabajo que
no se relacione con otros sistemas, con bases de datos, redes sociales u
otros desarrollos en la nube.

El lenguaje JavaScript.
JavaScript (que no debe ser confundido con Java) fue creado en mayo de
1995 por Brendan Eich, programador en Netscape.
El nombre original del lenguaje era Mocha, elegido por uno de los
fundadores de Netscape.
En mayo de ese mismo año se cambió a LiveScript y finalmente, en el mes
de diciembre, se lo bautizó JavaScript.
En 1996 el lenguaje fue llevado a ECMA, una organización internacional
dedicada, entre otras cosas, a estandarizar el uso de las tecnologías de
información y comunicación de dispositivos electrónicos, con la idea de
hacer del lenguaje, un estándar que pudiera ser utilizado por otros
proveedores de navegadores web.
Esto llevo a la liberación oficial de ECMAscript, que es el nombre oficial de
la norma.
Define un lenguaje de tipos dinámicos, ligeramente inspirado en Java y en
lenguaje C, soporta algunas características de la programación orientada a
objetos, mediante el uso de prototipos y pseudoclases.
Cada navegador tiene su propia implementación del estándar ECMAscript,
al igual que soporte para el acceso al Document Object Model (DOM) que
facilita la manipulación de las páginas web.
Mientras todo esto sucedía y JavaScript se imponía como un estándar, las
diferentes comunidades de desarrolladores comenzaron a trabajar para
sacarle el máximo provecho al lenguaje, y así nació, en 2005, un conjunto
de tecnologías, de las cuáles JavaScript era el núcleo principal,
denominadas Ajax, cuyo mayor uso se hacía en las aplicaciones web,
permitiendo cargar los datos de la página en segundo plano, evitando la
necesidad de cargar la página completa, dando como resultado, páginas
mucho más dinámicas.

JavaScript HTML.
La integración entre JavaScript y HTML es muy simple y variada, ya que
tenemos, al menos tres maneras de hacerlo.
1) Escribir JavaScript en el propio documento HTML.
Podemos escribir nuestras sentencias entre las etiquetas <script> </script>
y se pueden incluir en cualquier parte del documento, aunque lo usual es
incluir todo el bloque de código dentro de la cabecera del documento, es
decir, dentro de la etiqueta <head>.
Para que la página web sea correctamente interpretada, deberá agregarse el
atributo type a la etiqueta <script>, y los valores a los que se iguala este
atributo están estandarizados, para el caso de JavaScript, el valor correcto
es text/javascript.
Este método se utiliza cuando solo necesitamos un pequeño bloque de
código que sea específico para el documento en donde se lo incluye, por lo
que no será reutilizable, y si llegáramos a incluir dicho código en más de un
documento, se nos complicará el mantenerlo, ya que para cualquier tipo de
modificación en el mismo, tendremos que modificar todos los documentos
en los que lo hayamos utilizado.
A continuación, un ejemplo de cómo utilizarlo:

Así se ve por pantalla.

2) Incluir JavaScript desde un archive externo.
Nuestras sentencias se pueden escribir y guardar en un archivo con la
extensión .js que luego será incorporada al documento HTML mediante la
etiqueta <script>.
Se pueden incluir en un documento HTML tantos archivos JavaScript como
sean necesarios.
En este caso, además del atributo type será necesario también, asignarle un
valor al atributo src que es el que contiene la URL correspondiente al archivo
JavaScript que deseamos incorporar. Cada etiqueta <script> puede definir
la ruta a un único archivo, pero podemos incorporar tatas etiquetas como
sean necesarias.
Un archivo con extensión .js es un archivo de texto normal que se puede
crear o editar con cualquier editor de texto.
La mayor ventaja de este método, es la reutilización del código, lo que
facilita, como vimos en el punto anterior, el mantenimiento de nuestras
aplicaciones.
Por ejemplo:
3) Incluir código JavaScript dentro de las etiquetas HTML.
Es la forma menos utilizada y consiste en crear bloques de código JavaScript
dentro de las propias etiquetas HTML para afectarlas en su comportamiento.
Sus principales desventajas son la no reutilización del código y la manera
de ensuciar innecesariamente nuestro código HTML.

Y así se ve por pantalla:

Herramientas de trabajo.
Para escribir y probar nuestro código vamos a hacer uso de dos
herramientas muy simples.
- Editor de texto (Notepad++, VS Code, SublimeText, etc).
- Navegador Web.
Es recomendable crear una carpeta de trabajo donde iremos alojando los
diferentes archivos que vayamos creando.
En general iremos probando nuestras primeras líneas de código dentro de
un archivo HTML como el de la siguiente imagen:

Sintaxis.
La sintaxis de JavaScript es muy similar a la de otros lenguajes, veamos
las principales características:
1. No importan las nuevas líneas y los espacios en blanco al igual que
sucede en HTML ya que el propio intérprete del lenguaje los ignora.
2. Es case sensitive: distingue entre las mayúsculas y minúsculas.
3. A diferencia de otros lenguajes de programación no se define el tipo
de las variables (var). En JavaScript nunca sabemos el tipo de datos
que va a contener una variable por lo que una misma variable puede
almacenar diferentes tipos de datos.
4. Cada sentencia en JavaScript acaba con el carácter; (punto y coma),
aunque no en necesario ya que el intérprete lee cada sentencia,
aunque no exista este carácter. Por convenio deberíamos incluirlo.
 5. Existe la opción de incluir comentarios para añadir información en el
código fuente del programa. Estos comentarios suelen servir para dar
información al propietario del código u otro desarrollador sobre el
contenido del bloque de código en JavaScript. Los comentarios
pueden ser de una sola línea o de varias líneas (en bloque).

Variables.
Sin las variables sería imposible escribir y crear "programas genéricos", es
decir, códigos que funcionan de la misma manera independientemente de
los valores concretos usados. Las variables en JavaScript se utilizan
mediante la palabra reservada VAR.
Dicha palabra se utiliza solamente para definir por primera vez una variable,
lo que en programación se denomina “declarar una variable”.
A continuación de la palabra VAR debemos escribir el nombre que queremos
darle a la variable y luego el valor que queremos asignarle, en caso de querer
hacerlo.
Al nombre de la variable se lo conoce como IDENTIFICADOR y debe cumplir
con dos reglas muy importantes:
1- El identificador únicamente puede estar formado por números,
letras, y los símbolos ‘$’ y ‘_’ a lo sumo.
2- El primer carácter del identificador no debe ser un número.
Por ejemplo, queremos declarar dos variables llamadas valor1 y valor2 y
asignarle un valor entero a cada una:

Recordemos que no es necesario declarar un tipo de dato para las variables,

y podemos reutilizar el nombre, incluso con diferentes tipos de datos, por
ejemplo:

Salida por pantalla.

Vamos a ver a continuación como podemos visualizar por pantalla, desde el
explorador web, lo que necesitemos mostrar al usuario, por ejemplo, los
mensajes de alerta.
Para eso tenemos la función ALERT mediante la cual no solamente podemos
mostrar un mensaje, sino también el valor de una o más variables.
Hagamos el ejemplo dentro de un archivo HTML:

Si guardamos el archivo y lo abrimos con el navegador web, por ejemplo,

Firefox, veremos el mensaje al usuario:

Veamos un ejemplo de cómo visualizar una variable mediante la función

ALERT.
Modificamos nuestro código para declarar una variable, asignarle la frase
HOLA MUNDO y mostrarla a l usuario.
Así se verá por pantalla:

Veamos a continuación como mostrar más de una variable.

El salto de línea se logra agregando \n entre las variables, así se ve por
pantalla:

Tipos de datos.
Ya vimos que todas las variables en JavaScript se crean a través de la
palabra reservada VAR pero dependiendo de los valores que almacenen
pueden ser de un tipo u otro.
Veamos los tipos de datos que podemos utilizar en JavaScript.

Numéricos.
Se usan para contener valores numéricos enteros (llamados integer) o
decimales (llamados float) en el cual utilizamos el punto para separar la
parte entera de la parte decimal:
Cadenas de texto.
Se usan para contener caracteres alfanuméricos, palabras o frases enteras,
como por ejemplo el famoso HOLA MUNDO.
El texto que carguemos en una variable siempre va entre comillas, que
pueden ser simples o dobles, como se ve en la imagen a continuación.

Si quisiéramos que nuestra frase o texto incluyera comillas, lo que

deberemos hacer es no utilizar el mismo tipo de comillas para mostrar por
pantalla que para encerrar el texto.

En el primer caso, para encerrar todo el texto a mostrar, utilizo las comillas
simples, por lo que uso las comillas dobles para mostrarlas por pantalla.
En el segundo caso hago lo contrario. Esto es lo que se ve por pantalla:
Arrays.
Un array es una colección de variables, sin importar los tipos de los que
sean cada una. Sirven para guardar colecciones de valores, de manera que
serviría para agrupar diferentes variables. Por ejemplo, tenemos esta
sucesión de variables con los días de la semana:

15
Si quisiéramos manipularlas todas juntas no podríamos hacerlo,
tendríamos que buscar la forma de relacionarlas o crear alguna estructura
de código compleja que nos permita poder trabajar con todas las variables
en un mismo paso.
Para eso existe el ARRAY también conocidos como arreglos o vectores.
Para declararlos procedemos de la misma manera que lo hacíamos con las
variables, utilizando la palabra VAR y sin necesidad de especificar ningún
tipo de dato.
Esta es la sintaxis básica para declarar un array:

Como siempre, cuando trabajamos con cadenas de texto, debemos usar

comillas, ya sean simples o dobles.
Cada uno de los componentes del array se denomina elemento, y
recordemos que no es necesario que los elementos de un array sean todos
del mismo tipo:

Cada elemento del array ocupa una posición, y estas posiciones se empiezan
a contar desde el número 0 (cero).
En nuestro ejemplo de la imagen, el elemento ‘lunes’ ocupa la posición cero,
el elemento 56 ocupa la posición uno y finalmente, el elemento 123.7 ocupa
la posición dos.
A esta posición de cada elemento se la denomina índice, y es precisamente
mediante dicho índice que podremos acceder al valor guardado en el array,
por ejemplo, para mostrarlo por pantalla:

En nuestro ejemplo de la imagen 2-17 tenemos un array llamado ‘semana’

con tres elementos y mostramos por pantalla al elemento cuyo índice es el
número uno.
Para indicar el índice de un elemento, utilizamos los caracteres [ ].

Booleanos.
Las variables de tipo booleano también son llamadas o denominadas con el
nombre de variables de tipo lógico. Estas variables suelen servir para
condiciones o para la programación lógica.
Las variables de este tipo almacenan un tipo particular de valor que solo
puede tomar dos valores, TRUE o FALSE (verdadero o falso).
No podemos utilizar este tipo de variables para almacenar otro tipo de dato,
como, por ejemplo, una cadena de texto.
Para ver la utilidad de este tipo de variables es necesario avanzar más en la
programación en JavaScript, por lo que más adelante veremos casos
prácticos de aplicación.