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.

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 2012

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.

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 Forma s de e je cución de l código

2. 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 por pantalla.

La sentencia document.write (expresión_cadena) evalúa la expresión e imprime la cadena resultante por pantalla.

Las sentencias de salida pueden incluir varios argumentos separados por comas, lo que permite agrupar en una única sentencia varias instrucciones de salida de la siguiente forma [es opcional implementar 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.

document.write ("Hola, tienes ", 2002 - a, " años.") // Imprime una cadena, un entero y una cadena 3. 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 + ')'; }}

Argumentos

function 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 calculados

function 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 = 6

El operador de incremento se indica mediante el prefijo ++ en el nombre de la variable. El resultado es que el valor de esa variable se incrementa en una unidad. Por tanto, el anterior ejemplo es equivalente a: var numero = 5; numero = numero + 1; alert(numero); // numero = 6

De forma equivalente, el operador decremento (indicado como un prefijo -- en el nombre de la variable) se utiliza para decrementar el valor de la variable: var numero = 5; --numero; alert(numero); // numero = 4

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.

El anterior ejemplo es equivalente a:

var numero = 5; numero = numero - 1; alert(numero); // numero = 4

Los operadores de incremento y decremento no solamente se pueden indicar como prefijo del nombre de la variable, sino que también es posible utilizarlos como sufijo. En este caso, su comportamiento es similar pero muy diferente. En el siguiente ejemplo:

var numero = 5; numero++; alert(numero); // numero = 6

El 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 del identificador de la variable. Sin embargo, el siguiente ejemplo muestra sus diferencias: var numero1 = 5; var numero2 = 2; numero3 = numero1++ + numero2; // numero3 = 7, numero1 = 6 var numero1 = 5; var numero2 = 2; numero3 = ++numero1 + numero2; // numero3 = 8, numero1 = 6

5. Leer sobreestructuras de control; If, switch, while, Do while, For, For in, arrays. Explique mediante un ejemplo las estructuras For, while y array.

For Sintaxis: 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 for for (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>

While Sintaxis: 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.

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>

Array El 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 en Javascripthttp://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 al

elemento 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 contenidos

dentro 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 el

equivalente en PHP a implode().

FUNCIÓN4: SPLIT() USO:VAR ARRAY = STRING.SPLIT(STRING); Al igual que join(), split() también es un método del objeto 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.

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 de

ocasiones, Microsoft usa su propia implementación del DOM. Con este método añadiremos

eventos 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) y

clearInterval(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.

Conconfirm() haremos exactamente lo mismo, pero además obligará al usuario a seleccionar entre dos opciones, una positiva y otra negativa, que se devolverá como parámetro (boolean). Y con prompt() pediremos al usuario que introduzca un texto en una ventana modal.

confirm() es muy útil para confirmar clics en enlaces comprometidos, que hagan operaciones

críticas como eliminación de datos. 7. Explique cuando colocar código javascript en el head y en el body Depende el código si va a usar document.write para imprimir algo a su pagina, este tiene que estar en el body si funciones que va a estar llamando (para validar formulario por ejemplo) puede colocarlo en el head. 8. Desarrolle una presentación donde explique de manera sucinta los elementos que debe cumplir un 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ún estándares de calidad internacionales http://www.guiaweb.gob.cl/guia/archivos/Capitulo_III.pdf 9. Explique la importancia que hay con el termino DOM, realizar un diagrama de los elementos que lo componen.

El DOM es otra forma de ver el contenido de la página. Con el DOM, todos los elementos HTML se insertan en un árbol cuyos nodos son las marcas HTML y las hojas, los valores propiamente dichos de las marcas. Por medio de JavaScript podemos acceder y modificar este árbol de marcas y hacer que la página varíe luego que ya se haya mostrado en el navegador. De aquí el nombre de esta 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.

Mediante el DOM podemos acceder al contenido y estilo de cada marca del documento y modificarlo de acuerdo a algún evento. Mediante el DOM podemos insertar, borrar, modificar marcas 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 decir todo 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 modo simplificado.

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 cero puede 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 la aplicación. Otra ventaja paralela es despreocuparnos cuando codificamos en la compatibilidad de navegadores, 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 lo requiera 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ón comprimida 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.

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 utilizado en 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 las diferentes noticias. Y en la parte inferior también se encuentra el otro slider de la normatividad. Se encuentra otro slider de noticias minima que muestra las noticias una a una cada noticia automáticamente.