Java Script 
Desarrollo de aplicaciones Web 
Ing. Raúl Huarote Zegarra 
Sesión 2
Introducción e historia 
•Introduccion 
•Es un lenguaje de programación en el cual permite hacer algoritmos, desarrollo e ...
Introducción 
Usos de JavaScript 
•Usos para HTML Dinámico(1990) , Modificar la pagina tal como el CSS pudiéndose cambiar ...
Compatibilidad 
•Es compatible con todos los navegadores (considerar a partir del año 2000 en adelante). 
•Se puede consid...
Entornos de desarrollo 
•No tiene entorno de desarrollo especifico. 
•Se puede realizar desde cualquier editor de texto
Primera página web 
•<!DOCTYPE HTML> 
•<html> 
• <head> 
• <title>Mi Pagina</title> 
• </head> 
• <body> 
• <content> 
• h...
Primera página web 
•<!DOCTYPE HTML> 
•<html> 
• <head> 
• <title>Mi Pagina</title> 
• </head> 
• <body> 
• <content> 
• h...
Archivos externos 
•Durante todo el proceso de desarrollo del aplicativo web es recomendable separar la parte de manejo de...
Archivos externos 
•<!DOCTYPE HTML> 
•<html> 
• <head> 
• <title>Mi Pagina</title> 
• </head> 
• <body> 
• <content> 
• ho...
Variable 
•<!DOCTYPE HTML> 
•<html> 
• <head> 
• <title>Mi Pagina</title> 
• </head> 
• <body> 
• <content> 
• <script typ...
Ejercicio usando Variable 
Realizar ejercicios de operaciones matemáticas, 
1. Crear las variables radio y altura y que se...
Operadores condicionales
Operadores condicionales 
•<!DOCTYPE HTML> 
•<html> 
• <head> 
• <title>Mi Pagina</title> 
• </head> 
• <body> 
• <content...
Ejercicio usando Operadores Condicionales 
Realizar ejercicios de operaciones condicionales 
•Ingrese 3 números e indique ...
Operadores logicos 
•<!DOCTYPE HTML> 
•<html> 
• <head> 
• <title>Mi Pagina</title> 
• </head> 
• <body> 
• <content> 
• <...
Ejercicio usando Operadores logicos 
Realizar los ejercicios de operadores condicionales usando operadores logicos.
Bucle While 
•<!DOCTYPE HTML> 
•<html> 
• <head> 
• <title>Mi Pagina</title> 
• </head> 
• <body> 
• <content> 
• <script ...
For 
•<!DOCTYPE HTML> 
•<html> 
• <head> 
• <title>Mi Pagina</title> 
• </head> 
• <body> 
• <content> 
• <script type="te...
Funciones 
•<!DOCTYPE HTML> 
•<html> 
• <head> 
• <title>Mi Pagina</title> 
• </head> 
• <body> 
• <content> 
• <script ty...
Ejercicios 
•Crear operaciones matemáticas usando funciones 
•Usando el numero del día (1,2…7) colocar el respectivo día (...
Próxima SlideShare
Cargando en…5
×

Sesion2 desarrollo de aplicaciones web usp

223 visualizaciones

Publicado el

Desarrollo web

Publicado en: Diseño
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
223
En SlideShare
0
De insertados
0
Número de insertados
2
Acciones
Compartido
0
Descargas
1
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Sesion2 desarrollo de aplicaciones web usp

  1. 1. Java Script Desarrollo de aplicaciones Web Ing. Raúl Huarote Zegarra Sesión 2
  2. 2. Introducción e historia •Introduccion •Es un lenguaje de programación en el cual permite hacer algoritmos, desarrollo e interactividad con una pagina web. •Tiene su propia sintaxis •Tiene una lógica. •No se compila, hay un interprete que lo hace el mismo navegador •No poseen tipo de datos explícitos. •Acompaña al HTML y CSS •JavaScript no es Java •Historia •Java Script nace con la empresa NetScape •La primera versión de JavaScript 1,0 creado para Netscape 2,0 marzo de 1996 inicialmente llamada LiveScript, •Pos problemas de marca cambio a JavaScript.
  3. 3. Introducción Usos de JavaScript •Usos para HTML Dinámico(1990) , Modificar la pagina tal como el CSS pudiéndose cambiar sin necesidad de recargar la pagina. •Ajax nace en el (2004) hace peticiones al servidor sin necesidad de que el usuario lo vea.
  4. 4. Compatibilidad •Es compatible con todos los navegadores (considerar a partir del año 2000 en adelante). •Se puede considerar también para navegadores para móviles (considerar a partir del año 2007 en adelante)
  5. 5. Entornos de desarrollo •No tiene entorno de desarrollo especifico. •Se puede realizar desde cualquier editor de texto
  6. 6. Primera página web •<!DOCTYPE HTML> •<html> • <head> • <title>Mi Pagina</title> • </head> • <body> • <content> • hola mundo<br> • <script type="text/javascript"> • document.write("hola mundo <br>"); • </script> • </content> • hola mundo<br> • </body> •</html>
  7. 7. Primera página web •<!DOCTYPE HTML> •<html> • <head> • <title>Mi Pagina</title> • </head> • <body> • <content> • hola mundo<br> • <script type="text/javascript"> • alert("hola mundo <br>"); • </script> • <script type="text/javascript"> • document.write("hola mundo <br>"); • </script> • </content> • hola mundo<br> • </body> •</html>
  8. 8. Archivos externos •Durante todo el proceso de desarrollo del aplicativo web es recomendable separar la parte de manejo del documento en JavaScript en archivos separados. Inclusive en una carpeta diferente llamada ‘js’
  9. 9. Archivos externos •<!DOCTYPE HTML> •<html> • <head> • <title>Mi Pagina</title> • </head> • <body> • <content> • hola mundo<br> • <script type="text/javascript"> • alert("hola mundo <br>"); • </script> • <script type="text/javascript"> • document.write("hola mundo <br>"); • </script> • <script type="text/javascript" src="mimensaje.js"></script> • </content> • </body> •</html>
  10. 10. Variable •<!DOCTYPE HTML> •<html> • <head> • <title>Mi Pagina</title> • </head> • <body> • <content> • <script type="text/javascript"> • // variable • var color; • // asignacion • color = "amarillo"; • // declaracion y asignacion • var precio = 50; • var prenda = "camisa"; • document.write("La " + prenda + " de color " + color + " cuesta "+ precio) • </script> • </content> • </body> •</html>
  11. 11. Ejercicio usando Variable Realizar ejercicios de operaciones matemáticas, 1. Crear las variables radio y altura y que se pueda calcular el área y el volumen del cilindro. 2. Crear las variables de dos números y se calcule su suma, resta, multiplicación, división. 3. Crear las variables nota1 y nota2 y permita calcular el promedio 4. Crear las variables nombre, precioHora y horasTrabajadas y se calcule salario Bruto, impuestos( 10% del Salario Bruto) y salario Neto (Salario Bruto – Impuestos) 5. Crear las variables velocidad Inicial, aceleración y tiempo y se pueda calcular el espacio recorrido por el móvil.
  12. 12. Operadores condicionales
  13. 13. Operadores condicionales •<!DOCTYPE HTML> •<html> • <head> • <title>Mi Pagina</title> • </head> • <body> • <content> • <script type="text/javascript"> • var cantidadStock=prompt("Ingrese la cantidad de productos"); • if (cantidadStock<=5){ • alert("Debe conseguir mas stock de productos"); • cantidadStock = parseInt(cantidadStock) + 10; • }else{ • alert("Estas bien con el stock"); • } • document.write("El estock actual es: " + cantidadStock) • </script> • </content> • </body> •</html>
  14. 14. Ejercicio usando Operadores Condicionales Realizar ejercicios de operaciones condicionales •Ingrese 3 números e indique cual de ellos es el mayor , menor y intermedio. •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. •Ingresar un valor en el rango de 0 a 360 y mostrar en que cuadrante se encuentra. •De un operario se conoce su sueldo y los años de antigüedad. Se pide confeccionar un programa que lea los datos de entrada e informe: a) Si el sueldo es inferior a 500 y su antigüedad es igual o superior a 10 años, otorgarle un aumento del 20 %, mostrar el sueldo a pagar. b)Si el sueldo es inferior a 500 pero su antigüedad es menor a 10 años, otorgarle un aumento de 5 %. c) Si el sueldo es mayor o igual a 500 mostrar el sueldo en pantalla sin cambios.
  15. 15. Operadores logicos •<!DOCTYPE HTML> •<html> • <head> • <title>Mi Pagina</title> • </head> • <body> • <content> • <script type="text/javascript"> • var edad=prompt("Dime tu edad"); • var esMayor = (edad>=18); // operador logico • if (esMayor){ • document.write("Puede ver la pelicula de terror"); • }else{ • document.write("Aun no puede ver la pelicula de terror"); • } • </script> • </content> • </body> •</html>
  16. 16. Ejercicio usando Operadores logicos Realizar los ejercicios de operadores condicionales usando operadores logicos.
  17. 17. Bucle While •<!DOCTYPE HTML> •<html> • <head> • <title>Mi Pagina</title> • </head> • <body> • <content> • <script type="text/javascript"> • var i=0 • while (i<10){ • document.write("valor "+i + "<br>"); • i++; • } • </script> • </content> • </body> •</html>
  18. 18. For •<!DOCTYPE HTML> •<html> • <head> • <title>Mi Pagina</title> • </head> • <body> • <content> • <script type="text/javascript"> • • document.write("<table border="1">"); • for (var i=0;i<5;i++){ • document.write("<tr>"); • for (var j=0;j<5;j++){ • document.write("<td>"); • document.write(" valor " + i + " " + j); • document.write("</td>"); • } • document.write("</tr>"); • } • document.write("</table>"); • </script> • </content> • </body> •</html>
  19. 19. Funciones •<!DOCTYPE HTML> •<html> • <head> • <title>Mi Pagina</title> • </head> • <body> • <content> • <script type="text/javascript"> • function suma(a,b){ • return a+b; • } • var a = 10; var b = 20; document.write(“la suma es ”+ suma(a,b)); • </script> • </content> • </body> •</html>
  20. 20. Ejercicios •Crear operaciones matemáticas usando funciones •Usando el numero del día (1,2…7) colocar el respectivo día (lunes,martes…. domingo) usando funciones.

×