“AÑO DE LA DIVERSIFICACION PRODUCTIVA Y DEL FORTALECIMIENTO DE LA EDUCACION”

UNIVERSIDAD CIENTIFICA DEL PERÚ

 DESARROLLO DE APLICACIONES WEB 

DOCENTE : Ing. Danny Dan Ordoñez

 
 
ALUMNOS : López Jarama, Erick Joaquín.
Campos Guerra, Charly Hernán.
Carbajal Burga, Dander Jhonnatan
 
TEMA : JavaScript
 
 
CICLO : VII
 
 
FACULTAD : INGENIERIA.
 
 
ESCUELA : SISTEMAS DE INFORMACION.
 
2015
IQUITOS – PERU
 Introducción
 JavaScript es un lenguaje de programación que se utiliza principalmente para crear páginas
web dinámicas. Una página web dinámica es aquella que incorpora efectos como texto que
aparece y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con
mensajes de aviso al usuario.
JavaScript es un lenguaje de programación interpretado, por lo que no es necesario compilar los
programas para ejecutarlos. En otras palabras, los programas escritos con JavaScript se
pueden probar directamente en cualquier navegador sin necesidad de procesos intermedios.
A pesar de su nombre, JavaScript no guarda ninguna relación directa con el lenguaje de
programación Java. Legalmente, JavaScript es una marca registrada de la empresa Sun
Microsystems
JavaScript se diseñó con una sintaxis similar al C, aunque adopta nombres y convenciones del
lenguaje de programación Java. Sin embargo Java y JavaScript no están relacionados y
tienen semánticas y propósitos diferentes. Todos los navegadores modernos interpretan el
código JavaScript integrado en las páginas web. Para interactuar con una página web se
provee al lenguaje JavaScript de una implementación del DocumentObjectModel (DOM).
Tradicionalmente se venía utilizando en páginas web HTML para realizar operaciones y
únicamente en el marco de la aplicación cliente, sin acceso a funciones del servidor.
JavaScript se interpreta en el agente de usuario, al mismo tiempo que las sentencias van
descargándose junto con el código HTML. Una cuarta edición está en desarrollo e incluirá
nuevas características tales como paquetes, espacio de nombres y definición explícita de
clases
 CAPITULO I
JavaScript 
Historia:
A principios de los años 90, la mayoría de usuarios que se conectaban a Internet lo hacían con
módems a una velocidad máxima de 28.8 kbps. En esa época, empezaban a desarrollarse las
primeras aplicaciones web y por tanto, las páginas web comenzaban a incluir formularios
complejos. Con unas aplicaciones web cada vez más complejas y una velocidad de
navegación tan lenta, surgió la necesidad de un lenguaje de programación que se ejecutara en
el navegador del usuario. De esta forma, si el usuario no rellenaba correctamente un
formulario, no se le hacía esperar mucho tiempo hasta que el servidor volviera a mostrar el
formulario indicando los errores existentes. Brendan Eich, un programador que trabajaba en
Netscape, pensó que podría solucionar este problema adaptando otras tecnologías existentes
(como ScriptEase) al navegador Netscape Navigator 2.0, que iba a lanzarse en 1995.
Inicialmente, Eich denominó a su lenguaje LiveScript. Posteriormente, Netscape firmó una
alianza con Sun Microsystems para el desarrollo del nuevo lenguaje de programación. La
primera versión de JavaScript fue un completo éxito y Netscape Navigator 3.0 ya incorporaba la
siguiente versión del lenguaje, la versión 1.1. Al mismo tiempo, Microsoft lanzó JScript con su
navegador Internet Explorer 3. JScript era una copia de JavaScript al que le cambiaron el
nombre para evitar problemas legales. De esta forma, en 1997 se envió la especificación
JavaScript 1.1 al organismo ECMA EuropeanComputerManufacturersAssociation).
 ¿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.
Javascript es un lenguaje con muchas posibilidades, utilizado para crear pequeños
programas que luego son insertados en una página web y en programas más
grandes, orientados a objetos mucho más complejos. Con Javascript podemos
crear diferentes efectos e interactuar con nuestros usuarios.
Este lenguaje posee varias características, entre ellas podemos mencionar que es
un lenguaje basado en acciones que posee menos restricciones. Además, es un
lenguaje que utiliza Windows y sistemas X-Windows, gran parte de la
programación en este lenguaje está centrada en describir objetos, escribir
funciones que respondan a movimientos del mouse, aperturas, utilización de
teclas, cargas de páginas entre otros.
Existe dos tipos de JavaScript: por un lado está el que se ejecuta en el cliente, este
es el Javascript propiamente dicho, aunque técnicamente se denomina Navigator
JavaScript. Pero también existe un Javascript que se ejecuta en el servidor, es más
reciente y se denomina LiveWire Javascript.
¿Cómo nace Javascript?
Javascript nació con la necesidad de permitir a los autores de sitio web crear
páginas que permitan intercambiar con los usuarios, ya que se necesitaba
crear webs de mayor complejidad. El HTML solo permitía crear páginas
estáticas donde se podía mostrar textos con estilos, pero se necesitaba
interactuar con los usuarios. En los años de 1990, Netscape creo Livescript;
las primeras versiones de este lenguaje fueron principalmente dedicadas a
pequeños grupos de diseñadores Web que no necesitaban utilizar un
compilador, o sin ninguna experiencia en la programación orientada a
objetos.

En el año de 1996 Microsoft se interesa por competir con Javascript por lo

que lanza su lenguaje llamado Jscript, introducido en los navegadores de
Internet Explorer. A pesar de las diferentes críticas que se le hacen al
lenguaje Javascript, este es uno de los lenguajes de programación más
populares para la web.
¿Dónde puedo ver funcionando Javascript?
Entre los diferentes servicios que se encuentran realizados con Javascript en Internet
se encuentran:
•Correo
•Chat
•Buscadores de Información
También podemos encontrar o crear códigos para insertarlos en las páginas como:
•Reloj
•Contadores de visitas
•Fechas
•Calculadoras
•Validadores de formularios
•Detectores de navegadores e idiomas
¿Cómo identificar código Javascript?
El código javascript podemos encontrarlo dentro de las etiquetas <body></body> de
nuestras páginas web. Por lo general se insertan entre: <script></script>. También
pueden estar ubicados en ficheros externos usando:
<script type="text/javascript" src="micodigo.js"></script>
¿Cómo identificar código Javascript?
El código javascript se encuentra dentro de las etiquetas <body></body> de nuestras páginas
web. Se insertan entre: <script></script>. También estan ubicados en ficheros externos
usando:
<script type="text/javascript" src="micodigo.js"></script>

Algunas características del lenguaje son:

Su sintaxis es similar a la de Java y C, al ser un lenguaje del lado del cliente este es
interpretado por el navegador.

•Variables: var = “Hola”, n=103

•Condiciones: if(i<10){ … }
•Ciclos: for(i; i<10; i++){ … }
•Arreglos: var miArreglo = new Array(“12”, “77”, “5”)
•Funciones: Propias del lenguaje y predefinidas por los usuarios
•Comentarios para una sola línea: // Comentarios
•Comentarios
para varias lineas:
/*
Comentarios
*/
•Permite la programación orientada a objetos: document.write("Hola");
•Las variables pueden ser definidas como: string, integer, float, boolean simplemente
utilizando “var”. Podemos usar “+” para concatenar cadenas y variables.
¿Es compatible con navegadores?
Javascript es soportado por la mayoría de los navegadores como Internet
Explorer, Netscape, Opera, Mozilla Firefox, entre otros.
 Con el surgimiento de lenguajes como PHP del lado del servidor y
Javascript del lado del cliente, surgió Ajax en acrónimo de
(Asynchronous Javascript And XML). El mismo es una técnica para crear
aplicaciones web interactivas. Este lenguaje combina varias tecnologías:
 HTML y Hojas de Estilos CSS para generar estilos.
 Implementaciones ECMAScript, uno de ellos es el lenguaje
Javascript.
 XMLHttpRequest es una de las funciones más importantes que
incluye, que permite intercambiar datos asincrónicamente con el
servidor web, puede ser mediante PHP,ASP, entre otros.
Características:
 JavaScript es compatible con gran parte de la estructura de
programación de C (por ejemplo, sentencias if, bucles for, sentencias
switch, etc
 Es simple, no hace falta tener conocimientos de programación para
poder hacer un programa en JavaScript.
 Maneja objetos dentro de nuestra página Web y sobre ese objeto
podemos definir diferentes eventos. Dichos objetos facilitan la
programación de páginas interactivas, a la vez que se evita la
posibilidad de ejecutar comandos que puedan ser peligrosos para la
máquina del usuario, tales como formateo de unidades, modificar
archivos etc.
Es dinámico, responde a eventos en tiempo real. Eventos como
presionar un botón, pasar el puntero del mouse sobre un determinado
texto o el simple hecho de cargar la página o caducar un tiempo.
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//
 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.
Las variables pueden comenzar por un carácter o un subrayado bajo (_).
Cuando a una variable no se le asigna un valor, su valor indefinido
(undefined). Si se le pone un valor, puede ocurrir que:
•Si fue declarada sin "var", se produce un error en tiempo de ejecución.
•Si fue declarada con "var", devuelve el valor NaN(Not a Number).
Veamos un ejemplo:
function f1(){ return y-2;
}
f1() // Esta llamada a f1 provoca un error en tiempo de ejecución
function f2(){ return var y-2;
}
f2() // devuelve el valor NaN
Podemos utilizar el valor "undefined" para ponerle valor a una
expresión:
var miVar; if(miVar==undefined){ hazunacosa();} else{
hazotracosa();}
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)
OPERADORES

•Existen varios tipos de operadores en JavaScript:

1.Asignación: Este tipo de operador se utiliza para asignar valores a las

variables.
var resultado=50

Asigna a la variable "resultado" el valor 50.

Existen abreviaturas de algunas operaciones de asignación:

x+=y x=x+y

x-=y x=x-y

x*=y x=x*y

x%=y x=x%y

x/=y x=x/y
2.Comparación : En JavaScript, se pueden comparar variables de distinto
tipo, pues es capaz de forzar conversiones:

== Devuelve true si son iguales. Fuerza conversiones de tipo.

!= Devuelve true si son distintos. Fuerza conversiones de tipo.

=== Devuelve true si son iguales y del mismo tipo.

!== Devuelve true si son distintos o de distinto tipo.

>  Devuelve true si la variable de la izquierda es mayor que la variable de la derecha

<  Devuelve true si la variable de la derecha es mayor que la variable de la izquierda

>= Devuelve true si la variable de la izquierda es mayor o igual que la variable de la derecha

<= Devuelve true si la variable de la izquierda es menor o igual que la variable de la derecha
 3. Aritméticos
Los operadores aritméticos, a partir de varios operandos, devuelven un solo valor,
resultado de la operación realizada con los anteriores operandos.
En JavaScript, existe notación postfija y prefija, por lo que variable++ y ++variable
son dos formas distintas de incrementar una variable. En primer lugar, se procesa la
variable, y luego se incrementa. Sin embargo, en el segundo caso, primero se
incrementa la variable y después se procesa.

>% Binario. Devuelve el resto de una división.

++ Unitario. Incrementa el valor de la variable.

-- Unitario. Decrementa el valor de una variable.

- Unitario. Cambia el signo de una variable.

 4. Lógicos:

Los operadores lógicos devuelven un valor binario.

Es importante saber que si en una evaluación ya se conoce el resultado, no se pone
valor a los demás términos:
•true || devuelve true.
•false && devuelve false.

&& AND

|| OR

! NOT
5. Cadenas:

Con las cadenas de caracteres podemos usar funciones de concatenación o

asignación. Estos operadores sirven tanto para literales como para variables.

"Hoy es un día" + "frío“

resultado= "Día " + tiempo

6. Condicional:
Este operador realiza las funciones de una sentencia "SI" Su formato es el
siguiente:

Condición: acción1:acción2
•Evalúa condición.
•Si la evaluación devuelve true, realiza acción1.
•Si la evaluación devuelve false, realiza acción2.

A continuación, veremos algunas aplicaciones:

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 BIENVENIDA.
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. 
 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 (>=, ==. !=…)
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
SIETE MOSTRAR EL MENSAJE ‘APROBADO'. 
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, NEGATIVO O NEUTRO. 
ESTRUCTURAS SWITCH.

 La instrucción switch es una alternativa para remplazar los if y

los else if.
 switch nos brinda una forma mas ordenada a la hora de
programar
 Divide las condiciones en casos.
 Sintaxis:
Switch(opción que elija)
Case (caso que elija) : código…;
Break; //rompe el caso, se sale del switch.
Default: (mensaje para verificar opción).
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> uso del switch.html
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> uso del while.html

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");}
 else { if (valor>0) { document.write(total + " es mayor que cero") ; }
 else { if (valor<0) { document.write("Valor igual a cero") ;} } }
 </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>

Uso de la sentencia FOR.html