Java Básico - Introducción - Variables, funciones - Operadores y funciones matemáticas - Estructuras de control de flujo - Matrices de JavaScript - Manejo de cadenas de texto - Trabajando con fechas y horas - Programación Orientada a Objetos con JavaScript - Los eventos - Los objetos del navegador - Formularios y controles HTML intrínsecos - Almacenando información del usuario: las cookies - Expresiones regulares - Introducción a AJAX

1. Instructores
JavaScript Básico
Rodolfo Campos
@camposer

2. Índice
Introducción
Variables, funciones
Operadores y funciones matemáticas
Estructuras de control de flujo
Matrices de JavaScript
Manejo de cadenas de texto
Trabajando con fechas y horas
Programación Orientada a Objetos con JavaScript
Los eventos
Los objetos del navegador
Formularios y controles HTML intrínsecos

3. Índice
Almacenando información del usuario: las cookies
Expresiones regulares
Introducción a AJAX

4. 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.

5. 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.

6. Valores
Tipo Ejemplos
Numérico 42, 3.141516
Lógico true / false
Strings “cadena”
Vacío null
undefined
Para variables sin inicializar
o funciones que no retornan
parámetros

7. Variables y constantes
Las 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';

8. Arrays
var array = new Array();
var mixto = [ 1, 2, 3, “hola” ];
// Operando con el array mixto
console.log(mixto); // => 1, 2, 3, “hola”
mixto[0] = 33; // primera posición
mixto[3] = 2000; // primera posición
mixto[5] = 0; // primera posición
console.log(mixto); // => 33, 2, 3, 2000, undefined, 0
// Operando con el array array
array[array.length] = “uno”;
console.log(array); // => “uno”

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

10. 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; }

11. 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]);
}

12. 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

13. Cadenas
JavaScript 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)); // => 4
console.log(eval(s2)); // => “2 + 2”

14. Fechas
JavaScript 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 milisegundos
var elapsed = end.getTime() - start.getTime();

15. 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!

16. Prototipos
function 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 padre
p2.reir(); // Del hijo (utilizando referencia explícita a prototype)
p2.comer(); // Del hijo

17. JSON
La 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 + ")";
}
}

18. DOM
El 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í.

19. DOM
var contenido = document.getElementById("contenido");
var h1 = document.createElement('h1'); // Creando h1
h1.innerHTML = "Hola mundo!!!";
contenido.appendChild(h1);
var tabla = document.createElement("table"); // Creando tabla
var tr = document.createElement("tr");
var td1 = document.createElement("td"); // Creando td1
td1.innerHTML = "Prueba";
tr.appendChild(td1);
// continua...

20. DOM
var td2 = document.createElement("td"); // Creando td2
var 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>

21. Eventos
Los 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');};

22. Los objetos del navegador
Todo 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í.

23. Cookies
Una 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!

24. Expresiones regulares
Las 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");

25. Expresiones regulares
var 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); // => ?

26. Expresiones regulares
Las 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");

27. Ajax
Es 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)
CSS
DOM (especialmente el objeto XMLHttpRequest).
XML
JavaScript
Un ejemplo sencillo de AJAX sin usar entorno de trabajo aquí.

28. Ajax