Sesion2 - Desarrollo de Aplicaciones Web - USP

Desarrollo de aplicaciones
Web
Ing. Raúl Huarote Zegarra
Sesión 2
Java Script
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.
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.
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)
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>
• hola mundo<br>
• <script type="text/javascript">
• document.write("hola mundo <br>");
• </script>
• </content>
• hola mundo<br>
• </body>
• </html>
Primera página web
• <!DOCTYPE HTML>
• <html>
• <head>
• </head>
• <body>
• <content>
• hola mundo<br>
• alert("hola mundo <br>");
• </script>
• </script>
• </content>
• hola mundo<br>
• </body>
• </html>
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’
Archivos externos
• <!DOCTYPE HTML>
• <html>
• <head>
• </head>
• <body>
• <content>
• hola mundo<br>
• alert("hola mundo <br>");
• </script>
• </script>
• <script type="text/javascript" src="mimensaje.js"></script>
• </content>
• </body>
• </html>
Variable
• <!DOCTYPE HTML>
• <html>
• <head>
• </head>
• <body>
• <content>
• // 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>
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.
Operadores condicionales
Operadores condicionales
• <!DOCTYPE HTML>
• <html>
• <head>
• </head>
• <body>
• <content>
• 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>
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.
Operadores logicos
• <!DOCTYPE HTML>
• <html>
• <head>
• </head>
• <body>
• <content>
• 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>
Ejercicio usando Operadores
logicos
Realizar los ejercicios de operadores condicionales usando operadores
logicos.
Bucle While
• <!DOCTYPE HTML>
• <html>
• <head>
• </head>
• <body>
• <content>
• var i=0
• while (i<10){
• document.write("valor "+i + "<br>");
• i++;
• }
• </script>
• </content>
• </body>
• </html>
For
• <!DOCTYPE HTML>
• <html>
• <head>
• </head>
• <body>
• <content>
•
• 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>
Funciones
• <!DOCTYPE HTML>
• <html>
• <head>
• </head>
• <body>
• <content>
• 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>
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.

Sesion2 - Desarrollo de Aplicaciones Web - USP

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Sesion2 - Desarrollo de Aplicaciones Web - USP

Cargado por

Copyright:

Formatos disponibles

Desarrollo de aplicaciones

• Usos para HTML Dinámico(1990) , Modificar la pagina tal como el

• Ajax nace en el (2004) hace peticiones al servidor sin necesidad de

1. Crear las variables radio y altura y que se pueda calcular el área y el

También podría gustarte