Iteración de Javascript con su entorno.

Javascript es un lenguaje que reconoce todos los elementos incrustados en una página Web, porque está integrado en los navegadores Web.

DOm del navegador

Si tuvieses que elegir, javascript está entre el navegador y la aplicación web, controlando los eventos y registros de la página. Por eso mismo, javascript es el lenguaje ideal para el control de la página web, salvo el uso del lenguaje php que le gana en producitividad por el hecho de ser un lenguaje interpretado por el servidor (ya lo verás más adelante).

Para utilizar un objeto del navegador y de la página web, javascript necesita conocer el nombre de dicho objeto. Para ello, sabes del módulo de CSS que a los elementos (etiquetas), se les puede agregar un identificador o una clase. Pues javascript entenderá al objeto por su nombre, es decir por el identificador o por la clase.

Para ello solemos utilizar funciones básicas que se ejecutan de acuerdo a eventos en el objeto.

llamar a un valor desde un objeto con javascript

Observa como utilizamos un formulario en el cual introducimos un nombre en el cuadro de texto y al pulsar el botón nos muestra el valor introducido dentro de dicho texto y, además en la url del navegador nos agrega una variable con el nombre introducido (por el servicio por defecto GET de envio).

Fijate que para llamar y mostrar el valor del nombre, javascript llama al objeto por su atributo ID. De hecho si llamas al objeto solo por su atributo name, no funcionará el script (aunque si funcionará el submit).

Objetos.

En JavaScript todo son objetos; una clase, un botón, una función, etc., se basa en objetos. Un lenguaje de alto nivel empieza creando una clase con una serie de métodos y propiedades y después crea una instancia de dicha clase llamando a un objeto.

JavaScript es un lenguaje flexible pero no es un lenguaje orientado a objetos. A pesar de ello puede crear objetos basados en una simulación de clase mediante las funciones. El problema de utilizar funciones es que tendrás que realizar copias de sus estructuras si las quieres usar en otras partes como verás más adelante. Y el problema de todo esto está en el consumo de memoria.

Creando nuestro primer objeto javascript.
Si bien la creación de objetos en lenguajes de alto nivel es instanciar a la clase, en javascript hay que usar la sintaxis general del objeto. Todos los objetos se declaran siguiendo la siguiente sintaxis:

var identificador {clave: valor, clave1: valor1,..., claveN: valorN};

Con var, se declara una variable. Javascript es un lenguaje debilmente tipado por lo que no es necesario especificar el tipo de dato. Además maneja los mismos tipos de datos que cualquier otro lenguaje, tal como números, cadenas, y tipos.

Los objetos se pueden crear de la nada como el objeto declarado anteriormente, o pueden derivar de los objetos que incorpora el propio DOM.

Forma de crear un objeto en javascript

Seguro que esta forma de programar te recuerda a la esructura de JSON. No debes de olvidar que JSON se basa en javascript, al igual que otras librerías como JQuery o React. Fijate que dentro del objeto hay una funcion llamada mostrarInfoCoche1() que no tienen parámetros y que devuelve el valor de las variables del objeto con la claúsula this. Además he mostrado los valores por consola, pero podría mostrarlos por pantalla usando la instrucción document.write(coche1);

Uso de una función dentro de un objeto y visualizarla

Y también podemos llamar y mostrar cualquier dato contenido en el objeto haciendo referencia a dicho objeto (es decir, llamando al objeto desde el sitio que queramos usar y después a su atributo):

Llamo a una propiedad del objeto y la muestro

Y no solo podemos asignar funciones dentro de un objeto. También podemos declarar arrays usando la sintaxis de los corchetes de la forma siguiente:

Uso de matrices dentro del objeto

Y para llamar a cualquier elemento de la matriz, se procede como en cualquier otro lenguaje de programación:

Llamar al elemento de la matriz

Estructura de los objetos.

Además de la sintaxis literal, javascript tiene un tipo de objeto que puede crear objetos mediante programación. El objeto tiene un prototipo que se asocia cuando se utiliza la palabra reservada new y se crea la instancia del nuevo objeto. A continuación te indico los métodos heredados que tiene dicho objeto.

constructor.
El constructor es una función que es llamada al inicializar el nuevo objeto.

hasOwnProperty.
devolver un indicador booleano de si el objeto actual tiene la propiedad especificada.

isPrototypeOf.
Devuelve un indicador booleano de si el objeto actual está en la cadena de objetos prototipo del objeto especificado.

propertyIsEnumerable.
Retorna un True si el objeto puede ser enumerado dentro de un bloque for - in.

toLocalString.
Convierte una fecha a cadena. Se basa en la hora del sistema.

toString.
Devuelve la representación de texto del objeto actual.

valueOf.
Retorna el valor del actual objeto convertido al más significante valor primitivo.

Usar el constructor de objetos

Observa que se parece mucho a la forma anterior, pero nada más lejos de la realidad. Para empezar se ha declarado una funcion coches y como parámetros se ha utilizado variables locales que servirán de referencias a las propiedades del objeto (y que en este caso está referenciado mediante la variable coche2).

Esta forma de crear objetos te será muy similar a la forma de programar en Java o en C# del curso de JavaVsC#, en donde por cada variable local le corresponde una de las variables especificadas en los parámetros de la función (instancia). Pero en lugar de utilizar la palabra reservada this, se usa el identificador creado (coche2) más la nueva propiedad.

Clases en javascript.

Hasta antes del 2015 la creación de clases en javascript era una configuración de los objetos y las funciones para establecer algo parecido al concepto de clase.

clases en javascript

Pero claro está que las clases en javascript (sin llegar a ser clases reales), producen una serie de dificultades con en el anterior script que hay una serie de errores con el código. Para empezar todas las variables están definidas sin la palabra clave var, por lo que las variables year, maker, model y getInfo son declaradas de forma global automaticamente y accesibles desde cualquier lugar. Además la función a pesar de que he utilizado la estructura correcta no devuelve ningún valor.

Además, supon que queremos que me muestre la propiedad del año del vehículo. Cuando le llame desde otro formulario y botón, me devolverá indefined porque el navegador no es capaz de diferenciar el valor del objeto al cargar la página.

error de sintaxis

El protocolo ECMAScript 2015 introduce el concepto de clase si, bien no es realmente una clase significativa, si lo es práctica. Y digo que no es significativa porque no introduce herencia orienta a los objetos en javascript. Además se ha creado una serie de normas a la hora de manejar las clases:

● Se declara primero la clase y después se accede a ella.
● Se utiliza la palabra reservada class.
● Se pueden asignar atributos y métodos a la clase.
● Ha que instanciar un nuevo objeto de la clase para usarlo.

Así que si queremos llamar a un objeto de la clase, tenemos que utilizar dicho objeto y después llamar a su método o propiedad (su valor literal) para poder utilizarlo.

uso de una clase

También se pueden crear métodos dentro de la clase. Para ello dentro de la clase y fuera del constructor (en donde por defecto se declaran las propiedades y funciones de la clase), establecemos las condiciones y métodos.

uso de métodos de una clase

Para usarlo hay que llamar al método y después usar el objeto con un document.write, un alert, etc. Fijate que si vuelvo a llamar al objeto dentro de un control y le asigno, por ejemplo el método de la clase, se aplicará la nueva velocidad del objeto.

uso de métodos de una clase

En proximas clases entraremos a fondo sobre el tema de las clases, funciones y métodos con javascript.