Archivo mensual 29/03/2021

Variable - hettand

¿Qué es una variable en programación?

Una variable es una zona con nombre en la memoria del dispositivo o equipo. En programación la utilizamos cuando queremos almacenar algún valor en memoria para poder utilizarlo después.

Las variables tienen tres características:

  1. Nombre: lo definimos al crear la variable, es recomendable que sea descriptivo por sí mismo. Por ejemplo, sí deseas guardar en ella el número de kilómetros recorridos por un vehículo podrías elegir como nombre de la variable km y definir otra con tu primer nombre con firstName o primerNombre.
  2. Tipo: define que tipos de valores puede contener la variable. Para almacenar el número de los kilómetros podemos definir un tipo de dato decimal y para tu primer nombre una variable de tipo cadena de caracteres.
  3. Valor: si queremos almacenar que recorrió 28.500 kilómetros, el número sería el valor de los kilómetros que recorrió el vehículo y la secuencia o cadena de caracteres corresponderían al nombre.

Definir los tipos de las variables es importante porque nos permite saber el espacio que ocupa y que operaciones pueden realizarse con ella. Por ejemplo, no podemos multiplicar cadenas de caracteres pero si podemos hacerlo con los números. Además es importante para hacer comprobaciones de errores para saber si se introduce un valor del mismo tipo.

Hay muchos tipos de datos, incluso se pueden definir tipos propios. Un tipo de dato primitivo o básico es el que ya está predefinido en un lenguaje de programación.

Te muestro un ejemplo creando las variables en el lenguaje C#:

// C# 
decimal km = 28.5m;
string firsName = "Paola";
Lenguaje de programación

Lenguajes de programación

¿Qué es un lenguaje de programación?

Forma parte de los denominados “lenguajes formales”. Pero. ¿Qué es un lenguaje formal? Como ya sabrás un lenguaje es un sistema de comunicación, pero lo que lo hace formal es que utiliza símbolos y reglas o sea que contiene una gramática formal.

Los lenguajes de programación se utilizan para escribir programas de computadoras u ordenadores los denominados Software en el idioma inglés y se componen de secuencias de instrucciones precisas que realizan una tarea.

Ejemplos de programas:

  • Calcular el promedio de gastos mensuales.
  • Hacer posible que un robot realice el montaje de un automóvil con precisión y efectividad.
  • Llevar un control de los pagos de mis clientes.

Niveles de lenguajes de programación

  • Lenguaje máquina: el de más bajo nivel, escrito en el denominado sistema binario o sistema diádico el cual consta de unos y ceros, o sea, de una combinación de bits. Este sistema es interpretable por un circuito microprogramable como el microprocesador que contiene una computadora o el microcontrolador de un autómata.
  • Lenguaje de bajo nivel o ensamblador: tiene un nivel nemotécnico, con esto quiero decir que es sencillo porque es utilizado para recordar una secuencia de datos, nombres, números y en general para recordar listas de items.
  • Lenguaje de alto nivel: son los más expresivos porque han sido diseñados para que las personas escriban y entiendan los programas más fácilmente que los dos anteriores Existen muchísimos lenguajes de alto nivel y utiliza el idioma inglés para las instrucciones. Por nombrarte algunos esta Javascript, Python, C++, C#, Java, etc…

tabla

Tabla de horarios con javascript

Está tabla realizada mayormente con javascript puede ser una forma ordenada y fácil para visualizar horarios de diferentes materias cómo utilicé en este ejemplo aunque puedes aplicarlo a un listado de citas por ejemplo reemplazando las materias por nombres de clientes.

Inicialmente creamos un archivo style.css e index.html con la estructura básica del documento, ambos dentro de la misma carpeta. En el index.html importamos nuestro style.css y escribimos dentro del body las etiquetas de la tabla, con su encabezado y su cuerpo.

Contenido del head:

    <title>Tabla semanal de horarios con javascript</title>
    <link rel="stylesheet" type="text/css" href="style.css">

Contenido del body:

 <table>
     <thead>
        <tr id="thead"></tr>
     </thead>
     <tbody id="tbody"></tbody>
 </table>

Estilos para el cuerpo del documento, la tabla, su encabezado y celdas, también definí una clase “days” para los días de la semana.

body {
    min-height: Calc(100vh - 100px);
    display: flex;
    padding-left: 20px;
    padding-right: 20px;
}

table {
    margin: auto;
    font-size: 20px;
    width: 80%;
}

td,
th {
    border: 1px solid #c3c3c3;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
}

.days {
    background-color: black;
    color: aliceblue;
    font-family: sans-serif;
    font-weight: 100;
}

También incluí unos estilos al pasar el cursor por cada materia y al pulsar en cada una de ellas.

.bg:hover {
    background: #c1c1c1;
    color: #fff;
}

.shadow:hover {
    box-shadow: 0px 4px 9px -1px rgba(0, 0, 0, 0.75);
    cursor: pointer;
}

.shadow:active {
    background: #000;
    color: #fff;
}

Ahora pasemos al código javascript que yo escribí dentro del html ya que no es muy extenso pero tú puedes escribirlo en un archivo js y luego incluirlo dentro del html.

Definí la tabla mediante una función y le agregué las siguientes propiedades:

  function Table() {

            this.thead = document.getElementById("thead")
            this.tbody = document.getElementById("tbody")
            this.dias = ["Hora", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes"]
            this.horas = ["8:00", "9:00", "10:00", "11:00", "12:00"]
            this.clases = [{
                "hora": "8:00",
                "dia": 1,
                "materia": "Música",
                "bg": "aliceblue"
            }, {
                "hora": "10:00",
                "dia": 1,
                "materia": "Filosofía",
                "bg": "antiquewhite"
            }, {
                "hora": "10:00",
                "dia": 2,
                "materia": "Literatura",
                "bg": "darkgray"
            }, {
                "hora": "8:00",
                "dia": 3,
                "materia": "Dibujo",
                "bg": "cyan"
            }, {
                "hora": "9:00",
                "dia": 3,
                "materia": "Música",
                "bg": "aliceblue"

            }, {
                "hora": "11:00",
                "dia": 3,
                "materia": "Biología",
                "bg": "darkturquoise"
            }, {
                "hora": "8:00",
                "dia": 4,
                "materia": "Música",
                "bg": "aliceblue"
            }, {
                "hora": "10:00",
                "dia": 4,
                "materia": "Sociología",
                "bg": "darksalmon"
            }, {
                "hora": "8:00",
                "dia": 5,
                "materia": "Filosofía",
                "bg": "antiquewhite"
            }, {
                "hora": "9:00",
                "dia": 5,
                "materia": "Literatura",
                "bg": "darkgray"
            }, {
                "hora": "12:00",
                "dia": 5,
                "materia": "Historia",
                "bg": "cornflowerblue"
            }]

Comenzamos construyendo el encabezado de la tabla para ello recorremos el array de los días para crear los casilleros del encabezado, a los días le agregamos nuestra clase “days” definida en el CSS y al elemento con el texto “Hora” le damos un fondo rojo para diferenciarlo de los días.

this.head = function() {
    // texto de "Hora" y los días
    for (d of this.dias) {
        const th = document.createElement("th")

        // Sí no es el texto "Hora" le ponemos la clase "days" de lo contrario el fondo red
        if (d !== "Hora") th.className = "days"
        else th.style.backgroundColor = "red"
        th.appendChild(document.createTextNode(d))
        this.thead.appendChild(th)
    }
}

Ahora pasamos a construir el cuerpo de la tabla, primero definimos una variable “hora” que necesitaremos para guardar la hora en la que nos encontramos en la fila de la tabla y una variable “horasCount” en la que guardamos la cantidad actual de elementos que contiene, es así que iteramos por cada hora para crear las filas.

Ahora el segundo ciclo que incluimos dentro del primero se encargará de insertar la hora de cada materia con su respectivo nombre y en el día que le corresponde.

Si estamos parados en la primer celda de cada fila pondremos en ella el primer elemento del array de horas para luego guardarlo en la variable hora y luego eliminarlo así al volver a la siguiente fila agregamos la siguiente hora eliminándola nuevamente y pasando a la siguiente. A estas celdas le damos un texto en negrita.

Ahora si no estamos parados en la primer celda de la fila que llevará la clase “shadow”. En este punto tenemos que fijarnos si la hora en que estamos parados coincide con alguna de la lista de clases para ello utilizamos la guardada en nuestra variable hora y si ésta y el número de día coincide con nuestro objeto de clases le damos el color de fondo que tiene y le insertamos el nombre de la materia a la celda para luego agregarla a la fila.

this.body = function() {
    let hora
    let horasCount = this.horas.length
        // en el body tenemos que poner las horas con sus respectivas materias
    for (let f = 0; f < horasCount; f++) {
        // fila
        const tr = document.createElement("tr")
            // celdas, for por la cantidad de días de la semana
        for (let c = 0; c < 6; c++) {
            const td = document.createElement("td")
            if (c == 0) {
                // celdas de las horas tomamos la primera y después la eliminamos así tomamos la siguiente
                td.appendChild(document.createTextNode(this.horas[c]))
                td.style.fontWeight = "bold"
                hora = this.horas[c]
                this.horas.shift()
            } else {
                // celdas de las materias
                td.className = "shadow"
                this.clases.forEach(function(element) {
                    if (element.hora === hora && element.dia === c) {
                        td.style.backgroundColor = element.bg
                        td.appendChild(document.createTextNode(element.materia))
                    }
                })
            }
            tr.appendChild(td)
        }
        this.tbody.appendChild(tr)
    }
}

Finalmente para ver la tabla armada creamos la instancia de la clase Tabla e invocamos a la construcción de su encabezado primero y luego a la de su cuerpo con la información que le proporcionamos.

let table = new Table()
table.head()
table.body()

Video del tutorial

VER DEMO Código en GitHub