Javascript para principiantes

JAVASCRIPT Es un lenguaje de script, script, es decir, es un lenguaje de programación programación cuyo código código se inserta dentro del documento HTML. Este código se ejecuta en el navegador del usuario al cargar la página, o cuando sucede algo especial (evento), como puede ser el pulsar sobre un enlace. Estos lenguajes permiten variar dinámicamente el contenido del documento, modificar el comportamiento normal del navegador, navegador, validar formularios, realizar pequeños trucos visuales, etc... El código JavaScript se inserta en html entre las etiquetas <script>. Por defecto, todo código entre esas etiquetas se interpreta como código JavaScript y se intenta ejecutar como tal. La etiqueta puede ir localizada en cualquier parte del documento, y tantas veces como necesitemos, pero nosotros, por organización, organización, sólo la introduciremos en la parte de HEAD escribiendo escribiendo aquí todo el código que necesitemos, o importando el fichero de extensión js donde esté este código. Posteriormente, cuando hagamos hagamos uso del JavaScript J avaScript no será necesario la utilización de la etiqueta. Como existen dos lenguajes de Script, JavaScript y VBScript, se debe establecer un

 parámetro dentro de de la etiqueta para evitar evitar la ambigüedad: ambigüedad: language=”JavaScript”. language=”JavaScript”.

Funciones Al agrupar la funcionalidad de los programas en funciones, se simplifica el código que introducimos en las páginas html, no teniendo que añadir a los eventos en las etiquetas más que unos pocos caracteres, en vez de todo el código. Además tiene otras ventajas:

• Minimiza errores, ya que concentra todo el código en un única parte de la página. • Estructura mejor el código. • El código es más fácil de entender y mantener. Para poder crear correctamente una función debemos de seguir dos pasos. Primero definir la función y segundo usar la función. La definición de una función tiene una estructura fija, y se tiene que hacer antes de usarla al comienzo de la cabecera de la página HTML. La estructura de la definición de una función es:

• function. Obligatorio y marca el comienzo de la definición. • Nombre. Obligatorio. Es cómo la l a usaremos posteriomente. • (), obligatorios, sin espacios con el nombre. • { obligatorio, comienzo del código javascipt. • ... código javascript que escribi remos nosotros. Por ejemplo: alert(....); • } obligatorio, fin de la definición y del código. Se pueden definir tantas funciones como queramos siempre que respetemos la estructura y no repitamos el nombre. Una vez definida la función hay que usarla. Ya hemos dicho qué es el DHTML y los eventos, por tanto para usarla tendremos que capturar un evento, es decir dar respuesta a un suceso que ha ocurrido. Para ello, dentro de la etiqueta que queramos controlar, escribiremos el evento que deseemos programar, asociándole asociándole el código (utilizando el nombre de la función). Por ejemplo: Se ha capturado el evento clic de la etiqueta en concreto de un botón. Hay que tener cuidado, y ver como la llamada a la función se hace desde un atributo, siendo necesario guardarla entre comillas dobles (") o simples (').

OBJETOS En programación, un objeto es una estructura compuesta por propiedades y por métodos. Una propiedad es un valor que contiene el objeto, un método es una parte de código que realiza alguna función. Por ejemplo, el objeto PuntoGráfico, tendrá dos propiedades: X e Y como coordenadas del punto. Y añadirá un método Dibujar() para mostrar dicho punto en la pantalla. Se puede diferenciar fácilmente unos de otros ya que los métodos siempre llevarán paréntesis después del nombre. Para acceder a un método o propiedad, usamos la nomenclatura de: NombreObjeto.NombrePropiedad o NombreObjeto.NombreMétodo(). Se utiliza el punto (.) como separador. Por ejemplo: window.open('http://www.boe.es');

window → objeto. . → separador. open → nombre del método. ( → obligatorio ya que es un método, una función. 'http://...' → parámetro que se pasa al método open, en este caso una cadena. ) → obligatorio, fin de la llamada al método. window.location

window → objeto. . → separador. location → propiedad que indica la página HTML cargada en el navegador. Ejemplos de uso de objetos HTML <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script language="javascript">function Mostrar(){alert(document.form1.txtTexto.value);} Uso de propiedades de objetos de un formulario

Origen:

El uso de los objetos se hace en document.form1.txtTexto.value.

• document. Objeto del navegador. • Form1. Formulario dentro de la página con nombre For m1. • txtTexto. Campo de texto dentro del formulario. • value. Propiedad que contiene el valor de la caja de texto. Como podemos ver los objetos se pueden anidar unos dentro de otros como propiedades. form1 es una propiedad de document, pero a su vez es un nuevo objeto que tiene una propiedad txtTexto que es el objeto caja de texto, con una propiedad llamada value en donde está el texto tecleado por el usuario.

OBJETOS DEL LENGUAJE

Fechas El objeto Date nos da acceso a todo lo que necesitamos para el control de fechas. Para crear una variable del tipo Date tenemos que usar: var miFecha = new Date() Después con sus métodos accederemos a toda la información de fecha:

• getTime(), getYear(). Devuelven la hora y el año en formato corto • getFullTime(), getFullYear(). Devuelven la hora y el año en formato completo. • getMonth(), getDate(), getHours(), getMinutes(), getSeconds(). Devuelven el mes, día, hora, minuto y segundo de la fecha.

• getDay(). Devuelve el día de la semana, empezando en domingo (0) hasta sábado (6). Por ejemplo: alert(miFecha.getFullYear()); Cadenas Toda variable que contiene una cadena es un objeto cadena, y da acceso a un conjunto de propiedades y métodos característicos de las cadenas.

• charAt(Numero). Carácter de la posición Número empezando desde cero • indexOf(Cadena). Posición de Cadena dentro del origen. • Concat. Concatena, en su lugar se utiliza el operador +. • substr(indice, longitud). Devuelve la subcadena desde la posición índice con longitud caracteres. Los índices comienzan desde cero.

• toLowerCase. Convierte a minúsculas la cadena. • toUpperCase. Convierte a mayúsculas la cadena. Ejemplo: var cad = “Hola”; function ff(){ alert(cad.charAt(3)); // "a" alert(cad.indexOf('ol')); //1 alert(cad + " ABC"); //"Hola ABC" alert(cad.substr(1,2)); //"ol" alert(cad.toUpperCase()); //"HOLA"} Funciones varias No pertenecen a ningún objeto y se pueden utilizar tal cual, sin punto: • parseInt(cadena,base). Convierte una cadena numérica a un número en su correspondiente base.

Ejemplo. parseInt(“A0B00”,16); • parseFloat(cadena). Convierte la cadena a número real. Ejemplo: parseFloat(“2.54”); • Number(Cadena). Convierte la cadena a número. Ejemplo. Number(txtValor.value); • String(objeto). Convierte cualquier objeto a una cadena. Ejemplo String(miVar); • isNaN(numero). Comprueba si número existe. • isFinite(numero). Comprueba si el número no es infinito. Objeto matemáticos Una de las operaciones más frecuentes que realizaremos en la programación es la utilización de funciones matemáticas avanzadas (seno:sin, coseno:cos, tangente:tan, etc...). En JavaScript existe un objeto que recoge todas ellas, el objeto Math. Se puede usar directamente sin crear ninguna variable. Por ejemplo: Math.cos(34); Math.abs(txtNum.value);

OBJETOS DEL NAVEGADOR Estos objetos dan acceso a todas las características y elementos presentes en el navegador. Objeto window Representa la ventana actual del navegador, está al más alto nivel y es el objeto más utilizado. Como es el objeto por defecto, no hay que escribirlo para acceder a sus propiedades o métodos.

• alert(“Texto”) Muestra un mensaje de texto en una ventana. • open(url,nombre,prop) Abre una nueva ventana con la url cargada, cuyo nombre será nombre y con las propiedades especificadas en prop separadas por punto y coma . Las posibles propiedades son de dos tipos, booleanas y de tamaño. Las booleanas mostrarán la correspondiente característica si están a yes. Dentro de las primeras tenemos

• toolbar=yes. Barra de herramientas. • location=yes. Barra de direcciones. • directories=yes; Barra de directorios. • status=yes. Barra de estado inferior. • menubar=yes. Barra de menús. • scrollbars=yes. Barras de desplazamiento. • resizable=yes. Se puede cambiar el tamaño. De tamaño

• width=”tamaño”. Anchura de la ventana. • height=”tamaño”. Altura de la ventana. • close() Cierra la ventana. • confirm(“Pregunta”) Presenta un diálogo del tipo Ok / Cancel y devuelve verdadero o falso en función de lo que pulse el usuario.

• prompt(“msg”,”val”) Presenta un diálogo de petición de datos, con el mensaje presente en msg y con la caja de texto rellena con val. Devuelve el contenido de la caja de texto.

• status Propiedad que permite escribir en la barra de estado. • setTimeout(“func()”,tmp): El navegador llamara a la función func() después de tmp segundos. • frames[“nombre” ó inx]: Acceso a los marcos creados. Se puede utilizar el nombre dado al marco en su propiedad name o un índice que comienza en cero.

• top Propiedad que da acceso a la ventana padre. • document Acceso al objeto document.

Objeto document Da acceso al cuerpo de HTML.

• Forms[] Array que contiene todos los formularios de la página. Se accede por índice correspondiendo a cero el primero que se define. También podemos usar el formulario por nombre (name) desde el propio objeto document. Por ejemplo: document.form1. • images[] Array con todas las imágenes de la página ()

• links[] Array con todos los enlaces de la página (). • location Objeto que contiene la url de la página actual. • history Objeto que da acceso a la historia de páginas visitadas. • write(“textoHtml”) Sustituye el contenido HTML de la página por el texto HTML que introduzcamos la primera vez que se use la función, el resto de veces añade al texto HTML creado con write o writeln. • writeln(“textoHtml”); Como write pero añade un salto de línea al final, que no influye en el HTML pero si en la visualización

• close() Termina la escritura (write o writeln) en la página. Esta función sólo se llamará una vez hayamos terminado de hacer todas las llamadas write o writeln que necesitemos.

Objeto location Da acceso a la Url de la página.

• href Url de la página, si cambiamos su contenido el navegador visualizará el nuevo contenido. • protocol Protocolo de la url actual (por ejemplo http) • host Parte de la url que tiene el nombre y el dominio. • pathname Ruta de la url después del host • search Devuelve la cadena después de ? En las llamadas GET a las páginas.

Objeto images Da acceso a las imágenes de la página. Cada elemento tiene las siguientes propiedades: • src Url de la imagen que se muestra, si se cambia, se cambiará la imagen.

• lowsrc La Url de la imagen a baja resolución. Ejemplo: document.images[2].src=”/images/img1.gif”;

Objeto form Bien por nombre, bien por el Array Forms, cada form da acceso a: • submit() Envía el f ormulario, como pulsar el botón.

• reset() Vacía todos los campos del formulario. • elements[] Array con todos los objetos del formulario, se puede acceder por índice, o por el nombre del objeto de la propiedad name. Por ejemplo: document.form1.txtNombre.value Objeto CheckBox y Radio Button

• checked Seleciconada o no. • value Valor de la seleccionada

Objeto Text Etiqueta input

• name Nombre del objeto. • type Tipo de elementos de la etiqueta input. • value Valor en el objeto. Ejemplo: document.forms[0].txtNombre.value=”ABC”;

Objeto select • selectedIndex Índice de la opción seleccionada, empezando desde cero y -1 si no hay ninguno. • options[] Array que da acceso a todos los elementos de la lista. Se puede acceder por índice a la lista o por nombre. Cada elemento tiene a su vez.

• selected, indica si la opción está seleccionada. • text. Para el texto que se muestra. • value. Para el valor que se devolverá. Ejemplo <script ...> function irA(){ if (document.form1.menu.selectedIndex>-1){ window.open(document.form1.menu.options[document.form1.menu.selectedIndex].value); } } ....

.....

Objeto history Da acceso las páginas visitadas

• back() Mueve hacia atrás una página. Su efecto es el de pulsar en el botón del navegador “atrás”. • fordward() Se adelante en uno. Su efecto es el de pulsar en el botón del navegador “adelante”. • go(NumEntero) Adelanta NumEntero la visualización. Positivos avanza y negativos retrocede.

Objeto screen Propiedades de la pantalla.

• height Altura en píxeles

• width Anchura en píxeles • pixelDepth Profundidad de color de la pantalla en bits

Objeto navigator Da acceso a las características específicas del navegador.

• appName Nombre del ejecutable. • appVer Versión del ejecutable. • language Lenguaje por defecto que tiene configurado el navegador formato es-ES30 en Netscape y firefox.

• browserLanguage Como language para Microsoft • plataform SSOO en el que se está ejecutando el navegador.

COOKIES Una cookie 1es una cadena de texto que se guarda en el navegador del visitante y a la que tendremos acceso desde JavaScript. El qué guardemos y qué uso le demos queda en manos del programador. Generealmente a la cookie se le proporciona una fecha límite de espiración después de la cual se borrará del navegador. El formato de la cadena es el siguiente: nombre=valor;[expires=fecha_hora_GMT]

• nombre, lo utilizaremos para distinguirla de otras que hayamos instalado en el mismo navegador.

• valor, el texto guardado. • fecha_hora_GMT, el momento de espiración en formato GMT, o en horario del Meridiano 0, en España tenemos una hora más en invierno (GMT+1) y dos en verano (GMT+2). Una vez que sabemos cómo se forma la cadena, tendremos que guardarla, y posteriormente recogerla:

• document.cookie=cadena, para almacenarla • var=document.cookie.indexOf(“nombre”)>-1, para detectar si está instalada • document.cookie[índice], para acceder a la cadena. Ejemplo function mandar(nombre,valor,caducidad){

document.cookie=nombre + “=” + escape(valor) + ((caducidad == null) ? “”: (“; expires=” + caducidad.toGMTString()))) } function recoger(nombre){

var buscamos=nombre + “=”; if (document.cookie.length>0){ i= document.cookie.indexOf(buscamos) if (i!=-1){ //encontrada i+=buscamos.legth //recoger valor a partir del nombre=  j=document.cookie.indexOf(“;”,i)//buscar el final de los datos if (j==-1)  j=document.cookie.length; //está al final return unescape(document.cookie.substring(i,j)); } } }

EVENTOS Se llama DHTML a la posibilidad por parte del HTML de generar eventos en tiempo de ejecución. Un evento es una notificación por parte del explorador de que ha pasado algo en alguna parte. Un evento, por ejemplo, se generará cuando hacemos clic en un botón, o cuando la página se ha cargado completamente, etc... Los eventos se generan en las etiquetas de las páginas.

HTML no es un lenguaje de programación, por lo que no tiene posibilidad de programar los eventos. Para que se genere una respuesta a un evento, tenemos que capturarlo y asignarle código ejecutable. Dicho código en los navegadores modernos puede ser en dos lenguajes de script diferentes: JavaScript y VBScript. Nosotros utilizaremos JavaScript. Los eventos se asignan a etiquetas HTML, cada etiqueta puede tener capturado más de un evento y cada evento puede tener más de un comportamiento asociado. Los eventos dependen del navegador en el que estemos trabajando, aunque existen una serie de ellos que son comunes a todos. • onClick: al pulsar una vez sobre el elemento. • onDblClcik: al pulsar doblecilik sobre el mismo elemento en un breve periodo de tiempo. • onKeyDown / onKeyUp. Al pulsar/soltar una tecla • onKeyPress. Al presionar una tecla, se genera justo antes del onKeyUp. • onMuseDown / onMouseUp. Al pulsar / soltar un botón del ratón. • onMouseOut / onMouseOver. Al salir / pasar sobre un elmento con el puntero de ratón. • onAbort. Cuando se cancela desde el explorador la descarga de una página (botón cancel). • onError. Cuando se produce un error. • onLoad. Cuando se ha terminado de cargar la página, sólo en la etqieuta . • onResize. Cuando se cambia el tamaño de la ventana del navegador. • onUnload. Justo antes de cerrar la página en el navegador (nos cambiamos o l a cerramos). • onBlur. Cuando pierde el foco de texto. • onFocus. Cuando un elemento recoge el foco de texto25. • onReset. Cuando se borra un formulario, bien mediante javascipt, bien por el botón. • onSubmit. Al madar el formulario.

USOS TÍPICOS JAVASCRIPT Abrir ventana del navegador. Permite abrir una segunda ventana con características específicas y una Url especificada.

Cambio de una propiedad. Permite el cambio de cualquier propiedad (atributo) de una etiqueta si es de escritura. El efecto es el cambio en la presentación de la etiqueta. Por ejemplo, se puede cambiar una propiedad src de una etiqueta para forzar el cambio de la imagen que se visualiza. Este comportamiento es el más general. Primero se selecciona la etiqueta a cambiar, después nos mostrará una lista con todas las veces que la etiqueta se haya insertado para seleccionar cuál cambiar, a continuación elegiremos el atributo a cambiar y por último el valor. Comprobar navegador. Determina el navegador y la versión de éste, saltando a una de dos páginas en función del mismo. Ir a Url. Salto a otra página. Mensaje emergente. Abre una ventana con el texto que introduzcamos y el botón Aceptar. Validar formulario. Permite realizar ciertas acciones de validación con los campos de un formulario antes que se manden. Se puede determinar que un campo es obligatorio o no. Y hacer comprobaciones básicas sobre el contenido: si es número, dirección de correo o está entre dos valores. En caso que no se supere la validación mostrará un mensaje de alerta y no se mandará el formulario. En la lista superior aparecerán todos los campos del formulario con sus correspondientes nombres, siendo posible validar cada uno de ellos con comprobaciones diferentes.