APRENDIENDO A PROGRAMAREN 4 HORAS

INTEGRANTES

- GUADALUPE DEL CARMEN SEGOVIA SEGOVIA

- ALVARO ANTONIO ROSIQUE VIDAL

- CARLOS JAVIER COLLADO PEREZ

- MARÍA TERESA GÓMEZ GARCÍA

- CARLOS FRANCISCO SARMIENTO ROLDÁN

INTRODUCCIONUno de los aspectos más interesantes de la Word Wide Web es su capacidad de ofrecer contenidos interactivos a muchas personas. La Web es el mayor conjunto de información asequible para un ser humano desde el origen de los tiempos

Por primera vez, las ubicaciones de la Web tienen capacidad de interacción con sus usuarios. Aplicaciones muy sofisticadas, como programas de dibujo, hojas de cálculo, juegos y complejas herramientas de cálculo matemático, pueden ejecutarse ahora en la ventana del navegador, entre las paginas HTML, con solo disponer de un navegador preparado, sin necesidad de contar con un hardware o un software especializados.

Dos son las soluciones que han surgido en la Web para dotarla de contenidos interactivos: el sencillo y manejable lenguaje de hipertexto realzado (HTML) y el sofisticado y potente leguaje de programación Java. Con estas dos herramientas, los usuarios pueden crear contenidos atrayentes en su aspecto visual y unirlos sin solución de continuidad con las aplicaciones interactivas que brinda Java. Sin embargo, lo que parece echarse de menos es un sistema que aproxime ambas tecnologias. 

APARICION DE JAVASCRIPT

Netscape vió la necesidad de tender un puente entre las dos tecnologias. Para ello se puso a trabajar en un nuevo lenguaje de órdenes que pudiera ocupar el vacio entre HTML y Java y que, a la vez, fuera lo suficientemente potente como para enlazar ambas tecnologias.

Cuando Netscape creó ese nuevo lenguaje lo llamó LiveScript y lo introdujo de inmediato en su navegador más popular, en un esfuerzo por conseguir que la comunidad de Internet lo adoptara cuanto antes. Poco después Netscape y Sun se unieron para ayudar a que LiveScript consiguiera mayor difusion y para establecerlo como el lenguaje estandar de Internet para la escritura de órdenes basada en la Web. Dado que la sintaxis de LiveScript era muy similar a la de

Java, ambas compañías decidieron rebautizar su nuevo producto para que pudiera ser identificado mejor, y lo llamaron JavaScript.

JavaScript fue creado como un lenguaje de órdenes fácil de utilizar, abierto, de plataforma cruzada, capaz de enlazar objetos y recursos propios tanto de HTML como de Java. Si las mini aplicaciones de Java son fruto principalmente del trabajo de los programadores, JavaScript fue concebido para que pudieran usarlo los creadores de las paginas HTML en orden a controlar dinámicamente la interacción y el comportamiento de sus páginas. JavaScript tiene la particularidad de haber sido diseñado para integrarse con HTML.

Una de las ventajas principales que ofrece es su capacidad de reducir el tráfico de red, permitiendo la realización local de las tareas más simples. En otras palabras: en lugar de encomendar esas tareas al servidor y hacer que este pase los resultados al navegador, el navegador puede realizar algunas de esas tareas a nivel local, con lo que el usuario, además, obtiene sus respuestas en un tiempo más corto.

JavaScript es aún un lenguaje en evaluación, algunas de sus características y comandos pueden variar en el futuro. Se han realizado todos los esfuerzos necesarios para que la información aquí contenida sea lo más actual posible. 

La complejidad de Java es semejante a la de un programa en C++ mientras que la de JavaScript es cercana a la de uno en base, Clíper o su.

Por otra parte, la sintaxis de ambos lenguajes es muy similar sobre todo en lo que a estructuras de control de flujo se refiere.

Existen además mecanismos de comunicación entre Java y JavaScript. 

En definitiva, la principal ventaja de JavaScript es su simplicidad y su menor demanda de requisitos.

Relación entre JavaScript y Java:

JavaScript JavaInterpretado (no compilado) en cliente.

Compilado en servidor antes de la ejecución en el cliente.

Basado en objetos. Usan objetos, pero no clases ni herencia.

Programación orientada a objetos. Los pallets constan de clases objeto con herencia.

Código integrado en el código HTML.

Pallets diferenciados del código HTML (accesibles desde las páginas HTML).

No es necesario declarar el tipo de las variables.

Necesario declarar los tipos.

Enlazado dinámico. Los objetos referenciados deben existir en tiempo de ejecución (lenguaje interpretado).

Enlazados estáticos. Los objetos referenciados deben existir en tiempo de compilación (lenguaje compilado).

JavaScript es un lenguaje de scripts compacto basado en objetos. Originariamente era denominado LiveScript, y fue desarrollado por Netscape para su navegador Netscape Navigator 2.0. Fue éste el primer cliente en incorporarlo. Se ejecuta sobre 16 plataformas diferentes, incluyendo los entornos de Microsoft e incluso el MS Explorer lo incorpora en su versión 3.0.

JavaScript permite la realización de aplicaciones de propósito general a través de la WWW y aunque no está diseñado para el desarrollo de grandes aplicaciones es suficiente para la implementación de aplicaciones WWW completas o interfaces WWW hacia otras más complejas...

Por ejemplo, una aplicación escrita en JavaScript puede ser incrustada en un documento HTML proporcionando un mecanismo para la detección y tratamiento de eventos, como clicks del ratón o validación de entradas realizadas en formas.

REQUERIMIENTOSLos requisitos hardware necesarios para ejecutar JavaScript son los mismos que se necesitan para ejecutar Netscape Navigator. Es decir que si puedes utilizar Navigator, tienes todo el hardware y software necesario para ejecutar aplicaciones JavaScript.

Para crear páginas Web que contengan funciones JavaScript es posible emplear cualquier editor de texto. Y como JavaScript no necesita compilación, en cuanto el programa este archivado podrá ser probado directamente en el navegador.

PRESENTAMOS LAS DIFERENTES VERSIONES DE JAVASCRIPT, LOS NAVEGADORES QUE LAS ACEPTAN Y SUS CONTRIBUCIONES CON RESPECTO A LAS PREDECESORAS.

Javascript 1: nació con el Netscape 2.0 y soportaba gran cantidad de instrucciones y funciones, casi todas las que existen ahora ya se introdujeron en el primer estandar. 

Javascript 1.1: Es la versión de Javascript que se diseñó con la llegada de los navegadores 3.0. Implementaba poco más que su anterior versión, como por ejemplo el tratamiento de imágenes dinámicamente y la creación de arrays. 

Javascript 1.2: La versión de los navegadores 4.0. Esta tiene como desventaja que es un poco distinta en plataformas Microsoft y Netscape, ya que ambos navegadores crecieron de distinto modo y estaban en plena lucha por el mercado. 

Javascript 1.3: Versión que implementan los navegadores 5.0. En esta versión se han limado algunas diferencias y asperezas entre los dos navegadores. 

Javascript 1.5: Versión actual, en el momento de escribir estas líneas, que implementa Netscape 6. 

DESARROLLO

Los scripts en una página se ejecutarán inmediatamente mientras la página se carga en el navegador. Esto no es lo que queremos siempre. Algunas veces queremos ejecutar un script cuando la página se carga, en otras veces cuando un usuario dispara un evento.

1. Scripts en la sección de cabecera (head)

Los scripts que van a ser ejecutados cuando son llamados o cuando un evento es disparado, van en la sección de cabecera.

Cuando se pone un script en esta sección, se asegura que el script es cargado antes de ser usado.

<html>

<head>

<script type="text/javascript">

....

</script>

</head>

2. Scripts en la sección de cuerpo (body) 

Los scripts que van a ser ejecutados cuando la página se carga van en la sección del cuerpo. Cuando se pone un script en la sección del cuerpo, éste genera el contenido de la página.

<html>

<head>

</head>

<body>

<script type="text/javascript">

....

</script>

</body>

 

3. Scripts en ambas secciones, cuerpo y cabecera

Se pueden poner un número ilimitado de scripts en el documento, así que se pueden tener scripts en ambas secciones.

<html>

<head>

<script type="text/javascript">

....

</script>

</head>

<body>

<script type="text/javascript">

....

</script>

</body>

 Usando un Javascript Externo 

Para simplificar esto, se puede escribir un Javascript en un archivo externo y salvarlo con una extensión .js

Nota: El script externo no puede contener la marca <script>. Para usar el scriptexterno, haga que el atributo “src” de la marca <script> apunte al archivo .js: 

<html>

<head>

<script src="xxx.js"></script>

</head>

<body>

</body>

</html>

EJERCICIOS (REALIZADO POR LOS INTEGRANTES DEL EQUIPO)

Ejercicios Resueltos con JavaScript.

1.- Primer programa será el famoso "Hola Mundo", es decir un programa que muestre en el documento HTML el mensaje "Hola Mundo. El comando document.write sirve para imprimir el texto especificado en la página. Para imprimir texto literalmente, escribe el texto en comillas simples y entre paréntesis".

<html> <head> </head><body> <script type="text/javascript"> document.write('Hola Mundo'); </script></body> </html>

2.- Mostrar el contenido de una variable en una página utilizamos el objeto document y llamamos a la función write.

La sentencia var sirve para declarar una variable en JavaScript.

<html> <head> </head> <body> <script type="text/javascript"> var nombre='Juan'; var edad=10; var altura=1.92; var casado=false;

document.write(nombre); document.write('<br>'); document.write(edad); document.write('<br>'); document.write(altura); document.write('<br>'); document.write(casado); </script>

</body> </html>

3.- Crea un programa en JavaScript que te le pida al usuario que ingrese su nombre y edad, y que lo muestre en pantalla. La sentencia prompt sirve para imprimir un mensaje de texto en pantalla.

<html> <head> </head> <body> <script type="text/javascript"> 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');

</script> </body> </html>

4.- Realizar la carga del lado de un cuadrado, mostrar por pantalla el perímetro del mismo (El perímetro de un cuadrado se calcula multiplicando el valor del lado por cuatro)

<html><head></head>

<body>

<script type="text/javascript"> var lado;

lado=prompt('Ingrese medida del lado:',''); var perimetro; perimetro=lado*4; document.write('Su perímetro es:'); document.write(perimetro);

</script></body></html>

5.- Realizar un programa que solicite una calificación de un alumno. Mostrar un mensaje que aprobó si tiene una nota mayor o igual a 4:

La sentencia IF sirve para la toma de decisiones true o false.

<html><head></head>

<body><script type="text/javascript">

var nombre; var nota; nombre=prompt('Ingrese nombre:',''); nota=prompt('Ingrese su nota:','');

if (nota>=4) { document.write(nombre+' esta aprobado con un '+nota); }</script></body></html>

6.- Hacer un programa que lea por teclado tres números distintos y nos muestre el mayor de ellos

La sentencia parseInt convierte una valor String en Entero. Debido que el valor ingresado en el cuadro de texto almacena el valor como tipo String.

<html><head></head>

<body><script type="text/javascript">

var num1,num2,num3; num1=prompt('Ingrese primer número:',''); num2=prompt('Ingrese segundo número:',''); num3=prompt('Ingrese tercer número:',''); num1=parseInt(num1); num2=parseInt(num2); num3=parseInt(num3); if (num1>num2 && num1>num3)

{ document.write('el mayor es el '+num1); } else { if (num2>num3) { document.write('el mayor es el '+num2); } else { document.write('el mayor es el '+num3); } }</script></body></html>

7.- Realizar un programa que pida cargar una fecha cualquiera, luego verificar si dicha fecha corresponde a Navidad (se debe cargar por separado el dia, el mes y el año).

<html><head></head>

<body>

<script type="text/javascript"> var dia,mes,año;

dia=prompt('Ingrese día',''); dia=parseInt(dia); mes=prompt('Ingrese mes',''); mes=parseInt(mes); año=prompt('Ingrese año',''); año=parseInt(año);

if (dia==25 && mes==12) { document.write('La fecha ingresada corresponde a navidad'); } else { document.write('La fecha ingresada no corresponde a navidad'); }</script>

</body></html>

8.- De un operario se conoce su sueldo y los años de antigüedad. Se pide hacer un programa que lea los datos de entrada e informea) 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 la página sin cambios.

<html><head></head><body>

<script type="text/javascript"> var sueldo,antiguedad; sueldo=prompt('Ingrese el sueldo del empleado',''); sueldo=parseInt(sueldo); antiguedad=prompt('Ingrese la antigüedad del empleado',''); antiguedad=parseInt(antiguedad); if (sueldo<500 && antiguedad>=10) { document.write('Se le otorga un aumento del 20%'); document.write('<br>'); var sueldototal=sueldo+sueldo*0.20; document.write('El sueldo total es:'+sueldototal); } else {

if (sueldo<500 && antiguedad<10) { document.write('Se le otorga un aumento del 5%'); document.write('<br>'); var sueldototal=sueldo+sueldo*0.05; document.write('El sueldo total es:'+sueldototal); } else { document.write('El sueldo queda sin cambios:'+sueldo); } }</script>

</body></html>

9.- Se ingresan por teclado tres números, si al menos uno de los valores ingresados es menores a 10, imprimir en la página la leyenda 'Alguno de los números son menores a diez'.

Los símbolos || tienen la función condicional si no cumple una condición,

cumplo la siguiente o la siguiente condición.

<html><head></head>

<body>

<script type="text/javascript"> var num1,num2,num3;

num1=prompt('Ingrese primer valor',''); num1=parseInt(num1); num2=prompt('Ingrese segundo valor',''); num2=parseInt(num2); num3=prompt('Ingrese tercer valor',''); num3=parseInt(num3);

if (num1<10 || num2<10 || num3<10) { document.write('Alguno de los números son menores a diez'); }

</script></body></html>

10.- Realizar un programa en JavaScript que imprima una serie de números del 1 hasta el 100 con la estructura repetitiva WHILE.

La sentencia WHILE su función es que si se cumple la condición pasara a ejecutar las instrucciones.

<html><head></head>

<body><script type="text/javascript"> var x; x=1; while (x<=100) { document.write(x); document.write('<br>'); x=x+1; }</script></body></html>

11.- Mostrar por pantalla los números del 1 al 10 con la estructura repetitiva FOR.

La sentencia FOR nos ayuda para repetir instrucciones según la condición que le pongamos realizara las iteraciones.

<html><head></head>

<body>

<script type="text/javascript"> var f; for(f=1;f<=10;f++) { document.write(f+" "); }</script></body></html>

12.- Escribir un programa que solicite la carga de un número entre 0 y 999, y nos muestre un mensaje de cuántos dígitos tiene el mismo. Finalizar el programa cuando se cargue el valor 0 utilizando DO WHILE.

La sentencia DO-WHILE permite ejecutar una serie de instrucciones hasta que se cumpla la condicion.

<html><head></head>

<body><script type="text/javascript"> 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('<br>'); } while(valor!=0);</script></body></html>

13.- Crear un vector para almacenar los cinco sueldos de operarios y luego mostrar el total de gastos en sueldos (cada actividad en una función).

Los arrays nos ayudan para almacenar una serie de datos los cuales ocuparan una posición dentro del arreglo.<html><head></head><body><script type="text/javascript"> function cargar(sueldos) { var f; for(f=0;f<sueldos.length;f++) { var v; v=prompt('Ingrese sueldo:',''); sueldos[f]=parseInt(v); } } function calcularGastos(sueldos) { var total=0; var f; for(f=0;f<sueldos.length;f++) { total=total+sueldos[f]; } document.write('Listado de sueldos<br>');

for(f=0;f<sueldos.length;f++) { document.write(sueldos[f]+'<br>'); } document.write('Total de gastos en sueldos:'+total); }

var sueldos; sueldos=new Array(5); cargar(sueldos); calcularGastos(sueldos);</script></body></html>

2. Otros Ejemplos usando JavaScript.

  1.- Escribir un mensaje de alerta con JavaScript.

La sentencia alert su función principal es de mandar mensajes de alerta al usuario.

<html> <head> </head>

<body> <script type="text/javascript"> document.write("Hello World!") </script> Texto HTML <script type="text/javascript"> alert("Mensaje en javascript") </script> </body></html>

2.- Mostrar en una ventana el valor introducido en una caja de texto.

Las funciones nos sirven para utilizar una y otra vez las mismas instrucciones.

<html> <head> <meta charset = "UTF-8"> <script type="text/javascript"> function myfunction(txt){ alert(txt) } </script> </head>

<body> <form name="form1"> <input name="entrada"> <input type="button" onclick="myfunction(form1.entrada.value)"value="Llamar Función"> </form> <p>Presiona el botón, y una función llamara lo que ingresastes en la caja de texto. </p> </body></html>

3.- Utilizando JavaScript imprime todos los niveles cabeceras de títulos de HTML en forma secuencial utilizando la sentencia de control FOR y la sentencia DOCUMENT.WRITE.

La etiqueta <h> nos sirve para determinar el tamaño que tendrá nuestro título de cabecera van desde el nivel 1 hasta el 6.

<html> <body> <script type="text/javascript"> for (i = 1; i <= 6; i++){ document.write("<h" + i + ">Cabecera de nivel " + i) document.write("</h" + i + ">") } </script> </body></html>

4.- Crear dos botones los cuales el primer botón haga la función de abrir una ventana en el explorador y en el segundo botón que cierre la ventana en el explorador.

El método WINDOW.OPEN nos ayuda para abrir una ventana dentro del mismo explorador, utilizando una función. De igual CLOSE nos ayuda a cerrar la ventana que abrimos con WINDOW.OPEN.

<html> <head> <script language=javascript> function openwindow() { m = window.open("http://www.google.com"); } function closewindow() { m.close() } </script> </head>

<body> <form> <input type=button value="Open Window" onclick="openwindow()"> <input type=button value="Close Window" onclick="closewindow()"> </form> </body></html>

BIBLIOGRAFIA Walter Soto Espinoza, Manual de JavaScript, 01 de Marzo de 1998.

http://www.oocities.org/info_jaime/taller_integral_III/ manual_de_java_script.htm

Javier Eguiluz, Introducción a JavaScript, N.A. http://librosweb.es/libro/javascript/capitulo_1/

javascript_en_otros_entornos.html

Javier Eguiluz, Introducción a JavaScript, N.A.

http://librosweb.es/libro/javascript/

Jorge Sánchez, Manual de referencia de JavaScript, Año 2003. http://www.jorgesanchez.net/web/javascript.pdf