Introducción a la programación con JavaScript

Leidy Ramírez Duque
Cód. 2009181322

 Algoritmo, Programa y Lenguaje de Programación
 Nuestro Lenguaje: JavaScript?
Ejercicio
 Variables
Ejercicio
 Entrada de datos por teclado
Ejercicio
 Estructuras secuenciales.
Ejercicio
 Estructura Condicional Simple
Ejercicio
 Estructura Condicionales Compuesta
Ejercicio
 Estructura Condicional Anidada
Ejercicio

 Operadores lógicos && (y) en las estructuras condicionales
Ejercicio
 Operadores lógicos || (o) en las estructuras condicionales
Ejercicio
 Estructuras switch
Ejercicio
 Estructura repetitiva (while)
Ejercicio
 Concepto de acumulador
Ejercicio
 Estructura repetitiva (do/while)
Ejercicio
 Estructura repetitiva (for)
Ejercicio

ALGORITMO, PROGRAMA Y LENGUAJE DE
PROGRAMACIÓN.

Algoritmo: Pasos a seguir para resolver un problema.

Programa: Conjunto de instrucciones que entiende un ordenador para
realizar una actividad. Con objetivos bien definidos, por ejemplo, un
procesador de texto es un programa que permite cargar, modificar e
imprimir textos. La actividad fundamental del programador es resolver
problemas empleando el ordenador como herramienta fundamental. Para
resolverlo, hay que plantear un algoritmo.

Lenguaje de programación: Grupo de instrucciones que son
interpretadas por una computadora para realizar operaciones, mostrar
datos por pantalla, sacar listados por impresora, entrar datos por teclado,
etc. Nosotros programamos utilizando el lenguaje de programación
JavaScript.

NUESTRO LENGUAJE:
¡JAVASCRIPT!
JavaScript, tal como Visual Basic Script, Flash, 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). Es necesario un Navegador que
ejecute el JavaScript.
JavaScript es un lenguaje interpretado que se introduce en una página web HTML. Es decir, analiza y procesa las
instrucciones por el navegador en el momento que deben ser ejectuadas. El primer programa, realizado en el curso,
a manera sencilla el programa: "Hola Mundo",

<html>
<head>
</head>
“Write” es utilizado para imprimir los caracteres sobre la
<body>
página. La información a imprimirse debe ir entre comillas y
<script language="javascript">
encerrada entre paréntesis. Cada vez que escribimos una
document.write('Hola Mundo');
instrucción finalizamos con el caracter punto y coma.
</script>
También, es importante tener en cuenta que JavaScript, es
</body>
sensible a minúsculas y mayúsculas.
</html>

<html>
<head>
</head>
<body>

document.write('Mi nombre es Leidy Ramírez <br>Tengo 9 Años de
edad');
</script>

</body>
</html>

VARIABLES
Variable es un depósito donde hay un valor. Se compone Las variables son nombres que ponemos a los lugares
de un nombre y pertenece a un tipo. Una variable puede donde almacenamos la información. Ésta, se define
contener: anteponiéndole la palabra clave var, pro ejemplo: var dia;
Se puede: * Declarar varias variables en una sola línea.
Valores Enteros (10, 20, 30…)
*Definir e inicializarla con un valor.
Valores Reales (3.54, 2.90, 8.32 …)
Cadenas de caracteres (“Alejandra", “Mercado", “Lista“…)
Valores lógicos (true,false)
Entre otros, tipos de variables.
En el momento de elegir el nombre de la variable, éste deberá ser uno que se recuerde con facilidad. Si, se desea
imprimir la variable en una página se establece de la siguiente forma:

<html>
<head> Las variables referentes a nombres, deben ir encerradas
</head> entre comillas simples. Cada instrucción debe finalizar con
<body> punto y como.
<script language="JavaScript"> De acuerdo a nuestro ejemplo, aparecería:
var edad=10;
var altura=1.92; 10
document.write('<br>'); document.write(edad); 1.92
document.write('<br>'); document.write(altura); Indicando la edad y la estatura.
document.write('<br>');
</script>
</body>
</html>

<html>
<head>
<title>Problema</title>
</head>
<body>

var nombre=“Leidy Ramírez";
var sueldo=“$4'000.000";
document.write(nombre);
document.write(sueldo);

</script>

</body>
</html>

Entrada de datos por el teclado
Para la entrada de datos por teclado, se utiliza la función prompt. Cada vez que necesitamos ingresar un dato con
esta función, aparece una ventana donde cargamos el valor. Para ver su funcionamiento analicemos este ejemplo:

<html>
<head>
</head>
<body>
<script language="JavaScript">
var nombre; var edad;
nombre=prompt('Ingrese su nombre:','');
edad=prompt('Ingrese su edad:','');
document.write('Hola ');
document.write(' asi que tienes ');
document.write(edad);
document.write(' años');
</script>
</body>
</html>

La sintaxis de la función prompt es:
<variable que recibe el dato>=prompt(<mensaje a mostrar en la
ventana>,<valor inicial a mostrar en la ventana>); La función prompt
tiene dos parámetros: uno es el mensaje y el otro el valor incial a
mostrar.

<html>
<head>
</head>
<body>

var nombre;
var email;
nombre=prompt('Ingrese su nombre:','');
email=prompt('Ingrese su email:','');
document.write('Hola ');
document.write(' asi que tu mail es ');
document.write(email);
</script>

</body>
</html>

ESTRUCTURAS SECUENCIALES
Esta estructura consta, básicamente de: operaciones, entradas y salidas. Observemos este ejemplo: “Realizar la carga
de dos números por teclado e imprimir su suma y su producto”:

<html>
<head>
<script language="JavaScript">
var valor1;
var valor2;
valor1=prompt('Ingrese primer número:','');
valor2=prompt('Ingrese segundo número','');
var suma=parseInt(valor1)+parseInt(valor2);
var producto=valor1*valor2;
document.write('La suma es '); Es necesario tener en cuenta, si se quiere, + opere.
document.write(suma); Debemos llamar la función parseInt. De lo contrario
document.write('<br>'); el operador concatena las cadenas. Así: “1+1” en
document.write('El producto es '); vez de dar el resultado: “2”.
document.write(producto);
Sin embargo, para multiplicar * no hace falta indicar
</script>
a fuinción.
</head>
<body>
</body>
</html>

<html>
<head>
</head>
<body>

var valor1;
var valor2;
var valor3;
var valor4;
valor1=prompt('Ingrese primer número:','');
valor2=prompt('Ingrese segundo número','');
valor3=prompt('Ingrese tercer número','');
valor4=prompt('Ingrese cuarto número','');
var suma=parseInt(valor1)+parseInt(valor2);
var producto=parseInt(valor3)*parseInt(valor4);
document.write('La suma es ');
document.write(suma);
document.write('El producto es ');
document.write(producto);
</script>

</body>
</html>

Estrucutura Condicional Simple
Esta estructura, es empleada cuando en el problema aparece una decisión. También, pueden combinarse
estructuras secuenciales y condicionales en un mismo ejercicio.
En esta estructura, podemos elegir, entre verdadero y falso, si ó no. El camino falso, por así llamarlo no contiene
una siguiente actividad allí termina la ejecución. Por el camino del verdadero pueden existir varias operaciones,
entradas y salidas, inclusive ya veremos que puede haber otras estructuras condicionales.
Ejemplo: Realizar la carga de una nota de un alumno. Mostrar un mensaje que aprobó si tiene una nota mayor o
igual a 4.
<html> Aparece la instrucción if en el lenguaje
<head> JavaScript. La condición debe ir entre
</head> paréntesis. Si la condición se verifica
<body> verdadera se ejecuta todas las
<script language="javascript"> instrucciones que se encuentran
var nombre; var nota; nombre=prompt('Ingrese nombre:',''); encerradas entre las llaves de apertura y
nota=prompt('Ingrese su nota:',''); cerrado seguidas al if.
if (nota>=4) { document.write(nombre+' esta aprobado con un '+nota); Para disponer condiciones en un if
} podemos utilizar alguno de los siguientes
</script> operadores relacionales:
</body> > mayor
</html> >= mayor o igual
< menor
<= menor o igual
En la condición del if deben intervenir una variable un operador != distinto
relacional y otra variable o valor fijo. == igual
Otra cosa que hemos incorporado es el operador + para cadenas de
caracteres: document.write(nombre+' esta aprobado con un '+nota);
Con esto hacemos más corto la cantidad de líneas de nuestro
programa.

<html>
<head>
</head>
<body>

var nota1;
var nota2;
var nota3;
var suma;
var promedio;
nota1=prompt('Ingrese Nota 1:','');
suma=parseInt(nota1)+parseInt(nota2)+parseInt(nota3);
promedio=parseInt(suma)/3;
if (promedio>=7)
{
document.write('Esta promocionado');
}
</script>

</body>
</html>

ESTRUCTURA CONDICIONAL COMPUESTA
Al presentarse la elección. Se puede escoger entre una y otra. Una vez, 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: Realizar un programa que lea dos números distintos y muestre el mayor de ellos:

En el lenguaje JavaScript una variable puede ir cambiando el
tipo de dato que almacena a lo largo de la ejecución del
<html> programa. Por ejemplo, la función prompt retorna un string por
<head> lo que debemos convertirlo a entero cuando queremos saber
</head> cual de los dos valores es mayor numéricamente.
<body> Más adelante veremos qué sucede cuando preguntamos cuál
<script language="javascript"> de dos string es mayor.
var num1,num2; num1=prompt('Ingrese el Estamos en presencia de una ESTRUCTURA CONDICIONAL
primer número:',''); COMPUESTA ya que tenemos actividades por la rama del
num2=prompt('Ingrese el segundo verdadero y del falso.
número:',''); La estructura condicional compuesta tiene la siguiente
num1=parseInt(num1); codificación: if (<condición>) { <Instruccion(es)> } else {
num2=parseInt(num2); <Instruccion(es)> } La palabra clave es: “else” y un bloque { }
if (num1>num2) { document.write('el mayor con una o varias instrucciones.
es '+num1); } else { document.write('el Ahora bien, si la condición del if es verdadera se ejecuta el
mayor es '+num2); } bloque que aparece después de la condición, en caso que la
</script> condición resulte falsa se ejecuta la instrucción o bloque de
</body> instrucciones que indicamos después del else.
</html>

<html>
<head>
</head>
<body>

var nota1;
var nota2;
var nota3;
var suma;
var promedio;
suma=parseInt(nota1)+parseInt(nota2)+parseInt(nota3);
promedio=parseInt(suma)/3;
if (promedio>=4)
{
document.write('Regular');
}
else
{
document.write('Reprobado');
}
</script>

ESTRUCTURA CONDICIONAL ANIDADA
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: Confeccionar 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".
<html> Los comentarios en JavaScript los
<head> hacemos disponiendo dos barras previas
</head> al comentario: //Convertimos los 3 string
<body> en enteros Si queremos disponer varias
<script language="javascript"> líneas de comentarios tenemos como
var nota1,nota2,nota3; alternativa: /* linea de comentario 1. linea
nota1=prompt('Ingrese 1ra. nota:',''); de comentario 2. etc. */ Es decir
nota2=prompt('Ingrese 2da. nota:',''); encerramos el bloque con los caracteres
nota3=prompt('Ingrese 3ra. nota:',''); //Convertimos los 3 /* */
string en enteros
nota1=parseInt(nota1);
var pro; pro=(nota1+nota2+nota3)/3;
if (pro>=7) { document.write('promocionado'); } else { if
(pro>=4) { document.write('regular'); } else {
document.write('reprobado'); } }
</script>
</body>
</html>

{
<html>
if (num<0)
<head>
{
</head> document.write('negat
<body> ivo');
}
<script language="javascript"> else
{
document.write('el
var num;
numero es 0');
num=prompt('Ingrese el }
numero:','');
}
num=parseInt(num);
</script>
</body>
if (num>0) </html>
{
document.write('positivo'); </script>
}
else </body>
</html>

El operador &&, se traduce 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. Es necesario recordad, que la condición debe ir entre paréntesis en forma obligatoria.
<html>
<head>
</head>
Puede ser leída así:
<body>
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
var num1,num2,num3;
contenido de la variable num3 entonces la CONDICION
num1=prompt('Ingrese primer
COMPUESTA resulta Verdadera.
número:',''); num2=prompt('Ingrese
Si una de las condiciones simples da falso, la CONDICION
segundo número:','');
COMPUESTA da Falso y continúa por la rama del falso.
num3=prompt('Ingrese tercer
Es decir que se mostrará el contenido de num1 si y sólo si
número:',''); num1=parseInt(num1);
num1>num2 y num1>num3.
num2=parseInt(num2);
En caso de ser Falsa la condición de la rama del falso,
analizamos el contenido de num2 y num3 para ver cual tiene un
if (num1>num2 && num1>num3) {
valor mayor.
document.write('el mayor es el '+num1);
En esta segunda estructura condicional, al haber una condición
} else { if (num2>num3) {
simple, no se requieren operadores lógicos.
document.write('el mayor es el '+num2);
} else { document.write('el mayor es el
'+num3); } }
</script>
</body>
</html>

<html>
<head>
</head>
<body>
<script language="javaScript">
var num1,num2,num3,con1;
num1=prompt(„Digite primer número:','');
num2=prompt(„Digite segundo número:','');
num3=prompt(„Digite tercer número:','');

if (num1=num2 && num2=num3)
{

con1=(num1+num2)*num3;
document.write(con1);
}
</script>
</body>
</html>

Es leído 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: 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.

<html>
<head>
</head>
<body>
<script language="javascript"> var dia,mes,año; dia=prompt('Ingrese día:','');
mes=prompt('Ingrese mes:',''); año=prompt('Ingrese año:',''); dia=parseInt(dia);
mes=parseInt(mes); año=parseInt(año); if (mes==1 || mes==2 || mes==3) {
document.write('corresponde al primer trimestre del año.'); }
</script>
</body>
</html>

La instrucción switch sirve para remplazar los if/else if.
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.
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.
<html> Es necesario, tener en cuenta que la variable que analizamos
<head> debe ir después de la instrucción switch entre paréntesis.
</head> Cada valor que se analiza debe ir luego de la palabra clave
<body> 'case' y seguido a los dos puntos, las instrucciones a
<script language="javascript"> var valor; ejecutar, en caso de verificar dicho valor la variable que
valor=prompt('Ingrese un valor comprendido entre 1 analiza el switch.
y 5:',''); //Convertimos a entero Es importante disponer la palabra clave 'break' al finalizar
valor=parseInt(valor); switch (valor) { case 1: cada caso. La instrucciones que hay después de la palabra
document.write('uno'); break; case 2: clave 'default' se ejecutan en caso que la variable no se
document.write('dos'); break; case 3: verifique en algún case. De todos modos el default es
document.write('tres'); break; case 4: opcional en esta instrucción.
document.write('cuatro'); break; case 5:
document.write('cinco'); break;
default:document.write('debe ingresar un valor Para verificar cadenas, debemos
comprendido entre 1 y 5.'); } encerrarlas entre comillas:
</script> <A href="pagina2.html">Ver segundo
problema</a> case 'rojo': document.bgColor='#ff0000';
</body> break;
</html>

case 2:
<html> document.write("<br>Mesa = Table");
<head> break;
<title>Problema</title> case 3:
</head> document.write("<br>Perro = Dog");
<body> break;

case 4:
<script language="javascript"> document.write("<br>Gato = Cat");
document.write("<br> Menu "); break;
default:document.write('debe ingresar un
document.write("<br>escoja una opcion para valor comprendido entre 1 y 4.');
traducir el contenido:"); }
document.write("<br> 1. Casa 2. Mesa 3. Perro
4. Gato "); </script>
var opcion =prompt("escoja opcion:");
</body>
var opcion = parseInt (opcion) </html>
switch (opcion)
{
case 1:
document.write("<br> Casa = Home");
break;

Se caracteriza por:
- La o las sentencias que se repiten.
- El test o prueba de condición antes de cada repetición, que motivará que se repitan o no las sentencias.

While, funciona de la siguiente manera: Primero,
se verifica la condición, si la misma resulta <html>
verdadera se ejecutan las operaciones que <head>
indicamos entre las llaves que le siguen al while. </head>
En caso que la condición sea Falsa continua con <body>
la instrucción siguiente al bloque de llaves. <script language="javascript"> var x;
El bloque se repite MIENTRAS la condición sea x=1; while (x<=100) {
Verdadera. document.write(x);
document.write('<br>'); x=x+1; }
Importante: Si la condición siempre retorna </script>
verdadero estamos en presencia de un ciclo </body>
repetitivo infinito. Dicha situación es un error de </html>
programación, nunca finalizará el programa.

Para que se impriman los
números, uno en cada línea,
agregamos la marca HTML de
<br>.

<html>
<head>
</head>
<body>


var num;
num=0;
while (num<=500)
{
document.write(num);
num=num+11;
}

</script>

</body>
</html>

Es un tipo especial de variable que se incrementa o decrementa con valores
variables durante la ejecución del programa.
Hemos dado el nombre de suma a nuestro acumulador. Cada ciclo que se repita
la estructura repetitiva, la variable suma se incrementa con el contenido
ingresado en la variable valor.

<html>
<head>
</head>
<body>
var x=1; var suma=0; var valor;
while (x<=5) {
valor=prompt('Ingrese valor:','');
valor=parseInt(valor);
suma=suma+valor; x=x+1; }
document.write("La suma de los
valores es "+suma+"<br>");
</script>
</body>
</html>

<html>
<head>
</head>
<body>
var cont=1;
var suma=0;
var altura;
while (cont<=5)
{
altura=prompt('Ingrese su altura:','');
altura=parseInt(altura);
suma=suma+altura;
cont=cont+1;
}
promedio=suma/2;
document.write("El promedio de las alturas es de: "+promedio+"<br>");
</script>
</body>
</html>

Esta estructura, ejecuta al menos una vez su bloque repetitivo. Esta estructura repetitiva se utiliza cuando
conocemos de antemano que por lo menos una vez se ejecutará el bloque repetitivo. La condición de la
estructura está abajo del bloque a repetir, a diferencia del while que está en la parte superior.
Finaliza la ejecución del bloque repetitivo cuando la condición retorna falso, es decir igual que el while.

“Escribir un programa que solicite la carga de un número entre 0 y 999, y nos muestre un mensaje de cuántos
dígitos tiene el mismo. Finalizar el programa cuando se cargue el valor 0.”

<html>
<head>
</head>
<body>
<script language="javascript"> var valor; do
{ valor=prompt('Ingrese un valor entre 0 y
999:',''); valor=parseInt(valor);
document.write('El valor '+valor+' tiene ');
if (valor<10) { document.write('Tiene 1
digitos'); } else { if (valor<100) {
document.write('Tiene 2 digitos'); } else {
document.write('Tiene 3 digitos'); } }
document.write('<br>'); } while(valor!=0);
</script>
</body>
</html>

<html>
<head>
</head>
else
<body> {
<script language="javascript"> if (valor>0)
{
var valor; document.write(total + " es mayor
var suma=0; que cero") ;
}
do {
else
valor=prompt('Ingrese un valor___ 9999 para terminar:',''); {
valor=parseInt(valor); if (valor<0)
{
suma=suma+valor;
document.write('<br>'); document.write("Valor igual
} while(valor != 9999); a cero") ;
}
total=suma-9999; }
if(total==0) }
{
document.write( total + " es igual a cero"); </script>
} </body>
</html>

Esta estructura repetitiva es mas sencilla para algunas situaciones que la estructura while. Hace falta aclarar, que
la ejecución de la sentencia break dentro de cualquier parte del bucle provoca la salida inmediata del mismo.
En resumen, for (<Inicialización> ; <Condición> ; <Incremento o Decremento>) { <Instrucciones> }

Funciona de la siguiente forma:
Mostrar por pantalla los números del 1 al 10.
* Para iniciar, se ejecuta por única vez el primer
<html>
argumento . Por lo general se inicializa una
<head>
variable.
</head>
* El segundo paso es evaluar la (Condición), en
<body>
caso de ser verdadera se ejecuta el bloque, en
<script language="javascript"> var f;
caso contrario continúa el programa.
for(f=1;f<=10;f++) { document.write(f+"
* El tercer paso es la ejecución de las
"); } </script>
instrucciones.
</body>
* El cuarto paso es ejecutar el tercer argumento
</html>
(Incremento o Decremento).
* Luego se repiten sucesivamente del Segundo al
Cuarto Paso. Para tener en cuenta: No lleva punto y coma al
final de los tres argumentos del for. El disponer
un punto y coma provoca un error lógico y no
Es utilizada, cuando sabemos la cantidad de
sintáctico, por lo que el navegador no avisará.
veces que deseamos que se repita el bloque.

Introducción a la programación con JavaScript

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (18)

En vedette

En vedette (20)

Similaire à Introducción a la programación con JavaScript

Similaire à Introducción a la programación con JavaScript (20)

Dernier

Dernier (20)

Introducción a la programación con JavaScript