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

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ó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.

3. 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.

4. 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.

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

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

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

8. 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.

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