Manual de JavaScript
description
Transcript of Manual de JavaScript
MMMaaannnuuuaaalll ppprrrccctttiiicccooo dddeee JJJaaavvvaaaSSScccrrriiipppttt P P g gi in na a: :1 1 MMMaaannnuuuaaalll ppprrrccctttiiicccooo dddeee JJJaaavvvaaaSSScccrrriiipppttt 1.- Introduccin 1.1.- Resea histrica OriginalmentedenominadoLiveScript,fuedesarrolladoporNetscapeCommunicationsparacrear aplicaciones de Internet en el cliente. Masomenosenlamismapoca,SunMicrosystemslanzellenguajedeprogramacinJAVA(que originalmentefuellamadoOak),elqueadquirirpidamentepopularidadasqueporrazonesnetamente comerciales se le cambia el nombre a JavaScript. Laversin1.0apareciconlaversion2.0delnavegadordelamismaempresaymastardees incorporadoeneliExplorer3.0deMicroSoft.PocotiempodespusaparecetambinelVBScript(VisualBasic Script) de Microsoft, un muy buen competidor.1.2.- Que es un script ? Unscriptesunasecuenciadeordenes,enundeterminadolenguaje,quepuedeserejecutadoporun cliente Web desde su navegador y visualizar el documento en que est contenido. ActuamentelosdoslenguajesdescriptmasusadosenpaginasWebsonJavaScriptyVBScript.La inclusion de scripts en los documentos HTML hace que stos sean ms inteligentes. El contenido se genera en formadinamica,mientrasquelosvaloresintroducidosenlosformulariospuedencomprobarlocalmente,sin necesidaddecontarconunservidoryemplearunciertotiempoenello.Apesardelnombre,JavaScript,este lenguaje tiene poco que ver con JAVA.1.3.- Por qu JavaScript ? ActualmentelosnavegadoresWebmasusadossonNetscapeNavigatoreInternetExplorer,ambos soportan JavaScript, pero solo el Intenet Explorer soporta VBScript. 2.- Conceptos bsicos JavaScript es un lenguaje interpretado en el cliente por el navegador al momento de cargarse la pagina, es multiplataforma, orientado a eventos con manejo de objetos, cuyo cdigo se incluye directamente en el mismo documento HTML. HastaentoncesyaseusabaHTMLyJAVA,perolaaparicindelJavaScriptprodujounaimportante revolucin, ya que dio al usuario la posibilidad de crear aplicaciones "on-line", es decir modificar pginas web en tiempo real. MMMaaannnuuuaaalll ppprrrccctttiiicccooo dddeee JJJaaavvvaaaSSScccrrriiipppttt P P g gi in na a: :2 22.1.- Caracteristicas Essimple,nohacefaltatenerconocimientosdeprogramacinparapoderhacerunprogramaen JavaScript. ManejaobjetosdentrodenuestrapginaWebysobreeseobjetopodemosdefinirdiferenteseventos. Dichos objetos facilitan la programacin de pginas interactivas, a la vez que se evita la posibilidad de ejecutar comandos que puedan ser peligrosos para la maquina del usuario, tales como formateo de unidades, modificar archivos etc. Es dinmico, responde a eventos en tiempo real. Eventos como presionar un botn, pasar el puntero del ratn sobre un determinado texto o el simple hecho de cargar la pgina o caducar un tiempo. Con esto podemos cambiar totalmente el aspecto de nuestra pgina al gusto del usuario, evitndonos tener en el servidor un pgina para cada gusto, hacer clculos en base a variables cuyo valor es determinado por el usuario, etc.2.2.- Diferencia con JAVA La principal diferencia es que JAVA es un lenguaje compilado, mientras que JavaScript es interpretado. JAVAalcompilarcreaprogramasindependientes,llamadosAPPLETSqueseinvocandesdeunapaginaWeb, mientras que el cdigo de JavaScript va incluido en la pagina. Esta orientado a objetos de forma limitada ya que no maneja los conceptos de clase ni herencia. En JavaScript no es necesario declarar el tipo de variable, ni debe existir las referencias al objeto antes de ejecutarlo, por lo que se habla de una ligazn dinmica a diferencia de la ligazn esttica del JAVA.2.3.- Principales aplicaciones Si bien hoy en da, JavaScript, es un lenguaje muy usado, sus principales aplicaciones son: Responder a eventos locales dentro de la pgina, como apretar un botn. La realizacin de clculos en tiempo real. La validacin de formularios dentro de una pgina. La personalizacin de la pgina por el usuario, que le permitir tener una pgina web a su medida. La inclusin de datos del propio sistema, como son la hora y la fecha. Aunque segn pasa el tiempo sus aplicaciones se van incrementando.2.4.- Dnde incluirlo AntessiquieradequeconozcamoslasintaxisounaprimeraordendeJavaScript,debemossaber primero cmo se incluye un script dentro de un documento HTML. MMMaaannnuuuaaalll ppprrrccctttiiicccooo dddeee JJJaaavvvaaaSSScccrrriiipppttt P P g gi in na a: :3 3ElcdigoJavaScriptseinsertadirectamenteennuestrapaginaHTML.Haycuatro(4)manerasde hacerlo:2.4.1..- En el cuerpo del documento Es decir entre las etiquetas y usando el comando Titulo Este cdigo se ejecuta inmediatamente al cargar la pagina y lo que produce es un texto sobre la pagina, para ello use el mtodo write del objeto document, que representa al documento actual1. Observa que se emplea un comentario para ocultar el cdigo a los navegadores que no soportan JavaScript.2.4.2.- En archivo aparte En este caso todo el cdigo del script esta situado en otro archivo y se hace una llamada. Titulo
Observaqueaqunofuenecesarioesconderningncdigoyaquelosnavegadoresquenosoporteel comando SCRIPT simplemente lo ignorarn. 2.4.3.- Usando manejadores de evento
1 NOTA: Excepto en texto encomillado, JavaScript es sensible a maysculas y minsculas, por loquetendrsquetenerelcuidadoalusarporejemplodocument.writedeescribirloas,en minsculasonoseinterpretara.Cualquiererrorsimplementeesignorado.Sepuedeusarla comilla simple para los valores de atributos. MMMaaannnuuuaaalll ppprrrccctttiiicccooo dddeee JJJaaavvvaaaSSScccrrriiipppttt P P g gi in na a: :4 4LoscomandosdeJavaScriptsonevaluadosinmediatamentealcargarselapagina.Lasfuncionesson almacenadas, pero no ejecutadas, hasta cierto evento. Titulo algo
Observa que ahora es un evento el que dispara. 2.4.4.- Haciendo una llamada a funcin Dentro de la cabecera, despus del titulo. Es decir, entre los comandos y y luego la llamada a la funcin en el cuerpo. Titulo No haga Clic AQUI
Observa que aqu se defini la funcin en la cabecera, pero recin se ejecuta al hacer clic en el enlace, que es el evento que llama a la funcin a la cual se le para un parmetro. 3.- VALORES, CONSTANTES Y EXPRESIONES MMMaaannnuuuaaalll ppprrrccctttiiicccooo dddeee JJJaaavvvaaaSSScccrrriiipppttt P P g gi in na a: :5 53.1.- Tipos de datos JavaScript acepta diferentes tipos de datos: Tipo Descripcin EjemploNmerosPueden ser nmeros enteros o reales 473.1416CadenasCualquiertextoqueesteencerradoentrecomillas.Puedenser simples o dobles"Hola que tal..."LgicasTambin llamados Booleanos, son las que toman uno de dos valores de verdadero o falsotrue o falseNulas Es cuando la variable no toma ningn valor null 3.2.- Valores y constantes Tipo Descripcin EjemploNmerosEnterosDecimales (base 10)Es una secuencia de dgitos (0-9) que no comiencen con 0 1999Enteros Hexadecimales (base 16)Una secuencia de dgitos (0-9) y letras (A-F) que comienza con 0x0xE477EnterosOctales (base 8)Secuencia de dgitos (0-7) que comiencen con 0 0777Punto flotantePuedetenerunenterodecimal,unpunto,unafraccin (otronumerodecimal),unexponentequeconsisteenla letraeseguidadeunentero,elcual puedellevarunsigno (+ o -).3.14159,-2e4,5e-12CadenasCadenasde caracteresConsta de uno o mas caracteres encerrados entre comillas simples o dobles"Hola", '1999'Tambinpueden usarlossiguientes caracteres\f indica un avance de pagina (Form feed)\n Indica nueva lnea (New Line)\r Indica un retorno de carro (Carruage return)\t Indica un tabulador (Tab)\"se puede incluir comillas. Ej: "Jos \"Chemo\" del Solar" LogicasLogicas Verdadero o falso true o falseNulasNulas Es cuando la variable no toma ningn valor null MMMaaannnuuuaaalll ppprrrccctttiiicccooo dddeee JJJaaavvvaaaSSScccrrriiipppttt P P g gi in na a: :6 63.3.- Expresiones Es cualquier conjunto valido de constantes, variables y operadores que al evaluarse dan un nico valor del tipo numrico, cadena o lgico. 3.4.- Variables Las variables son elementos a los cuales les daremos un valor esttico, o un valor totalmente dinmico. Para definir una variable lo podemos hacer de varias formas. La primera, es la siguiente: var mivariable; en la cual la sentencia var hace que JavaScript, cree una variable. Pero tambin podemos definir la variable justo antes de usarla: ...aqu sentencias JavaScript var mensaje = "HOLA"; ...aqu ms sentencias Probemos cmo se les pueden dar valores a las variables; podemos hacer que aparezca un cuadro en el cual podamos insertar un texto, la siguiente fuente es la usada para hacer el siguiente ejemplo: Probemos la funcin creada
3.5.- Variables tipo matriz
Lasintaxisparacrearlamatrizeslasiguiente:nombre=newArray(elementos),posteriormentepara
usarla se usa nombre[# de elemento]. MMMaaannnuuuaaalll
ppprrrccctttiiicccooo dddeee JJJaaavvvaaaSSScccrrriiipppttt P P g
gi in na a: :7 73.6.-Operadores Aritmeticos+ Adicin- Sustraccin*
Multiplicacin/ Divisin% Modulo++ Incremento-- Decremento-
NegacinCadena+
Concatenacin.Nota:Cuandoseoperaunvalordecadenaconunnumerico,elresultadoesuna
cadena.Sobre BITsAND o
&Devuelveun1encadabitparaelcualambosoperandossean1y0 en el
resto.OR o |Devuelve un 0 en cada bit para el cual ambos operandos
sean 0 y 1 en el resto.O-EX o ^Devuelve un 1 en cada bit para el
cual uno de los operandos sea 1 y el otro 0 y 0 en el resto.NOT o
~Devuelveun1encadabitparaelcualeloperandossean0y
viceversa.Lgicos&&Devuelveverdaderosiambosoperandossonverdaderosyfalsoen
el resto.||Devuelvefalsosiambosoperandossonfalsosyverdaderoenel
resto.! Devuelve falso si operando es verdadero y
viceversa.Comparacin== Devuelve verdadero si ambos operador son
iguales.!= Devuelve verdadero si ambos operador son diferentes.>
Devuelve verdadero si operador izquierdo es mayor al
derecho.>=Devuelveverdaderosioperadorizquierdoesmayoroigualal
derecho.>=y Asigna a x el valor de x=x>x>x>yx&=y
Asigna a x el valor de x=x&yx^=y Asigna a x el valor de
x=x^yX|=y Asigna a x el valor de x=x|y4.- Inicio al control del
flujo del prgrama.
Existendosgrandestiposdesentenciasdecontrol,lassentenciasestticas,ylasdinmcasoblucles.
Entre las estticas, encontramos la sentencia if la cual se utiliza
de la siguiente forma: if ( sentencia de condicin ) { grupo de
sentencias JavaScript que se ejecutarn en caso de que la sentencia
de condicin sea "verdadera" } Un ejemplo claro de uso de la
sentencia if sera este: var esto = '25'; if ( esto < 100 ) {
window.alert('La variable esto es menor que 100'); } else{
window.alert('La variable no es menor que 100'); } Por supuesto el
ejemplo anterior, no tiene ningn sentido, pues la variable siempre
ser menor que cien;
sipiensan,estonospuedeserdeayuda,quierodecir,sienlugardeusarselavariableestodeunaforma
esttica, sino que su valor variase a travs de usar un window.prompt
o una entrada de formulario o de cualquier
otraforma,sitendraalgunautilidad:veamosunejemplodeutilizacindelassentencias
ifyelse,estaltima
abarcatodaslassentenciasquenoabarquenlos"if"queestnporencimadelmismo,enelejemploanterior
seran todos los nmeros mayores que 100 y el propio 100.
Enesteejemplodemostraremosquesiaunavariableledamoselvalorwindow.confirmestenos
devolver dos valores: 1 si el usuario pulsara el botn de Aceptar, y
2 si pulsase el de Cancelar: var aquello = window.confirm("Cree Ud.
que funcionar?"); if ( aquello ) { window.alert("Botn Aceptar
pulsado."); } else { MMMaaannnuuuaaalll ppprrrccctttiiicccooo
dddeee JJJaaavvvaaaSSScccrrriiipppttt P P g gi in na a: :9
9window.alert("Botn Cancelar pulsado."); }
Esperoquesehayaentendidoelejemploanteriorylassentencias
ifyelsepueslasiguientesentencia
funcionadelamismamanera,peroesunpocomsordenadayasuvezrestringida;nopermitehacer
comparaciones mltiples; veamos pues la sentencia switch. Esta
sentencia se usa de la siguiente forma: switch ( variable ) { case
1: sentencias break;case 2: sentencias break;case 3: sentencias
break;case 4: sentencias break;case 5: sentencias break;default:
sentencias break;} Lasentenciaswitchesmuysencilladeusar,despusdel
caseseescribeelvalornumricoquedebe
cumplirseparaqueseejecutenlassentencias,ydespusdeestas,un
break;quelediralintrpretede comandos que las sentencias han
acabado; y por ltimo la sentencia default: la cual hace la funcin
del else, es decir, toma los valores no recogidos en el resto de
sentencias del bloque. 5.-Control del flujo del programa (bucles)
Existendostipos:losbuclesnormales,ylosbuclesderetardodetiempo;estosltimoslosusaremos
parainteractuarconloselementosdelreloj.Elejemplosiguiente,muestracmounavariableesmodificaday
presentada a travs del bucle for. El ejemplo sera el siguiente:
function Bucle() { var estoesinteresante = ""; for (var i = 0; i
E-Mail:
Este cdigo no debera tener mayor dificultad para ser entendido,
pero si se fijan he incluido una nueva funcin que a partir de ahora
empezaremos a usar cuando validemos entradas de formulario, esta es
a.indexOf(b,c) donde a equivale a la variable de cadena de
caractres en la cual se buscar la subcadena b, empezando por un
nmero determinado en c, esta funcin devualve el punto en el cual se
encuentra la subcadena b, y devuelve -1 si no se encuentra la
subcadena; de todas formas contino con la tradicin y les pido me
escriban un e-mail en caso de que no lo entiendan. Me falta por
decir que cualquier atributo es modificable con JavaScript de forma
dinmica, as que investiguen y si tienen dudas mndenma un e-mail. La
barra de estado est situada normalmente en la esquina izquierda del
navegador, pero esto es variable, as que bsquenla en su explorador,
y empecemos a trabajar con ella. Para ver un ejemplo de barra de
estado pulse el botn, el cdigo de la pgina abierta est debajo:
MMMaaannnuuuaaalll ppprrrccctttiiicccooo dddeee
JJJaaavvvaaaSSScccrrriiipppttt P P g gi in na a: :1 12 2Tutorial
JavaScript -> BARRA DE ESTADO Mire en la barra de estado Por
supuesto podemos hacer scripts que al pulsar un botn se escriba
algo en la barra de estado, o que se borre, o que al pasar el mouse
se cambie... pero esto ya lo iremos viendo ms adelante. Ahora
explicar los eventos ms comunes que usar un programador JavaScript
como Ud.: Estos eventos se activarn cuando... onMouseOver ...el
mouse est encimaonUnLoad ...se cierre la ventana onMouseOut ...el
mouse no est encimaonAbort ...se pare la carga de una imgen onClick
...se clickcee encimaonSelect ...se seleccione algo onLoad ...se
cargue la pginaonCopy ...se copie algo En este captulo vamos a
proponer unos ejercicios los cuales les recomiendo hagan, pues as
practican y aprenden a descubrir tcnicas y tcticas como
programadores que son, as que valor y al toro: ( en el siguiente
captulo pondr las soluciones ) 1.Script que al pasar el mouse por
encima de un vnculo se escriba en la bara de estado una explicacin
del
vnculo.2.Pginaconscriptquevalideunformularioconcampodee-mail,nombreyapellidos.(delaforma
explicada
)3.Pginaquepreguntepormediodeunwindow.promptelnombre,yqueescribaenlabarradeestado
Hola nombre que pase un buen rato.Ir a la pgina de soluciones. Para
abrir ventanas nuevas, para desplegar banner publicitarios, o algn
anuncio importante, o como por ejemplo lo que hice para ensearle la
barra de estado, se usa el window.open(a,b,c), la cual recibe tres
valores, a que es la URL de la pgina, ( si no se pone nada, se crea
una ventana en blanco), b, tipo de ventana, usaremos MsgWindow, y
c, que son las propiedades de la ventana descritas a continuacin,
estas propiedades se ponen separadas por "," y despus de la "," no
hay que poner espacio. Las propidades son las siguientes:status yes
o nomenubaryes o no width y heightvalordirectoriesyes o no
......resizableyes o no De todas formas investiguen porque existen
muchas ms propiedades de las ventanas que no considero muy
importantes. Veamos un ejemplo de abrir ventanas mediante un botn
con JavaScript: El cdigo sera el siguiente: function
Abrir_Ventana() { MMMaaannnuuuaaalll ppprrrccctttiiicccooo dddeee
JJJaaavvvaaaSSScccrrriiipppttt P P g gi in na a: :1 13 3var
propiedades =
'menubar=no,width=300,height=300,status=yes,resizable=no'; var
ventana = window.open("","MsgWindow",propiedades); var codigo =
'Pgina de prueba'; codigo += 'Esto es muy til para desplegar
publicidad
'; codigo += 'O para desplegar algn cartel de aviso
'; codigo += 'O para lo que se te ocurra
'; codigo += ''; codigo += ''; codgio += '';
ventana.document.write(codigo); } Note que lo nico que hacemos es
escribir el cdigo de una pgina web, en una ventana que hemos
abierto con JavaScript; esto es muy til, pero mucho ms til, es
controlar la ventana que hemos abierto mediante funciones
JavaScript, como por ejemplo escribir algo en la barra de estado,
cerrarla, mandarla a una URL mediante la sentencia
a.window.location=b;donde b es la URL a la cual queremos mandar la
ventana a, si a a no le damos valor tomar el de self, que se
refiere a la ventana en la cual se ejecuta la funcin, es decir la
que ests viendo. Esto quiz te parezca un poco raro, as que por
favor si no entiendes algo mndame un e-mail. ( No me gusta romper
la tradicin de pedirte un e-mail :-P ) captulo vamos a profundizar
un poco en los eventos posibles en JavaScript, lo primero que
debemos saber, es que para los navegadores de Netscape 4.7 y
anteriores, no todos los eventos son aplicables a todos los
elementos, esto quiere decir, que el elemento , por ejemplo, no
admite los eventos onMouseOver ni onMouseOut, pero si onClick, y as
pasar con muchos elementos, pero al contrario, los navegadores
Netscape 6.0, Internet Explorer 4.0 y posteriores, y Opera 5.0 si
lo entienden, por lo general con Internet Exploer, todos los
elementos soportan todos los eventos, pero sin embargo el resto de
los navegadores, no todos los elementos permiten todos los eventos.
Sabiendo esto, podemos hacer dos cosas, programar por lo bajo o por
lo alto, esto es, podemos pensar que que todos los usuarios tienen
el N 3.0 Gold, o IE 2.0, con lo cual nuestros scripts sern un poco
arcaicos y algunas veces con poca funcionalidad, o podemos pensar
que el que no tenga N 6.0, Opera 5.0 o IE 5.5 como mnimo no sabe lo
suficiente como para usar nuestros scripts, por supuesto estos dos
tipos de pensamiento son completamente errneos, siempre hay que
intentar programar por lo bajo, pero sin pasarnos, pues no tiene
sentido que podamos hacer muchas cosas, pero no las hagamos por si
los visitantes no estn lo suficientemente actualizados como para
usarlos al 100%. En conclusin, debemos pensar que el estndar est en
N 4.5+ o IE 4.0+, pero siempre encontrars a alguien que tengan
navegadores ms antiguos, por tanto, JavaScript nos permite
averiguar la versin y el navegador que el usuario est usando en el
momento de visualizar la pgina, esto se hace con las siguientes
funciones: navigator.appName...este devuelve el nombre del
navegador navigator.appVersion... y este la versin, pero ser ms
eficiente usar la de abajo...
navigator.appVersion.charAt(0)...devuelve el primer caracter de la
versin del navegador. En la tima sentencia, aparece una funcin que
an no haba explicado a.charAt(b), la cual devuelve el caracter de
la cadena a, situado en la posicin b, ( cabe destacar que las
cadenas empiezan en el caracter 0 ). Si no algo no ha quedado
claro, ya sea tanto de la teora de los eventos y los navegadores,
como de la funcin charAt, esribidme un e-mail. ( Me gusta seguir la
costumbre del e-mail ). Vamos a profundizar un poco ms con esto de
los eventos, vamos a ver un ejemplo de una imgen que cambia al
pasar el mouse por encima, esto es muy sencillo, pero si no se
tiene el cuidado MMMaaannnuuuaaalll ppprrrccctttiiicccooo dddeee
JJJaaavvvaaaSSScccrrriiipppttt P P g gi in na a: :1 14 4suficiente,
puede quedar un script bastante malo, para que salga bien es
importante que se use la tcnica de la precarga, que consiste en
bajar las imgenes al cargar la pgina, para que al pasar el mouse
por encima, el cambio sea automtico, y no tarde mucho tiempo en
cambiarse, el script sera as: Script de Cambio de imgenes con
evento onMouseOver y tcnica Precarga En el ejemplo anterior se
incluye un nuevo objeto que es Image(a,b), donde a es el ancho de
la imgen, y b es el alto, y despus se le da el atributo .src para
que la imgen se cargue, luego creamos la imgen y las etiquetas de
hipervnculo, y a la imgen le damos un nombre y a las etiquetas de
vnculo, les asociammos los eventos onMouseOver y onMouseOut, de tal
forma que el script, creado hara algo as: Ahora vamos a tratar el
evento onLoad que se ejecuta al cargarse la ventana:Dentro de
etiquetas . function Abrir() { var publicidad =
window.open("","msgWindow","menubar=no,directories=no,width=400,height=400");
publicidad.window.location = "banners.html"; // Poner la pgina que
se quiera } Y en la etiqueta aadir: onLoad="Abrir()" Les recomiendo
intenten inventarse ejemplos, para desarrollar sus dotes como
programadores JavaScript que son, aunque de todas formas en los
anexos del tutorial encontrarn mltiples ejemplos MMMaaannnuuuaaalll
ppprrrccctttiiicccooo dddeee JJJaaavvvaaaSSScccrrriiipppttt P P g
gi in na a: :1 15 5sobre Scripts tpicos que puedan usar en su web,
aunque saben que si en algn momento tienen alguna duda, pueden
mandarme un e-mail. Captulo 6: Arrays Qu es un Array? Se
preguntarn... Pues un array, es un grupo de variables que se
denominan con un mismo nombre y un nmero ( para diferenciarlas unas
de otras ), esto lo entendern muy bien cuando lean algn ejemplo:
var miarray = new Array(); miarray[0] = 'Esto es el primer
elemento.'; miarray[1] = 'Esto es el segundo elemento.'; miarray[2]
= 'Esto es el tercer elemento.'; ... Noten que el primer elemeno es
el mmero 0, el segundo es el 1, y as sucesivamente, por supuesto
podemos manejar muchos elementos en un array, no slo 3 o 4, tendr
todos los que quieran. Imaginemos que queremos cargar las imgenes
que cada una es un nmero, lo podramos hacer as: var imagenes = new
Array(); function Precarga() { for ( var i = 0 ; i
Es quiz un cdigo un poco ms largo de lo que estamos acostumbrados a
programar, pero si se fijan e intentan entenderlo paso a paso, es
un cdigo bastante sencillo. Lo primero generamos la pgina con el
formulario de bsqueda, y damos a un botn la propiedad de que al ser
pulsado enve a la funcin Busca ( str ), un parmetro que es la
entrada del formulario. Esta funcin comprueba la "Base de Datos",
que no es ms que un conjunto de arrays que se relacionan estre si.
Para comprobarla, usa un bucle for, al cual se le anida una
sentencia if, si es correcto se le aaden las entradas a la variable
codigo, y al final se abre una ventana a la cual se le escribe
codigo. Si no lo entienden, les pido que me escriban un e-mail. El
ejemplo creado, muestra una pgina tal que as: Captulo 7: Trabajando
con Frames y operador Ternario ( ?: ) Por supuesto, JavaScript
permite modifcar la Url de los frames de una pgina, el ancho, y
muchas cosas, de todas formas no vamos a introducirnos mucho por
este tema. Repasemos un poco la teora sobre los frames que todos
deberan saber antes de leer este captulo. Existe una pgina padre,
donde estn declarados los frames, y desde la misma son llamados, a
estos se les llama hijos, para JavaScript parent y al resto por sus
nombres. Supongamos que tenemos una ogina padre con el siguiente
cdigo: MMMaaannnuuuaaalll ppprrrccctttiiicccooo dddeee
JJJaaavvvaaaSSScccrrriiipppttt P P g gi in na a: :1 17 7index.html
Menu index2.html Titulo ESCOGE UNA OPCIN menu.html cambio.js
function Cambia(url,mas) {
parent.cambiado.window.location=url+'.html'+mas; } Antes de
continuar, les ensear una forma de no tener que incluir el cdigo
JavaScript en la pgina HTML, es con la etiqueta script a la cual se
le dar el atributo src cuyo valor ser la Url del archivo con
extensin .js que contiene el cdigo, es muy til, pues despeja mucho
la pgina, como podreis observar, he incluido esta sentencia en la
cuarta lnea del cdigo de menu.html para que se vayan familiarizando
con esta sentencia. Este ejemplo lo pueden ver pulsando aqu
------->Un ltimo concepto sobre frames, JavaScript, guardar
todos los frames en un Array llamado frames, segn el orden de
declaracin empezando por supuesto por el cero, por ejemplo en
nuestra pgina el elemento document.frames[0]sera el frame del menu.
Vayamos al operador ternario ( ?: ), este se usa con la siguiente
sintaxis: ( expresion booleana ) ? resultado1 : resultado2; Se
ejecutar resultado1 si la expresin es verdadera, y de lo contrario
se ejecutar la resultado2.Ejemplo: var navegador = (document.all) ?
explorer : netscape; Se puede observar que el cdigo anterior es
equivalente a lo siguiente: var navegador; if (document.all)
navegador = "explorer"; else navegador = "netscape";
MMMaaannnuuuaaalll ppprrrccctttiiicccooo dddeee
JJJaaavvvaaaSSScccrrriiipppttt P P g gi in na a: :1 18 8Veamos un
ejemplo de utilizacin que nos puede ahorrar muchos quebraderos de
cabeza y mltiples lneas de cdigo: var isIE = (document.all) ? true
: false; var isNN = (document.layers) ? true : false; El cdigo
anterior inicializa dos booleanos,isIE y isNN, el primero tendr el
valor true, en caso de que document.all sea cierto, es decir, si el
navegador es Microsoft Internet Explorer, de cualquier otro modo,
tomar el valor false, lo mismo ocurre con isNN, pero con la
expresin document.layers, que ser cierta cuando el navegador se
trate de Netscape Navigator. Pero noten la potencia de este
operador, podemos tener varias expresiones, de la siguiente forma:
var isIE4sup = (document.all &&
navigator.appVersion.charAt(0) >= 4) ? true : false; var
isNN3sup = (document.layers &&
navigator.appVersion.charAt(0) >= 3) ? true : false; Se pueden
hacer infinidad de cosas con este operador, pero como con todo, eso
tiene que surgir del propio programador. Les ensear un ejemplo
prctico para la deteccin del navegador: function Detecta() { var
isIE4sup = (document.all && navigator.appVersion.charAt(0)
>= 4) ? true : false; var isNN3sup = (document.layers &&
navigator.appVersion.charAt(0) >= 4) ? true : false; if
(isIE4sup) alert('Ests usando el navegador MSIE 4.0 o superior.');
else if (isNN3sup) alert('Ests usando el navagador Netscape 3.0 o
superior.'); else alert('No usas ni MSIE ni Netscape.'); Captulo 8:
Iniciacin a objetos, split y exmen. Les explicar de una forma muy
simple cmo trabajar con objetos en JavaScript; como me parece que
explicar la definicin de objeto ser engorroso, simplemente les dir
que son un grupo de variables y mtodos que trataremos de una forma
determinada; sin ms dilacin, les enseo el primer ejemplo: function
Persona(nombre,email) { this.nombre = nombre; this.email = email;
return this; } var yo = new
Persona('Ferdy','[email protected]'); window.alert("Nombre:
"+yo.nombre+"\nE-Mail: "+yo.email); Veamos cmo podemos potenciar el
buscador de forma que guardemos todos los registros en un array que
contenga objetos de un tipo, en lugar de tener tres o ms array's:
Buscador optimizado con objetos
Conozcamos la funcin split(), esta funcin se usa de la siguiente forma: ObjCadena.split(separador); y devuelve un array temporal en el cual cada uno de sus elementos son las subcadenas que se encuentran o desde el principio de la cadena hasta separador, o entre separadores, o entre separador y el final. Ejemplo:var cadena = 'El Programador|El Novato|El Experimentado'.split('|'); window.alert(cadena[0]+'\n'+cadena[1]+'\n'+cadena[2]); Sepreguntarnsiestotienealgunautilidad,puespensarnqueseramsfcilquedeclarasemoselarray desdeunprincipio,puesno,pueselarraysequedaraenmemoriatodoeltiempo,yestoseharadeforma temporal. Ahora saben lo suficiente JavaScript como para entender la funcin que los programadores JavaScript usamos en su da cuando los Arrays no estaban implementados: function initArray() { this.length = initArray.arguments.length; for (var i = 0 ; i < this.length ; i++) MMMaaannnuuuaaalll ppprrrccctttiiicccooo dddeee JJJaaavvvaaaSSScccrrriiipppttt P P g gi in na a: :2 20 0 { this[i] = initArray.arguments[i]; } } No es recomendable usarla, puesto que no tiene mucha funcionalidad. Por ltimo veremos una subrutina que ordena un Array aleatoriamente, mejor dicho, desordena: for ( var i = 0; i < miArray.length; i++) { var j = Math.floor(Math.random() * miArray.length); var temp = miArray[i]; miArray[i] = miArray[j]; miArray[j] = temp; } Pruebe el Script pulsando el botn de abajo: Les ensear ahora a incluir mtodos ( funciones ) a los objetos que creen. Simplemente tiene que darle al elemento del objeto el nombre de una funcin definida, como es costumbre, les ensear un ejemplo: function Incremento() { this.cont++; return this; } function Contador() { this.cont = 0 this.Incremento = Incremento; return this; } var num = new Contador; num.Incremento(); window.alert(num.cont); Este captulo me contiene un ejercicio que os teneis que currar, ah va: 1.Pgina que contenga un formulario, que valide que todas las entradas estn rellenadas correctamente, y que una vez relleno, abra una ventana en la cual escriba los datos introducidos por el usuario.Solucin Bueno, les he preparado un pequeo exmen en JavaScript, consta de 15 preguntas, pero en realidad son ms de 20, y saldrn en orden aleatorio, el exmen no tine NINGN VALOR LEGAL, simplemente es para que ponga a prueba lo que ha aprendido en estos 8 mortales captulos, adems recomiendo revisen los Anexos del tutorial donde se documenta todo lo nencesario para conseguir sacar adelante sus dotes como programador de JavaScript, el exmen est programado en JavaScript, y he de decir que es fcilmente crackeable quiero decir que es muy fcil saber cul ser la respuesta correcta simplemente con un editor de textos, pero no les dir como para que no hagan trampas. He de remarcar que el cdigo del Exmen no es mo, quiero decir que lo saque de un buen libro de casa, as que dicho lo dicho, si quieres probar tus dotes como programador JavaScript, ests totalmente invitado a examinarte. MMMaaannnuuuaaalll ppprrrccctttiiicccooo dddeee JJJaaavvvaaaSSScccrrriiipppttt P P g gi in na a: :2 21 1Anexo 1: Operadores. Bueno, intentar explicar de una forma sencilla qu son los operadores. Los operadores son comandos que usamos para: modificar, comparar, ... variables; entonces encontramos los operadores matemticos:+Suma dos variables, si son cadenas, las concatena. -Resta dos variables numricas /Divide dos variables numricas *Multiplica dos variables numricas %Resto de la divisin entera de dos variables numricas ++Incrementa la variable en 1 --Decrementa la variable en 1 De los operadores anteriores, pondr un ejemplo de cada uno:var y = 1; var x = 289; var res = x + y; // res vale 290 var y = 5; var x = 34; var res = x - y; // res vale 29 var y = 5; var x = 4; var res = x * y; // res vale 20 var y = 25; var x = 5; var res = y / x; // res vale 5 var y = 10; var x = 4; var res = y % x; // res vale 2 var x = 0; x++; // x valdr 1 cuando se ejecute la siguiente sentencia var x = 45; ++x; // x valdr 46 en este momento var y = 34; y--; // y valdr 33 cuando se ejecute la siguiente sentencia var y = 23; --y; // y valdr 22 en este momento Pero estos operadores se pueden abreviar de la siguiente forma:var x = 4; var y = 34; x += y; // esto es igual que x = x + y; con lo que x valdr 38 // lo mismo nos ocurre con el resto de los operadores, -= *= /= %= Existen los llamados operadores de comparacin:Mayor que...==Igual que... MMMaaannnuuuaaalll ppprrrccctttiiicccooo dddeee JJJaaavvvaaaSSScccrrriiipppttt P P g gi in na a: :2 22 2>=Mayor o igual que... y )// la sentencia es verdadera if ( x == y ) // la sentencia es falsa if ( x != y ) // la sentencia es verdadera if ( x = y ) // la sentencia es verdadera // note que se podra usar cualquier sentencia que no fuera if. Otro tipo de operadores son los llamados operadores bit a bit:~Operador NOT ( bit a bit )|Operador OR ( bit a bit ) ^Operador XOR ( bit a bit )&Operador AND ( bit a bit ) >>>Unsigned Cambio a la derecha ( bit a bit )!Operador NOR ( bit a bit ) Cambio a la derecha ( bit a bit ) Se usan para cifrados de datos, y manipulacin de cadenas.var cadena = "Hola a todos"; var clave = "Esto deberia ser secreto"; var cifrado = cadena devuelve el valor absoluto de un nmero: Math.abs('-5'); // devuelve 5 Math.abs('5); // devuelve 5 //------------------------------------------------------------------ // Math.cos ---> devuelve el coseno de un ngulo Math.cos('45') // devuelve 0.5253219888177297. //------------------------------------------------------------------ // Math.sin ---> devualve el seno de un ngulo Math.sin('45'); // devuelve 0.8509035245341184//------------------------------------------------------------------ // Math.ceil ---> devuelve el nmero entero mayor o igual a el. Math.ceil('0.03324'); // devuelve 1 //------------------------------------------------------------------ // Math.floor ---> devuelve el nmero entero menor o igual a el. Math.floor('5.2368'); // devuelve 5 //------------------------------------------------------------------ // Math.random ---> devuelve un nmero pseudoaleatorio entre 0 y 1 inclusive. Math.random() // por ejemplo 0.1438574885700009 //------------------------------------------------------------------ //Math.pow ---> devuelve el resultado de elevar el primer argumento al segundo Math.pow('10','3'); // devuelve 1000 //------------------------------------------------------------------ //Math.sqrt ---> devuelve la raz cuadrada de un nmero Math.sqrt('400'); // devuelve 20 //------------------------------------------------------------------ Ejemplo prctico: Utilizacin de el objeto Math, para desplegar banners publicitarios aleatoriamente, usando los mtodos random y ceil o floor:var banners = new Array(); banners[0] = 'images/banner1.gif'; banners[1] = 'images/banner2.gif'; banners[2] = 'images/banner3.gif'; banners[3] = 'images/banner4.gif'; function Selecciona_Banner() { var num = Math.ceil( Math.random() * banners.length-1 ); document.write(''); }