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 (http://www.jslint.com/)
● JSHint (http://jshint.com/)
● Mozilla Developer Network:
https://developer.mozilla.org/es/docs/Web/JavaScript

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>
console.log('Hola pagina');
</script>

○ Archivo JavaScript externo

<script src="jquery-1.7.1.js" />

● 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>
document.write("¡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" */
b.constructor; /* 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);
x.toString();
(123).toString();

String(false);
String(true);
false.toString();
true.toString();

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("15.aa") /* 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 < Cosas.length; 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:

Array.isArray(colores); // Solo en ECMAScript 5 o sup

colores.constructor.toString().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();
persona.nombre = "Juan";
persona.apellido = "Perez;
persona.nombreCompleto = function(){
return this.nombre + " " + this.apellido;
};

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 = auto.marca;
auto.marca = "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 = JSON.parse(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 = document.getElementById("cabecera");

getElementsByTagName()
var parrafos = document.getElementsByTagName("p");
var primerParrafo = parrafos[0];

getElementsByClassName()
var parrafos = document.getElementsByClassName("resaltado");

PAV2 - UTN FRC

DOM: Cambiar nodos
innerHTML
document.getElementById("cabecera").innerHTML = "Cabecera";

Atributos
document.getElementById("foto").src = "caripela.jpg";
document.getElementById("btnOk").value = "Aceptar";

Estilos CSS
document.getElementById("p2").style.color = "blue";
document.getElementById("demo").style.textAlign = "center";

PAV2 - UTN FRC

DOM: Eventos
document.getElementById("btnFecha").onclick = mostrarFecha;

function mostrarFechaDate() {
document.getElementById("txtFecha").innerHTML = Date();
}

<div onmouseover="mOver(this)" onmouseout="mOut(this)"

style="background-color:red">
Pasar el mouse</div>

<script>
function mOver(obj) {obj.innerHTML = "Excelente!"}
function mOut(obj) {obj.innerHTML = "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/jquery.min.js"></script>

Referencia a CDN (Content Delivery Network)

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></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: api.jquery.com

PAV2 - UTN FRC

Sintaxis

$("#div_mensaje").show();
selector acción

PAV2 - UTN FRC

Seleccionar

$()

http://api.jquery.com/category/selectors/
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

$("li.itemMenu")

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

$("p.encabezado") 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