JavaScript

Ramiro Estigarribia Canese

¿Qué es JavaScript?➔ Es un lenguaje interpretado que se embebe en una

página web HTML. ➔ Permite extender las capacidades del lenguaje

HTML. ➔ Las instrucciones las analiza y procesa el

navegador en el momento que deben ser ejecutadas.

<script> document.write('Hola Mundo');</script>

EjemploPregunta antes de eliminar

<script>function confirmar() { if(confirm("Está seguro?")) return true; else return false; }</script>

<form action=si.php onsubmit='return confirmar()'><input type=submit></form>

Variables y Mostrar Datos➔ Las variables deben comenzar por una letra,

pudiendo haber además dígitos entre los demás caracteres.

➔ Al igual que en PHP, no es obligatorio declarar las variables.

<script> edad=24; document.write('Diego Martinez'); document.write('<br>'); document.write(edad);</script>

Variables y Mostrar Datos <script> nombre='Juan'; edad=10; altura=1.92; casado=false; document.write(nombre); document.write('<br>'); document.write(edad); document.write('<br>'); document.write(altura); document.write('<br>'); document.write(casado); </script>

prompt: Entrada de datosPara la entrada de datos por teclado tenemos la función prompt. Cada vez que necesitamos ingresar un dato, aparece una ventana donde cargamos el valor.

<script> nombre=prompt('Ingrese su nombre:',''); edad=prompt('Ingrese su edad:',''); document.write(nombre); document.write(' edad:'); document.write(edad);</script>

Sumar, multiplicar y concatenar.

<script> valor1=prompt('Ingrese primer número:',''); valor2=prompt('Ingrese segundo número',''); suma=parseInt(valor1)+parseInt(valor2); producto=parseInt(valor1)*parseInt(valor2); //Con ParseInt se convierten las variables en números document.write('La suma es '+suma+'<br>'); document.write('El producto es '+producto);</script>

➔ Si queremos sumar debemos llamar a la función parseInt. ➔ 1 + 1 sin utilizar parseInt: el resultado es 11, ya que el

operador + concatena las dos cadenas.

Instrucción IFAprobado según Nota<script> nombre=prompt('Ingrese nombre:',''); nota=prompt('Ingrese su nota:',''); if (nota>=2) { document.write(nombre+' ha aprobado '+nota); }</script>

➔ El operador + concatena los textos.

Estructura repetitiva whilePermite ejecutar una instrucción o un conjunto de instrucciones varias veces.

<script> x=1; while (x<=10) { document.write(x); document.write('<br>'); x=x+1; }</script>

➔ Las sentencias se repiten.➔ El test de condición está

antes de cada repetición.

Estructura repetitiva for➔ Cualquier problema que requiera una estructura

repetitiva se puede resolver con while y for. ➔ La estructura for es más práctica en algunas

situaciones.

<script> for (x=1;x<=10;x++) { document.write(x); document.write('<br>'); }</script>

Obtener ubicación Geolocalización➔ El objetivo es determinar tanta exactitud como sea

posible la ubicación real (longitud y latitud) del usuario. <p>Click para obtener las coordenadas:</p><button onclick="getLocation()">Obtener</button><script>function getLocation() { navigator.geolocation.getCurrentPosition(Ubicacion); }function Ubicacion(lugar) { document.write("Latitud: " + lugar.coords.latitude + "<br>"); document.write("Longitud: " + lugar.coords.longitude); } </script>

Integrar con Google MapsLatitud: -25.282197Longitud: -57.5984002<a href=https://www.google.com.py/maps/@-25.28219,-57.5984002>

Ejemplo: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_geolocation_map

Comandos útiles➔ Atrás y Adelante del navegador:<a href="javascript:history.go(-1)">Atrás</a><a href="javascript:history.go(1)">Adelante</a>➔ Cerrar la ventana o pestaña del navegador:<a href="javascript:close()">Cerrar ventana</a>➔ Enviar una página a la impresora:<a href="javascript:print()">Imprimir</a>➔ Redireccionar a otra página:<input type=button onClick=window.location="http://www.abc.com.py" value=ABC>

Más cómandos útiles: http://www.webexperto.com/articulos/javascript/pequenos-trucos-de-java-script-82/

FuncionesEn programación es muy frecuente que un procedimiento de cálculo tenga que repetirse varias veces, lo cual implica que se tenga que escribir tantos grupos de aquellas sentencias como veces aparezca dicho proceso.

La herramienta más potente con que se cuenta para facilitar, reducir y dividir el trabajo, es escribir aquellos grupos de sentencias una sola y única vez en forma de función.

Funciones. Mostrar Números entre.<script> function mostrarComprendidos(x1,x2) { for(inicio=x1;inicio<=x2;inicio++) { document.write(inicio+' '); } } valor1=prompt('Ingrese valor inferior:',''); valor2=prompt('Ingrese valor superior:',''); mostrarComprendidos(valor1,valor2);</script>

Operadores lógicos: && ||

➔ El operador && se emplea cuando las dos condiciones deben ser verdaderas.

➔ Con el operador ||, solo es necesario que una condición sea verdadera.

<script> dia=prompt('Ingrese día:',''); mes=prompt('Ingrese mes:',''); if (mes==1 || mes==2 || mes==3) { document.write('corresponde al primer trimestre.'); }</script>

Función: Verificar el botón presionado.<meta charset=UTF-8><script> function presion1() { alert('Se presionó el botón 1'); } function presion2() { alert('Se presionó el botón 2'); } function presion3() { alert('Se presionó el botón 3'); }</script><form> <input type=button onClick=presion1() value=Boton1> <input type=button onClick=presion2() value=Boton2> <input type=button onClick=presion3() value=Boton3></form>

➔ Permite Acentos y Ñ.

Archivo JavaScript externo .jsConsiste en agrupar funciones en un archivo separado.Ventajas:1. Reutilización de funciones.

No tenemos que copiar y pegar sucesivamente las funciones en las páginas en las que necesitamos.

2. Facilita el mantenimiento de las funciones al encontrarse en archivos separados.

3. Nos obliga a ser más ordenados.

Ejemplo:<script src=funciones.js></script>

Highcharts JS➔ Es una biblioteca de gráficos HTML5/JavaScript con

gráficos intuitivos, interactivos del lado del usuario.➔ Tiene soporte para gráficos de columnas, barras,

circulares, de dispersión, patrones angulares, etc.

¿Cómo utilizar?1. Descargar del sitio oficial: http://www.

highcharts.com/ 2. Descomprimir en /var/www/html.3. Acceder a la carpeta “examples”,

y elegir el gráfico que necesitamos.4. Reutilizar el código, adaptando a

nuestro proyecto.

Gráfico de Torta (pie basic)El objetivo es encontrar la parte que nos interesa:

series: [ { type: 'pie', name: 'Browser share data: [ ['Firefox', 45.0], ['IE', 26.8], { name: 'Chrome', y: 12.8, sliced: true, selected: true }, ['Safari', 8.5], ['Opera', 6.2], ['Others', 0.7] ]

¿Qué es Canvas? <canvas>➔ Es un elemento HTML5/Javascript, que permite la

generación de gráficos por medio de programación.➔ Permite generar gráficos, animaciones y efectos de

forma dinámica.➔ Posee dos atributos width (ancho) y height (alto), el

tamaño por defecto es 160x160.➔ El dibujo se hace mediante el API Canvas 2D.

<canvas id="ejemplo" width="150" height="150"> </canvas>

Ejemplo: Cuadro Amarillo sobre fondo gris.

<canvas id="canvas" width="300" height="150" style="background:gray"></canvas><script> canvas=document.getElementById('canvas'); ctx=canvas.getContext('2d'); ctx.fillStyle='yellow'; ctx.fillRect(50,50,100,60);</script>

Mismo ejemplo con Funciones.<canvas id="canvas" width="300" height="150" style="background:gray"></canvas><script>window.addEventListener('load',init,false);function init(){ canvas=document.getElementById('canvas'); ctx=canvas.getContext('2d'); paint(ctx);}

function paint(ctx){ ctx.fillStyle='yellow'; ctx.fillRect(50,50,100,60);}</script>

Movimiento

<canvas id="canvas"></canvas><script>window.addEventListener('load',init,false);x=50,y=50;

function init(){ canvas=document.getElementById('canvas'); ctx=canvas.getContext('2d'); run();}

function run(){ requestAnimationFrame(run); act(); paint(ctx);}

function act(){ x+=2; if(x>canvas.width) x=0;}function paint(ctx){ ctx.fillStyle='#000'; ctx.fillRect(0,0,canvas.width,canvas.height); ctx.fillStyle='#0f0'; ctx.fillRect(x,y,10,10);}window.requestAnimationFrame=(function(){ return window.requestAnimationFrame })();</script>

https://paste.ee/p/LMhrd

Mover un objeto en pantalla.➔ El rectángulo ya se mueve por el lienzo.➔ Para interactuar debemos indicarle a dónde queremos que vaya. ➔ Necesitamos primero una variable dónde guardar la tecla

presionada.var lastPress=null;

Y agregar un evento que que almacene la tecla presionada: document.addEventListener('keydown',function(evt){ lastPress=evt.keyCode;},false)

Mover un objeto en pantalla.

<canvas id="canvas"></canvas><script>window.addEventListener('load',init,false);var canvas=null,ctx=null;var x=50,y=50;var lastPress=null;var pause=true;dir=0; //dirección en pantallaKEY_ENTER=13;KEY_LEFT=37;KEY_UP=38;KEY_RIGHT=39;KEY_DOWN=40;

function act(){ if(!pause){ if(lastPress==KEY_UP) dir=0; if(lastPress==KEY_RIGHT) dir=1; if(lastPress==KEY_DOWN) dir=2; if(lastPress==KEY_LEFT) dir=3; if(dir==0) // Move Rect y-=10; if(dir==1) x+=10; if(dir==2) y+=10; if(dir==3) x-=10;

https://paste.ee/p/bEc2C

Interactuando con otros elementos.➔ Para saber si dos elementos “se están tocando”.➔ No solo nos basta saber su posición XY, también

necesitamos conocer el alto y ancho de los elementos.var player=new Rectangle(40,40,10,10);

➔ Si ambos están en una intersección: agregaremos un punto, y cambiaremos la posición de la comida a otro lugar al azar.var score=0;

if(player.intersects(food)){ score++; food.x=random(canvas.width/10-1)*10; food.y=random(canvas.height/10-1)*10; }

https://paste.ee/p/2CpOz

Interactuando con varios elementos.➔ Creamos una variable de tipo arreglo llamada “wall”:wall=new Array();

➔ Ahora, agregaremos cuatro elementos:wall.push(new Rectangle(100,50,10,10));

wall.push(new Rectangle(100,100,10,10));

wall.push(new Rectangle(200,50,10,10));

wall.push(new Rectangle(200,100,10,10));

➔ Para dibujar los elementos, recorreremos los elementos del arreglo a través de un “for”:

ctx.fillStyle='#999'; for(var i=0,l=wall.length;i<l;i++){ wall[i].fill(ctx); }

https://paste.ee/p/bvFzE

Imagen y Sonido➔ 2 imágenes (“body.png” y “fruit.png”) se guardan en una

carpeta llamada “assets”, dentro de la misma carpeta que nuestro código.

var iBody=new Image(),iFood=new Image();iBody.src='assets/body.png';iFood.src='assets/fruit.png';

➔ Para mover el cuerpo en forma de serpiente, este ciclo “for”:// Move Body for(var i=body.length-1;i>0;i--){ body[i].x=body[i-1].x; body[i].y=body[i-1].y; }

Imagen y Sonido➔ Cada vez que comamos una fruta, reproduciremos un

sonido, y al morir, reproduciremos otro.var aEat=new Audio(),aDie=new Audio();

aEat.src='assets/chomp.oga';

aDie.src='assets/dies.oga';

➔ Para reproducirlos, los agregamos en las área correspondiente (con la manzana y con el cuerpo), así: aEat.play(); aDie.play();

http://sites.google.com/site/juegoscanvas/body.pnghttp://sites.google.com/site/juegoscanvas/fruit.pnghttp://sites.google.com/site/juegoscanvas/chomp.ogahttp://sites.google.com/site/juegoscanvas/dies.oga https://paste.ee/p/xEBzP

Mover mientras se presiona tecla.➔ Deseamos mover solo cuando una tecla es presionada.➔ Crearemos una variable de tipo arreglo, donde guardaremos

todas las teclas presionadas: var pressing=[];

➔ Guardamos en la posición equivalente a la tecla presionada, el valor booleano true.

document.addEventListener('keydown',function(evt){ lastPress=evt.keyCode; pressing[evt.keyCode]=true; },false);

Cuando la tecla es liberada, cambiamos a falso.document.addEventListener('keyup',function(evt){ pressing[evt.keyCode]=false; },false); https://paste.ee/p/eYcCX