Aprendiendo a Programas en 4 horas JavaScript

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

INTRODUCCION
Uno de los aspectos más interesantes de la Word Wide Web es su
capacidad de ofrecercontenidos interactivos a muchas personas.La
Web es el mayor conjunto de información asequible para un ser
humano desde elorigen 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 disponerde
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 puedencrear
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ó LiveScripty lo
introdujo de inmediato en su navegador más popular, en un esfuerzo
por conseguirque la comunidad de Internet lo adoptara cuanto antes.
Poco después Netscape ySun se unieron para ayudar a que
LiveScriptconsiguiera mayor difusion y para establecerlo comoel
lenguaje estandar de Internet para la escritura de órdenes basada en
la Web.Dado que la sintaxis de LiveScriptera muy similar a la de

Java, ambas compañías decidieronrebautizar 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 concebidopara 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 encomendaresas 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 puedenvariar en el futuro. Se han
realizado todos los esfuerzos necesarios paraque 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ónentre Java y
JavaScript.
En definitiva, la principal ventaja de JavaScript es su simplicidad y su
menor demanda de requisitos.

Relación entre JavaScripty Java:
JavaScript Java
Interpretado (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ónorientada a objetos.Los
pallets constan de clases objeto con
herencia.
Código integrado en el código
HTML.
Pallets diferenciados delcó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
referenciadosdebenexistir 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 Microsofte 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ónde
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óny tratamiento de eventos, como clicks del ratón o validación
de entradas realizadas en formas.

REQUERIMIENTOS
Los 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 emplearcualquier 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 soportabagran 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ñó conla
llegada de los navegadores 3.0. Implementabapoco 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 Microsofty
Netscape,ya que ambos navegadores crecieronde distinto modo y
estaban en plena lucha por el mercado.
 Javascript 1.3: Versiónque implementan los navegadores 5.0. En
esta versión se han limado algunas diferencias y asperezas entre los
dos navegadores.

 Javascript 1.5: Versiónactual, en el momento de escribir estas
líneas, que implementaNetscape 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>
</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.
Usando un Javascript Externo
Para simplificaresto, se puede escribirun Javascript en un archivo
externo y salvarlo con una extensión .js
Nota: El scriptexterno 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>
<html>
<head>
....
</script>
</head>
<body>
....
</script>
</body>

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>
<scripttype="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>
var nombre='Juan';
var edad=10;
var altura=1.92;
var casado=false;
document.write(nombre);
document.write('<br>');
document.write(edad);
document.write(altura);
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>
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>
var lado;
lado=prompt('Ingresemedida del lado:','');
var perimetro;
perimetro=lado*4;
document.write('Su perímetroes:');
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>
var nombre;
var nota;
nombre=prompt('Ingresenombre:','');
nota=prompt('Ingresesu 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>
var num1,num2,num3;
num1=prompt('Ingrese primernúmero:','');
num2=prompt('Ingrese segundo número:','');
num3=prompt('Ingrese tercer número:','');
num1=parseInt(num1);
if (num1>num2 && num1>num3)
{
document.write('elmayores 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>
var dia,mes,año;
dia=prompt('Ingrese día','');
dia=parseInt(dia);
mes=prompt('Ingresemes','');
mes=parseInt(mes);
año=prompt('Ingreseaño','');
año=parseInt(año);
if (dia==25 && mes==12)
{
document.write('Lafecha ingresada correspondea navidad');
}
else
{
document.write('Lafecha ingresada no correspondea 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 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 la página sin
cambios.
<html>
<head>
</head>
<body>
var sueldo,antiguedad;
sueldo=prompt('Ingrese el sueldodel empleado','');
sueldo=parseInt(sueldo);
antiguedad=prompt('Ingresela antigüedad del empleado','');
antiguedad=parseInt(antiguedad);
if (sueldo<500 && antiguedad>=10)
{
document.write('Sele otorga un aumento del 20%');
var sueldototal=sueldo+sueldo*0.20;
document.write('Elsueldo totales:'+sueldototal);
}
else
{

if (sueldo<500&& antiguedad<10)
{
document.write('Se le otorga un aumento del 5%');
var sueldototal=sueldo+sueldo*0.05;
document.write('El sueldo total es:'+sueldototal);
}
else
{
document.write('El sueldo quedasin 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>
var num1,num2,num3;
num1=prompt('Ingrese primervalor','');
num2=prompt('Ingrese segundo valor','');
num3=prompt('Ingrese tercer valor','');
if (num1<10 || num2<10|| num3<10)
{
document.write('Alguno de los númerosson 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>
var x;
x=1;
while (x<=100)
{
document.write(x);
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>
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>
var valor;
do {
valor=prompt('Ingrese un valor entre 0 y 999:','');
valor=parseInt(valor);
document.write('Elvalor'+valor+'tiene ');
if (valor<10)
{
document.write('Tiene 1 digitos');
}
else
{
if (valor<100)
{
document.write('Tiene2 digitos');
}
else
{
document.write('Tiene3 digitos');
}
}
} 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>
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;
{
total=total+sueldos[f];
}
document.write('Listado de sueldos<br>');

{
document.write(sueldos[f]+'<br>');
}
document.write('Totalde gastos en sueldos:'+total);
}
var sueldos;
sueldos=newArray(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>
document.write("Hello World!")
</script>
Texto HTML
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">
function myfunction(txt){
alert(txt)
}
</script>
</head>
<body>
<form name="form1">
<inputname="entrada">
<inputtype="button"
onclick="myfunction(form1.entrada.value)"value="Llamar
Función">
</form>
<p>Presiona el botón,y una función llamaralo 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 cabeceravan desde el nivel 1 hasta el 6.
<html>
<body>
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>
<scriptlanguage=javascript>
function openwindow() {
m = window.open("http://www.google.com");
}
function closewindow() {
m.close()
}
</script>
</head>
<body>
<form>
<inputtype=buttonvalue="Open Window"
onclick="openwindow()">
<inputtype=buttonvalue="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_otro
s_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

Aprendiendo a Programas en 4 horas JavaScript

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (7)

Similar a Aprendiendo a Programas en 4 horas JavaScript

Similar a Aprendiendo a Programas en 4 horas JavaScript (20)

Último

Último (7)

Aprendiendo a Programas en 4 horas JavaScript