Recetas Javascript¶

Hacer debug¶

Para hacer debug es suficiente con poner:

debugger;

en el punto que queramos hacer el debug. Después se puede hacer desde las utilidades de desarrollador del navegador (++F12++)

Javascript¶

Cómo poner acentos en alerts¶

Se hace mediante unicode:

u00e1 -> á
u00e9 -> é
u00ed -> í
u00f3 -> ó
u00fa -> ú
u00c1 -> Á
u00c9 -> É
u00cd -> Í
u00d3 -> Ó
u00da -> Ú
u00f1 -> ñ
u00d1 -> Ñ

Recalcular automáticamente la altura del iframe¶

function recalculaAltoIframe(objetoIframe) {
    objetoIframe.style.height = objetoIframe.contentWindow.document.body.scrollHeight + "px";
    objetoIframe.style.minHeight = objetoIframe.contentWindow.document.body.scrollHeight + "px";
}

Foreach¶

Implementa foreach en JavaScript

// =========
// VERSION 1
// =========
function myForEach(arr, func){
  for (var i = 0; i < arr.length; i++) {
    func(arr[i]);
  }
}

var colors = ["red", "orange", "yellow", "green", "blue", "PURPLE"];
myForEach(colors, function(color){
  console.log(color);
});

// =========
// VERSION 2 
// =========
Array.prototype.myForEach = function(func){
  for(var i = 0; i < this.length; i++) {
   func(this[i]);
  }
};

var colors = ["red", "orange", "yellow", "green", "blue", "PURPLE"];
colors.myForEach(function(color){
  console.log(color);
});

jQuery¶

Investigación y Ciencia¶

Obtener el temario de una revista de Investigación y Ciencia (para poder guardarlo en la wiki) desde su web

// Obtener el temario de una revista de Historia y Vida con jQuery
//Ir al temario de la revista desde www.historiayvida.com
//y en la consola de java escribir:
$(".cover-body strong").each(function(indice, elemento) {
    console.log("  * " + $(elemento).text());
});

Historia y Vida¶

Obtener el temario de una revista de Historia y Vida (para poder guardarlo en la wiki) desde su web

// Obtener el temario de una revista de Historia y Vida con jQuery
//Ir al temario de la revista desde www.historiayvida.com
//y en la consola de java escribir:
$(".cover-body strong").each(function(indice, elemento) {
    console.log("  * " + $(elemento).text());
});

Ejemplo de lista ToDo con Html, JavaScript (jquery) y Css¶

todos.css

.done {
  text-decoration: line-through;
  opacity: 0.5;
}

.selected {
  color: green;
}

todos.html

<!DOCTYPE html>
<html>
<head>
  <title>Todo List Demo</title>
  <link rel="stylesheet" type="text/css" href="todos.css">
</head>
<body>

<ul>
  <li>Wash Cat</li>
  <li>Feed Cat</li>
  <li>Feed Cat to Dog</li>
</ul>

<script type="text/javascript" src="todos.js"></script>

</body>
</html>

todos.js

var lis = document.querySelectorAll("li");

for(var i = 0; i < lis.length; i++){
  lis[i].addEventListener("mouseover", function(){
    this.classList.add("selected");
  });

  lis[i].addEventListener("mouseout", function(){
    this.classList.remove("selected");
  });

  lis[i].addEventListener("click", function(){
    this.classList.toggle("done");
  });
}

Angular¶

Cómo acceder a una aplicación angular desde otra red¶

Para poder acceder a una aplicación ejecutada con ng desde otra ip, se debe lanzar la aplicación con la opción --host 0.0.0.0.

Además para que permita acceder desde otra red (desde internet al nuc) hay que añadir --disable-host-check

ng serve --host 0.0.0.0 --disable-host-check

Última actualización: June 9, 2022