Apuntes de Javascript

Cabecera

El archivo .html debe hacer referencia al script .js y esto se logra añadiendo a la cabecera del .html esta línea:


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

Funciones útiles

Ejecutar tras la carga del DOM


document.addEventListener('DOMContentLoaded', function(){ 
  // Tu código aquí
}, false);

Detener el hilo de ejecución por un tiempo


function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function myFunción(){
  await sleep(100);
}

SVG

La librería Svg completa

Crear el objeto

Contenedor del lienzo en el html será

<svg id="canvas1" width="800px" height="500px">
// Ejemplo para crear el lienzo en javascript
async function main(){
  s = new Svg("canvas1", 800, 500);
  s.drawAxis();
  s.drawGrid();
}
Dibujar objetos en el lienzo
  
// Prototipos de métodos de la clase Svg
addCircle(circleId, cx, cy, r, fillColor, strokeWidth = 0, strokeColor = null);
addLine(lineId, x0, y0, x1, y1, color, width);

En este ejemplo se crea un punto llamado p1 en las coordenadas x, y de radio 4 y de color rojo

s.addCircle("p1", x, y, 4, "red");

Mover dos puntos asincrónicamente. Uno se moverá en círculos y el otro en línea recta


var o1, o2;
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function mover1(){
  for(var i=0; i<200; i+=0.1){
    var p = 50*Math.sin(i/10.0);
    o1.setAttribute("cx", s.px(50*Math.cos(i/10.0)));
    o1.setAttribute("cy", s.py(50*Math.sin(i/10.)));
    await sleep(1);
    console.log("1");
  }
}

async function mover2(){
  for(var i=0; i<100; i++){
    console.log("2");
    o2.setAttribute("cx", s.px(-i));
    await sleep(100);
    console.log("2");
  }
}

document.addEventListener('DOMContentLoaded', function(){ 
  s = new Svg("canvas1", 800, 500);
  s.drawAxis();
  s.drawGrid();
  o1  = s.addCircle("c1", 0, 0, 5, "red");
  o2  = s.addCircle("c2", 0, 0, 5, "blue");

  mover1();
  mover2();

}, false);

Enviar post mediante ajax

Creamos dos ficheros, una será un .html en el cliente y un .php en el servidor.

Cliente

<!-- Cliente HTML -->
<!DOCTYPE html>
<html>
<head>
</head>
<script>
document.addEventListener('DOMContentLoaded', function(){ 
	document.getElementById("b").addEventListener("click", function(){
	let obj_post = {
		nombre: document.getElementById("campo1").value,
		apellido: document.getElementById("campo2").value
	}
	let xhr = new XMLHttpRequest(); 
	xhr.open("POST", "http://192.168.1.118:8080/ajax_post.php");
	xhr.setRequestHeader("Content-Type", "application/json");
	xhr.send(JSON.stringify(obj_post));
	});
}, false);
</script>

<body>
	<form>
		<input id="campo1" type="text" value="Ambrosio">
		<input id="campo2" type="text" value="Benavente">
		<input id="btn" type="button" value="Enviar">
	</form>
</body>
</html>

Servidor

<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: content-type');
header('Access-Control-Allow-Methods: POST');

$json = file_get_contents('php://input');
$data = json_decode($json);

error_log(print_r($data, true));