15.JavaScript Avanzado

JavaScriptAvanzado

Ramiro Estigarribia Canese

Comandos útilesIr una página hacia atrás:<input type=button value=Atras onclick=window.history.go(-1)>

Imprimir una página:<input type=button value=Imprimir onclick=window.print();>

Redireccionar a otra página:<input type=button onClick=window.location="http://www.abc.com.py" value=Boton1>

Estructura repetitiva for

Cualquier problema que requiera una estructura repetitiva se puede resolver empleando la estructura while.

La estructura for es más práctica en algunas situaciones.

Sintaxis:for (<Inicio> ; <Condición> ; <Incremento>){ <Instrucciones>}

Mostrar números.Del 50 al 60

<script> var f; for(f=50;f<=60;f++) { document.write(f+" "); }</script>

Funciones

En 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.

Función: Mostrar Número entre 2 valores.<script> function mostrarComprendidos(x1,x2) { var inicio; for(inicio=x1;inicio<=x2;inicio++) { document.write(inicio+' '); } } valor1=prompt('Ingrese valor inferior:',''); valor2=prompt('Ingrese valor superior:',''); mostrarComprendidos(valor1,valor2);</script>

Función que recibe: 2 números y retorna el mayor.

<script> function retornarMayor(x1,x2) { if (x1>x2) { return x1; } else { return x2; } }valor1=prompt('Ingrese primer valor:','');valor2=prompt('Ingrese segundo valor:','');may=retornarMayor(valor1,valor2);document.write('El mayor es :'+may);</script>

Operadores lógicos: && (y) || (o)

El operador &&, se lo lee como "Y". Se emplea cuando en una estructura condicional se disponen dos condiciones, y las dos condiciones deben ser verdaderas.

El operador ||, se lee como "O"Con que una de las dos condiciones sea Verdadera alcanza para que el resultado de la condición compuesta sea Verdadero.

EjemploComprobar trimestre

<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>

Archivo JavaScript externo .js

El lenguaje JavaScript permite agrupar funciones y disponerlas en un archivo separado a la página HTML.

Esto trae ventajas:1. Reutilización de funciones en muchos archivos. 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>

Acceder a la CamaraHTML5 + Javascript

Hasta hace poco la única forma de acceder a la cámara web por medio de extensiones específicas para el navegador. (solo en Windows).

La llegada del HTML5 ha ocasionado un aumento del acceso a dispositivos de hardware.

La geolocalización (GPS), el API de orientación (acelerómetro), WebGL (GPU) y el API de audio web (hardware de audio) son ejemplos perfectos.

Acceder a la CamaraHTML5 + Javascript

<script src=jquery-1.8.3.js></script><script src=camara.js></script><input id=botonIniciar type=button value=Iniciar></input><br><input id=botonDetener type=button value=Detener></input><br><input id=botonFoto type=button value=Foto></input><br><video id=camara autoplay controls></video><br><br><canvas id=foto></canvas>

Acceder a la CamaraHTML5 + Javascript

Ejercicios

1. Realizar un programa que muestre la tabla de multiplicar del 5 (del 5 al 50).

2. Realizar un programa que lea los lados de 1 triángulo, e informar: ¿Qué tipo de triángulo es: equilátero (tres lados iguales), isósceles (dos lados iguales), o escaleno (ningún lado igual)?

3. Elaborar una función a la cual le enviemos tres números enteros y muestre el menor.

4. Realizar un programa que pida cargar una fecha cualquiera (dia y mes por separado). Luego verificar si dicha fecha corresponde a Navidad.