Unidad 5
Javascript y jQuery
Universidad Tecnológica Nacional
Facultad Regional Córdoba
Cátedra: Programación de Aplicaciones Visuales 2
Javascript
El lenguaje
PAV2 - UTN FRC
Javascript y los browsers
Lo más difícil de usar JavaScript
● El problema puede ser la implementación de DOM del browser
● Los motores de JavaScript son diferentes
Estrategias
● Escribir código compatible con los estándares
● Escribir código que tenga en cuenta el entorno (complicado → mucho
código)
JavaScript puede no estar disponible
● Deshabilitado o no disponible en el browser PAV2 - UTN FRC
Herramientas
● Google Chrome DevTools / Firebug
● JSLint ([Link]
● JSHint ([Link]
● Mozilla Developer Network:
[Link]
PAV2 - UTN FRC
El elemento script en HTML
● Es clave a la hora de usar JavaScript en la página
● Dos formas de usarlo:
○ Inline
<script>
[Link]('Hola pagina');
</script>
○ Archivo JavaScript externo
<script src="[Link]" />
● De forma opcional se puede especificar el contenido
○ text/javascript
● Se pueden incluir tantos scripts como sea necesario
PAV2 - UTN FRC
¡Hola mundo!
write()
<script language=javascript>
[Link]("¡Hola Mundo!");
</script>
alert()
<script language=javascript>
alert("¡Hola Mundo!");
</script>
PAV2 - UTN FRC
Demo 5.1.
Hola Mundo utilizando el elemento script
PAV2 - UTN FRC
Tipos de dato
JavaScript no es un lenguaje fuertemente tipado (strongly typed)
Javascript soporta los siguientes tipos de datos core:
● string
● number (integer y float)
● boolean
● null
● undefined
● object
PAV2 - UTN FRC
Tipos de dato
Hay otros tipos de datos, pero no pertenecen al core sino que son
especializaciones del tipo object, se los denomina built-in objects:
● String
● Boolean
● Number
● Date
● Array
● Object
● Function
● RegEx
● Error
PAV2 - UTN FRC
Variables
Crear una variable
var a = "cadena";
var b = 15;
var c = 12.3, d = "otra cadena"
Asignar una variable
a = "nueva cadena";
b = 2555;
PAV2 - UTN FRC
CONTENIDO ADICIONAL
Variables
¿Y si no pongo var?
nueva = 25;
En el ámbito global no hay diferencias
En el ámbito local de una función si ponemos var creará una variable local, de lo
contrario buscará en la cadena de ámbitos y cuando la encuentre asignará esa
variable. Si no la encuentra crea la variable global.
PAV2 - UTN FRC
Variables: tipos
typeof es un operador que devuelve el tipo básico de una variable
var a = 25;
typeof 25; /* devuelve: "number" */
La propiedad constructor devuelve el constructor de la variable y puede servir
para tener información más precisa sobre el tipo de variable de que se trata.
var b = new Date(2017,01,01);
typeof b; /* devuelve: "object" */
[Link]; /* devuelve function Date() { [native code] } */
PAV2 - UTN FRC
Variables: conversión de tipos
En JavaScript la conversión de tipos se puede dar por:
● Explicitamente: Usando una función de conversión
● Implicitamente: por JavaScript automáticamente
PAV2 - UTN FRC
Variables: conversión a string
Se pueden convertir datos a string usando:
● la función global: String()
● el método .toString()
String(a);
String(123);
[Link]();
(123).toString();
String(false);
String(true);
[Link]();
[Link]();
String(Date());
Date().toString();
PAV2 - UTN FRC
Variables: conversión a number
Se pueden convertir datos a number usando:
● la función global: Number()
● el método .parseInt()
● el método .parseFloat()
● el operador unario +
Number("210"); /* devuelve 210 */
Number("21ax"); /* devuelve NaN */
parseInt("21ax") /* devuelve 21 */
parseInt("aa") /* devuelve NaN */
parseFloat("12.21")
parseFloat("[Link]") /* devuelve 15 */
PAV2 - UTN FRC
Variables: conversión a number
+"32";
+"21a" /* devuelve NaN */
Number(false) /* devuelve 0 */
Number(true) /* devuelve 1 */
d = new Date();
Number(d) /* devuelve 1404568027739 */
PAV2 - UTN FRC
Operadores aritméticos
+ suma
- resta
* producto
% módulo
++ incremento
-- decremento
PAV2 - UTN FRC
Operadores lógicos
&& and
|| or
! not
?: operador ternario
PAV2 - UTN FRC
Operadores de comparación
== igualdad
!= desigualdad
> mayor
< menor
>= mayor o igual
<= menor o igual
=== estrictamente iguales
!== no estrictamente iguales
PAV2 - UTN FRC
Sentencias condicionales: if / if..else
if (condicion) {
código que se ejecuta si la condición es verdadera
}
if (condicion) {
código que se ejecuta si la condición es verdadera
} else {
código que se ejecuta si la condición es falsa
}
PAV2 - UTN FRC
Sentencias condicionales: else if
if (condicion1) {
código que se ejecuta si la condición1 es verdadera
} else if (condicion2) {
código que se ejecuta si la condición1 es falsa y la
condición2 es verdadera
} else {
código que se ejecuta si la condición1 es falsa y la
condición2 es falsa
}
PAV2 - UTN FRC
Sentencias condicionales: switch
switch(expresión) {
case n:
código
break;
case m:
código
break;
default:
código por defecto
}
PAV2 - UTN FRC
Sentencias iterativas: for
for (sentencia1; sentencia2; sentencia3) {
código
}
for (var i = 0; i < [Link]; i++) {
Cosas[i]
}
PAV2 - UTN FRC
Sentencias iterativas: for in
/* Recorre las propiedades de un objeto */
for (var propiedad in Cosa) {
Cosa[propiedad]
}
PAV2 - UTN FRC
Sentencias iterativas: while
while (condición) {
código
}
do {
código
} while (condición);
PAV2 - UTN FRC
Sentencias iterativas: break y continue
break: sale de la iteración y continúa ejecutando la sentencia siguiente, si la
hay:
break;
continue: omite la iteración corriente y continúa la iteración siguiente en el
caso de que la condición del bucle se satisfaga.
continue;
PAV2 - UTN FRC
Arrays
Sintaxis:
var nombre-array = [item1, item2, ...];
Ejemplo:
var colores = ["Verde","Rojo","Azul"];
Acceder a los elementos de un array:
var color1 = colores[0];
colores[2] = "Amarillo";
PAV2 - UTN FRC
Arrays
Los arrays son una clase especial de objeto cuyas propiedades son valores
numéricos.
Como reconocer un array:
[Link](colores); // Solo en ECMAScript 5 o sup
[Link]().indexOf("Array") > -1;
colores instanceOf Array;
PAV2 - UTN FRC
Arrays: propiedades y métodos
length: devuelve el tamaño del array
push(): agrega un elemento al final
pop(): remueve el último elemento
shift(): remueve el primer elemento y mueve el resto de los elementos
unshift(): agrega un elemento al principio del array
delete: elimina un elemento (dejando un elemento undefined)
delete colores[1];
splice(posicion,
: elementos_a_remover, nuevo1, nuevo2,...): agrega elementos a un array
removiendo aquellos específicados
sort(): ordena el array
reverse(): invierte el orden de los elementos del array
PAV2 - UTN FRC
Demo 5.2.
Usar arrays en javascript
PAV2 - UTN FRC
Funciones
function nombre(par1, par2, par3) {
/* código */
}
function sumar(a,b){
return a+b;
}
PAV2 - UTN FRC
Funciones
Para invocar una función se utiliza el operador ()
var a = sumar(2,3);
Se puede asignar una función como cualquier objeto
var c = sumar;
d = c(5,6); /* d contendrá 11 */
PAV2 - UTN FRC
Objetos
Se puede definir un objeto asignando sus propiedades y métodos
var persona = new Object();
[Link] = "Juan";
[Link] = "Perez;
[Link] = function(){
return [Link] + " " + [Link];
};
También se puede declarar y definir mediante literales
var auto = {marca:"Ford", modelo:"Focus", año:2016};
PAV2 - UTN FRC
Objetos
Se puede acceder a las propiedades mediante la notación punto
var m = [Link];
[Link] = "Fiat";
O usando corchetes [ ]
var m = auto["marca"];
auto["marca"] = "Fiat";
PAV2 - UTN FRC
JSON
JSON (se pronuncia Jason) viene de JavaScript Object Notation
● Es un formato de intercambio de datos independiente del lenguaje
● Es auto-descripto
● Es facil de entender
{
"clientes":[
{"nombre":"Juan", "apellido":"Perez"},
{"nombre":"Pedro", "apellido":"Garcia"},
{"nombre":"Maria", "apellido":"Sanchez"}
]
}
PAV2 - UTN FRC
JSON
Sintaxis:
● Los datos están como pares nombre/valor
● Los datos se separan por coma
● Las llaves contienen objetos
● Los corchetes contienen arrays
Convertir texto JSON a un objeto JavaScript
var objeto = [Link](texto);
PAV2 - UTN FRC
DOM
DOM (Document Object Model) Modelo de Objetos del Documento
● Es una API para documentos validos HTML y bien construidos XML
● Permite el acceso a la estructura de una página HTML mediante el mapeo
de los elementos de esta página en un árbol de nodos.
● define:
○ Los elementps HTML como objetos
○ Las propiedades de todos los elementos HTML
○ Los métodos para acceder a todos los elementos HTML
○ Los eventos para todos los elementos HTML
PAV2 - UTN FRC
DOM: Tipos de nodo
La especificación DOM define 12 tipos de nodo, pero los de uso más habitual
son:
● Document: nodo raíz del que derivan todos los demás nodos del árbol
● Element: representa cada una de las etiquetas HTML
● Attr: representa cada uno de los atributos de los elementos HTML
● Text: contiene el texto encerrado por una etiqueta HTML.
● Comment: representa cada comentario en el documento.
PAV2 - UTN FRC
DOM: Encontrar nodos
getElementById()
var cabecera = [Link]("cabecera");
getElementsByTagName()
var parrafos = [Link]("p");
var primerParrafo = parrafos[0];
getElementsByClassName()
var parrafos = [Link]("resaltado");
PAV2 - UTN FRC
DOM: Cambiar nodos
innerHTML
[Link]("cabecera").innerHTML = "Cabecera";
Atributos
[Link]("foto").src = "[Link]";
[Link]("btnOk").value = "Aceptar";
Estilos CSS
[Link]("p2").[Link] = "blue";
[Link]("demo").[Link] = "center";
PAV2 - UTN FRC
DOM: Eventos
[Link]("btnFecha").onclick = mostrarFecha;
function mostrarFechaDate() {
[Link]("txtFecha").innerHTML = Date();
}
<div onmouseover="mOver(this)" onmouseout="mOut(this)"
style="background-color:red">
Pasar el mouse</div>
<script>
function mOver(obj) {[Link] = "Excelente!"}
function mOut(obj) {[Link] = "Pasar el mouse"}
</script>
PAV2 - UTN FRC
Ejercicio 5.1.
Cargar un listado de artículos contenidos en un JSON al presionar un botón en el
documento HTML
PAV2 - UTN FRC
jQuery
Framework
PAV2 - UTN FRC
¿Qué es jQuery?
● Una librería JavaScript liviana
● Su propósito es permitir usar JavaScript fácilmente
● Soluciona la mayoría de los problemas derivados de usar distintos browsers
(cross-browser issues)
● Es fácil de aprender
● Es extensible
PAV2 - UTN FRC
Esencialmente
Nos permite:
● Obtener ciertos elementos
● Hacer algo con ellos
○ agregar o remover contenido o datos
○ modificar el estilo
○ agregar eventos
○ agregar efectos
○ analizar el contenido
PAV2 - UTN FRC
Usar jQuery - Paso 1
Agregar la librería a la página:
Referencia a la librería descargada
<script src="/jquery/1.10.2/[Link]"></script>
Referencia a CDN (Content Delivery Network)
<script src="//[Link]/ajax/libs/jquery/1.10.2/[Link]"></script>
PAV2 - UTN FRC
Usar jQuery - Paso 2
Agregar código inicial
Esto espera que la página (en realidad la jerarquía DOM) cargue (no queremos
código que refiera a elementos que todavía no existen)
<script>
$(document).ready(function() {
// Acá va el código
});
</script>
PAV2 - UTN FRC
Demo 5.3.
Demostración de $(document).ready()
PAV2 - UTN FRC
Demo 5.4.
La documentación de JQuery: [Link]
PAV2 - UTN FRC
Sintaxis
$("#div_mensaje").show();
selector acción
PAV2 - UTN FRC
Seleccionar
$()
[Link]
PAV2 - UTN FRC
Selectores
● Selector de elemento
$("p")
● Selector #id
$("#seccion_principal")
● Selector .class
$(".importante")
PAV2 - UTN FRC
Selectores: seleccionar múltiples elementos
● Seleccionar varios elementos html
$("p,a,div")
$(".articulos,.detalles")
● Seleccionar descendientes
$("table tr")
● Combinar
$("[Link]")
PAV2 - UTN FRC
Selectores: seleccionar por atributo
● Se usan los corchetes
$("input[value]")
//todos los elementos input que tienen el atributo value
● Seleccionar por el valor de un atributo
$("input[type='text']")
//todos los textboxes
$("input[type='text']").attr('placeholder','ingrese texto aqui');
PAV2 - UTN FRC
Selectores
$("*") Selecciona todos los elementos
$(this) Selecciona el elemento HTML corriente
$("[Link]") Selecciona todos los elementos <p> con clase encabezado
$("p:first") Selecciona el primer elemento <p>
$("ul li:first") Selecciona el primer elemento <li> del primer <ul>
$("ul li:first-child") Selecciona el primer <li> de cada <ul>
$("[href]") Selecciona todos los elementos que tienen el atributo href
$("a[target='_blank']") Selecciona todos los elementos <a> con el valor del atributo target igual a _blank
$("a[target!='_blank']") Selecciona todos los elementos <a> con el valor del atributo target distinto de _blank
$(":button") Selecciona todos los elementos <button> y los elementos <input type="button">
$("tr:even") Selecciona todos los elementos <td> pares
$("tr:odd") Selecciona todos los elementos <td> impares
$("[id$='txtApellido']") Selecciona todos los elementos cuyo id termina con txtApellido
PAV2 - UTN FRC
Selectores: Ejemplo
$(document).ready(function(){
$("button").click(function(){
$("#mensaje").hide();
});
});
PAV2 - UTN FRC
Iterar en los elementos seleccionados
Se usa each para iterar los elementos seleccionados
.each(function(index,element))
$(document).ready(
function() {
$('div').each(
function() {
alert($(this).html());
});
});
PAV2 - UTN FRC
Iterar en los elementos seleccionados
$(document).ready(
function() {
$('div').each(
function() {
alert($(this).html());
});
});
PAV2 - UTN FRC
Demo 5.4.
En cada div del documento agregar el número de div entre paréntesis
PAV2 - UTN FRC
Manipular el DOM
.html() //obtiene o asigna el html de un elemento dado
.attr() //permite recuperar o asignar valor a un atributo, se pueden modificar varios atributos a la
vez pasando un JSON como parámetro
.css() //permite recuperar o asignar estilos css se pueden modificar varios a la vez pasando un JSON
como parámetro
.append() .appendTo() .prepend() .prependTo() .remove() //agregan y remueven
nodos antes o después del elementos seleccionado
.addClass() .hasClass() .removeClass() .toggleClass() //permiten manipular las clases
css de el o los nodos seleccionados
PAV2 - UTN FRC
Eventos
$("p").click(function(){
// acá va la acción
});
Eventos DOM más comunes
Mouse Events Keyboard Events Form Events Document/Window Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
PAV2 - UTN FRC
Eventos: Ejemplos
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
PAV2 - UTN FRC
Demo 5.5.
Esconder y mostrar alternativamente todos los divs cada vez que se presiona el
botón "Mostrar/Ocultar"
PAV2 - UTN FRC