Introdução ao Javascript

Vista previa del material en texto

Manual Javascript
Manual de iniciación a javascript 
Introducción.
Es un lenguaje de programación utilizado para crear pequeños programas encargados de realizar acciones dentro del
ámbito de una página WEB. Con Javascript podemos crear efectos especiales en las páginas e interactividades con
el usuario.
Es el navegador cliente el encargado de interpretar y ejecutar las órdenes Javascript, ya que es un lenguaje cliente (se
transmiten las instrucciones para ser ejecutadas, no el resultado de la ejecución).
Las acciones típicas de Javascript se pueden clasificar en dos vertientes:
1. Efectos especiales, que nos van a permitir denotar cierto dinamismo a nuestras páginas web.
2. la capacidad de interacción con el usuario que nos permitirá crear páginas interactivas que incluso puedan contener
pequeños programas como calculadoras agendas o tablas de cálculo.
Javascript es un lenguaje con muchas posibilidades, permite la programación de pequeños SCRIPTS, pero también de
programas mas grandes orientados a objetos y con funciones y estructuras de datos complejos.
La diferencia con Java es que mientras que Javascript se ejecuta en e cliente, Java utilizaba la tecnología de los
APPLETS, que son pequeños programas que se incrustan en las páginas WEB y que pueden realizar acciones
generalmente asociadas a los lenguajes de programación de propósito general, cosa que HTML no permite.
Netscape y SUN MICROSYSTEM. Formaron una alianza para diseñar Javascript como un hermano pequeño de Java
pero mucho mas sencillo de utilizar, de forma que cualquier persona sin conocimientos profundos de programación
pudiese adentrarse en el lenguaje. Además no necesita de kit de desarrollo ni compilar sus SCRIPTS ni usar archivos
externos al HTML como si ocurría en Java, con lo cual esta facilidad de uso hizo que se extendiese rapidamente..
Javascript está disponible a partir de versiones 2.0 de Netscape y 3.0 de Explorer.
Para programar en Javascript basta con un editor de textos ASCII (bloc de notas) y un navegador compatible con
Javascript (Actualmente todos).
�Inserción de SCRIPT en HTML.
Hay que tener en cuenta que lo que queremos es mezclar 2 lenguajes de programación diferentes en el mismo
documento. Para conseguirlo bastará con que delimitemos mediante las etiquetas <SCRIPT></SCRIPT> todo el código
Javascript que deseemos incluir.
En la misma página podemos introducir varios SCRIPT siempre y cuando queden bien delimitados por sus etiquetas.
La colocación de estos SCRIPT en principio es indiferente se pueden colocar en cualquier lugar del documento.
NOTA: Habrá ocasiones en las que la posición del SCRIPT sea relevante o importante.
Hay dos maneras:
- Ejecución directa: se incluyen las instrucciones dentro de la etiqueta script y cuando el navegador lee la pagina va
ejecutando las líneas de código una a una.
- Respuesta a un evento: dentro de la etiqueta script prepararemos funciones que contendrán el código a ejecutar como
respuesta a un evento.
NOTA: para incluir archivos externos que contengan funciones Javascript necesitaremos usar un editor de textos sin
formato y guardar ese archivo de texto con las funciones en un archivo con extensión .js y con la siguiente sentencia lo
podremos enlazar para utilizarlo en nuestro código HTML.
 <script lenguaje=&rdquo;javascript&rdquo; xsrc=&rdquo;archivo_con_funciones.js&rdquo;></script>
Sintaxis Javascript.
1.- Comentarios
WEB INFORMATICA
http://www.webinformatica.org Potenciado por Joomla! Generado: 22 December, 2009, 15:57
Parte de código no interpretada por el navegador y cuya utilidad consiste en facilitar su lectura al programador. Hay 2
formas de incluir comentarios:
- // 2 barras para una linea
- /* asi */
2.- Mayúsculas y minúsculas.
Javascript es un lenguaje case sensitive, esto significa que distingue entre mayúsculas y minúsculas. Por norma
general es recomendable solo utilizar minusculas, no utilizar acentos y no dejar espacios en blanco.
NOTA: en algunas ocasiones veremos que en Javascript se utilizan nombre con la primera letra en mayúscula , esto
suele ocurrir cuando se utilizan clases
3.- Separación de instrucciones.
Javascript admite la separación de instrucciones mediante ; o el salto de linea. Si queremos escribir varias instrucciones
en la misma línea deberemos separarlas por &ldquo;;&rdquo;
 
NOTA: aunque no es obligatorio es recomendable separar las instrucciones Javascript con &ldquo;;&rdquo; para
acostumbrarnos al sistema de programación que utiliza otros lenguajes mas potentes como son Java o C, donde si es
obligatorio el uso de &ldquo;;&rdquo;.
Una variable es un espacio en memoria donde se guarda un dato. Este dato puede ser de cualquier tipo de información
que necesitemos
Los onmbres de las variables deben utilizar caracteres alfanuméricos y el unico carácter especial admitido es el
&ldquo;_&rdquo; y deben comenzar por &ldquo;_&rdquo; o carácter alfabético, pero no oueden comenzar por número.
NOTA: a toda costa de debe evitar utilizar nombres reservados por el sistema o por el lenguaje
4.1- Declaración de variables.
Declarar una variable consiste en definir e informar al sistema de una necesidad de reserva de espacio en memoria para
esa variable. Esto es obligatorio en la mayoría de los sistema de lenguajes de programación, pero en javascript no lo es.
Para declarar una variable: var nombrevariable.
Podemos asignar valor a la vez que definimos la variable: v ar=24
Podremos definir mas de una variable en la misma linea siempre y cuando las separemos pos &ldquo;,&rdquo;.
4.2.- Ambito de variables
El ámbito de una variable es donde esta está disponible. Hay 2:
- Ámbito global, toda la página
- Ámbito local, dentro de una función
<script>
 Var numero=7
 Function uno(){
 Var numero=123;
 Alert(numero);
 //impime 123
 }
 Function dos(){
 Alert(numero);
 //Imprime7
 }
</script>
NOTA: como norma general sino usamos var para declarar una variable esta estará declarada en ámbito global
4.3.- Contenido de las variables.
WEB INFORMATICA
http://www.webinformatica.org Potenciado por Joomla! Generado: 22 December, 2009, 15:57
Puede ser numérico (separador decimal el &ldquo;.&rdquo;). El texto deberá ir encerrado entre &ldquo;&rdquo;.
Tambien puede ser un booleano con sus dos casos; verdadero o falso.
Otros tio de contenido menos utilizado pueden ser una función un objeto un vacio, etc.
EJEMPLO: utilizando alert como respuesta a un botón mostrar por pantalla el resultado de sumar 2 numeros. Declarar 3
variables.
5.- Operadores Javascript
5.1.- Operadores aritméticos
 + - / 
 % &loz; resto de la división
 ++
 --
5.2.- Operadores de asignación.
 = += *= /= %=
5.3.- Operadores de cadenas.
 +
5.4.- Operadores lógicos.
¡ && ||
5.5.- Operadores Condicionales.
 ==
 !=
 >
 <
 >=
 <=
6.- Estructuras de control.
Para aumentar la complejidad o la potencia de nuestros Scripts vamos a necesitar estructuras que nos permitan hacer
cosas distintas dependiendo del valor de determinadas variables y que repitan muchas veces un proceso sujeto a una
serie de condiciones. Se dividen en 2 grandes apartados:
a. La toma de decisiones, que nos va a permitir tomar un camino u otro dependiendo del valor de unas variables
b. Bucles que nos facilitarían la repetición controlada mediante condiciones y una serie de acciones.
6.1.- IF
6.2.- Switch
6.3.- For
6.4.- while y do while
6.5.- Break y Contitue.
Como medida adicional para tomar el control dentro de un bucle, podremos utilizar la instrucción break, que lo que hace
es salirse en ese punto de la ejecución del bloque y continuar en la siguiente línea a la orden de finalización del bucle.
Si necesitásemos volver al inicio del bucle sin terminar de ejecutarse las últimas lineas de ese ciclo utilizaremos la
instrucción continue.
7.- FUNCIONES EN JAVASCRIPT.
Existen determinados procesos que se puedenconcebir de forma independiente y cuya resolución es mucho más
sencilla que el proceso completo. Además estos procesos mas sencillos generalmente se repiten mas de una vez para
llegar a una resolución global. Cuando esto ocurre se suelen crear funciones para cada uno de estos procesos en lo que
se conoce modularización del código.
WEB INFORMATICA
http://www.webinformatica.org Potenciado por Joomla! Generado: 22 December, 2009, 15:57
Una función es una serie de instrucciones que englobamos dentro de un mismo proceso, de hecho cada vez que
sacamos la hora del sistema o cambiamos el color o realizamos cualquier tarea estamos ejecutando funciones, ya que
además de las que escribamos nosotros tenemos todas las que pone a nuestra disposición el sistema.
Resumiendo, el uso de funciones se centra en 2 aspectos: 
1. usar las ya creadas del sistema.
2. usar las que previamente hayamos creado nosotros.
Function nombrefuncion(){
 &hellip;
 Instrucciones
 &hellip;
}
Para llamar a una función bastará con escribir su nombre desde el lugar que queramos que se ejecute.
7.1.- Parámetros de las funciones.
Los utilizaremos tanto para recibir como para devolver datos que serán los resultados de las operaciones de esas
funciones. Por norma general esos parámetros irán identificados o cargados en variables, las cuales utilizaremos en la
escritura de la definición de la función. Sin embargo para invocar o llamar esas funciones y pasarles valores de los
parámetros podremos hacerlo de 2 formas:
1. valores directos
2. varables
<script>
Function saludo(alert)
{
Alert(&ldquo;Hola&rdquo;+nombre+&rdquo;, bienvenido&rdquo;);
}
</script>
 
 Forma 1: saludo(&ldquo;anselmo&rdquo;);
 Forma 2: nombreusuario &dArr; base de datos
 Saludo(nombreusuario);
NOTA: podemos pasar mas de un parámetro en la misma función, basta con separar todos los que queramos poner
separados por &ldquo;,&rdquo;.
Cuando queramos que una función nos devuelva un valor de retorno deberemos incluir dentro de las instrucciones de la
función la sentencia return y el valor a devolver.
Function media(num1,num2){
 Var resultado;
 Resultado=(num1+num2)/2;
 Return resultado;
}
NOTA: una función solo devuelve un resultado simultáneamente pero admite mas de una cláusula return como
consecuencia de un proceso de toma de decisión.
8.- Arrays en javascript.
El primer paso para utilizar el array es crearlos (Esto si es necesario). Para crear un objeto array utilizaremos la
sentencia: var nombre_array = new Array(). Hay que respetar la sintaxis de la instrucción, en concreto la mayúscula del
Array ya que es un objeto creado a partir de una clase del sistema.
Esta sentencia crea un array en la página donde está ejecutandose, lo crea vacío, tanto de contenido como de
estructura, es decir, ni siquiera crea las celdas del array, para crearlo con la estructura predefinida utilizaremos var
nombre_del_vector= new Array(7). Esta sentencia crea un array vacío de 7 celdas. 
No obstante si necesitásemos dinámicamente en tiempo de ejecución más posiciones del vector (array) bastaría crear
la introducción de un dato, que produciría el mismo efecto.
WEB INFORMATICA
http://www.webinformatica.org Potenciado por Joomla! Generado: 22 December, 2009, 15:57
Para asignar valores a las diferentes posiciones de un vector utilizaremos la siguiente sentencia:
nombre_del_vector[0]=71
El índice del vector irá encerrado entre corchetes y comenzará en el 0, es decir, un array de 10 posiciones su índice irá
de 0 a 9.
NOTA: como es posible alterar el tamaño de un vector dinámicamente para saber en un momento determinado cual es
la longitud del vector utilizaremos la propiedad length
8.2 Array multidimensional.
Son estructuras de datos que almacenan información en más de una dimensión. En el caso de dimensión 2 es el ejemplo
típico de las tablas de doble entrada, es decir, organizadas en filas y columnas. En 3 dimensiones aun podríamos
hacernos una representación que nos facilitase su compresión, pero a partir de ahí es una mera representación numérica y
abstracta
Javascript no dispone de un objeto array multidimensional. Luego para solventar esta carencia deberemos simular 
arrays multidimensionales mediente arrays unidimensionales.
La estrategia es simple &ldquo;crearemos arrays de array&rdquo;
NOTA: cuando nosotros queramos que el código javascript escriba texto dentro del documento html utilizaremos el
método document.write. es mas uno de los propios textos que podemos escribir es codigo HTML.
8.3 Inicialización de Arrays
Se puede inicializar los array a la vez que los declaramos asignando valores
 Var diasemana = new Array(&ldquo;lunes&rdquo;&hellip;&rdquo;Domingo&rdquo;). Esto crearia un array de sieta
casillas indexadas del 0 al 6 y en orden 0= Lunes 6=Domingo
Es mas podemos utilizar este sistema para inicializar arrays bidimensionales
9.- Librería de funciones Javascript
Todos los lenguajes de programación disponen de una serie de librerías para la realización de tareas a menudo repetitivas
y que nos ahorran el trabajo de escribir funciones comunes a la hora de programar.
Javascript contiene una buena cantidad de funciones en sus librerías y mayoritariamente son métodos de los objetos del
sistema. Sin embargo hay funciones que no están asociadas a ningún objeto como son:
- eval(string): esta función recibe una cadena de caracteres y la escribe como una se cuencia de javascript
- parseInt(cadena, base): recibe una cadena y una base y lo que devuelve es el valor numérico de esta cadena en la
base especificada.
- parseFloat(cadena): convierte la cadena en un numero y lo devuelve (números decimales).
- isNaN(numero): el resultado de esta función es un bolean que devuelve TRUE si lo que le pasamos como argumento no
es un número y FALSE en caso contrario.
10.- Objetos en Javascript
Javascript no es un lenguaje orientado objetos aunque muchas veces los utiliza. Podemos incluso crear nuevos objetos,
pero lo mas normal será utilizar los que creemos básandonos en las clases del lenguaje.
Para crear un objeto a partir de una clase utilizaremos la instrucción: 
var miobjeto = new miClase()
Para acceder as las propiedades de un objeto miobjeto.propiedad.
Para ejecutar lanzar o acceder a los métodos de los objetos miobjeto.metodo1() se utilizará el punto como separador
pero indicamos con paréntesis que es un método.
En el caso de que el método necesite uno o mas parámetro para su ejecución se los pasaremos encerrados entre los
paréntesis y encerrados por &ldquo;,&rdquo;.
10.1.- Objetos incorporados en Javascript
WEB INFORMATICA
http://www.webinformatica.org Potenciado por Joomla! Generado: 22 December, 2009, 15:57
Vamos a empezar con el estudio de las clases predefinidas y contenidas en las librerías de Javascript.
10.1.1.- CLASE STRING EN JAVASCRIPT
Las variables de tipo texto son objetos de la clase string. Es decir a las valiables de texto que utilicemos podremos
aplicarle una serie de métodos predefinidos. Propiedades de string
length: esta es la única propiedades de la clase string y contiene el numero de caracteres de la cadena 
Métodos de la calase string.
.a Index Of(carácter,desde): este método devuelve la posición de la primera aparición del carácter indicado como
carácter en la cadena. Sino la encuentra devuelve -1 ye parámetro &ldquo;desde&rdquo; que es opcional indica desde
que posición queremos empezar a buscar
.b lastIndexOf (carácter,desde )Esta funcion hace lo mismo que la antrior pero
.c substring (inicio,fin )este método devuelve la subcadena comprendida entre inicio y fin de echo funciona a revés 
.d toLowerCase()ponetodos los carácter del escrim en minúsculas
.e toUpperPone todo a mayúsculas
.f toString convierte en cadena el objeto
.g big () aumente el tamaño de la letra del string 
.h bold() pone en negrita e string
.i fontColor(color)
.j fontSize(tamaño)pone la funte al tamaño indicado
.k italics() pone la fuente en cursiva
.llink (url) pone el texto a la url indicada
.m anchor(nombre) convierte la cadena de caracteres en un ancla con ese nombre.
.n small() disminuye el tamaño de la letra del string
.o sub() subíndice
.p sup() superíndice 
.q charAt(indice) devuelve el carácter que esta en la posición indice. Empieza en 0
�10.1.2 clase date javascript
Para trabajar con fechas en javascript utilizaremos el objeto DATE. Para cargar la variable mifecha con la fecha y hora
actuales del sistema deberemos declaarlo así mifecha=new Date() 
En el caso de necesitar crear un objeto fecha coin unos datos concretos deberemos especificar los valores dentro del
paréntesis especificados por &ldquo;,&rdquo;. No es obligatorio especificar todos los valores.
Por ejemplo mifecha=new Date(año,mes,dia) me declara una variable con la fecha especificada y la hora 00:00:00.
Todos los valores que le pasamos deben ser numéricos, de hecho el mes 0 es enero y el resto correlativos.
Esta clase no tiene propiedades pero si un buen montón de métodos:
METODOS.
- getDate(): deveuelve el die del mes
- getDay(); devuelve el dia de la semana
- getHours(): devuelve la hora
- getMinutes() devuelve minutos
- GetMonth(): devuelve el mes
- getSeconds(): devuelve los segundos
- getTime(): devuelve los milisegundos que hay entre el 1 de enero de 1970 y el momento en el que estamos
- getYear(): este método aun aparece y devuelve la fecho menos 1900 pero está desapareciendo.
- getFullYear(): devuelve el año de cuatro cifrar, en el que estamos.
- Setdate(): actualiza 
- setHours(): actualiza la hora
- setMinutes(): actualiza los minutos
- setMonth(): cambia el mes (Empieza por 0)
- setTime(): actualiza la fecha y hora pero hay que darle el valor del tiempo que ha pasado en milisegundos dfesde 1 de
Enero de 1970
- setYear(): cambia el año pero le suma 1900 a lo que le pasemos (Obsoleto y en desuso)
- setFullYear(): cambia el año en formato de 4 digitos.
10.1.3 Clase Math en javascript.
Proporciona mecanismos para realizar operaciones matemáticas en Javascript
10.1.4 Clase Number en javascript.
WEB INFORMATICA
http://www.webinformatica.org Potenciado por Joomla! Generado: 22 December, 2009, 15:57
Modeliza y establece el tipo de datos númericos en Javascript
10.1.4 Clase Boolean en javascript.
Nos sirve para crear valores Boléanos.
10.2.- Creación de Clases en Javascript
Javascript nos permite crear nuestras propias clases
11.- Jerarquía de objetos en el navegador.
Para poder obtener toda la potencia de Javascript tenemos que aprender a manejar los objetos del navegador.
Cuando se carga una página, el navegador crea una jerarquía de objetos en memoria que sirven para controlar los
distintos elementos de dicha página. Mediante la nomenclatura de objetos que hemos aprendido para Javascript
podemos trabajar con esa jerarquía de objetos acceder a sus propiedades e invocar sus métodos.
Todo lo que se pueda hacer con la página del lado del cliente se puede controlar de una manera u otra de esa jerarquía.
11.1.- EJEMPLO DE LA JERARQUIA
Ejemplo porque hay muchos mas de los que hay a continuación.
Objeto. Propiedades
Window &loz; document &loz; bgcolor
 Frame cookies
 history Form &loz; action 
 name Link method
 parent URL name
 self title tagret
 location domain &hellip;&hellip;..
 &hellip;&hellip;&hellip;. &hellip;&hellip;..
En esta jerarquía todos los objetos comienzan con un objeto que se llama Window a partir del cual vamos articulando el
resto, de hecho es el único que es fijo siempre, tan fijo que no hace falta escribirlo en Javascript, que se
sobreentiende(Escribirlo no falla) 
11.1.1 Propiedades del objeto windows
defaulStatus: es el texto que se escribe por defecto en la barra de estado del navegador.
Document: es el objeto que contiene la página web que se está mostrado
Frame: es un objeto de la pagina web que se accede por su nombre
framesarray: es el vector que contiene todos los frames de la página. Su indicie empieza en 0
length: numero de frames de al ventana
history: objeto historial de pagina visitadas
location: contiene la URL del documento que se está visualizando, si cambiamos el valor de esta propiedad
conseguiremos movernos al nuevo valor de la URL (Tambien dispone de esta propiedad el objeto document)
name: nombre de al ventana, se asigna cuando se abre la ventana
parent: hace referencia a la ventana donde está situado el frame donde estamos trabajando
self: yo mismo
scrollbars: objetos de las barras de desplazamiento de la ventana
status: texto de la barra de estado.
11.1.2.- Métodos del objeto Windows
alert(texto): 
back(): va a auna pagina atrás en el historial
close. Cierra la ventana
confirm(texto): es como el alert lo que pasa que deja acepar o cancelar (TRUE o FALSE)
focus: coloca el foco de la aplicación en la ventana
forward: paina adelante en el historial
home(): ir a al apgina inicio configurada en el navegador
open():abre una ventana secundario en el navegador
WEB INFORMATICA
http://www.webinformatica.org Potenciado por Joomla! Generado: 22 December, 2009, 15:57
print(): como pulsar el botón imprimir
prompt(pregunta,valor defecto): muestra un cuadro de diálogo para pedir un dato, devuelve el dato que haya
introducido el usuario
setTimeOut(sentencia, miliseg): define un script para que sea ejecutado una vez que pasen los milisegundos
especificados clearInterval()
setInterval(): define un script para que sea ejecutado cada vez que transcurre el intervalo hasta clearInterval
STOP: es cmo pulsar el botón STOP de la ventana de navegación
11.2. Objeto document en Javascript
11.3.3 objeto campo text
11.3.3.1 propiedades.
 Name
 Type
Value
11.3.4 campo checkbox
 11.3.4.1
 
 Defaulchecked valor por defecto
 Checked si esta marcada o no
 Value lo mimso que la anterior
Name 
Form 
Type 
 11.3.4.2 metodos.
Click(): este metodo cambia el estado del checkbox, es decir hace lo mismo que si el usuario hubiese pulsado sobre el
11.3.5 campo boton de radio.
11.3.5.1 propiedades
Checked
Defaultckecked
Value
Length numero de botones de radio que conforman el grupo
11.3.6 campo select.
11.3.6.1Propiedades
Length: contienen la cantidad de opciones del campo select, es decir la cantidad de etiqueta option
Option: hace referencia a cada una de als opciones, en si es un objeto
Options: el array con cada una de las opciones DEL SELECT
selectedIndex: index de la opcion seleccionada en este momento
11.3.6.2. objeto OPTION
Default: selected indica con trae o false si esta va a ser la opcion seleccionada por defecto
Index indice de esa opción dentro del select
Selected: indica si esta opcion esta seleccionada o no
Text texto de la opcion
Value: valor de la opcion
12.- Eventos en Javascript
Son la manera que tenemos en Javascript de controlar las acciones de los visitantes y definir el comportamiento de la
página cuando estas acciones ocurren. Cuando un usuario visite una pagina web e interactúa con ella se producen
eventos y con Javascript podemos definir que queremos que ocurra cuando se dispare un evento.
- onabort: se dispara cuando el usuario deteien la carga de una imagen.
- onblur: se produce cuando un elemento pierde el foco de la aplicación
- onchange: se dispara cuando cambia el estado de un elemento del formulario.
NOTA: realmente no se dispara hasta que no pierde el foco
- ondragdrop: se produce cuando un usuario suelta algo que se esta ba arrastrando
WEB INFORMATICA
http://www.webinformatica.org Potenciado por Joomla! Generado: 22 December, 2009, 15:57
- onclick: se produce cuando se pulsa el botón del ratón
- onerror: se produce cuando no se puede cargar un documento o una imagen.
- onfocus: se dispara cuandoel elemento coge el foco.
- onkeydown:
- onkeyuppress
- onkeyup
- onmousedown:
- onmouseup
- onmousemove
- onmouseout: cuando el puntero del ratón se sale de un área preseleccionada.
- onmouseover: se destata cuando el puntero a un ratón pasa por un elemento.
- onload: se desata cuando la página ha terminado de cargarse
- onmove: cuando movemos una ventana del navegador o un frame
- onresize: cuando redimensionamos ventanas o frames que los componen
- onreset: cuando el usuario pulsa el boton reset del formulario
- onselect: se dispara cuando seleccionamos un elemento de un formulario
- onsubmit: se dispara cuando el usuario pulsa el botón enviar de un formulario (se ejecuta antes del envio, pero sino lo
cancelamos envia)
- onunload: al abandonar una pagina ya sea porque nos vamos a otra enlazada en la misma ventana o poruqe cerramos
la ventana del navegador se siparara este evento.
WEB INFORMATICA
http://www.webinformatica.org Potenciado por Joomla! Generado: 22 December, 2009, 15:57