JavaScript

¿Que es JavaScript?

JavaScript se introdujo en 1995 como una forma de agregar programas a páginas web en el navegador Netscape Navigator. En su momento fue una idea novedosa. En los primeros días de la World Wide Web, HTML era bastante simple, y bastante fácil de aprender casi todo lo que se necesitaba saber para agrupar páginas web.

Eventos en JavaScript

99%

Lorem ipsum dolor sit amet, sed consectetur adipiscing elit.

20%

JAVASCRIPT

Lorem ipsum dolor sit amet consectetur adipiscing

Lorem ipsum dolor sit amet consectetur adipiscing

galilea somoza chacon404

título aquí

LOREM IPSUM

En Javascript existe un concepto llamado evento, que no es más que una notificación de que alguna característica interesante acaba de ocurrir, generalmente relacionada con el usuario que navega por la página.

DEFINICION EN EVENTOS

abort (onabort)Este evento se produce cuando un usuario detiene la carga de una imagen, ya sea porque detiene la carga de la página o porque realiza una acción que la detiene, como por ejemplo irse de la página.Javascript 1.1 blur (onblur)Se desata un evento onblur cuando un elemento pierde el foco de la aplicación. El foco de la aplicación es el lugar donde está situado el cursor, por ejemplo puede estar situado sobre un campo de texto, una página, un botón o cualquier otro elemento.Javascript 1.0 change (onchange)Se desata este evento cuando cambia el estado de un elemento de formulario, en ocasiones no se produce hasta que el usuario retira el foco de la aplicación del elemento. Javascript 1.0Javascript 1.0 click (onclick)Se produce cuando se da una pulsación o clic al botón del ratón sobre un elemento de la página, generalmente un botón o un enlace.Javascript 1.0 dragdrop (ondragdrop)Se produce cuando un usuario suelta algo que había arrastrado sobre la página web.Javascript 1.2 error (onerror)Se produce cuando no se puede cargar un documento o una imagen y esta queda rota.Javascript 1.1 focus (onfocus)El evento onfocus es lo contrario de onblur. Se produce cuando un elemento de la página o la ventana ganan el foco de la aplicación.Javascript 1.0 keydown (onkeydown)Este evento se produce en el instante que un usuario presiona una tecla, independientemente que la suelte o no. Se produce en el momento de la pulsación.Javascript 1.2 keypress (onkeypress)Ocurre un evento onkeypress cuando el usuario deja pulsada una tecla un tiempo determinado. Antes de este evento se produce un onkeydown en el momento que se pulsa la tecla..Javascript 1.2 keyup (onkeyup)Se produce cuando el usuario deja de apretar una tecla. Se produce en el momento que se libera la tecla.Javascript 1.2 load (onload)Este evento se desata cuando la página, o en Javascript 1.1 las imágenes, ha terminado de cargarse.Javascript 1.0 mousedown (onmousedown)Se produce el evento onmousedown cuando el uuario pulsa sobre un elemento de la página. onmousedown se produce en el momento de pulsar el botón, se suelte o no.Javascript 1.2 mousemove (onmousemove)Se produce cuando el ratón se mueve por la página.Javascript 1.2 mouseout (onmouseout)Se desata un evento onmuoseout cuando el puntero del ratón sale del área ocupada por un elemento de la página.Javascript 1.1 mouseover (onmouseover)Este evento se desata cuando el puntero del ratón entra en el área ocupada por un eolemento de la página.Javascript 1.0 mouseup (onmouseup)Este evento se produce en el momento que el usuario suelta el botón del ratón, que previamente había pulsado.Javascript 1.2 move (onmove)Evento que se ejecuta cuando se mueve la ventana del navegador, o un frame.Javascript 1.2 resize (onresize)Evento que se produce cuando se redimensiona la ventana del navegador, o el frame, en caso de que la página los tenga.Javascript 1.2 reset (onreset)Este evento está asociado a los formularios y se desata en el momento que un usuario hace clic en el botón de reset de un formulario.Javascript 1.1 select (onselect)Se ejecuta cuando un usuario realiza una selección de un elemento de un formulario.Javascript 1.0 submit (onsubmit)Ocurre cuando el visitante apreta sobre el botón de enviar el formulario. Se ejecuta antes del envío propiamente dicho.Javascript 1.0 unload (onunload)Al abandonar una página, ya sea porque se pulse sobre un enlace que nos lleve a otra página o porque se cierre la ventana del navegador, se ejecuta el evento onunload.Javascript 1.0

Lista de Eventos

Hay dos formas de añadir eventos. Una desde el html con atributos añadiendo por ejemplo un onClick() en el elemento que queremos que desencadene la acción y otra desde el javascript utilizando el método addEventListener(). No sé si hay una forma mejor u otra peor, pero es mejor separar el javascript del html y evitar el antipatrón de mezclar html y js.

formas de insertar eventos

Un evento del ratón es una acción realizada por el usuario de una interfaz de usuario utilizando el ratón de computadora (mouse). La interpretación de estas acciones mediante software desarrollado para ello, permite ejecutar una función asociada a dicha acción.

Eventos de Raton

Los eventos del teclado ( keyboard events ) se disparan cuando el usuario interactúa con el teclado. El evento keydown ( literalmente tecla abajo ) se dispara cuando el usuario presiona una tecla y continua disparándose mientras el usuario mantiene la tecla presionada.

Eventos de Teclado

Lorem ipsum dolor

La palabra java (lenguaje de programación orientado a objetos, independiente del sistema operativo usado en aplicaciones de Internet) viene del topónimo Java, una isla de Indonesia, entre Sumatra, Borneo y Bali. Esta isla produce mucho café, de ahí que java, en inglés es sinónimo de café.

¿Porque JavaScript?

Puede escribir cualquier expresión, instrucción o fragmento de código de JavaScript en la consola y se ejecuta de forma inmediata e interactiva a medida que escribe. Esto es posible porque la herramienta Consola de DevTools es un entorno REPL . REPL significa Lectura, Evaluación, Impresión y Bucle.

¿Qué necesitamos?

VENTAJAS

• Velocidad - JavaScript tiende a ser muy rápido porque a menudo se ejecuta inmediatamente en el navegador.
• Simplicidad - La sintaxis de JavaScript está inspirada por Java y es relativamente sencillo de aprender comparado a otros lenguajes de programación populares como C++.
• Popularidad - JavaScript esta por todas partes de la web, y con la llegada de Node.js, se ha incrementado su uso en backend.
• Compatibilidad- A diferencia de PHP u otros lenguajes scripting, JavaScript puede ser usado en cualquier página web.
• Interfaces sencillas- JavaScript puede ser usado para crear características como arrastrar y soltar, y componentes tales como las diapositivas, lo cual mejora enormemente la interfaz de usuario y la experiencia del sitio.
• Funcionalidad extendida- Los desarrolladores pueden extender la funcionalidad de las páginas web mediante fragmentos de JavaScript para un tercer grupo de extensiones como Greasemonkey.
• Versatilidad- Hay muchos métodos para usar JavaScript mediante servidores Node.js. Si tú estas en bootstrap Node.
• Actualizaciones- Desde que la llegada de ECMAScript 5 (la especificación escrita en que se basa JavaScript), ECMA International se ha dedicado a actualizar JavaScript anualmente.

• Seguridad Client-Side- Desde que el código en JavaScript es ejecutado en el client-side, bugs y descuidos pueden ser explotados algunas veces para malos propósitos.
• Soporte del navegador- Mientras server-side script siempre produce el mismo resultado, algunas veces diferentes navegadores interpretan el código JavaScript de manera distinta.

Ventajas y Desventajas

if( condicion [else] [instrucciones]) Esta es sin duda la instrucción más utilizada en programación. En efecto, raro es el programa, por pequeño que sea, que no la contenga al menos una vez. Su funcionamiento es muy simple: es como un interruptor. Evalua un expresión y si el resultado es true realiza las acciones que tenga programadas, y si es false realiza otras acciones alternativas, o no hace nada, según convenga. Por ejemplo: var x = 2 if (x == 3) { document.write("x vale 3") }En este caso, al no devolver true la condición, no se obtiene ningún resultado. Si queremos una alternativa en el caso de false, se escribe: var x = 2 if (x == 3) { document.write("x vale 3") } else { document.write("x no vale 3") }Y se obtiene: x no vale 3 Si la acción a realizar es breve, también puede escribirse en una sola línea: var x = 2 if (x == 3) document.write("x vale 3") Pueden anidarse cuantas instrucciones if sea preciso. Por ejemplo, si se escribe: var x = 4 if (x < 3) if (x == 2) document.write("x vale 2") if (x == 1) document.write("x vale 1") else if (x == 3) document.write("x vale 3") if (x == 4) document.write("x vale 4") if (x == 5) document.write("x vale 5") Y se obtiene: x vale 4 Cuando escribas anidamientos, recuerda que si las instrucciones a realizar tienen más de una línea, hay que escribir las correspondientes llaves { } para cada grupo de instrucciones en cada if, tal como se ve en el primer y segundo ejemplos. for() Esta instrucción crea un bucle, controlado por tres expresiones separadas por ; , y seguidas de un bloque de otras instrucciones escritas dentro de un par de llaves { } que se ejecutarán con cada ciclo del bucle. La sintaxis es: for([contador;] [condicion;] [incremento]) { ..... instrucciones ....} La primera expresión de los argumentos, contador, define el contador del bucle y lo inicializa. La segunda, condicion, es donde se declara la condición o condiciones que se tienen que cumplir para que el bucle termine. El bucle seguirá ejecutándose hasta que la expresión devuelva true. Y por último, incremento indica el incremento que se aplicará al contador en cada paso. Por ejemplo: for(var x = 0; x < 5; x++) {document.write(x)} Se obtiene: 01234 Analicemos el ejemplo. La primera expresión de los argumentos, crea e inicializa a cero el contador x: var x = 0;. La segunda establece que el bucle rodará mientras x sea menor de 5: x < 5;. Y la tercera incrementa en 1 el contador con cada ciclo del bucle: x++. Como ya se ha dicho en el apartado de los operadores de JavaScript, x++ es equivalente a x = x+1 for( in ) Al igual que la anterior, crea un bucle, pero esta vez solamente sirve para listar las propiedades de un objeto. Por ejemplo: Mi_array = new Array(2)Mi_array[0] = "A"; Mi_array[1] = "B"; Mi_array[2] = "C" for(var x in Mi_array) {document.write("Mi_array" + x + " = " + Mi_array[x] + "<br>" )} Se obtiene: Mi_array0 = AMi_array1 = BMi_array2 = C Fíjate en que, a diferencia de la anterior, no es necesario inicializar el contador con ningun valor (solamente crearlo) ni tampoco indicar el incremento ni el número de repeticiones del bucle, que se repetirá las veces que indique el índice del objeto. while( condicion) Es parecida a for(), pero en lugar de ejecutar el bucle hasta que se cumple la condición, lo hace mientras (while) se mantenga el resultado inicial de la condición, es decir, lo mismo pero al revés. Por ejemplo: var x = 0 while( x < 3 ) { x++ document.write("x = " + x + "<br>") } Se obtiene: x = 1x = 2x = 3 Como puedes ver, el bucle se ejecuta mientras x es menor que 3, no siendo necesario definir en la propia instrucción el incremento del contador, que está dentro de las instrucciones ejecutadas por el bucle. Tanto while() como for() pueden utilizar una instrucción que permite salir del bucle, si conviene, antes de que se cumplan todas las repeticiones programadas en el contador. Se trata de break. También pueden emplear la instrucción continue para alterar el contador sin detenerlo ni salir del bucle. Veamos un ejemplo de uso de continue: var x = 0 var y = 0 while (i < 5) { x++ if (x == 3) continue y += x document.write("x = " + x + " y = " + y + "<br>") } Se obtiene: x = 1 y = 1x = 2 y = 3x = 4 y = 7x = 5 y = 12 Recuerda que x++ es equivalente a x = x + 1, lo mismo que y += x equivale a y = y + x. Sabiendo esto, puedes ver claramente lo que hace el bucle en los dos primeros ciclos. Al llegar a la tercera línea, en la que x = 3 vemos que hay un salto. En efecto: continue ha entrado en acción y el control del bucle ha saltado desde la instrucción comenzando un nuevo ciclo sin ejecutar las dos instrucciones que restaban, y que habrían aportado x = 3 y = 6. Luego el bucle termina normalmente hasta que x = 5, pero los valores de y se han alterado respecto a los que serían sin actuar continue. De forma parecida trabaja break, pero en este caso en lugar de provocar un salto en el bucle y continuar hasta el final previsto, el salto se hace fuera del bucle, quedando éste interrumpido: var x = 0 while (i < 5) { x++ if (x == 3) break document.write("x = " + x + "<br>") } Se obtiene: x = 1 x = 2 Como puedes ver, solamente se han completado dos ciclos del bucle de los cinco previstos. Estas dos instrucciones pueden emplearse de la misma forma con la instrucción for(). this Es una palabra reservada que se utiliza para referirse al objeto actual en el que se está ejecutando el código. Sea por ejemplo un formulario en el que el cliente debe escribir un valor, y para comprobar que el valor es el correcto escribimos una función de verificación: <HTML> <HEAD> <TITLE>Pruebas JavaScript</TITLE> <SCRIPT LANGUAGE="JavaScript"> function validar(numero) { if (numero.indexOf("2") != -1) return true; else { alert('No has escrito un 2'); return false; } } </SCRIPT> </HEAD> <BODY> <FORM NAME="Formulario" METHOD="GET" ACTION " " onSubmit="return validar(this.campo1.value)"> Escribe un 2: <INPUT NAME="campo1" TYPE="text"><BR> <INPUT TYPE="submit" VALUE="Validar"> </FORM> </BODY> </HTML> Fíjate en la instrucción this.campo1.value En realidad lo que hace this es sustituir a la referencia real que sería: document.Formulario.campo1.value with Esta instrucción sirve como referencia a un objeto, previamente declarado como objeto por defecto, para evitar tener que referenciarlo en un conjunto repetitivo de instrucciones. Por ejemplo, para obtener unos valores matemáticos: var a, b, c var r=10 a = Math.PI * r * r b = r * Math.cos(Math.PI) c = r * Math.sin(Math.PI/2) Como puedes ver, hay que hacer referencia del objeto Math en todas las instrucciones. En cambio, si se emplea with, simplemente se escribe: var a, b, c var r=10 with (Math) { a = PI * r * r b = r * cos(PI) c = r * sin(PI/2) }

Instrucciones más utilizadas en Javascript