Funciones y elementos

Transcripción

JAVASCRIPT
Funciones y elementos
Pop up
Pop-up

Alert:
<input
type="button" onclick="alert('Estamos usando
ALERT');" value= "Alert" />

Confirm:
<input
type="button" onclick="confirm('Esta seguro que
esta usando CONFIRM?');"
); value="Confirm" /
/>

Prompt:
<input
type= button onclick=
type="button"
onclick="prompt('Escriba
prompt( Escriba sobre
PROMPT', 'Prompt');" value= "Hola" />
Eventos (I)

El manejador de eventos permite a tu pagina web
detectar cuando ocurre un “evento” y entonces ejecutar un
código
ódi Javascript.
J
i

onload: cuando el agente de usuario termina de cargar una página.

onclick:
li k cuando se realiza un click sobre el elemento.
elemento

ondblclick: cuando se hace un doble click sobre el elemento.

onmousedown: cuando el botón del mouse es presionado sobre el
elemento.

onmouseup: cuando el botón del mouse se suelta sobre el elemento.

onmouseover: cuando el mouse es puesto sobre el elemento.

onmousemove: cuando el mouse es movido mientras está sobre el
elemento.
elemento

onmouseout: cuando el mouse se quita de encima de un documento.
Eventos (II)

onfocus: cuando un elemento recibe el enfoque.

onblur: cuando el elemento pierde el enfoque.

onkeypress: cuando una tecla es presionada y luego soltada mientras el
elemento tiene el enfoque.

onkeydown: cuando una tecla es presionada mientras el elemento tiene
el enfoque.

onkeyup: cuando una tecla es soltada mientras el elemento tiene el
enfoque

onsubmit: cuando el formulario es enviado

onreset: cuando el formulario es reestablecido.

onselect: cuando un usuario selecciona texto en un campo de texto.

onchange: cuando un control pierde el enfoque y su valor ha sido
modificado
difi d desde
d d que recibió
ibió ell enfoque
f
por última
úl i vez.
Ejemplos Eventos

Doble Click
<input
type="button" onDblClick="alert('Mira queha
pasado al darle!');" value="Doble Click!" />

Mouse over y out
<p
onmouseover="this.style.color='red'"
onmouseout="this.style.color='black'">Este
y
es un texto
que cambia de color. Pruébalo!</p>

Confirmar ir a un enlace
<a
href="enlace.html" onclick = "if (!confirm('Desea ir
al enlace?
enlace?'))
)) return false;
false;" >Enlace</a>
Funciones

Una función
f
es un conjunto de instrucciones que se
agrupan para realizar una tarea concreta y que se
pueden
d reutilizar
tili
fácilmente.
fá il
t
La solución que proponen las funciones consiste en
extraer llas iinstrucciones
i
que se repiten
i y sustituirlas
i il
por una instrucción del tipo “en este punto, se
ejecutan las instrucciones que se han extraído
extraído”
function nombre funcion() {
...
}
Funciones

Argumentos
Son
los valores de entrada de la función. Podemos
incluir desde ningún argumento a cientos.
Se incluyen en la declaración entre los (), así function
sumar(argu1,argu2,argu3,…)
Dentro de la función se usan normalmente
{var suma=argu1+argu2+argu3}

Retorno (return)
Es
el valor que devuelve la función se hace con return,
así: return suma
Funciones

Igualdad (==) Comprueba si lo que hay a cada
lado del == tienen el mismo valor.
Desigualdad (!=) Comprueba si lo que hay a cada
lado del != tienen el distinto valor.
Mayor que (>) Comprueba si lo que hay a la
izquierda del > es mayor que lo que hay a la
derecha.
M
Menor
que (<) Comprueba
C
b sii lo
l que hay
h a la
l
izquierda del < es menor que lo que hay a la
derecha
Condiciones

if / else
if
(condicion)
{accion1}
else
{accion2}

Y (cond1&& cond2)
O (cond1 || cond2)
No (!cond)

ejemplo
if
(a == b)
{c = a x 2}
else
{c = a + b}
•
•
•
Y if(a<b && a<c)
O if(a<b || a<c)
No if(!(a<b))
Bucles

while (variable<=valor final)
{
// Aquí va el código que ejecutas en bucle
}
for (variable
(variable=valor
valor inicial; variable
variable<=valor
valor final;
variable=variable+incremento)
{
// Aquí va el código que ejecutas en bucle
}
Inhibir un campo texto

Es que formulario de tipo texto se encuentre
inhibido, es decir, que no podamos colocarnos
encima de él para editar su contenido.
El manejador
j
de evento onfocus salta cuando un
elemento gana el foco de la aplicación.
El método blur() sirve para que los elementos de
formulario pierdan el foco
<f
<form><input
><i
type="text"
"
" value=“no
l
“ puedes
d
escribir" onfocus="this.blur()"></form>
Rollover con javascript
Hacer que cambie una imagen al pasar el ratón por encima
<script language=javascript>
iluminada = new Image(64,44)
iluminada.src = "flecha2.png"
apagada = new Image(64,44)
apagada.src = "flecha1.gif"
</script>
<A href="#" onmouseout="window.document['eul'].src
[
]
=
apagada.src" onmouseover="window.document['eul'].src =
iluminada.src">
<IMG border=0 height=34 hspace=10 name=eul
src="flecha1.gif" vspace=4 width=84></A>

Navegador desplegable

Es navegador de un sitio web consistente en un campo desplegable de
formulario o caja de selección que al seleccionar uno de sus elementos, que
se corresponden con secciones del sitio, nos lleve a la sección que
pretendemos visitar de manera automática
<form name=navegador>
<select
l name="secciones"
"
" onchange="destino()">
h
"d
()"
<option value="no">Seleccione una Seccion
<option value=
value="no">
no >-------------------------------------<option value="acceso.html">Acceso
<option value
value="javascript.html">Ejemplos
javascript.html >Ejemplos Javascript
<option value="navegador.html">Navegador
/
/
</select></form>
Navegador desplegable
<script language=javascript>
function destino(){
url=document.navegador.secciones.options[document.navegador.s
ecciones.selectedIndex].value
if (url!="no") window.location = url;
}</script>
Recupera el value de la opción seleccionada en la caja de
selección desplegable y lo almacena en una variable llamada
url.l Posteriormente,
P
i
sii la
l variable
i bl urll no contiene
i
lla palabra
l b
"no", lleva al navegador a la posición seleccionada, es decir,
al url que habíamos recogido.

Acceso por clave javascript

Existe un mecanismo que no es muy avanzado ni tampoco muy
seguro. Se trata de colocar páginas web en nuestro espacio
huerfanas de enlaces,
enlaces para que nadie pueda acceder a ellas.
ellas
La única manera de acceder a las páginas sería conocer el
nombre de archivo y escribir la URL del mismo
mismo, pero no vamos
a publicar el nombre de archivo.
En el campo de texto habrá que escribir el nombre del archivo
que se desea ver y al pulsar el botón seremos conducidos
hacia la página que tenga ese nombre de archivo.

Si el nombre es correcto nos llevara al la pagina que queremos.
Si no es correcto (nos hemos inventado la clave), se mostraría una
página
á i de
d error típica
í i
Acceso por clave javascript

<html><head>
<title>clave acceso</title>
</head><body>
<SCRIPT>function acceso(){
window location = document.formclave.clave.value
window.location
document formclave clave value +
+".html
html"}}
</SCRIPT>
<FORM name=formclave>
<INPUT type=password name=clave>
<INPUT type=button value=Acceder onclick="acceso()">
</FORM>
</body></html>
Bibliografía

Objetos en Javascript
p //
/j /j
p
http://www.w3schools.com/js/js_ex_dom.asp
Como activar Javascript en los navegadores
http://www quackit com/javascript/tutorial/how to
http://www.quackit.com/javascript/tutorial/how_to
_enable_javascript.cfm
E t con Javascript
Eventos
J
i t
http://www.htmlquick.com/es/reference/events.html

Ejemplos de eventos
http://www.desarrolloweb.com/articulos/1246.php
p //
/
/
p p
Bibliografía

Manual Tutorial Javascript
http://www.slideshare.net/stevengomez/manual-
tutorial-javascript-con-ejemplos

Tutorial Javascript
p
http://www.echoecho.com/javascript.htm

Funciones y elementos

Transcripción

Documentos relacionados

CONVOCATORIA PARA DESARROLLADOR WEB