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 <em>javascript</em>
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);

	if (isset($json)){
		# El script será llamado varias veces:
		# Primera vez: obtener cabeceras, $json == null
		# Segunda vez: $json is set
		error_log(print_r($data, true));
	}