JavaScript Lic. Fredy A.
Calsina H
LENGUAJE DE PROGRAMACION JAVASCRIPT
Algoritmo: Son los pasos a seguir para resolver un problema.
Programa: Conjunto de instrucciones que entiende un ordenador para realizar una
actividad. Todo programa tiene un objetivo bien definido: un procesador de texto es un
programa que permite cargar, modificar e imprimir textos, un programa de ajedrez permite
jugar al ajedrez contra el ordenador u otro contrincante humano. La actividad
fundamental del programador es resolver problemas empleando el ordenador como
herramienta fundamental. Para la resolución de un problema hay que plantear un
algoritmo.
Lenguaje de programación: Conjunto de instrucciones que son interpretadas por una
computadora para realizar operaciones, mostrar datos por pantalla, sacar listados por
impresora, entrar datos por teclado, etc.
1. ¿Qué es JavaScript?
JavaScript, al igual que Flash(tecnología obsoleta), Visual Basic Script (tecnología
obsoleta), Applet (tecnología obsoleta), es una de las múltiples maneras que han surgido
para extender las capacidades del lenguaje HTML (lenguaje para el diseño de páginas de
Internet). Al ser la más sencilla, es por el momento la más extendida.
JavaScript no es un lenguaje de programación propiamente dicho como C, C++ etc. Es un
lenguaje script u orientado a documento, como pueden ser los lenguajes de macros que
tienen muchos procesadores de texto y planillas de cálculo. Hasta hace poco no se podía
desarrollar programas con JavaScript que se ejecutaran fuera de un Navegador, aunque
en este momento comienza a expandirse a otras áreas como la programación en el
servidor con [Link] o aplicaciones de escritorio con Electron JS.
JavaScript es un lenguaje interpretado que se embebe en una página web HTML. Un
lenguaje interpretado significa que a las instrucciones las analiza y procesa el navegador
en el momento que deben ser ejecutadas.
Ejemplo 1: Nuestro primer programa será el famoso "Hola Mundo", es decir un programa
que muestre en el documento HTML el mensaje "Hola Mundo".
El programa en JavaScript debe ir encerrado entre las marcas 'script':
<script>
</script>
1
JavaScript Lic. Fredy A. Calsina H
En versiones anteriores a HTML5 el programa en JavaScript debe ir encerrado entre la
marca script e inicializada la propiedad type con la cadena text/javascript:
<script type="text/javascript">
</script>
Para imprimir caracteres sobre la página debemos llamar al comando 'write' del objeto
document. La información a imprimirse debe ir entre comillas y encerrada entre paréntesis.
Todo lo que indicamos entre comillas aparecerá tal cual dentro de la página HTML.
Es decir, si pedimos al navegador que ejecute esta página mostrará el texto 'Hola Mundo'.
Cada vez que escribimos una instrucción finalizamos con el carácter punto y coma.
ES IMPORTANTISIMO TENER EN CUENTA QUE JavaScript es SENSIBLE A MAYUSCULAS Y
MINUSCULAS. NO ES LO MISMO ESCRIBIR: [Link] que [Link] (la primera
forma es la correcta, la segunda forma provoca un error de sintaxis).
Nos acostumbraremos a prestar atención cada vez que escribamos en minúsculas o
mayúsculas para no cometer errores sintácticos. Ya veremos que los nombres de funciones
llevan letras en mayúsculas.
Por el momento después de cada instrucción se dispone un punto y coma (luego veremos
que en muchos casos se los puede obviar):
[Link]('Hola Mundo');
Observaciones
Para corregir los errores sintácticos cuando codifiquemos nuestros programas será
necesario tener abierta la ventana de "Herramientas para desarrolladores". La podemos
abrir presionando la tecla 'F12' o desde el menú de opciones del navegador:
Por ejemplo modifiquemos nuestro programa y agreguemos un error sintáctico:
<script>
[Link]('Hola Mundo');
</script>
2
JavaScript Lic. Fredy A. Calsina H
La pestaña de la "Consola" nos informa el tipo de error, el archivo y la línea dentro del
archivo donde se ha detectado el error.
Esta herramienta para desarrolladores la consultaremos constantemente para detectar y
corregir errores que dispongamos en nuestra aplicación.
2. Variables.
Una variable es un depósito donde hay un valor. Consta de un nombre y pertenece a un
tipo (númerico, cadena de caracteres, etc.)
Tipos de variable:
Una variable puede almacenar:
Valores Enteros (100, 260, etc.)
Valores Reales (1.24, 2.90, 5.01, etc.)
Cadenas de caracteres ('Juan', 'Compras', 'Listado', etc.)
Valores lógicos (true,false)
Existen otros tipos de variables que veremos más adelante.
Las variables son nombres que ponemos a los lugares donde almacenamos la información.
En JavaScript, deben comenzar por una letra o un subrayado (_), pudiendo haber además
dígitos entre los demás caracteres. Una variable no puede tener el mismo nombre de una
palabra clave del lenguaje.
Una variable se define anteponiéndole la palabra clave let (en JavaScript antiguo se utiliza
la palabra clave var, que veremos hay algunas diferencias importantes):
let dia;
se pueden declarar varias variables en una misma línea:
let dia, mes, año;
3
JavaScript Lic. Fredy A. Calsina H
a una variable se la puede definir e inmediatamente inicializarla con un valor:
let edad=20;
o en su defecto en dos pasos:
let edad;
edad=20;
Elección del nombre de una variable:
Debemos elegir nombres de variables representativos. En el ejemplo anterior los nombres
dia, mes, anio son lo suficientemente claros para darnos una idea acabada sobre su
contenido, una mala elección de nombres hubiera sido llamarlas a, b y c. Podemos darle
otros buenos nombres. Otros no son tan representativos, por ejemplo d, m, a. Posiblemente
cuando estemos resolviendo un problema dicho nombre nos recuerde que almacenamos
el dia, pero pasado un tiempo lo olvidaríamos.
Impresión de variables en una página HTML.
Para mostrar el contenido de una variable en una página utilizamos el objeto document y
llamamos a la función write.
Ejemplo 2 definimos una serie de variables y las mostramos en la página:
[Link]
Cuando imprimimos una variable, no la debemos disponer entre simples comillas (en caso
de hacer esto, aparecerá el nombre de la variable y no su contenido)
Los valores de las variables que almacenan nombres (es decir, son cadenas de caracteres)
deben ir encerradas entre comillas simples o dobles. Los valores de las variables enteras (en
este ejemplo la variable edad) y reales no deben ir encerradas entre comillas. Cada
4
JavaScript Lic. Fredy A. Calsina H
instrucción finaliza con un punto y coma (luego veremos que en muchos casos se puede
obviar, pero cuando comenzamos a aprender a programar no es conveniente ya que se
nos pueden presentar errores difíciles de detectar)
Las variables de tipo boolean pueden almacenar solo dos valores: true o false.
El resultado al visualizar la página debe ser 4 líneas similares a éstas:
Juan
10
1.92
false
Es decir que se muestran los contenidos de las 4 variables. Una variable es de un tipo
determinado cuando le asignamos un valor:
let edad=10;
Es de tipo entera ya que le asignamos un valor entero.
let nombre='juan';
Es de tipo cadena (string)
Para mostrar el contenido de una variable en una página debemos utilizar el método 'write'
que pertenece al objeto document. Recordemos que el lenguaje JavaScript es sensible a
mayúsculas y minúsculas y no será lo mismo si tipeamos:
[Link](nombre);
Esto porque no existe el objeto 'Document' sino el objeto 'document' (con d minúscula), lo
mismo no existe el método 'Write' sino 'write', este es un error muy común cuando
comenzamos a programar en JavaScript.
Ejercicio 1: Desarrollar un programa en JavaScript que defina e inicialice una variable de
tipo cadena de caracteres donde almacenemos el nombre de un empleado y otra variable
de tipo entera donde almacenar el sueldo. Imprimir cada variable en una línea distinta en
pantalla.
3. Entrada de datos por teclado.
Para la entrada de datos por teclado tenemos el método prompt. Cada vez que
necesitamos ingresar un dato con este método aparece una ventana donde cargamos el
valor.
Hay otras formas más sofisticadas para la entrada de datos en una página HTML, pero para
el aprendizaje de los conceptos básicos de JavaScript nos resultará más práctica esta
metodología (luego aprenderemos a recuperar datos de un formulario HTML).
Ejemplo 3:
5
JavaScript Lic. Fredy A. Calsina H
La sintaxis del método prompt es:
<variable que recibe el dato>=prompt(<mensaje a mostrar en la ventana>,<valor
inicial a mostrar en la ventana>);
El método prompt tiene dos parámetros: uno es el mensaje y el otro el valor inicial a mostrar
(el segundo parámetro es opcional)
El diálogo que aparece con el método prompt es similar a la siguiente imagen (depende
del navegador):
Nuevamente hacemos notar que la entrada de datos en los sitios web reales se hace
mediante formularios HTML, pero con fines educativos conviene utilizar esta metodología
hasta aprender los fundamentos de JavaScript.
Ejercicio 2: Desarrollar un programa que permita cargar el nombre de un usuario y su mail
por teclado. Mostrar posteriormente los datos en la página HTML.
4. Estructuras secuenciales de programación.
Cuando en un problema sólo participan operaciones, entradas y salidas se la denomina
estructura secuencial. El problema anterior, donde se ingresa el nombre de una persona y
su edad se trata de una estructura secuencial.
6
JavaScript Lic. Fredy A. Calsina H
Ejemplo de otro algoritmo con estructura secuencial:
Ejemplo 4. Realizar la carga de dos números por teclado e imprimir su suma y su producto:
Lo primero que debemos tener en cuenta es que si queremos que el operador + sume los
contenidos de los valores numéricos ingresados por teclado, debemos llamar a la función
parseInt y pasar como parámetro las variables valor1 y valor2 sucesivamente.
Con esto logramos que el operador '+', sume las variables como enteros y no como
cadenas de caracteres. Si por ejemplo sumamos '1' + '1' sin utilizar la función parseInt el
resultado será '11' en lugar de 2, ya que el operador + concatena las dos cadenas.
En JavaScript, como no podemos indicarle de qué tipo es la variable, requiere mucho más
cuidado cuando operamos con sus contenidos.
Observaciones
Siempre el método prompt retorna una cadena de caracteres (string), indistintamente
carguemos solo caracteres numéricos. El siguiente ejemplo puede dejarnos más claro su
funcionamiento:
Ejemplo 5 Tenemos como resultado:
7
JavaScript Lic. Fredy A. Calsina H
Tenemos como resultado:
Ejercicios:
3. Realizar la carga del lado de un cuadrado, mostrar por pantalla el perímetro del mismo
(El perímetro de un cuadrado se calcula multiplicando el valor del lado por cuatro)
4. Escribir un programa en el cual se ingresen cuatro números, calcular e informar la suma
de los dos primeros y el producto del tercero y el cuarto.
5. Realizar un programa que lea cuatro valores numéricos e informar su suma y producto.
5. Estructuras condicionales simples.
No todos los problemas pueden resolverse empleando estructuras secuenciales. Cuando
hay que tomar una decisión aparecen las estructuras condicionales.
En nuestra vida diaria se nos presentan situaciones donde debemos decidir.
¿Elijo la carrera A o la carrera B ?
¿Me pongo este pantalón ?
¿Entro al sitio A o al sitio B ?
Para ir al trabajo, ¿elijo el camino A o el camino B ?
Al cursar una carrera, ¿elijo el turno mañana, tarde o noche ?
Por supuesto que en un problema se combinan estructuras secuenciales y condicionales.
Cuando se presenta la elección tenemos la opción de realizar una actividad o no realizarla.
En una estructura CONDICIONAL SIMPLE por el camino del verdadero hay actividades y por
el camino del falso no hay actividades. Por el camino del verdadero pueden existir varias
operaciones, entradas y salidas, inclusive ya veremos que puede haber otras estructuras
condicionales.
Ejemplo 6: Realizar la carga de una nota de un alumno. Mostrar un mensaje que aprobó si
tiene una nota mayor o igual a 4:
8
JavaScript Lic. Fredy A. Calsina H
Aparece la instrucción if en el lenguaje JavaScript. La condición debe ir entre paréntesis. Si
la condición se verifica verdadera se ejecuta todas las instrucciones que se encuentran
encerradas entre las llaves de apertura y cerrado seguidas al if.
Para disponer condiciones en un if podemos utilizar alguno de los siguientes operadores
relacionales:
> mayor
>= mayor o igual
< menor
<= menor o igual
!= distinto
== igual
Siempre debemos tener en cuenta que en la condición del if deben intervenir una variable
un operador relacional y otra variable o valor fijo.
Como queremos que en la variable 'nota' se guarde como entero lo convertimos llamando
a parseInt (esta es la forma más concisa de almacenar como entero el valor ingresado con
prompt):
nota = parseInt(prompt('Ingrese su nota:'));
Otra cosa que hemos incorporado es el operador + para cadenas de caracteres:
[Link](nombre+' esta aprobado con un '+nota);
Con esto hacemos más corto la cantidad de líneas de nuestro programa, recordemos que
veníamos haciéndolo de la siguiente forma:
[Link](nombre);
[Link](' esta aprobado con un ');
[Link](nota);
Ejemplo 7: Se ingresa por teclado el sueldo de un empleado (se puede ingresar un valor
con decimales), si el sueldo supera los 3000 pesos, luego mostrar un mensaje indicando
que debe abonar impuestas.
9
JavaScript Lic. Fredy A. Calsina H
Si ingresamos por teclado el sueldo: 3000.67 luego se muestra el mensaje debido que la
condición del if se verifica verdadera:
Para convertir un string que nos retorna prompt debemos utilizar la función parseFloat:
sueldo = parseFloat(prompt('Ingrese el sueldo del empleado:', ''));
Para resumir tener en cuenta que si queremos guardar el dato retornado por prompt como
cadena utilizamos la sintaxis:
nombre = prompt('Ingrese el nombre:')
Si queremos guardarlo como entero:
edad = parseInt(prompt('Ingrese los años:'))
y finalmente si queremos que se guarde en la variable como valor flotante con coma:
sueldo = parseFloat(prompt('Ingrese el sueldo del empleado:'));
Ejercicios
6. Se ingresan tres notas de un estudiante, si el promedio es mayor o igual a 61 mostrar el
mensaje 'Promocionado'. Tener en cuenta que para obtener el promedio debemos
operar suma=nota1+nota2+nota3; y luego hacer promedio=suma/3.
7. Solicitar que se ingrese dos veces una clave. Mostrar un mensaje si son iguales (tener en
cuenta que para ver si dos variables tienen el mismo valor almacenado debemos utilizar
el operador ==)
6. Estructuras condicionales compuestas.
Cuando se presenta la elección tenemos la opción de realizar una actividad u otra. Es decir
tenemos actividades por el verdadero y por el falso de la condición. Lo más importante
que hay que tener en cuenta es que se realizan las actividades de la rama del verdadero
o las del falso, NUNCA se realizan las actividades de las dos ramas.
En una estructura condicional compuesta tenemos entradas, salidas, operaciones, tanto
por la rama del verdadero como por la rama del falso.
Ejemplo 8: Realizar un programa que solicite dos números distintos y muestre el mayor de
ellos:
10
JavaScript Lic. Fredy A. Calsina H
El método prompt retorna un string por lo que debemos convertirlo a entero cuando
queremos saber cual de los dos valores es mayor numéricamente. En el lenguaje JavaScript
una variable puede ir cambiando el tipo de dato que almacena a lo largo de la ejecución
del programa.
Más adelante veremos qué sucede cuando preguntamos cuál de dos string es mayor.
Estamos en presencia de una ESTRUCTURA CONDICIONAL COMPUESTA ya que tenemos
actividades por la rama del verdadero y del falso. La estructura condicional compuesta
tiene la siguiente codificación:
if (<condición>)
{
<Instruccion(es)>
}
else
{
<Instruccion(es)>
}
Es igual que la estructura condicional simple salvo que aparece la palabra clave “else” y
posteriormente un bloque { } con una o varias instrucciones. Si la condición del if es
verdadera se ejecuta el bloque que aparece después de la condición, en caso que la
condición resulte falsa se ejecuta la instrucción o bloque de instrucciones que indicamos
después del else.
Ejercicios
8. Se ingresan tres notas de un alumno, si el promedio es mayor o igual a 4
mostrar un mensaje 'regular', sino 'reprobado'.
9. Se ingresa por teclado un número positivo de uno o dos dígitos (1..99)
mostrar un mensaje indicando si el número tiene uno o dos dígitos
(recordar de convertir a entero con parseInt para preguntar
posteriormente por una variable entera). Tener en cuenta qué condición
debe cumplirse para tener dos dígitos un número entero.
7. Estructuras condicionales anidadas.
Decimos que una estructura condicional es anidada cuando por la rama del
verdadero o el falso de una estructura condicional hay otra estructura condicional.
Ejemplo 9: Desarrollar un programa que pida por teclado tres notas de un
alumno, calcule el promedio e imprima alguno de estos mensajes:
Si el promedio es >=7 mostrar "Promocionado".
Si el promedio es >=4 y <7 mostrar "Regular".
Si el promedio es <4 mostrar "Reprobado".
11
JavaScript Lic. Fredy A. Calsina H
Analicemos el siguiente programa. Se ingresan tres string por teclado que representan las
notas de un alumno, se transformas a variables enteras y se obtiene el promedio sumando
los tres valores y dividiendo por 3 dicho resultado.
Primero preguntamos si el promedio es superior o igual a 7, en caso afirmativo por la rama
del verdadero de la estructura condicional mostramos un mensaje que indique
'Promocionado' (con comillas indicamos un texto que debe imprimirse en pantalla,
podemos utilizar comillas simples o dobles en JavaScript). En caso que la condición nos de
falso, por la rama del falso aparece otra estructura condicional, porque todavía debemos
averiguar si el promedio del alumno es superior o igual a cuatro o inferior a cuatro.
Los comentarios en JavaScript los hacemos disponiendo dos barras previas al comentario
(los comentario en tiempo de ejecución no son tenidos en cuenta y tienen por objetivos de
documentar el programa para futuras modificaciones):
//Convertimos los 3 string en enteros
Si queremos disponer varias líneas de comentarios tenemos como alternativa:
/*
linea de comentario 1.
linea de comentario 2.
etc.
*/
12
JavaScript Lic. Fredy A. Calsina H
Es decir encerramos el bloque con los caracteres /* */
Ejercicios
10. Se cargan por teclado tres números distintos. Mostrar por pantalla el mayor de ellos.
11. Se ingresa por teclado un valor entero, mostrar una leyenda que indique si el número
es positivo, cero o negativo.
12. Confeccionar un programa que permita cargar un número entero positivo de hasta tres
cifras y muestre un mensaje indicando si tiene 1, 2, o 3 cifras.
8. Operadores lógicos && (y) en las estructuras condicionales.
El operador &&, traducido se lo lee como "Y". Se emplea cuando en una estructura
condicional se disponen dos condiciones. Cuando vinculamos dos o más condiciones con
el operador "&&" las dos condiciones deben ser verdaderas para que el resultado de la
condición compuesta de Verdadero y continúe por la rama del verdadero de la estructura
condicional.
Recordemos que la condición debe ir entre paréntesis en forma obligatoria.
La utilización de operadores lógicos permiten en muchos casos, plantear algoritmos más
cortos y comprensibles.
Ejemplo 10: Desarrolar un programa que lea por teclado tres números distintos y nos muestre
el mayor de ellos.
13
JavaScript Lic. Fredy A. Calsina H
Podemos leerla de la siguiente forma: Si el contenido de la variable num1 es mayor al
contenido de la variable num2 Y si el contenido de la variable num1 es mayor al contenido
de la variable num3 entonces la CONDICION COMPUESTA resulta Verdadera.
Si una de las condiciones simples da falsa, la CONDICION COMPUESTA da Falsa y continúa
por la rama del falso.
Es decir que se mostrará el contenido de num1 si y sólo si num1>num2 y num1>num3.
En caso de ser Falsa la condición analizamos el contenido de num2 y num3 para ver cual
tiene un valor mayor.
En esta segunda estructura condicional, al haber una condición simple, no se requieren
operadores lógicos.
Recordar que podemos escribir el código:
num1 = prompt('Ingrese primer número:');
num2 = prompt('Ingrese segundo número:');
num3 = prompt('Ingrese tercer número:');
num1 = parseInt(num1);
num2 = parseInt(num2);
num3 = parseInt(num3);
en una forma más concisa:
num1 = parseInt(prompt('Ingrese primer número:'));
num2 = parseInt(prompt('Ingrese segundo número:'));
num3 = parseInt(prompt('Ingrese tercer número:'));
9. Operadores lógicos || (o) en las estructuras condicionales.
Traducido se lo lee como "O". Si la condición 1 es Verdadera o la condición 2 es Verdadera,
luego ejecutar la rama del Verdadero.
Cuando vinculamos dos o más condiciones con el operador "O", con que una de las dos
condiciones sea Verdadera alcanza para que el resultado de la condición compuesta sea
Verdadero.
Ejemplo 11: Se carga una fecha (día, mes y año) por teclado. Mostrar un mensaje si
corresponde al primer trimestre del año (enero, febrero o marzo). Cargar por teclado el
valor numérico del día, mes y año por separado.
14
JavaScript Lic. Fredy A. Calsina H
La carga de una fecha se hace por partes, ingresamos las variables dia, mes y año.
Si alguna de las condiciones simples del if da verdadero luego se muestra el mensaje:
if (mes==1 || mes==2 || mes==3)
{
[Link]('corresponde al primer trimestre del año.');
}
10. Estructuras switch.
La instrucción switch es una alternativa para remplazar en algunas situaciones los if/else if.
De todos modos se puede aplicar en ciertas situaciones donde la condición se verifica si es
igual a cierto valor. No podemos preguntar por mayor o menor.
Ejemplo 12: Desarrollar un programa que solicite que ingrese un valor entre 1 y 5. Luego
mostrar en castellano el valor ingresado. Mostrar un mensaje de error en caso de haber
ingresado un valor que no se encuentre en dicho rango.
Debemos tener en cuenta que la variable que analizamos debe ir después de la instrucción
switch entre paréntesis. Cada valor que se analiza debe ir luego de la palabra clave 'case'
y seguido a los dos puntos, las instrucciones a ejecutar, en caso de verificar dicho valor la
variable que analiza el switch.
Es importante disponer la palabra clave 'break' al finalizar cada caso. La instrucciones que
hay después de la palabra clave 'default' se ejecutan en caso que la variable no se
verifique en algún case. De todos modos el default es opcional en esta instrucción.
15
JavaScript Lic. Fredy A. Calsina H
Ejemplo 13: Ingresar por teclado el nombre de un color (rojo, verde o azul), luego
mostraremos un mensaje indicando el color ingresado:
Cuando verificamos cadenas debemos encerrarlas entre comillas el valor a analizar:
case 'rojo': [Link]('se ingresó rojo');
break;
Se debe ingresar el minúscula el nombre del color.
Tener en cuenta que no utilizamos parseInt debido a que ingresamos una cadena no
numérica.
Ejercicio 13: Solicitar el ingreso alguna de estas palabras (casa, mesa, perro, gato) luego
mostrar la palabra traducida en inglés. Es decir, si se ingresa 'casa' debemos mostrar el
texto 'house' en la página.
16