Entradas

Mostrando entradas de mayo, 2012

Archivo .Js(externo) en JavaScript

Imagen
Teniendo un archivo externo se puede organizar funciones que puede ser reutilizadas por otras acciones dentro de algún archivo HTML, es una forma de centralizar todas las funciones, sintaxis, o cualquier otro tipo de programación en un archivo .js. Ejercicio No.1 Confeccionar una funcion en un archivo externo (*.js) que solicite la carga del nombre de un usuario y lo retorne. Luego, otra función que permita ingresar una clave y la muestre en la página. Archivo HTML <html> <head> <title>Problema</title> <script language="javascript" type="text/javascript" src="funciones.js"></script> </head> <body> <script language="javascript"> Nombre(); Clave(); </script> </body> </html> Archivo JavaScript(.js) function Nombre() { var nom; nom=prompt('Ingrese Nombre',''); alert(nom); } function Clave() { var cla; cla=prompt(...

Screen en JavaScript

Imagen
Es un elemento que identifica propiedades de la pantalla del navegador. availHeight : El alto de la pantalla en pixeles disponible para el navegador. availWidth : El ancho de la pantalla en pixeles disponible para el navegador. colorDepth : Representa el número de bits usados para representar los colores. height : El alto de la pantalla en pixeles. width : El ancho de la pantalla en pixeles. El siguiente programa muestra el valor almacenado en las cinco propiedades que tiene el objeto screen: <html> <head> <title>Problema</title> </head> <body> <script language="javascript"> document.write('Valores de las propiedades del objeto screen:<br>'); document.write('availHeight :' + screen.availHeight + '<br>'); document.write('availWidth :' + screen.availWidth + '<br>'); document.write('height :' + screen.height + '<br>'); document.write(...

Navigator en JavaScript

Imagen
Contiene información sobre el navegador web. La implementación de este objeto varía entre navegadores (IExplorer, FireFox, Opera, etc.) Las propiedades comunes a estos navegadores son: appName : almacena el nombre oficial del navegador. appVersion : almacena la versión del navegador. cookieEnabled : almacena si las cookies están activas en el navegador. platform : almacena la plataforma donde el navegador se está ejecutando. plugins : almacena un array de los plugin cargados en el navegador. Este pequeño programa muestra los valores de las propiedades antes anunciadas: <html> <head> <title>Problema</title> </head> <body> <script language="javascript"> document.write('Valores de las propiedades del objeto navigator:<br>'); document.write('appName :' + navigator.appName + '<br>'); document.write('appVersion :' + navigator.appVersion + '<br>'); document.write(...

History en JavaScript

Imagen
History es una de los elementos que lo contiene el objeto Window en JavaScript, por medio de este elemento tiene la misma funcionalidad que la opción "Atrás", "Adelante" en un navegador de internet, consta de tres parametros: window.history.back();       =    Especifica hacia "Atrás" en el navegador. window.history.forward();   =    Especifica hacia "Adelante" en el navegador window.history.go();           =    Especifica cualquiera de las últimas dos parámetros anteriores. Ejercicio No. 1 Confeccionar tres páginas. Disponer tres hipervínculos, uno en cada página. Configurar el primer hipervínculo con la dirección de la segunda página, el hipervínculo de la segunda página debe cargar la tercera página y por último, la tercera página debe retroceder a la primera página mediante el método go del objeto history (pasándole un número negativo como parámetro). Repuesta: Hoja No.1 <html> <he...

Convertidor de Mp4 a Mov

Imagen
Una forma de convertir un video de mp4 a mov, es con el software Oxelon . Dentro de las opciones existe una de ellas que es "Media Format" en esta seleccionas que formato es el que convertirás el archivo de video, si seguimos observando un poco abajo encontrarás otra llamada "Select the path for saving" donde especificas la ruta de salida por donde encontrarás el resultado obtenido y por último más abajo de esta opción se identifica un botón llamado "AddFiles" donde agregas los archivos de video que quieres convertir.

Location en JavaScript

Imagen
Location: Sirve para direccionar a una pagina web ó mejor dicho redireccionar. Para poner en practica lo que es "location" se dará un breve ejemplo de ello. Ejemplo: Este consta de ingresar por medio de un hipervinculo, que le aparecerá una ventana preguntando si le gusta Google, si presiona que si lo manda a la pagina de Google, de lo contrario le mostrará un mensaje. Respuesta: <html> <head> <title>Problema</title> </head> <body> <script language="javascript">  function ingresar() { var url; url = window.confirm('Le gusta Google') if(url==true) window.location='http://www.google.com'; else window.alert('Cuando le guste Google le puede dar Aceptar'); } </script> <a href="javascript:ingresar()">Ingresar</a> </body> </html> Ejercicio No.1 Confeccionar una página que tenga un hipervínculo. Cuando se presione dic...

Window en JavaScript

Imagen
La palabra Window dentro de JavaScript se identifica como el objeto principal o con mayor predominante dentro de una pagina web, esto por su función en sus diferentes eventos, etiquetas, funciones, etc. Por ejemplo si queremos imprimir la palabra "Hola" seria de esta manera: document.write("Hola"); pero también, se puede realizar de esta forma: window.document.write("Hola"); La diferencia es que nos simplificamos la vida en anteponer window en estas acciones. Dentro de algunas acciones que puede ser utilizadas con este objeto son: alert: Muestra un diálogo de alerta con un mensaje        (a esta responsabilidad la hemos utilizado desde los primeros temas) prompt: Muestra un diálogo para la entrada de un valor de tipo string        (utilizado desde el primer momento) confirm: Muestra un diálogo de confirmación con los botones Confirmar y Cancelar. open y close: abre o cierra una ventana del navegador.       ...

moveTo en JavaScript

Imagen
moveTo(): Esta acción tiene dos parametros que es o son la(s) columna(s) y fila(s) Ejercicio No.1: Confeccionar una función que mueva la ventana a la coordenada (20,20) cuando se cargue la página. Respuesta: <html> <head></head> <script language="JavaScript"> </script> <body Onload="moveTo(20,20)"> Moviendo ventana... </body> </html> Ejercicio No.2: Confeccionar una función que mueva la ventana a la coordenada (20,20) cuando presiona un botón. Respuesta: <html> <head></head> <script language="JavaScript"> </script> <body> <form> <input type="button" value="Mover Ventana" OnClick="moveTo(20,20)"> </form> </body> </html> *Cabe destacar que esta acción

OnLoad en JavaScript

Imagen
OnLoad: se activa cuando se termina de cargas todos los elementos que contiene alguna pagina web. Ejemplo: Uno de los usos más frecuentes es para fijar el foco en algún control de un formulario, para que el operador no tenga que activar con el mouse dicho control. Este evento está asociado a la marca body. La página completa es: <html> <head></head> <body onLoad="activarPrimerControl()"> <script language="JavaScript"> function activarPrimerControl() {   document.form1.nombre.focus(); } </script> <form name="form1"> Ingrese su nombre: <input type="text" name="nombre"><br> Ingrese su edad: <input type="text" name="edad"><br> <input type="button" value="Confirmar"> </form> </body> </html>

OnMouseOver y OnMouseOut en JavaScript

Imagen
OnMouseOver: se activa cuando el ratón se posiciona encima de un hipervinculo. OnMouseOut: se activa cuando el ratón se deja de posicionar encima de un hipervinculo. Ejemplo: Cambiar color mediante la posición del mouse sobre el hipervinculo. Respuesta: <html> <head></head> <body> <script language="JavaScript"> function rojo() { document.bgColor='#ff0000'; } function verde() { document.bgColor='#00ff00'; } function azul() { document.bgColor='#0000ff'; } function blanco() { document.bgColor='#ffffff'; } </script> <a href="#" onMouseOver="rojo()" onMouseOut="blanco()">Rojo</a> - <a href="#" onMouseOver="verde()" onMouseOut="blanco()">Verde</a> - <a href="#" onMouseOver="azul()" onMouseOut="blanco()">Azul</a> <br> <br...

OnFocus y OnBlur en JavaScript

Imagen
OnFocus : se activa cuando se posiciona en el campo. OnBlur:  se activa cuando deja de posicionar en el campo. Ejemplo: Implementar un formulario que solicite la carga del nombre y la edad de una persona. Cuando el control tome foco borrar el contenido actual, al abandonar el mismo, mostrar un mensaje de alerta si el mismo está vacío. <html> <head></head> <body> <script language="JavaScript"> function vaciar(control) {   control.value=''; } function verificarEntrada(control) {   if (control.value=='')     alert('Debe ingresar datos'); } </script> <form name="form1"> Ingrese su nombre: <input type="text" name="nombre" onFocus="vaciar(this)" onBlur="verificarEntrada(this)"><br> Ingrese su edad: <input type="text" name="edad" onFocus="vaciar(this)" onBlur="verificarEntrada(this)"...

Etiqueta TEXAREA en JavaScript

Imagen
Esta etiqueta es muy parecida a la etiqueta TEXT que relativamente se usa en los formularios básicos, excepto a que puede contener más de una linea de escritura, esta etiqueta TEXAREA tiene dos atributos marcados que son rows(filas) y cols(columnas) que nos permite manejar el tamaño del cuadro a emplear. Ejercicio No.1 Solicitar la carga del mail y el curriculum de una persona. Mostrar un mensaje si el curriculum supera los 2000 caracteres. Respuesta: <html> <head> </head> <body> <script language="JavaScript"> function controlarCaracteres() {   if (document.form1.curriculum.value.length>2000)     alert('curriculum muy largo'); else alert('datos correctos'); } </script> <form name="form1"> <textarea name="curriculum" rows="10" cols="50"> </textarea> <br> <input type="button" value="Mostrar" onClick="contro...

Etiqueta RADIO en JavaScript

Imagen
El uso de RADIO en Javascript es muy parecido al de SELECT por su funcionalidad de seleccionar una opción entre varias que se disponen en ello. Cual podría ser la diferencia entre estas dos etiquetas, es la forma de emplearlo dentro del código, cuando se emplea RADIO en la parte del name es igual para todos, al contrario de SELECT es diferente el name que se dispone para cada una. Ejercicio No.1 Confeccionar una página que muestre dos objetos de la clase RADIO solicitando que seleccione si es mayor de 18 años o no. Al presionar un botón mostrar que radio está seleccionado. Respuesta: <html> <head> </head> <body> <script language="JavaScript"> function MostrarEdad() { var x, y; x=document.form1.edad[0].checked; y=document.form1.edad[1].checked; if(x) alert('Mayor o igual a 18 años'); else alert('Menor a 18 años'); } </script> <form name="form1"...

Etiqueta CHECKBOX en JavaScript

Imagen
La etiqueta CHECKBOX es utilizada para seleccionar más de una opción dentro de alguna pregunta o concepto. Lo que ayuda a tener más de una alternativa. Ejercicio No. 1 Confeccionar una página que muestre tres checkbox que permitan seleccionar los deportes que practica el usuario (Futbol, Basket, Tennis) Mostrar al presionar un botón los deportes que a elegido. <html> <head> </head> <body> <script language="JavaScript">  function Seleccionar() { var contar; contar=0; if(document.deportes.futbol.checked) contar=contar+1; if(document.deportes.basket.checked) contar=contar+1; if(document.deportes.tennis.checked) contar=contar+1; alert('Practica ' +contar+ ' deporte(s)'); } </script> <form name="deportes"> <input type="checkbox" name="futbol">Futbol <br> <input type="checkbox" name="basket"...

Etiqueta SELECT en JavaScript

Imagen
La etiqueta SELECT es gestionada en el lenguaje HTML que ayuda a tener una respuesta posible entre varias. Dentro de Javascript se maneja por medio del atributo name(html)  como en forma de arbol mediante una dirección horizontal Ejemplo. document . nombre formulario . nombre del input o select . value ó text. Para ejecutar la funcionalidad de ello se puede hacer mediante el atributo  onchange(javascript) ó onclick(javascript) , dependiendo de lo que se quiera emplear, con estos ejercicios se tendrá la idea de lo que conlleva estas etiquetas, atributos y funciones. Ejercicio No.1 Generar un presupuesto de un equipo de computación a partir de tres objetos de tipo SELECT que nos permiten seleccionar: Procesador (Pentium III - $400, Pentium IV $500). Monitor (Samsung 14' - $250, Samsung 15' - $350, Samsung 17' - $550) Disco Duro(80 Gb - $300, 240 Gb - $440, 800 Gb - $500) Para cada característica indicamos string a mostrar (Ej. Pentium III) y el val...

JavaScript

Imagen
Lenguaje de Programación diseñado para la construcción de código por medio del navegador(cliente), del mismo se puede emplear en un bloque de etiqueta dentro del HTML (<script language="javascript"></scritpt>).  Este lenguaje es muy parecido en su sintaxis al PHP, la diferencia es que no se necesita de un servidor para ser ejecutado su código, simplemente se puede emplear en un bloc de notas para codificado.