UNIVERSIDAD CENTRAL DE VENEZUELA FACULTAD DE CIENCIAS ESCUELA DE COMPUTACIÓN APLICACIÓN CON TECNOLOGÍA EN INTERNET PRELABORATORIO- 04 JAVASCRIPT Objetivos: 1. Uso del lenguaje de Javascript (JS). 2. Conocimientos del DOM (Document Object Model). 3. Utilización de Scripts internos y externos. 4. Investigar 5. Qué es DHTML? 6. Definición de Layer (Capa) 7. Investigar 1. ¿Qué es JavaScript? JavaScript es un lenguaje interpretado orientado a las páginas web, con una sintaxis semejante a la del lenguaje Java. Se utiliza en páginas web HTML, para realizar tareas y operaciones en el marco de la aplicación cliente. JScript es la implementación de ECMAScript de Microsoft, muy similar al JavaScript de Netscape, pero con ciertas diferencias en el modelo de objetos del navegador que hacen a ambas versiones con frecuencia incompatibles. Para evitar estas incompatibilidades, el World Wide Web Consortium diseñó el estándar Modelo de Objetos del Documento (DOM, Document Object Model). 2. ¿Qué es DOM (Document Objet Model)? EL DOM o Modelo de Objetos del Documento es una forma de representar documentos estructurados (tales como una página web HTML o un documento XML) que es independiente de cualquier lenguaje orientado a objetos. Su finalidad es definir el conjunto de objetos que pueden componer documentos HTML o XML, así como las estructuras que se definen dentro de él, sus propiedades y sus métodos, independientemente del lenguaje de programación utilizado, con el fin de evitar problemas de compatibilidad entre navegadores. El custodio del DOM es el World Wide Web Consortium (W3C). El DOM es una API para acceder, añadir y cambiar dinámicamente contenido estructurado en documentos con lenguajes como Javascript. 3. ¿Cómo se implementan los JavaScript? Una función JavaScript se puede implementar de dos formas, es decir, dentro del documento html o fuera de él. Un código JavaScript es similar a un código java. Declaración de variables: la declaración de variables a diferencia de java no es obligatoria, sin embargo, cuando se hace es por medio de la palabra reservada var. Ejemplo: var x; y = 2; Declaración de funciones: para declarar una función se utiliza la palabra reservada function y el cuerpo de la función esta definida dentro de llaves. function pruebas() { var z; w = 1; . . . } Declaración de arreglos: otro punto importante es la declaración de arreglos. Los vectores y matrices son vistos como objetos, por tanto es necesario realizar una instancia del objeto. Ejemplo: miVector = new Array(20) De que otra forma se pueden declarar arreglos? Obteniendo el apuntador al DOM: para poder manejar el documento hacemos referencia a cada parte de él, partiendo del objeto document. Ejemplo: document.write(‘HELLO MUNDO’); Para mas información sobre la sintaxis, semántica y funciones de JavaScript revisa http://www.programacion.net/html/tutorial/js/ Hay dos formas de implementar el código en JavaScript: i. En código html: para colocar código JavaScript dentro del documento html se utiliza la etiqueta <script> donde es esencial definir el atributo language donde indicamos que el lenguaje de scripting que usamos es Javascript. <script language="JavaScript"> function cuadrado(i) { document.write("Se pasó el valor: ",i,"<br>"); return i * i; } document.write("La función retornó: " + cuadrado(5)); </script> ii. Externo al código html: para colocar código JavaScript fuera del documento html, es necesario colocar la definición de las funciones en un archivo con extensión .js e importarlo en el documento html por medio de: <script language="JavaScript" src="nombre.js"></script> Si se necesita usar una función definida en el archivo .js dentro del body del documento html, se utiliza lo siguiente: <script language="javascript">nombre_funcion();</script> A continuación se le presentan una serie de funciones que pueden ser utiles para la realización del laboratorio. document.nombredelformulario: permite cargar todos los datos que están dentro del form. getValue(nombre): obtiene el valor de una etiqueta dado su nombre. length: devuelve el tamaño de un string (Ej: nombre.length). charAt(int i): devuelve el carácter i dentro de una cadena. indexOf(string i): devuelve la posición del carácter a partir de donde aparece la primera coincidencia con el string i dentro de un string j (Ej: j.indexOf(“@”)). 4. Investigar: Manejo de Mayuscula y Minusculas Manejo de sucadenas Eventos en JavaScript 5. Que es DHTML? Cualquier página que responde a las actividades del usuario y realiza efectos y funcionalidades se puede englobar dentro del DHTML, pero en este caso nos referimos más a efectos en el navegador por los cuales se pueden mostrar y ocultar elementos de la página, se puede modificar su posición, dimensiones, color, etc. DHTML nos da más control sobre la página, gracias a que los navegadores modernos incluyen una nueva estructura para visualizar en páginas Web denominada capa. Las capas se pueden ocultar, mostrar, desplazar, etc. Para realizar las acciones sobre la página, como modificar la apariencia de una capa, seguimos necesitando un lenguaje de programación del lado del cliente como Javascript. 6. Definición de Layer (Capa) Con las hojas de estilo se tiene control sobre los elementos individuales, pero no se tiene control sobre el documento como un todo, para ello se utilizan los layers o capas. Nosotros vamos a entender por LAYER una zona rectangular de la página que estamos diseñando, normalmente creados mediante el tag <DIV> o también utilizando un nuevo tag introducido por Netscape, llamado <LAYER> El siguiente código es un ejemplo de cómo crear una capa con sus características: <div id="ejemploCapa" STYLE="background-color:#009900; color:#0000FF; position:relative; padding:20; border-width:10px; border-style:ridge; border-color:#FFFFFF"> Esto es un Capa "on line" de layer o bloque posicionable. <p> Tiene el fondo verde y las letras azules, un bonito borde de 10 pixels de ancho y una distancia entre el borde y el contenido de 20 pixels. </div> Habitualmente son transparentes y usan como color y tipo de letra la establecida hasta ese momento en el documento HTML en el que se define. 7. Investigar: Investigar cada una de las propiedades de una capa Como acceder a las propiedades de una capa desde JavaScript Como utilizar DHTML en los diferentes Browser getElementById Cómo cambiar el estilo de una celda desde JavaScript y CSS? Enlaces: http://www.programacion.net/html/dinamico/tutorial/ http://flanagan.ugr.es/dhtml/ http://www.desarrolloweb.com/articulos/1040.php http://ahinosvemos.com/archives/2005/10/27/tutorial-javascriptpara-principiantes-1/ http://www.mctekk.com/index.php/seccion/javascript/menu_javascri pt_ver_2/330.htm GDATI