Unidad 5

Variables, constantes y operadores

Variables, constantes y operadores 1

Variables 1
Nuestro espacio de trabajo 1
Especificación de entradas 2
Especificación de salidas 3
Especificación del proceso 4
Continuando con las variables 4
Resumiendo el espacio de trabajo 7
Constantes 7
Asignación 7
Asignaciones de expresiones aritméticas 8
Asignaciones de expresiones de texto 9
Asignaciones de expresiones lógicas 10

Conclusión 12

Ejercicios 13

Referencias 15
 Unidad 5 - Variables, constantes y operadores

Variables, constantes y operadores

En esta unidad se introducen los elementos que nos permitirán realizar operaciones básicas
de entrada y salida y comenzar a realizar algunos ejemplos prácticos de programación. Se
presentan conceptos teóricos, ejercicios de ejemplo y el entorno de práctica sugerido.

Variables
En el ciclo de ingresar, procesar y mostrar información, el programa utiliza variables. Las
variables son espacios de memoria, que se utilizan tanto para ingresar datos, procesarlos o
mostrarlos. Podemos pensar en una variable, como una caja, que tiene un nombre, y que el
programa puede poner y leer datos de la misma. Más adelante veremos más de las
variables. Ahora un poco de nuestro espacio de trabajo

Nuestro espacio de trabajo

Para poder concentrarnos en los conceptos más importantes de la programación en una
etapa inicial, desde la Facultad, hemos preparado un espacio de trabajo, donde realizar las
prácticas.
Los alumnos pueden descargarlo desde este sitio:
JS-Ingreso
Una vez descomprimido, pueden utilizar cualquier editor para modificar el archivo
index.html, el cual es el único archivo que deben modificar. Dentro de ese archivo, solo hay
tres secciones que deben modificar:
● function especificarEntradas
● function especificarSalidas
● function principal
Una vez modificadas estas secciones, bastará hacer doble click sobre el mismo archivo
index.html y veremos nuestro proceso en funcionamiento.

1
 Unidad 5 - Variables, constantes y operadores

En las siguientes secciones identificaremos con un ícono, y con un texto en formato código,
lo que se puede probar en el editor.

Especificación de entradas
En nuestro entorno de trabajo, una entrada se va a definir por los siguientes elementos:
● nombre: Cada entrada tiene un nombre distinto. Este nombre se utilizará para
vincularla a una variable y poder utilizarla como insumo
● tipo: Define la clase de valores que se solicitarán al usuario. Puede ser
○ number: para números enteros
○ float: para decimales
○ text: para cadenas
○ boolean: para valores lógicos
○ date: para fechas
● etiqueta: Muestra un texto antes de la caja para ingresar valores
● ayuda: Muestra un texto de ejemplo dentro de la caja.

Ejemplo: Se necesita una entrada, para cargar la base del rectángulo. Sería
apropiado que sea de tipo float, con etiqueta que dijera “Ingrese base:”, y una ayuda
que dijera “Base del rectángulo”. Para hacerlo editamos el archivo index.html en la
sección especificarEntradas de manera que quede:

function especificarEntradas () {
return [
{
nombre: "base", tipo: "float",
etiqueta: "Ingrese base:",
ayuda: "Base del rectángulo"
}
]
}
Cuando recarguemos la página, el resultado va a ser:

2
 Unidad 5 - Variables, constantes y operadores

Nota: Específicamente lo que se debe modificar es lo que está entre este símbolo [ y este
otro ] . A su vez cada entrada se encuentra encerrada entre llaves { } . Cuando tenemos
más de una entrada, las separamos con una coma “, “. Si solo hay una entrada, no es
necesario poner la coma.

Especificación de salidas
En nuestro entorno de trabajo, las salidas se especifican más sencillas que las entradas. Se
componen de dos elementos:
● nombre: Cada salida debe tener un nombre distinto. Se utiliza este nombre para
vincularlo con una variable
● etiqueta: Es un texto que va a acompañar a la salida.

Antes de ejecutar el proceso, podemos ver la salida, aunque sin resultado.

3
 Unidad 5 - Variables, constantes y operadores

Ejemplo: Se necesita una salida, que muestre el valor calculado de superficie.

La etiqueta debe decir “Superficie”. El nombre de salida, es conveniente que sea
“superficie”.

function especificarSalidas () {
return [
{ nombre: "superficie", etiqueta: "Superficie:" }
]
}

Especificación del proceso

En la especificación del proceso, conectamos las entradas que previamente definimos, con
las variables que vamos a utilizar. También definimos el proceso. Finalmente conectamos
las salidas con las variables que queremos mostrar.

Continuando con las variables

Para definir una variable, en Javascript se puede utilizar una sentencia como esta:

let a = 5;

Quiere decir que a la variable a se le asigna el valor 5.

Nota: En la mayoría de los lenguajes de programación el signo “;” (punto y coma) se utiliza
como fin de sentencia.
Como su nombre lo indica, una variable puede y debe variar su valor a lo largo de la
ejecución del programa. Por su nombre, será referenciada por el programa para manipular
el contenido.
Las variables también tienen un tipo de dato. Es decir la “caja” que almacena datos, no solo
tiene un nombre, sino que además debemos indicar que clase de información vamos a
almacenar (número, cadena, fecha, etc.)

Ejemplo: Cálculo de superficie

4
 Unidad 5 - Variables, constantes y operadores

Se desea calcular la superficie de un rectángulo. La misma se calcula como Base por

Altura. Por lo tanto el usuario deberá ingresar, la base y la altura, y el sistema realizará el
producto, mostrándolo por pantalla.
Vamos a definir las entradas en la sección de entradas, modificando de la siguiente manera:

function especificarEntradas () {
return [
{
nombre: "base", tipo: "number",
etiqueta: "Ingrese base:",
ayuda: "Base del rectángulo"
},
{
nombre: "altura", tipo: "number",
etiqueta: "Ingrese altura:",
ayuda: "Altura del rectángulo"
}
]
}

Hemos definido dos entradas para nuestro proceso: una se llama “base” y la otra se llama
“altura”.
Ahora vamos a especificar la única salida:

function especificarSalidas () {
return [
{ nombre: "superficie", etiqueta: "Superficie:" }
]
}

Finalmente vamos a definir el procesamiento. Vamos a “conectar” las variables con las
entradas, y con la salida, y realizaremos el cálculo.

function principal () {
let base = entrada("base");
let altura = entrada("altura");
let superficie = base * altura;
salida("superficie", superficie);

5
 Unidad 5 - Variables, constantes y operadores

La primera línea conecta la entrada llamada “base”, con la variable “base”. La segunda línea
hace lo mismo, pero con la variable “altura”. La tercera línea, asigna a la variable
“superficie” el producto del valor que tuviera cargada la variable “base”, por el valor que
tuviera cargada la variable “altura”.
La última línea conecta la variable “superficie” con la salida “superficie”.
Para probar el programa, recargamos la página index.html para que tome los cambios.

Vamos a ver las entradas, donde ponemos algunos valores:

Presionamos el botón y podemos ver el resultado:

6
 Unidad 5 - Variables, constantes y operadores

Resumiendo el espacio de trabajo

Podemos pensar al espacio de trabajo como una “máquina” con entradas y salidas que la
conectan al exterior. El procesamiento está conectado también a estas entradas y salidas, y
las variables son lugares, como bandejas donde se dejan las entradas para poder
manipularlas, o se ponen los resultados que se van a mostrar al exterior.

Constantes
Las constantes, como su nombre lo indica, son elementos que definen un valor
dentro del programa y no cambian nunca. Podemos decir, que son variables
que no cambian de valor. Un ejemplo puede ser una variable que fije el valor de PI:

const pi = 3.14
Su utilidad tiene que ver con el hecho de definir un valor al principio del programa que actúa
como parámetro a lo largo de toda la ejecución. Podemos cambiarlo, y volver a ejecutar
hasta alcanzar el resultado general esperado. Si con PI igual a 3,14, no nos alcanza para la
precisión de nuestros cálculos, podemos agregarle más decimales y volver a probar.
const pi = 3.1415

Asignación
Vimos en la sección anterior la utilización del signo igual ( = )
En la asignación tendremos siempre un elemento a la izquierda, y otro a la derecha:

let a = 5

7
 Unidad 5 - Variables, constantes y operadores

La asignación en un tipo sentencia imperativa, la más básica. Sobre el lado izquierdo,

siempre vamos a tener una variable. Sobre el lado derecho es mucho más amplio.
Podremos tener:
● Un valor
● Otra variable
● Una operación aritmética cuyo resultado corresponde en tipo al tipo de la variable.
Nota: Para recordar el sentido de la asignación, podemos pensar el igual como una flecha
donde
let a = 5 +5
se puede entender como
let a ⇐ 5 +5

Ejemplo 1. Asignación de un valor a una variable:

let a = 10
let nombre = "Felipe"

Ejemplo 2. Asignación de una variable a otra variable:

let Felipe = 10
let b = Felipe

Ejemplo 3. Asignación de una expresión:

let a = 10
let b = a * 2 + a

Nota: Observando el primer ejemplo, se ve que la variable nombre se carga con el valor
"Felipe", y este se encuentra entre comillas. Las cadenas de texto, deben encerrarse
entre comillas, sino serían interpretadas como nombres de variables. Esto se puede
observar en el segundo ejemplo. La variable Felipe, se carga con el valor 10, y por lo tanto
cuando la variable b se carga con el valor de la variable Felipe, también toma el valor 10.

Asignaciones de expresiones aritméticas

La asignación puede ser tan compleja como necesitemos. Podemos asignar a una variable
todo un cálculo matemático, como por ejemplo el cálculo de un interés de un monto.
Supongamos que quiero asignar el 21% de IVA a un total ingresado:

let total = 1000

8
 Unidad 5 - Variables, constantes y operadores

let interes = total * 21 / 100

let final = total + interes

Veamos cómo resuelve esto la computadora, con una pequeña tabla de variables1, y como
van cambiando de valor con cada orden o instrucción

total interes final

let total = 1000 1000 ? ?

let interes = total * 21 / 100
let final = total + interes

let total = 1000 1000 210 ?

let interes = total * 21 / 100
let final = total + interes

let total = 1000 1000 210 1210

let interes = total * 21 / 100
let final = total + interes

Como vemos las variables van cambiando de valor, con cada asignación. Las que no se
modifican, mantienen su valor hasta terminar. En la variable final tenemos el valor buscado,
que podemos asociarlo a una salida y mostrarlo.

Asignaciones de expresiones de texto

También podemos manipular texto con las expresiones. Por ejemplo:

let nombre = "Juan"

let mensaje = "Hola " + nombre

Si elaboramos una tabla de variables, para el ejemplo vamos a ver cómo se construye el
mensaje final:

nombre mensaje

let nombre = "Juan" Juan ?

let mensaje = "Hola " + nombre

let nombre = "Juan" Juan Hola Juan

1
En lenguajes de computación se denomina “tabla de símbolos” a esta tabla.

9
 Unidad 5 - Variables, constantes y operadores

let mensaje = "Hola " + nombre

Nota: Es muy importante hacer este tipo de tablas, en papel borrador, en un pequeño sector
de una hoja, para aprender a “simular” el comportamiento de un programa. Nos va a ayudar
mucho a la hora de detectar posibles errores, e incluso anticiparnos a la ejecución para
corregirlos.

Asignaciones de expresiones lógicas

Finalmente también podemos hacer asignaciones de expresiones lógicas, de nuevo, tan
complejas como precisemos.
En programación en general, y en particular en Javascript, la siguiente tabla nos va a servir
para determinar las equivalencias de operadores:

Matemática Javascript Ejemplo Valor de a

Falso false let a = false false

Verdadero true let a = true true

let a = !false true

NOT !
let a = !true false

let a = false && false false

let a = false && true false

Y (AND) &&
let a = true && false false

let a = true && true true

let a = false || false false

let a = false ||true true

O (OR) ||
let a = true || false true

let a = true || true true

10
 Unidad 5 - Variables, constantes y operadores

Por ejemplo:

let a = 5
let b = 10
let validacion = (a > 0) && (b > 0) && (a > b)

En este caso la variable validacion tendrá valor false. Para analizarlo, consideremos la
expresión por partes:

a b a>0 b>0 a>b

5 10 true true false

por lo tanto, validacion la podemos analizar sustituyendo las expresiones lógicas que la
componen por los valores correspondientes sacados de la tabla anterior.
let validacion = true && true && false

Cuando todos los valores se concatenan con AND, basta que uno solo sea FALSO, para
que toda la expresión sea FALSA. Por lo tanto es correcto que el valor sea false

11
 Unidad 5 - Variables, constantes y operadores

Conclusión
En este capítulo, hemos visto el ciclo completo de un cálculo. Cómo definir entradas,
procesamiento y salida. Presentamos cálculos matemáticos, pero también cálculos de
lógica, que nos serán muy útiles para definir condiciones en los siguientes capítulos. Todos
los ejemplos los vimos en el marco de un ambiente de trabajo, definido específicamente
para esta cátedra. Este ambiente nos ayudará a concentrarnos solo en lo que necesitamos
aprender, sin necesidad de instalar o configurar nada. Es muy importante la realización de
los ejercicios prácticos, para comprender y aprender a programar, y también para
familiarizarnos con el entorno de trabajo.

12
 Unidad 5 - Variables, constantes y operadores

Ejercicios
Realice los siguientes ejercicios en el entorno de trabajo. Primero que nada, determine
entradas y salidas. Luego realice el proceso, definiendo las variables que considere
necesarias. Antes de probar en el entorno, pruebe en papel simulando cada paso de la
ejecución y mostrando en una tabla los valores que toman las variables.

1. Realice un programa que intercambie los valores de dos variables

○ Ejemplo si A=5 y B=6, luego A=6, B=5
2. Realice un programa que calcule la superficie de un triángulo, dados base y altura
○ Ejemplo BASE=10, ALTURA = 2 , entonces RESULTADO = 10
3. Realice un programa que haga la conversión de metros a pies, dado que 1 metro
son 3,28 pies. Esto es, dada una cantidad en metros que el sistema muestre la
cantidad de pies.
○ Ejemplo, dado METROS=2 , RESULTADO=6,56
4. Realice un programa que implemente la formula resolvente o de Bhaskara

Debe poder obtener los dos valores posibles de x, para la raíz positiva y para la raíz
negativa.
5. Dado que 1 dólar estadounidense equivale a 0,96 euros, realizar un programa que
realice la conversión de dólares a euros.
6. Realizar un programa que pregunte un monto de pesos, y un interés mensual, que
calcule cuánto es el monto al fin del mes con el interés aplicado.
○ Ejemplo, sea Monto = 100 y Porcentaje = 25, entonces Saldo = 125
7. Realice un programa que dado un Monto con IVA ya aplicado, permita recuperar el
monto original.
○ Ejemplo sea Monto = 121, e IVA=21, entonces ORIGEN = 100.
8. Realizar un programa que permita determinar la cantidad de horas de un viaje, dada
una distancia y una velocidad promedio.
○ Ejemplo sea Velocidad = 100 km/h , y Distancia = 200 Km, entonces el
tiempo serán 2 Horas.
9. Realizar un programa que permita calcular el volumen de un silo de base circular.
○ Ejemplo, sea la base circular del silo de un Radio=5 metros, y una altura de
10 metros, el volumen del silo será de 785 metros cúbicos.

13
 Unidad 5 - Variables, constantes y operadores

10. Realizar un programa que convierta un valor de hora definida en decimales, al

correspondiente hora, minutos y segundos.
○ Ejemplo Hora=1.5, corresponde a 1 Hora, 30 Minutos
○ Ejemplo Hora=5.371, corresponde a: 5 horas, 22.26 minutos, que se puede
detallar como 5 horas, 22 minutos, 15.6 segundos
11. Calcular un valor en decimales para una hora, siendo la misma especificada en
Horas, Minutos y Segundos.
○ Ejemplo, dado Horas=5, Minutos=22, Segundos=15.6, entonces
Resultado=5.371
12. Calcular el promedio de cuatro valores y mostrarlo
13. Realizar la suma de dos fracciones. El sistema pregunta numerador y denominador
de un número, y numerador y denominador de otro número. Como respuesta emite
numerador y denominador (No es necesario simplificar el resultado).
14. Realizar un programa que realice una resta, pero que siempre muestre el valor
absoluto del resultado.
○ Ejemplo A=5, B=1, entonces Resultado = 4
○ Ejemplo A=1, B=5, entonces Resultado = 4

14
 Unidad 5 - Variables, constantes y operadores

Referencias
Curso de “Programación 1” para TUDAI de la Facultad de Ciencias Exactas. UNICEN.
https://drive.google.com/file/d/1USg3jQXABncChdjUl5BAL2Y6wd7OsM_6/view

15