Scribd
Cargar
98 vistas

JavaScript JLHV

Este documento presenta una introducción al lenguaje de programación JavaScript. Explica conceptos básicos como algoritmos, programas y lenguajes de programación. Luego introduce JavaScript y muestra un código básico de ejemplo. Prosigue explicando temas como variables, entrada de datos, estructuras secuenciales, condicionales y repetitivas, e incluye ejemplos de código para cada tema.

Cargado por

CRISTOFER SERGIO CANALES VARGAS
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
98 vistas

JavaScript JLHV

Este documento presenta una introducción al lenguaje de programación JavaScript. Explica conceptos básicos como algoritmos, programas y lenguajes de programación. Luego introduce JavaScript y muestra un código básico de ejemplo. Prosigue explicando temas como variables, entrada de datos, estructuras secuenciales, condicionales y repetitivas, e incluye ejemplos de código para cada tema.

Cargado por

CRISTOFER SERGIO CANALES VARGAS
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 34

Universidad Nacional de Ingeniería

Facultad de Ingeniería Ambiental (FIA)

Programación en JAVA SCRIPT

Mg. Jorge Luis Huamán Vera


TEMAS
1. Conceptos de Algoritmo, Programa y Lenguaje de
2. Programación.
Que es Java Script?Ejercicio.
3. Variables Ejercicio.
4. Entrada de datos por teclado.
5.
6.
Ejercicio.
7.
Estructuras Secuenciales de
Programación.
8.
9.

Ejercicio.
Estructuras condicionales simples.
Ejercicio. Estructuras condicionales compuestas.
Ejercicio.
11. Estructuras switch. Ejercicio.
12. Estructura repetitiva (while) Ejercicio.
13. Concepto de acumulador. Ejercicio.
14. Estructura repetitiva (do/while)
Ejercicio.
15. Estructura repetitiva (for) Ejercicio.
CONCEPTOS DE ALGORITMO,
PROGRAMA Y LENGUAJE
PROGRAMACIÓN.
DE
 Algoritmo: Son los pasos a seguir para resolver
un problema.
 Programa: Es el Conjunto de instrucciones que
se realiza para que un ordenador realice una
serie de acciones.
 Lenguaje de programación: Son instrucciones
escritas de tal modo que el ordenador las
interprete. Algunos lenguajes conocidos son,
dev c, c++, java script, visual basic…
Qué es JavaScript?

 JavaScript es un lenguaje interpretado


que se embebe en una página web HTML
lo que significa que las instrucciones las
analiza y procesa el navegador en el
momento que deben ser ejecutadas.
 No se puede desarrollar un programa con
JavaScript que se ejecute fuera de un
Navegador.
Código Básico
 <html> //inicio programa//
 <head> //cabeza//
 <title> //colocar titulo de pagina//
 </title> //fin titulo//
 </head> //fin cabeza//
 <body> // inicio cuerpo de pagina//
 <script language="javascript"> // inicio programación//
 document.write('Hola Mundo'); //mensaje de salida//
 </script>//fin código programación//
 </body> //fin cuerpo de pagina//
 </html> //fin programa//
EJERCICIO: Realizar un programa que
muestre su nombre y su edad en una
página HTML.

 <script language="javascript">

 document.write("Nombre: Jorge Luis Gómez


Rivera <br> Edad: 21");

 </script>
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.), fijos o variables.
 Fija.- Cuando el tamaño de la misma no
variará a lo largo de la ejecución del
programa.
 Variable.- Cuando el tamaño de la misma
puede variar a lo largo de la ejecución.
Tipos de variable:

 Ejemplos de algunas variables:

1. Valores Enteros (100, 260, etc.)


2. Valores Reales (1.24, 2.90, 5.00, etc.)
3. Cadenas de caracteres ("Juan",
"Compras", "Listado", etc.)
4. Valores lógicos (true, false)
Ejercicio: programa que permita
cargar el nombre y el saldo.
 <script language="javascript">

 var nombre;
 var saldo;
 nombre=prompt('Ingrese su nombre:','');
 saldo=prompt('Ingrese su saldo”,'');
 document.write("Nombre:" + nombre);
 document.write("<br> Saldo:" + saldo);

 </script>
Entrada de datos por teclado.

 La sintaxis de la función prompt es:


<variable> = prompt (<mensaje a mostrar en la
ventana>,<valor inicial a mostrar en la ventana>);

 nombre = prompt('Ingrese su nombre:',‘ ');


edad = prompt('Ingrese su edad:',‘ ');

 La función prompt tiene dos parámetros: uno es el


mensaje y el otro el valor inicial a mostrar.
Ejercicio: programa que permita
cargar el nombre y su e-mail.
 <script language="javascript">

 var nombre;
 Var email;
 nombre=prompt('Ingrese su nombre:','');
 email=prompt('Ingrese su e-mail”,'');
 document.write("Nombre:" + nombre);
 document.write("<br> e-mail:" + email);

 </script>
Estructuras Secuenciales de
Programación.

 Se denomina estructura secuencial a un


problema donde solo participan procesos
de entrada y salida, no hay opciones ni
decisiones.
EJERCICIO: 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.
 <script language="javascript">
 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('<br>');
 document.write('El producto es ');
 document.write(producto);
 </script>
Estructuras condicionales
simples.
 Esta estructura es utilizada cuando se necesite tomar
una decisión.
Ejemplo: Para ir al trabajo, ¿elijo el camino A o el
camino B ?.
 Aparece la instrucción “if” en el lenguaje JavaScript, la
condición debe ir en paréntesis y debe utilizar
operadores relacionales (>=, ==. !=…)
If (n<9) {…… }
Ejercicio: Se ingresan tres notas de un alumno, si
el promedio es mayor o igual a siete mostrar el
mensaje 'Promocionado'.
 <script language="javascript">
 var nota1, var nota2, var nota3, var suma, var promedio;
 nota1=prompt('Ingrese Nota 1:','');
 nota2=prompt('Ingrese Nota 2:','');
 nota3=prompt('Ingrese Nota 3:','');
 suma=parseInt(nota1)+parseInt(nota2)+parseInt(nota3);
 promedio=parseInt(suma)/3;
 if (promedio>=7) {
document.write('Esta promocionado'); }
 </script>
Estructuras condicionales
compuestas.
 Esta estructura nos permite elegir una
opción, puede tomar cualquier camino, o
falso o verdadero pero hay que tomar en
cuenta que solo realiza las actividades de
la sección verdadero o las del falso
NUNCA se realizan las actividades de las
dos ramas.
Ejercicio: Se ingresan tres notas de un alumno, si
el promedio es mayor o igual a 4 mostrar un
mensaje 'regular', sino 'reprobado'.
 <script language="javascript">
 var nota1, var nota2, var nota3, var suma, var promedio;
nota1=prompt('Ingrese Nota 1:','');
nota2=prompt('Ingrese Nota 2:','');
nota3=prompt('Ingrese Nota 3:','');
 suma=parseInt(nota1)+parseInt(nota2)+parseInt(nota3)
;
 promedio=parseInt(suma)/3;
 if (promedio>=4) { document.write('Regular'); }
 else { document.write('Reprobado'); }
 </script>
Estructuras condicionales
anidadas.
 La estructura condicional anidada es
utilizada cuando dentro de una condición
existe otra.
Ejemplo: Es hombre o mujer?, si es mujer
cuantos hijos tiene?, si es hombre,
cuanto años tiene?.
Ejercicio: Se ingresa por teclado un valor entero,
mostrar una leyenda que indique si el número es
positivo, cero o negativo.

 <script language="javascript">
 var num;
 num=prompt('Ingrese el numero:','');
num=parseInt(num);
 if (num>0)
{ document.write('positivo'); }
 else { if (num<0) { document.write('negativo'); }
else { document.write('el numero es 0'); } }
 </script>
Operadores lógicos && (y) en
las estructuras
condicionales.
 Este operador es utilizado para colocar mas de
una condición dentro de una estructura
condicional.
 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.
Ejercicio: Se ingresan tres valores por teclado, si todos
son iguales se imprime la suma del primero con el segundo
y a este resultado se lo multiplica por el tercero
 <script language="javaScript">
 var num1,num2,num3,con1;
 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);
 if (num1==num2 && num2==num3) {
con1=(num1+num2)*num3;
document.write(con1); }
Operadores lógicos || (o) en
las estructuras condicionales.

 Este operador permite que en una


estructura condicional que contenga mas
de dos condiciones, con que una de las
dos condiciones sea Verdadera alcanza
para que el resultado de la condición
compuesta sea Verdadero.
Ejercicio: Se ingresan por teclado tres números, si todos
los valores ingresados son menores a 10, imprimir en la
página la leyenda 'Todos los números son menores a diez'.
 <script language="javascript">
 var num1,num2,num3;
 num1=prompt('Ingrese primer numero:','');
 num2=prompt('Ingrese segundo numero:','');
 num3=prompt('Ingrese tercer numero:','');
 num1=parseInt(num1);
 num2=parseInt(num2);
 num3=parseInt(num3);
 if (num1<10 || num2<10 || num3<10){
 document.write('todos los números son menores que
10.');}
 </script>
ESTRUCTURAS SWITCH.
 La instrucción switch es una alternativa para remplazar
los if y los else if.
 switch nos brinda una forma mas ordenanda a la hora
de programar
 Divide las condiciones en casos.
 Sintaxis:
Switch(opcion que elija)
Case (opcion que elija) : codigo…;
Break; //rompe el caso, se sale del switch.
Default: (mensaje para verificar opcion).
Ejercicio: Solicitar el ingreso alguna de estas palabras
(casa, mesa, perro, gato) luego mostrar la palabra
traducida en inglés.
 <script language="javascript">
 document.write("<br> Menu ");
 document.write("<br>escoja una opcion para traducir el contenido:");
 document.write("<br> 1. Casa 2. Mesa 3. Perro 4. Gato ");
 var opcion =prompt("escoja opcion:");
 var opcion = parseInt (opcion);
 switch (opcion){
 case 1: document.write("<br> Casa = Home");break;
 case 2: document.write("<br>Mesa = Table");break;
 case 3: document.write("<br>Perro = Dog");break;
 case 4: document.write("<br>Gato = Cat");break;
 default:document.write('debe ingresar un valor comprendido entre 1 y 4.');}
 </script>
ESTRUCTURA REPETITIVA
(WHILE)
 Una estructura repetitiva permite
ejecutar una instrucción o un conjunto de
instrucciones varias veces
 La estructura repetitiva while realiza sus
acciones que están entre llaves mientras
la opción de validez sea verdadera.
 Este ciclo repetitivo podría ser infinito si el
resultado de la validez siempre es
verdadero.
Ejercicio: Realizar un programa que imprima 25
términos de la serie 11 - 22 - 33 - 44, etc. (No se
ingresan valores por teclado).

 <script language="javascript">
 var num;
 num=11;
 while (num<=275){
 document.write(num);
 document.write('<br>');
 num=num+11;}
 </script>
CONCEPTO DE ACUMULADOR.
 Un acumulador es una variable, definida
por el programador que es utilizada
para sumar.
 su sintaxis es:

Acumulador = acumulador + valor


valor es una variable en ejecución.
Ejercicio: Se ingresan un conjunto de 5 alturas de
personas por teclado. Mostrar la altura promedio
de las personas.
 <script language="javascript">
 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>
ESTRUCTURA REPETITIVA
(DO/WHILE)
 do/while (haga mientras) ejecuta al menos una vez su
bloque repetitivo, Esta estructura repetitiva es utilizada
cuando sabemos que la sentencia se ejecutara al menos
una vez.

 Sintaxis:
do{ bloque de código}
while (condición);
Ejercicio: Realizar un programa que acumule valores ingresados por
teclado hasta ingresa el 9999 (no sumar dicho valor, solamente indica
que ha finalizado la carga). Imprimir el valor acumulado e informar si
dicho valor es cero, mayor a cero o menor a cero.

 <script language="javascript">
 var valor;
 var suma=0;
 do {
 valor=prompt('Ingrese un valor 9999 para
terminar:','');
 valor=parseInt(valor);
 suma=suma+valor;
 document.write('<br>');
 } while(valor != 9999);
 total=suma-9999;
 if(total==0){document.write( total + " es igual+a" cero");}
if (valor>0) { document.write(total es mayor que cero") ; }
 else { if (valor<0) { document.write("Valor igual a cero") ;} } }
 else {
 </script>
ESTRUCTURA REPETITIVA
(FOR)
 Esta estructura se usa cuando conocemos la cantidad
de veces que queremos que se ejecute la sentencia.

Ejemplo: ingresar 5 nombres, 10 notas…

 Sintaxis:
for (<Inicio> ; <hasta> ; <Incremento o Decremento>)
{
<Instrucciones>
}
Ejercicio: Desarrollar un programa que
muestre la tabla de multiplicar del 5 (del 5 al
50).
 <script language="javascript">
 var c;
 for(c=1;c<=10;c++)
 {
 tabla=c*5;
 document.write("5 * "+ c + " = " + tabla + "<br>");
 }
 </script>

También podría gustarte