Download - Javascript Básico
Í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
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 [email protected] 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í.