Sesion2 desarrollo de aplicaciones web usp

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 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
•<!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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (7)

Destacado

Destacado (20)

Similar a Sesion2 desarrollo de aplicaciones web usp

Similar a Sesion2 desarrollo de aplicaciones web usp (20)

Último

Último (20)

Sesion2 desarrollo de aplicaciones web usp