JavaScript y Jquery

Contenidos

¿Qué es JavaScript?

JavaScript o JS se define como un lenguaje orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico. Como definición está bien pero de momento si estás empezando a programar olvidate un poco de todo eso. JavaScript es un lenguaje que nace y se llega a proclamar como estándar en el lado del cliente. ¿Qué quiere decir esto? desde el nacimiento de la web, las páginas han ido evolucionando al principio eran simplemente información y los usuarios no podían interactuar directamente, progresivamente hubo applets y scripts como Flash o Java (Java y JavaScipt no tienen nada que ver) para que fueran más dinámicas. Para que el usuario interactuara directamente con el navegador y hoy en día el lenguaje más extendido para ello es JavaScript

javascript
javascript

¿Qué puedo hacer con JavaScript?

Básicamente casi cualquier cosa, ejemplos hay miles, desde gráficas que se actualizan dinamicamente, las actualizaciones del Twitter o Facebook son peticiones de JavaScript para ir añadiendo los últimos comentarios o incluso videojuegos.

JavaScript sirve para cualquier cosa que se haga desde un navegador, podemos modificar cualquier elemento de una web con este lenguaje. Lo que hace JavaScript es modificar el DOM (Document Object Model), esta palabra se ve mucho en los manuales de JS y el DOM básicamente es el modelo de como se estructuran los objetos de una página web.

Breve historia de JavaScript

JavaScript es creado por el navegador Netscape en 1995 y su nombre es debido al aumento de la popularidad de Java, muchos al principio pensaron que podría ser una ampliación de este lenguaje, pero no tienen absolutamente nada que ver. JavaScript es una marca registrada por Oracle.

Posteriormente Netscape lanza un JavaScript del lado del servidor, Netscape Enterprise Server pero cuando realmente JS adquiere importancia es con NodeJS.

Características JavaScript

La sintaxis de JavaScript gran parte de ella es muy similar a C, (if, else, for, while…), si no sabes nada de programación puedes olvidarte un poco de estas cosas. Las variables pueden cambiar su tipo, una variable en C se define como int (número entero), float (número real), chart (caracter alfanumérico), array (vector)… sin embargo en JavaScript esa variable puede cambiar entre los distintos tipos, ser un número luego un texto o un array incluso un objeto (más abajo lo explicamos).

JavaScript: objetos y prototipos.

Cuando hablamos de objetos son elementos con una serie de propiedades dentro, un objeto podría ser un número imaginario, compuesto por parte real (variable float), parte imaginaria (variable float), modulo (float) y argumento (float) y con las funciones suma, multiplicación, división… cuando tenemos dos objetos complejos y los sumamos debemos realizar la función suma compleja, y crear un nuevo objeto resultado del mismo. Esto es aplicable a cualquier cosa, por ejemplo un videojuego cada personaje es un objeto con unas características.

Por otro lado están los prototipos básicamente es lo mismo que un objeto pero trata de diferente forma la herencia, digamos que una clase de objetos podemos crear una subclase ligeramente diferente, por lo que heredamos de la padre y añadimos nuevas características. Eso es lo que hace lenguajes como Java o C++ y este segundo grupo no son tratados como objetos sino como instancias, no entraremos en detalle pues JavaScript trata a todo como objetos no distinguen si fueron heredados o no. Por otro lado las clases de objetos son elementos inmutables mientras que los prototipos pueden cambiar.

En resumen JavaScript es un lenguaje, al menos a mi modo de ver, muy libre te permite hacer el mismo código de muchas formas distintas y variando y sin ser tan estricto como otros lenguajes.

Ejemplo de JavaScript

Por último un breve ejemplo de este lenguaje y como modifica la estructura de un html.

1
2
3
4
5
6
7
<input id="lectura" name="username" type="text" />
<div id="escritura">Cambio de texto</div>
<script>
cambio = function(){
document.getElementById("escritura").innerHTML = document.getElementById("lectura").value;
}
</script>

Como vemos en este html simplemente tenemos un input de texto (para introducir una palabra) y un div cuyo interior se mostrará el texto introducido anteriormente. Copia y pega este texto en un archivo de texto (con cualquier editor de txt basta) y guarda con la extensión html.

Dentro de Script podemos ver el código de JavaScript a ejecutar. Pero antes de eso si nos fijarmos en el input tenemos:

1
onchange="cambio()"

Esto quiere decir que cuando aquí cambie algo debe ejecutar la función cambio, que definiremos:

1
cambio = function()

Esta función dice que el elemento cuya id=»escritura» debe escribir lo mismo que el valor del elemento con id=»lectura».

1
document.getElementById("escritura").innerHTML = document.getElementById("lectura").value;

¿Qué es Jquery?

Para muchos programadores de JavaScript, Jquery es ya casi parte del lenguaje, es una librería que nos facilita mucho la programación y ahorra código. De hecho mucha gente comienza aprendiendo JavaScript con Jquery.

jquery
jquery

Integrando Jquery en JavaScript

Existen básicamente dos formas de integrar Jquery en nuestra web, bien descargando el archivo desde la web jquery.com y añadiendo en la cabecera del html.

1
<script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>   

O bien desde un CDN (red de entrega de contenidos) generalmente de Google, este método añadimos la librería de Jquery usando una url de un servidor externo.

1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

Ejemplo de Jquery

A continuación un ejemplo de Jquery exactamente igual al que realizamos anteriormente para ver como es más sencillo.

1
2
3
4
5
6
7
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<input id="lectura" name="username" type="text" />
<div id="escritura">Cambio de texto</div>
<script>
cambio = function(){
$("#escritura").html($("#lectura").val())
</script>

Como vemos ahora en este ejemplo hemos ahorrado código y es mucho más sencillo, básicamente con la función $ llamamos a un objeto del DOM, si es # será una id, si es un . será un class. En nuestro caso llamamos a escritura y crea un objeto con una función llamada html(), lo que queda dentro del paréntesis es lo que va a escribir en id=»escritura» y en este caso llamamos a id=»lectura» y que nos de su valor, eso es lo que hace val() obtener el valor actual de ese input text.

Aquí en ambos ejemplos hemos ejecutado parte del código en el html con onchange=»cambio()», pero también se puede ejecutar el el script con ciertas funciones como $(«#lectura»).onchange().

 

Summary
JavaScript y Jquery
Article Name
JavaScript y Jquery
Description
¿buscando información sobre Jquery y JavaScript? Aquí una breve introducción a este lenguaje de programación y su librería más usada. Javascript es el lenguaje de los navegadores, es usado siempre en la web, jQuery es una librería que nos facilita mucho la vida para programar JS.
Author
Publisher Name
Drouiz
Publisher Logo

Leave a Reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.