JavaScript es un lenguaje que se utiliza para tener control del contenido web en el navegador es decir en el lado del cliente, para poner efectos y hacer mas dinámica la experiencia en web. La historia de JavaScript no la vamos a abordar en este momento.
Una de las cosas que sabemos de JavaScript es que no lo sabemos en realidad. Es “un lenguaje incomprendido”. Uno de los problemas principales que se le achacan a este lenguaje es que no es portable entre navegadores. En realidad esto no es así: JavaScript es un lenguaje orientado a objetos independiente que se utiliza para realizar operaciones y manejar el DOM.
Ahora bien ¿qué es el DOM? El DOM es el Modelo de Objetos del Documento (Document Object Model), y a mi parecer la forma de accederlo es espantosa, complicada y confusa en algunos casos. En si, es el conjunto de etiquetas y otros objetos que se encuentran en la página. Como cada navegador tiene su historia antes de que se comenzara a estandarizar el DOM por completo cada uno cumplía con sus propios estándares, los cuales se han homologado conforme el tiempo con excepción del Internet Explorer de Microsoft que hasta ahora ha adelantado en esto.
Si embargo aunque JavaScript funcione casi igual entre navegadores compatibles existen diferencias entre las capacidades que tiene cada uno comparado con el otro y esto nos obliga a hacer un código para cada uno de los navegadores que existen en el mercado; los cuales son muchos mas de los que puedes tener en la cabeza en este momento.
Es en este punto donde entran al juego los Frameworks. Los Frameworks son estructuras de soporte que nos ayudan a desarrollar en diferentes plataformas y en este caso también diferentes navegadores, haciendo un solo código una vez y funcionando igual en todos los navegadores.
jQuery es un Framework sencillo, rápido, pequeño y fácil de expandir. Nos provee de herramientas para el manejo del DOM de forma amigable. Podemos manejar las etiquetas, sus contenidos, etc. Podemos agregar funcionalidad extra con Plugins que sea requerida para ciertas tareas específicas y con esto agregar dinamismo y sacarle el mejor provecho a la página.
Bueno empecemos en materia y quitémonos el miedo. Empezaremos con lo básico: Cambiar el contenido de un div.
<input type="button" id="botoncambio" value="Cambiar el texto" /> <div id="contenido">Este texto será reemplazado</div>
Y la parte del JavaScript al final de la página:
$('#botoncambio').click(function(){
$('#contenido').html('El texto fue reemplazado');
});
Tenemos dos elementos, uno es un div que se llama “contenido” y el otro es un botón que se llama “botoncambio”. Al momento de presionar el botón, el texto cambiará. ¿Cómo?
jQuery es llamado. La variable/objeto $ es jQuery. Es una forma abreviada de llamarlo. El constructor del objeto realiza una selección de elementos sobre los cuales se aplicarán los comandos adjuntos a jQuery. Los selectores nos permiten obtener uno o varios objetos del DOM sin complicarnos. Por ejemplo: en la primera línea del Script llamamos al botón indicándole a jQuery que debe buscar los objetos (etiquetas) que se llamen ‘botoncambio’. Sabemos esto porque el nombre va precedido de un signo numeral (#). Si el selector fuese precedido por un punto, llamaría a los elementos que tengan como una de sus clases “botoncambio”. Si fuera sin ninguno de los dos, buscaría la etiqueta llamada ‘botoncambio’.
Luego de obtener el elemento tenemos que decir qué queremos hacer con el. Estamos diciendo que al momento que se haga clic en este botón, se hará el contenido que se encuentra dentro de la función. Esta acción también comienza con un selector, llamando al div al que se le va a cambiar de contenido. Este contenido está siendo cambiado al decirle que escribirá en el html del objeto el texto entre comillas.
Para comenzar estamos bien. Luego aprendemos más sobre selectores y manejo del DOM. Agregaremos efectos, utilizaremos plugins y hasta podremos hacer el nuestro.
#1 by Ana Mateo (Siete Mares) on 29/Ago/2009
Hola Mario Dios le bendice felicidades por esta novedosa pagina, me da mucho gusto saber de ud. que tenga un bonito fin de semana y cuando tenga tiempecito pase por aca.
Dios le bendice
#2 by eder on 2/Sep/2009
creo que elk lenguaje esta muy complicado de entender para cualquier persona que lo lea
#3 by Chucho (Cancuen) on 9/Sep/2009
Fijate que el lenguaje en si no es compicado. Cabal como dije, es un lenguaje incomprendido. Te da muchas cosas y es muy bonito, pero hay que saber manejarlo. Lo que hace jQuery en si es ayudarte donde JavaScript complica las cosas asi también te añande funcionalidad que no tiene (como el bendito $.trim() y que como sirve). En si JavaScript pertenece a la familia de lenguajes tipo C, que incluyen a C, C++, C#, php, Perl, Java, etc., asi que en si es acostumbrarte (o reacostumbrarte) a ver este tipo de cosas. La idea aqui es ir destapando las dudas que se tengan y que los post los podamos explicar bien. Cualquier duda o algo que no quedo bien entendido, escríban y nosotros les contestamos con todo gusto. Éxitos.
#4 by Attakinsky on 2/Sep/2009
@eder, jQuery en realidad no es complicado, de hecho, en las únicas dos líneas que Mario escribió en este lenguaje, podrás ver que utiliza las referencias ‘#botoncambio’ y ‘#contenido’ que es la misma que utilizaría CSS para referenciar objetos por Id.
Pero para ayudarte a todo quede claro, podrías colocar acá tus dudas puntuales y vamos a hacer lo posible por resolverlas.
#5 by adario21 on 4/Sep/2009
Están buenos los posts, lo único que a mi parecer para personas principiantes aún no queda muy claro porque creo que se saltan algunas muy pequeñas cosas que se asumen pero que cuando uno lo ve por primera vez no lo toma en cuenta.
Por ejemplo, teclée el código pero al visualizar mi html en el navegador puedo ver el texto JS…creo que es porque tengo que inicializar la librería ó algo así?
#6 by Attakinsky on 4/Sep/2009
@adario21 tienes razón, gracias por la observación, ahora mismo le trasladamos a Chucho (Cancuen) tu comentario
#7 by Chucho (Cancuen) on 9/Sep/2009
Compañero disculpe la demora, pero el trabajo en la oficina me agobia. Mira pues, para poder hacer un contenido usando jQuery tenés que colocar la sintaxis dentro de las etiquetas del código de JavaScript, que al fin y al cabo es eso, solo que facilitado.
<script type=”text/javascript”>
# tu codigo jQuery aqui (y cualquier otro JavaScript también)
</script>
Podés poner el código al final de la página antes de cerrar el body, y ya luego me tocará explicar por qué, pero vamos paso a paso.
Gracias por tus comentarios. Sigo escribiendo.
#8 by Douglas on 10/Sep/2009
Creo que mucha de la confusión deriva de que falto el código bien estructurado.
Dentro de <HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(
function()
{
$('#botoncambio').click(
function()
{
$('#contenido').html('El texto fue reemplazado');
});
});
</script>
Dentro de <BODY>
<input type="button" id="botoncambio" value="Cambiar el texto" />
<div id="contenido">
Este texto será reemplazado
</div>
El $(document).ready() es necesario para que el javascript se ejecute al terminar de cargar todos los elementos de la página.
#9 by adario21 on 17/Sep/2009
@Douglas ok, muchas gracias, mucho más claro ahora
#10 by samipr on 2/Nov/2009
No me parece para nada complicado, solo se necesita saber cosas basicas de HTML.
Felicidades por el nuevo estara entre mis favoritos
#11 by orlando on 8/Ene/2010
Genial, buen post me agrada la simplicadad con la que explicas porq como tu dices este es un lenguaje inconprendido puesto q recien me estoy iniciando en esto y no encontraba nada agradable con que comenzar esta nueva aventura, gracias por esta explicacion, y quisiera que me ayudases como pasar parametros para q mi pagina en php lo reciba con un GET,
saludos y muchas gracias de nuevo