Guia 12 js

451 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
451
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Guia 12 js

  1. 1. Trabajo Presentado por: María paula Guevara Iván Mauricio Piñeros Norman Esteban Acevedo Néstor Iván Pérez Grupo: Trabajo Presentado a: Ing. Lily Alejandra Pardo ESPECIALIZACION TECNOLOGICA EN WEBMASTER 2012Calle 37 a N° 6-28 Conjunto Residencial Villa teresa Tel 264 29 67 – 260 87 30 Cel.: 317 469 3642 – 311 202 3040. Ibagué / Tolima.
  2. 2. 1.Según el material de apoyo realice un mapa conceptual teniendo en cuenta lo siguiente: Orige n de J a va S cript Dife re ncia e ntre J a va – JavaScript Form a s de e je cución de l código2. Describa las funciones de entrada y salida de texto, Realice un ejemplo de cada uno.La sentencia document.write (expresión_entera) evalúa la expresión e imprime el resultado porpantalla.La sentencia document.write (expresión_cadena) evalúa la expresión e imprime la cadenaresultante por pantalla.Las sentencias de salida pueden incluir varios argumentos separados por comas, lo que permiteagrupar en una única sentencia varias instrucciones de salida de la siguiente forma [es opcionalimplementar esto]:document.write (¿Qué año naciste?)prompt (a)Calle 37 a N° 6-28 Conjunto Residencial Villa teresa Tel 264 29 67 – 260 87 30 Cel.: 317 469 3642 – 311 202 3040. Ibagué / Tolima.
  3. 3. document.write ("Hola, tienes ", 2002 - a, " años.")// Imprime una cadena, un entero y una cadena3. Explique mediante un ejemplo javascript, variables, operadores, expresiones, sentencias,funciones.function setElementBackground() { var red = Math.floor(Math.random() * 256);var green = Math.floor(Math.random() * 256); var blue =Math.floor(Math.random() * 256); var obj =document.getElementById(element_to_change); if ( obj ) {obj.style.background = rgb( + red + , + green + , + blue + ); }}Argumentosfunction setElementBackground( elementID ) { var red =Math.floor(Math.random() * 256); var green = Math.floor(Math.random() * 256);var blue = Math.floor(Math.random() * 256); var obj = document.getElementById(elementID ); if ( obj ) { obj.style.background = rgb( + red + , + green+ , + blue + ); }}Mostrando valores calculadosfunction setElementBackground( elementID ) { var red =Math.floor(Math.random() * 256); var green = Math.floor(Math.random() * 256);var blue = Math.floor(Math.random() * 256); var obj = document.getElementById(elementID ); if ( obj ) { obj.style.background = rgb( + red + , + green+ , + blue + ); } return [ red, green, blue ];}4. Crear un ejercicio donde coloque a prueba el orden de ejecución de los operadores.4. Ejemplo:var numero = 5;++numero;alert(numero); // numero = 6El operador de incremento se indica mediante el prefijo ++ en el nombre de la variable. Elresultado es que el valor de esa variable se incrementa en una unidad. Por tanto, el anteriorejemplo es equivalente a:var numero = 5;numero = numero + 1;alert(numero); // numero = 6De forma equivalente, el operador decremento (indicado como un prefijo -- en el nombre de lavariable) se utiliza para decrementar el valor de la variable:var numero = 5;--numero;alert(numero); // numero = 4Calle 37 a N° 6-28 Conjunto Residencial Villa teresa Tel 264 29 67 – 260 87 30 Cel.: 317 469 3642 – 311 202 3040. Ibagué / Tolima.
  4. 4. El anterior ejemplo es equivalente a:var numero = 5;numero = numero - 1;alert(numero); // numero = 4Los operadores de incremento y decremento no solamente se pueden indicar como prefijo delnombre de la variable, sino que también es posible utilizarlos como sufijo. En este caso, sucomportamiento es similar pero muy diferente. En el siguiente ejemplo:var numero = 5;numero++;alert(numero); // numero = 6El resultado de ejecutar el script anterior es el mismo que cuando se utiliza el operador ++numero,por lo que puede parecer que es equivalente indicar el operador ++ delante o detrás delidentificador de la variable. Sin embargo, el siguiente ejemplo muestra sus diferencias:var numero1 = 5;var numero2 = 2;numero3 = numero1++ + numero2;// numero3 = 7, numero1 = 6var numero1 = 5;var numero2 = 2;numero3 = ++numero1 + numero2;// numero3 = 8, numero1 = 65. Leer sobreestructuras de control; If, switch, while, Do while, For, For in, arrays. Expliquemediante un ejemplo las estructuras For, while y array.ForSintaxis:for (Inicialización del índice; Condición de prueba; Modificación en elíndice){ …instrucciones…Escribe los números pares de 0 a 30<SCRIPT LANGUAGE="Javascript"><!--//Bucle forfor (i=30;i>=2;i-=2) {document.write ("<BR>"+i);}document.write("<BR>Ya se han escrito los números pares del 0 al 30");</SCRIPT>WhileSintaxis:while (condición){…instrucciones…}Calle 37 a N° 6-28 Conjunto Residencial Villa teresa Tel 264 29 67 – 260 87 30 Cel.: 317 469 3642 – 311 202 3040. Ibagué / Tolima.
  5. 5. Pregunta una clave hasta que se corresponda con una dada. <SCRIPT LANGUAGE="Javascript"> <!--//Bucle while auxclave=""; while (auxclave!="anonimo"){ auxclave=prompt("introduce la clave ","anonimo") } document.write ("Has acertado la clave");</SCRIPT>ArrayEl objeto Array se utiliza para almacenar varios valores en una sola variable.varmiArray = new Array(2)miArray[0] = "Colombia"miArray[1] = "Estados Unidos"miArray[5] = "Brasil"for (i=0;i<miArray.length;i++){ document.write("Posición " + i + " del array: " + miArray[i]) document.write("<br>")}6. Leer el siguiente documento sobre las funciones mas utilizadas enJavascripthttp://www.maestrosdelweb.com/editorial/diez-funciones-imprescindibles-en-javascript/FUNCIÓN1: GETELEMENTBYID()USO: VAR ELEMENTO = DOCUMENT.GETELEMENTBYID(ID);Este método pertenece al objeto document. Con él obtendremos el objeto que hace referencia alelemento con un id concreto.FUNCIÓN 2: GETELEMENTSBYTAGNAME()USO:VAR ARRAY_ELEMENTOS= ELEMENTO.GETELEMENTSBYTAGNAME(TAG);Sirve para obtener un array con todos los elementos con un tag concreto que están contenidosdentro de un elemento.FUNCIÓN3: JOIN()USO: VAR STRING = ARRAY.JOIN(STRING);El método join() pertenece al objeto Array (todos los arrays en JavaScript son un objeto Array),y nos servirá para unir todos los elementos de un array para forma una cadena de texto. Es elequivalente en PHP a implode().FUNCIÓN4: SPLIT()USO:VAR ARRAY = STRING.SPLIT(STRING); Al igual que join(), split() también es un método delobjeto Array, aunque sirve exactamente para lo contrario: dividir una cadena de texto en un array.Calle 37 a N° 6-28 Conjunto Residencial Villa teresa Tel 264 29 67 – 260 87 30 Cel.: 317 469 3642 – 311 202 3040. Ibagué / Tolima.
  6. 6. FUNCIÓN5: ADDEVENTLISTENER() / ATTACHEVENT()USO: INTERNET EXPLORER: ELEMENTO.ATTACHEVENT(“ON”+EVENTO, FUNCION);RESTO DE NAVEGADORES: ELEMENTO.ADDEVENTLISTENER(EVENTO, FUNCION, FALSE);Ambos métodos hacen exactamente lo mismo, sólo que, como ocurre en otros cientos deocasiones, Microsoft usa su propia implementación del DOM. Con este método añadiremoseventos a cualquier elemento de la página web, tal como onclick, onmouseover, onmouseout, etc.FUNCIÓN6: FOCUS()USO: ELEMENTO.FOCUS();Con este método conseguiremos pasar el foco a un elemento de un formulario.FUNCIÓN7: CREATEELEMENT() / APPENDCHILD()USO: VAR ELEMENTO = DOCUMENT.CREATEELEMENT(TAG);Con éste método del objeto document crearíamos un nuevo elemento con un tag determinado.Ejemplo: var div = document.createElement(DIV);FUNCIÓN8: REMOVECHILD()USO: ELEMENTO.REMOVECHILD(HIJO);Este método es el usado para eliminar elementos. Se elimina el elemento hijo del objeto.FUNCIÓN9: SETTIMEOUT() / SETINTERVAL()USO:VAR TEMPORIZADOR = SETTIMEOUT(FUNCION, MILISEGUNDOS);VAR INTERVALO = SETINTERVAL(FUNCION, MILISEGUNDOS);Ambos métodos (objeto window) nos sirven para ejecutar código javascript cada x milisegundos,bien para que se ejecute una sóla vez (setTimeout) o bien para que se ejecute ilimitadamente(setInterval). Ambos se pueden cancelar mediante clearTimeout(temporizador) yclearInterval(intervalo).FUNCIÓN10: ALERT() / CONFIRM() / PROMPT()USO: ALERT(MENSAJE);VAR RESULTADO = CONFIRM(MENSAJE);VAR RESULTADO = PROMPT(MENSAJE, VALOR);Con estos métodos (objeto window) mostraremos ventanas modales al usuario.Con alert() simplemente, como hemos visto en otros puntos, mostraremos un mensaje.Calle 37 a N° 6-28 Conjunto Residencial Villa teresa Tel 264 29 67 – 260 87 30 Cel.: 317 469 3642 – 311 202 3040. Ibagué / Tolima.
  7. 7. Conconfirm() haremos exactamente lo mismo, pero además obligará al usuario a seleccionarentre dos opciones, una positiva y otra negativa, que se devolverá como parámetro (boolean). Ycon prompt() pediremos al usuario que introduzca un texto en una ventana modal.confirm() es muy útil para confirmar clics en enlaces comprometidos, que hagan operacionescríticas como eliminación de datos.7. Explique cuando colocar código javascript en el head y en el bodyDepende el código si va a usar document.write para imprimir algo a su pagina, este tiene que estaren el body si funciones que va a estar llamando (para validar formulario por ejemplo) puedecolocarlo en el head.8. Desarrolle una presentación donde explique de manera sucinta los elementos que debe cumplirun sitio para estar dentro de los estándares internacionales; enfatice en lo correspondiente HTML • Diseñar o bocetar como queremos nuestra web con base en requerimientos planteados. • La mas alta de las prioridades según estándares de calidad, es que el sitio debe tener un adecuado uso de del <title> y los Meta Tags los cuales ayudan directamente en su indexación en los buscadores de internet. • No estructurar las paginas en tablas • Evaluar el tiempo de carga de las páginas solo por mencionar un dato un usuario no esperara más de 5 segundos en cargarse para que se visualice algo en la pantalla. • Utilizar texto alternativo en todas la imágenes • Optimizar el peso de las imágenes no deben superar los 72dpi sean jpg, gif y png. • No usar marcos frame, se pueden simular marcos frame con lenguajes de programación como el php y el jsp. • Las carpetas del sitio deben estar ordenas y estructuradas de forma lógica y apropiada • Los nombres de los archivos y de las carpetas no deben tener acentos o caracteres especiales, ni espaciosy mucho menos utilizar la letra ñ, deben ser nombres cortos y coherentes. • Uso de URI cortas. • Establecer parámetros de seguridad. • Hacer pruebas y correcciones en la mayor cantidad posible.. validar todos los códigos, textos, imágenes, frames y contenido dinámico asegurándose que se va a ver como fue diseñada y plantificada. • Supervisar la operatividad, funcionamiento de los servidores que deben operar el 99.6% del tiempo, además del comportamiento de los usuarios responder correos, ver cantidad de usuarios registrados.Nota:El siguiente link nos dará especificaciones técnicasmás precisas de un sitio aprobado segúnestándares de calidad internacionaleshttp://www.guiaweb.gob.cl/guia/archivos/Capitulo_III.pdf9. Explique la importancia que hay con el termino DOM, realizar un diagrama de los elementos quelo componen.El DOM es otra forma de ver el contenido de la página. Con el DOM, todos los elementos HTMLse insertan en un árbol cuyos nodos son las marcas HTML y las hojas, los valores propiamentedichos de las marcas. Por medio de JavaScript podemos acceder y modificar este árbol de marcasy hacer que la página varíe luego que ya se haya mostrado en el navegador. De aquí el nombre deesta tecnología DHTML es decir Dynamic Hyper Text Markup Language.Calle 37 a N° 6-28 Conjunto Residencial Villa teresa Tel 264 29 67 – 260 87 30 Cel.: 317 469 3642 – 311 202 3040. Ibagué / Tolima.
  8. 8. Mediante el DOM podemos acceder al contenido y estilo de cada marca del documento ymodificarlo de acuerdo a algún evento. Mediante el DOM podemos insertar, borrar, modificarmarcas HTML. Podemos acceder a la hoja de estilo definida a la página y dinámicamente agregar,modificar o borrar propiedades. Todos esto sin tener que recargar la página del servidor, es decirtodo se hace en el cliente (navegador) mediante JavaScript.10. Relacione Jquery con JavaScript.El jQuery es una librería de JavaScript para acceder a los objetos del DOM de un modosimplificado.Las aplicaciones en internet son cada vez más complejas, ya que incorporan efectos visuales,drag and drop, auto-completar, animaciones etc. el desarrollar todos estos conceptos desde ceropuede resultar complicado sobretodo si tenemos que presentar la solución con muy poco tiempo,en este tipo de situaciones el empleo de librerías como el jQuery nos facilitan el desarrollo de laaplicación. Otra ventaja paralela es despreocuparnos cuando codificamos en la compatibilidad denavegadores, ya que la librería resolverá esto.Para utilizar la librería como dijimos debemos descargarla del sitio oficial y en cada página que lorequiera agregar:<script type="text/javascript" src="jquery.js"></script>Del sitio oficial de jQuery descargaremos la versión descomprimida que ocupa alrededor de 60 Kb(es el archivo jquery.js) y cuando subamos nuestro sitio es recomendable descargar la versióncomprimida que tiene un peso de 20 Kb.Calle 37 a N° 6-28 Conjunto Residencial Villa teresa Tel 264 29 67 – 260 87 30 Cel.: 317 469 3642 – 311 202 3040. Ibagué / Tolima.
  9. 9. La librería jQuery en resumen nos aporta las siguientes ventajas: • Nos ahorra muchas líneas de código. • Nos hace transparente el soporte de nuestra aplicación para los navegadores principales. • Nos provee de un mecanismo para la captura de eventos. • Provee un conjunto de funciones para animar el contenido de la página en forma muy sencilla. • Integra funcionalidades para trabajar con AJAX.11. Realizar las prácticas del archivo Practicas.docx según distribución del instructor.Se anexa link del micrositio http://gestandoideasemprendedoras.webuda.com/12. Aplicar JavaScript a su sitio web elaborado en HTML. Describir el objetivo del código utilizadoen su web.En el sitio web se utiliza JavaScript en las imágenes de rotacion (sliders).En la parte superior cada ves que se de click con el botón izquierdo del Mouse, se cambia lasdiferentes noticias. Y en la parte inferior también se encuentra el otro slider de la normatividad. Seencuentra otro slider de noticias minima que muestra las noticias una a una cada noticiaautomáticamente.Calle 37 a N° 6-28 Conjunto Residencial Villa teresa Tel 264 29 67 – 260 87 30 Cel.: 317 469 3642 – 311 202 3040. Ibagué / Tolima.

×