Mg. Christian Retamal P.1 PROGRAMACIÓN LADO CLIENTE Christian Retamal Peña Magíster © en Ingeniería Industrial y Sistemas.

Presentación del tema: "Mg. Christian Retamal P.1 PROGRAMACIÓN LADO CLIENTE Christian Retamal Peña Magíster © en Ingeniería Industrial y Sistemas."— Transcripción de la presentación:

1 Mg. Christian Retamal P.1 PROGRAMACIÓN LADO CLIENTE Christian Retamal Peña Magíster © en Ingeniería Industrial y Sistemas

2 Mg. Christian Retamal P.2 Contenidos  Programación Asincrónica con Java Scripts

3 Mg. Christian Retamal P.3 JAVA SCRIPTS JavaScript, al igual que Flash, Visual Basic Script, 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++, Delphi, etc. Es un lenguaje script orientado a documentos, como pueden ser los lenguajes de macros que tienen muchos procesadores de texto y planillas de cálculo. 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

4 Mg. Christian Retamal P.4 JAVA SCRIPTS Ejemplo : document.write(‘mi primer ejemplo’);

5 Mg. Christian Retamal P.5 JAVA SCRIPTS Ejercicio : escribir un programa que muestre su nombre y asignatura preferida (saltar una línea al imprimir lo solicitado) Ejercicio document.write("Christian"); document.write(" "); document.write("Optimización");

6 Mg. Christian Retamal P.6 JAVA SCRIPTS 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.00, etc.) Cadenas de caracteres ("Juan", "Compras", "Listado", etc.) Valores lógicos (true,false) Existen otros tipos de variables que veremos más adelante.

7 Mg. Christian Retamal P.7 JAVA SCRIPTS Ejemplo: var nombre="Juan"; var edad=10; document.write(nombre); document.write(" "); document.write(edad);

8 Mg. Christian Retamal P.8 JAVA SCRIPTS Ejercicio : Confeccionar una programa en JavaScript que defina e inicialice una variable real donde almacenar el sueldo de un trabajador y otra de tipo cadena de caracteres donde almacenaremos el nombre. Imprimir cada variable en una línea distinta en pantalla.

9 Mg. Christian Retamal P.9 JAVA SCRIPTS Entrada por Teclado: Para la entrada de datos por teclado tenemos la función prompt. Cada vez que necesitamos ingresar un dato con esta función, aparece una ventana donde cargamos el valor. var nombre; var edad; nombre=prompt('Ingrese su nombre:‘); edad=prompt('Ingrese su edad:’); document.write('Hola '); document.write(nombre); document.write(' asi que tienes '); document.write(edad); document.write(' años');

10 Mg. Christian Retamal P.10 JAVA SCRIPTS Ejercicio : Confeccionar un programa que permita cargar el nombre de un usuario y su mail por teclado. Mostrar posteriormente los datos en la página HTML.

11 Mg. Christian Retamal P.11 JAVA SCRIPTS Estructuras secuenciales: ejemplo 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 '); document.write(suma); document.write(' '); document.write('El producto es '); document.write(producto);

12 Mg. Christian Retamal P.12 JAVA SCRIPTS Ejercicios: Desarrollar un programa que pida el ingreso del precio de un artículo y la cantidad que lleva el cliente. Mostrar el valor de la venta

13 Mg. Christian Retamal P.13 JAVA SCRIPTS Estructuras Condicionales simples: var nombre; var nota; nombre=prompt('Ingrese nombre:',''); nota=prompt('Ingrese su nota:',''); if (nota>=4) { document.write(nombre+' esta aprobado con un '+nota); } Operadores lógicos > Mayor >= mayor o igual < menor <= menor o igual != distinto == igual

14 Mg. Christian Retamal P.14 JAVA SCRIPTS Estructuras Condicionales Compuestas: var num1,num2; num1=prompt('Ingrese el primer número:',''); num2=prompt('Ingrese el segundo número:',''); num1=parseInt(num1); num2=parseInt(num2); if (num1>num2) { document.write('el mayor es '+num1); } else { document.write('el mayor es '+num2); } Operadores lógicos > Mayor >= mayor o igual < menor <= menor o igual != distinto == igual && and || or

15 Mg. Christian Retamal P.15 JAVA SCRIPTS Estructuras Condicionales Anidadas: var nota1,nota2,nota3; nota1=prompt('Ingrese 1ra. nota:',''); nota2=prompt('Ingrese 2da. nota:',''); nota3=prompt('Ingrese 3ra. nota:',''); //Convertimos los 3 string en enteros nota1=parseInt(nota1); nota2=parseInt(nota2); nota3=parseInt(nota3); var pro; pro=(nota1+nota2+nota3)/3; if (pro>=7) { document.write(‘excelente'); } else { if (pro>=4) { document.write('regular'); } else { document.write('reprobado'); }

16 Mg. Christian Retamal P.16 JAVA SCRIPTS Ejercicios 1.Se pide ingresar 3 notas y calcular el promedio final, imprimir el promedio y un mensaje que indique la situación “Aprobado” o “Reprobado”. 2.Ingrese 2 veces una clave, compárelas e imprima un mensaje si son “Distintas” o “Iguales”. 3.Realizar un programa que lea por teclado dos números, si el primero es mayor al segundo informar su suma y diferencia, en caso contrario informar el producto y la división del primero respecto al segundo. 4.Ingresar 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 5.Se cargan por teclado tres números distintos. Mostrar por pantalla el mayor de ellos 6.Se ingresa por teclado un valor entero, mostrar un mensaje que indique si el número es positivo, cero o negativo. 7.Confeccionar un programa que permita cargar un número entero positivo de hasta tres cifras y muestre un mensaje indicando si tiene 1, 2, ó 3 cifras. Mostrar un mensaje de error si el número de cifras no es 1, 2 ó 3.

17 Mg. Christian Retamal P.17 JAVA SCRIPTS Ejercicios 8.De un postulante a un empleo, que realizó un test de capacitación, se obtuvo la siguiente información: nombre del postulante, cantidad total de preguntas que se le realizaron y cantidad de preguntas que contestó correctamente. Se pide confeccionar un programa que lea los datos del postulante e informe el nivel del mismo según el porcentaje de respuestas correctas que ha obtenido, y sabiendo que: Nivel superior: Porcentaje>=90%. Nivel medio: Porcentaje>=75% y =50% y <75%. Fuera de nivel: Porcentaje<50%.

18 Mg. Christian Retamal P.18 JAVA SCRIPTS Switch var valor; valor=prompt('Ingrese un valor comprendido entre 1 y 5:',''); valor=parseInt(valor); switch (valor) { case 1: document.write('uno'); break; case 2: document.write('dos'); break; case 3: document.write('tres'); break; case 4: document.write('cuatro'); break; case 5: document.write('cinco'); break; default:document.write('debe ingresar un valor comprendido entre 1 y 5.'); }

19 Mg. Christian Retamal P.19 JAVA SCRIPTS While var x; x=1; while (x<=100) { document.write(x); document.write(' '); x=x+1; }

20 Mg. Christian Retamal P.20 JAVA SCRIPTS Do While 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(' '); } while(valor!=0);

21 Mg. Christian Retamal P.21 JAVA SCRIPTS For var i; for(i=1;i<=10;i++) { document.write(i+" "); }

22 Mg. Christian Retamal P.22 JAVA SCRIPTS Funciones function mostrarmensaje() { document.write("hola"); } mostrarmensaje()

23 Mg. Christian Retamal P.23 JAVA SCRIPTS Funciones con Parámetros var numero = 1; var cadena = " Hola "; var logico = true; function valores(num, cad, log) { document.write(num); document.write(cad); document.write(log); } valores(numero, cadena, logico);

24 Mg. Christian Retamal P.24 JAVA SCRIPTS Funciones con Parámetros y retornos var x=5; var y=2; function sumar(a, b) { var c=a+b; return c; } var z = sumar(x,y); document.write(z); document.write(" "); document.write(sumar(x,y));