JavaScript y JQuery

John Andrés Medina Juan Manuel OlayaJefferson Guarin Sebastian Vargas

JavaScript

¿Qué es JavaScript?JavaScript es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico.

Javascript es un lenguaje que puede ser utilizado por profesionales y para quienes se inician en el desarrollo y diseño de sitios web. No requiere de compilación ya que el lenguaje funciona del lado del cliente, los navegadores son los encargados de interpretar estos códigos.

JavaScriptJavaScript se diseñó con una sintaxis similar al C, aunque adopta nombres y convenciones del lenguaje de programación Java. Sin embargo Java y JavaScript no están relacionados y tienen semánticas y propósitos diferentes.

Javascript tiene la ventaja de ser incorporado en cualquier página web, puede ser ejecutado sin la necesidad de instalar otro programa para ser visualizado.

Un poco de historia1990 - LiveScript1995 - JavaScript y VBScript1996 - JScript1996 Hoy - “European Computer Manufacturers Association” (ECMA)

Características● Maneja objetos dentro de nuestra página Web y sobre ese objeto

podemos definir diferentes eventos.● Es dinámico, responde a eventos en tiempo real.● El lenguaje de scripting es seguro y fiable● Los script tienen capacidades limitadas, por razones de seguridad● Un problema importante es que el código es visible y puede ser leído por

cualquiera● El código Javascript se ejecuta en el cliente● El código del script debe descargarse completamente

¿JavaScript?¿Dónde?Entre los diferentes servicios que se encuentran realizados con Javascript en Internet se encuentran:

● Correo● Chat● Buscadores de Información

¿JavaScript?¿Dónde?También podemos encontrar o crear códigos para insertarlos en las páginas como:

● Reloj● Contadores de visitas● Fechas● Calculadoras● Validadores de formularios● Detectores de navegadores e idiomas

Programando en JavaScriptComo ya se mencionó anteriormente JavaScript es orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico.

Variable:- var nombreVariable = String/integer/float ;Objetos:-var objeto = new Object();

objeto.nombre = “Objetico”;objeto.edad = 23;

-var object1 = {color: "red"

};-var object2 = {};object2.color = "yellow";

Programando en JavaScript-Condiciones:

if(i<10){ … }

-Ciclos:

for(i; i<10; i++){ … }

-Arreglos:

var miArreglo = new Array(“12”, “77”, “5”)

¿Qué es JQuery?JQuery es considerado un Framework de JavaScript. Es decir, un conjunto de funciones que ya fueron desarrolladas y probadas, están listas para utilizarlas de una manera muy simplificada.

En otras palabras, podremos lograr los mismos resultados, en menos tiempo sin necesidad de programar una funcionalidad completamente.

Características de JQuery● Selección de elementos DOM.● Eventos.● Manipulación de la hoja de estilos CSS.● Efectos y animaciones● Animaciones personalizadas.● AJAX.● Soporta extensiones● Utilidades varias como obtener información del navegador, operar con

objetos y vectores, funciones para rutinas comunes, entre otros.

¿Qué es DOM?

Modelo de Objetos del Documento (DOM) es esencialmente una interfaz de programación de aplicaciones (API) que proporciona un conjunto estándar de objetos para representar documentos HTML y XML, un modelo estándar sobre cómo puede combinarse dichos objetos, y una interfaz estándar para acceder a ellos y manipularlos. A través del DOM, los programas pueden acceder y modificar el contenido, estructura y estilo de los documentos HTML.

En otras palabras DOM es una interfaz de programación de aplicaciones para acceder, añadir y cambiar dinámicamente contenido estructurado en documentos.

¿Qué es AJAX?

AJAX es una técnica de desarrollo web para crear aplicaciones interactivas. Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, mejorando la interactividad, velocidad y usabilidad en las aplicaciones.

¿Qué puedo hacer con JQuery?

JQuery nos permite agregar efectos y funcionalidades complejas a nuestra aplicacion web, como por ejemplo: galerías de fotos dinámicas y elegantes, validación de formularios, calendarios, entre otros. Otra ventaja sin duda es la posibilidad que nos brinda de trabajar con AJAX, sin preocuparnos de los detalles complejos de la programación. Además cuenta con la posibilidad de agregar plugins, facilitando más nuestro trabajo.

¿Cómo usar JQuery?

Cargamos el archivo .js que es la librería:

<script type= “text/javascript” scr=“jquery.js”>

La forma de interactuar con la pagina es mediante la función $(), que recibe como parámetro una expresión CSS o el nombre de una etiqueta HTML y devuelve todos los nodos (elementos) que concuerdan con la expresión. Esta expresión es denominada selector.

$(‘#myId’); // Devolverá el elemento con id=“myId”

¿Cómo usar JQuery?

Guardar selecciones:

var $divs = $(‘div’);

Asignar y obtener:

$(‘h1’).html(‘hola mundo’);$(‘h1’).html();

¿Cómo usar JQuery?

Encadenamiento:$(‘content’)

.find(‘h3’)

.eq(2)

.html(‘nuevo texto para el tercer elemento h3’);

Establecer propiedades CSS$(‘h1’.css({

‘fontSize’ : ‘100px’,‘color’ : ‘red’

});

¿Cómo usar JQuery?

Ejemplo método utilitario

$.inArrayDevuelve el indice de un valor de un vector, o -1 si el valor no se encuentra en el vector.

var myArray = [1, 2, 3, 5];

if ($.inArray(4, myArray !== -1) {console.log(‘valor encontrado’);

}

Bibliografía● http://www.uazuay.edu.

ec/estudios/sistemas/lenguaje_iii/MAnualJavaScript/caracteristicas.htm

● http://www.maestrosdelweb.com/editorial/%C2%BFque-es-javascript/

● http://www.htmlpoint.com/javascript/corso/js_02.htm

● http://librojquery.com/#conceptos-básicos-de-jquery

● http://api.jquery.com/