Programación orientada a objetos en Javascript.

De nuevo regresa a mi la materia de Estructura de Datos con su nuevo nombre, se le agrega la palabra aplicadas que parece muy adecuado.

Ahora desde casa se me ocurren mil cosas e ideas que haber hasta donde me alcanza la vida y el entendimiento, pero una de ellas es darla con varios lenguajes; en ocasiones pasadas la llegué a impartir con Java y C#.

En esta ocasión los chicos no quisieron complicarse y supongo con la experiencia de su maestro Mario Villavicencio han decidido con C#.

Como sabemos Javascript ha tenido un dominio avasallador y es el gran protagonista del desarrollo web, entonces para el primer tema que son tipos de datos abstractos probamos las clases en Javascript.

El ejemplo fue la clase Cuadrilatero (y sólo el subconjunto de aquellas figuras que sus ángulos interiores son rectos es decir el rectángulo y el cuadrado), y pues para evitar el dibujar en la consola decidí probar el objeto canvas manipulado por Javascript.

El primer paso fue hacer un formulario donde iba a obtener del usuario, la altura y anchura del cuadrilátero, después para ir probando fui agregando botones para probar cada acción de la clase. La versión definitiva fue darle mejor presentación agregando Bootstrap 4 y un botón para obtener de una sola vez la creación del objeto, el área, el perímetro y la imagen de la figura, les muestro el prototipo final de la página web, que publiqué en un sitio gratuito de internet.

Comparto el código de HTML para el formulario anterior.

Aquí la parte de la etiqueta <head>

Por lecturas y comentarios de profesores y alumnos la mejor opción de editores se la lleva Microsoft Visual Code.

Como mencione una vez que la programación funcionó me di a la tarea de darle algo de presentación, me basé en un formulario del sitio W3Schools por eso las etiquetas para consumir la librería de Bootstrap en su versión 4, la etiqueta <meta name=”viewport” content… para hacer responsiva la página, un marco para la etiqueta canvas que es donde se desplegará el dibujo y por último quien hace la magia de todo ésto que es el código Geometry.js.

La etiqueta <body> y su contenido lo muestro a continuación.

Aquí un formulario que lo fui adornando utilizando y agregando el atributo class para agregarle la presentación que brinda Bootstrap, en ocasiones anteriores solo copiaba y pegada, pero ahora experimenté agregando poco a poco los efectos a la página.

Aportando algo nuevo o no muy usado por mi fue el uso de canvas y de dos áreas div para mostrar los resultados de área y perímetro.

La parte dinámica la aporta el botón de “Create object” al invocar la función createObject() de Javascript con el evento onclick.

Ahora la parte que hace funcionar nuestra página web, esta información la consulte de un sitio de Mozilla que dejó en la parte final de referencias.

Tenemos 2 atributos que es la altura y anchura del cuadrilátero, después tenemos un constructor y para este caso vamos a crear 2 propiedades – o digamos atributos calculados por así decirlo – usando la palabra reservada get que a su vez invoca a dos métodos para obtener el área y perímetro de ese Cuadrilátero.

En la página no viene como definir los atributos y lo hice de esa forma y parece que funcionó.

Para el caso del método paint() aquí el código.

El método paint() recibe el nombre del contenedor (“canvas” para este caso). Obtenemos el contexto para figuras en 2 dimensiones, el color de fondo – fillStyle() – que yo le puse un verde, y por último en la coordenada 5,5 dibujamos un rectángulo – fillRect() o cuadrado según los atributos de anchura (qwidth) y altura (qheight) y listo hasta aquí la clase.

Ahora el código puente que al ejecutarse el evento onclick, crea el objeto, ejecuta sus operaciones y muestra el resultado de ésta en la página.

Hay cosas que no cambian 🙂 sobre el alcance de las variables y es que recuerdo que en aquellos años que era instructor interno de INEGI, era uno de los primeros temas del curso de Javascript, es por eso que defino un objeto global q1 para que la función createObject() lo pueda utilizar.

Leemos los elementos que el usuario nos proporcionó y con ellos creamos el objeto q1 = new Quadrilateral(), avisamos al usuario que el objeto fue creado para después obtener las áreas div donde mostraremos el área y el perímetro usando la propiedad innerHTML y por último invocamos el método paint() para dibujar nuestro cuadrilátero.

Muestro a continuación el resultado de una de las pruebas a la página.

Termino comentándoles que es uno de los artículos o temas que más me ha entusiasmado escribir de tal forma que en vez de tomar mi asueto de día del profe me puse a investigar sobre este tema.

Nos seguimos leyendo y sigan cuidándose en éstos tiempos de pandemia.

Con afecto.

Profesor Miguel Araujo.

Referencias.

Clases en Javascript

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Classes

Canvas

https://developer.mozilla.org/es/docs/Web/Guide/HTML/Canvas_tutorial/Basic_usage

Formas bootstrap 4

https://www.w3schools.com/bootstrap4/bootstrap_forms.asp

Escribir en etiquetas div (por ejemplo)

https://norfipc.com/inf/javascript-como-escribir-texto-elementos-paginas-web.html

Deja un comentario