Instructores

JavaScript Básico

Rodolfo Campos@camposer

Índice

IntroducciónVariables, funcionesOperadores y funciones matemáticasEstructuras de control de flujoMatrices de JavaScriptManejo de cadenas de textoTrabajando con fechas y horasProgramación Orientada a Objetos con JavaScriptLos eventosLos objetos del navegadorFormularios y controles HTML intrínsecos

Índice

Almacenando información del usuario: las cookiesExpresiones regularesIntroducción a AJAX

Introducción

JavaScript (abreviado comúnmente "JS") 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.Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas, aunque existe una forma de JavaScript del lado del servidor (Server-side JavaScript o SSJS).JavaScript está compuesto de diferentes elementos, los más destacados: el lenguaje per se (ECMAScript) y DOM.

Introducción

ECMAScript define:La sintaxis del lenguaje.Manejo de errores.Tipos de datos.Objetos globales.Mecanismo de herencia basada en prototipos.Objetos y funciones predefinid@s.Soporte de modo estricto.

DOM define la estructura del documento, arborescente, y cómo interactuar con ésta.

Valores

Tipo Ejemplos

Numérico 42, 3.141516

Lógico true / false

Strings “cadena”

Vacío null

undefinedPara variables sin inicializar o funciones que no retornan

parámetros

Variables y constantesLas variables referencian valores en la aplicación.El nombre de una variable puede comenzar con una letra, guión bajo o símbolo de dólar y seguir con letras o números. Son diferenciadas mayúsculas de minúsculas.Si una variable no es definida dentro de una función se reconoce como de ámbito global.

var a = 2;

También se pueden definir constantes

const prefix = '212';

Arraysvar array = new Array(); var mixto = [ 1, 2, 3, “hola” ];

// Operando con el array mixtoconsole.log(mixto); // => 1, 2, 3, “hola”mixto[0] = 33; // primera posiciónmixto[3] = 2000; // primera posiciónmixto[5] = 0; // primera posiciónconsole.log(mixto); // => 33, 2, 3, 2000, undefined, 0

// Operando con el array arrayarray[array.length] = “uno”;console.log(array); // => “uno”

Arrays

var clasico = new Array();clasico[0] = 0;clasico[1] = 1;clasico[2] = "hola";clasico.push("nuevo");console.log(clasico.pop());

Funciones

Las funciones son un tipo especial de variable.Pueden retornar o no un valor y en su firma sólo deben especificar un nombre y sus parámetros de entrada.Todos los parámetros son pasados por copia, excepto los objetos, que son referencias.

function imprimir(mensaje) { console.log(mensaje); }

function sumar(a, b) { return a + b; }

var multiplicar = function(a, b) { return a * b; }

Estructuras de control

El switch y do-while funcionan exactamente igual que en otros lenguajes, por ejemplo: Java. Luego, JavaScript provee una estructura for-each diferente:

for (var i in array) { console.log(array[i]);

}

Matrices

Las matrices son definidas dinamicamente. Al igual que en Java, se pueden utilizar arrays bidimensionales irregulares.

var matriz = [ [1, 2], [3, 4], [5, 6] ];console.log(matriz[0][1]); // => 2

CadenasJavaScript diferencia entre los strings de tipo primitivo y los de tipo objeto.

var s_prim = "foo";var s_obj = new String(s_prim);

console.log(typeof s_prim); // "string"console.log(typeof s_obj); // "object"

/***********Diferencias con eval ****************/ s1 = "2 + 2"; s2 = new String("2 + 2"); console.log(eval(s1)); // => 4console.log(eval(s2)); // => “2 + 2”

FechasJavaScript provee la clase Date para manipular fechas y horas. La referencia completa aquí.

var today = new Date();var birthday = new Date("December 17, 1995 03:24:00");var birthday = new Date(1995,11,17);var birthday = new Date(1995,11,17,3,24,0);

var start = new Date();doSomethingForALongTime();var end = new Date();// tiempo en milisegundosvar elapsed = end.getTime() - start.getTime();

Programación Orientada a Objetos// No existe la sobrecarga en javascript!!function Producto(_nombre) {

var nombre = _nombre;this.setNombre = function(_n) { nombre = _n; }this.getNombre = function() { return nombre; }this.toString = function() {

return "(nombre: " + this.getNombre() + ")"; }

}

var p = new Producto("Cámaras");console.log(p); // => "(nombre: Cámaras)"console.log(p.getNombre()); // => "(nombre: Cámaras)"console.log(p.nombre); // => falla!

Prototiposfunction Persona() {

this.cantar = function() { console.log("Estoy cantando"); }this.llorar = function() { console.log("Estoy llorando"); }

}

var p1 = new Persona();p1.llorar();

var p2 = Object.create(p1);Persona.prototype.reir = function() { console.log("Estoy riendo"); }p2.comer = function() { console.log("Estoy comiendo"); }

p2.cantar(); // Del padrep2.reir(); // Del hijo (utilizando referencia explícita a prototype)p2.comer(); // Del hijo

JSONLa Notación de Objetos de JavaScript (JSON) es un formato de intercambio de datos.Con JSON se pueden representar números, booleanos, strings, conjuntos vacíos (null), vectores y objetos (compuestos de todos los tipos de datos comentados).Con JSON no se pueden representar -de forma nativa- tipos de datos complejos, como: funciones, expresiones regulares, fechas, entre otros.

var persona = {"nombre": "Juan",edad: 34,toString: function() {

return "nombre: " + this.nombre + ", edad: " + this.edad + ")";

}}

DOMEl Modelo de Objetos del Documento (DOM) es una API para documentos HTML y XML. Provee una representación estructural del documento, permitiendo modificar su contenido y representación visual utilizando un lenguaje de scripting, Ej. JavaScript.La API es definida por la W3C y su especificación puede conseguirse aquí.La guía referencial de Mozilla para DOM y JavaScript puede conseguirse aquí.

DOMvar contenido = document.getElementById("contenido");

var h1 = document.createElement('h1'); // Creando h1h1.innerHTML = "Hola mundo!!!";contenido.appendChild(h1);

var tabla = document.createElement("table"); // Creando tablavar tr = document.createElement("tr");

var td1 = document.createElement("td"); // Creando td1td1.innerHTML = "Prueba";tr.appendChild(td1);

// continua...

DOMvar td2 = document.createElement("td"); // Creando td2var input = document.createElement("input");input.setAttribute('type', 'text');input.setAttribute('value', 'Prueba');td2.appendChild(input);tr.appendChild(td2);

tabla.appendChild(tr);contenido.appendChild(tabla); // <--- Añade siempre, no reemplaza!!

// ...

<div id=”contenido”></div>

EventosLos eventos pueden ser capturados y manejados en JavaScript a través de escuchas (listeners).Hay tres maneras de registrarse como escucha de un evento:

myButton.addEventListener('click', function() { alert('Hello world');}

);

<button onclick="alert('Hello world!')">

myButton.onclick = function(event){alert('Hello world');};

Los objetos del navegadorTodo navegador debe provee al menos los siguientes objetos implícitos:

Window. Provee acceso a la ventana del navegador donde está contenido el documento (document). Su referencia aquí.Console. Provee acceso a la consola de depuración del navegador. Su referencia aquí.Document. Provee acceso al árbol DOM. Su referencia aquí.

CookiesUna cookie (o galleta informática) es una pequeña información enviada por un sitio web y almacenada en el navegador del usuario, de manera que el sitio web puede consultar la actividad previa del usuario

document.cookie = "name=oeschger";document.cookie = "favorite_food=tripe";alert(document.cookie);// muestra: name=oeschger;favorite_food=tripe

Para reemplazar el valor de una cookie se deben utilizar expresiones regulares!

Expresiones regularesLas expresiones regulares son patrones utilizados para emparejar (match) combinaciones de caracteres dentro de strings.Los patrones pueden ser utilizados con los métodos exec y text de RegeExp y match, replace, search y split de String.La guía de referencia de Mozilla de expresiones regulares puede conseguirse aquí.Las expresiones regulares pueden ser creadas de 2 formas:

var re1 = /ab+c/;var re2 = new RegExp("ab+c");

Expresiones regularesvar myRe1 = /d(b+)d/g; var myArray1 = myRe1.exec("cdbbdbsbz"); // => ?

var myArray2 = /d(b+)d/g.exec("cdbbdbsbz"); // => ?

var myRe2 = new RegExp("d(b+)d", "g");var myArray3 = myRe2.exec("cdbbdbsbz"); // => ?

var names = "Harry Trump ;Fred Barney; Helen Rigby”;var pattern = /\s*;\s*/;var nameList = names.split(pattern); // => ?

Expresiones regularesLas expresiones regulares son patrones utilizados para emparejar (match) combinaciones de caracteres dentro de strings.Los patrones pueden ser utilizados con los métodos exec y text de RegeExp y match, replace, search y split de String.La guía de referencia de Mozilla de expresiones regulares puede conseguirse aquí.Las expresiones regulares pueden ser creadas de 2 formas:

var re1 = /ab+c/;var re2 = new RegExp("ab+c");

AjaxEs una técnica de desarrollo web para crear RIA (Rich Internet Applications).Estas aplicaciones se ejecutan en el cliente, es decir: en el navegador de los usuarios mientras se mantiene comunicación asíncrona con el servidor.Ajax es una tecnología asíncrona, los datos adicionales se requieren al servidor y se cargan en segundo plano sin interferir con la visualización ni el comportamiento de la página.Básicamente, es una combinación de las siguientes tecnologías:

XHTML (o HTML)CSSDOM (especialmente el objeto XMLHttpRequest).XMLJavaScript

Un ejemplo sencillo de AJAX sin usar entorno de trabajo aquí.

Ajax