Capitulo IV

Microsoft Virtual Academy
Cursos tcnicos gratuitos en lnea
Tome un curso gratuito en lnea.

http://www.microsoftvirtualacademy.com
Aprendiendo a Programar
Captulo IV
Qu es Javascript?
Es un lenguaje de programacin que los browser
directamente leen e interpretan en el momento en que
cargamos nuestra pgina web.
Se usa principalmente del lado del cliente, o sea, en nuestra
computadora, implementado como parte de un navegador
web y nos permite hacer mejoras en la interfaz de usuario y
pginas web dinmicas.
Todos los navegadores modernos interpretan el cdigo
JavaScript integrado en las pginas web, como Internet
Explorer, Firefox o Chrome.
Libreras en Javascript
Qu significa que la gente haga programas abiertos para reutilizar? Grupos
de programadores en todo el mundo han ido desarrollando lo que se
llaman libreras, que no son mas que un conjunto de funcionalidades en
un lenguaje determinado, en este caso javascript, para hacer
determinadas tareas.
Qu tareas? Con algunas libreras podemos por ejemplo corroborar que
los campos en un formulario se hayan cargado correctamente o que no
estn vacos. O podemos crear animaciones con imgenes, o simplemente
mostrar un calendario para que un usuario elija una fecha. Son cosas que
parecieran sencillas, y realmente lo son si utilizamos las libreras que
tenemos a disposicin.
Eventos
Para usar las libreras vamos a tener que entender algunas cosas. Y
siempre que trabajemos con Javascript del lado del cliente tendremos que
manejar lo que son Eventos.
Los eventos son todas las acciones que el usuario inicia: dar clic sobre un
botn, presionar las teclas del teclado, etc. Cada vez que se produce un
evento, se crea un objeto.
Cada lenguaje de programacin tiene su propio modelo de eventos.
Javascript registra las fuentes de eventos (teclado, ratn, etc). La
aplicacin se queda escuchando y en el caso de que ocurra un evento
utilizamos la informacin recibida para realizar las acciones adecuadas.
Programacin del lado del cliente

Comencemos por el principio. En desarrollo web, existen una
categorizacin que define dos tipos de tecnologas: del lado del cliente y
del lado del servidor.
Las tecnologas del lado del servidor guardan informacin y modelos de
datos en el server y luego envan el cdigo de la pgina web al navegador
del usuario cuando este lo requiere. Las tecnologas del lado del cliente
directamente se interpretan y ejecutan directamente en el navegador del
usuario.
En general, ambas tecnologas interactan para crear un sitio web
completo.
Programacin del lado del cliente

Javascript es una tecnologa del lado del cliente que puede ser utilizada
para una variedad de cosas, como ser:
Validacin de formularios
Crear efectos
Cambiar estilos dinmicamente
Hacer clculos complejos
Etc.
Javascript se ha convertido en una tecnologa sumamente importante

porque el procesamiento del lado del cliente es mas eficiente que del lado
del servidor y es orientado a eventos (que veremos luego), que son las
interacciones del usuario con la interfaz.
Un primer ejemplo en JS
Para realizar nuestro primer programa en Javascript, tomemos el HTML que hicimos en el captulo
anterior, nuestro Hola Mundo
Y saquemos lo que hay en el tag h1 y cambiemos nuestro title a Mi primer programa en Javascript y
agregamos en el body una funcin para escribir informacin
<!DOCTYPE html>
<html>
<head>
<title>Mi primer programa en Javascript</title>
</head>
<body>
<script language=javascript type=text/javascript>
document.write(<h1>Hola Mundo desde Javascript</h1>);
document.write(<br/>Este es mi primer programa en Javascript!);
</script>
</body>
</html>
Corriendo nuestro ejemplo
Clickeen en el archivo HTML para abrirlo y vern el resultado. Lo que hace el tag
script es decir que all en el HTML se insertar un programa, y defino el lenguaje
en el que estar el mismo, en este caso Javascript. Luego dentro de mi cdigo JS
estoy escribiendo el documento HTML lo que se encuentra entre comillas, que no
es mas ni menos que cdigo HTML para que el navegador lo interprete y muestre
lo correspondiente.
Pero la potencia de Javascript, viene de lo que llamamos Eventos, que veremos en

la seccin 3, pero que de manera simple, son todas las interacciones que hace un
usuario con la interfaz. De esa manera cada vez que ocurre un evento podemos
activar lo que se llaman funciones de JS que realizarn algn tipo de
procesamiento y accin.
Funciones
En general, el tag de Javascript para funciones se suele poner en el tag Head, y luego
definimos una funcin utilizando la palabra function:

function decirHola()
{
document.write(Hola Mundo);
}
</script>
Y luego lo que haremos, en el body, ser llamar a la funcin:
decirHola();
</script>
Libreras
La otra manera de incluir funcionalidades en JS en nuestros programas,

reutilizando cdigo ya escrito, es llamando a libreras externas. Esto lo podemos
hacer poniendo una lnea como la siguiente:
<script language=javascript type=text/javascript src=attached.js></script>
De esta manera, es que podremos utilizar libreras como jQuery, que veremos en
la prxima seccin, solamente incluyendo el llamado a la misma insertando la
siguiente lnea en el head:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"></script>
Lo que haremos entonces ser simplemente, esperar la ocurrencia de un evento y

cuando ello ocurra, llamar alguna funcin de Javascript para que realice algn tipo
de accin
Para mas informacin: http://www.w3schools.com/js/default.asp
jQuery
jQuery es una librera de JavaScript que funciona de manera
rpida, es liviana y rica en funcionalidad. jQuery permite
manipular el HTML para modificarlo dinmicamente, nos
permite un mejor manejo de eventos, animacin y Ajax (que
veremos luego), de manera mucho ms simple que funciona
en prcticamente todos los navegadores.
JQuery se puede descargar e incluirlo en nuestro proyecto
directamente, o se puede utilizar desde un servidor remoto,
como vimos anteriormente.
Instrucciones de jQuery
La manera de escribir cdigo para jQuery es muy sencilla, y tiene cierta
forma similar con CSS y con Javascript. La sintaxis est hecha a medida
para la seleccin de los elementos HTML y realizar alguna accin sobre el
elemento.
$(selector).accin()
Por ejemplo:
$(this).hide() oculta el elemento donde se est haciendo foco

$("p").hide() oculta todos los elementos <p>.
$(".test").hide() oculta todos los elementos con class="test".
$("#test").hide() oculta el elemento id="test".
Instrucciones de jQuery
Entre las animaciones y efectos que podemos agregar a nuestra pgina utilizando jQuery, se
encuentran:
Y para manipular el HTML de nuestra pgina podremos utilizar funcionalidades como:
Hide/Show
Fade
Slide
Animate
Stop
Callback
Chaining
Get
Set
Add
Remove
Para mas informacin ingresar en: http://jquery.com/
Eventos en profundidad
Nada de lo que vimos tiene sentido si no entendemos en profundidad lo que

significa un evento. Mucha de la programacin de hoy da se maneja mediante
eventos, ya sea en una web o un dispositivo mvil.
La definicin corta es que un evento es una accin o acontecimiento detectado
por el programa que puede ser manejado por el mismo. Tpicamente, el programa
tiene uno o ms lugares dedicados a manejar los eventos. La fuente mas usual de
eventos es el usuario (que pulsa una tecla en el teclado, mediante el click de un
mouse, el tap en una pantalla tctil, etc). Otra fuente podra ser un dispositivo de
hardware, como un temporizador o reloj. Cualquier programa tambin puede
generar su propio conjunto de eventos, por ejemplo, para comunicar la finalizacin
de una tarea.
Programacin orientada a eventos

Los programas se basan en los eventos para modificar su comportamiento
en respuesta a los mismos, a menudo con el objetivo de ser interactivo. De
esta manera es que se programan sistemas que son orientados a eventos.
En la programacin web y en la programacin de aplicaciones para
dispositivos mviles, los eventos existentes son muchos y variados.
Simplemente para activarlos debemos agregar programacin que realice
algo cuando ese evento ocurre. Si no existe ese cdigo no significa que el
evento no est ocurriendo sino simplemente que no haremos nada con el
mismo
Algunos eventos comunes

Algunos de los eventos mas comunes que se utilizan en programacin web
y mvil son:
onLoad: se dispara cuando se carga la pgina, antes de cualquier accin

onFocus: cuando ponemos el foco en un campo de ingreso de datos
onKeyPress: cuando se presiona una tecla
onKeyUp: cuando se suelta una tecla presionada
onKeyDown: cuando se se esta presionando una tecla
onClick: cuando se presiona el botn del mouse
onDblClick: doble click del mouse
onMouseMove: cuando se mueve el mouse
onMouseOver: cuando el mouse pasa sobre un elemento
Recursos
http://www.w3schools.com/js/default.asp
http://jquery.com/
http://www.w3schools.com/jquery/default.asp
http://www.w3schools.com/jsref/dom_obj_event.asp
http://jqueryui.com/

Capitulo IV

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Capitulo IV

Caricato da

Copyright:

Formati disponibili

Microsoft Virtual Academy

Cursos tcnicos gratuitos en lnea

Tome un curso gratuito en lnea.

Programacin del lado del cliente

Programacin del lado del cliente

Javascript se ha convertido en una tecnologa sumamente importante

Corriendo nuestro ejemplo

Pero la potencia de Javascript, viene de lo que llamamos Eventos, que veremos en

<script language=javascript type=text/javascript>

La otra manera de incluir funcionalidades en JS en nuestros programas,

<script language=javascript type=text/javascript src=attached.js></script>

Lo que haremos entonces ser simplemente, esperar la ocurrencia de un evento y

$(this).hide() oculta el elemento donde se est haciendo foco

Y para manipular el HTML de nuestra pgina podremos utilizar funcionalidades como:

Para mas informacin ingresar en: http://jquery.com/

Nada de lo que vimos tiene sentido si no entendemos en profundidad lo que

Programacin orientada a eventos

Algunos eventos comunes

onLoad: se dispara cuando se carga la pgina, antes de cualquier accin

Potrebbero piacerti anche