se puede encontrar el tipo de una variable invocando
typeof
"Constantes" en JavaScript
Desde ECMA6, JavaScript tiene una palabra clave especial (const) para declarar valores "constantes".
Se debe usar en lugar de la palabra clave let para variables que no se van a modificar.
También se debe respetar la convención de usar letras mayúsculas para los nombres const en JS.
let month = 12;
month = 1; // no error
const COOLEST_CLASS = "CSE154";
COOLEST_CLASS = "clazz"; // error por intentar reasignar una const
Tipo number
let enrollment = 99;
let medianGrade = 2.8;
let credits = 5 + 4 + (2 * 3);
los números enteros y reales son el mismo tipo (no int vs. double). Todos los números en JS
son números reales (float)
let s = "Connie Client";
let fName = s.substring(0, s.indexOf(" ")); // "Connie"
let len = s.length; // 13
let s2 = 'Melvin Merchant'; // can use "" or ' '
let s = "the quick brown fox";
let a = s.split(" "); // ["the", "quick", "brown", "fox"]
a.reverse(); // ["fox", "brown", "quick", "the"]
s = a.join("!"); // "fox!brown!quick!the"
split separa una cadena y forma un array usando un delimitador
se puede usar también con expresiones regulares encerrada entre /:
let a = s.split(/[ \t]+/);
join une los elementos de un array en una sola cadena, colocando un delimitador entre ella
switch (expression) {
case value1:
//Statements executed when the
//result of expression matches value1
[break;]
case value2:
//Statements executed when the
//result of expression matches value2
[break;]
...
case valueN:
//Statements executed when the
//result of expression matches valueN
[break;]
[default:
//Statements executed when none of
//the values match the value of the expression
[break;]]
}
idéntico que la instrucción switch - case de C, C++ y Java
JavaScript permite casi cualquier cosa como condition
las palabra reservada
break sirve para salir del switch y continuar en la instrucción que sigue al switch
let a = ["Stef", "Jason"]; // Stef, Jason
a.push("Brian"); // Stef, Jason, Brian
a.unshift("Kelly"); // Kelly, Stef, Jason, Brian
a.pop(); // Kelly, Stef, Jason
a.shift(); // Stef, Jason
a.sort(); // Jason, Stef
los arrays sirven como varias estructuras de datos: lista, cola, pila, ...
function myFunction() {
console.log("Hello!");
alert("How are you?");
}
la función anterior se puede poner en un fichero example.js que se enlaza a una página HTML
las instrucciones puestas en funciones se pueden evaluar en respuesta a eventos de usuario
Alcance
El alcance de una variable es la región del programa donde el nombre de la variable se puede usar.
La regla general establece que es mejor, para la mantenibilidad, la localización de la variables, es decir, mantener su alcance o ámbito limitado como sea posible para evitar "efectos secundarios" de otras partes del programa.
Mencionamos que la palabra reservada let es una forma de declarar una variable en el ámbito en curso (p.e. entre {} para una instancia).
function sayHello(name) {
let output = "Hello " + name; // output es local en sayHello
console.log(output);
}
Ejemplo variables globales
Las variables globales son variables o símbolos que son visibles en todo el programa. Su uso puede no ser conveniente porque otro código y otros ficheros JS pueden acceder y modificarlos, de manera inesperada.
Ejemplo:
cuántos símbolos globales son introducidos por este código? 3 (count, incr,
y reset)
let count = 0; // count es una variable global
function incr(n) { // n es un parametro, local a la funcion incr
let diez = 10; // diez es una variable local
count += n;
}
function reset() {
count = 0; // debido a que count es global se puede reasignar aqui
// diez = 0; // diez no se puede reasignar aqui
}
incr(4);
incr(2);
console.log(count);
Variables let
let localiza el ámbito de una variable. Algunas veces con resultados interesantes.
Ejemplo:
let count = 0; // this count is a global variable
function incr(n) {
let count = 10; // this count is a local to incr
count += n;
}
incr(4);
incr(2);
console.log(count);
No usar var
No se recomienda el uso de var debido a la permisividad en la gestión de variables.
function varTest() {
console.log("varTest");
var x = 1;
if (x === 1) {
var x = 2; // same variable!
console.log(x); // 2
}
console.log(x); // 2
}
function letTest() {
console.log("letTest");
let x = 1;
if (x === 1) {
let x = 2; // different variable
console.log(x); // 2
}
console.log(x); // 1
}
Inclusión de globales en una función
Si se encierra todo el código en una función, ésta encierra el ámbito de todos los símbolos que están dentro de la función
Ejemplo:
cuántos símbolos globales son introducidos por este código? solo 1 (everything)
function everything() {
let count = 0;
function incr(n) {
count += n;
}
function reset() {
count = 0;
}
incr(4);
incr(2);
console.log(count);
}
everything(); // call the function to run the code
Funciones anónimas
function(parameters) {
... statements ...;
}
JavaScript permite declarar funciones anónimas
De forma rápida crea una función sin darle un nombre
Se puede guardar como una variable, añadirse como un event handler, etc.
Modo Javascript "estricto"
"use strict";
...your code...
Escribiendo "use strict"; al inicio de cada fichero JS se indica el uso de la comprobación estricta de la sintaxis:
Muestra un error si se intenta asignar a una variable no declarada
No permite sobreescribir claves de las librerías del sistema JS
Prohibe algunas características del lenguaje no seguras o o propenso a errores
Se recomienda usar siempre el modo estricto
El "módulo patrón"
"use strict";
(function() {
statements;
})();
Envuelve todo el código de un fichero en una función anónima que es declarada e invocada inmediatamente
No se introducen símbolos globales
Las variables y funciones definidas en el código no puede ser accedido externamente
Ejemplo de "módulo patrón"
"use strict";
(function() {
let count = 0;
function incr(n) {
count += n;
}
function reset() {
count = 0;
}
incr(4);
incr(2);
console.log(count);
})();
let demoButton = document.getElementById("demo-btn");
demoButton.addEventListener("click", changeImage);
function changeImage() {
let pokeballImg = document.getElementById("pokeball");
pokeballImg.src = "images/mystery.gif";
}
Todo junto
Asociar el handler load para indicar que la página se ha cargado. Todo lo que se añade en la función
asociada se ejecuta
"use strict";
(function() {
// listener attached before page is loaded
window.addEventListener("load", init);
function init() {
// this code is ran after page is loaded!
let demoButton = document.getElementById("demo-btn");
demoButton.addEventListener("click", changeImage);
}
function changeImage() {
let pokeballImg = document.getElementById("pokeball");
pokeballImg.src = "images/mystery.gif";
}
})();
DOM (Document Object Model)
El árbol DOM
Los elementos de una página están organizados en una estructura de objetos en forma de árbol
el DOM tiene propiedades y métodos para recorrer el árbol
window.onload = function () {
document.getElementById("button").onclick = addText;
}
function addText() {
let span = document.getElementById("output");
span.innerHTML += " ... goodbye";
}
Hello
Se puede cambiar el texto dentro de los elementos asignando la propiedad innerHTML
Abuso de innerHTML
// bad code quality! Hard to maintain! Prone to bugs!
let paragraph = document.getElementById("welcome");
paragraph.innerHTML = "<p>text and <a href=\"page.html\">link</a>";
innerHTML puede inyectar contenido arbitrario HTML en una página
Sin embargo, esto es propenso a errores y está considerado como estilo pobre
No se recomienda usar innerHTML para inyectar etiquetas HTML;
poner texto solamente
Hay mejores métodos para inyectar contenido con etiquetas HTML en él
Estilo no intrusivo
function okayClick() {
this.style.color = "red"; // <-- bad style
this.className = "highlighted"; // <-- better style
}
.highlighted { color: red; }
Un script JavaScript bien escrito debe contener la menor o nula referencia a CSS como sea posible
Usar JS para configurar clases/IDs CSS sobre elementos
Definir los estilos de esas clases/IDs en el fichero CSS
Cambio de estilos con DOM
<button id="clickme">Color Me</button>
window.onload = function() {
document.getElementById("clickme").onclick = changeColor;
};
function changeColor() {
let clickMe = document.getElementById("clickme");
clickMe.style.color = "red";
}
function f(n) { return n + 1; }
function g(n) { return n - 1; }
x = f(x);
El fichero JS se ejecuta cuando el navegador carga la etiqueta script
Cualquier varible se declara de forma inmediata
Cualquier función se declara pero no se invoca, a menos que el código global explícitamente los llame
Importante! En el punto temporal, el navegador todavía no ha leído el body de la página
Ninguno de los objetos DOM de las etiquetas se han creado aún
El evento load
function init() {
// put code to initialize the page here
}
// Add a function that will be called when the window is loaded.:
window.addEventListener("load", init);
Hay un evento global llamado load que ocurre una vez que todos los elementos de la página han sido cargados
Si se asocia una función como gestor para window.addEventListener, se ejecutará en ese momento
Cómo se gestiona un evento
<button id="ok">OK</button> <!-- (1) -->
// called when page loads; sets up event handlers
function pageLoad() {
let ok = document.getElementById("ok"); // (3)
ok.addEventListener("click", okayClick) ;
}
function okayClick() {
alert("booyah"); // (4)
}
window.addEventListener("load", pageLoad); // (2)
(function() {
window.addEventListener("load", init);
function init() { {
// your code goes here
};
function exampleFunction1() {
/* SOME CODE */
}
function exampleFunction2(someVariable) {
/* SOME CODE */
return something;
}
/* --- Helper Functions --- */
function id(idName) {
return document.getElementById(idName);
}
function qs(selector) {
return document.querySelector(selector);
}
function qsa(selector) {
return document.querySelectorAll(selector);
}
})();
Palabra clave this
this.fieldName// access field
this.fieldName = value; // modify field
this.methodName(parameters); // call method
todo el código JavaScript se ejecuta dentro de un objeto
por defecto, el código se ejecuta en el objeto global window (por tanto this === window)
todas las variables globales y funciones que se declaran forman parte de window
la palabra reservada this se refiere al objeto en curso
Vinculación de gestores de eventos
window.onload = function() {
document.getElementById("textbox").onmouseout = booyah;
};
function booyah() { // booyah knows what object it was called on
this.value = "booyah";
}
Los gestores de eventos añadidos de forma no intrusiva se vinculan al elemento
Dentro del gestor, ese elemento se convierte en this
Los gestores del mismo tipo en un mismo elemento se ejecutan en el orden en que fueron asignados.
Agregando varios manejadores de eventos
Con frecuencia se requiere agregar un gestor de eventos a un grupo de elementos.
Con DOM
let btns = document.querySelectorAll("#game > button.control");
for (let i = 0; i < btns.length; i++) {
btns[i].observe("click", gameButtonClick);
}
function gameButtonClick(evt) { ... }
Eventos DOM personalizados
Se pueden agregar eventos a elementos de forma más general usando el método addEventListener de DOM.
Se puede crear un objeto evento propio para activar ese evento sobre un elemento.
let evt = document.createEvent("click");
evt.initEvent("click", true, true);
document.getElementById("myid").dispatchEvent("click");
No se tiene que usar "click", se puede usar cualquiera en el evento personalizado.
Se puede crear un evento "boom" , cuyo significado que a criterio del desarrollador.
Características de orientación a objeto en JavaScript
¿Por qué usar clases y objetos?
los programas pequeños se pueden escribir fácilmente sin objetos
JavaScript trata a las funciones como ciudadanos de primera-clase
los programas grandes se convierten en un conjunto de funciones desorganizadas
los objetos agrupan datos y comportamiento relacionado
ayuda a gestionar el tamaño y complejidad, promueve la reusabilidad del código
Ya se han usado muchos tipos de objetos JavaScript
Strings, arrays, nodos HTML / XML DOM
Creando un nuevo objeto anónimo
let name = {
fieldName: value,
...
fieldName: value
};
la adición de un método/campo a un prototipo
lo otorgará a todos los objetos que usan ese prototipo
mejor que agregar manualmente cada método a cada objeto (copiando el método N veces)
generalmente se pone sólo métodos y datos constantes en un objeto prototipo
Métodos de prototipo Point
// Computes the distance between this point and the given point p.
Point.prototype.distance = function(p) {
let dx = this.x - p.x;
let dy = this.y - p.y;
return Math.sqrt(dx * dx + dy * dy);
};
// Returns a text representation of this object, such as "(3, -4)".
Point.prototype.toString = function() {
return "(" + this.x + ", " + this.y + ")";
};
el código Point se puede guardar en un fichero Point.js
el método toString funciona de forma similar como en Java
Modificando los prototipos predefinidos
// add a 'contains' method to all String objectsString.prototype.contains = function(text) {
return this.indexOf(text) >= 0;
};
// add a 'lightUp' method to all HTML DOM element objectsHTMLElement.prototype.lightUp = function() {
this.style.backgroundColor = "yellow";
this.style.fontWeight = "bold";
};
CUALQUIER prototipo se puede modificar, incluyendo los de tipos existentes
Prototype y otras librerías hacen esto
no es lo mismo que agregar algo a un objeto simple
Pseudo-herencia con prototipos
function SuperClassName(parameters) { // "superclass" constructor
...
};
function SubClassName(parameters) { // "subclass" constructor
...
};
SubClassName.prototype = new SuperClassName(parameters); // connect them
para crear una "subclase", se indica a su constructor que use un objeto "superclase" como su prototipo
porqué no escribir de esta forma?
SubClassName.prototype = SuperClassName.prototype; // connect them
Ejemplo de pseudo-herencia
// Constructor for Point3D "class"
function Point3D(x, y, z) {
this.x = x;
this.y = y;
this.z = z;
};
Point3D.prototype = new Point(0, 0);// set as "subclass" of Point// override distanceFromOrigin method
Point3D.prototype.distanceFromOrigin = function() {
return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z);
};
en general funciona bien, pero no hay una palabra reservada equivalente super
no hay una manera predefinida de llamar un método sobreescrito (overridden)
no es una forma fácil de llamar el constructor de la superclase
window.addEventListener("load", msg);
function msg() {
but = document.getElementById("clickme");
but.addEventListener("click", delayedMessage);
};
function delayedMessage() {
document.getElementById("outputText").innerHTML = "Wait for it...";
setTimeout(sayBooyah, 5000);
}
function sayBooyah() { // called when the timer goes off
document.getElementById("outputText").innerHTML = "BOOYAH!";
}
Ejemplo setInterval
let timer = null;// stores ID of interval timer
function delayMsg2() {
if (timer == null) {
timer = setInterval(rudy, 1000);
} else {
clearInterval(timer);
timer = null;
}
}
function rudy() { // called each time the timer goes off
document.getElementById("output").innerHTML += " Rudy!";
}
Paso de parámetros a timers
function delayedMultiply() {
// 6 and 7 are passed to multiply when timer goes off
setTimeout(multiply, 2000, 6, 7);
}
function multiply(a, b) {
alert(a * b);
}
cualquier parámetro pasado después del delay se pasan a la función del timer
Errores comunes con timer
escribir erróneamente () cuando se pasa la función. Si se hace se invoca la función de forma inmediata en lugar de esperar el delay estipulado
nodos elemento (etiqueta HTML)
nodos texto (texto en elementos bloque) 
nodos atributo (par atributo/valor)
