Conceptos básicos de POO

Una variable es local normalmente en cualquier lugar en la que aparece acotada por llaves.

Se pueden tener una variable global y local que se llamen igual, pero no es recomendable, porque induce a confusión y hace más complejo trabajar con ellas.

Los operadores son instrumentos básicos para realizar operaciones en cualquier lenguaje de programación.

Recuerda que en Javascript el operador = se utiliza para la asignación de valor a una variable.

Operadores aritméticos

Los operadores aritméticos sirven para realizar manipulaciones matemáticas sobre el valor de las variables numéricas.

Un operador aritmético siempre dará como resultado un número.

Vamos a realizar algunos ejercicios para conocer su funcionamiento:

• Suma. A partir de este código, realiza la suma de dos variables. [Solución]
• Multiplicación y división. A partir de este ejemplo: a) Inicializa las dos variables dándoles un valor numérico. b) Crea una tercera variable y asígnale un valor. c) Escribe sobre este texto el resultado de multiplicar x * y, y dividir el resultado por la tercera variable. [Solución]
• Incremento y disminución. El incremento y disminución sirven para aumentar o disminuir un número dado. Sobre el ejemplo, vamos a restar de nuevo, con el operador de disminución para que se vuelva a quedar la variable en 5. a) Crea un nuevo párrafo con id “disminución”; b) utiiza el operado de dismunición para x; c) crea una nueva variable que asigne el valor a x; d) escribe el resultado en el párrafo disminución. [Solución]

Los operadores aritméticos se pueden combinar con el operador de asignación.

En este enlace del tutorial JS del W3School puedes profundizar en cómo funcionan el reto de operadores aritméticos.

Operadores relacionales y condicionales

Los operadores condicionales o relacionales permiten comparar números y son esenciales para realizar aplicaciones complejas que se basen en el cumplimiento de condiciones

Un operador relacional siempre dará como resultado un valor booleano.

Veamos algunos ejemplos de operadores relacionales:

• Igual a ==. Hace una comparativa entre una sentencia y el valor esperado. Si el valor es cierto, dará como resultado «true»; en caso contrario, indicará «false».
• Igual valor e igual tipo ===. Como en el anterior, hace una comparativa entre una sentencia y el valor esperado, pero en este caso solo dará «true» si es igual el valor y el tipo de dato; en caso contrario dará «false». Por ejemplo, el valor 12 (number) y «12» (string) darían false porque son igual valor pero distinto tipo.

Operadores lógicos

Los operadores relacionales sirven para realizar operaciones lógicas de comparación y se utilizan para tomar decisiones en los scripts.

Se utilizan valores booleanos, por lo que un operador relacional siempre dará como resultado un valor booleano.

Los operadores lógicos son:

• Negación lógica
• AND (&&)
• OR (||)

La POO (Programación Orientada a Objetos) es un paradigma de programación que permite optimizar los procesos de programación y los resultados que se obtienen con ellos. Permite pre-diseñar objetos que son almacenados en librerías o bibliotecas para que puedan ser reutilizados por los programas sin necesidad de tener que volver a escribir las funciones necesarias cada vez que se quiere hacer uso de ellas.

Javascript es uno de los muchos lenguajes que funcionan bajo este paradigma. Dentro de las dos corrientes existentes (basarse en clases o basarse en prototipos), JS corresponde al modelo basado en prototipos en el que solo hay objetos. Otros lenguajes similares en este sentido, muy utilizados actualmente, son Python y Ruby.

Elementos fundamentales

Los elementos fundamentales de la POO incorporan un número amplio de componentes (clase, herencia, objeto, método..), pero nos centraremos solo en los que resultan fundamentales para manejarnos en el entorno de trabajo de un proyecto periodístico

• Objetos
• Eventos
• Funciones
• Métodos

Objetos

Un objeto es una entidad definida por un estado, caracterizado por un conjunto de atributos que toman valores (datos) concretos, un comportamiento definido por los métodos, operaciones o mecanismos de interacción que pueden realizarse sobre él, y una identidad que le diferencia del resto (un identificador).

Eventos

Los eventos son sucesos, producidos normalmente por una acción del usuario, que producen algún efecto. Por ejemplo, cuando un usuario pulsa un botón o hace clic sobre un enlace.

Algunos de los eventos DOM más habituales son:

Veamos un par de ejemplos para entender cómo funcionan:

– Onload. Lanza un comportamiento cuando se ha cargado la página completamente.

– Onmouseover. Cuando pasamos por encima de un elemento, se lanza el comportamiento.

Hay muchos otros eventos como el blur que es cuando se dispara el evento al perder el foco un elemento, o On Keyup que ejecuta el evento cuando el usuario suelta una tecla.

Aquí puedes ver un ejemplo del funcionamiento de onkeyup, que se utiliza en muchas ocasiones para modificar los datos de entrada en un formulario. En este caso, transforma las letras minúsculas en mayúsculas.
Todo evento lleva asociado, normalmente, una función.

Las funciones son fragmentos de código que realizan alguna acción cuando son invocadas por un evento. Por ejemplo, cuando el usuario pulsa el botón, y sucede algo.

Visto en código, y explicado, sería esto:

Estos dos conceptos están directamente vinculados ya que, como detallaremos, las librerías son almacenes de funciones y comportamientos, y las APIs son, simplificando, las instrucciones que tenemos para utilizar dichas funciones de la librería.

Técnicamente una librería o biblioteca (library) es una colección de implementaciones de comportamiento, pero lo entenderemos mejor si decimos que es una larga lista de código de programación que incluye un amplio número de funciones que podemos utilizar desde nuestro programa con un esfuerzo limitado.

Por su parte, una API (Aplication Programming Interface) es una especificación formal que permite comunicar componentes de software de dos sistemas distintos. Para entendernos, es una especie de “subcontratación” de funciones.

Una API es el libro de instrucciones que nos permite conocer cómo trabajar con el conjunto de funciones, procedimientos y objetos contenidos en la librería o biblioteca con la que vamos a trabajar.

Como señala de forma gráfica Diego Ceballos, en un ejemplo cotidiano, una cafetera Nespresso sería una librería para hacer café de forma rápida, y su libro de instrucciones sería la API.

Ventajas de trabajar con Librerías y APIs

Trabajar con Librerías y APIs permite aligerar el desarrollo, ya que alguien ha escrito el código por nosotros para resolver muchos de las cuestiones que queremos hacer con nuestro programa. Por ejemplo, si trabajamos con la librería de Google Maps tendremos a disposición numerosas funciones para dibujar el mapa o representar cosas sobre él.

La ventaja es que dichos elementos pueden ser invocados desde otros componentes software para acceder a servicios y realizar procesos.

Es decir, nos conectamos con ella y aprovechamos todas las posibilidades que ya se han programado en ella sin volver a escribir ese código. Esto resulta muy útil.

API Keys

Para usar una API normalmente se requiere una API Key de autenticación para conectarse con el servicio. Ello permite establecer los límites de cuota por Key y no por IP. Además, esto permite comunicar al servicio con la aplicación solicitante.

Obtener la API Key de Google Maps

En primer lugar, debemos obtener la Key API de navegador (con cuenta de Google):

1.Accedemos a Google API Console

2.Creamos un nuevo proyecto

• Le damos nombre a la Clave API (no restringimos clave)
• Nos dará la clave de API

Nota: Restricción de clave. Si fuese para un proyecto real, tendríamos que restringir la clave bien por URL, dirección IP, o una app creada, por seguridad y evitar robos de cuota. En este caso, como es para hacer una práctica, no lo haremos para no tener que realizar más pasos.

Límites de cuota

Habitualmente las API tienen un número máximo de llamadas al servicio gratuitas.

En el caso de Google Maps API el uso estándar gratuito está establecido en estos límites:

• Para crear mapas
• Parar incorporar animaciones
• Para desarrollar aplicaciones
• Para acceder y manipular los elementos del DOM de forma sencilla
• Para trabajar con imágenes y gráficos
• Para visualizar datos

En este enlace puede verse una amplia comparativa de librerías.

AnyChart

Para trabajar con un ejemplo de librería de gráficos o DataViz, para usar el Playground de AnyChart.

Nota: Recordad que tenéis que copiar el código o embeber el ejemplo  en vuestro porfolio de JSFiddle para que quede recogido en este.

Pasos

1. Vamos a usar el ejemplo de un gráfico circular. Veamos en este ejemplo el código que genera.

2. Modifica el título, las categorías, incluye una nueva y haz cualquier otro cambio para crear un gráfico que te pueda servir de base para cualquier trabajo que estés realizando. Si quieres profundizar, puedes hacerlo en la documentación.

3. Cuando finalices, copia el código o embeber el ejemplo en tu porfolio de JSFiddle para que quede recogido en este.

 nced settings.

Google Charts

Google Charts es otro ejemplo de librería completa para realizar visualizaciones de datos.

Vamos a ver cómo trabajar un ejemplo:

1. Accede a la Galería de gráficos

2. Selecciona el diagrama de Sankey.

3. Copia el código y pégalo en tu JsFiddle. El resultado debería ser similar a este.

4. Modifica los parámetros para ajustarlo a un modelo de visualización que te pueda ser útil.

Utilidad

Una función es un bloque de código que puede ser ejecutado cuando es llamada por un evento

Son muy útiles porque es muy habitual reutilizar código con diferentes argumentos a lo largo de un programa, por lo que podemos utilizar la función sin tener que escribir de nuevo el código, sólo invocándola

Nota: Como veremos más adelante, los paréntesis que van detrás del nombre de la función sirven para pasar parámetros (información) a la función.

Sintaxis

Una función se define del modo siguiente:

¿Cómo se llama a una función?

Para llamar a una función hay que invocarla en cualquier parte de la página web.

Cuando se invoca una función, todo el código que contenga entre llaves {} se ejecuta

Para invocarla, basta con escribir su nombre seguido de paréntesis

Ejemplos

Veamos un ejemplo explicado para el uso de las funciones.

Ejemplo sencillo. En este caso, la función, llamada cambiaTexto, escribe en el objeto documento el texto que se pasa como argumento en el método write.

Ahora podemos hacer una variante escribiendo dentro del script, directamente la función para invocarla: cambiaTexto(); y se escribirá el texto directamente sin llamar al botón.

Ejercicio

Vamos a realizar ahora un ejercicio para comprobar cómo opera una función.

1. Abre https://jsfiddle.net/
2. Escribe una función llamada escribeConsola
3. Haz que registre, en la consola, el siguiente string o cadena de texto: “Esta es mi primera función que aparece en la consola
4. Abre la consola para comprobar el resultado

Solución

Pasos: 1. Abrimos la consola JS del navegador

2. Escribimos la función

function escribreConsola()      {        console.log(“Esta es mi primera función que aparece en la consola”);      } 3. La invocamos escribeConsola()

Vamos a adentrarnos en el uso de funciones. Para ello, vamos a trabajar con la API de Google Maps que es una amplia librería dirigida a la creación de complejas aplicaciones de mapas.

Crear un mapa simple incluyendo un marcador

La elaboración de este mapa nos permitirá comprender mejor cómo operan las funciones.

Vamos a elaborar un mapa sencillo en el que incluiremos un marcador:

1. Creamos el código html. Fíjate que en el head se hace la llamada a la API. El parámetro callback ejecuta la función initMap cuando se ha cargado la API. Los atributos async y defer permiten que se siga renderizando la página mientras se carga la API. La key hace la llamada mediante la API Key para acceder al servicio.
2. Dibujamos el mapa y el marcador en el fichero JS. Creamos una función que inicializa y añade el mapa, con los siguientes elementos: a) Una variable que inicializamos con las coordenadas que centrarán el mapa. b) Una variable que crea el objeto mapa, utiliza el método getElemenById y le pasa dos propiedades: center y zoom (escala: cuanto más bajo, más general). Creamos una variable para incluir el marcador, inicializándola con el objeto marcador, y dos propiedades: position y map

En este enlace puedes ver el detalle explicado de todo el procedimiento.

Ejercicio

Sobre el ejemplo anterior, cambia el mapa para que:

• Se centre en el Campus de Móstoles de la URJC (zoom 15)(lat: 40.3367965478043, lng: -3.874826431274414)
• Incluya un marcador en dicho Campus
• Incluir un segundo marcador en el Hospital Rey Juan Carlos que se encuentra anexo al Campus (lat: 40.338759259710955, lng: -3.8707923889160156)

Solución

Como suele ser habitual, podemos resolver la cuestión de varias maneras. Veamos dos posibles soluciones:

a) Solución 1. Creando una nueva variable y pasando el valor de esa variable al position.

b) Solución 2. Pasando directamente la LAT-LONG a la position del segundo marcador.

Parámetros en funciones

Los parámetros son los valores de entrada que recibe una función. Se indican entre paréntesis detrás del nombre de la función. Veamos un ejemplo para un parámetro simple. Imaginemos una función que sume dos números. Los parámetros de entrada serán los valores de los dos números. La salida será la suma.

Parámetros simples

En el siguiente ejemplo utilizamos un parámetro simple:

1. Escribimos una función y declaramos, entre paréntesis, la variable que va a recibir el valor.
2. En la función determinamos que escriba, en el documento, un string que incluye el valor que tome la variable
3. Luego, cuando invocamos la función, le damos en el parámetro, el valor que debe presentar la variable

Múltiples parámetros

Habitualmente las funciones llevan varios parámetros. Los parámetros pueden incluir contenido pero también código html, como en este ejemplo que vemos a continuación:

1. Creamos la función, indicamos como parámetros dos variables
2. Indicamos que escriba, en el objeto documento, la frase “Hola nombre” incluyendo mediante html el atributo font color
3. Declaramos las variables
4. Invocamos la función pasando como valor de los argumentos (nombre y colorTexto) los valores de las variables miNombre y miColor

Ejercicio con parámetros múltiples 1

Sobre la base del ejemplo anterior, pasa ahora tres parámetros. Además del nombre y el color, indica el tipo de letra con el atributo face.

Solución

  1.Añadimos el parámetro face en la función 2.En la línea 2 sumamos el atributo face (face=’” + face + ”’) 3.En línea 8 añadimos la variable miFace y le asignamos un valor de tipo de letra 4.En línea incluimos en la invocación de la función, el nuevo parámetro con el valor de la variable miFace

Ejercicio con parámetros múltiples 2

Sobre la base del ejemplo anterior, utiliza ahora dos parámetros para conseguir el siguiente resultado:

Solución

Valores de retorno (return)

Las funciones pueden devolver valores, a través de la sentencia return. Esto es esencial, y una de sus principales utilidades ya que al invocar una función se podrán realizar acciones y ofrecer un valor como salida.

El siguiente ejemplo utiliza la sentencia return para que devuelva el valor medio de unos números. Revisa el código y fíjate qué es lo que hace:

1. Creamos la función, y como parámetros declaramos dos valores.Dentro de la función declaramos una variable (resultado) y le asignamos la operación que queremos realizar; en el ejemplo, la media de dos números (pero podría ser cualquier otra)
2. Con  la sentencia return le pedimos que devuelva el valor de la variable (resultado)
3. Creamos una nueva variable (miMedia) y la inicializamos con el valor de los parámetros que le pasamos a la función
4. Por último, le pedimos que escriba en el documento el valor de la variable (miMedia)

Ejercicio con valor de retorno

Vamos a crear, sobre el ejercicio anterior, un función con tres parámetros cuyo resultado sume el primero con el segundo y divida el resultado entre el tercero, y que lo muestre.

El resultado se debe escribir sobre un span dentro de un párrafo que diga: “El resultado es: xx%”

Ideas:

• Cambia el nombre de la función, y de la segunda variable
• Modifica el cálculo de la primera variable (resultado) para hacer el cálculo de una regla de proporción
• Cambia el método de escritura sobre documento

Solución

  1.Añadimos un tercer parámetro a la función (valor3) 2.En la inicialización de la var resultado ponemos la operación: (valor1 + valor2) / valor3; 3.Declaramos, fuera de la función, una nueva variable y la inicializamos pasando los valores de los tres parámetros 4.Sustituimos el método writte por getElemenById 5.En HTML creamos un párrafo con el id que corresponda para que enlace con el innerHTML

Crear un mapa con un cluster de marcadores usando la sentencia return

Google Maps API nos permite crear cluster de marcadores utilizando la librería markerclusterer.js. Ello nos permite visualizar múltiples marcadores de forma agregada o separada en función del nivel de zoom del mapa.

En este ejemplo, podemos ver el funcionamiento de la sentencia return. La función devuelve como valor un marcador cuyos parámetros toma de dos array: localización y etiqueta.

En el ejemplo podrás ver el código comentado para comprender con más detalle cómo funciona:

Ejercicio. Crear un mapa con un cluster de marcadores.

Sobre el ejemplo anterior, modifica el mapa para que:

• Carga un clúster con cinco Campus de la URJC
• Modifica los labels para que el array cargue números en vez de letras

Utiliza estas coordenadas para situar los diferentes Campus.

• {lat: 40.3359104, lng: -3.87684339},
• {lat: 40.282275, lng: -3.8195085},
• {lat: 40.0336812, lng: -3.59396110},
• {lat: 40.406084, lng: -3.61061489},
• {lat: 40.4277082, lng: -3.66904735}

Solución

  1.Centrar el mapa en las coordenadas que queremos | 2.Cambiar el zoom a 9 para ver la CAM | 3.Cambiar la var labels incorporando 12345 (o el número de ítems que incluyamos) | 4.Sustituir los valores de var locations por los que corresponda a las localizaciones de la URJC

Overlays sobre mapas

La API de Google Maps nos permite hacer muchas otras cosas. Una que resulta muy útil es incluir capas superpuestas, lo que se conoce como overlays.

Un ejemplo son los Marcadores animados (marker)

Prueba a cambiar los comportamientos de la animación usando: DROP o BOUNCE

Otro, la inclusión de Líneas (polyline)

Prueba a cambiar el mapa base modificando el MapTypeId: ROADMAP, SATELLITE, HYBRID, TERRAIN