JavaScript

IntegrantesMiller Caballero Gonzalez

Diego Ferney Carrion Muñoz Jorge Enrique Daza Velosa

Brayan Esteban Patiño Carrasco

IntroduccionJavaScript es un lenguaje de script orientado a paginas web que no requiere ser compilado, ya que es interpretado de forma automatica cuando una pagina web se abre.JavaScript fue desarrollado por Netscape y Sun Microsystems en 1995. Es un lenguaje que integra mejoras a las paginas HTML comunes, dandoles mayor funcionalidad, dinamismo, y velocidad.Como contrapeso, Microsoft desarrollo JScript, un lenguaje muy parecido an JavaScript, pero incompatible en ciertas funciones. Por ello la W3C se ha encargado de crear el DOM (Document Object Model), una API que le permite a los programadores web desarrollar una unica version de una pagian web para todo los navegadores. Sin embargo Microsoft ha desarrollado su propio DOM, lo cual genera alguanas incompatibilidades con los navegadores.

¿SE DEBE SABER ROGRAMACÓN BASICA? En cierto modo antes de diseñar paginas se debe tener presente debe conocer o haber desarrollado programas o proyectos en html u/o xml y conocer un poco de lo que se interpreta en el codigo como las estructuras que se desarrollan en ello y los pasos para que la pagina pudiece funcionar es por ello que debe conocer elementos básicos con los que se construyen las aplicaciones. En cierto modo si sabe o a programado en otro lenguaje le quedara mas facil interpretar y conocer para desarrollar paginas en javaScript.

Sin embargo, es un lenguaje sencillo de entender. Una de estas facilidades se da cuando queremos declarar una variable, en este caso podemos declararla con var, EJ: var nombre=”Miller”O pueden ser declarada directamente:nombre=”Miller” De esta forma el programa declarara la variable automaticamente.JavaScript tambien permite realizar operaciones como recoger informacion de formularios, generar ventanas emergentes, crear menus dinamicos, marquesinas especiales, entre otras opciones.

Paginas HTML invocando a JavaScript y funciones

Esenciales

Existen dos propiedades para agregar código en HTML llamando a JavaScript por medio de inclusión directa (incluir código en la pagina HTML por medio de la instrucción script) y realizar llamados por archivos externos (utilizado cuando el numero de líneas de código es muy grande).

Ejemplo inclusión directa

<script language="javascript">//hacer el llamado al lenguaje javascript // código en lenguaje JavaScript</script>

Ejemplo archivo externoEs utilizado con el fin de hacer llamados a otros scripts, cuando el número de líneas de código son muy extensas o cuando el mismo código va ser reutilizable en otras páginas.

<script language="javascript" src="archivo.js"></script>// hacer el llamado a un //archivo externo. jsp(java script)

Funciones esencial del JavaScrpit

Las siguientes funciones JavaScript son análogas cuando utilizamos código para el lenguaje Java, por eso haremos comparaciones entre estos dos lenguajes para entender mejor las instrucciones.

Función prompt():

JavaScript variable = prompt ("mensaje", "mensaje dentro del texto")

Java variable= JOptionPane.showInputDialog(“escriba en el campo de texto”);

Cumple la misma función que el JOptionPane.showInputDialog(“ESCRIBA..”) en java. Lo que hace la función prompt es mostrar una ventana donde podamos escribir un campo de texto y mostrar la opción aceptar para mostrar una cadena o cancelar si no se desea enviar nada.

Estructura prompt():

Función Alert():

JavaScript alert ("mensaje")

Java JOptionPane.showMessageDialog(“Mensaje”)

Son cuadro de diálogos previamente etiquetados y muestran mensajes a los usuarios. Com parando alert en Java seria análogo JOptionPane.showMessageDialog(“Mensaje”)

Estructura alert():

• Función confirm():• Cumple la misma función de la instrucción prompt,

pero la diferencia es que confirm no da la opción de cuadro de texto como lo hace el prompt.

• Estructura confirm():• valor = confirm ("expresion-javascript")• Función setInterval():• Esta función sirve para ejecutar instrucciones

cuando se cumple un tiempo dado por el programador, en comparación con Jva seria análogo a la instrucción Synchronized.

• Estructura de setInterval():• Variable identificador = setInterval("expresión-

javascript",milisegundos)

Ejemplos y explicacion de codigo scripts en JavaScprit

ejemplo1: posicion de una imagen u objeto en la ventana del navegador

El script que será presentado a continuación servirá para la utilización de otros ejemplos JavaScript, con el fin de utilizar una imagen que será ubicada en la posición de un objeto en la ventana del navegador. El código permite saber la ubicacion izquierda y superior dentro de la pagina con respecto al margen de la pantalla. El script es un ejemplo de la pagina www.codigojavascript.com/ y se presentara comentarios para que el código sea más entendible.

<HTML><HEAD> <script language="javascript">//parámetros para la posición izquierda en la ventana this.findLeftObj = function(obj) { /*llamar a una función que guardara un objeto y lo asigna para posicionarlo a la izquierda de la pagina */

var curleft = 0; /*se crea una variable llamada curleft(parte izquierda)

if (obj.offsetParent) { /*si el objeto cumple con los parámetros haga..*/while (obj.offsetParent) { //ciclo, mientras que se cumplan los parametros...curleft += obj.offsetLeft //la variable curleft aumenta y es igual objeto situado en la izqueirdaobj = obj.offsetParent; /*el objeto guarda el contenido que se mostrara en la ventana/*}}else {if(obj.x) {curleft += obj.x; //si no, situar el objeto en una coordenada X}}return(curleft);}

//parametros para la posición superior en la ventana this.findTopObj = function(obj) { /*llamar a una función que guardara un objeto y lo asigna para posicionarlo en la parte superior de la pagina*/ var curtop = 0; /*se crea una variable llamada curTop(parte superior)*/if (obj.offsetParent) { /*si el objeto cumple con los parámetros haga../*while (obj.offsetParent) { /*ciclo, mientras que se cumplan los parámetros...*/curtop += obj.offsetTop /*la variable curleft aumenta y es igual objeto situado en la izqueirda*/ obj = obj.offsetParent; */el objeto guarda el contenido que se mostrara en la ventana*/}}else {if (obj.y) {curtop += obj.y; /*si no, situar el objeto en una coordenada Y*/}}return(curtop);}

//funcion o metodo para posicionar la imagen function posicionImagen(imagen) { //toma un objeto de tipo imagen posXImagen = findLeftObj(imagen); /*asigna en una posición X el objeto imagen el cual llama al método findLeftObj para situar la imagen en la parte izquierda de la ventana*/ posYImagen = findTopObj(imagen); /*asigna en una posición X el objeto imagen el cual llama al método findTopObj para situar la imagen en la parte superior de la ventana/*/*Ventana la cual muestra un mensaje dentro de la página en donde indica las posición izquierdas y superior de la imagen en la página.la instrucción alert la podemos tomar como análoga cuando hacemos un JOPtionPane.showMessage en Java para mostrar mensajes en una ventana, en el caso de javaScript utilizan la instrucción alert para este mismo fin.*/alert('La imagen está en la posición:\nLeft(X) ' + posXImagen + '\nTop(Y) ' + posYImagen) } // Fin de la función posicionImagen()

</script> </HEAD> // en el cuerpo del script se llama al evento onmouseover que hace un llamado al método posicionImagen <BODY> <IMG src="0.jpg" onmouseover="posicionImagen(this)" /> /*se crea una variable llamada src de tipo Image la cual llama al evento onmouseover y se invoca al método posicionImagen para obtener la coordenadas en la que se encuentra la imagen*/ <IMG src="1.jpg" onmouseover="posicionImagen(this)" /><IMG src="2.jpg" onmouseover="posicionImagen(this)" /> <DIV style="background-color:#003399; color:#CCCCCC; width:200px; " //mensaje dentro de un cuadro azul onmouseover="posicionImagen(this)"> /*llama al evento onmouseover y se invoca al método posicionImagen para obtener la coordenadas en la que se encuentra la imagen*/También podemos saber la posición de una capa o de cualquier objeto cargado en la página.// mensaje dentro de un cuadro azul</DIV> </BODY></HTML>

Ejemplos 2: Asignacion Musical A paginas web

Java Scrpit nos permite seleccionar varias obciones para que utilizamos los objetos y no sean solamente estandar sini dinamicos como en Html el bgsound, el cual lo utilizaremos para insertar ficheros musicales de fondo para dichas paginas que el usuarios necesite. Este elemento es accesible a través del document.all del Internet Explorer, de la cual permite asignar de forma dinámica distintos ficheros musicales.NOTA!: El inconveniente es que sólo está soportado a partir de las versiones 4 de este navegador.por lo cual los navegadores de Netscape tienen que recurrir al objeto embed, que permite embeber en la página de dicho fichero musical.

Lo que se trata aqui es activar y desactivar el sonido para cada caso, Para el Netscape, basta con usar los métodos play() y stop() del objeto embebido. Auque existen varios ficheros que le permiten al programador asignar un fichero de muSica sin sonido(como el caso de SILENCIO.MID) al objeto bgsound.Ejemplo2:El ejemplo incluye la forma de hacer que el sonido se inicie al poner el puntero del ratón sobre un enlace, y se pare al quitarlo del mismo.<script language="javascript" type="text⁄javascript"> ⁄⁄MUSICA EN LA PAGINA ⁄⁄deteccion de versiones ver = parseInt(navigator.appVersion) ⁄⁄internet explorer ie4 = (ver>3 && navigator.appName!="Netscape")?1:0 ⁄⁄netscape

ns4 = (ver>3 && navigator.appName=="Netscape")?1:0 ns3 = (ver==3 && navigator.appName=="Netscape")?1:0

⁄⁄reproduccion del sonido function reproducir() { ⁄⁄para el IE se asigna el fichero musical al objeto bgsound if (ie4) document.all['cancion'].src='⁄ejemplos⁄javascript⁄spring.mid' ⁄⁄para el netscape se usa el metodo play() del objeto embed if ((ns4||ns3) && navigator.javaEnabled() && navigator.mimeTypes['audio⁄x-midi'] && self.document.musica.IsReady() ) { self.document.musica.play() } } ⁄⁄detencion de la reproduccion function detener() { ⁄⁄detenemos el sonido asignando un fichero musical sin sonido if (ie4) document.all['cancion'].src='⁄ejemplos⁄javascript⁄silencio.mid' ⁄⁄para el netscape, el metodo stop() detiene el sonido if ((ns4||ns3) && navigator.javaEnabled() && navigator.mimeTypes['audio⁄x-midi'] ) { self.document.musica.stop() } } <⁄script>

Operadores

Los operadores en java script permiten unir o hacer operaciones con los simbolos matematicos, se utilizan variables en la cual permite tener un solo resultado, este resultado se puede obtener mediante la suma ( + ), resta( - ),multiplicacion( * ) y division( / ). (concatena) ejemplo:objeto1=”hola”objeto2=”miller”resultado=objeto1 + objeto2 // “holamiller”

Otro operador de java script es el logico que consiste en hacer veridica una afirmacion o falsa si se es caso. es asi que que se utiliza el algebra de booleana o logica matematica para realizar ciertas opreaciones.&& - y - and||- o - or!- no - not Ejemplo:miBoleano = truemiBoleano = !miBoleano //miBoleano ahora vale falsetengoHambre = truetengoComida = truecomoComida = tengoHambre && tengoComida

Mas opreadores como los condicionales estos operadores se utilizan para realizar comparaciones entres dos o mas objetos. Operadores:!=diferencia> mayor que< menor que>= mayor igual<= menor igual==si son iguiales

Operador bit a bitEstos operadores transforman los numeros de las operaciones en bits para luego realizar cualquier operacion. Se utilizan los mismos operadores logicos y otros mas que son : >> se desplaza a la derecha<< se desplaza a la izquierda~ No& ANDI OR^ XOR

Operador de AsignacionEste operador asigna cualquier valor a distintas constantes por un igual que es el aquel que va tener esa funcion de asignacion. ejemplos: a=c!=a=a+4a=a^2

Los Objetos de Windows

Los objetos windows hace referencia a entradas que muestran propiedades y metodos, donde alli se realiza por medio del navegador un objeto independiente de la jerarquia, situando asi todos los componentes de una pagina web para dicha ventana, Todo esto con el fin de mostrar el objeto windows del cual se hace referencia a ventanas actuales. A continuación sus propiedades y sus métodos. Propiedades • closed. Válida a partir de Netscape 3 en adelante y MSIE 4 en

adelante. Es un booleano que nos dice si la ventana está cerrada ( closed = true ) o no ( closed = false ).

• defaultStatus. Cadena que contiene el texto por defecto que aparece en la barra de estado (status bar) del navegador.

• frames. Es un array: cada elemento de este array (frames[0], frames[1], …) es uno de los frames que contiene la ventana. Su orden se asigna según se definen en el documento HTML.

• history. Se trata de un array que representa las URLS visitadas por la ventana (están almacenadas en su historial).

• length. Variable que nos indica cuántos frames tiene la ventana actual.

• location. Cadena con la URL de la barra de dirección.• name. Contiene el nombre de la ventana, o del frame actual.

• opener. Es una referencia al objeto window que lo abrió, si la ventana fue abierta usando el método open() que veremos cuando estudiemos los métodos.

• parent. Referencia al objeto window que contiene el frameset.

• self. Es un nombre alternativo del window actual.• status. String con el mensaje que tiene la barra de estado. • top. Nombre alternativo de la ventana del nivel superior.• window. Igual que self: nombre alternativo del objeto window

actual.

DOM (Document Object Model)

DOM (Document Object Model), es un estandar creado por la W3C para la construccion de paginas web con JavaScript.DOM nace con la necesidad de mejorar la compatibilidad de todoslos navegadores con JavaScript, incluyendole nuevas funciones,como un manejo estandar de objetos orientados a web.Este estandar no es solo utilizado por JavaScript, sino tambien porJava y Visual Basic Script.Los objetos en DOM se encargan de dar nuevas caracteristicas aobjetos de HTML, como es el caso de los botones, los comandos deformato para texto (como <a>, <area>,<form>, etc).Gracias a DOM, los programadores pueden manipular el contenido de paginas XHTML como si fueran XML, lo que permite un mayor rango de accion para programar.

Objeto Window de DOM

Window es el primer objeto de mayor jerarquía que encontramos en DOM, ya que todos los procesos Web se realizanen una ventana.El objeto Windows nos permite dar a nuestras paginas HTML mejores funcionalidades y efectos visuales, por lo cualnos es muy útil a la hora de construir contenido Web.Aqui tenemos algunos ejemplos del uso de window:<html><head><script type=”text/javascript”>function abrirVentana(){

window.open(”http://canibales.edublogs.org/”);}</script></head><body><form><input type=button value=”Cannibales” onclick=”abrirVentana()”></form></body></html>

Objeto Document de DOM en JavaScript

Muchas ocaciones hemos deseado integrar nuestro codigo JavaScript con el contenido HTML denuestras paginas Web. El objeto document de DOM es el indicado para satisfacer esta necesidad, yaque nos permite interactuar dentro de nuestra pagina Web con gran facilidad.El objeto document nos permite realizar cambios en elementos de nuestras paginas Web, como lovimos en la jerarquia de DOM, asi como tambien nos permite obtener una mejor funcionalidad de otroselementos como los botones, campos de texto, entre otros.

Document tambien nos permite hacer inserciones de codigo HTML puro desde un programaJavaScript, algo que tambien es posible dentro del lenguaje Java con este mismo objeto.Estos son algunos ejemplos del uso de document:<html><head>Programa Tipico</head><body><script type=”text/javascript”>document.write(”<br> Hola Imundo </br>”);</script></body></html>