RESUMEN LIBRO SAMS TEACH YOURSELF JAVASCRIPT IN 24 HOURS

MASTER EN DIRECCION E INGENIERIA DE SITIOS WEB

ASIGNATURA: COMPUTACION EN EL CLIENTE WEB

PRESENTADOR POR: IVAN JAHIR CASTAEDA PARRA

PRESENTADO A: DR JUAN MANUEL CUEVA LOVELLE

BOGOT - COLOMBIA 1 DE MAYO de 2011

TABLA DE CONTENIDO

GENERALIDADES DE JAVASCRIPT ...................................................................... 3

Aplicaciones de Javascript.............................................................................................. 3 Orden en que se ejecuta JavaScript dentro de HTML .............................................. 4

PROGRAMACION CON JAVASCRIPT .................................................................... 4

1. 2. 3. Operadores JavaScript ..................................................................................................... 4 Uso De Variables ................................................................................................................ 4 Tipos De Datos En Javascript ......................................................................................... 4

Funciones Para Arrays ............................................................................................. 7 Operadores Condicionales ...................................................................................... 7 Estructuras De Control De Flujo ............................................................................. 7 Bucles ......................................................................................................................... 8 Comprender El Modelo De Objeto De Documento ( Dom ) ................................. 8 Acceso A Historiales De Navegacin ..................................................................... 9 Propiedades De Formularios Y Elementos ........................................................... 9 Control De Windows Con Objetos ........................................................................ 11 Mostrar datos de un formulario ................................... Error! Marcador no definido. DEPURAR APLICACIONES DE JAVASCRIPT ..................................................... 11
Mediante Buenas Prcticas De Programacin ................................................................. 11

CONCLUSIONES ..................................................................................................... 12

GENERALIDADES DE JAVASCRIPT

JavaScript fue desarrollado por Netscape Communications Corporation; fue el primer lenguaje de secuencias de comandos en introducirse en la Web, y es todava el ms popular. JavaScript es casi tan fcil de aprender como HTML, y puede incluirse directamente en documentos HTML . Aqu hay algunas de las cosas que puede hacer con JavaScript:

Agregar mensajes de desplazamiento o cambiantes a la lnea de estado del navegador. Validar el contenido de un formulario y hacer clculos. (Por ejemplo, un formulario de pedido puede mostrar automticamente un total al entrar las cantidades de artculo.) Mostrar mensajes al usuario, ya sea como parte de una pgina Web o en los cuadros de alertas. Animar imgenes o crear imgenes que cambian cuando se mueve el ratn sobre ellas. Crear anuncios que interactan con el usuario, en lugar de simplemente mostrar un grfico. Detectar el navegador en uso y mostrar contenido diferente para distintos navegadores. Detectar instala plug-ins y notificar al usuario si un plug-in es necesario.

JavaScript admite tres tipos de objetos: Objetos integrados: Son objetos d el lenguaje JavaScript. Objetos del navegador: son objetos que representan los diversos componentes del explorador y el documento HTML actual. Por ejemplo, la funcin de alert() Objetos Cust om: son objetos que haya creado. Por ejemplo, puede crear un objeto de una persona

En la mayora de los casos, no debe especificar una versin de JavaScript en absoluto. Esto permite ejecutar la secuencia de comandos en todos los exploradores que admiten JavaScript. Slo debe especificar una versin determinada cuando la secuencia de comandos utiliza funciones que no estn disponibles en versiones anteriores. Existen diferentes alternativas que se pueden tomar en lugar de Javascript como Java, ActiveX, VBScript y CGI.

Aplicaciones de Javascript

Mientras que los programas JavaScript tradicionalmente se ejecutan dentro de un navegador Web; hoy por hoy es cada vez ms popular en otras aplicaciones. A continuacin se enuncian algunos ejemplos: Macromedia Dreamweaver, utilizado para aplicaciones Web y multimedia, puede ampliarse con JavaScript. Existen varias versiones de servidor de JavaScript. Estas se ejecutan dentro de un servidor de Web en lugar de un navegador. Soporte de Windows Scripting Host ( WSH) de Microsoft JScript, implementacin de JavaScript, como un lenguaje de secuencias de comandos de Windows de Microsoft. Lamentablemente, las aplicaciones ms populares desarrolladas para WSH hasta ahora han sido los virus de correo electrnico.

Orden en que se ejecuta JavaScript dentro de HTML

Primero se gestionan conjuntos de etiquetas de <script> dentro de la seccin <head> de un documento HTML. Dado que estas secuencias de comandos no pueden crear una salida en la pgina Web, es un buen lugar para definir funciones para su uso posterior. Conjuntos de etiquetas de <script> dentro de la seccin <body> del documento HTML se ejecutan despus de los de la seccin de <head> , mientras que la pgina Web carga y muestra. Si hay ms de una secuencia de comandos en el cuerpo, las secuencias se ejecutan en orden. Los controladores de eventos se ejecutan cuando ocurren los eventos. Por ejemplo, el controlador de eventos onLoad se ejecuta cuando se carga el cuerpo de una pgina Web. Desde la seccin <head> se carga antes de los eventos, puede definir funciones all y utilizarlos en los controladores de eventos. PROGRAMACION CON JAVASCRIPT 1. Operadores JavaScript 2. + (suma,concatena),- (resta), * ( multiplica ), / ( divide), %( modulo ), ++ ( incremento ), -- ( decremento ).

Uso De Variables

Existen reglas especficas que debe seguir al elegir un nombre de variable: El Nombre de una variable puede incluir letras del alfabeto, ambos superior - y minsculas. Tambin puede incluir la 0 9 dgitos y el carcter de subrayado (_). El Nombre de una variable no puede incluir espacios o cualquier otro caracter de puntuacin. El primer carcter del nombre de la variable debe ser una letra o un carcter de subrayado. El Nombre de una variable distingue maysculas de minsculas No hay ningn lmite oficial sobre la longitud de los nombres de variables, pero deben caber dentro de una lnea.

3.

Tipos De Datos En Javascript

En JavaScript, no es necesario especificar un tipo de datos en la mayora de los casos; estos son los tipos de datos bsicos de JavaScript: Nmeros, como por ejemplo 3, 25o 1.4142138. JavaScript admite enteros y nmeros de coma flotante. Booleano, o valores lgicos. stos pueden tener uno de dos valores: true o false. Cadenas. Se trata de uno o ms caracteres de texto.

4.

Funciones Para Cadenas De Texto length, calcula la longitud de una cadena de texto (el nmero de caracteres que la forman) var mensaje = "Hola Mundo"; var numeroLetras = mensaje.length; // numeroLetras = 10 +, se emplea para concatenar varias cadenas de texto

Las cadenas de texto tambin se pueden unir con variables numricas: var variable1 = "Hola "; var variable2 = 3; var mensaje = variable1 + variable2; // mensaje = "Hola 3" Cuando se unen varias cadenas de texto es habitual olvidar aadir un espacio de separacin entre las palabras: var mensaje1 = "Hola"; var mensaje2 = "Mundo"; var mensaje = mensaje1 + mensaje2; // mensaje = "HolaMundo"

Los espacios en blanco se pueden aadir al final o al principio de las cadenas y tambin se pueden indicar forma explcita: var mensaje1 = "Hola"; var mensaje2 = "Mundo"; var mensaje = mensaje1 + " " + mensaje2; // mensaje = "Hola Mundo" toUpperCase(), transforma todos los caracteres de la cadena a sus correspondientes caracteres en maysculas: var mensaje1 = "Hola"; var mensaje2 = mensaje1.toUpperCase(); // mensaje2 = "HOLA" toLowerCase(), transforma todos los caracteres de la cadena a sus correspondientes caracteres en minsculas: var mensaje1 = "HolA"; var mensaje2 = mensaje1.toLowerCase(); // mensaje2 = "hola" charAt(posicion), obtiene el carcter que se encuentra en la posicin indicada: var mensaje = "Hola"; var letra = mensaje.charAt(0); // letra = H letra = mensaje.charAt(2); // letra = l

indexOf(caracter), calcula la posicin en la que se encuentra el carcter indicado dentro de la cadena de texto. Si el carcter se incluye varias veces dentro de la cadena de texto, se devuelve su primera posicin empezando a buscar desde la izquierda. Si la cadena no contiene el carcter, la funcin devuelve el valor -1: var mensaje = "Hola"; var posicion = mensaje.indexOf('a'); // posicion = 3 posicion = mensaje.indexOf('b'); // posicion = -1

Su funcin anloga es lastIndexOf():

lastIndexOf(caracter), calcula la ltima posicin en la que se encuentra el carcter indicado dentro de la cadena de texto. Si la cadena no contiene el carcter, la funcin devuelve el valor -1: var mensaje = "Hola"; var posicion = mensaje.lastIndexOf('a'); // posicion = 3 posicion = mensaje.lastIndexOf('b'); // posicion = -1

La funcin lastIndexOf() comienza su bsqueda desde el final de la cadena hacia el principio, aunque la posicin devuelta es la correcta empezando a contar desde el principio de la palabra.

substring(inicio, final), extrae una porcin de una cadena de texto. El segundo parmetro es opcional. Si slo se indica el parmetro inicio, la funcin devuelve la parte de la cadena original correspondiente desde esa posicin hasta el final: var mensaje = "Hola Mundo"; var porcion = mensaje.substring(2); // porcion = "la Mundo" porcion = mensaje.substring(5); porcion = mensaje.substring(7); // porcion = "Mundo" // porcion = "ndo"

Si se indica un inicio negativo, se devuelve la misma cadena original: var mensaje = "Hola Mundo"; var porcion = mensaje.substring(-2); // porcion = "Hola Mundo" Cuando se indica el inicio y el final, se devuelve la parte de la cadena original comprendida entre la posicin inicial y la inmediatamente anterior a la posicin final (es decir, la posicin inicio est incluida y la posicin final no): var mensaje = "Hola Mundo"; var porcion = mensaje.substring(1, 8); // porcion = "ola Mun" porcion = mensaje.substring(3, 4); // porcion = "a"

Si se indica un final ms pequeo que el inicio, JavaScript los considera de forma inversa, ya que automticamente asigna el valor ms pequeo al inicio y el ms grande al final: var mensaje = "Hola Mundo"; var porcion = mensaje.substring(5, 0); // porcion = "Hola " porcion = mensaje.substring(0, 5); // porcion = "Hola "

split(separador), convierte una cadena de texto en un array de cadenas de texto. La funcin parte la cadena de texto determinando sus trozos a partir del carcter separador indicado: var mensaje = "Hola Mundo, soy una cadena de texto!"; var palabras = mensaje.split(" "); // palabras = ["Hola", "Mundo,", "soy", "una", "cadena", "de", "texto!"];

Con esta funcin se pueden extraer fcilmente las letras que forman una palabra: var palabra = "Hola"; var letras = palabra.split(""); // letras = ["H", "o", "l", "a"] Funciones Para Arrays A continuacin se muestran algunas de las funciones ms tiles para el manejo de arrays: length, calcula el nmero de elementos de un array var vocales = ["a", "e", "i", "o", "u"]; var numeroVocales = vocales.length; // numeroVocales = 5

join(separador), es la funcin contraria a split(). Une todos los elementos de un array para formar una cadena de texto. Para unir los elementos se utiliza el carcter separador indicado var array = ["hola", "mundo"]; var mensaje = array.join(""); // mensaje = "holamundo" mensaje = array.join(" "); // mensaje = "hola mundo"

Operadores Condicionales Hay disponible una variedad de operadores condicionales:

== (es igual a), ! = (no es igual a), < (es menor), > (es mayor), > = (es mayor o igual a), < = (es menor o igual a)

Estructuras De Control De Flujo Estructura if...else if(condicion) { ... } else { ... } Estructura switch where = prompt("Where do you want to go today?"); switch (where) { case "Netscape" : window.location="http://www.netscape.com/"; break; case "Microsoft" : window.location="http://www.microsoft.com/"; break;

Bucles Estructura While while (total < 10) { n++; total += values[n]; } } Estructura for for(var i = 0; i < 5; i++) { alert(mensaje); Esructura do..while do { n++; total += values[n]; } while (total < 10);

Comprender El Modelo De Objeto De Documento ( Dom ) Cuando se hace referencia a un objeto, utilice el nombre del objeto principal seguido del nombre de objeto de hijo o nombres, separados por puntos. Por ejemplo, JavaScript almacena objetos para representar imgenes en un documento como hijos del objeto document . El siguiente refiere al objeto image9 , un hijo del objeto document , que es un elemento secundario del objeto window : window.document.image9

ventana es el objeto principal para todos los objetos La siguiente figura muestra esta seccin de la jerarqua de objetos DOM y una variedad de sus objetos
El objeto

La jerarqua de objetos del navegador de JavaScript.

Acceso A Historiales De Navegacin El objeto de la historia es otro hijo (propiedad) del objeto window. Este objeto contiene informacin acerca de las direcciones URL que han visitado antes y despus de la actual, y incluye mtodos para ir a lugares anteriores o siguientes. El objeto de la historia tiene una propiedad que puede tener acceso: History.Length realiza un seguimiento de la longitud de la lista de historial: en otras palabras, el nmero de ubicaciones diferentes que el usuario ha visitado. El objeto de la historia tiene propiedades actual, anterior y siguiente que almacenan las direcciones URL de documentos en la lista de historial. Sin embargo, por razones de seguridad, estos objetos no son normalmente accesibles en los navegadores de hoy. El objeto de la historia tiene tres mtodos que puede utilizar para desplazarse por la lista de historial: History.go() abre una direccin URL de la lista de historial. Para utilizar este mtodo, hay que especificar un nmero positivo o negativo entre parntesis. Por ejemplo, history.go(-2) equivale a presionar el botn atrs dos veces. History.back()carga la URL anterior en la lista de historial, equivalente a presionar el botn atrs. History.forward()carga la siguiente URL en la lista de historial, si est disponible. Esto equivale a presionar el botn Reenviar.

Propiedades De Formularios Y Elementos JavaScript dispone de numerosas propiedades y funciones que facilitan la programacin de aplicaciones que manejan formularios. En primer lugar, cuando se carga una pgina web, el navegador crea automticamente un array llamado forms y que contiene la referencia a todos los formularios de la pgina. Se puede acceder a los formularios de una pgina a travs de su nombre (atributo name) o a travs de su atributo id. El objeto document permite acceder directamente a cualquier formulario mediante su atributo name: var formularioPrincipal = document.formulario; var formularioSecundario = document.otro_formulario;

<form name="formulario" > ... </form>

<form name="otro_formulario" > ... </form>

Accediendo de esta forma a los formularios de la pgina, el script funciona correctamente aunque se reordenen los formularios o se aadan nuevos formularios a la pgina. Los elementos de los formularios tambin se pueden acceder directamente mediante su atributo name: var formularioPrincipal = document.formulario; var primerElemento = document.formulario.elemento; <form name="formulario"> <input type="text" name="elemento" /> </form> Obviamente, tambin se puede acceder a los formularios y a sus elementos utilizando las funciones DOM de acceso directo a los nodos. El siguiente ejemplo utiliza la habitual funcin document.getElementById() para acceder de forma directa a un formulario y a uno de sus elementos: var formularioPrincipal = document.getElementById("formulario"); var primerElemento = document.getElementById("elemento"); <form name="formulario" id="formulario" > <input type="text" name="elemento" id="elemento" /> </form> Independientemente del mtodo utilizado para obtener la referencia a un elemento de formulario, cada elemento dispone de las siguientes propiedades tiles para el desarrollo de las aplicaciones: type: indica el tipo de elemento que se trata. Para los elementos de tipo <input> (text, button, checkbox, etc.) coincide con el valor de su atributo type. Para las listas desplegables normales (elemento <select>) su valor es select-one, lo que permite diferenciarlas de las listas que permiten seleccionar varios elementos a la vez y cuyo tipo es select-multiple. Por ltimo, en los elementos de tipo <textarea>, el valor de type es textarea. form: es una referencia directa al formulario al que pertenece el elemento. As, para acceder al formulario de un elemento, se puede utilizar document.getElementById("id_del_elemento").form name: obtiene el valor del atributo name de HTML. Solamente se puede leer su valor, por lo que no se puede modificar. value: permite leer y modificar el valor del atributo value de XHTML. Para los campos de texto (<input type="text"> y <textarea>) obtiene el texto que ha escrito el usuario. Para los botones obtiene el texto que se muestra en el botn.

Por ltimo, los eventos ms utilizados en el manejo de los formularios son los siguientes: onclick: evento que se produce cuando se da clic con el ratn sobre un elemento. Normalmente se utiliza con cualquiera de los tipos de botones que permite definir HTML (<input type="button">, <input type="submit">, <input type="image">). onchange: evento que se produce cuando el usuario cambia el valor de un elemento de texto (<input type="text"> o <textarea>). Tambin se produce cuando el usuario selecciona una opcin en una lista desplegable (<select>). Sin embargo, el evento slo se produce si despus de realizar el cambio. onfocus: evento que se produce cuando el usuario selecciona un elemento del formulario.

10

onblur: evento complementario de onfocus, ya que se produce cuando el usuario ha deseleccionado un elemento por haber seleccionado otro elemento del formulario. Tcnicamente, se dice que el elemento anterior "ha perdido el foco".

Control De Windows Con Objetos Puede crear una nueva ventana del explorador con el mtodo de Window.Open . Una declaracin tpica para abrir una nueva ventana tiene el siguiente aspecto: WinObj=window.open("URL", "WindowName", "Feature List"); Los componentes de la declaracin de Window.Open son los siguientes:

La variable de WinObj se utiliza para almacenar el nuevo objeto de ventana . Puede tener acceso a mtodos y propiedades del nuevo objeto mediante este nombre. El primer parmetro del mtodo Window.Open es una direccin URL, que se cargarn en la nueva ventana. Si se deja en blanco, no se cargar ninguna pgina Web. El segundo parmetro especifica el nombre de un ventana (aqu, WindowName). Esto se asigna a la propiedad de nombre del objeto de la ventana y se utiliza para referirse a la ventana. El tercer parmetro es una lista de caractersticas opcionales, separados por comas. Puede personalizar la nueva ventana, elija si desea incluir la barra de herramientas, lnea de Estado y otras caractersticas. Esto permite crear una variedad de windows "flotantes", que puede parecer nada una ventana de navegador tpico.

Las caractersticas disponibles en el tercer parmetro del mtodo Window.Open incluyen ancho y altura, para establecer el tamao de la ventana y varias caractersticas que se pueden establecer en s (1) o no (0): barra de herramientas, ubicacin, directorios, Estado, barra de mens, barras de desplazamientoy puede cambiar de tamao. Para ver slo las caractersticas que desea cambiar el valor predeterminado. Este ejemplo crea una ventana pequea con ninguna lnea de la barra de herramientas o estado: SmallWin = window.open("","small","width=100,height=120,toolbar=0,status=0");

DEPURAR APLICACIONES DE JAVASCRIPT Mediante Buenas Prcticas De Programacin Aqu se enuncian algunos buenos hbitos para mejorar las secuencias de comandos JavaScript: Usar espaciado uniforme y nombres de variables que significan algo. Es difcil determinar lo que est mal con una secuencia de comandos cuando an no puede recordar lo que hace una lnea determinada. Del mismo modo, utilice en JavaScript comentarios generosos para documentar la secuencia de comandos. Esto ayudar si necesita trabajar en el programa nuevamente o si otra persona hereda el trabajo. Poner fin a todas las declaraciones de JavaScript con punto y coma. Aunque es opcional, hace la secuencia de comandos ms legible. Adems, puede ser de ayuda del navegador para generar mensajes de error significativo.

11

Declarar todas las variables con la palabra clave var. Esto es opcional en la mayora de los casos, pero ayudar a asegurarse de que realmente quiere crear una nueva variable y evitar problemas con el mbito de las variables. Dividir complicadas secuencias de comandos en funciones. Esto har que la secuencia de comandos sea fcil de leer, y tambin resultar fcil de identificar la causa de un problema. Escribir un script grande en varias fases y probar la secuencia de comandos en cada fase antes de agregar ms caractersticas. De esta forma, puede evitar que nuevos errores aparezcan a la vez.

CONCLUSIONES

JavaScript es un lenguaje de programacin que sirve para mejorar el aspecto y la funcionalidad de una pgina web; es decir para crear pginas web dinmicas; una pgina web dinmica es aquella que incorpora efectos como texto que aparece y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de aviso al usuario. Con javascript se puede: Validar formularios: Comprobar que la informacin que de ha diligenciado en los campos de un formulario es valida. Realizar Clculos Matemticos simples o complejos Manejar efectos de animacin, imgenes; creacin de aplicaciones animadas como relojes, calculadoras etc.

JavaScript es un lenguaje de programacin interpretado, por lo que no es necesario compilar los programas para ejecutarlos. En otras palabras, los programas escritos con JavaScript se pueden probar directamente en cualquier navegador sin necesidad de procesos intermedios. JavaScript es un lenguaje con el cual se puede realizar casi cualquier tipo de mejora a nuestras pginas web; la limitante es nuestra imaginacin porque con la tecnologa que tenemos a nuestra disposicin es casi infinita la cantidad de posibilidades que nos ofrece.

12