JavaScript.txt

=========================
Guía de JavaScript  by dM
=========================

La sintaxis de JavaScript es muy similar a la de otros lenguajes de programación
como Java y C. Las normas básicas que definen la sintaxis de JavaScript son las
siguientes:

-No se tienen en cuenta los espacios en blanco y las nuevas líneas: como sucede
con XHTML, el intérprete de JavaScript ignora cualquier espacio en blanco
sobrante, por lo que el código se puede ordenar de forma adecuada para
entenderlo mejor (tabulando las líneas, añadiendo espacios, creando nuevas
líneas, etc.)

-Se distinguen las mayúsculas y minúsculas: al igual que sucede con la sintaxis
de las etiquetas y elementos XHTML. Sin embargo, si en una página XHTML se
utilizan indistintamente mayúsculas y minúsculas, la página se visualiza
correctamente, siendo el único problema la no validación de la página.
En cambio, si en JavaScript se intercambian mayúsculas y minúsculas el script no
funciona.

-No se define el tipo de las variables: al crear una variable, no es necesario
indicar el tipo de dato que almacenará. De esta forma, una misma variable puede
almacenar diferentes tipos de datos durante la ejecución del script.

-No es necesario terminar cada sentencia con el carácter de punto y coma (;): en
la mayoría de lenguajes de programación, es obligatorio terminar cada sentencia
con el carácter ;. Aunque JavaScript no obliga a hacerlo, es conveniente seguir
la tradición de terminar cada sentencia con el carácter del punto y coma (;).

<script type="text/javascript">

=========================
Comentarios en Javascript
=========================

// Comentarios de línea

/* Comentarios de
multiple línea*/

=============
Ḿétodo length
=============

Saber el largo de una cadena:

"cadena".length
6

=======================
Operaciones aritméticas
=======================

Se pueden realizar operaciones aritmeticas en la consola de js, el resultado es
mostrado en la consola:

2 + 2
3 + 7
8 * 4
10 / 3

=======================
El método console.log()
=======================

Escribe un mensaje en la consola. La consola es útil para realizar pruebas.

Consejo: al probar este método, asegúrese de tener la vista de la consola
visible (presione F12 para ver la consola).

El método console.log() toma lo que está entre paréntesis y lo registra en la
pantalla debajo de tu código; ¡por eso es que se llama console.log() (registro
de pantalla)!

console.log("Hola")

console.log(2 * 5)

================
Cajas de diálogo
================

Estas cajas de diálogos pueden usarse para que los usuarios confirmen acciones.

En la consola js se vera si es true o false la confirmacion, util para alertar.

confirm("Estoy listo para continuar.");

confirm("El contenido será borrado")

confirm("Los cambios no han sido guardados")

prompt
======

Muestra un cuadro de aviso que le pregunte al usuario algo y lo que introduzca
se puede guardar en una variable, ejemplo:

var pais = prompt("Cual es su país");

console.log(pais);

-----

Comparar si la cadena es mayor que un numero:
"Cadena de texto larga".length > 10
true 
"Cadena".length > 10
false

===============
Sintaxis básica
===============

Declaración simple de variable:

var foo = 'Hola Mundo';

Los espacios en blanco no tienen valor fuera de las comillas:

var foo =         'hello world';

Los paréntesis indican prioridad:

2 * 3 + 5;    // es igual a 11; la multiplicación ocurre primero
2 * (3 + 5);  // es igual a 16; por lo paréntesis, la suma ocurre primero

Declará una variable en la línea 2 que se llame miPais y dale un valor de cadena.

var miPais="Venezuela"

Usá console.log para mostrar el largo de la variable miPais

console.log(miPais.length);

Usa console.log para mostrar las tres primeras letras de miPais

console.log(miPais.substring(0,3));

La tabulación mejora la lectura del código, pero no posee ningún significado
especial:

var foo = function() {
    console.log('hello');
};
foo();

==========
Operadores
==========

Los operadores básicos permiten manipular valores.

Concatenación
=============

var foo = 'hello';
var bar = 'world';
console.log(foo + ' ' + bar);

La consola de depuración muestra 'hello world'

Multiplicación y división
=========================

2 * 3;

2 / 3;

Incrementación y decrementación
===============================

var i = 1;
var j = ++i;  // incrementación previa: j es igual a 2; i es igual a 2
var k = i++;  // incrementación posterior: k es igual a 2; i es igual a 3

Operaciones con números y cadenas de caracteres
===============================================

En JavaScript, las operaciones con números y cadenas de caracteres (en inglés
strings) pueden ocasionar resultados no esperados.

Suma vs concatenación
=====================

var foo = 1;
var bar = '2';
console.log(foo + bar);

error: La consola de depuración muestra 12

Forzar a una cadena de caracteres actuar como un número
=======================================================

var foo = 1;
var bar = '2';

el constructor 'Number' obliga a la cadena comportarse como un número

console.log(foo + Number(bar));

La consola de depuración muestra 3

El constructor Number, cuando es llamado como una función (como se muestra en el
ejemplo) obliga a su argumento a comportarse como un número. También es posible
utilizar el operador de suma unaria, entregando el mismo resultado:

Forzar a una cadena de caracteres actuar como un número (utilizando el operador
de suma unaria)

var foo = 1;
var bar = '2';
console.log(foo + +bar);

==================
Operadores lógicos
==================

Los operadores lógicos permiten evaluar una serie de operandos utilizando
operaciones AND y OR.

Operadores lógicos AND y OR
===========================

var foo = 1;
var bar = 0;
var baz = 2;
 
foo || bar;  // devuelve 1, el cual es verdadero (true)
bar || foo;  // devuelve 1, el cual es verdadero (true)
 
foo && bar;  // devuelve 0, el cual es falso (false)
foo && baz;  // devuelve 2, el cual es verdadero (true)
baz && foo;  // devuelve 1, el cual es verdadero (true)

El operador || (OR lógico) devuelve el valor del primer operando, si éste es
verdadero; caso contrario devuelve el segundo operando. Si ambos operandos son
falsos devuelve falso (false). El operador && (AND lógico) devuelve el valor del
primer operando si éste es falso; caso contrario devuelve el segundo operando.

Cuando ambos valores son verdaderos devuelve verdadero (true), sino devuelve
falso.

Puede que a veces note que algunos desarrolladores utilizan esta lógica en
flujos de control en lugar de utilizar la declaración
if.

Por ejemplo:

Realizar algo con foo si foo es verdadero:

foo && doSomething(foo);
 
Wstablecer bar igual a baz si baz es verdadero;
Caso contrario, establecer a bar igual al
valor de createBar()

var bar = baz || createBar();

Este estilo de declaración es muy elegante y conciso; pero puede ser difícil
para leer (sobretodo para principiantes). Por eso se explícita, para reconocerlo
cuando este leyendo código. Sin embargo su utilización no es recomendable a
menos que esté cómodo con el concepto y su comportamiento.

Ejemplo:

const a = 3;
const b = 2;
const c = 1;
console.log(a > b || c > b);
// expected output: true

Operadores de comparación
=========================

Los operadores de comparación permiten comprobar si determinados valores son
equivalentes o idénticos.

Operadores de Comparación

var foo = 1;
var bar = 0;
var baz = '1';
var bim = 2;
 
foo == bar; // devuelve falso (false)
foo != bar; // devuelve verdadero (true)
foo == baz; // devuelve verdadero (true); tenga cuidado
 
foo === baz; // devuelve falso (false)
foo !== baz; // devuelve verdadero (true)
foo === parseInt(baz); // devuelve verdadero (true)
 
foo > bim;   // devuelve falso (false)
bim > baz;   // devuelve verdadero (true)
foo <= baz;  // devuelve verdadero (true)

Código condicional
==================

A veces se desea ejecutar un bloque de código bajo ciertas condiciones. Las
estructuras de control de flujo — a través de la utilización de las
declaraciones if y else permiten hacerlo.

Control del flujo
=================

var foo = true;
var bar = false;
if (bar) {
    // este código nunca se ejecutará
    console.log('hello!');
}
if (bar) {
    // este código no se ejecutará
} else {
    if (foo) {
        // este código se ejecutará
    } else {
        // este código se ejecutará si foo y bar son falsos (false)
    }
}

Elementos verdaderos y falsos
=============================

Para controlar el flujo adecuadamente, es importante entender qué tipos de
valores son "verdaderos" y cuales "falsos". A veces, algunos valores pueden
parecer una cosa pero al final terminan siendo otra.

Valores que devuelven verdadero (true)

'0';          // una cadena de texto cuyo valor sea 0
'any string'; // cualquier cadena
[];           // un array vacío
{};           // un objeto vacío
1;            // cualquier número distinto a cero

Valores que devuelven falso (false)

0;
'';        // una cadena vacía
NaN;       // la variable JavaScript "not-a-number" (No es un número)
null;      // un valor nulo
undefined; // tenga cuidado -- indefinido (undefined) puede ser redefinido

Variables condicionales utilizando el operador ternario
=======================================================

A veces se desea establecer el valor de una variable dependiendo de cierta
condición. Para hacerlo se puede utilizar una declaración if/else, sin embargo
en muchos casos es más conveniente utilizar el operador ternario.

Definición: El operador ternario evalúa una condición; si la condición es
verdadera, devuelve cierto valor, caso contrario devuelve un valor diferente.

Este operador se usa con frecuencia como atajo para la instrucción if.

Sintaxis
========

condición ? expr1 : expr2

Parámetros:

-condición: Una expresión que se evalúa como true o false.

-expr1, expr2: Expresión con valores de algún tipo.

El operador ternario
====================

Establecer foo igual a 1 si bar es verdadero, caso contrario, establecer a
foo igual a 0.

var foo = bar ? 1 : 0;

Ejemplo:

<script>
  var bar=true;
  // var bar=null;
  var foo = bar ? 1 : 0;
  console.log(foo);
</script>

El operador ternario puede ser utilizado sin devolver un valor a la variable,
sin embargo este uso generalmente es desaprobado.

Otro ejemplo:

var age, voteable;
age = 18;
voteable = (age < 18) ? "Menor de edad" : "Mayor de edad";
alert(voteable);

Operador ternario con más de 1 comparación
==========================================

var number, result;

number = 1;
result = (number == 1) ? "Valgo 1" : (number == 2) ? "Valgo 2" : 'No valgo ni 1 ni 2';
"Valgo 1"

number = 2;
result = (number == 1) ? "Valgo 1" : (number == 2) ? "Valgo 2" : 'No valgo ni 1 ni 2';
"Valgo 2"

number = 3;
result = (number == 1) ? "Valgo 1" : (number == 2) ? "Valgo 2" : 'No valgo ni 1 ni 2';
"No valgo ni 1 ni 2"

==================
Declaración switch
==================

En lugar de utilizar una serie de declaraciones if/else/else if/else, a veces
puede ser útil la utilización de la declaración switch. [Definición: La
declaración Switch evalúa el valor de una variable o expresión, y ejecuta
diferentes bloques de código dependiendo de ese valor.]

Una declaración switch

switch (foo) {
  case 'bar':
    alert('el valor es bar');
  break;
  case 'baz':
    alert('el valor es baz');
  break;
  default:
    alert('de forma predeterminada se ejecutará este código');
  break;
}

Las declaraciones switch son poco utilizadas en JavaScript, debido a que el
mismo comportamiento es posible obtenerlo creando un objeto, el cual posee más
potencial ya que es posible reutilizarlo, usarlo para realizar pruebas, etc.

Por ejemplo:

var stuffToDo = {
  'bar' : function() {
    alert('el valor es bar');
  },

  'baz' : function() {
    alert('el valor es baz');
  },

  'default' : function() {
    alert('de forma predeterminada se ejecutará este código');
  }
};
 
if (stuffToDo[foo]) {
    stuffToDo[foo]();
} else {
    stuffToDo['default']();
}

======
Bucles
======

Los bucles (en inglés loops) permiten ejecutar un bloque de código un
determinado número de veces.

// muestra en la consola 'intento 0', 'intento 1', ..., 'intento 4'
for (var i=0; i<5; i++) {
    console.log('intento ' + i);
}

Note que en el ejemplo se utiliza la palabra var antes de la variable i, esto
hace que dicha variable quede dentro del "alcance" (en inglés scope) del bucle.
Más adelante en este capítulo se examinará en profundidad el concepto
de alcance.

Bucles utilizando for
=====================

Un bucle utilizando for se compone de cuatro estados y posee la siguiente
estructura:

for ([expresiónInicial]; [condición]; [incrementoDeLaExpresión]) [cuerpo]

El estado expresiónInicial es ejecutado una sola vez, antes que el bucle
comience. Éste otorga la oportunidad de preparar o declarar variables.

El estado condición es ejecutado antes de cada repetición, y retorna un valor
que decide si el bucle debe continuar ejecutándose o no. Si el estado
condicional evalúa un valor falso el bucle se detiene.

El estado incrementoDeLaExpresión es ejecutado al final de cada repetición y
otorga la oportunidad de cambiar el estado de importantes variables. Por lo
general, este estado implica la incrementación o decrementación de un contador.

El cuerpo es el código a ejecutar en cada repetición del bucle.

Un típico bucle utilizando for

for (var i = 0, limit = 100; i < limit; i++) {
  // Este bloque de código será ejecutado 100 veces
  console.log('Currently at ' + i);
  // Nota: el último registro que se mostrará
  // en la consola será "Actualmente en 99"
}

----------

for (var propiedad in objeto){
  // código a repetir por el bucle.
  // dentro de este código la variable "propiedad" contiene la propiedad actual
  // actual en cada uno de los pasos de la iteración.
}

Ejemplos:

<script type = "text/javascript" language = "javascript">
var diasMes = {
  enero: 31,
  febrero: 28,
  marzo: 31,
  abril: 30,
  mayo: 31
}
for (var mes in diasMes){
  console.log(mes);
}
alert(diasMes["mayo"]);
</script>

-----

<script type = "text/javascript" language = "javascript">
usuarios = {
  "Miguel Angel Alvarez" : {
  },
  "DesarrolloWeb.com" : {
  },
  "EscuelaIT" : {
  },
}
for (var usuario in usuarios){
  console.log(usuario);
}
</script>

-----

<script type = "text/javascript" language = "javascript">
usuarios = {
  "Miguel Angel Alvarez" : {
    "edad" : 11
  },
  "DesarrolloWeb.com" : {
    "edad" : 22
  },
  "EscuelaIT" : {
    "edad" : 33
  },
}
for(var usuario in usuarios) {
  if(usuarios[usuario].edad) {
    console.log(usuarios[usuario].edad);
  }
}
</script>

Fuente
======

https://desarrolloweb.com/articulos/recorridos-propiedades-objetos-javascript-forin.html

=========
forEach()
=========

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The forEach() Method</h2>
<p>forEach() calls a function for each element in an array:</p>
<p id="demo"></p>
<script>
const fruits = ["apple", "orange", "cherry"];
fruits.forEach(myFunction);
function myFunction(item, index) {
  console.log(index);
  console.log(item);
}
</script>
</body>
</html>

-----

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>Array.forEach() calls a function for each array element.</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
document.getElementById("demo").innerHTML = text;
function myFunction(value) {
  text += "<li>" + value + "</li>";
}
</script>
</body>
</html>

Salida:

JavaScript Arrays

Array.forEach() calls a function for each array element.

Banana
Orange
Apple
Mango

Bucles utilizando while
=======================

Un bucle utilizando while es similar a una declaración condicional if, excepto
que el cuerpo va a continuar ejecutándose hasta que la condición a evaluar sea
falsa.

while ([condición]) [cuerpo]

Un típico bucle utilizando while:

var i = 0;
while (i < 100) {
  // Este bloque de código se ejecutará 100 veces
  console.log('Actualmente en ' + i);
  i++; // incrementa la variable i
}

Puede notar que en el ejemplo se incrementa el contador dentro del cuerpo del
bucle, pero también es posible combinar la condición y la incrementación, como
se muestra a continuación:

Bucle utilizando while con la combinación de la condición y la incrementación

var i = -1;
while (++i < 100) {
    // Este bloque de código se ejecutará 100 veces
    console.log('Actualmente en ' + i);
}

Se comienza en -1 y luego se utiliza la incrementación previa (++i).

Bucles utilizando do-while
==========================

Este bucle es exactamente igual que el bucle utilizando while excepto que el
cuerpo es ejecutado al menos una vez antes que la condición sea evaluada.

do [cuerpo] while ([condición])

Un bucle utilizando do-while

do {
  // Incluso cuando la condición sea falsa
  // el cuerpo del bucle se ejecutará al menos una vez.
  alert('Hello');
} while (false);

Este tipo de bucles son bastantes atípicos ya que en pocas ocasiones se necesita
un bucle que se ejecute al menos una vez. De cualquier forma debe estar al tanto
de ellos.

break y continue
================

Usualmente, el fin de la ejecución de un bucle resultará cuando la condición no
siga evaluando un valor verdadero, sin embargo también es posible parar un bucle
utilizando la declaración break dentro del cuerpo.

Detener un bucle con break

for (var i = 0; i < 10; i++) {
  if (something) {
    break;
  }
}

También puede suceder que quiera continuar con el bucle sin tener que ejecutar
más sentencias del cuerpo del mismo bucle. Esto puede realizarse utilizando la
declaración continue.

Saltar a la siguiente iteración de un bucle:

for (var i = 0; i < 10; i++) {
  if (something) {
    continue;
  }
  // La siguiente declaración será ejecutada
  // si la condición 'something' no se cumple
  console.log('Hello');
}

================================================
Acceder a elementos del árbol DOM con selectores
================================================

Seleccionar un nodo de elemento individual:

-getElementById(): utiliza el valor del atributo id de un elemento.

-querySelector(): Utiliza un selector CSS, y regresa el primer elemento
coincidente.

-getElementsByClassName(): Selecciona todos los elementos que tienen un valor
especifico por su atributo de clase CSS.

-getElementsByName: Selecciona los elementos que tengan un nombre específico.

-getElementsByTagName(): Selecciona todos los elementos que tengan un nombre de
etiqueta específica.

querySelectorAll(): Usa un selector CSS para seleccionar todos los elementos que
hagan match.

Ejemplos:

getElementById()
================

Con getElementById poder escribir data de js en el html.

<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to change the text in this paragraph.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
</html>

querySelector()
===============

<!DOCTYPE html>
<html>
<body>
<h2 class="example">A heading with class="example"</h2>
<p class="example">A paragraph with class="example".</p>
<p>Click the button to add a background color to the first element in the document with class="example".</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
  document.querySelector(".example").style.backgroundColor = "red";
}
</script>
</body>
</html>

-----

<!DOCTYPE html>
<html>
<body>
<p>This is a p element.</p>
<p>This is also a p element.</p>
<p>Click the button to add a background color to the first p element in the document.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
  document.querySelector("p").style.backgroundColor = "red";
}
</script>
</body>
</html>

-----

<!DOCTYPE html>
<html>
<body>
<h2 class="example">A heading with class="example"</h2>
<p class="example">A paragraph with class="example".</p>
<p>Click the button to add a background color to the first p element in the document with class="example".</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
  document.querySelector("p.example").style.backgroundColor = "red";
}
</script>
</body>
</html>

-----

<!DOCTYPE html>
<html>
<body>
<p id="demo">This is a p element with id="demo".</p>
<p>Click the button to change the text of the p element.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
  document.querySelector("#demo").innerHTML = "Hello World!";
}
</script>
</body>
</html>

getElementsByClassName()
========================

<!DOCTYPE html>
<html>
<body>
<div class="example">First div element with class="example".</div>
<div class="example">Second div element with class="example".</div>
<p>Click the button to change the text of the first div element with class="example" (index 0).</p>
<button onclick="myFunction()">Try it</button>
<p><strong>Note:</strong> The getElementsByClassName() method is not supported in Internet Explorer 8 and earlier versions.</p>
<script>
function myFunction() {
  var x = document.getElementsByClassName("example");
  x[0].innerHTML = "Hello World!";
}
</script>
</body>
</html>

getElementsByTagName()
======================

<!DOCTYPE html>
<html>
<body>
<p>An unordered list:</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
<p>Click the button to display the innerHTML of the second li element (index 1).</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
  var x = document.getElementsByTagName("LI");
  document.getElementById("demo").innerHTML = x[1].innerHTML;
}
</script>
</body>
</html>

querySelectorAll()
==================

<!DOCTYPE html>
<html>
<body>
<h2 class="example">A heading with class="example"</h2>
<p class="example">A paragraph with class="example".</p>
<p>Click the button to add a background color all elements with class="example".</p>
<button onclick="myFunction()">Try it</button>
<p><strong>Note:</strong> The querySelectorAll() method is not supported in Internet Explorer 8 and earlier versions.</p>
<script>
function myFunction() {
  var x, i;
  x = document.querySelectorAll(".example");
  for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
  }
}
</script>
</body>
</html>

============
document.URL
============

Obtener la URL actual:

<!DOCTYPE html>
<html>
<body>
<p>Click the button to display the URL of the document.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
  var x = document.URL;
  document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

======
Arrays
======

Los arrays (en inglés arrays) son listas de valores con índice-cero (en inglés
zero-index), es decir, que el primer elemento del array está en el índice 0.

Éstos son una forma práctica de almacenar un conjunto de datos relacionados
(como cadenas de caracteres aunque en realidad, un array puede incluir múltiples
tipos de datos, incluso otros arrays.

Un array simple:

var myArray = ['hello','world'];

-----

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p id="demo"></p>
<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>

Muestra en pantalla:

JavaScript Arrays

Saab,Volvo,BMW

-----

Acceder a los ítems del array a través de su índice:

var myArray = ['hello','world','foo','bar'];
console.log(myArray[3]);

muestra en la consola 'bar'

-----

Obtener la cantidad de ítems del array

var myArray = ['hello','world'];
console.log(myArray.length);   // muestra en la consola 2

-----

Cambiar el valor de un ítem de un array

var myArray = ['hello','world'];
console.log(myArray[0]);
console.log(myArray[1]);
myArray[1] = 'changed';
console.log(myArray[0]);
console.log(myArray[1]);

Como se muestra en el ejemplo, cambiar el valor de un ítem de un array es
posible.

-----

Añadir elementos a un array con push()

var myArray = ['hello','world'];
console.log(myArray);
myArray.push('new');
console.log(myArray);

Array [ "hello", "world" ]
Array [ "hello", "world", "new" ]

Método join y split en arrays
=============================

var myArray = [ 'h', 'e', 'l', 'l', 'o' ];
var myString = myArray.join('');   // 'hello'
var mySplit = myString.split('');  // [ 'h', 'e', 'l', 'l', 'o' ]

=======
Objetos
=======

Los objetos son elementos que pueden contener cero o más conjuntos de pares de
nombres claves y valores asociados a dicho objeto. Los nombres claves pueden ser
cualquier palabra o número válido. El valor puede ser cualquier tipo de valor:
un número, una cadena, un array, una función, incluso otro objeto.

[Definición: Cuando uno de los valores de un objeto es una función, ésta es
nombrada como un método del objeto.] De lo contrario, se los llama propiedades.

Curiosamente, en JavaScript, casi todo es un objeto - arrays, funciones,
números, incluso cadenas — y todos poseen propiedades y métodos.

Creación de un "objeto literal"

var myObject = {
  sayHello : function() {
    console.log('hello');
  },
  myName : 'Rebecca'
};
 
// se llama al método sayHello, el cual muestra en la consola 'hello'
myObject.sayHello();
 
// se llama a la propiedad myName, la cual muestra en la consola 'Rebecca'
console.log(myObject.myName);

Nota:

Notar que cuando se crean objetos literales, el nombre de la propiedad puede ser
cualquier identificador JavaScript, una cadena de caracteres (encerrada entre
comillas) o un número:

var myObject = {
  validIdentifier: 123,
  'some string': 456,
  99999: 789
};
console.log(myObject.validIdentifier);

=========
Funciones
=========

Las funciones contienen bloques de código que se ejecutaran repetidamente. A las
mismas se le pueden pasar argumentos, y opcionalmente la función puede devolver
un valor.

Las funciones pueden ser creadas de varias formas:

Declaración de una función

function foo() { /* hacer algo */ }

Declaración de una función nombrada

var foo = function() { /* hacer algo */ }

Es preferible el método de función nombrada debido a algunas profundas razones
técnicas. Igualmente, es probable encontrar a los dos métodos cuando se revise
código JavaScript.

Utilización de funciones
========================

Una función simple:

function hello() {
  alert("Hello!!!");
};
hello();

Otro ejemplo, con parámetros:

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

// Variable que le asignamos la llamada de la funcion y parametros
operacion = sumar(6,4);

// Mostramos el resultado en una alerta
alert(operacion);

Otro ejemplo, con parámetros:

var greet = function(person, greeting) {
    var text = greeting + ', ' + person;
    console.log(text);
};
 
greet('Rebecca', 'Hello');  // muestra en la consola 'Hello, Rebecca'

Una función que devuelve un valor

var greet = function(person, greeting) {
    var text = greeting + ', ' + person;
    return text;
};
 
console.log(greet('Rebecca','hello'));

Una función que devuelve otra función

// la función devuelve 'Hello, Rebecca',
// la cual se muestra en la consola
var greet = function(person, greeting) {
    var text = greeting + ', ' + person;
    return function() { console.log(text); };
};
 
var greeting = greet('Rebecca', 'Hello');
greeting();  // se muestra en la consola 'Hello, Rebecca'

Funciones anónimas autoejecutables
==================================

Un patrón común en JavaScript son las funciones anónimas autoejecutables. Este
patrón consiste en crear una expresión de función e inmediatamente ejecutarla.
El mismo es muy útil para casos en que no se desea intervenir espacios de
nombres globales, debido a que ninguna variable declarada dentro de la función
es visible desde afuera.

Función anónima autoejecutable
==============================

(function(){
  var foo = 'Hello world';
  console.log(foo);
})();
console.log(foo); // Uncaught ReferenceError: foo is not defined

Funciones como argumentos
=========================

En JavaScript, las funciones son ciudadanos de primera clase, pueden ser
asignadas a variables o pasadas a otras funciones como argumentos.

Pasar una función anónima como un argumento

var myFn = function(fn) {
  var result = fn();
  console.log(result);
};
 
myFn(function() {
  return 'hello world';
});

Muestra en la consola 'hello world'

Pasar una función nombrada como un argumento
============================================

var myFn = function(fn) {
  var result = fn();
  console.log(result);
};
 
var myOtherFn = function() {
  return 'hello world';
};
 
myFn(myOtherFn);

muestra en la consola 'hello world'

-------------------------------------

<!-- Declaracion de variables, asignacion y reasignacion de valor -->
<html>
<meta charset="utf-8"/>
<body>
  <script type="text/javascript">
    var nombre; // declaramos la variable
    nombre="David"; // asignamos el valor Morris a la variable
    document.write(nombre); // imprimimos la variable
    document.write("<br />");
    nombre="Rafael"; //asignamos otro valor a la variable
    document.write(nombre); //imprimimos la variable
  </script>
</body>
</html>

================
document.write()
================

<!-- Escribir html en un documento a traves de js -->
<html>
<body>
<script type="text/javascript">
document.write("<h1>Encabezado</h1>");
document.write("<p>Parrafo 1</p>");
document.write("<p>Parrafo 2</p>");
document.write("<h3>Encabezado</h3>");
</script>
<script type="text/javascript">
document.write("hola mundo");
</script>
</body>
</html>

-------------------------------------

<!-- Escribir un enlace o link al documento pidiendo la dirección al usuario -->
<html>
  <head>
      <title>XXX</title>
      <script src="jquery-1.12.4.min.js" type="text/javascript"></script>
      <meta charset="UTF-8">
  </head>
  <script type="text/javascript"> 
  $("document").ready(function () {
    $("#boton1").click(function() {
      //link=prompt("");
      //document.write("<a href='http://www.as.com'>"+link+"</a>");
      link=prompt("Por favor escriba el enlace","enlace");
      document.write("<a href="+link+">Aquí</a>");
    });
  });
</script>
<body>
<button id="boton1">Enlace</button>
<p />
<div id="x"></div>
</body>
</html>

-------------------------------------

<!-- Mostrar alerta en la pagina, se muestra al cargar la pagina -->
<script type="text/javascript">
    alert("Ejemplo de alerta con JavaScript");
</script>

-------------------------------------

<!-- Activar una funcion mostrando una alerta -->
<html>
<head>
  <meta charset="utf-8"/>
  <script type="text/javascript">
  function miFuncion() {
    alert("Activaste la funcion miFuncion()");
  }
  </script>
</head>
<body>
  <form>
    <input type="button" onclick="miFuncion()" value="Activar Función">
  </form>
<p>Presiona el botón y saldra una alerta contenida dentro de una función.</p>
</body>
</html>

-------------------------------------

<!-- Llamada de dos funciones diferentes -->
<html>
  <head>
    <meta charset="utf-8"/>
    <script type="text/javascript">
    function miFuncion1() {
      alert("Activaste la funcion 1");
    }
    function miFuncion2() {
      alert("Activaste la funcion 2");
    }
    </script>
  </head>
<body>
  <form>
    <input type="button" onclick="miFuncion1()" value="Activar Función 1">
    <input type="button" onclick="miFuncion2()" value="Activar Función 2">
  </form>
</body>
</html>

-------------------------------------

<!-- Activar 2 o mas funciones con un boton -->
<html>
<head>
  <meta charset="utf-8"/>
  <script type="text/javascript">
  function Funcion1() {
    alert("Activaste la funcion 1");
  }
  function Funcion2() {
    alert("Activaste la funcion Funcion 2");
  }
  function Funcion3() {
    alert("Activaste la funcion Funcion 3");
  }
  </script>
</head>
<body>
  <form>
    <input type="button" onclick="Funcion1(),Funcion2(),Funcion3()" value="Activar Función">
  </form>
<p>Presiona el botón y saldra una alerta contenida dentro de una función.</p>
</body>
</html>

-------------------------------------

<!-- Pasar parametros a una funcion -->
<html>
    <head>
        <meta charset="utf-8"/>
        <script type="text/javascript">
            function sumar(a,b) {
                var suma;
                suma = a + b;                
                return suma;                
            }
            function restar(a,b) {
                var resta;
                resta = a - b;                
                return resta;                
            }
            //var operacion;
            operacion = sumar(6,4); // Variable que le asignamos la llamada de la funcion y parametros
            alert(operacion); // Mostramos el resultado en una alerta
            operacion = restar(20,18);
            alert(operacion);
        </script>
    </head>    
<body>    
</body>
</html>

-------------------------------------

<!-- Recoger un dato por teclado y visualizarlo -->
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
    <script type="text/javascript">        
        //var nom;        
        nom=prompt("Por favor escriba su nombre","nombre");
            alert("Mucho gusto "+nom);
    </script>
</body>
</html>

-------------------------------------

<!-- Pedir datos y guardarlo en una variable -->
<html>
  <head>
      <title>XXX</title>
      <meta charset="UTF-8">
  </head>
<script type = "text/javascript" language = "javascript">
    var nombre=prompt("Nombre de Usuario:");
    alert(nombre);
</script>
<body>
</body>
</html>

-------------------------------------

<!-- Recoger un dato por teclado y escribirlo en el documento -->
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
    <script type="text/javascript">
        nom=prompt("Por favor escriba su nombre","nombre");
        document.write(nom);
    </script>
</body>
</html>

-------------------------------------

<!-- ciclo while con js -->
<html>
<meta charset="utf-8">
<body>
    <script type="text/javascript">
        var i= 0;
        while (i<=5){
            document.write("El número es " + i + "<br />");
            i=i+1;
        }
    </script>
</body>
</html>

-------------------------------------

<!-- if en JS -->
<html>
    <head>
        <meta charset="utf-8"/>
        <script type="text/javascript">
            if (1 < 2) {
                alert("Verdadero");
            }
            else {
                alert("Falso");
            }
        </script>
    </head>   
<body>    
</body>
</html>

-------------------------------------

<!-- Ejempo de if pidiendo un dato -->
<html>
    <meta charset="utf-8"/>
<body>
    <script type="text/javascript">    
        confirm("Estoy listo para continuar.");
        var edad;        
        edad = prompt("¡Cuántos años tienes?");        
        if (edad <= 13) {
            //console.log("Juega! con cuidado...");
            alert("Juega! con cuidado...");
        }
        else {
            //console.log("Juega!!!");
            alert("Juega!!!");
        }
    </script>
</body>
</html>

-------------------------------------

<!-- Ejempo de if -->
<html>
    <meta charset="utf-8"/>
<body>
    <script type="text/javascript">
        var nombre; //declaramos la variable
        var a = 3        
        function miFuncion(e) {            
            //alert("Activaste la funcion miFuncion()");
            //if (1 > 2) {
            if (a > 2) {
                alert("Verdadero");
                nombre="David";
                document.write(nombre);
            }
            else {
                alert("Falso");
                e.preventDefault();
            }
        }        
    </script>
    <input type="button" onclick="miFuncion()" value="Activar Función 1">            
</body>
</html>

-------------------------------------

<!-- Ejempo de if anidados -->
<html>
    <head>
        <meta charset="utf-8"/>
        <script type="text/javascript">
            idioma=prompt("Por favor escriba su idioma");
            var a="castellano", b="ingles", c="frances", d="alemán";            

            if (idioma === a) {
                alert("Castellano!")
                alert("Que bueno! "+idioma);
            }
            else
            {
                if (idioma === b) {
                    alert("Ingles!");
                    alert("Que bueno! "+idioma);
                }
                else
                {
                    if (idioma === c) {
                        alert("Frances!")
                        alert("Que bueno! "+idioma);
                    }
                    else
                    {
                        if (idioma === d){
                            alert("Alemán")
                            alert("Que bueno! "+idioma);
                        }
                        else
                        {
                            //error('idioma no presente');
                            alert("idioma no presente")
                            alert("no conozco! el "+idioma);
                        }
                    }
                }
            }
        </script>
    </head>
<body>
</body>
</html>

-------------------------------------

<!-- Ejempo de if y else if  -->
<html>
    <meta charset="utf-8"/>
<body>
    <script type="text/javascript">    
        respuestaUsuario = prompt("¿Guardar los datos? s/n");
        if (respuestaUsuario === "s") {
            alert("Datos guardados!");
        }        
        else if (respuestaUsuario === "n") {
            alert("Datos no guardados!")
        }
        else {
            alert("Respuesta no valida!")
        }
    </script>
</body>
</html>

-------------------------------------

<!-- switch en JS -->
<!DOCTYPE html>
<html>
<body>
<script>
    idioma=prompt("Por favor escriba su idioma");

    switch (idioma) {
        case 'castellano' :
            alert("1")
            break;
        
        case 'ingles' :
            alert("2")
            break;
        
        case 'frances' :
            alert("3")
            break;
        
        case 'alemán' :
            alert("4")
            break;
        
        default :
        error ('Idioma no presente');
    } 
</script>
</body>
</html>

-------------------------------------

<!DOCTYPE html>
<html>
<body>
<script>
    vocal=prompt("Introduzca una letra vocal");
    switch (vocal) {
        case 'a' :
            alert("Se ha escrito una a");
            break;        
        case 'e' :
            alert("Se ha escrito una e");
            break;
        case 'i' :
            alert("Se ha escrito una i");
            break;
        case 'o' :
            alert("Se ha escrito una o");
            break;
        case 'u' :
            alert("Se ha escrito una u");
            break;              
        default :
        //error ('Esa no es una vocal!');
        alert("Esa no es una vocal!");
    } 
</script>
</body>
</html>

-------------------------------------

<!-- Definicion de un arreglo en JS -->
<!DOCTYPE html>
<html>
<body>
<script>    
    a = new Array(1,2,3,4,5);
    alert(a);
    //alert(a[0]);
    //alert(a[1]);
    //alert(a[2]);
    //alert(a[3]);
    //alert(a[4]);    
    //dias = new Array('lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes');
    //alert(dias);
    //alert(dias[0]);
    //alert(dias[3]);
</script>
</body>
</html>

-------------------------------------

<!-- Escribiendo en el DOM los elementos de un arreglo -->
<html>
    <meta charset="utf-8"/>
<body>
    <script type="text/javascript">
        a = new Array(1,2,3,'casa',"perro");
        document.write(a,"<p />");
        document.write(a[0],"<br />");
        document.write(a[1],"<br />");
        document.write(a[2],"<br />");
        document.write(a[3],"<br />");
        document.write(a[4],"<br />");
    </script>
</body>
</html>

-------------------------------------

<!-- Escribiendo en el DOM los elementos de un arreglo -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf 8">
</head>
<body>
<p id="caja"></p>
<script type="text/javascript">
var arreglo = ['uno',['uno_uno','uno_dos'],'dos','tres' ];
document.write(arreglo + '<br />');
document.write(arreglo[0] + '<br />');
document.write(arreglo[1] + '<br />');
document.write(arreglo[1][0]);
ocument.write(arreglo[1][1]);
</script>
</body>
</html>

-------------------------------------

<!--Concatenacion de una cadena y de un arreglo -->
<html>
    <meta charset="utf-8"/>
<body>
    <script type="text/javascript">
        var saludo = "Buenos ";
        var hola = saludo.concat("días");
        alert(hola);
        //-------------
        a = Array (1,2,3,4);
        b = Array (3,4,5,6)
        c = a.concat(b);
        alert(c);
    </script>
</body>
</html>

-------------------------------------

<!-- Mostrar un saludo con la hora del sistema -->
<html>
    <head>
        <meta charset="utf-8"/>
        <script type="text/javascript">
            function saludar(){
                var tiempo = new Date();
                var hora, cad="son las ";
                with (tiempo){
                    hora = getHours();
                    //minuto = getMinutes();
                    //segundo = getSeconds();
                    cad += hora + ":" + getMinutes()+":"+getSeconds();
                    //cad += hora + ":" + minuto + ":" + segundo;
                }
                if (hora < 12)
                cad = "Buenos días, "+ cad;
                else if (hora < 18)
                cad = "Buenas tardes, "+ cad;
                else
                cad = "Buenas noches, " + cad;
                return cad
            }
        </script>
    </head>
<body>
    <script type="text/javascript">    
        document.write(saludar());    
    </script>
</body>
</html>

-------------------------------------

<!-- Mostrar un saludo con la fecha y hora del sistema -->
<html>
    <head>
        <meta charset="utf-8"/>
        <script type="text/javascript">
            function saludar() {
                var date = new Date();
                var dd = date.getDate();
                var mm = date.getMonth()+1;
                var yyyy = date.getFullYear();
                var hora, cad=" y son las ";
                var hoy = "hoy es ";
                with (date) {
                    hora = getHours();
                    minuto = getMinutes();
                    segundo = getSeconds();            
                    if (minuto < 10)
                        minuto='0'+minuto
                    cad += hora + ":" + minuto;
                }
                if(dd<10) {
                    dd='0'+dd
                }
                if(mm<10) {
                    mm='0'+mm
                }
                dates = dd+'/'+mm+'/'+yyyy;                
                
                if (hora < 12)
                    cad = "Buenos días, "+ hoy + dates +cad + " am";
                else if (hora < 18)
                    cad = "Buenas tardes, "+ hoy + dates + cad + " pm";
                else
                    cad = "Buenas noches, " + hoy + dates + cad + " pm";;
                return cad
            }
        </script>
    </head>
<body>
    <script type="text/javascript">
        document.write(saludar());
    </script>
</body>
</html>

-------------------------------------

<!-- Validar direccion e-mail -->
<html>
    <head>
        <meta charset="utf-8"/>
        <script type="text/javascript">
            function checkemail(email) {
                var ind1, ind2, ind3;
                ind1 = email.indexOf('@');
                ind2 = email.indexOf('.');
                ind3 = email.lastIndexOf('@');
                if ((ind1<=0) || (ind2<ind1) || (ind3 != ind1)) {
                    return "Correo invalido!";
                }
                else
                {
                    return "Correo valido!";
                }
            }
        </script>
    </head>
<body>
    <script type="text/javascript">
        correo = "admin@admin.com";
        document .write(correo+" "+checkemail(correo),'<br />');
        correo = "admin.com";
        document.write(correo+" "+checkemail(correo));
        //correo=prompt("Por favor escriba su email");
        //alert(correo+" "+checkemail(correo));
    </script>
</body>
</html>

-------------------------------------

<!-- Validar direccion e-mail, pedir el dato -->
<html>
    <head>
        <meta charset="utf-8"/>
        <script type="text/javascript">
            function checkemail(email) {
                var ind1, ind2, ind3;
                ind1 = email.indexOf('@');
                ind2 = email.indexOf('.');
                ind3 = email.lastIndexOf('@');
                if ((ind1<=0) || (ind2<ind1) || (ind3 != ind1)) {
                    return "Correo invalido!";
                }
                else {
                    return "Correo valido!";
                }
            }
        </script>
    </head>
<body>
    <script type="text/javascript">
        correo = prompt("Por favor escriba su email");
        document .write(correo+" "+checkemail(correo),'<br />');
    </script>
</body>
</html>

-------------------------------------

<!-- Validar direccion e-mail 2 -->
<html>
    <meta charset="utf-8"/>
    <script type="text/javascript">
        function checkMail(cadena) {
            var plant = /[^\w^@^\.^-]+/gi
            if (plant.test(cadena)) {
                alert(cadena + " contiene caracteres extraños.");
            }
            else {
                plant =/(^\w+)(@{1})([\w\.-]+$)/i            
                if (plant.test(cadena)) {
                    alert(cadena + ", direccion valida!");
                }
                else {
                    alert(cadena + ", no es válido!");
                }
            }
        }    
    </script>
<body>
<form name="form1" method="post" action="">
  e-mail: <input type="text" name="email">
  <input type="button" name="Button" value="Validar" onclick="checkMail(this.form.email.value)">
</form>
</body>
</html>

-------------------------------------

<!-- Comprobar si una cadena contiene ciertos caracteres o palabras -->
<html>
    <head>
        <script>
            function myFunction() {
                var str = "abecedario12";                
                var patt = /ab/g;
                var result = patt.test(str);                
                var patt2 = /1/g;
                var result2 = patt2.test(str);
                document.getElementById("site").innerHTML = result + "<br>" + result2;
            }
        </script>
    </head>
<body>
    <button onclick="myFunction()">Probar</button>
    <p id="site"></p>
</body>
</html>

-------------------------------------

<!-- Capturar y escribir los datos enviados por un formulario en JS -->
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
  </head>
  <script type="text/javascript">
  function escribe() {
    escribir = document.getElementById("caja")
    miusuario = "<p>" + document.rellenar.usuario.value + "</p>"
    mipass = "<p>" + document.rellenar.pass.value + "</p>"
    micoment = "<p>" + document.rellenar.coment.value + "</p>"
    escribir.innerHTML = miusuario + mipass + micoment
  }
  window.onload = function() {
    document.rellenar.guardar.onclick = escribe
  }
  </script>
<body>
  <form name="rellenar" action="#" method="get">
    <h2>Acceder</h2>
    <p>USUARIO : <input name="usuario" type="text"/> </p>
    <p>PASSWORD: <input name="pass" type="password" /></p>
    <p>Comentario</p>
    <p><textarea name="coment"></textarea></p>
    <p><input name="guardar" type="button" value="Enviar" />
  </form>
  <br />
  <div id="caja">
  </div>
</body>
</html>

-------------------------------------

<!-- Capturar datos de un formulario y guardarlos en una variable -->
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <style type="text/css">
    </style>
    <script type="text/javascript">
        function mostrar() {
            numero_proyecto = document.formulario.numero_proyecto.value
            alert(numero_proyecto);
        }
    </script>
<body>
    <form name="formulario" action="#" method="get">
        Número de Proyecto: <input name="numero_proyecto" type="text"/><br />
        <input type="button" value="Hacer click" onclick="mostrar()"/>
    </form>
</body>
</html>

-------------------------------------

<!-- Eventos en JS -->
<!DOCTYPE html>
<html>
    <head>
      <script type="text/javascript">
        //EVENTOS EN javascript
        function hacer_click() {
            alert("Usando la funcion onclick!");
        }
        function hacer_hover() {
            alert("Usando la funcion onmouseover!");
        }
        function salir_del_hover() {
            alert("Usando la funcion onmouseout");
        }
        function cargar_pagina() {
          alert("Ya se ha cargado el sitio web");
        }
        //onmouseout="salir_del_hover()" Este evento se lanza cuando pasamos el mouse(puntero) sobre un elemento del html, para especificar gatillo de este evento en un elemento del DOM debe usarse el atributo “onmouseover”. 

        //onmouseover="hacer_hover()" "onmouseout" se dispara cuando el puntero sale del area de un elemento del DOM.

        //onclick="hacer_click()"" Se ejecuta cuando damos click a un elemento del DOM en nuestro sitio, no necesariamente este debe ser un boton, puede ser un <div> u otro tag de html. Para incorporarlo en HTML basta con utilizar el atributo “onclick” en un elemento HTML y especificar el codigo o funcion de javascript a ejecutar.

        //onload="cargar_pagina()" Este evento se ejecuta cuando el DOM, es decir todos los elementos html del sitio web han sido cargados correctamente en el cliente, se usa mucho para asegurar la ejecución de codigo cuando se es necesario que la página este completamente cargada para la ejecución correcta de nuestros programas en javascript. Lo ideal es colocarlo unicamente en el tag “<body>” de nuestros sitios web.
      </script>
    </head>
<body onload="cargar_pagina()">
  <form>
      <input type="button" value="Hacer click" onclick="hacer_click()"/>

      <input type="button" value="Posar cursor" onmouseover="hacer_hover()" />      

      <input type="button" value="Posar y quitar cursor" onmouseout="salir_del_hover()" />      
  </form>
</body>
</html>

-------------------------------------

<!-- Crear una clase y un objeto en Js -->
<!--En Javascript las clases se crean utilizando las funciones. Es por ello que, si queremos crear una clase, lo único que tenemos que hacer es crear una función.-->

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Objeto Persona</title>
    </head>
<body>
    <h1>Objeto Persona</h1>
    <script type="text/javascript">
        function persona(nombre,apellido,edad) { //Usando una funcion se puede crear una clase
            this.nombre = nombre; // Atributos de la clase persona
            this.apellido = apellido; // Los atributos se referencian mediante this
            this.edad = edad;
        }
        var p1 = new persona("David","Webb",25); //Para instanciar un objeto de una clase utilizaremos la sentencia new
        var p2 = new persona("Maria","Perez",33);        
        //alert(p1.nombre + "-" + p1.edad);
        //alert(p2.nombre + "-" + p2.edad);
        //document.write(p1.nombre + p1.apellido + p1.edad + "<br />");
        document.write(p1.nombre + " " + p1.apellido + " " + p1.edad + "<br />"); //Escribiendo en el documento HTML
        document.write(p2.nombre + " " + p2.apellido + " " + p2.edad + "<p />");
        document.write("<b>Nombre: </b>" + p1.nombre + "<br />");
        document.write("<b>Apellido: </b>" + p1.apellido  + "<br />");
        document.write("<b>Edad: </b>" + p1.edad + "<br />");
    </script>
</body>
</html>

-------------------------------------

<!-- Creando una clase, metodo y un objeto en Js -->
<html>
<head>
    <title></title>
    <script type="text/javascript">
        function rectangulo(base,altura) {
            this.base = base;
            this.altura = altura;            
            
            this.calcularArea = function () { // Método creado para realizar el calculo del area
                return this.base*this.altura;
            };
        }       

        var r1 = new rectangulo(3,8); // Creando el objeto y pasandole parametros
        
        document.write(r1.calcularArea()); // Llamada del metodo de la clase
    </script>
</head>
<body>s
</body>
</html>

-------------------------------------

<!--Creando una clase, una función para calcular fuera de la clase y un objeto en Js -->
<html>
<head>
    <title></title>
    <script type="text/javascript">
        function rectangulo(base,altura) {
            this.base = base;
            this.altura = altura;
            this.calcularArea = getArea; // Asignamos a una variable (calcularArea) una funcion externa (getArea)
        }
        function getArea() { // Funcion para calcular el area, declarada fuera de la clase
            return this.base*this.altura;
        }
        var r1 = new rectangulo(3,9); // Creando el objeto y pasandole parametros        
        document.write(r1.calcularArea()); // Llamada del metodo de la clase
    </script>
</head>
<body>
</body>
</html>

-------------------------------------

<!--Rotador de texto, texto cambiante -->
<html>
    <head>
        <title></title>
        <meta charset="UTF-8" />
    </head>
    <script type="text/javascript">
        var indice = 0;
        frases = new Array();
        frases[0] = "'Tenemos que ser creativos continuamente, creativos; hay que buscar la teoría, no hay revolución sin teoría revolucionaria; no lo olvidemos' Hugo Chávez."

        frases[1] = "'Amor con amor se paga, y yo no tengo más nada que darles que amor, entrega, trabajo; mi vida entera se las regalo' Hugo Chávez."

        frases[2] = "'Todo revolucionario debe ser un profundo autocrítico' Hugo Chávez."

        indice = Math.random()*(frases.length);
        indice = Math.floor(indice);

        function rotar() {
            if (indice == frases.length) {indice = 0;}
                document.getElementById("rotando").innerHTML = frases[indice];
                indice++;
                setTimeout("rotar();",8000);
        }
    </script>
<body>    
    <div id="rotando" style="height:120px;margin:0px auto;font-weight:bold;color:red;">
    </div>
    <script type="text/javascript">rotar();</script>
</body>
</html>

-------------------------------------

<!--Rotador de texto, texto cambiante 2 -->
<html>
    <head>
        <title></title>
        <meta charset="UTF-8" />
    </head>

    <style type="text/css">
        #frases {
            color: red;
        }
        .gallerycontroller {
            /*width: 250px*/
        }

        .gallerycontent {
            /*width: 250px;
            height: 200px;*/
            /*border: 1px solid black;*/
            /*background-color: #DFDFFF;*/
            /*padding: 3px;*/
            /*display: block;*/
        }
    </style>
    <script type="text/javascript">
        /***********************************************
        * Advanced Gallery script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
        * Please keep this notice intact
        * Visit http://www.dynamicdrive.com/ for full source code
        ***********************************************/

        var tickspeed=8000 //ticker speed in miliseconds (2000=2 seconds)
        var displaymode="auto" //displaymode ("auto" or "manual"). No need to modify as form at the bottom will control it, unless you wish to remove form.

        if (document.getElementById){
        document.write('<style type="text/css">\n')
        document.write('.gallerycontent{display:none;}\n')
        document.write('</style>\n')
        }

        var selectedDiv=0
        var totalDivs=0

        function getElementbyClass(classname){
        partscollect=new Array()
        var inc=0
        var alltags=document.all? document.all.tags("DIV") : document.getElementsByTagName("*")
        for (i=0; i<alltags.length; i++){
        if (alltags[i].className==classname)
        partscollect[inc++]=alltags[i]
        }
        }

        function contractall(){
        var inc=0
        while (partscollect[inc]){
        partscollect[inc].style.display="none"
        inc++
        }
        }

        function expandone(){
        var selectedDivObj=partscollect[selectedDiv]
        contractall()
        selectedDivObj.style.display="block"
        if (document.gallerycontrol)
        temp.options[selectedDiv].selected=true
        selectedDiv=(selectedDiv<totalDivs-1)? selectedDiv+1 : 0
        if (displaymode=="auto")
        autocontrolvar=setTimeout("expandone()",tickspeed)
        }

        function populatemenu(){
        temp=document.gallerycontrol.menu
        for (m=temp.options.length-1;m>0;m--)
        temp.options[m]=null
        for (i=0;i<totalDivs;i++){
        var thesubject=partscollect[i].getAttribute("subject")
        thesubject=(thesubject=="" || thesubject==null)? "HTML Content "+(i+1) : thesubject
        temp.options[i]=new Option(thesubject,"")
        }
        temp.options[0].selected=true
        }

        function manualcontrol(menuobj){
        if (displaymode=="manual"){
        selectedDiv=menuobj
        expandone()
        }
        }

        function preparemode(themode){
        displaymode=themode
        if (typeof autocontrolvar!="undefined")
        clearTimeout(autocontrolvar)
        if (themode=="auto"){
        document.gallerycontrol.menu.disabled=true
        autocontrolvar=setTimeout("expandone()",tickspeed)
        }
        else
        document.gallerycontrol.menu.disabled=false
        }


        function startgallery(){
        if (document.getElementById("controldiv")) //if it exists
        document.getElementById("controldiv").style.display="block"
        getElementbyClass("gallerycontent")
        totalDivs=partscollect.length
        if (document.gallerycontrol){
        populatemenu()
        if (document.gallerycontrol.mode){
        for (i=0; i<document.gallerycontrol.mode.length; i++){
        if (document.gallerycontrol.mode[i].checked)
        displaymode=document.gallerycontrol.mode[i].value
        }
        }
        }
        if (displaymode=="auto" && document.gallerycontrol)
        document.gallerycontrol.menu.disabled=true
        expandone()
        }

        if (window.addEventListener)
        window.addEventListener("load", startgallery, false)
        else if (window.attachEvent)
        window.attachEvent("onload", startgallery)
        else if (document.getElementById)
        window.onload=startgallery
    </script>
<body>    
    <div id="frases" class="gallerycontent">
        "Tenemos que ser creativos continuamente, creativos; hay que buscar la teoría, no hay revolución sin teoría revolucionaria; no lo olvidemos" Hugo Chávez.
    </div>

    <div id="frases" class="gallerycontent">
        "Amor con amor se paga, y yo no tengo más nada que darles que amor, entrega, trabajo; mi vida entera se las regalo" Hugo Chávez.
    </div>
</body>
</html>

-------------------------------------

<!-- Agregar estilos CSS a elementos HTML con JS -->
<html>
<head>    
    <title>Page Title</title>
    <meta charset="UTF-8">
    <script>
        function x() {
            document.getElementById("p2").style.color = "blue";
            document.getElementById("p2").style.fontFamily = "Arial";
            document.getElementById("p2").style.fontSize = "larger";
            //alert("sssssssss");
        }
    </script>
</head>
<body>    
    <p id="p1">Hello World!</p>
    <p id="p2">Hello World!</p>
    <br />
    <input type="button" onclick="x()" value="Activar Función">
</body>
</html>

-------------------------------------

<!-- Estilos CSS con JS inscrustados en elementos HTML -->
<html>
<head>    
    <title>Page Title</title>
    <meta charset="UTF-8">    
    <style type="text/css">
    div {
        border: ridge 1px;
    }
    </style>
</head>
<body>
    <a href="javascript:void(document.body.style.fontSize='20px')">Aumenta el tamaño de la fuente de toda la página</a> <br />
    <a href="javascript:void(document.body.style.fontSize='16px')">Tamaño normal</a> <br />
    <a href="javascript:void(document.body.style.backgroundColor='yellow')">Cambia el color del fondo</a> <br />
    <a href="javascript:void(document.body.style.backgroundColor='#CDCDCD')">Color normal</a> <br />
    <div id="ejemplo">
        <a href="javascript:void(document.getElementById('ejemplo').style.fontSize='20px')">Aumenta el tamaño de la fuente solo de esta sección</a> <br />
        <a href="javascript:void(document.getElementById('ejemplo').style.fontSize='16px')">Tamaño normal</a> <br />
        <a href="javascript:void(document.getElementById('ejemplo').style.backgroundColor='yellow')">Cambia el color del fondo de esta sección</a> <br />
        <a href="javascript:void(document.getElementById('ejemplo').style.backgroundColor='white')">Color normal</a> <br />
    </div>
</body>
</html>

-------------------------------------

<!-- Agregando estilos CSS con funciones JS en elementos HTML -->
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
     label {
        color: maroon;
        display:block;
        padding:5px;
    }
    </style>
    <script type="text/javascript">
        function cambiarAspecto(elemento) {
            var elementosObtenidos = document.getElementsByTagName(elemento);
            elementosObtenidos[0].style.backgroundColor = '#FF6633';
            elementosObtenidos[1].style.backgroundColor = '#FF9933';
            elementosObtenidos[2].style.backgroundColor = '#FFCC33';
        }
    </script>
</head>
<body>
<div style="width:450px;">
    <form name ="formularioContacto" class="formularioTipo1" method="get" action="accion.html" onclick="cambiarAspecto('label')">
        <p>Si quieres contactar con nosotros envíanos este formulario relleno:</p>
        <label for="nombre"><span>Nombre:</span> <input id="nombre" type="text" name="nombre" /></label>
        <label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos" /></label>
        <label for="email"><span>Correo electrónico:</span> <input id="email" type="text" name="email" /></label>
        <label>
            <input type="button" value="Enviar">
            <input type="reset" value="Cancelar">
        </label>
    </form>
</div>
</body>
</html>

-------------------------------------

<!-- Alerta, con boton aceptar y cancelar -->
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script language="Javascript"> 
      function confirmar(){ 
      confirmar=confirm("¿Enviar datos?"); 
      if (confirmar) 
      // si pulsamos en aceptar
      alert('Has dicho que si');
      else 
      // si pulsamos en cancelar
      alert('Has dicho que no'); 
      }
    </script>
</head>
<body>  
  <form action="#" method="get">
  Nombre: <input type="text" name="nombre"> <br />
  Cédula: <input type="text" name="cedula"> <br />
  <input type="submit" value="Enviar" onclick="confirmar()">
  <input type="reset" value="Borrar">
</form>
</body>
</html>

-------------------------------------

<!-- Confirmación de envío de formulario con alert, boton aceptar, cancelar -->
<html>
<head>
    <title></title>
    <meta charset="utf-8">
<script language="JavaScript">
function pregunta(){
    if (confirm('¿Estas seguro de enviar este formulario?')){
      document.formulario.submit()
    }
    else {
      alert("!Datos no enviados¡");
    }
}
</script>
</head>
<body>
<form action="#" name=formulario method="get" >
  Nombre: <input type="text" name="nombre"> <br />
  Cédula: <input type="text" name="cedula"> <br />
  <input type="button" value="Enviar" onclick="pregunta()">
  <input type="reset" value="Borrar">
</form>
</body>
</html>

-------------------------------------

<!-- Uso de Pestañas para contenidos con JS y CSS-->
<html>
<head>  
  <title>tab_javascript</title>
  <script type="text/javascript">
    function tab(tab_id) {//funcion tab que recibe el parametro del id
      var tab_contenido = document.getElementsByTagName("div");//definimos el elemento que sera devuelto
        for(var x=0; x<tab_contenido.length; x++) {//almacenamos los elementos divs
          name = tab_contenido[x].getAttribute("name");//recibimos el nombre de la clase
          if (name == 'tab_contenido') {//comparamos el valor del nombre
            if (tab_contenido[x].id == tab_id) {//comparamos el numero de contenido
            tab_contenido[x].style.display = 'block';//mostramos el contenido correspondiente
          }
          else {
            tab_contenido[x].style.display = 'none';//ocultamos los otros contenidos.
          }
        }
      }
    }
  </script>
  <style>      
    /*----clase pra las pestañas---*/
    #tab {
      text-transform: uppercase;
      padding:5px;
      text-decoration:none;
      color:#ccc;
      font: 14px/100% Arial, Helvetica, sans-serif;
       background: #4162a8;
       border: 1px solid #19253f;
      -webkit-border-top-left-radius: 10px;
      -webkit-border-top-right-radius: 10px;
      -moz-border-radius-topleft: 10px;
      -moz-border-radius-topright: 10px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }
    /*----clase para las pestañas activadas----*/
    #tab:active {
      /*color:#000;*/    
      background:#ccc;
    }
    /*----clase para el contenido------*/
    .tab_contenido {
      text-align:left;
      padding: 8px;
      display:none;
      width:550px;
      height: 250px;
      color:#000;
      background:#ccc;
      border: ridge 1px;
    }
  </style>
</head>
<body>
  <!--pestañas de la tab-->
  <a id="tab" href="javascript:tab('tab_contenido1');" >Contenido 1</a>
  <a id="tab" href="javascript:tab('tab_contenido2');" >Contenido 2</a>
  <a id="tab" href="javascript:tab('tab_contenido3');" >Contenido 3</a>

  <!--contenidos de la tab-->
  <div name="tab_contenido" id="tab_contenido1" class="tab_contenido"style="display: block;">
    Contenido1 Contenido1 Contenido1 Contenido1<br />
    Contenido1 Contenido1 Contenido1 Contenido1<br />
  </div>
    
  <div name="tab_contenido" id="tab_contenido2" class="tab_contenido">
    Contenido2 Contenido2 Contenido2 Contenido2<br />
    Contenido2 Contenido2 Contenido2 Contenido2<br />
  </div>

  <div name="tab_contenido" id="tab_contenido3" class="tab_contenido">
    Contenido3 Contenido3 Contenido3 Contenido3<br />
    Contenido3 Contenido3 Contenido3 Contenido3<br />
  </div>
</body>
</html>

-------------------------------------

<!-- Comprobar que las contraseñas/passwords sean iguales -->
<html>
<head>
  <title></title>
  <meta charset="UTF-8">
  <script>
  function comprobarClave() {
    clave1 = document.f1.clave1.value
    clave2 = document.f1.clave2.value
    if (clave1 == clave2)
       alert("Las dos claves son iguales")
    else
       alert("Las dos claves son distintas")
  }
  </script>
</head>
<body>  
  <form action="#" method="get" name="f1">
    Contraseña: <input type="password" name="clave1" size="20"> <br />
    Repite contraseña: <input type="password" name="clave2" size="20"> <br />
  <input type="button" value="Enviar" onClick="comprobarClave()">
  </form>
</body>
</html>

--- Forma completa con submit ---

<html>
<head>
  <title></title>
  <meta charset="UTF-8">
  <script>
  function comprobarClave() {
    clave1 = document.formulario.clave1.value
    clave2 = document.formulario.clave2.value
    if (clave1 == clave2)
       //alert("Las dos claves son iguales")
       document.formulario.submit()
    else
       alert("Las contraseñas deben ser idénticas ")
  }
  </script>
</head>
<body>  
  <form action="#" method="get" name="formulario">
    Nombre: <input type="text" name="nombre"> <br />
    Cédula: <input type="text" name="cedula"> <br />
    Contraseña: <input type="password" name="clave1" size="20"> <br />
    Repite contraseña: <input type="password" name="clave2" size="20"> <br />
  <input type="button" value="Enviar" onClick="comprobarClave()">
  </form>
</body>
</html>

-------------------------------------

<!-- Copiar texto de una caja de texto a otra -->
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <script type="text/javascript">
        function copiar() {
            document.getElementById("text2").value=document.getElementById("text1").value;
        }
    </script>
</head>
<body>
    text 1<input type="text" name="text1" id="text1" onkeyup="copiar()">
    <br />
    text 2<input type="text" name="text2" id="text2">
</body>
</html>

-------------------------------------

<!-- Descargar en un .txt el contenido de un area de texto -->
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript">         
            window.onload = function() {
            var txt = document.getElementById('txt');
            txt.value = window.onload + '';
                document.getElementById('link').onclick = function(code) {
                    this.href = 'data:text/plain;charset=utf-8,'
                    + encodeURIComponent(txt.value);
                };
            };          
        </script>
    </head>
<body>      
    <textarea id="txt"></textarea>
    <br />
    <a href="#" id="link" download="contenido.txt">Descargar el contenido del textarea</a>  
</body>
</html>

-------------------------------------

<!-- Descargar en un .txt el contenido de un campo de texto -->
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript">
            window.onload = function() {
                var texto = document.getElementById('texto');
                texto.value = window.onload + '';
                document.getElementById('link').onclick = function(code) {
                    this.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(texto.value);
                };
            };
        </script>
    </head>
<body>
    Nombre: <input type="text" name="nombre" id="texto"><br />
    <br />
    <a href="#" id="link" download="contenido.txt">Descargar el contenido del textarea</a>  
</body>
</html>

-------------------------------------

<!-- Confirmación, validar envío de formulario en js-->
<!-- alerta sobre el envio del formulario-->
<html>
<head>
    <title>Confirmación de envío de formulario</title>
    <meta charset="UTF-8">
    <script language="JavaScript">
        function pregunta() {
            if (confirm('¿Estas seguro de enviar este formulario?')){
               document.tuformulario.submit()
            }
        }
    </script>
</head>
<body>
    <form name=tuformulario method="get" action="">
        <label for="nombre">Nombre:<input id="nombre" type="text" name="nombre" /></label> <br />
        <label for="apellidos">Apellidos:<input id="apellidos" type="text" name="apellidos" /></label> <br />
        <input type=button onclick="pregunta()" value="Enviar">
    </form>
</body>
</html>

-------------------------------------

<!-- Confirmación, validación de que los datos del formulario fueron enviados -->
<!-- mediante una alerta -->
<html>
<head>
    <title>Confirmación de datos enviados</title>
    <meta charset="UTF-8">
    <script language="JavaScript">
        function return_validacion() {
            alert("Acceso concedido");
        }
    </script>
</head>
<body>
    <!--form action="#" method="get"-->
    <form action="" method="" id="" name="" onsubmit="return_validacion()">
        Usuario: <input type="text" name="user" > <br />
        Contraseña: <input type="password" name="contrasena"> <br />
        <input type="submit" value="Enviar">
        <input type="reset" value="Borrar">
    </form>
</body>
</html>

-------------------------------------

<!-- Validar que los campos no estén vacios, form-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Ejemplo aprenderaprogramar.com</title>
        <meta charset="utf-8" />
        <style type="text/css">
            
        </style>
        <script type="text/javascript">
          function formulario(f) {
            if (f.user.value == '') {
              alert ('El Usuario es obligatorio');
              f.nombre.focus(); return false;
            }
            
            if (f.pass.value == '') {
              alert ('El Password es obligatorio');
              f.email.focus(); return false; } return true;
            }
        </script>
    </head>
<body>
    <form method="get" action="" onsubmit="return formulario(this)">
        Usuario: <input type="text" name="user"> <br />  
        Contraseña: <input type="password" name="pass"> <br />
        <label><input type="submit" value="Enviar"><input type="reset" value="Cancelar"></label>
    </form>
</body>
</html>

-------------------------------------

<!-- Validar que los campos no estén vacios, si estan vacios
no envia los datos Es comun que al validar un string se
escriba if(campo == "") alert("Error");
Si el campo contiene " " entonces la validacion no funciona
-->
<html>
<head>
    <title>Confirmación de envío de formulario</title>
    <meta charset="utf-8" />
    <script language="JavaScript">
      function validar() {
        if (document.formulario.username.value == '' && document.formulario.password.value == '') {
          alert("Campos obligatorios");
        }
        
        else {
          if (document.formulario.username.value == '') {
            alert("El campo Usuario es obligatorio");
          }
          else {
            alert("Datos enviados");
            document.formulario.submit()
          }
        }
        /*if (document.formulario.password.value == '') {
          alert("El campo Contraseña es obligatorio");
        }*/
        /*else {
          alert("Datos enviados");
          document.formulario.submit()
        }*/
      }
    </script>
</head>
<body>
  <form name="formulario" action="#">
    Usuario: <input type="text" name="username"> <br />
    Contraseña: <input type="password" name="password"> <br />
    <input type="button" onclick="validar()" value="Enviar">
  </form>
</body>
</html>

-------------------------------------

<!-- Validar claves con javascript -->
<!doctype html>
<html>
<head>
<title></title>
<script type="text/javascript">
    window.addEventListener('load', inicio, false);
    function inicio() {
        document.getElementById("formulario1").addEventListener('submit', validar, false);
    }

    function validar(evt) {
        var cla1 = document.getElementById("clave1").value;
        var cla2 = document.getElementById("clave2").value;
        if (cla1!=cla2) {
            alert('Las claves ingresadas son distintas');
            evt.preventDefault();
        }
        //else
        //{
        //    alert('Correcto');
        //}
    }
</script>
</head>
<body>
<form method="GET" action="#" id="formulario1">
    Ingrese clave: <input type="password" id="clave1" name="clave1" size="20" required> <br>
    Repita clave: <input type="password" id="clave2" name="clave2" size="20" required> <br>
    <input type="submit" id="confirmar" name="confirmar" value="Confirmar">
</form>
</body>
</html>          

-------------------------------------
<!-- Validar campos con javascript -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Ejemplo aprenderaprogramar.com</title>
        <meta charset="utf-8" />
        <style type="text/css">
            label {
                display:block;
                padding:5px;
            }
        </style>
        <script type="text/javascript">
            window.onload = function () {
                document.formularioContacto.nombre.focus();
                document.formularioContacto.addEventListener('submit', validarFormulario);
            }    

            function validarFormulario(evObject) {
                evObject.preventDefault();
                var todoCorrecto = true;
                var formulario = document.formularioContacto;
            for (var i=0; i<formulario.length; i++) {
                            if(formulario[i].type =='text') {
                                           if (formulario[i].value == null || formulario[i].value.length == 0 || /^\s*$/.test(formulario[i].value)){
                                           alert (formulario[i].name+ ' no puede estar vacío o contener sólo espacios en blanco');
                                           todoCorrecto=false;
                                           }
                                        }
                                    }
            if (todoCorrecto ==true) {formulario.submit(); }
            }
        </script>
    </head>
<body>
    <form name ="formularioContacto" class="formularioTipo1" method="get" action="">
        <p>REGISTRARSE</p>
        <label for="nombre"><span>Nombre:</span> <input id="nombre" type="text" name="nombre" /></label>
        <label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos" /></label>
        <label for="email"><span>Correo electrónico:</span> <input id="email" type="text" name="email" /></label>
        <label><input type="submit" value="Enviar"><input type="reset" value="Cancelar"></label>
    </form>
</body>
</html>

-------------------------------------
<!-- Validar campos vacios de formulario, mostrar texto de alerta con estilo
junto a la caja de texto -->
<html>
<head>
    <title>Confirmación de envío de formulario</title>
    <meta charset="utf-8" />
    <style type="text/css">
      span.mensaje_error_color {
        color: red;
      }      
    </style>
    <script language="JavaScript">
      function validar() {
        if (document.formulario.username.value == '') {
          //alert("El campo Usuario es obligatorio");
          document.getElementById("mensaje_error").innerHTML = "El Usuario es obligatorio";
        }
        if (document.formulario.password.value == '') {
          //alert("El campo Usuario es obligatorio");
          document.getElementById("mensaje_error2").innerHTML = "La Contraseña es obligatoria";
        }
        else {
          //alert("Datos enviados");
          document.formulario.submit()
        }
      }
    </script>
</script>
</head>
<body>
  <form name="formulario" action="#">
    *Usuario: <input type="text" name="username">
    <span id="mensaje_error" class="mensaje_error_color"></span> <br />
    *Contraseña: <input type="password" name="password">
    <span id="mensaje_error2" class="mensaje_error_color"></span> <br />    
    <input type="button" onclick="validar()" value="Enviar">
  </form>
</body>
</html>

-------------------------------------

<!-- Validar el envio de datos del formulario segun la condición, este es el caso de que el campo
no este vacío -->
<html>
<head>
    <title>Confirmación de envío de formulario</title>
    <meta charset="utf-8" />      
    <script type="text/javascript">
      function enviar(){
        var formulario = document.getElementById("formulario");
        var dato = formulario[0];       
        if (dato.value != ""){
          alert("Se envió");
          formulario.submit();
          return true;
        }
        else {
          alert("No se envió");
          return false;
        }
      }
    </script>
</head>
<body>
  <form id="formulario" action="#" onsubmit="return enviar();">  
    Usuario: <input type="text" name="username"> <p />    
    <button>Enviar</button>
  </form>
</body>
</html>

-----

<!-- Ejemplo original, solo envía si la cadena a enviar coincide con la condición -->
<html>
<head>
    <title>Confirmación de envío de formulario</title>
    <meta charset="utf-8" />
    <script type="text/javascript">
      function enviar(){
        var formulario = document.getElementById("formulario"); 
        var dato = formulario[0];
       
        if (dato.value=="enviar"){
          alert("Enviando el formulario");
          formulario.submit();
          return true;
        } else {
          alert("No se envía el formulario");
          return false;
        }
      }
    </script>
</head>
<body>
  <form id="formulario" action="#" onsubmit="return enviar();">
    *Usuario: <input type="text" name="username"> <p />    
    <button>Enviar</button>
  </form>
</body>
</html>

-------------------------------------

<!-- abrir enlace en nueva ventana usando un enlace-->
<a href="javascript:window.open('http://www.as.com/','','width=600,height=400,left=50,top=50,toolbar=yes');void 0">Nueva nueva ventana</a> <p />

<!-- abrir enlace en nueva ventana usando un boton-->
<input type="button" value="Nueva ventana" onclick="javascript:window.open('http://www.as.com/','','width=600,height=400,left=50,top=50,toolbar=yes');" /> <p /> 

<p />
<a onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;" href="http://www.as.com/">Vinculo para abrir la página en otra ventana</a>

-------------------------------------

<!-- Funciónes onclick para redireccionar url al hacer click -->
<html>
<head>
  <title></title>
</head>
<body>
<button id="myButton" class="float-left submit-button" >GO</button>
<br />
<br />
<button type="button" onclick="miFuncion()">miFuncion</button>
<script type="text/javascript">
    document.getElementById("myButton").onclick = function () {
        location.href = "www.yoursite.com";
    };
    function miFuncion() {
        //alert("Activaste la funcion miFuncion()");
        location.href = "www.yoursite.com";
    }
</script>
</body>
</html>

-------------------------------------

JSON
====

JSON es una notación de objetos basada en JavaScript, utiliza una sintaxis que
nos permite crear objetos de manera rapida y simple, estos objetos pueden ser
utilizados de la manera que queramos y la notación se utiliza muy comúnmente
para crear servicios REST, objetos, e incluso fue adoptada por algunas bases de
datos como lo es MongoDB.

Sintaxis de JSON

Para escribir JSON debemos tener en cuenta lo siguiente:
La creación de los objetos JSON implica escribir datos, para ello:

-Los objetos JSON estan rodeados por llaves “{}”
-Los datos estan separados por comas.
-Los datos se escriban en pares, siendo primero el nombre o atributo del mismo y luego el valor del dato.
-Llaves cuadradas [] guardan arreglos, incluyendo otros objetos JSON

El formato JSON tiene la siguiente notación:

{key : value, key2 : value2, key3 : value3,...}

Y también puede ser serializado y multidimensional, por ejemplo:

[{key : value, key2 : value2, key3 : value3, key : { key : value, key2 : value2, key3 : value3} },{key : value, key2 : value2, key3 : value3,...}]

Ejemplo de un objeto JSON que guarda un usuario y password:

var objetoJSON = {"usuario":"user","password":"123456"};

--- Ejemplos:
 
<!-- Ejemplo de XML -->
<Clientes>
  <Cliente ID="283">
    <Nombre>Juan Carlos Crespin</Nombre>
    <Direccion verificada="si">
            <Calle>Avda Perú</Calle>
            <Numero>235</Numero>
        <Ciudad>Bahía Blanca</Ciudad>
        <Provincia>Buenos Aires</Provincia>
        <CodigoPostal>8000</CodigoPostal>
            <Pais>Argentina</Pais>
         </Direccion>
  </Cliente>
</Clientes>

<!-- Equivalente en JSON -->
{
  "Clientes": {
    "Cliente": {
      "-ID": "283",
      "Nombre": "Juan Carlos Crespin",
      "Direccion": {
        "-verificada": "si",
        "Calle": "Avda Perú",
        "Numero": "235",
        "Ciudad": "Bahía Blanca",
        "Provincia": "Buenos Aires",
        "CodigoPostal": "8000",
        "Pais": "Argentina"
      }
    }
  }
}

<!-- Otro Ejemplo de XML-->
<persona>
    <nombre>juan</nombre>
    <edad>22</edad>
    <estudios>
        <estudio>primario</estudio>
        <estudio>secundario</estudio>
    </estudios>
</persona>

<!-- Equivalente en JSON -->
{
    "persona":{
       "nombre":"juan",
       "edad":22,
       "estudios":["primario","secundario"]
    }
}

-------------------------------------

<!-- Escribiendo en el DOM los datos de un JSON -->
<!DOCTYPE html>
<html>
<body>
<h3>JSON Object Creation in JavaScript</h3>
<p id="caja"></p>
<script type="text/javascript">
  var json = '{ "nombre":"Pedro Camejo", "pais":"Venezuela", "telefono":"12345678" }';
  var obj = JSON.parse(json);
  document.getElementById("caja").innerHTML =
  obj.nombre + "<br>" +
  obj.pais + "<br>" +
  obj.telefono;
</script>
</body>
</html>

-------------------------------------

<!-- Contar el número de caractéres escritos en un area de texto -->
<!DOCTYPE html>
<html>
<head>
  <title>ssss</title>
</head>
<body>
  <form action="#" method="post">  
    <b>Texto:</b>
    <textarea cols="40" rows="5" name="texto" onKeyDown="cuenta()" onKeyUp="cuenta()"></textarea>
    <p />
    <b>Caracteres:</b>
    <input type="text" name="caracteres" size="4">
  </form>
</body>
<script>
  function cuenta(){
    document.forms[0].caracteres.value=document.forms[0].texto.value.length
  }
</script>
</html>

-------------------------------------

<!-- Limitar el número de caractéres escritos en un area de texto -->
<html>
<head>
  <title>Ssssssss</title>
<script>
  contenido_textarea = ""
  num_caracteres_permitidos = 10
  function valida_longitud() {
    num_caracteres = document.forms[0].texto.value.length    
    if (num_caracteres <= num_caracteres_permitidos) {
      contenido_textarea = document.forms[0].texto.value  
    }
    else {
      document.forms[0].texto.value = contenido_textarea
    }    
    if (num_caracteres >= num_caracteres_permitidos) {
      document.forms[0].caracteres.style.color="#ff0000";
    }
    else {
      document.forms[0].caracteres.style.color="#000000";
    }    
    cuenta()
  }
  function cuenta(){
    document.forms[0].caracteres.value=document.forms[0].texto.value.length
  }
</script>
</head>
<body>
<form action="#" method="post">
<b>Texto:</b>
<textarea cols="40" rows="5" name="texto" onKeyDown="valida_longitud()" onKeyUp="valida_longitud()"></textarea>
<br />
<b>Caracteres:</b>
<input type="text" name="caracteres" size="4">
</form>
</body>
</html>

-------------------------------------

Contador de visitas, cuenta las veces que se accede al doc a través del
navegador LocalStorage: Guarda información que permanecerá almacenada por tiempo
indefinido; sin importar que el navegador se cierre.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contador de Visitas</title>
</head>
<body>
<div id="VisitCount"></div>
<script>
    x=function(id){
        return document.getElementById(id);
    }
    if(localStorage){
        if(localStorage['visitas']==undefined){
            localStorage['visitas']=0;
        }
        var n=parseInt(localStorage['visitas']);localStorage['visitas']=1+n;
        var num=localStorage['visitas'];
        var mensaje="Hasta ahora has visitado mi pagina " + num + " Veces !";
        x('VisitCount').innerHTML=mensaje;
    }
</script>
</body>
</html>

-------------------------------------

<!-- Probando con LocalStorage, guardando valores en variables -->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contador de Visitas</title>
</head>
<style type="text/css">
    #session {
        color: green;
    }
</style>
<body>
<div id="session"></div>
<script>
    x=function(id){
        return document.getElementById(id);
    }
    if(localStorage){
        if(localStorage['nombre']=="") {
            var nombre=prompt("Nombre de Usuario:");
            localStorage['nombre']=nombre;
            var mensaje="Bienvenido " + nombre;
            x('session').innerHTML=mensaje;
        } else {
            localStorage['nombre']=nombre;
            var mensaje="Bienvenido " + nombre;
            x('session').innerHTML=mensaje;
        }
    }
</script>
</body>
</html>

-------------------------------------

<!-- Agregar elementos de un formulario html dinámicamente con javascript -->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>clone demo</title>
  <!--script src="jquery-1.9.1.js" type="text/javascript"></script-->
  <script type="text/javascript">
  var contador = 1;
  var limite = 3;
  var cont_name = 1;
  function addInput(divName){
    if (contador == limite){
      alert("Exedíste el límite de adición (" + contador + ") campos");
    }
    else {
      var newdiv = document.createElement('div');
      newdiv.innerHTML = "Nombre: "/* + (contador + 1) */+ "<input type='text' name='nombre"+cont_name+"'>";
      document.getElementById(divName).appendChild(newdiv);
      contador++;
      cont_name++;
    }
  }
  </script>
  <style type="text/css">
  div {
    border: ridge 1px red;
  }
  form {
    border: ridge 1px green;
  }
  </style>
</head>
<body>
<form method="get">
  <div id="campo_dinamico">
    Nombre: <input type="text" name="nombre">
  </div>
  <br />
  <input type="button" value="Agregar campo" onClick="addInput('campo_dinamico');">
  <input type="submit" value="Enviar">
</form>
</body>
</html>

-------------------------------------

<!-- The split() method is used to split a string into an array of substrings, and returns the new array.
Tip: If an empty string ("") is used as the separator, the string is split between each character. -->
<!DOCTYPE html>
<html>
<body>
<p>Cadena = "How are you doing today?</p>
<p>Click the button to display the array values after the split.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
    var str = "How are you doing today?";
    var res = str.split(" ");
    document.getElementById("demo").innerHTML = res;
}
</script>
</body>
</html>

-------------------------------------

<!-- The split() method other example -->
<!DOCTYPE html>
<html>
<body>
Cadena = How are you doing today?
<p id="demo"></p>
<script>
window.onload = function() {
  var str = "How are you doing today?";
  var res = str.split("");
  document.getElementById("demo").innerHTML = res;
}
</script>
</body>
</html>

-------------------------------------

<!-- The split() method Utilizar una letra como separador -->
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display the array values after the split.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
    var str = "How are you doing today?";
    var res = str.split("o");
    document.getElementById("demo").innerHTML = res;
}
</script>
</body>
</html>


-------------------------------------

<!-- The split() method Utilizar un parametro para el limite -->
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display the array values after the split.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
    var str = "How are you doing today?";
    var res = str.split(" ", 2);
    document.getElementById("demo").innerHTML = res;
}
</script>
</body>
</html>


-------------------------------------

<!-- Contador, usando una variable e incrementandola con cada acción -->
<!DOCTYPE html>
<html>
    <head>
      <script type="text/javascript">
        contador = 1;
        function Contador() {
          alert("Alerta!" + contador);
          contador++;
        }
      </script>
    </head>
<body>
  <form>
      <input type="button" value="Hacer click" onclick="Contador()"/>
  </form>
</body>
</html>

-------------------------------------

<!-- onscroll Event, entra en una funcion al scrollear -->
<!DOCTYPE html>
<html>
<head>
<style>
div {
    border: 1px solid black;
    width: 200px;
    height: 200px;
    overflow: scroll;
}
</style>
</head>
<body>
<p>Try the scrollbar in div.</p>
<div onscroll="myFunction()">
    In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
    <br />
    In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
</div>
<script type="text/javascript">
    function myFunction() {
        alert("Scrolled");
    }
</script>
</body>
</html>

==================
Funciones anónimas
==================

Uno de los paradigmas usados en la programación es el Orientado Objetos, en el
cual se intenta imaginar nuestro programa como un conjunto de objetos (en el
sentido estricto de la palabra) que interactúan entre sí para dar como resultado
la ejecución deseada. Personalmente me resulta muy claro imaginar una Pelota
para entender correctamente este paradigma: una Pelota tiene un tamaño, peso y
color (serán variables denominadas atributos) y es capaz de botar y rodar
(funciones denominadas métodos).

Como véis es un paradigma de lo más sencillo aunque al final resulta ser
increíblemente potente por su capacidad de modularización, es decir, la
posibilidad de diseñar objetos independientes y que una vez formados podamos
olvidarnos de su comportamiento interno.

Dicho esto quisiera centrarme en un aspecto concreto que presenta JavaScript en
lo referente a los objetos y más concretamente a las funciones (huelga decir que
en este lenguaje usar el paradigma orientado a objetos es lo más común). Y es
que en JavaScript se dice que todo son objetos de una forma bastante literal,
tanto que hasta las propias funciones son consideradas objetos que se pueden
almacenar en variables. Este aspecto parecerá simple pero no es algo que se de
en todos los lenguajes de programación; por ejemplo en C++:

class Pelota {
  int size;
};

Pelota crearPelota () {
  return Pelota();
}

La creación de un objeto y de una función tienen declaraciones distintas y se
usan (refiriéndome al paso como parámetros) de forma distinta. Sin embargo en
JavaScript...

var p1 = {},
    p2 = function () {};

... Objetos y funciones son creados de forma similar y pueden usarse de la misma
forma. No es de extrañar que el resultado de esto es que una función pueda tener
atributos y métodos como si de un objeto se tratase. Como resultado hemos
obtenido una variable p2  que puede usarse con toda normalidad, solo que además
es capaz de ejecutarse usando el operador ()  con o sin parámetros.

Una vez asimilado este concepto podemos aproximar un nuevo dato: las funciones
anónimas. En la mayoría los tipos básicos (números y cadenas de caracteres
principalmente) pueden integrarse en la lógica del código sin necesidad de ser
almacenados en variables. Es decir, para sumar 2 y 3 podemos escribir el código
2 + 3  sin necesidad de guardar estos datos en variables. Pues bien, como las
funciones son variables, podemos crear una donde deseemos usarla sin necesidad
de darle un nombre. Esto es lo que se conoce como funciones anónimas.

function () {
  console.log('Esta función no tiene un nombre')
}

Aunque en ese ejemplo el código escrito no tiene mucho sentido ya que no podemos
llamar a una función sin nombre, se puede añadir un par de caracteres mas para
que resulte efectivo:

(function () {
  console.log('Esta función no tiene nombre y\
    se ejecutara inmediatamente');
}());

Con estas lineas hemos hecho tres cosas:

Agrupar el código escrito entre paréntesis para que no haya errores sintácticos
con el resto del código.

Crear una función anónima (sin nombre) con un código a ejecutar.

Colocar ()  inmediatamente después de esta función para decir a JavaScript
“¡oye! Ejecuta este código que estoy poniendo aquí como si se tratara de una
función”.

Con esta forma de crear funciones anónimas no es de extrañar que además se
puedan mandar parámetros a la función sin ningún problema:

(function (uno, dos, tres) {
  console.log(uno);
  console.log(dos);
  console.log(tres);
}(1, 2, 3));

Y finalmente surge una pregunta: ¿de qué sirve crear una función anónima? Es
cierto que parece una de esas feas costumbres que no hacen mas que ofuscar el
código y hacerlo mas difícil de leer, pero al menos puedo mencionar dos casos en
los que crear una función anónima resulta de lo mas practico y mantiene el
código limpio:

Queremos pasar como parámetro una función muy sencilla y definirla a parte seria
cuanto menos innecesario. Esto puede darse por ejemplo cuando pasamos una
función de comparación a una de ordenación o cuando usamos librerías como
jQuery (muchos de sus métodos aceptan paso de funciones).

Intentamos evitar a toda costa el uso de variables globales. Aunque este caso
puede evitarse organizando el código de muchas formas, englobar el “main” de
nuestro programa en una función anónima nos evita dejar esas tres o cuatro
variables que necesitamos para que todo empiece a andar flotando en la memoria
encapsulándolas dentro de la función.

-------------------------------------

El método trim() elimina los espacios en blanco al principio y al final de una
cadena.

<!DOCTYPE html>
<html>
<body>
<p>Click the button to alert the string with removed whitespace.</p>
<button onclick="myFunction()">Try it</button>
<script type="text/javascript">
function myFunction() {
    var str = "       Hello World!       ";
    alert(str.trim());
}
</script>
</body>
</html>

-------------------------------------

Base64 es un término genérico para una serie de esquemas de codificación
similares que codifican datos binarios tratándolos numéricamente y
traduciéndolos en una representación de base 64.

El término Base64 se origina a partir de una codificación de transferencia de
contenido MIME específica.

Los esquemas de codificación Base64 se usan comúnmente cuando existe la
necesidad de codificar datos binarios que necesitan ser almacenados y
transferidos a través de medios diseñados para tratar con datos textuales.

Esto es para asegurar que los datos permanezcan intactos sin modificaciones
durante el transporte. Base64 se utiliza comúnmente en una serie de
aplicaciones, incluyendo correo electrónico a través de MIME, y el
almacenamiento de datos complejos en XML.

La función .atob() descodifica una cadena de datos que ha sido codificada
utilizando la codificación en base-64. Puedes utilizar el método btoa() para
codificar y transmitir datos que, de otro modo podrían generar problemas de
comunicación. Luego de ser transmitidos se puede usar el método atob() para
decodificar los datos de nuevo.

<!-- The btoa() method encodes a string in base-64 -->
<!DOCTYPE html>
<html>
<body>
<p>Click the button to encode a string in base-64.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
  var str = "Hello World!";
  var enc = window.btoa(str);
  var res = "Encoded String: " + enc;
  document.getElementById("demo").innerHTML = "The original string: " + str + "<br>" + res;
}
</script>
</body>
</html>

-------------------------------------

<html>
  <head>
    <title>XXX</title>
    <meta charset="UTF-8">
  </head>
<body>
<script type="text/javascript">
  var texto = "Hola mundo"
  alert("El texto original es: "+texto);
  // Codificar cadena
  var encoded_texto = btoa(texto);
  alert("El texto codificado es: "+encoded_texto);
  // Decodificar cadena
  var decoded_texto = atob(encoded_texto);
  alert("El texto decodificado es: "+decoded_texto);
</script>
</body>
</html>

-------------------------------------

Pedir al usuario que introduzca el texto a codificar en Base64, y luego
mostrarlo decodificado.

La función btoa() sirve para codificar datos en base-64.

La función .atob() descodifica una cadena de datos que ha sido codificada en
base-64.
-->
<html>
    <head>
        <title>XXX</title>
        <meta charset="UTF-8">
    </head>
<body>
<script type="text/javascript">
    texto=prompt("Por favor escriba el texto a codificar:");
    // Codificar cadena
    var encoded_texto = btoa(texto);
    alert("El texto codificado es: "+encoded_texto);
    // Decodificar cadena
    var decoded_texto = atob(encoded_texto); 
    alert("El texto decodificado es: "+decoded_texto);
</script>
</body>
</html>

-------------------------------------

<!-- Convertir una imagen en base64 usando un input file para subir la imagen -->
<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
  <title>File to base64 conversion</title>
</head>
<body>
<input type="file">
<div id="base64" class="hidden"></div>
<script>
 (function(d){
  'use strict';
  var base = d.querySelector('#base64')
  var inp = document.querySelector('input[type=file]');
  inp.addEventListener('change',
  function() {
    var file = inp.files[0];
    var reader  = new FileReader();
    reader.addEventListener('load',
    function () {
      base.appendChild( d.createTextNode(reader.result));
      base.classList.remove('hidden');
    }, false);
    if (file) {
      reader.readAsDataURL(file);
    }
  }, false);
 }
(document));
</script>
</body>
</html>

-------------------------------------

<!-- Script para informar de la seguridad de una clave, con Javascript -->
<html>
  <head>
    <title>XXX</title>
    <meta charset="UTF-8">
  </head>
  <script type="text/javascript">
  var numeros="0123456789";
  var letras="abcdefghyjklmnñopqrstuvwxyz";
  var letras_mayusculas="ABCDEFGHYJKLMNÑOPQRSTUVWXYZ";

  function tiene_numeros(texto){
     for(i=0; i<texto.length; i++){
        if (numeros.indexOf(texto.charAt(i),0)!=-1){
           return 1;
        }
     }
     return 0;
  }

  function tiene_letras(texto){
     texto = texto.toLowerCase();
     for(i=0; i<texto.length; i++){
        if (letras.indexOf(texto.charAt(i),0)!=-1){
           return 1;
        }
     }
     return 0;
  }

  function tiene_minusculas(texto){
     for(i=0; i<texto.length; i++){
        if (letras.indexOf(texto.charAt(i),0)!=-1){
           return 1;
        }
     }
     return 0;
  }

  function tiene_mayusculas(texto){
     for(i=0; i<texto.length; i++){
        if (letras_mayusculas.indexOf(texto.charAt(i),0)!=-1){
           return 1;
        }
     }
     return 0;
  }

  function seguridad_clave(clave){
    var seguridad = 0;
    if (clave.length!=0){
      if (tiene_numeros(clave) && tiene_letras(clave)){
        seguridad += 30;
      }
      if (tiene_minusculas(clave) && tiene_mayusculas(clave)){
        seguridad += 30;
      }
      if (clave.length >= 4 && clave.length <= 5){
        seguridad += 10;
      }else{
        if (clave.length >= 6 && clave.length <= 8){
          seguridad += 30;
        }else{
          if (clave.length > 8){
            seguridad += 40;
          }
        }
      }
    }
    return seguridad
  }

  function muestra_seguridad_clave(clave,formulario){
    seguridad=seguridad_clave(clave);
    formulario.seguridad.value=seguridad + "%";
  }
  </script>
<body>
  <form>
    Clave: <input type="password" size=15 name="clave" onkeyup="muestra_seguridad_clave(this.value, this.form)"> <i>seguridad:</i> <input name="seguridad" type="text" style="border: 0px; background-color:ffffff; text-decoration:italic;" onfocus="blur()">
  </form>
</body>
</html>

-------------------------------------

<!-- Contador de caractéres escritos en un textarea -->
<html>
  <head>
    <title>XXX</title>
    <meta charset="UTF-8">
  </head>
<body>
<form action="#" method="post">
  <label>¿Como está el clima?</label>
  <br />
  <textarea cols="40" rows="5" name="texto" onKeyDown="cuenta()" onKeyUp="cuenta()"></textarea>
  <br />
  Caractéres:</td>
  <span name=caracteres></span>
  <input type="text" name=caracteres size=4>
</form>
<script type="text/javascript">
  function cuenta(){
    document.forms[0].caracteres.value=document.forms[0].texto.value.length
  }
</script>
</body>
</html>

-------------------------------------

<!-- Forzar a la página actual a ir por https -->
<html>
  <head>
    <title>XXX</title>
    <meta charset="UTF-8">
  </head>
<body>
<script type="text/javascript">
// Forzar a la página actual a ir por https
if (window.location.protocol !== 'https:') {
    window.location = 'https://' + window.location.hostname + window.location.pathname + window.location.hash;
}
</script>
</body>
</html>

-------------------------------------

<script type='text/javascript'>
  /**
   * Función para randomizar el carousel genérico de bootstrap
  **/
  var currentSlide;
  var rand;
  $(document).ready(function() {
    currentSlide = Math.floor((Math.random() * $('.item').length));
    rand = currentSlide;
    $('#carousel-example-generic').carousel(currentSlide);
    $('#carousel-example-generic').fadeIn(1000);
    setInterval(function(){
      while(rand == currentSlide){
        rand = Math.floor((Math.random() * $('.item').length));
      }
      currentSlide = rand;
      $('#carousel-example-generic').carousel(rand);
    },5000);
  });
</script>

-------------------------------------

<!-- Funcion para crear identidades a partir de datos aleatorios -->
<!-- NOTA: Falta pulir -->
<html>
  <head>
    <title></title>
    <meta charset="UTF-8" />
  </head>
  <script type="text/javascript">
    var indice = 0;
    nombre = ['Mario','Pedro','Juan'];
    apellido = ['Castaneda','Picapiedra','Salvador Gaviota'];
    edad = [43,31,24];
    indice = Math.random()*(nombre.length);
    indice = Math.floor(indice);
    console.log(indice);
    function rotar() {
      if (indice == nombre.length) {indice = 0;}
        document.getElementById("nombre").innerHTML = nombre[indice];
        document.getElementById("edad").innerHTML = edad[indice];
        document.getElementById("apellido").innerHTML = apellido[indice];
        indice++;
    }
  </script>
<body>
  <div id="nombre"></div>
  <div id="apellido"></div>
  <div id="edad"></div>
  <input type="button" onclick="rotar()" value="Generar identidad">
</body>
</html>


-------------------------------------

<!-- Generador de contraseñas, pide la cantidad de caractéres al usuario mediante un alert -->
<!DOCTYPE html>
<html lang="es">
  <head>
    <title>XXX</title>
    <meta charset="UTF-8">
  </head>
<body>
<script type="text/javascript">
function generar(longitud) {
  var longitud = prompt("Escriba la cantidad de caracteres que va a tener la contraseña");
  while (parseInt(longitud) != longitud) longitud = prompt("Sólo números enteros");
  var caracteres = ["abcdefghijkmnpqrtuvwxyzABCDEFGHIJKLMNPQRTUVWXYZ2346789-", ""];
  for (i=0; i<longitud; i++) caracteres[1] += caracteres[0].charAt(Math.floor(Math.random()*caracteres[0].length));
  document.getElementById("pass").innerHTML=caracteres[1];
}
</script>
<p id="pass"></p>
<form>
  <input type="button" onclick="generar()" value="Generar contraseña">
</form>
</body>
</html>

-------------------------------------

<!-- Generador de contraseñas, pide la cantidad de caractéres al usuario mediante un input -->
<!DOCTYPE html>
<html lang="es">
  <head>
    <title>XXX</title>
    <meta charset="UTF-8">
  </head>
<body>
<script type="text/javascript">
function generar(longitud) {
  var longitud = document.getElementById("cantidad").value;
  if (longitud == '') {
    alert ('El campo Cantidad de caractéres no puede estar vacío');
  }
  else {
    if (Number.isInteger(parseInt(longitud)) == true) {
      var caracteres = ["abcdefghijkmnpqrtuvwxyzABCDEFGHIJKLMNPQRTUVWXYZ2346789-", ""];
      for (i=0; i<longitud; i++) caracteres[1] += caracteres[0].charAt(Math.floor(Math.random()*caracteres[0].length));
      document.getElementById("pass").innerHTML=caracteres[1];
    }
    else {
      alert ('El campo Cantidad de contener caractéres enteros');
    }
  }
}
</script>
Cantidad de caractéres: <input type="text" name="cantidad" id="cantidad">
<br />
<p id="pass"></p>
<form>
  <input type="button" onclick="generar()" value="Generar contraseña">
</form>
</body>
</html>

-------------------------------------

<!-- Generador de contraseñas, pide la cantidad de caractéres al usuario mediante un input, mejorado del anterior -->
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <title>Generador de contraseñas</title>
  </head>
  <style>
    .alert{color:#F44336;}
    .success{color:#4CAF50;}
  </style>
<body>
  <main>
    <script>
    function generar(longitud) {
      if (longitud == "") {
        document.getElementById("alerta").innerHTML = "<span class='alert'>El campo no puede estar vacío</span>";
      } else if (parseInt(longitud) != longitud) {
        document.getElementById("alerta").innerHTML = "<span class='alert'>Este campo solo acepta números enteros</span>";
      } else {
        var caracteres = ["abcdefghijkmnpqrtuvwxyzABCDEFGHIJKLMNPQRTUVWXYZ2346789-", ""];
        for (i=0; i<longitud; i++) caracteres[1] += caracteres[0].charAt(Math.floor(Math.random()*caracteres[0].length));
        document.getElementById("alerta").innerHTML = "<span class='success'>Clave generada: </span>"+caracteres[1];
      }
    }
    </script>
    <label for="cantidad"> Cantidad de caractéres:</label><br>
    <input type="number" name="cantidad" id="cantidad"><br>
    <input type="button" value="Generar contraseña" onclick="generar(cantidad.value);"><br>
    <p id="alerta"></p>
    <p id="pass"></p>  
  </main>
</body>
</html>

-------------------------------------

<!-- Pedir código de seguridad para enviar el formulario, como si fuera un
captcha -->
<!DOCTYPE html>
<html>
  <head>
    <title>JS Captcha by Ian L. of Jafty.com</title>
  </head>
<style type="text/css">
#txtCaptchaDiv {
  background-color:#eb8516;
  color:#FFF;
  padding:8px;
  border-radius: 5px;
}
</style>
<body>
  <div align="center">
    <br />
    <form name="review" action="newpg.html" method="POST" onsubmit="return checkform(this);">
      <b>Please enter Code:</b> <span id="txtCaptchaDiv"></span>
      <input type="hidden" id="txtCaptcha" />
      <br />
      <br />
      <input type="text" name="txtInput" id="txtInput" size="15" />
      <input type="submit" value="Submit"/>
    </form>
  </div>
  <script type="text/javascript">
    /*
    |-----------------------------------------------------------
    | Functions that validate the captcha in the template.
    |-----------------------------------------------------------
    */
    function checkform(theform){
      var why = "";

      if(theform.txtInput.value == ""){
        why += " Security code should not be empty.\n";
      }
      if(theform.txtInput.value != ""){
        if(ValidCaptcha(theform.txtInput.value) == false){
          why += "Security code did not match.\n";
        }
      }
      if(why != ""){
        alert(why);
        return false;
      }
    }

    //Generates the captcha function
    var a = Math.ceil(Math.random() * 9)+ '';
    var b = Math.ceil(Math.random() * 9)+ '';
    var c = Math.ceil(Math.random() * 9)+ '';
    var d = Math.ceil(Math.random() * 9)+ '';
    var e = Math.ceil(Math.random() * 9)+ '';

    var code = a + b + c + d + e;
    document.getElementById("txtCaptcha").value = code;
    document.getElementById("txtCaptchaDiv").innerHTML = code;

    // Validate the Entered input aganist the generated security code function
    function ValidCaptcha(){
        var str1 = removeSpaces(document.getElementById('txtCaptcha').value);
        var str2 = removeSpaces(document.getElementById('txtInput').value);
        if (str1 == str2){
        return true;
      } else {
        return false;
      }
    }

    // Remove the spaces from the entered and generated code
    function removeSpaces(string){
      return string.split(' ').join('');
    }
  </script>

</body>
</html>

-------------------------------------

<!-- Auto capitalización de un campo de texto y un area de texto con js -->
<html>
  <head>
  <title>XXX</title>
  <script src="jquery-1.12.4.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="styles.css" type="text/css"/>
  <meta charset="UTF-8">
  </head>
<body>
<script type="text/javascript">
$(document).ready(function() {
  $("input, textarea").keyup(function() {
    var val = $(this).val()
    $(this).val(val.toUpperCase());
  });
  $('input[type="text"]').on('keypress', function() { 
    var $this = $(this), value = $this.val(); 
    if (value.length === 1) { 
      $this.val( value.charAt(0).toUpperCase() );
    }  
  });
});
</script>
<form action="#" method="get">
  Título: <input type="text" name="title">
  <br />
  Descripción:
  <textarea name="area_texto" rows="10" cols="50">
  </textarea>
</form>
</body>
</html>

-------------------------------------

<!-- Auto texto en minúsculas en un campo de texto y un area de texto con js -->
<html>
  <head>
  <title>XXX</title>
  <script src="jquery-1.12.4.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="styles.css" type="text/css"/>
  <meta charset="UTF-8">
  </head>
<body>
<script type="text/javascript">
$(document).ready(function() {
  $("input, textarea").keyup(function() {
    var val = $(this).val()
    $(this).val(val.toLowerCase());
  });
  $('input[type="text"]').on('keypress', function() { 
    var $this = $(this), value = $this.val(); 
    if (value.length === 1) { 
      $this.val( value.charAt(0).toLowerCase() );
    }  
  });
});
</script>
<form action="#" method="get">
  Título: <input type="text" name="user" placeholder="Tu Usuario">
  <br />
  Descripción:
  <textarea name="texto" rows="10" cols="50">
  </textarea>
</form>
</body>
</html>

-------------------------------------

<!-- Convertir un texto del dom en enlace(link) si es que este lo es -->
<html>
<head>
<script type="text/javascript">
window.onload = function() {
  var text=document.getElementById("url").value;
  var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
  var text1=text.replace(exp, "<a href='$1'>$1</a>");
  var exp2 =/(^|[^\/])(www\.[\S]+(\b|$))/gim;
  document.getElementById("converted_url").innerHTML=text1.replace(exp2, '$1<a target="_blank"href="http://$2">$2</a>');
}
</script>
</head>
<body>
  <textarea id="url">
    https://as.com/tikitakas/2018/06/18/portada/1529301727_153343.html dasdasdsa https://as.com/tikitakas/2018/06/18/portada/1529301727_153343.html
  </textarea>
  <p id="converted_url"></p>
</body>
</html>

-------------------------------------

<!-- Texto de multiples líneas en una cadena de javascript -->
<script type="text/javascript">
var text = "\
my text1\
my text2\
my text3\
";

/* Agregando etiquetas de html */
markup = `
 <div class="person">
    <h2>
        ${person.name}
    </h2>
    <p class="location">${person.location}</p>
    <p class="bio">${person.bio}</p>
 </div>
`;
</script>

-------------------------------------

<!-- Codificar en base64 una imagen de internet -->
<html>
  <head>
    <title>XXX</title>
    <meta charset="UTF-8">
  </head>
<body>
<script type="text/javascript">
function toDataURL(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    var reader = new FileReader();
    reader.onloadend = function() {
      callback(reader.result);
    }
    reader.readAsDataURL(xhr.response);
  };
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.send();
}
toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0', function(dataUrl) {
  console.log('RESULT:', dataUrl)
})
</script>
</body>
</html>

-------------------------------------

<!-- Codificar en base64 una imagen local pero usando un input file para obtener la imagen -->
<html>
  <head>
    <title>XXX</title>
    <meta charset="UTF-8">
  </head>
<script type="text/javascript">
function encodeImageFileAsURL(element) {
  var file = element.files[0];
  var reader = new FileReader();
  reader.onloadend = function() {
    console.log('RESULT', reader.result)
  }
  reader.readAsDataURL(file);
}
</script>
<body>
<input type="file" onchange="encodeImageFileAsURL(this)" />
</body>
</html>

-------------------------------------

<!-- Codificar en base64 una imagen local pero usando un input file, luego decodificar
la cadena, construir e imprimir en el dom la imagen decodificada -->
<html>
  <head>
    <title>XXX</title>
    <meta charset="UTF-8">
  </head>
<body>
<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" />
<div id="imgTest"></div>
<script type='text/javascript'>
  function encodeImageFileAsURL() {
    var filesSelected = document.getElementById("inputFileToLoad").files;
    if (filesSelected.length > 0) {
      var fileToLoad = filesSelected[0];
      var fileReader = new FileReader();
      fileReader.onload = function(fileLoadedEvent) {
        var srcData = fileLoadedEvent.target.result; // <--- data: base64
        var newImage = document.createElement('img');
        newImage.src = srcData;
        document.getElementById("imgTest").innerHTML = newImage.outerHTML;
        alert("Converted Base64 version is " + document.getElementById("imgTest").innerHTML);
        console.log("Converted Base64 version is " + document.getElementById("imgTest").innerHTML);
      }
      fileReader.readAsDataURL(fileToLoad);
    }
  }
</script>
</body>
</html>

-------------------------------------

<!-- Codificar en base64 una imagen local pero usando un input file, luego imprimir la cadena en el dom -->
<html>
  <head>
    <title>XXX</title>
    <meta charset="UTF-8">
  </head>
<body>
<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" />
<div id="imgTest"></div>
<script type='text/javascript'>
  function encodeImageFileAsURL() {
    var filesSelected = document.getElementById("inputFileToLoad").files;
    if (filesSelected.length > 0) {
      var fileToLoad = filesSelected[0];
      var fileReader = new FileReader();
      fileReader.onload = function(fileLoadedEvent) {
        var srcData = fileLoadedEvent.target.result; // <--- data: base64
        document.write(srcData)
      }
      fileReader.readAsDataURL(fileToLoad);
    }
  }
</script>
</body>
</html>

-------------------------------------

<!-- Listando elementos subidos desde un input file -->
<html>
  <head>
    <title>XXX</title>
    <meta charset="UTF-8">
  </head>
<body>
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                  '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }
  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
</body>
</html>

-------------------------------------

<!-- Ejecute un JavaScript cuando un usuario cambie la opción seleccionada de un elemento <select>: -->
<!DOCTYPE html>
<html>
<body>
<p>Select a new car from the list.</p>
<select id="mySelect" onchange="myFunction()">
  <option value="Audi">Audi
  <option value="BMW">BMW
  <option value="Mercedes">Mercedes
  <option value="Volvo">Volvo
</select>
<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>
<p id="demo"></p>
<script>
function myFunction() {
  var x = document.getElementById("mySelect").value;
  document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>
</body>
</html>

-------------------------------------

<!-- Leer la ruta temporal de un fichero adjunto desde un input file antes -->
<!DOCTYPE html>
<html>
<body>
<input type="file" id="my_value" onchange="myFunction()">
<p id="demo"></p>
<script>
function myFunction() {
  var x = document.getElementById("my_value").value;
  document.getElementById("demo").innerHTML = "You file is: " + x;
}
</script>
</body>
</html>

-------------------------------------

<!-- Codificar en base64 una imagen local pero usando un input file, imprimir la cadena en el dom -->
<!DOCTYPE html>
<html>
<body>
<input id="my_input" type='file'>
<p id="base64_string"></p>
<script type="text/javascript">
function readFile() {
  if (this.files && this.files[0]) {
    var FR= new FileReader();
    FR.addEventListener("load", function(e) {
      document.getElementById("base64_string").innerHTML = e.target.result;
    });
    FR.readAsDataURL(this.files[0] );
  }
}
document.getElementById("my_input").addEventListener("change", readFile);
</script>s
</body>
</html>

-------------------------------------

<!-- Codificar en base64 una imagen local pero usando un input file, imprimir la cadena en el dom en 
un area de texto -->
<!DOCTYPE html>
<html>
<style type="text/css">
textarea {
  width: 100%;
  height: 1000px;
}
</style>
<body>
<input id="my_input" type='file'>
<textarea id="base64_string"></textarea> 
<script type="text/javascript">
function readFile() {
  if (this.files && this.files[0]) {
    var FR= new FileReader();
    FR.addEventListener("load", function(e) {
      document.getElementById("base64_string").innerHTML = e.target.result;
    });
    FR.readAsDataURL(this.files[0] );
  }
}
document.getElementById("my_input").addEventListener("change", readFile);
</script>
</body>
</html>

-------------------------------------

<!-- Codificar en base64 una imagen local pero usando un input file, imprimir la cadena en el dom
igualmente la imagen adjuntada -->
<!DOCTYPE html>
<html>
<body>
<input id="my_input" type='file'>
<p id="base64_string"></p>
<img id="my_img" width="300">
<script type="text/javascript">
function readFile() {
  if (this.files && this.files[0]) {
    var FR= new FileReader();
    FR.addEventListener("load", function(e) {
      document.getElementById("my_img").src       = e.target.result;
      document.getElementById("base64_string").innerHTML = e.target.result;
    });
    FR.readAsDataURL( this.files[0] );
  }
}
document.getElementById("my_input").addEventListener("change", readFile);
</script>
</body>
</html>

-------------------------------------

<!-- Leer una cadena de base64 construir la imagen e imprimirla en el dom -->
<!DOCTYPE html>
<html>
<body>
<p id="base64_string"></p>
<img id="my_img" width="300">
<script type="text/javascript">
window.onload = function() {
  my_base64_string =`
  data:image/png;base64,
  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
  `;
  document.getElementById("my_img").src = my_base64_string;
}
</script>
</body>
</html>

-----

<!-- combobox select depend javascript example -->
<html>
  <head>
    <title>XXX</title>
    <script src="jquery/jquery-1.12.4.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="styles.css" type="text/css"/>
    <meta charset="UTF-8">
  </head>
  <script type="text/javascript">
$("document").ready(function(){
  (function(){
    // Se busca el select que cambiará las opciones del select asociado
    var select_padre = document.getElementById("select_padre");
    // 2) Se definen las variables donde se guardarán las opciones que mostrará el select asociado
    // Nota 1: El prefijo opcional
    // Nota 2: Los nombres no deben llevar espacios 
    var opt_merida = new Array ("-","Libertador", "Jacínto Plaza", "Sucre");
    var opt_dis_capital = new Array ("-", "Caracas", "Baruta", "Libertador");
    var opt_falcon = new Array ("-", "Falcón", "Buchuaco", "Choroní");
    // 3) Crear una funcion que permita ejecutar el cambio dinámico
    select_padre.addEventListener('change',function(){
      var estado;
      //Se toma el vamor del "estado seleccionado"
      estado = document.formulario1.estado[document.formulario1.estado.selectedIndex].value;
      // Se chequea si el "estado" esta definido
      if(estado!=0){
        // Selecionamos los estados correctos
        mis_opts=eval("opt_" + estado);
        // Se calcula el número de estados
        num_opts=mis_opts.length;
        // Marco el número de opt en el select
        document.formulario1.opt.length = num_opts;
        // Para cada opt del array, la pongo en el select
        for(i=0; i<num_opts; i++) {
          document.formulario1.opt.options[i].value=mis_opts[i];
          document.formulario1.opt.options[i].text=mis_opts[i];
        }
      }
      else {
        // Si no habia ninguna opt seleccionada, elimino los estados del select
        document.formulario1.opt.length = 1;
        // Ponemos un guion en la única opt que he dejado
        document.formulario1.opt.options[0].value="-";
        document.formulario1.opt.options[0].text="-";
      }
      // Hacer un reset de las opts
      document.formulario1.opt.options[0].selected = true;
    });
  })();
});
</script>
<body>  
<form name="formulario1" action="#">
  <!-- Select 1 Padre -->
  <b>Estado</b>
  <select class="seleccion" name="estado" id="select_padre">
    <option value="0">-
    <option value="merida">Mérida
    <option value="dis_capital">Distrito Capital
    <option value="falcon">Falcón
  </select>
  <br />
  <br />
  <!-- Select 2 Hijo -->
  <b>Municipio</b>
  <select class="seleccion" name="opt">
    <option value="-">-
  </select>
</form>
</body>
</html>

------------------------------------------

<!-- Capturar y sumar los datos enviados por un formulario en JS -->
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
  </head>
  <script>
    function suma() {
      var campo1 = parseInt(document.form.campo1.value);
      var campo2 = parseInt(document.form.campo2.value);
      var campo3 = parseInt(document.form.campo3.value);
      var suma = campo1 + campo2 + campo3;
      alert(suma);
    }
    window.onload = function() {
      document.form.guardar.onclick = suma;
    }
  </script>
<body>
  <div align="center">
    <form name="form" action="#" method="get">
      Campo 1: <input name="campo1" type="text"/>
      <br />
      Campo 2: <input name="campo2" type="text"/>
      <br />
      Campo 3: <input name="campo3" type="text"/>
      <br />
      <br />
      <input name="guardar" type="button" value="Enviar" />
    </form>
  </div>
</body>
</html>

------------------------------------------

<!-- Autocheckear los checkboxes anteriores a un checkbox marcado -->
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Auto Check the checkboxes</title>
</head>
<body>
  <main>
    <form>
      <legend>
        Checkboxes
        <input type="checkbox" name="checkbox" id="checkbox1" class="checkbox">
        <input type="checkbox" name="checkbox" id="checkbox2" class="checkbox">
        <input type="checkbox" name="checkbox" id="checkbox3" class="checkbox">
        <input type="checkbox" name="checkbox" id="checkbox4" class="checkbox">
        <input type="checkbox" name="checkbox" id="checkbox5" class="checkbox">
        <input type="checkbox" name="checkbox" id="checkbox6" class="checkbox">
        <input type="checkbox" name="checkbox" id="checkbox7" class="checkbox">
        <input type="checkbox" name="checkbox" id="checkbox8" class="checkbox">
      </legend>
    </form>
  </main>
  <script>
    (function(){
      var checkbox = document.querySelectorAll('.checkbox');
      for (var i = checkbox.length - 1; i >= 0; i--) {
        checkbox[i].addEventListener('change', function(){
          if (this.checked) {
            for (var j = 0; j <= checkbox.length - 1; j++) {
              if (checkbox[j].id === this.id) {
                break;
              } else {
                checkbox[j].checked = true;
              }
            }
          } else {
            for (var j = 0; j <= checkbox.length - 1; j++) {
              if (checkbox[j].id === this.id) {
                break;
              } else {
                checkbox[j].checked = false;
              }
            }
          }
        }, true);
      }
    })();
  </script>
</body>
</html>

------------------------------------------

<!-- Autocheckear los checkboxes anteriores a un checkbox marcado e inhabilitando los marcados -->
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Auto Check the checkboxes</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
  <main>
    <form>
      <legend>
        Checkboxes
        <input type="checkbox" name="checkbox" id="checkbox1" class="checkbox">
        <input type="checkbox" name="checkbox" id="checkbox2" class="checkbox">
        <input type="checkbox" name="checkbox" id="checkbox3" class="checkbox">
        <input type="checkbox" name="checkbox" id="checkbox4" class="checkbox">
        <input type="checkbox" name="checkbox" id="checkbox5" class="checkbox">
        <input type="checkbox" name="checkbox" id="checkbox6" class="checkbox">
        <input type="checkbox" name="checkbox" id="checkbox7" class="checkbox">
        <input type="checkbox" name="checkbox" id="checkbox8" class="checkbox">
      </legend>
    </form>
  </main>
  <script>
    (function(){
      var checkbox = document.querySelectorAll('.checkbox');
      for (var i = checkbox.length - 1; i >= 0; i--) {
        checkbox[i].addEventListener('change', function(){
          if (this.checked) {
            for (var j = 0; j <= checkbox.length - 1; j++) {
              if (checkbox[j].id === this.id) {
                break;
              } else {
                checkbox[j].checked = true;
                checkbox[j].disabled = true;
              }
            }
          } else {
            for (var j = 0; j <= checkbox.length - 1; j++) {
              if (checkbox[j].id === this.id) {
                break;
              } else {
                checkbox[j].checked = false;
                checkbox[j].disabled = false;
              }
            }
          }
        }, true);
      }
    })();
  </script>
</body>
</html>

------------------------------------------

<!-- Exportar en csv una serie de datos ordenados en arreglos -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="jquery/jquery-1.12.4.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
// Example data given in question text
var data = [
  ['name1', 'city1', 'some other info'],
  ['name2', 'city2', 'more info']
];

// Building the CSV from the Data two-dimensional array
// Each column is separated by ";" and new line "\n" for next row
var csvContent = '';
data.forEach(function(infoArray, index) {
  dataString = infoArray.join(',');
  csvContent += index < data.length ? dataString + '\n' : dataString;
});

// The download function takes a CSV string, the filename and mimeType as parameters
// Scroll/look down at the bottom of this snippet to see how download is called
var download = function(content, fileName, mimeType) {
  var a = document.createElement('a');
  mimeType = mimeType || 'application/octet-stream';

  if (navigator.msSaveBlob) { // IE10
    navigator.msSaveBlob(new Blob([content], {
      type: mimeType
    }), fileName);
  } else if (URL && 'download' in a) { //html5 A[download]
    a.href = URL.createObjectURL(new Blob([content], {
      type: mimeType
    }));
    a.setAttribute('download', fileName);
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  } else {
    location.href = 'data:application/octet-stream,' + encodeURIComponent(content); // only this mime type is supported
  }
}
download(csvContent, 'dowload.csv', 'text/csv;encoding:utf-8');
</script>
</body>
</html>

------------------------------------------

<!-- Exportar tabla html a un csv -->
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function downloadCSV(csv, filename) {
  var csvFile;
  var downloadLink;

  // CSV file
  csvFile = new Blob([csv], {type: "text/csv"});

  // Download link
  downloadLink = document.createElement("a");

  // File name
  downloadLink.download = filename;

  // Create a link to the file
  downloadLink.href = window.URL.createObjectURL(csvFile);

  // Hide download link
  downloadLink.style.display = "none";

  // Add the link to DOM
  document.body.appendChild(downloadLink);

  // Click download link
  downloadLink.click();
}

function exportTableToCSV(filename) {
  var csv = [];
  var rows = document.querySelectorAll("table tr");  
  for (var i = 0; i < rows.length; i++) {
    var row = [], cols = rows[i].querySelectorAll("td, th");
    for (var j = 0; j < cols.length; j++) 
      row.push(cols[j].innerText);    
    csv.push(row.join(","));    
  }
  // Download CSV file
  downloadCSV(csv.join("\n"), filename);
}
</script>
</head>
<body>
<table border="1px" cellpadding="0px" cellspacing="0px">
  <thead>
    <th>Nombre</th>
    <th>Apellido</th>
    <th>Edad</th>
    <th>Correo</th>
    <th>Pais</th>
  </thead>
  <tbody>
    <tr>
      <td>Alejandro</td>
      <td>Ramirez</td>
      <td>25</td>
      <td>a@a.com</td>
      <td>Venezuela</td>
    </tr>
    <tr>
      <td>Jose</td>
      <td>Perez</td>
      <td>23</td>
      <td>b@b.com</td>
      <td>Venezuela</td>
    </tr>
    <tr>
      <td>Maria</td>
      <td>Mendez</td>
      <td>26</td>
      <td>c@c.com</td>
      <td>Venezuela</td>
    </tr>
    <tr>
      <td>Alexandra</td>
      <td>Herrera</td>
      <td>35</td>
      <td>d@<data></data>.com</td>
      <td>Venezuela</td>
    </tr>
  </tbody>
</table>
</body>
 <br>
 <a href="javascript:exportTableToCSV('file.csv')"><button type="button" class="btn btn-success">Exportar en CSV</button></a>
</html>

#######################
##### Excepciones #####
#######################

JavaScript dispone de un mecanismo de tratamiento de excepciones muy similar al de
otros lenguajes de programación como Java. Para ello, define las palabras reservadas
try, catch y finally.

La palabra reservada try se utiliza para encerrar el bloque de código JavaScript en el
que se van a controlar las excepciones. Normalmente, el bloque definido por try va seguido
de otro bloque de código definido por catch.

Cuando se produce una excepción en el bloque try, se ejecutan las instrucciones contenidas dentro
del bloque catch asociado. Después del bloque catch, es posible definir un bloque con la palabra
reservada finally. Todo el código contenido en el bloque finally se ejecuta independientemente
de la excepción ocurrida en el bloque try.

Un bloque try debe ir seguido obligatoriamente de un bloque catch o de un bloque finally. También es
posible que vaya seguido de los dos bloques.

A continuación se muestra un ejemplo de excepción y uso de los bloques try y catch:

<script type="text/javascript">
try {
  var resultado = 5/a;
} catch(excepcion) {
  alert(excepcion);
}
</script>

El bloque catch permite indicar el nombre del parámetro que se crea
automáticamente al producirse una excepción. Este identificador de la variable
sólo está definido dentro del bloque catch y se puede utilizar para obtener más
información sobre la excepción producida.

En este caso, al intentar dividir el número 5 por la variable a que no está
definida, se produce una excepción que muestra el mensaje "ReferenceError: a is
not defined" dentro del bloque catch:

El funcionamiento del bloque finally no es tan sencillo como el bloque catch. Si
se ejecuta cualquier parte del código que se encuentra dentro del bloque try,
siempre se ejecuta el bloque finally, independientemente del resultado de la
ejecución del bloque try.

Si dentro del bloque try se ejecuta una instrucción de tipo return, continue o
break, también se ejecuta el bloque finally antes de ejecutar cualquiera de esas
instrucciones. Si se produce una excepción en el bloque try y están definidos
los bloques catch y finally, en primer lugar se ejecuta el bloque catch y a
continuación el bloque finally.

JavaScript también permite lanzar excepciones manualmente mediante la palabra
reservada throw:

<script type="text/javascript">
try {
  if(typeof a == "undefined" || isNaN(a)) {
    throw new Error('La variable "a" no es un número');
  }
  var resultado = 5/a;
} catch(excepcion) {
  alert(excepcion);
} finally {
  alert("Se ejecuta");
}
</script>

=================
Promise o Promesa
=================

Las promesas son un concepto para resolver el problema de asincronía de una
forma mucho más elegante y práctica que, por ejemplo, utilizando funciones
callbacks directamente.

Como su propio nombre indica, una promesa es algo que, en principio pensamos que
se cumplirá, pero en el futuro pueden ocurrir varias cosas:

-La promesa se cumple (promesa resuelta)
-La promesa no se cumple (promesa se rechaza)
-La promesa se queda en un estado incierto indefinidamente (promesa pendiente)

Con estas sencillas bases, podemos entender el funcionamiento de una promesa en
Javascript. Antes de empezar, también debemos tener claro que existen dos partes
importantes de las promesas: como consumirlas (utilizar promesas) y como
crearlas (preparar una función para que use promesas y se puedan consumir).

Las promesas en Javascript se representan a través de un object, y cada promesa
estará en un estado concreto: pendiente, aceptada o rechazada. Además, cada
promesa tiene los siguientes métodos, que podremos utilizar para utilizarla:

.then(resolve) Ejecuta la función callback resolve cuando la promesa se cumple.

.catch(reject) Ejecuta la función callback reject cuando la promesa se rechaza.

.then(resolve,reject) Método equivalente a las dos anteriores en el mismo
.then().

.finally(end)

Consumir una promesa
====================

La forma general de consumir una promesa es utilizando el .then() con un sólo
parámetro, puesto que muchas veces lo único que nos interesa es realizar una
acción cuando la promesa se cumpla:

fetch("/robots.txt").then(function(response) {
  /* Código a realizar cuando se cumpla la promesa */
});

Lo que vemos en el ejemplo anterior es el uso de la función fetch(), la cuál
devuelve una promesa que se cumple cuando obtiene respuesta de la petición
realizada. De esta forma, estaríamos preparando (de una forma legible) la forma
de actuar de nuestro código a la respuesta de la petición realizada, todo ello
de forma asíncrona.

Recuerda que podemos hacer uso del método .catch() para actuar cuando se
rechaza una promesa:

fetch("/robots.txt")
  .then(function(response) {
    /* Código a realizar cuando se cumpla la promesa */
  })
  .catch(function(error) {
    /* Código a realizar cuando se rechaza la promesa */
  });

De hecho, usando arrow functions se puede mejorar aún más la legibilidad de este
código, recordando que cuando sólo tenemos una sentencia en el cuerpo de la
arrow function hay un return implícito:

fetch("/robots.txt")
  .then(response => response.text())
  .then(data => console.log(data))
  .finally(() => console.log("Terminado."))
  .catch(error => console.error(data));

Observese además que hemos añadido el método .finally() para añadir una función
callback que se ejecutará tanto si la promesa se cumple o se rechaza, lo que nos
ahorrará tener que repetir la función en el .then() como en el .catch().

Fuente
======

https://lenguajejs.com/javascript/asincronia/promesas/

==============
Objeto Promise
==============

El objeto Promise (Promesa) es usado para computaciones asíncronas. Una promesa
representa un valor que puede estar disponible ahora, en el futuro, o nunca.

Sintaxis
========

new Promise( /* ejecutor */ function(resolve, reject) { ... } );

Parámetros
==========

Una función con los argumentos resolve y reject. La función ejecutor es
ejecutada inmediatamente por la implementación de la Promesa, pasándole las
funciones resolve y reject (el ejecutor es llamado incluso antes de que el
constructor de la Promesa devuelva el objeto creado). Las funciones resolve y
reject, al ser llamadas, resuelven o rechazan la promesa, respectivamente.
Normalmente el ejecutor inicia un trabajo asíncrono, y luego, una vez que es
completado, llama a la función resolve para resolver la promesa o la rechaza si
ha ocurrido un error.

Si un error es lanzado en la función ejecutor, la promesa es rechazada y el
valor de retorno del ejecutor es rechazado.

Ejemplo:

let miPrimeraPromise = new Promise((resolve, reject) => {
  // Llamamos a resolve(...) cuando lo que estabamos haciendo finaliza con éxito, y reject(...) cuando falla.
  // En este ejemplo, usamos setTimeout(...) para simular código asíncrono.
  // En la vida real, probablemente uses algo como XHR o una API HTML5.
  setTimeout(function(){
    resolve("¡Éxito!"); // ¡Todo salió bien!
  }, 5000);
});

miPrimeraPromise.then((successMessage) => {
  // succesMessage es lo que sea que pasamos en la función resolve(...) de arriba.
  // No tiene por qué ser un string, pero si solo es un mensaje de éxito, probablemente lo sea.
  console.log("¡Sí! " + successMessage);
});

Otro ejemplo:

const datos = [
  {
    id: 1,
    title: 'Movie 1',
    year: '2017',
  },
  {
    id: 2,
    title: 'Movie 2',
    year: '2020',
  }
]
const getDatos = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(datos);
    }, 5000);
  });
}
// Llamamos a getDatos y cuando se resuelva, con then que es una función
// callback, recibirá como argumento lo que devuelva ese resolve de arriba, es
// decir datos.
getDatos().then((datos) => console.log(datos));

=============
Promise.all()
=============

El método Promise.all(iterable) devuelve una promesa que termina correctamente
cuando todas las promesas en el argumento iterable han sido concluídas con
éxito, o bien rechaza la petición con el motivo pasado por la primera promesa
que es rechazada.

Sintaxis
========

Promise.all(iterable);

Valor devuelto
==============

Una Promise que se cumplirá cuando todas las promesas del argumento iterable
hayan sido cumplidas, o bien se rechazará cuando alguna de ellas se rechace.

===========
Método then
===========

El método then() retorna una Promesa. Recibe dos argumentos: funciones callback
para los casos de éxito y fallo de Promise.

Ya que los métodos then y Promise.prototype.catch() devuelven promesas, pueden
ser encadenados — una operación llamada composición.

Ejemplos
========

Uso de Promise.all

Promise.all espera a que todo se cumpla (o bien al primer rechazo).

var p1 = Promise.resolve(3);
var p2 = 1337;
var p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, "foo");
});

Promise.all([p1, p2, p3]).then(values => {
  console.log(values); // [3, 1337, "foo"]
});

-----

<script>
var p1 = axios.get('https://randomuser.me/api/?results=3').then(
  response => {
    console.log(response.data.results)
  });
var p2 = axios.get('https://randomuser.me/api/?results=3').then(
  response => {
    console.log(response.data.results)
  });
var p3 = axios.get('https://randomuser.me/api/?results=3').then(
  response => {
    // Descomentando esta hacemos que falle.
    // reject("reject");
  });

Promise.all([p1, p2, p3])
  .then(response => {
    console.log('Cargó todo!')
  })
  .catch(e => {
    console.log('Falló!')
  });
</script>

Fuente
======

https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

Ejemplo completo
================

<!-- Método Promise.all, hace algo cuando todas las promesas hayan sido
cumplidas  -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Ajax</title>
  <script src="https://unpkg.com/vue@2"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
<div id="main"></div>
<script>
  var ajaxConVue = new Vue({
    el: '#main',
    data: {
    },
    created: function(){
      var p1 = axios.get('https://randomuser.me/api/?results=3')
        .then(
        response => {
          console.log(response.data.results)
        });
      var p2 = axios.get('https://randomuser.me/api/?results=3')
        .then(
        response => {
          console.log(response.data.results)
        });
      Promise.all([p1, p2])
      .then(response => {
        console.log('Cargó todo!')
      })
      .catch(e => {
        console.log('Falló!')
      });
    },
    methods: {
    }
  })
</script>
</body>
</html>

=============
Función Fetch
=============

Esta es una tecnología experimental.

La API Fetch proporciona una interfaz JavaScript para acceder y manipular partes
del canal HTTP, como peticiones y respuestas. También provee un método global
fetch() que proporciona una forma fácil y lógica de obtener recursos de forma
asíncrona por la red.

Permite traer los resultados de otros sitios webs.

==================
La expresión await
==================

La expresión await provoca que la ejecución de una función async sea pausada
hasta que una Promise sea terminada o rechazada, y regresa a la ejecución de la
función async después del término. Al regreso de la ejecución, el valor de la
expresión await es la regresada por una promesa terminada.

================
Función sincrona
================

Una función sincrona es una función que realiza una operación y devuelve un
resultado o lo que tenga que realizar al instante, sin llamadas externas ni
esperas ni nada.

=================
Función asíncrona
=================

Una función asíncrona es aquella que recibe información o datos desde otros
procesos o servicios, como un API por ejemplo, entonces, cualquier petición o
llamda que se haga a través de la red, tiene un tiempo de espera, un delay,
que tarda en ejecutarse, puede ser milisegundos o segundos y hasta más, entonces
eso produce la asincronía, que no es un proceso directo.

async function los objetos creados con el constructor AsyncFunction son
analizados gramaticalmente en el momento que la función es creada. Esto es menos
eficiente que declarar una función asincrona con un async function expression y
llamarla con eso en tu código , ya que las funciones están analizadas
gramaticalmento junto al resto del código.

Ejemplo de función asíncrona, promesa y fetch:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>xxxx</title>
</head>
<body>
<script type="text/javascript">
// async function es una función asíncrona, entonces esta función va a esperar
// hasta que ocurra el proceso que contiene, es decir, hasta que se traiga los
// datos de la url usando la palabra await, await le dice a la función que
// espere hasta que los datos allá se hayan cargado.
async function traerPais() {
  // Esta función fetch nos permite traernos un json.
  // await
  const respuesta = await fetch("https://api.nationalize.io/?name=argenis")
  // Con respuesta.json() convierto lo que me estoy trayendo de la url en json.
  const nombre = respuesta.json();
  return nombre;
}

function mostrarNombre(n) {
  document.getElementById("mensaje").innerHTML = n.country[0].country_id;
}

traerPais().then(mostrarNombre);
</script>
<p id="mensaje"></p>
</body>
</html>

Otro ejémplo:

<!doctype html>
<html lang="en">
  <head>
    <title>XXX</title>
    <meta charset="UTF-8">
  </head>
<body>
<script type="text/javascript">
const datos = [
  {
    id: 1,
    title: 'Movie 1',
    year: '2017',
  },
  {
    id: 2,
    title: 'Movie 2',
    year: '2020',
  }
]

const getDatos = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(datos);
    }, 3000);
  });
}

// await solo puede estar dentro de una función asíncrona.
async function fetchingData () {
  // datosFetched son los datos, entonces espera a tener esos datos y luego los
  // mostramos con console.log.
  const datosFetched = await getDatos();
  console.log(datosFetched);
}
fetchingData();
</script>
</body>
</html>

Otro ejemplo:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>xxxx</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
<script type="text/javascript">
async function responseData() {
  const response = await axios.get("https://randomuser.me/api/?results=3")
  console.log(response);
}
responseData()
</script>
</body>
</html>

===============================
Redondear números en JavaScript
===============================

Puedes utilizar las siguientes funciones:

Math.round()
============

Esta función redondea un número al entero más cercano. Si el número decimal está
a medio camino entre dos enteros, se redondea al entero par más cercano.

var numero = 3.7;
var redondeado = Math.round(numero);
console.log(redondeado); // Salida: 4

Math.floor()
============

Esta función redondea un número al entero más pequeño más cercano. Si el número
decimal es negativo, se redondea al entero menor más cercano.

var numero = 3.7;
var redondeado = Math.floor(numero);
console.log(redondeado); // Salida: 3

Math.ceil()
===========

Esta función redondea un número al entero más grande más cercano. Si el número
decimal es negativo, se redondea al entero mayor más cercano.

var numero = 3.7;
var redondeado = Math.ceil(numero);
console.log(redondeado); // Salida: 4

toFixed()
=========

Este método de los objetos Number redondea un número al número especificado de
decimales y devuelve una cadena de texto.

var numero = 3.14159;
var redondeado = numero.toFixed(2);
console.log(redondeado); // Salida: "3.14"

var a = 10.78745;
var numeroFormateado = a.toFixed(2);
console.log(numeroFormateado); // Salida: "10.79"

Ejemplo
=======

<!DOCTYPE html>
<html>
<head>
  <title>Redondeo de números</title>
</head>
<body>
  <div id="numeroOriginal"></div>
  <div id="numeroRedondeado"></div>
  <script>
    var numero = 3.14159;
    var redondeado = numero.toFixed(2);
    var numeroOriginalDiv = document.getElementById('numeroOriginal');
    var numeroRedondeadoDiv = document.getElementById('numeroRedondeado');
    numeroOriginalDiv.textContent = "Número original: " + numero;
    numeroRedondeadoDiv.textContent = "Número redondeado: " + redondeado;
  </script>
</body>
</html>

==============
El objeto this
==============

El JavaScript esta palabra clave se refiere al objeto al que pertenece.

En este ejemplo, "this" representa el objeto persona, porque el objeto persona
pertenece al método fullName.

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>

<script>
// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  id     : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>

</body>
</html>

this en un método
=================

En un método de objeto, this se refiere al "dueño" del método.

En el ejemplo de la parte superior de esta página, esto se refiere al objeto
persona.

El objeto person es el dueño del método fullName.

this solo
=========

Cuando se usa solo, el propietario es el objeto Global, por lo que se refiere al
objeto Global.

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript <i>this</i> Keyword</h2>

<p>In this example, <b>this</b> refers to the window Object:</p>

<p id="demo"></p>

<script>
var x = this;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

this en una función (Por defecto)
=================================

En una función de JavaScript, el propietario de la función es el enlace
predeterminado para esto.

Entonces, en una función, esto se refiere al objeto global [object Window].

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript <i>this</i> Keyword</h2>

<p>In this example, <b>this</b> represents the object that "owns" myFunction:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = myFunction();
function myFunction() {
  return this;
}
</script>

</body>
</html>


This en una función (estricta)
==============================

El modo estricto de JavaScript no permite el enlace predeterminado.

Entonces, cuando se usa en una función, en modo estricto, esto no está definido.

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript <i>this</i> Keyword</h2>

<p>In a function, by default, <b>this</b> refers to the Global object.</p>
<p>In strict mode, <b>this</b> is <b>undefined</b>, because strict mode does not allow default binding:</p>

<p id="demo"></p>

<script>
"use strict";
document.getElementById("demo").innerHTML = myFunction();
function myFunction() {
  return this;
}
</script>

</body>
</html>

This en los controladores de eventos

En los controladores de eventos HTML, esto se refiere al elemento HTML que
recibió el evento:

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript <i>this</i> Keyword</h2>

<button onclick="this.style.display='none'">Click to Remove Me!</button>

</body>
</html>

En el siguiente ejemplo, al llamar a person1.fullName con person2 como
argumento, esto se referirá a person2, incluso si es un método de person1:

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript <i>this</i> Keyword</h2>
<p>In this example <strong>this</strong> refers to person2, even if it is a method of person1:</p>

<p id="demo"></p>

<script>
var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"John",
  lastName: "Doe",
}
var x = person1.fullName.call(person2);
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

====================
HTML5 Tag <template>
====================

Utilice <template> para guardar algún contenido que se ocultará cuando se cargue
la página. Utilice JavaScript para mostrarlo:

<!DOCTYPE html>
<html>
<body>

<h1>The template Element</h1>

<p>Click the button below to display the hidden content from the template element.</p>

<button onclick="showContent()">Show hidden content</button>

<template>
  <h2>Flower</h2>
  <img src="img_white_flower.jpg" width="214" height="204">
</template>

<script>
function showContent() {
  var temp = document.getElementsByTagName("template")[0];
  var clon = temp.content.cloneNode(true);
  document.body.appendChild(clon);
}
</script>

</body>
</html>

================
JavaScript Const
================

Las variables definidas con const se comportan como las variables let, excepto
que no se pueden reasignar:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript const</h2>

<p>You cannot change a primitive value.</p>

<p id="demo"></p>

<script>
try {
  const PI = 3.141592653589793;
  PI = 3.14;
}
catch (err) {
  document.getElementById("demo").innerHTML = err;
}
</script>

</body>
</html>

A las variables const de JavaScript se les debe asignar un valor cuando se
declaran:

---

Incorrect

const PI;
PI = 3.14159265359;

---

Correct

const PI = 3.14159265359;

---

====================
Método constructor()
====================

El método constructor es un metodo especial para crear e inicializar un objeto
creado a partir de una clase.

Sintaxis
========

constructor([argumentos]) { ... }

Constructores por defecto
=========================

Si no especifica un método constructor, se utiliza un constructor
predeterminado. Para las clases base, el constructor por defecto es:

constructor() {}

==========================
Función addEventListener()
==========================

addEventListener() Registra un evento a un objeto en específico. El Objeto
especifico puede ser un simple elemento en un archivo, el mismo documento, una
ventana o un XMLHttpRequest.

Para registrar más de un eventListener, puedes llamar addEventListener() para el
mismo elemento pero con diferentes tipos de eventos o parámetros de captura.

Sintaxis
========

target.addEventListener(tipo, listener[, useCapture]);

=============================
Función removeEventListener()
=============================

El método removeEventListener() elimina un controlador de eventos que se ha
adjuntado con el método addEventListener().

Nota: Para eliminar los controladores de eventos, la función especificada con el
método addEventListener() debe ser una función externa, como en el ejemplo
anterior (myFunction).

Funciones anónimas, como "element.removeEventListener (" evento ", función () {myScript});" no funcionara.

Ejemplo
=======

Este elemento div tiene un controlador de eventos onmousemove que muestra un
número aleatorio cada vez que mueve el mouse dentro de este campo naranja.

Haga clic en el botón para eliminar el controlador de eventos de DIV.

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
  background-color: coral;
  border: 1px solid;
  padding: 50px;
  color: white;
}
</style>
</head>
<body>

<div id="myDIV">This div element has an onmousemove event handler that displays a random number every time you move your mouse inside this orange field.
  <p>Click the button to remove the DIV's event handler.</p>
  <button onclick="removeHandler()" id="myBtn">Try it</button>
</div>

<p><strong>Note:</strong> The addEventListener() and removeEventListener() methods are not supported in Internet Explorer 8 and earlier versions.</p>

<p id="demo"></p>

<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

function myFunction() {
  document.getElementById("demo").innerHTML = Math.random();
}

function removeHandler() {
  document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>

</body>
</html>

==================================
Funciones Flecha o arrow functions
==================================

Una expresión de función flecha es una alternativa compacta a una expresión de
función tradicional, pero es limitada y no se puede utilizar en todas las
situaciones.

Diferencias y limitaciones
==========================

No tiene sus propios enlaces a this o super y no se debe usar como métodos.

No tiene argumentos o palabras clave new.target.

No apta para los métodos call, apply y bind, que generalmente se basan en
establecer un ámbito o alcance

No se puede utilizar como constructor.

No se puede utilizar yield dentro de su cuerpo.

Comparación de funciones tradicionales con funciones flecha
===========================================================

Observa, paso a paso, la descomposición de una "función tradicional" hasta la
"función flecha" más simple:

Nota: Cada paso a lo largo del camino es una "función flecha" válida

// Función tradicional
function (a){
  return a + 100;
}

// Desglose de la función flecha

// 1. Elimina la palabra "function" y coloca la flecha entre el argumento y el corchete de apertura.
(a) => {
  return a + 100;
}

// 2. Quita los corchetes del cuerpo y la palabra "return" - el return está implícito.
(a) => a + 100;

// 3. Suprime los paréntesis de los argumentos
a => a + 100;

Por ejemplo, si tienes varios argumentos o ningún argumento, deberás volver a
introducir paréntesis alrededor de los argumentos:

// Función tradicional
function (a, b){
  return a + b + 100;
}

// Función flecha
(a, b) => a + b + 100;

// Función tradicional (sin argumentos)
let a = 4;
let b = 2;
function (){
  return a + b + 100;
}

// Función flecha (sin argumentos)
let a = 4;
let b = 2;
() => a + b + 100;

Del mismo modo, si el cuerpo requiere líneas de procesamiento adicionales,
deberás volver a introducir los corchetes Más el "return" (las funciones flecha
no adivinan mágicamente qué o cuándo quieres "volver"):

// Función tradicional
function (a, b){
  let chuck = 42;
  return a + b + chuck;
}

// Función flecha
(a, b) => {
  let chuck = 42;
  return a + b + chuck;
}

// Función tradicional
function bob (a){
  return a + 100;
}

// Función flecha
let bob = a => a + 100;

Otro ejemplo:

/* Array que contiene 2 objetos */
const datos = [
  {
    id: 1,
    title: 'Movie 1',
    year: '2017',
  },
  {
    id: 2,
    title: 'Movie 2',
    year: '2020',
  }
]

/* Función corriente */
var getDatos = function() {
  console.log(datos);
};
getDatos();

/* Función flecha */
const getDatosA = () => {
  return datos;
}
console.log(getDatosA());

===
let
===

La instrucción let declara una variable de alcance local con ámbito de
bloque(block scope), la cual, opcionalmente, puede ser inicializada con algún
valor.

let var1 [= valor1] [, var2 [= valor2]] [, ..., varN [= valorN]];

=====
super
=====

La palabra clave super es usada para acceder y llamar funciones del padre de un
objeto.

Las expresiones super.prop y super[expr] son válidas en cualquier definición de
método tanto para clases como para objetos literales (en-US).

Sintaxis:

// llama al método constructor del objeto padre.
super([arguments]);

// llama cualquier otro método del objeto padre.
super.functionOnParent([arguments]);

==================================
Diferencias entre let, var y const
==================================

La diferencia es el alcance de esa variable.

-var: Puedo acceder a esa variable desde cualquier punto del código. Si defino
la variable dentro de un if puedo acceder a ella fuera del if.

-let: Su alcance está limitado al bloque dentro del cual la ponga, por ejemplo
dentro de un if pero no fuera.

Ejemplo:

//ES6
(function () {
  if (true) {
    let x = "hola mundo";
  }
  console.log(x);
  //Da error, porque "x" ha sido definida dentro del "if"
})();

-const: Es lo mismo que tener una variable solo que su contenido no es
modificable, ya qu es una constante.

=========================
Qué es un template string
=========================

Es una cadena de texto en la cual puedo meter varios enters, puedo meter varias
líneas de texto e incluso puedo interpolar variables dentro de la cadena para
imprimirlas sin usar concatenación.

Usan el caracter backtick (`).

Las plantillas de cadena, mejor conocidas como template strings, son una forma
más fácil de crear:

-Cadenas con variables dentro (interpolación).
-Generar cadenas multilínea.
-Ejecutar expresiones, funciones y etiquetados.

Ejemplo:

let saludo = `Hola soy un Template String`;

console.log(saludo); //Imprime Hola soy un Template String

//strings multilínea

let mensaje = `No es quien seas en el interior,
tus actos son los que te definen...
Batman`;

console.log(mensaje);

/*
Imprime
No es quien seas en el interior,
tus actos son los que te definen...
Batman
*/

// variables en strings (interpolación)

let nombre = 'Jonathan';

console.log(`Hola ${nombre}`); //Imprime Hola Jonathan

//ES6
let nombre1 = "JavaScript";
let nombre2 = "awesome";
console.log(`Sólo quiero decir que ${nombre1} is ${nombre2`);
// Solo quiero decir que JavaScript is awesome

// ejecutar expresiones

console.log(`Hola ${nombre}, tienes ${30 + 2} años`); //Imprime Hola Jonathan, tienes 32 años

// ejecutar funciones

let estaciones = ['Primavera', 'Verano', 'Otoño', 'Invierno'],
  ol = `<ol>
    ${
      estaciones.map(function (estacion) {
        return `<li>${estacion}</li>`;
      }).join('')
    }
  </ol>`;

console.log(ol);

// Imprime <ol><li>Primavera</li><li>Verano</li><li>Otoño</li><li>Invierno</li></ol>

//función de etiquetado

const etiqueta = function (cadena, variable) {
  console.log(cadena); //Imprime ["Hola ", "", raw: Array[2]]
  console.log(variable); //Imprime Ulises
  console.log(cadena[0] + variable); //Imprime Hola Ulises
};

let otroNombre = 'Ulises';

etiqueta`Hola ${otroNombre}`;

También podemos tener String multilínea sin necesidad de concatenarlos con +.

//ES5
var saludo = "ola " +
"que " +
"ase ";

//ES6
var saludo = "ola
que
ase";

console.log("hola
que
ase");

================
Función Callback
================

Una función de callback es una función que se pasa a otra función como un
argumento, que luego se invoca dentro de la función externa para completar algún
tipo de rutina o acción.

Ejemplo:

function saludar(nombre) {
  alert('Hola ' + nombre);
}

function procesarEntradaUsuario(callback) {
  var nombre = prompt('Por favor ingresa tu nombre.');
  callback(nombre);
}

procesarEntradaUsuario(saludar);

Las funciones callback son ampliamente utilizadas en la programación con
JavaScript. Puede tratarse, por ejemplo, de una función que se ejecuta al pulsar
un botón o de algún contenido relacionado con una función setTimeout(), que
provoca un retraso de tiempo.

Un ejemplo simple de un callback en JavaScript sería un botón común y corriente:

document.getElementById("Button1").addEventListener("click", function() {
  alert("Se ha pulsado el botón");
}, false);

En este ejemplo, se utiliza un EventListener como callback que se activa cuando
se produce un determinado evento; en este caso, hacer clic en el botón
identificado como “Button1”. En cuanto se hace clic en el botón y se cumplen las
condiciones para la función callback, esta se ejecuta y el terminal emite el
mensaje “Se ha pulsado el botón”. Para garantizar la compatibilidad con
versiones anteriores del navegador, en el ejemplo también se utiliza el
parámetro “false”.

===================================
¿Qué es el DOM y BOM en JavaScript?
===================================

El DOM es el Documento Object Model, que se ocupa del documento, los elementos
HTML en sí mismos, por ejemplo. document y todo el recorrido que harías en ella,
eventos, etc.

El BOM es el Browser Object Model, que se ocupa de los componentes del navegador
aparte del documento, como history, location, navigator y screen (así como
algunos otros que varían según el navegador).

===============
querySelector()
===============

El método querySelector() devuelve el primer elemento que coincide con un
selector o selectores CSS especificados en el documento.

<!DOCTYPE html>
<html>
<body>
<p class="example">A paragraph with class="example".</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
  document.querySelector(".example").style.backgroundColor = "red";
}
</script>
</body>
</html>

Otro ejemplo
============

<!DOCTYPE html>
<html>
<body>
<p>This is a p element.</p>
<p>This is also a p element.</p>
<p>Click the button to add a background color to the first p element in the document.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
  document.querySelector("p").style.backgroundColor = "red";
}
</script>
</body>
</html>

Otro ejemplo
============

<!DOCTYPE html>
<html>
<body>
<h2 class="example">A heading with class="example"</h2>
<p class="example">A paragraph with class="example".</p>
<p>Click the button to add a background color to the first p element in the document with class="example".</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
  document.querySelector("p.example").style.backgroundColor = "red";
}
</script>
</body>
</html>

Otro ejemplo
============

<!DOCTYPE html>
<html>
<body>
<p id="demo">This is a p element with id="demo".</p>
<p>Click the button to change the text of the p element.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
  document.querySelector("#demo").innerHTML = "Hello World!";
}
</script>
</body>
</html>

========================
getElementsByClassName()
========================1

El método getElementsByClassName () devuelve una colección de todos los
elementos del documento con el nombre de clase especificado, como un objeto HTMLCollection.

El objeto HTMLCollection representa una colección de nodos.
Se puede acceder a los nodos mediante números de índice.
El índice comienza en 0.

Ejemplo
=======

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 5px;
}
</style>
</head>
<body>

<div class="example">
  <p>P element in first div with class="example". Div's index is 0.</p>
</div>

<div class="example color">
  <p>P element in first div with class="example color". Div's index is 0.</p>
</div>

<div class="example color">
  <p>P element in second div with class="example color". Div's index is 1.</p>
</div>

<p>Click the button to change the background color of the first div element with the classes "example" and "color".</p>

<button onclick="myFunction()">Try it</button>

<p><strong>Note:</strong> The getElementsByClassName() method is not supported in Internet Explorer 8 and earlier versions.</p>

<script>
function myFunction() {
  var x = document.getElementsByClassName("example color");
  x[0].style.backgroundColor = "red";
}
</script>

</body>
</html>

==================================
Cómo funciona Lambda en JavaScript
==================================

Una lambda es una function que se utiliza como dato.

Una lambda es una function que se utiliza como dato. Como tal, se puede utilizar
de la misma manera que cualquier otra expresión: como un parámetro para otra
function, como el valor de retorno de una function, o en cualquier sitio donde
se pueda utilizar una variable.

Ejemplo:

var sum = function sum() {
  var result = 0;
  [5, 5, 5].forEach(function addTo(number) { result += number; });
  return result;
};

test('Lambdas.', function () {
  equal(sum(), 15,
    'result should be 15.');
});

La function addTo() pasada dentro de forEach() es un lambda. El método forEach()
llama addTo() para cada número en el array.

====================
Función setTimeout()
====================

El método setTimeout() llama a una función o evalúa una expresión después de un
número específico de milisegundos.

Tip: 1000 ms = 1 second.

<!DOCTYPE html>
<html>
<body>

<p>Click the button to wait 3 seconds, then alert "Hello".</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  setTimeout(function(){ alert("Hello"); }, 3000);
}
</script>

</body>
</html>

========================
¿Qué son los Websockets?
========================

Un poco de historia
===================

Para entender el beneficio que aportan los WebSockets es necesario recordar que
hasta hace poco, crear aplicaciones web que se pudieran considerar realmente
dinámicas era virtualmente imposible. La World Wide Web había sido diseñada
originalmente para consultar información estática almacenada en archivos HTML.

Navegar de una página a otra solo se podía hacer siguiendo ligas.
Posteriormente, los desarrolladores empezaron a crear sitios web un poco más
interactivos, mediante el uso de formas. La información proporcionada por el
usuario se mandaba al servidor (a un CGI o a un servlet) y el servidor
contestaba generando una nueva página dinámica. Eso sirvió para crear todo tipo
de aplicaciones básicas, pero los desarrolladores no estaban satisfechos, porque
el sistema seguía siendo muy ineficiente. El hecho de que cada vez que se
tuviera que interactuar con el servidor hubiera que cargar de nuevo toda la
página hacía que los usuarios percibieran que las aplicaciones web eran mucho
más lentas que sus equivalentes nativas y bastante menos atractivas.

Para resolver el problema, Microsoft ideó una solución. La empresa creó una
nueva función JavaScript, XMLHttpRequest, la cual añadió a su navegador Internet
Explorer. Esta función, aún muy utilizada actualmente, permite invocar un URL
(pasando parámetros de forma opcional) y obtener un resultado del servidor, el
cual se puede utilizar para actualizar la página (usando el DOM o Document
Object-Model), sin necesidad de volver a cargarla. Mediante el uso de
XMLHttpRequest, Microsoft pudo crear un cliente web (Outlook Web Access) para su
sistema de correo que funcionaba de forma muy similar a Outlook sobre Windows.

El éxito fue inmediato y los demás browsers no tardaron en adoptar esa función,
que se volvió rápidamente estándar.

Esta innovación creó toda una nueva generación de aplicaciones web que se
conoció como AJAX (Asynchronous JavaScript and XML, un nombre pegadizo pero
engañoso, porque en realidad no se necesita usar XML al invocar la función
XMLHttpRequest). Las aplicaciones AJAX permitieron que las aplicaciones web se
parecieran cada vez más a las aplicaciones nativas y lograron que cada vez
pasemos más tiempo dentro del browser y que usemos menos aplicaciones nativas.
De hecho, gracias a este fenómeno es cada vez más viable usar dispositivos que
solo pueden ejecutar aplicaciones web, como lo demuestra el éxito de las
Chromebooks de Google y la existencia de los teléfonos celulares basados en
Firefox OS que solo pueden ejecutar aplicaciones basadas en tecnologías web.

Sin embargo, a pesar de todas sus virtudes, la función XMLHttpRequest tiene una
serie de limitantes importantes. La principal es que la interacción con el
servidor debe iniciarse desde el cliente, ya sea por una interacción desde el
interfaz gráfico (por ejemplo apretando un botón) o a través de un temporizador.
Esto significa que si queremos actualizar las páginas conectadas a nuestro
servidor como respuesta a un evento enviado por el servidor, simplemente no es
posible hacerlo usando XMLHttpRequest. Por eso, cuando seguimos un evento
deportivo por Internet, tenemos que estar recargando la página una y otra vez,
para ver si ha cambiado el marcador. Ese sistema de estar poleando el servidor
una y otra vez es sumamente ineficiente y la carga de peticiones que genera
obliga a invertir mucho en infraestructura, un gasto que se podría evitar. Por
eso era necesario buscar otra solución mucho más elegante.

WebSockets
==========

Se trata de un concepto muy similar al de los sockets TCP/IP y que permite que
una aplicación web establezca un canal de comunicación bi-direccional
persistente entre la capa de presentación HTML en el browser y el servidor. Los
WebSockets utilizan los puertos estándar de http y https (80 y 443
respectivamente) y la especificación fue diseñada para evitar problemas causados
por el uso de proxies y de firewalls. Es importante recalcar que aunque los
WebSockets usan el puerto 80 al igual que HTTP, usan un protocolo de
comunicación distinto, razón por la cual se usa ws:// en la URL en lugar de
http://. También es posible encriptar la comunicación usando el protocolo
wss://, el cual usará el puerto 443 (el mismo que HTTPS).

En el cliente usaremos JavaScript para interactuar con los WebSockets en la
página web y del lado del servidor se puede usar una variedad de lenguajes de
programación, entre los cuales están JavaScript (usado tras bambalinas por
Node-Red, la tecnología que usaremos en este ejercicio) o Java
(a partir de JEE 7).

Otros conceptos de WebSocket
============================

El protocolo WebSocket, descrito en la especificación RFC 6455, brinda una forma
de intercambiar datos entre el navegador y el servidor por medio de una conexión
persistente. Los datos pueden ser pasados en ambas direcciones como paquetes
“packets”, sin cortar la conexión y sin pedidos de HTTP “HTTP-requests”
adicionales.

WebSocket es especialmente bueno para servicios que requieren intercambio de
información continua, por ejemplo juegos en línea, sistemas de negocios en
tiempo real, entre otros.

Un ejemplo simple:

Para abrir una conexión websocket, necesitamos crearla new WebSocket usando el
protocolo especial ws en la url:

let socket = new WebSocket("ws://javascript.info");

También hay una versión encriptada wss://. Equivale al HTTPS para los
websockets.

Una vez que el socket es creado, debemos escuchar los eventos que ocurren en él.
Hay en total 4 eventos:

open - conexión establecida,

message - datos recibidos,

error - error en websocket,

close - conexión cerrada.

…Y si queremos enviar algo, socket.send(data) lo hará.

Aquí un ejemplo:

<!DOCTYPE html>
<script>
"use strict";

let socket = new WebSocket("wss://javascript.info/article/websocket/demo/hello");

socket.onopen = function(e) {
  alert("[open] Conexión establecida");
  alert("Enviando al servidor");
  socket.send("Mi nombre es John");
};

socket.onmessage = function(event) {
  alert(`[message] Datos recibidos del servidor: ${event.data}`);
};

socket.onclose = function(event) {
  if (event.wasClean) {
    alert(`[close] Conexión cerrada limpiamente, código=${event.code} motivo=${event.reason}`);
  } else {
    // ej. El proceso del servidor se detuvo o la red está caída
    // event.code es usualmente 1006 en este caso
    alert('[close] La conexión se cayó');
  }
};

socket.onerror = function(error) {
  alert(`[error] ${error.message}`);
};
</script>

Para propósitos de demostración, hay un pequeño servidor server.js, escrito en
Node.js, ejecutándose para el ejemplo de arriba. Este responde con
“Hello from server, John”, espera 5 segundos, y cierra la conexión.

Entonces verás los eventos open → message → close.

Eso es realmente todo, ya podemos conversar con WebSocket. Bastante simple.

Abriendo un websocket
=====================

Cuando se crea new WebSocket(url), comienza la conexión de inmediato.

Durante la conexión, el navegador (usando cabeceras “header”) le pregunta al
servidor: “¿Soportas Websockets?” y si si el servidor responde “Sí”, la
comunicación continúa en el protocolo WebSocket, que no es HTTP en absoluto.

Aquí hay un ejemplo de cabeceras de navegador para una petición hecha por
new WebSocket("wss://javascript.info/chat").

GET /chat
Host: javascript.info
Origin: https://javascript.info
Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Key: Iv8io/9s+lYFgZWcXczP8Q==
Sec-WebSocket-Version: 13

Descripción:

Origin - La página de origen del cliente, ej. https://javascript.info. Los
objetos WebSocket son cross-origin por naturaleza. No existen las cabeceras
especiales ni otras limitaciones. De cualquier manera los servidores viejos son
incapaces de manejar WebSocket, asi que no hay problemas de compatibilidad. Pero
la cabecera Origin es importante, pues habilita al servidor decidir si permite o
no la comunicación WebSocket con el sitio web.

Connection: Upgrade - señaliza que el cliente quiere cambiar el protocolo.

Upgrade: websocket - el protocolo requerido es “websocket”.

Sec-WebSocket-Key - una clave de seguridad aleatoria generada por el navegador.

Sec-WebSocket-Version - Versión del protocolo WebSocket, 13 es la actual.

Nota: El intercambio WebSocket no puede ser emulado.

No podemos usar XMLHttpRequest o fetch para hacer este tipo de peticiones HTTP,
porque JavaScript no tiene permitido establecer esas cabeceras.

Cierre de conexión
==================

Normalmente, cuando una parte quiere cerrar la conexión (servidor o navegador,
ambos tienen el mismo derecho), envía un “frame de cierre de conexión” con un
código numérico y un texto con el motivo.

El método para eso es:

socket.close([code], [reason]);

code es un código especial de cierre de WebSocket (opcional)

reason es un string que describe el motivo de cierre (opcional)

Entonces el manejador del evento close de la otra parte obtiene el código y el
motivo, por ejemplo:

// la parte que hace el cierre:
socket.close(1000, "Work complete");

// la otra parte:
socket.onclose = event => {
  // event.code === 1000
  // event.reason === "Work complete"
  // event.wasClean === true (clean close)
};

Los códigos más comunes:

1000 - cierre normal. Es el predeterminado (usado si no se proporciona code),

1006 - no hay forma de establecerlo manualmente, indica que la conexión se
perdió (no hay frame de cierre).

Hay otros códigos como:

1001 - una parte se va, por ejemplo el server se está apagando, o el navegador
deja la página,

1009 - el mensaje es demasiado grande para procesar,

1011 - error inesperado en el servidor,

…y así.

Los códigos de WebSocket son como los de HTTP, pero diferentes. En particular,
los menores a 1000 son reservados, habrá un error si tratamos de establecerlos.

// en caso de conexión que se rompe
socket.onclose = event => {
  // event.code === 1006
  // event.reason === ""
  // event.wasClean === false (no hay un frame de cierre)
};

Estado de la conexión
=====================

Para obtener el estado (state) de la conexión, tenemos la propiedad
socket.readyState con valores:

0 - “CONNECTING”: la conexión aún no fue establecida,

1 - “OPEN”: comunicando,

2 - “CLOSING”: la conexión se está cerrando,

3 - “CLOSED”: la conexión está cerrada.

Resumen
=======

WebSocket es la forma moderna de tener conexiones persistentes entre navegador y
servidor .

-Los WebSockets no tienen limitaciones “cross-origin”.
-Están muy bien soportados en los navegadores.
-Pueden enviar y recibir datos string y binarios.

La API es simple.

Métodos:

-socket.send(data),
-socket.close([code], [reason]).

Eventos:

-open,
-message,
-error,
-close.

El WebSocket por sí mismo no incluye reconexión, autenticación ni otros
mecanismos de alto nivel. Hay librerías cliente/servidor para eso, y también es
posible implementar esas capacidades manualmente.

A veces, para integrar WebSocket a un proyecto existente, se ejecuta un
servidor WebSocket en paralelo con el servidor HTTP principal compartiendo la
misma base de datos. Las peticiones a WebSocket usan wss://ws.site.com, un
subdominio que se dirige al servidor de WebSocket mientras que https://site.com
va al servidor HTTP principal.

Seguro, otras formas de integración también son posibles.

Fuentes
=======

-https://es.javascript.info/websocket
-https://developer.ibm.com/es/technologies/web-development/articles/que-son-los-websockets/

-----

Enviar formulario cuando un select form se actualiza usando Jquery:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Usando jQuery</title>
<script src="jquery/jquery-1.12.4.js"></script>
</head>
<body>
<form action="" method="get">
  <select name="id" id="marca">
    <option value="">Choose</option>
    <option value="Alfa Romeo">Alfa Romeo</option>
    <option value="Cadillac">Cadillac</option>
    <option value="Toyota">Toyota</option>
  </select>
  <button id='submit' name="submit">Enviar</button>
</form>
</body>
<script>
$(document).ready(function() {
  $('#marca').on('change', function() {
    $('#submit').click();
  });
});
</script>
</html>

-----

Enviar formulario cuando un select form se actualiza Usando solo Javascript:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Usando Javascript</title>
</head>
<body>
<form action="" method="get">
  <select name="id" id="marca" onchange="this.form.submit()">
    <option value="">Choose</option>
    <option value="Alfa Romeo">Alfa Romeo</option>
    <option value="Cadillac">Cadillac</option>
    <option value="Toyota">Toyota</option>
  </select>
</form>
</body>
</html>

=====
Axios
=====

Axios es un cliente HTTP basado en promesas para node.js y el navegador. Puede
ejecutarse en el navegador y en nodejs con la misma base de código.  En el lado
del servidor, utiliza el módulo http nativo node.js, mientras que en el cliente
(navegador) utiliza XMLHttpRequests.

Instalación
===========

Para incluír e instalar Axios en nuestro proyecto ejecutamos:

$ npm install axios

Si no se está usando npm puedes incluirlo directamente desde el CDN agregando la
siguiente etiqueta a tu HTML:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Importar Axios en un proyecto
=============================

Luego de instalar Axios con npm en nuestro proyecto debemos importarlo de la
siquiente manera, probado en componente de Vue.js:

import axios from 'axios';

export default {
    // ...
}

Si estás incluyendo Axios desde el CDN, ya sea que estés utilizando Vue.js o no,
no necesitas utilizar el import.

Ejemplos de uso
===============

Hecho esto, podemos utilizar Axios en nuestro proyecto. Vamos a comenzar
realizando una sencilla solicitud GET:

axios.get(url)
.then(response => {
  // Obtenemos los datos
})
.catch(e => {
  // Capturamos los errores
})

Para realizar una solicitud GET llamamos al método get de Axios, pasando como
parámetro la URL que deseamos solicitar. Luego de esto llamamos a los métodos
then y catch, que se encargan de capturar la respuesta del servidor así como
los errores, en caso de que llegue a ocurrir alguno.

Supongamos que en la URL users tenemos un listado de usuarios que queremos
obtener y almacenar dentro de un arreglo que previamente declaramos en data:

axios.get('/users')
.then(response => {
  this.users = response.data;
})
.catch(e => {
  // Podemos mostrar los errores en la consola
  console.log(e);
})

Ejemplo
=======

<!doctype html>
<html lang="en">
  <head>
    <title>XXX</title>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
<body>
<script type="text/javascript">
axios.get('http://127.0.0.1/share/ajax/data.json')
.then(function(response) {
  alert("Success");
})
.catch(function(error) {
  console.log(error);
});
</script>
</body>
</html>

Con este código probamos que axios esté obteniendo la información de la url,
que en este caso es un .json con el siguiente contenido:

{
  "firstName": "John",
  "lastName": "Connor",
  "age": 25
}

Si se ejecuta correctamente el ejemplo muestra un alert que indica que pudo
acceder a la información de la url, de no poder acceder a la url que contiene el
json muestra un error por la consola, algo como:

Error: Request failed with status code 404.

Para que este ejemplo se ejecute correctamente y no de errores por el
intercambio de recursos de orígenes cruzados se debe ejecutar abrir el archivo
servido por un servidor http como apache o nginx al igual que el .json del
ejemplo: para este ejemplos las urls serían:

http://127.0.0.1/share/ajax/index.hml
http://127.0.0.1/share/ajax/data.json

Mostrando por consola el contenido de response
==============================================

<!doctype html>
<html lang="en">
  <head>
    <title>XXX</title>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
<body>
<script type="text/javascript">
axios.get('http://127.0.0.1/share/ajax/data.json')
.then(function(response) {
  console.log(response);
})
.catch(function(error) {
  console.log(error);
});
</script>
</body>
</html>

Otro ejemplo pero con función flecha
====================================

<!doctype html>
<html lang="en">
  <head>
    <title>XXX</title>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
<body>
<script type="text/javascript">
axios.get('http://127.0.0.1/share/ajax/data.json')
.then(response => {
  this.users = response.data;
  alert("Success");
})
.catch(e => {
  // Podemos mostrar los errores en la consola
  console.log(e);
})
</script>
</body>
</html>

-----

También podemos pasar parámetros a la solicitud. Supongamos que queremos
obtener un nombre en especifico:

<!doctype html>
<html lang="en">
  <head>
    <title>XXX</title>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
<body>
<script type="text/javascript">
axios.get('https://api.nationalize.io/', {
  params: {
    name: 'carlos'
  }
})
.then(response => {
  this.user = response.data;
  console.log(user.name);
  console.log(user.country[0].country_id);
}).catch(e => {
  console.log(e);
})
</script>
</body>
</html>

Los parámetros GET también pueden ser pasados directamente desde la URL:

<!doctype html>
<html lang="en">
  <head>
    <title>XXX</title>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
<body>
<script type="text/javascript">
axios.get('https://api.nationalize.io/', {
  params: {
    name: 'carlos'
  }
})
.then(response => {
  this.user = response.data;
  console.log(user.name);
  console.log(user.country[0].country_id);
}).catch(e => {
  console.log(e);
})
</script>
</body>
</html>

-----

Otro ejemplo de objeto con parámetros:

<!doctype html>
<html lang="en">
  <head>
    <title>XXX</title>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
<body>
<script type="text/javascript">
// Objeto con los datos
userInfo = {
  name: 'pepe',
}
// Solicitud GET
axios.get('https://api.nationalize.io', {
  // Asignamos el valor de userInfo a params
  params: userInfo
})
.then(response => {
  this.user = response.data;
  console.log(user.name);
  console.log(user.country[0].country_id);
}).catch(e => {
  console.log(e);
})
</script>
</body>
</html>

Ejemplo de solicitud POST
=========================

Con Axios también podemos realizar solicitudes de tipo POST. Para ello, debemos
usar el método post, pasando la URL y los datos que deseamos enviar al servidor.
Supongamos que tenemos un método llamado sendUserData desde donde enviamos los
datos de los usuarios:

sendUserData: function () {
  axios.post('/users', {
    name: 'Moriarty',
    enemy: 'Sherlock'
  }).then(response => {
    // Respuesta del servidor
  }).catch(e => {
    console.log(e);
  });
}

Observa cómo de segundo parámetro en el método post pasamos un objeto con los
datos que deseamos enviar al servidor.

Axios soporta múltiples métodos para realizar diferentes solicitudes:

axios.request()
axios.get()
axios.delete()
axios.post()
axios.put()

Fuente
======

https://styde.net/solicitudes-http-con-axios/

==========
Qué es JWT
==========

JWT (JSON Web Token) es un estándar qué está dentro del documento RFC 7519.

En el mismo se define un mecanismo para poder propagar entre dos partes, y de
forma segura, la identidad de un determinado usuario, además con una serie de
claims o privilegios.

Estos privilegios están codificados en objetos de tipo JSON, que se incrustan
dentro de del payload o cuerpo de un mensaje que va firmado digitalmente.

Token JWT
=========

En la práctica, se trata de una cadena de texto que tiene tres partes
codificadas en Base64, cada una de ellas separadas por un punto, como por
ejemplo lo siguiente:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

Podemos utilizar un debugger online (https://jwt.io/) para decodificar ese token
y visualizar su contenido. Si accedemos al mismo y pegamos dentro el texto
completo, se nos mostrará lo que contiene:

HEADER:ALGORITHM & TOKEN TYPE

{
  "alg": "HS256",
  "typ": "JWT"
}

PAYLOAD:DATA

{
  "sub": "1234567890",
  "name": "John Doe",
  "iat": 1516239022
}

VERIFY SIGNATURE

HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
)

Podemos ver el contenido del token sin necesidad de saber la clave con la cual
se ha generado, aunque no podremos validarlo sin la misma.

Como hemos dicho, un token tres partes:

Header: encabezado dónde se indica, al menos, el algoritmo y el tipo de token,
que en el caso del ejemplo anterior era el algoritmo HS256 y un token JWT.

Payload: donde aparecen los datos de usuario y privilegios, así como toda la
información que queramos añadir, todos los datos que creamos convenientes.

Signature: una firma que nos permite verificar si el token es válido, y aquí es
donde radica el quid de la cuestión, ya que si estamos tratando de hacer una
comunicación segura entre partes y hemos visto que podemos coger cualquier token
y ver su contenido con una herramienta sencilla, ¿dónde reside entonces la
potencia de todo esto?

Firma de un token JWT
=====================

La firma se construye de tal forma que vamos a poder verificar que el remitente
es quien dice ser, y que el mensaje no se ha modificado por el camino.

Se construye como el HMACSHA256, que son las siglas de Hash-Based Message
Authentication Code (Código de Autenticación de Mensajes), cifrado además con el
algoritmo SHA de 256 bits. Se aplica esa función a:

Codificación en Base64 de header.

Codificación en Base64 de payload.

Un secreto, establecido por la aplicación.

De esta forma, si alguien modifica el token por el camino, por ejemplo,
inyectando alguna credencial o algún dato malicioso, entonces podríamos
verificar que la comprobación de la firma no es correcta, por lo que no podemos
confiar en el token recibido y deberíamos denegar la solicitud de recursos que
nos haya realizado, ya sea para obtener datos o modificarlos.

Si lo que estamos requiriendo es que el usuario esté autenticado, deberíamos
denegar esa petición, por lo que siempre que trabajemos con JWT deberíamos
verificar con esa firma si el token es válido o no lo es.

Token JWT seguro
================

Aunque el algoritmo nos permita verificar la firma, y, por tanto, confiar o no,
tanto el encabezado como el cuerpo si llevan muchos datos van en abierto, ya que
Base64 no es un cifrado, es simplemente una codificación que es muy fácilmente
decodificable.

JWT nos invita siempre a que la comunicación entre partes se realice con HTTPS
para encriptar el tráfico, de forma que, si alguien lo interceptara, el propio
tráfico a través de HTTP sobre esos sockets SSL, cifrara toda la comunicación,
la del token y todo lo demás, y así añadir esa posibilidad de seguridad.

De hecho, siempre deberíamos utilizar HTTPS y un servidor con certificado para
hacer el despliegue de nuestras aplicaciones, no solamente con este con este
tipo de token JWT.

Ciclo de vida de un Token JWT
=============================

Vamos a ver ahora el ciclo de vida de un token JWT, si lo queremos utilizar en
el marco de un proceso de autenticación.

Como hemos visto, JWT no es un estándar de autenticación, sino que simplemente
un estándar que nos permite hacer una comunicación entre dos partes de identidad
de usuario. Con este proceso, además, podríamos implementar la autenticación de
usuario de una manera que fuera relativamente segura.

Comenzaríamos desde el cliente, haciendo una petición POST para enviar el
usuario y contraseña, y realizar el proceso de login.

Se comprobaría que ese usuario y su contraseña son correctos, y de serlos,
generar el token JWT para devolverlo al usuario.

A partir de ahí la aplicación cliente, con ese token, haría peticiones
solicitando recursos, siempre con ese token JWT dentro de un encabezado, que
sería Authorization: Bearer XXXXXXX, siendo Bearer el tipo de prefijo seguido de
todo el contenido del token.

En el servidor se comprobaría el token mediante la firma, para verificar que el
token es seguro, y, por tanto, podemos confiar en el usuario.

Dentro del cuerpo del token, además, tenemos los datos de quién es el usuario
que ha realizado esa petición, porque podemos contener en el payload todos los
datos de usuario que queramos.

Tras verificar que el token es correcto y saber quién es el que ha hecho la
petición, podemos aplicar entonces el mecanismo de control de acceso, saber si
puede acceder o no, y si es así, responder con el recurso protegido, de manera
que lo podría recibir de una forma correcta.

De esta forma podríamos implementar el proceso de autenticación, y hacerlo,
además, con estos JSON Web Token.

===================================
Search form in Javascript - ul list
===================================

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<ul id="myUL">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>
  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>
<script>
function myFunction() {
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName("li");
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}
</script>
</body>
</html>

=================================
Search form in Javascript - table
=================================

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<table id="myTable" border="1px">
  <tr class="header">
    <th>Name</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris specialites</td>
    <td>France</td>
  </tr>
</table>
<script>
function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
</script>
</body>
</html>

==========================
JavaScript Window Location
==========================

El objeto window.location se puede utilizar para obtener la dirección de la
página actual (URL) y para redirigir el navegador a una nueva página.

============================================
typeof (Saber el tipo de dato en JavaScript)
============================================

El operador typeof se usa en cualquiera de los siguientes modos:

typeof operando
typeof (operando)

El operador typeof devuelve una cadena que indica el tipo del operando sin
evaluarlo. operando es la cadena, variable, palabra clave u objeto para el que
se devolverá su tipo. Los paréntesis son opcionales.

Suponga que define las siguientes variables:

var miFuncion = new Function("5+2")
var forma = "redonda"
var tamano = 1
var hoy = new Date()

El operador typeof devuelve los siguientes resultados para estas variables

typeof miFuncion === 'function'
typeof forma === 'string'
typeof tamano === 'number'
typeof hoy === 'object'
typeof noExiste === 'undefined'

-----

Ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Ejemplo typeof</title>
</head>
<body>
<script>
var miFuncion = new Function("5+2");
var forma = "redonda";
var tamano = 1;
var hoy = new Date();
console.log(typeof miFuncion);
console.log(typeof forma);
console.log(typeof tamano);
console.log(typeof hoy);
console.log(typeof noExiste);
/*
Esto imprime:
function
string
number
object
undefined
*/
</script>
</body>
</html>

-----

Para las palabras clave true y null, el operador typeof devuelve los siguientes resultados:

typeof true === 'boolean'
typeof null === 'object'

Para un número o una cadena, el operador typeof devuelve los siguientes resultados:

typeof 62 === 'number'
typeof 'Hola mundo' === 'string'

Para valores de propiedades, el operador typeof devuelve el tipo del valor que contiene la propiedad:

typeof document.lastModified === 'string'
typeof window.length === 'number'
typeof Math.LN2 === 'number'

Para métodos y funciones, el operador typeof devuelve los resultados siguientes:

typeof blur === 'function'
typeof eval === 'function'
typeof parseInt === 'function'
typeof shape.split === 'function'

Para objetos predefinidos, el operador typeof devuelve los siguientes resultados:

typeof Date === 'function'
typeof Function === 'function'
typeof Math === 'object'
typeof Object === 'function'
typeof String === 'function'

===============================
Tres puntos (...) en JavaScript
===============================

Vamos a discutir una función introducida en ES6 que es el operador de extensión
y el operador de descanso.

Parámetros de descanso
======================

Con los parámetros de descanso, podemos reunir cualquier cantidad de argumentos
en una matriz y hacer lo que queramos con ellos. Se han introducido parámetros
de descanso para reducir el código repetitivo inducido por los argumentos.

function myFunc(a, b, ...args) {
 console.log(a); // 22
 console.log(b); // 98
 console.log(args); // [43, 3, 26]
};
myFunc(22, 98, 43, 3, 26);

En el último parámetro de myFunc con el prefijo ... lo que hará que todos los
argumentos restantes se coloquen dentro de la matriz de JavaScript.

Los parámetros de descanso reúnen todos los argumentos restantes, por lo que no
tiene sentido agregar parámetros de descanso antes del último parámetro. Rest
parámetro debe ser el último parámetro formal.

function myFunc(arg1, ...rest, arg2) {
  // arg2 ?
}

Los parámetros restantes se pueden desestructurar (solo matrices), lo que
significa que sus datos se pueden descomprimir en distintas variables.

function myFunc(...[x, y, z]) {
  return x * y* z;
}

myFunc(1)          // NaN
myFunc(1, 2, 3)    // 6
myFunc(1, 2, 3, 4) // 6 (fourth parameter is not destructured)

Operadores de Propagación
=========================

El operador de propagación se usa para expandir elementos de un iterable (como
una matriz) en lugares donde caben varios elementos.

function myFunc(x, y, ...params) { // used rest operator here
  console.log(x);
  console.log(y);
  console.log(params);
}

var inputs = ["a", "b", "c", "d", "e", "f"];
myFunc(...inputs); // used spread operator here
// "a"
// "b"
// ["c", "d", "e", "f"]

Siempre ha habido una variedad de formas de combinar arreglos, pero el operador
de distribución ofrece un nuevo método para combinar arreglos:

const featured = ['Deep Dish', 'Pepperoni', 'Hawaiian'];
const specialty = ['Meatzza', 'Spicy Mama', 'Margherita'];

const pizzas = [...featured, 'veg pizza', ...specialty];

console.log(pizzas); // 'Deep Dish', 'Pepperoni', 'Hawaiian', 'veg pizza',
'Meatzza', 'Spicy Mama', 'Margherita'

Con el operador de propagación, la clonación superficial (excluyendo el
prototipo) o la fusión de objetos ahora es posible usando una sintaxis más corta
que Object.assign().

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }

Conclusión
==========

Cuando vemos tres puntos (...) en el código, son parámetros de descanso o el
operador de propagación.

Hay una manera fácil de distinguirlos:

-Cuando tres puntos (...) están al final de los parámetros de la función, son
"parámetros de descanso" y reúnen el resto de la lista de argumentos en una
matriz.

-Cuando aparecen tres puntos (...) en una llamada de función o similar, se
denomina "operador de propagación" y expande una matriz en una lista.

Fuente
======

https://dev.to/sagar/three-dots---in-javascript-26ci

===================
Document.designMode
===================

Controla la posibilidad de editar un documento entero. Los valores válidos son
"on" y "off". De acuerdo a las especificaciones, el valor predeterminado de esta
propiedad es "off". Firefox sigue este estándar. El valor predeterminado de
versiones anteriores de Chrome y IE es "inherit". En IE6-10, el valor se escribe
con mayúscula.

Uso
===

Abrir la consola de js del navegador y pegar lo siguiente y luego enter:

document.designMode = 'on'

Ya con eso se puede editar el texto de una página web directamente desde la
interfaz.

Fuente
======

https://developer.mozilla.org/es/docs/Web/API/Document/designMode

===============================================
La diferencia entre Transpilación y Compilación
===============================================

El concepto de compilación es bien conocido por todo informático que se precie
pero últimamente se oye hablar mucho también de un concepto relacionado, pero no
equivalente, el concepto de transpilación. Veamos las diferencias.

Compilación
===========

Es el proceso por el cual el código fuente de un programa escrito en un lenguaje
de programación “A” se traduce a código fuente de un lenguaje de programación
“B”.

El caso más común es cuando el código origen está escrito en un lenguaje de
programación de “alto nivel” (C, Java, PHP u otros lenguajes de tercera
generación) y se traduce a código máquina que pueda ejecutar directamente el
ordenador. Pero hay muchas otras posibilidades como pasar por una representación
intermedia en bytecode como es el caso típico de Java.

Transpilación
=============

La transpilación es un caso particular de la compilación. Es decir, todo
transpilador es también un compilador pero al revés no es cierto, hay
compiladores que no se pueden considerar transpiladores. ¿Y cuál es la
característica que convierte un compilador en transpilador?: la relación entre
los lenguajes origen y destino de la traducción.

Me explico, si el compilador traduce código entre dos lenguajes que están al
mismo nivel de abstracción entonces, estamos ante un transpilador. Si traduce
código entre lenguajes de diferente nivel de abstracción (típicamente de más
alto a más bajo nivel) entonces no lo es.

Como ejemplo más claro, Una traducción de Java a Bytecode sería una
compilación. Una traducción de TypeScript a JavaScript sería en cambio una
transpilación ya que TypeScript no deja ser una variante de JavaScript (al qué
añade un sistema de tipos opcional, de hecho todo programa JavaScript es ya de
entrada un programa TypeScript válido.

Fuente
======

https://ingenieriadesoftware.es/diferencia-transpilacion-compilacion/

========================
El método Array.splice()
========================

El método Array.splice() agrega elementos al arreglo
<!DOCTYPE html>
<html>
<body>
  <h2>JavaScript Arrays</h2>
  <p>The Array.splice() method adds array elements:</p>
<script>
  const fruits = ["Hola", "todos", "estan"];
  console.log(fruits);
  // At position 2, add 2 elements:
  fruits.splice(2, 0, "como", "carajos");
  console.log(fruits);
</script>
</body>
</html>

====================
toLocaleDateString()
====================

El método toLocaleDateString() devuelve una cadena con una representación
sensible al idioma de la parte de la fecha especificada en la zona horaria del
agente de usuario.

Los argumentos locales y options permiten a las aplicaciones especificar el
idioma cuyas convenciones de formato deben utilizarse y permiten personalizar el
comportamiento de la función. En las implementaciones más antiguas, que ignoran
los argumentos locales y options, la configuración regional utilizada y la forma
de la cadena devuelta dependen totalmente de la implementación.

const event = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };

console.log(event.toLocaleDateString('de-DE', options));
// expected output (varies according to local timezone): Donnerstag, 20. Dezember 2012

console.log(event.toLocaleDateString(undefined, options));
// expected output (varies according to local timezone and default locale): Thursday, December 20, 2012

var date = new Date('2022-04-22T11:27:41.000000Z');
dateD = date.toLocaleDateString('en-GB');
// Obtiene 22/04/2022

cs-CZ: 3. 9. 2021 17:56:58
da-DK: 3.9.2021 17.56.58
de-AT: 3.9.2021, 17:56:58
de-CH: 3.9.2021, 17:56:58
de-DE: 3.9.2021, 17:56:58
el-GR: 3/9/2021, 5:56:58 μ.μ.
en-AU: 03/09/2021, 5:56:58 pm
en-CA: 2021-09-03, 5:56:58 p.m.
en-GB: 03/09/2021, 17:56:58
en-IE: 3/9/2021, 17:56:58
en-IN: 3/9/2021, 5:56:58 pm
en-NZ: 3/09/2021, 5:56:58 pm
en-US: 9/3/2021, 5:56:58 PM
en-ZA: 2021/09/03, 17:56:58
es-AR: 3/9/2021 17:56:58
es-CL: 03-09-2021 17:56:58
es-CO: 3/9/2021, 5:56:58 p. m.
es-ES: 3/9/2021 17:56:58
es-MX: 3/9/2021 17:56:58
es-US: 3/9/2021 5:56:58 p. m.
fi-FI: 3.9.2021 klo 17.56.58
fr-BE: 03/09/2021, 17:56:58
fr-CA: 2021-09-03, 17 h 56 min 58 s
fr-CH: 03.09.2021, 17:56:58
fr-FR: 03/09/2021, 17:56:58
he-IL: 3.9.2021, 17:56:58
hi-IN: 3/9/2021, 5:56:58 pm
hu-HU: 2021. 09. 03. 17:56:58
id-ID: 3/9/2021 17.56.58
it-CH: 3/9/2021, 17:56:58
it-IT: 3/9/2021, 17:56:58
ja-JP: 2021/9/3 17:56:58
ko-KR: 2021. 9. 3. 오후 5:56:58
nl-BE: 3/9/2021 17:56:58
nl-NL: 3-9-2021 17:56:58
no-NO: 3.9.2021, 17:56:58
pl-PL: 3.09.2021, 17:56:58
pt-BR: 03/09/2021 17:56:58
pt-PT: 03/09/2021, 17:56:58
ro-RO: 03.09.2021, 17:56:58
ru-RU: 03.09.2021, 17:56:58
sk-SK: 3. 9. 2021, 17:56:58
sv-SE: 2021-09-03 17:56:58
ta-IN: 3/9/2021, பிற்பகல் 5:56:58
ta-LK: 3/9/2021, 17:56:58
th-TH: 3/9/2564 17:56:58
tr-TR: 03.09.2021 17:56:58
zh-CN: 2021/9/3 下午5:56:58
zh-HK: 3/9/2021 下午5:56:58
zh-TW: 2021/9/3 下午5:56:58

Fuente
======

-https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString
-https://stackoverflow.com/questions/27939773/tolocaledatestring-short-format

==========================================================
Llamar 2 funciones, 2 métodos o más funciones con un click
==========================================================

Agregar punto y coma; al final de las llamadas de función para que ambos
funcionen.

<input id="btn" type="button" value="click" onclick="pay(); cls();"/>

================
JSON.stringify()
================

Un uso común de JSON es intercambiar datos hacia / desde un servidor web.

Al enviar datos a un servidor web, los datos deben ser una cadena.

Convierta un objeto JavaScript en una cadena con JSON.stringify().

Ejemplo
=======

<!DOCTYPE html>
<html>
<body>

<h2>Create a JSON string from a JavaScript object.</h2>
<p id="demo"></p>

<script>
const obj = {name: "John", age: 30, city: "New York"};
const myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

=========================================
Cómo usar JSON.parse() y JSON.stringify()
=========================================

El objeto JSON, que está disponible en todos los navegadores modernos, tiene dos
útiles métodos para manejar el contenido con formato JSON: parse y stringify.

JSON.parse() toma una cadena JSON y la transforma en un objeto de JavaScript.

JSON.stringify() toma un objeto de JavaScript y lo transforma en una cadena
JSON.

Ejemplo:

const myObj = {
  name: 'Skip',
  age: 2,
  favoriteFood: 'Steak'
};

const myObjStr = JSON.stringify(myObj);

console.log(myObjStr);
// "{"name":"Sammy","age":6,"favoriteFood":"Tofu"}"

console.log(JSON.parse(myObjStr));
// Object {name:"Sammy",age:6,favoriteFood:"Tofu"}

Acceder a datos según su llave:

var oJson = {
  "name": "",
  "skills": "",
  "jobtitle": "Entwickler",
  "res_linkedin": "GwebSearch"
}
alert(oJson.jobtitle);

=========================================
Obtener fecha y hora actual en JavaScript
=========================================

Fecha actual en JavaScript:

var today = new Date();
var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();

Hora actual en JavaScript:

var today = new Date();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();

Fecha y hora actual, ambos en JavaScript:

var today = new Date();
var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var dateTime = date+' '+time;

Resulta en:

2018-8-3 11:12:40

=============================================================
Método que ordena un arreglo de más reciente a menos reciente
=============================================================

sortedItems (items) {
  return this.items.sort((a, b) => new Date(b.crated_at) - new Date(a.created_at))
},

==================================================
Obtener solo el año a partir de una fecha completa
==================================================

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>The getFullYear() Method</h2>
<p>getFullYear() returns the year with four digits:</p>
<p id="demo"></p>
<script>
const d = new Date("July 21, 1983 01:15:00");
let year = d.getFullYear();
document.getElementById("demo").innerHTML = year;
</script>
</body>
</html>

Resultado:

1983

=====================
Obtener el año actual
=====================

var currentTime = new Date();
var year = currentTime.getFullYear()
console.log(year);

Salida:
2022

===============
Recargar página
===============

window.location.reload();

==========================================================
Introducción a los mapas fuente de JavaScript o sourcemaps
==========================================================

¿Alguna vez deseaste poder mantener el código del lado del cliente legible y, lo
que es más importante, depurable incluso después de haberlo combinado y
minimizado, sin afectar el rendimiento? Pues ahora puedes gracias a la magia de
los mapas de origen.

Básicamente, es una forma de mapear un archivo combinado/minificado a un estado
no construido. Cuando se compila y construye para la producción, además de
minimizar y combinar sus archivos JavaScript, genera un mapa de origen que
contiene información sobre sus archivos originales. Cuando consulta un
determinado número de línea y columna en su JavaScript generado, puede realizar
una búsqueda en el mapa de origen que devuelve la ubicación original. Las
herramientas de desarrollo (actualmente compilaciones nocturnas de WebKit,
Google Chrome o Firefox) pueden analizar el mapa de origen automáticamente y
hacer que parezca que está ejecutando archivos sin minimizar ni combinar.

Algunos proyectos que usen vue, pueden quejarse porque intentan buscar el
archivo .map y este les da error, es por eso que esto se soluciona acompañando
la librería a usar con su respectivo archivo de mapa fuente, ejemplo:

popper.min.js
popper.min.js.map

Cuando se está usando una librería que se gestiona con node, y se está usando
webpack, la solución puede ser agregar el método sourceMaps() en el archivo de
configuración de webpack.mix.js, tal que:

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css')
    .sourceMaps();

================================================================
Limitar el número de elementos del arreglo a obtener con slice()
================================================================

slice(0, n)

Para obtener los primeros n elementos del arrlego usar:

myArray.slice(0, n);

===============
Método filter()
===============

El método filter() crea una nueva matriz llena de elementos que pasan una prueba
proporcionada por una función.

El método filter() no ejecuta la función para elementos vacíos.

El método filter() no cambia la matriz original.

Ejemplo
=======

const ages = [15, 17, 18, 25, 35, 40];

/**
 * Método que recibe "age" como parámetro y lo devuelve solo si es mayor o igual
 * a 18.
 */
function checkAdult(age) {
  return age >= 18;
}

const result = ages.filter(checkAdult);

console.log(ages);
console.log(result);

Otro ejemplo
============

const ages = [15, 17, 18, 25, 35, 40];
const user = 15;

function checkUser(age) {
  return age === user;
}

// Cada elemento de "ages" se le pasa a checkUser mediante filter, es ahí
// donde realiza la comparación con cada uno.

const result = ages.filter(checkUser);
console.log(result);

================
Comparación (==)
================

El operador de comparacion (==) comprueba si sus dos operandos son iguales y
devuelve un resultado booleano. A diferencia del operador de igualdad estricta
(===), es que este convierte y compara operandos que son de diferentes tipos.

Ejemplo
=======

console.log(1 == 1);
// expected output: true

console.log('hello' == 'hello');
// expected output: true

console.log('1' ==  1);
// expected output: true

console.log(0 == false);
// expected output: true

=======================
Igualdad Estricta (===)
=======================

El operador de estricta igualdad (===) revisa si dos operandos son iguales y
produce un resultado Booleano. A diferencia del operador de igualdad regular
(==), el operador de estricta igualdad siempre considera que los operandos de
distinto tipo de valor son diferentes y nunca similares.

Ejemplo
=======

console.log(1 === 1);
// expected output: true

console.log('hello' === 'hello');
// expected output: true

console.log('1' ===  1);
// expected output: false

console.log(0 === false);
// expected output: false

================
Método unshift()
================

Array.prototype.unshift()

El método unshift() agrega uno o más elementos al inicio del array, y devuelve
la nueva longitud del array.

Ejemplo:

const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// expected output: 5

console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]

================
Atributo oninput
================

oninput es un atributo de eventos en HTML que se utiliza para asociar una
función JavaScript a un elemento de entrada (como un campo de texto) y ejecutar
esa función cada vez que el valor del elemento cambie.

Cuando se usa oninput en un campo de texto, la función asociada se ejecuta
cuando se ingresa, elimina o modifica el texto en el campo. Esto permite
capturar los cambios en tiempo real a medida que el usuario interactúa con el
campo.

Aquí tienes un ejemplo de cómo se puede utilizar el evento oninput en un campo
de texto:

<input type="text" oninput="myFunction()">

<script>
  function myFunction() {
    console.log("El valor del campo ha cambiado");
  }
</script>

En este ejemplo, cada vez que el usuario ingrese, elimine o modifique el texto
en el campo de entrada, se imprimirá un mensaje en la consola del navegador.

El evento oninput es útil para realizar acciones inmediatas basadas en los
cambios del usuario, como actualizaciones en tiempo real, validaciones o
cálculos dinámicos.

Fuente
======

ChatGPT

======================
El método parseFloat()
======================

En JavaScript, el método parseFloat() se utiliza para convertir una cadena de
texto en un número de punto flotante (número decimal). Este método analiza la
cadena de texto y devuelve un número.

Ejemplo:

var numero = parseFloat("3.14");
console.log(numero); // 3.14

En el ejemplo anterior, se pasa la cadena de texto "3.14" a parseFloat(), que la
analiza y devuelve el número decimal 3.14. Si la cadena no puede ser analizada
como un número válido, parseFloat() devuelve NaN (Not a Number).

Es importante tener en cuenta que parseFloat() solo analiza el comienzo de la
cadena y detiene el análisis cuando encuentra un carácter que no es parte de la
representación de un número válido. Por ejemplo:

var numero = parseFloat("3.14 metros");
console.log(numero); // 3.14

En este caso, parseFloat() analiza la parte inicial de la cadena "3.14" y
devuelve el número 3.14. Ignora el resto de la cadena "metros" porque no es
parte de la representación de un número.

Ejemplo práctico:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Ejemplo de parseFloat</title>
</head>
<body>
<script>
  var a = "3.14";
  console.log(a); // Imprime "3.14"
  console.log(typeof a); // Imprime que es string
  console.log(parseFloat(a)); // Imprime 3.14
  console.log(typeof parseFloat(a)); // Imprime que es number
</script>
</body>
</html>

Fuente
======

ChatGPT

====================
El método parseInt()
====================

En JavaScript, el método parseInt() se utiliza para convertir una cadena de
texto en un número entero. Este método analiza la cadena de texto y devuelve un
número entero.

Aquí tienes un ejemplo de cómo usar parseInt():

var numero = parseInt("42");
console.log(numero); // 42

En el ejemplo anterior, se pasa la cadena de texto "42" a parseInt(), que la
analiza y devuelve el número entero 42. Si la cadena no puede ser analizada como
un número válido, parseInt() devuelve NaN (Not a Number).

Es importante mencionar que parseInt() también puede aceptar un segundo
parámetro opcional llamado radix, que indica la base numérica del número en la
cadena. Por defecto, se asume una base decimal (10), pero se puede especificar
otra base entre 2 y 36.

var numeroBinario = parseInt("1010", 2);
console.log(numeroBinario); // 10

var numeroHexadecimal = parseInt("FF", 16);
console.log(numeroHexadecimal); // 255

En el primer ejemplo, parseInt("1010", 2) interpreta la cadena "1010" como un
número binario y devuelve 10 en base decimal. En el segundo ejemplo,
parseInt("FF", 16) interpreta la cadena "FF" como un número hexadecimal y
devuelve 255 en base decimal.

Ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Ejemplo de parseInt</title>
</head>
<body>
<script>
var a = "42"
console.log(a); // Imprime "42"
console.log(typeof a); // Imprime que es string
console.log(parseInt(a)); // Imprime 42
console.log(typeof parseInt(a)); // Imprime que es number
</script>
</body>
</html>

Fuente
======

ChatGPT

=================================================================
Convertir un número en una cadena utilizando el método toString()
=================================================================

En JavaScript, puedes convertir un número en una cadena utilizando el método
toString(). Este método se puede aplicar a un valor numérico y devuelve una
representación de cadena del número.

Aquí tienes un ejemplo de cómo convertir un número en una cadena:

var numero = 42;
var cadena = numero.toString();
console.log(cadena); // "42"

En el ejemplo anterior, toString() se aplica al número 42 y devuelve la cadena
"42". Ahora cadena contiene una representación en forma de cadena del número
original.

Ten en cuenta que también puedes especificar la base numérica como argumento
para toString(). Por defecto, la base es 10. Aquí tienes un ejemplo que muestra
cómo especificar una base diferente:

var numero = 10;
var cadenaBinaria = numero.toString(2);
console.log(cadenaBinaria); // "1010"

var cadenaHexadecimal = numero.toString(16);
console.log(cadenaHexadecimal); // "a"

En este ejemplo, toString(2) convierte el número 10 en una cadena binaria
"1010", mientras que toString(16) lo convierte en una cadena hexadecimal "a".

Recuerda que toString() es un método disponible para valores numéricos en
JavaScript y te permite obtener una representación en forma de cadena del número
deseado.

Ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Ejemplo de toString</title>
</head>
<body>
  <script>
    var a = 42;
    console.log(a); // Imprime 42
    console.log(typeof a); // Imprime que es number
    console.log(a.toString()); // Imprime "42"
    console.log(typeof a.toString()); // Imprime que es string
  </script>
</body>
</html>

Fuente
======

ChatGPT

====================
Método toPrecision()
====================

En JavaScript, el método toPrecision() se utiliza para formatear un número con
una precisión específica, es decir, especificar el número total de dígitos
significativos que se deben mostrar. Este método devuelve una cadena que
representa el número formateado.

Aquí tienes un ejemplo de cómo usar toPrecision():

var numero = 3.14159;
var numeroFormateado = numero.toPrecision(4);
console.log(numeroFormateado); // "3.142"

Ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Ejemplo de toPrecision</title>
</head>
<body>
  <script>
    var numero = 3.14159;
    var numeroFormateado = numero.toPrecision(4);
    console.log(numeroFormateado); // "3.142"
  </script>
</body>
</html>

En el ejemplo anterior, se aplica toPrecision(4) al número 3.14159, lo cual
indica que se deben mostrar 4 dígitos significativos. Como resultado, se obtiene
la cadena "3.142", que representa el número formateado.

Es importante tener en cuenta que toPrecision() también puede redondear el
número según sea necesario para alcanzar la precisión especificada. Por ejemplo:

var numero = 12.345;
var numeroFormateado = numero.toPrecision(2);
console.log(numeroFormateado); // "12"

En este caso, toPrecision(2) indica que se deben mostrar 2 dígitos
significativos. Como resultado, el número se redondea a 12, ya que eso cumple
con la precisión requerida.

Si el número es muy grande o muy pequeño, toPrecision() puede usar la notación
exponencial para representar el número. Por ejemplo:

var numero = 123456789;
var numeroFormateado = numero.toPrecision(4);
console.log(numeroFormateado); // "1.235e+8"

En este ejemplo, toPrecision(4) muestra 4 dígitos significativos y utiliza la
notación exponencial para representar el número como "1.235e+8".

Fuente
======

ChatGPT

===================================
Truncar número de decimales exactos
===================================

Tengo la cifra 10.78745 y quiero imprimir 10.78 exactamente.

Si necesitas imprimir el número 10.78 exactamente sin redondeo y limitando el
resultado a 4 caracteres en total, puedes utilizar toFixed(4) para obtener el
número con 4 decimales y luego truncar la cadena resultante a 4 caracteres.

Aquí tienes el código actualizado:

<script>
  var a = 10.78747;
  var numeroFormateado = a.toFixed(4);
  console.log(numeroFormateado); // Imprime "10.7875"
  var truncado = numeroFormateado.substring(0, 5);
  console.log(truncado); // Imprime "10.78"
</script>

El método toFixed(4) se utiliza para formatear "a" con 4 decimales, lo cual
resulta en "10.7875". A continuación, utilizamos substring(0, 5) para tomar los
primeros 5 caracteres de la cadena, lo cual da como resultado "10.78". Esto
asegura que se obtengan exactamente los caracteres "10.78" sin redondeo.

El valor impreso en la consola será:

10.78

Recuerda que el número de caracteres en la cadena resultante incluye el punto
decimal. En este caso, se toman los primeros 5 caracteres para incluir el punto
y los dos dígitos decimales.

Otra forma
==========

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Ejemplo de truncar número de decimales</title>
</head>
<body>
  <script>
    var a = 10.78747;
    console.log(a); // Number
    let cadena = a.toString();
    console.log(cadena); // String
    let regex=/(\d*.\d{0,2})/;
    var truncado = cadena.match(regex)[0];
    console.log(truncado);
  </script>
</body>
</html>

En la primera línea, se declara la variable a con el valor 10.78747.

Luego, se imprime el valor de a en la consola, lo cual mostrará 10.78747 ya que
es un número.

En la siguiente línea, se utiliza el método toString() para convertir el valor
numérico de a en una cadena. La variable cadena almacenará la cadena resultante.

Se imprime la variable cadena en la consola, lo cual mostrará "10.78747" ya que
ahora es una cadena de texto.

A continuación, se define la expresión regular regex que tiene el patrón
(\d*.\d{0,2}). Este patrón busca una secuencia de dígitos seguida de un punto y
luego de 0 a 2 dígitos adicionales.

Luego, se utiliza el método match() junto con la expresión regular regex para
encontrar el patrón en la cadena. El resultado se almacena en la variable
truncado.

Por último, se imprime el valor de truncado en la consola, que en este caso será
"10.78" ya que el patrón encontrado cumple con las condiciones de tener hasta
dos decimales.

La salida en la consola será:

10.78747
"10.78747"
"10.78"

Fuente
======

ChatGPT

========
FormData
========

FormData es un objeto en JavaScript que te permite construir y enviar fácilmente
datos de formularios HTML como una solicitud HTTP.

Es especialmente útil cuando necesitas enviar archivos binarios (como imágenes
o documentos) o cuando necesitas enviar datos de formularios que incluyen campos
como texto, números, fechas, etc.

Puedes crear un nuevo objeto FormData vacío:

const formData = new FormData();

Luego, puedes usar el método append para agregar datos al formulario. Por
ejemplo, para agregar un campo de texto llamado "username" con el valor "john",
puedes hacer lo siguiente:

formData.append('username', 'john');

Si tienes un campo de archivo en tu formulario, como un campo de imagen, puedes
agregarlo al FormData de la misma manera. Por ejemplo, si tienes un campo de
archivo llamado "avatar" y quieres agregar un archivo llamado "avatar.jpg",
puedes hacer lo siguiente:

const fileInput = document.querySelector('input[type="file"]');
formData.append('avatar', fileInput.files[0]);

Luego, cuando estés listo para enviar el formulario, puedes usar el objeto
FormData como el cuerpo de tu solicitud HTTP. Por ejemplo, con la API Fetch:

fetch('https://ejemplo.com/api/upload', {
  method: 'POST',
  body: formData
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Esto enviará los datos del formulario al servidor como una solicitud POST. En el
lado del servidor, puedes acceder a los datos del formulario como lo harías con
un formulario HTML normal, dependiendo de tu tecnología del lado del servidor.

FormData es muy útil cuando necesitas enviar datos de formularios complejos,
especialmente cuando incluyen archivos binarios.

Fuente
======

ChatGPT

===========================================
Diferencias entre =, == y === en JavaScript
===========================================

= (Asignación): Usamos este operador para asignar un valor a una variable.

== (Igualdad débil): Compara valores, pero convierte los tipos de datos
automáticamente, lo que puede llevar a resultados inesperados.

=== (Igualdad estricta): Compara tanto el valor como el tipo de dato, asegurando
una comparación más precisa.

Ejemplos:

1. Operador de asignación =

Este operador asigna un valor a una variable.

let x = 5; // Asigna el valor 5 a la variable x
console.log(x); // Imprime: 5

2. Igualdad débil ==

Compara los valores, pero convierte los tipos de datos automáticamente si son
diferentes.

console.log(5 == '5'); // true, porque convierte la cadena '5' en número 5 antes
de comparar

console.log(true == 1); // true, porque true se convierte en 1 antes de comparar

console.log(null == undefined); // true, porque ambos son considerados "vacíos"

3. Igualdad estricta ===

Compara tanto el valor como el tipo de dato, sin conversión automática.

console.log(5 === '5'); // false, porque uno es número y el otro es cadena

console.log(true === 1); // false, porque true es booleano y 1 es número

console.log(null === undefined); // false, porque tienen tipos diferentes

Conclusión
==========

Usa = para asignar valores.

Usa == si no te importa que los tipos de datos se conviertan automáticamente.

Usa === para comparaciones precisas, donde el tipo de dato debe coincidir
también.

Fuentes
=======

ChatGPT

https://www.instagram.com/reel/C_gE1MbKWX5/?igsh=MWdvNnN5Y2luOWlidg%3D%3D

========================
Mostrar CSV en una Tabla
========================

<!DOCTYPE html>
<html>
<head>
    <title>Mostrar CSV en una Tabla</title>
</head>
<body>
    <h1>Tabla de datos CSV</h1>
    <input type="file" id="fileInput" accept=".csv">
    <table id="csvTable" border="1">
        <thead></thead>
        <tbody></tbody>
    </table>

    <script>
        document.getElementById('fileInput').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const text = e.target.result;
                    const rows = text.split("\n");

                    // Crear la tabla HTML
                    const tableHead = document.querySelector("#csvTable thead");
                    const tableBody = document.querySelector("#csvTable tbody");

                    tableHead.innerHTML = "";
                    tableBody.innerHTML = "";

                    rows.forEach((row, index) => {
                        const cols = row.split(",");
                        const tr = document.createElement("tr");

                        cols.forEach(col => {
                            const cell = document.createElement(index === 0 ? "th" : "td");
                            cell.textContent = col.trim();
                            tr.appendChild(cell);
                        });

                        if (index === 0) {
                            tableHead.appendChild(tr);
                        } else {
                            tableBody.appendChild(tr);
                        }
                    });
                };
                reader.readAsText(file);
            }
        });
    </script>
</body>
</html>

-----

El archivo csv

Nombres,Apellidos,Número de Identificación,Edad,Sexo
Juan,Pérez,12345678,30,M
Ana,Gómez,87654321,25,F
Carlos,Sánchez,23456789,40,M
Lucía,Mendoza,34567890,35,F
Miguel,Ramírez,45678901,28,M

-----

Ahora con un buscador de datos de la tabla

<!DOCTYPE html>
<html>
<head>
    <title>Buscar en datos CSV</title>
</head>
<body>
    <h1>Tabla de datos CSV con búsqueda</h1>
    <input type="text" id="searchInput" placeholder="Buscar..." onkeyup="searchTable()">
    <br>
    <br>
    <table id="csvTable" border="1">
        <thead></thead>
        <tbody></tbody>
    </table>

    <script>
        let originalData = []; // Para almacenar los datos originales del CSV

        // Función para cargar y mostrar los datos del archivo CSV
        function loadCSV() {
            fetch('data.csv')
                .then(response => response.text())
                .then(data => {
                    const rows = data.split("\n");
                    originalData = rows; // Guardar los datos originales

                    renderTable(rows);
                })
                .catch(error => console.error('Error al cargar el archivo CSV:', error));
        }

        // Función para renderizar la tabla
        function renderTable(rows) {
            const tableHead = document.querySelector("#csvTable thead");
            const tableBody = document.querySelector("#csvTable tbody");

            tableHead.innerHTML = "";
            tableBody.innerHTML = "";

            rows.forEach((row, index) => {
                const cols = row.split(",");
                const tr = document.createElement("tr");

                cols.forEach(col => {
                    const cell = document.createElement(index === 0 ? "th" : "td");
                    cell.textContent = col.trim();
                    tr.appendChild(cell);
                });

                if (index === 0) {
                    tableHead.appendChild(tr);
                } else {
                    tableBody.appendChild(tr);
                }
            });
        }

        // Función de búsqueda para filtrar la tabla
        function searchTable() {
            const query = document.getElementById('searchInput').value.toLowerCase();
            const filteredRows = originalData.filter((row, index) => {
                // Mostrar siempre la fila de encabezados
                if (index === 0) return true;

                // Verificar si la fila contiene la consulta de búsqueda
                return row.toLowerCase().includes(query);
            });

            renderTable(filteredRows);
        }

        // Llamar a la función para cargar el CSV al cargar la página
        window.onload = loadCSV;
    </script>
</body>
</html>

-----

Mostrar datos CSV con búsqueda y mensaje de no coincidencias

<!DOCTYPE html>
<html>
<head>
    <title>Mostrar datos CSV con búsqueda y mensaje de no coincidencias</title>
</head>
<body>
    <h1>Tabla de datos CSV con búsqueda</h1>
    <input type="file" id="fileInput" accept=".csv" onchange="loadCSV()">
    <br>
    <br>
    <input type="text" id="searchInput" placeholder="Buscar..." onkeyup="searchTable()">
    <br>
    <br>
    <table id="csvTable" border="1">
        <thead></thead>
        <tbody></tbody>
    </table>
    <p id="noResultsMessage" style="display: none; color: red;">No hay coincidencias.</p>

    <script>
        let originalData = []; // Para almacenar los datos originales del CSV

        // Función para cargar y procesar el archivo CSV
        function loadCSV() {
            const fileInput = document.getElementById('fileInput');
            const file = fileInput.files[0];

            if (file) {
                const reader = new FileReader();
                reader.onload = function(event) {
                    const data = event.target.result;
                    const rows = data.split("\n");
                    originalData = rows; // Guardar los datos originales

                    renderTable(rows);
                };
                reader.readAsText(file);
            } else {
                console.error('No se ha seleccionado ningún archivo.');
            }
        }

        // Función para renderizar la tabla
        function renderTable(rows) {
            const tableHead = document.querySelector("#csvTable thead");
            const tableBody = document.querySelector("#csvTable tbody");
            const noResultsMessage = document.getElementById("noResultsMessage");

            tableHead.innerHTML = "";
            tableBody.innerHTML = "";

            if (rows.length > 1) {
                noResultsMessage.style.display = "none"; // Ocultar mensaje si hay datos
                rows.forEach((row, index) => {
                    const cols = row.split(",");
                    const tr = document.createElement("tr");

                    cols.forEach(col => {
                        const cell = document.createElement(index === 0 ? "th" : "td");
                        cell.textContent = col.trim();
                        tr.appendChild(cell);
                    });

                    if (index === 0) {
                        tableHead.appendChild(tr);
                    } else {
                        tableBody.appendChild(tr);
                    }
                });
            } else {
                noResultsMessage.style.display = "block"; // Mostrar mensaje si no hay datos
            }
        }

        // Función de búsqueda para filtrar la tabla
        function searchTable() {
            const query = document.getElementById('searchInput').value.toLowerCase();
            const filteredRows = originalData.filter((row, index) => {
                // Mostrar siempre la fila de encabezados
                if (index === 0) return true;

                // Verificar si la fila contiene la consulta de búsqueda
                return row.toLowerCase().includes(query);
            });

            renderTable(filteredRows);

            // Mostrar mensaje de no coincidencias si solo hay encabezado (sin datos coincidentes)
            const noResultsMessage = document.getElementById("noResultsMessage");
            if (filteredRows.length <= 1) {
                noResultsMessage.style.display = "block";
            } else {
                noResultsMessage.style.display = "none";
            }
        }
    </script>
</body>
</html>

Fuente
======

ChatGPT

------

Web landing con efecto aparición con scroll en las secciones de la página

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web de Viajes - Landing Page</title>
    <style>
    /* Estilos CSS */
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        color: #333;
        background-color: #f9f9f9;
    }

    header {
        background-color: #333;
        color: #fff;
        padding: 1rem;
        text-align: center;
    }

    nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .logo {
        font-size: 1.5rem;
    }

    .nav-links {
        list-style: none;
        display: flex;
    }

    .nav-links li {
        margin: 0 1rem;
    }

    .nav-links a {
        color: #fff;
        text-decoration: none;
    }

    .hero {
        background-color: #007BFF;
        color: #fff;
        padding: 5rem 1rem;
        text-align: center;
    }

    .hero .cta {
        background-color: #fff;
        color: #007BFF;
        border: none;
        padding: 0.5rem 1rem;
        cursor: pointer;
        font-size: 1rem;
    }

    section {
        opacity: 0;
        transform: translateY(50px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    .visible {
        opacity: 1;
        transform: translateY(0);
    }

    .about, .services, .products, .reviews, .destinations, .contact {
        padding: 2rem 1rem;
        text-align: center;
    }

    .section-title {
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    .service-item, .product-item, .review-item, .destination-item {
        margin: 1rem 0;
    }

    footer {
        background-color: #333;
        color: #fff;
        text-align: center;
        padding: 1rem 0;
    }
</style>
</head>
<body>
    <header>
        <nav>
            <div class="logo">Viaja con Nosotros</div>
            <ul class="nav-links">
                <li><a href="#about">Sobre Nosotros</a></li>
                <li><a href="#services">Servicios</a></li>
                <li><a href="#products">Productos</a></li>
                <li><a href="#reviews">Opiniones</a></li>
                <li><a href="#destinations">Destinos</a></li>
                <li><a href="#contact">Contacto</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="hero" id="hero">
            <h1>Explora el Mundo con Nosotros</h1>
            <p>Descubre destinos increíbles y vive experiencias únicas.</p>
            <button class="cta">Reserva Ahora</button>
        </section>

        <section class="about" id="about">
            <h2 class="section-title">Sobre Nosotros</h2>
            <p>Somos una agencia de viajes apasionada por crear recuerdos inolvidables. Nuestro equipo está comprometido en ofrecer experiencias únicas adaptadas a cada viajero.</p>
        </section>

        <section class="services" id="services">
            <h2 class="section-title">Servicios</h2>
            <div class="service-item">Tours Guiados</div>
            <div class="service-item">Paquetes Todo Incluido</div>
            <div class="service-item">Asistencia de Viaje 24/7</div>
        </section>

        <section class="products" id="products">
            <h2 class="section-title">Productos</h2>
            <div class="product-item">Mochilas de Viaje</div>
            <div class="product-item">Guías de Destinos</div>
            <div class="product-item">Accesorios para Aventureros</div>
        </section>

        <section class="reviews" id="reviews">
            <h2 class="section-title">Opiniones</h2>
            <div class="review-item">"Un viaje increíble, todo estuvo perfecto. ¡Lo recomiendo!" - Juan P.</div>
            <div class="review-item">"La atención fue espectacular, hicieron de nuestro viaje una experiencia inolvidable." - María G.</div>
            <div class="review-item">"Servicio excelente y destinos maravillosos. ¡Volveré a viajar con ellos!" - Carlos R.</div>
        </section>

        <section class="destinations" id="destinations">
            <h2 class="section-title">Destinos Populares</h2>
            <div class="destination-item">París, Francia</div>
            <div class="destination-item">Bali, Indonesia</div>
            <div class="destination-item">Machu Picchu, Perú</div>
        </section>

        <section class="contact" id="contact">
            <h2 class="section-title">Contacto</h2>
            <form>
                <input type="text" placeholder="Tu nombre"><br>
                <input type="email" placeholder="Tu email"><br>
                <textarea placeholder="Tu mensaje"></textarea><br>
                <button type="submit">Enviar</button>
            </form>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 Viaja con Nosotros. Todos los derechos reservados.</p>
    </footer>
    <script>
        // Script JavaScript para efecto de aparición
        const sections = document.querySelectorAll('section');

        const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
            entry.target.classList.add('visible');
            }
        });
        }, { threshold: 0.1 });

        sections.forEach(section => {
        observer.observe(section);
        });

        // Evento para botón CTA
        document.querySelector('.cta').addEventListener('click', function() {
        alert('¡Gracias por tu interés! ¡Esperamos planear tu próximo viaje!');
        });
    </script>
</body>
</html>

-----

Web landing con efecto aparición con scroll en las secciones de la página

Ejemplo simplificado con colores

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Efecto aparición de secciones con scroll</title>
    <style>
    /* Estilos CSS */
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    section {
        opacity: 0;
        transform: translateY(50px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    .visible {
        opacity: 1;
        transform: translateY(0);
    }

    .about, .services, .products, .reviews, .destinations, .contact {
        padding: 2rem 1rem;
        text-align: center;
    }
</style>
</head>
<body>
    <main>
        <section class="about" id="about" style="background-color: red;">
            <h2 class="section-title">Sobre Nosotros</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </section>

        <section class="about" id="about" style="background-color: blue;">
            <h2 class="section-title">Sobre Nosotros</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </section>

        <section class="about" id="about" style="background-color: green;">
            <h2 class="section-title">Sobre Nosotros</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </section>

        <section class="about" id="about" style="background-color: cyan;">
            <h2 class="section-title">Sobre Nosotros</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </section>

        <section class="about" id="about" style="background-color: gray;">
            <h2 class="section-title">Sobre Nosotros</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </section>

        <section class="about" id="about" style="background-color: orange;">
            <h2 class="section-title">Sobre Nosotros</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </section>

        <section class="about" id="about" style="background-color: brown;">
            <h2 class="section-title">Sobre Nosotros</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </section>

        <section class="about" id="about" style="background-color: aqua;">
            <h2 class="section-title">Sobre Nosotros</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </section>
    </main>
    <script>
        // Script JavaScript para efecto de aparición
        const sections = document.querySelectorAll('section');

        const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
            entry.target.classList.add('visible');
            }
        });
        }, { threshold: 0.1 });

        sections.forEach(section => {
        observer.observe(section);
        });
    </script>
</body>
</html>

Fuente
======

ChatGPT

========================================================
Input tipo checkbox, guardar el valor en el LocalStorage
========================================================

<div class="card-body">
  <div class="form-check">
      <input
          class="form-check-input"
          type="checkbox"
          value=""
          id="flexCheckDefault"
          style="width: 2em; height: 2em;"
      >
      <label class="form-check-label" for="flexCheckDefault">
          Al marcar esta casilla, acepto recibir
          comunicación por SMS de Area 862 Graphics
          según nuestra política de privacidad
      </label>
  </div>
</div>

<script>
    // Selecciona el checkbox por su ID
    const checkbox = document.getElementById('flexCheckDefault');
    // Función para guardar el estado en localStorage
    checkbox.addEventListener('change', function() {
        localStorage.setItem('flexCheckDefault', checkbox.checked);
    });
    // Función para cargar el estado desde localStorage al cargar la página
    window.addEventListener('load', function() {
        const storedValue = localStorage.getItem('flexCheckDefault');
        if (storedValue === 'true') {
            checkbox.checked = true;
        }
    });
</script>

Fuente
======

ChatGPT