Java Script, funcionamiento y

utilidades
K. Peña, E. Simbaña, MJ. Vizuete

Resumen

JavaScript es un lenguaje de programación que ha Las acciones controladas por JavaScript pueden ser
ganado popularidad en los últimos años desde su el despliegue de un menú, hacer aparecer,
lanzamiento, este básicamente permite el desarrollo desaparecer o cambiar texto e imágenes, realizar
de acciones y procesos dinámicos en un documento cálculos y mostrar resultados, mostrar mensajes de
Html,es decir, dentro de una página web.En la
elaboración de una página web este lenguaje
constituye solamente una capa de tres que
aviso (por ejemplo si faltan datos en un formulario)
constituyen el proceso(Html y css) Este lenguaje
y “efectos animados” en general.
de programación permite al desarrollador crear
contenido novedoso y eficiente, controlar archivos
Este lenguaje es principalmente utilizado por parte
de multimedia, crear imágenes animadas y muchas
de programadores web para dar respuestas rápidas
otras cosas más
a las acciones del usuario sin necesidad de enviar la
información de lo que ha hecho el usuario al
I. INTRODUCCIÓN
servidor y esperar respuesta de éste (lo que haría
más lento los procesos). El código JavaScript se
El objeto de investigación de este artículo es
carga al mismo tiempo que el código HTML en el
comprender el funcionamiento del lenguaje de
navegador, y reside en el cliente (computador en el
programación Java-Script y sus principales
que nos encontramos), por lo que JavaScript sigue
estructuras, investigando los usos de este lenguaje
funcionando incluso aunque se produzca un corte
por medio de la abstracción de información, para
en la conexión a internet (en este caso no podremos
así poder conocer las funcionalidades que tiene.
seguir navegando hacia otras direcciones web, pero
A partir de la investigación se busca explicar más a
sí podremos ejecutar procesos “locales” en nuestro
fondo los componentes de este lenguaje y algunas
computador para la página web en que nos
reglas que lo caracterizan, de tal manera que la
encontráramos).​[1]
información sea comprensible y detallada. También
se busca desarrollar ejemplos básicos donde se
B. ​Compiladores
evidencie el lenguaje ya antes mencionado.
1) Google Closure Compiler
A. Qué es Javascript
No es realmente un compilador de código en el
JavaScript es un lenguaje utilizado para dotar de
sentido normal, pero sí que se puede considerar un
efectos y procesos dinámicos e “inteligentes” a
compilador porque compila, junta diferentes
documentos HTML. Un documento HTML viene
fragmentos de código y transforma de JavaScript a
siendo coloquialmente “una página web”. Así,
JavaScript mejorado.
podemos decir que el lenguaje JavaScript sirve para
Google Closure Compiler es una herramienta que
ejecutar acciones rápidas y efectos animados en
ayuda a optimizar y encontrar errores en el código
páginas web.
JavaScript.Pero entonces ¿Qué hace?

1
-Junta diferentes ficheros de JavaScript en uno y salidas.
solo. En JavaScript, como no se puede indicar el tipo de
-Elimina contenido innecesario para la ejecución, la variable, se requiere mucho más cuidado cuando
como los comentarios. operamos con sus contenidos.
-Detecta código inútil que no se usa.
-Detecta código que contiene errores.​[2] E. Estructura iterativa

2) AngularJS 1) Entrada repetitiva do while

Se trata de un framework MVC (Modelo Vista
Controlador) de JavaScript de código abierto​, La sentencia do/while es una estructura repetitiva,
desarrollado por Google​, que se utiliza para crear y la cual se utiliza cuando conocemos de antemano
mantener aplicaciones web de una sola página​. Su que por lo menos una vez se ejecutará el bloque
objetivo es aumentar las aplicaciones basadas en repetitivo, a diferencia del while que puede no
navegador con capacidad de Modelo Vista ejecutar el bloque.
Controlador (MVC), en un esfuerzo para hacer que
La condición de la estructura está abajo del bloque
el desarrollo y las​ pruebas​ sean más fáciles.
a repetir y finaliza la ejecución del bloque
Al usar un patrón MVVM (model view
repetitivo cuando la condición retorna falso.
view-model) separamos la lógica de la de diseño
pero mantenemos ambas partes conectadas (data
2) Entrada repetitiva For
binding). De manera que la capa visual no sabe lo
que está pasando en la capa lógica pero Un ​bucle ​for se repite hasta que la condición
manteniendo control sobre el DOM (el cuerpo de la especificada se evalúa como falsa.
web) y actualizar su contenido como queramos. ​[3] Cuando un bucle for se ejecuta, ocurre lo siguiente:

3) NodeJS 1. La expresión de inicialización, si existe, se

Es un entorno de tiempo de ejecución de JavaScript ejecuta. Esta expresión habitualmente
en tiempo real, que se encuentra de lado del inicializa uno o más contadores del bucle,
servidor y utiliza un modelo asíncrono y dirigido pero la sintaxis permite una expresión con
por eventos. Incluye todo lo que se necesita para cualquier grado de complejidad. Esta
ejecutar un programa escrito en JavaScript. expresión puede también declarar
Se trata de una Máquina Virtual rápida y de gran variables.
calidad. Además las capacidades de Node.js para 2. Se evalúa la expresión condición. Si el
I/O (Entrada/Salida) son realmente ligeras y valor de condición es verdadero, se
potentes, dando al desarrollador la posibilidad de ejecuta la sentencia del bucle. Si el valor
utilizar toda la I/O del sistema.Uno de sus puntos de condición es falso, el bucle for finaliza.
fuertes, es su capacidad de mantener muchas Si la expresión condición es omitida, la
conexiones abiertas y esperando. ​[4] condición es asumida como verdadera.
3. Se ejecuta la sentencia. Para ejecutar
C. Variables múltiples sentencias, use un bloque de
Una variable es un espacio de memoria donde se sentencias ({ ... }) para agruparlas.
almacena un dato y se puede guardar cualquier tipo 4. Se ejecuta la expresión
de información necesaria para realizar las acciones expresionIncremento, si hay una, y el
de nuestros programas. ​[6] control vuelve al paso 2. ​[7]
D. Estructuras secuenciales
F. Entradas por teclado
Son aquellas en la que una acción (instrucción)
sigue a otra en secuencia. Las tareas se suceden de En Informática, la "entrada" de un programa son
tal modo que la salida de una es la entrada de la los datos que llegan al programa desde el exterior.
siguiente y así sucesivamente hasta el fin del Actualmente, el origen más habitual es el
proceso​.​También se las puede identificar ​cuando en teclado(Sintes,2018).
un problema solo participan operaciones, entradas

2
 1) Prompt() …enunciados a ejecutar si NO se cumple la
El método prompt () se utiliza para mostrar un primera condición…
cuadro de diálogo con un mensaje opcional que }
nos permite solicitar información al visitante de la
página(Barrena,2016). A menudo se usa si el Ejemplo:
usuario desea ingresar un valor antes de ir a una En un programa se desea lanzar una advertencia si
página.Entonces devuelve una cadena que contiene el valor de una variable es mayor que 100, y otra si
el texto ingresado por el usuario, o nulo. es mayor:

Sintaxis:
if (variable _a_ comparar>100){
mensaje (mensaje, predeterminado) alert("El valor de la variable es mayor que
El mensaje es una cadena de texto para mostrar al 100");
usuario. Se puede omitir si no hay nada que mostrar } else {
en la ventana de solicitud, es decir, es opcional. alert("El valor de la variable es menor o igual
Default es una cadena que contiene el valor que 100");
predeterminado que se muestra en el campo de }
entrada de texto. También es opcional.
Ejemplo: Además, las instrucciones se pueden vincular:
prompt("Indique su edad");
Si se prueba en el editor online (​entre etiquetas if (variable _a_ comparar>100){
<script></script>​), saldrá un pop-up con el texto alert("El valor de la variable es mayor que
que se haya incluido y una casilla para introducir la 100");
información solicitada (datos numéricos o texto).Se } else if (variable _a_ comparar==100){
puede incluir una respuesta por defecto. Esta se alert("El valor de la variable es exactamente
mostrará en la casilla y puede ser modificada por el 100");
visitante(Barrena,2017).[8] } else {
alert("El valor de la variable es menor que
G. Estructuras condicionales 100");
}
Un script consiste en una lista de enunciados que se
van ejecutando a medida que se cargan. Sin 2) Switch
embargo, en ocasiones es necesario controlar el Por medio de switch se puede listar una serie de
flujo de la ejecución estableciendo alternativas, es bloques de enunciados que se ejecuten dependiendo
decir, que una serie de enunciados se ejecuten en del valor de una variable ​[9]
algunas ocasiones y en otras no(Fernández,2007).
Para permitir esto existen las estructuras II. DIAGRAMAS
condicionales.
Diagrama de flujo aplicación: “Adivina el número”
1) if … else
medio de if se puede indicar una condición que, de El programa inicia solicitando datos, una vez estos
cumplirse, permite la ejecución de uno o más sean ingresados,se dirigirá a dos condiciones una
enunciados(Castillo,2017). Por medio de else se en la que compara el numeroUsuario y el
puede establecer una alternativa, aunque su uso es numeroCPU si son iguales imprimirá Has acertado
opcional.La sintaxis de esta estructura es la si no lo son llegara a la otra condición donde me
siguiente: indicara si el número es mayor o menor y de esta
manera hasta que logremos acertar y de esta
if(condición){ manera sea el númeroUsuario igual al númeroCPU.
…enunciados a ejecutar si se cumple la
condición…
}
else {

3
 El proceso está condicionado por un while que
mantendrá un bucle hasta que el número generado
aleatoriamente por el computador deje de ser
distinto al del usuario y en este caso surgirá un alert
con las palabras: 'haz acertado'​.

B. Programa “Calculadora”

Primero el programa solicita que el usuario elija la

operación a ejecutar mediante una estructura
Diagrama casos de uso-clase de la aplicación
HTML posicionando botones, del mismo modo, se
“Calculadora”
condiciona al botón a ejecutar cierta función una
vez se dé click en él por ejemplo :
En este diagrama se puede evidenciar de una
manera más didáctica el funcionamiento de nuestra <input type="button" class="boton rojo"
aplicación calculadora, mostrado desde el punto de value="suma" onclick="suma()" >
vista de un usuario y del programa. Es así que el
usuario desea usar esta aplicación y para ello debe para la función suma una vez el usuario digite
mediante la función prompt el primer y segundo
cumplir con los pasos de ingresar, seleccionar la
número a operar esta crea una segunda función la
operación a realizar, escribir el primer y segundo
cual realiza la operación denominada suma 2.
número y posteriormente obtener un resultado;
mientras tanto el programa debe verificar la f​unction suma(){
operación seleccionada, procesar los valores y dar
el resultado. numero1 = prompt('Introduce el primer numero
entero');

numero2 = prompt('Introduce el segundo numero

entero');

resultado = suma2(numero1,numero2);

alert(resultado);

En la operación suma dos se lleva a cabo todo el

proceso por el cual las dos variables van a ser
III. ​ EXPLICACIÓN DE CÓDIGO FUENTE sometidas para poder conseguir el resultado o valor
que se mostrará mediante un alert.
A. Programa “Adivina número”
function suma2(num1, num2){
Primero el programa crea un número aleatorio del 1
al 10 mediante la función var valor;
Math.floor((Math.random() *10) + 1); este número
se compara con el valor ingresado por el usuario num1 = parseInt(num1);
realizando una entrada por teclado mediante la
función parseInt(prompt('Adivina el número que num2 = parseInt(num2);
estoy pensando del 1 al 10'))
valor = num1 + num2;
S​i la comparación de estos dos números son
distintos surgirá un alert mediante una condición if return(valor);
en donde si el número es mayor mostrará el
mensaje 'el número es mayor' y si no lo es mostrara }
lo contrario.

4
El proceso se repite con el resto de operaciones en Javascript es un lenguaje de programación que se
donde al momento de llegar a operaciones más emplea en la creación de páginas web, y que
avanzadas como potencia o raíz cuadrada se hizo funciona integrándose con el HTML,además no
vital la utilización de dos funciones preestablecidas necesita de compiladores ya que son los
llamadas Math.pow y Math.sqrt respectivamente
navegadores los que se encargan de leer el código.
las cuales permiten el retorno del valor respuesta.
Las estructuras condicionales de Javascript como
if-else y switch,permiten ejecutar ciertas partes del
III. Metodología código dependiendo si se cumplen o no con las
condiciones establecidas,estos conceptos se fueron
La revisión bibliográfica fue el principal método comprendiendo a través del desarrollo de los
empleado en la realización de este artículo, ya que programas .
nos centramos en el análisis de material
bibliográfico y de consulta de información Se cumplió nuestro objetivo acerca de desarrollar
respecto al tema estudiado, lo que nos permitió ejemplos básicos donde se evidencie el lenguaje
afianzar los conceptos necesarios para el desarrollo Javascript, esto debido a las investigaciones
del código de los programas. La investigación fue realizadas referentes a este lenguaje, su
posible por medio de herramientas utilizadas, así funcionamiento y características. De esta manera
como el programa Atom, el cual nos sirvió para nuestras dos aplicaciones, tanto “calculadora”
poder programar el código, el navegador en el cual como “adivina número” se encuentran con un buen
ejecutamos los programas, la herramienta Github y funcionamiento y listas para ser usadas.
del mismo modo la información recolectada nos
REFERENCIA
permitió encontrar las múltiples estructuras a
estudiar.
[1] ​Pérez, J. E. (2019). introduccion a JavaScript.
IV. Resultados
[2] ​Compiler, C. (2017). Google Developers.
A partir del análisis y revisión de información se
[3] Green, B., & Seshadri, S. (2013). AngularJS. "
logró desarrollar y ejecutar dos programas ,en los
O'Reilly Media, Inc.".
cuales se evidencian las principales estructuras del
lenguaje de programación JavaScript,así como sus [4] Gómez, D., Flores, Á., & Ureta, R. (2018).
variables ,entradas por teclado y sintaxis Programación Node. JS. Caribeña de Ciencias
Sociales, (mayo).
El editor de código fuente o id en múltiples
ocasiones puede representar una ayuda para el [5] Pérez, J. E. (2019). introducción a JavaScript.
programador puesto que cuentan con múltiples
facilidades para hacer el desarrollo más ameno, por [6] Mohedano, J., Saiz, J. M., & Román, P. S.
tal motivo se escogió atom este es un editor de (2012). Iniciación a javascript. Ministerio de
código fuente que cuenta con un autocompletado Educación
inteligente y en muchas ocasiones agiliza el trabajo.

Javascript es un lenguaje de programación

interpretado,por tal motivo, su estructura amerita de
un lenguaje de etiquetado como HTML y CSS para
poder ofrecer de una interfaz más amigable al [7] ​Singh,P.(2015).Repensar los bucles de
usuario, se recomienda tener una idea base de un JavaScript como combinadores.
lenguaje HTML o CSS para poder realizar trabajos
de mayor envergadura . [8] Castillo, A. A. (2017). Curso de Programación
Web: JavaScript, Ajax y jQuery. IT Campus
V Conclusión Academy.

5
[9] ​Navarrete, T. (2006). El lenguaje JavaScript.
Argentina​.