Tutorial de javaScript [a pedido de hellsign] - Página 2

bellaco69

EJEMPLO 6:
Cambiar la imagen por medio de un control. En este caso una lista (select). Es igual que en el caso anterior. Lo único que cambia es el evento que gestiona la llamada a la función.

<html>
<head>
<script>
function cambio(valor)
{
if(valor=="imagen1")
img.src="tenista1.gif"
else
img.src="tenista2.gif"
}
</script>
</head>
<body>
<select size="3" name="lista" onChange=cambio(value);>
<option value="imagen1">Imagen 1</option>
<option value="imagen2">Imagen 2</option>
</select>
<br>
<img name="img" src="tenista1.gif">
</body>
</html>

EJEMPLO 7: Una imagen moviéndose en vertical automáticamente.

<html>
<head>
<script>
var vertical=35;
var ida=true;
setTimeout("mover()",200);
function mover()
{
if(vertical<=200 && ida==true)
vertical+=10;
else
{
vertical-=10;
ida=false;
if(vertical<=35)
ida=true;
}
img.style.top=vertical;
setTimeout("mover()",200);
}
</script>
</head>
<body>
<img name="img" src="pic.gif"
style="position:absolute; left:12; top:35">
</body>
</html>

OBJETOS PREDEFINIDOS
Cuando se carga un documento en el navegador, se crean automáticamente una colección de Objetos predefinidos, útiles para describir el documento sobre el que se trabaja, la ventana del navegador y todo tipo de elementos de las páginas web. Se agrupan en los objetos window, document, history, navigator y screen. También hay toda una colección de objetos para utilidades varias.
WINDOW:
Nos permite definir las característica de la ventana del navegador o de las ventanas que construyamos nuevas. A continuación tenemos los métodos mediante los cuales podremos definir sus características.
METODO DESCRIPCIÓN SINTAXIS
open Abrir ventanas. var=window.open("url","name","atrbs"); close Cerrar ventanas. var.close(); opener Indica si se abrio var_boolean=var.opener SI devuelve true closed Indica si se cerró. var_boolean=var.closed SI devuelve false Location Enlaza con una página. var.Location="url"; print Imprime el documento. var.Print(); alert Abre ventanas alert. var.alert(datos); confirm Abre ventanas confirm. var.confirm(datos); prompt Abre ventanas prompt. var.prompt(datos,"val inici"); status Texto en barra estado. var.status="mensaje"; showModalDialog Crea ventana modal. var=window.showModalDialog("url","atrbs");
La variable solo es necesaria cuando sea una ventana distinta a la del navegador.
ATRIBUTOS DE SHOWMODALDIALOG (atrbs)
ATRIBUTO ELEMENTO
dialogWidth:valor Define el ancho. dialogHeight:valor Define el alto. dialogTop:valor Define posición superior dialogLeft:valor Define posición inferior.
Todos los atributos que se pongan irán dentro de las comillas y separados por un espacio entres ellos. Todos ellos son opcionales.

bellaco69

ATRIBUTOS DE OPEN (atrbs)
ATRIBUTO ELEMENTO
toolbar=[yes|no] Barra de herramientas. location=[yes|no] Barra de direcciones. directories=[yes|no] Histórico. channelmode==[yes|no] Barra de canales.
menubar=[yes|no] Barra de menús. status=[yes|no] Barra de estados scrollbars=[yes|no] Barras de Scroll. resizable=[yes|no] Dimensionable. width=pixels Ancho de ventana. height=pixels Alto de ventana. fullscreen=[yes|no] Maximizada. top=pixels Posición superior. left=pixels Posición izquierda
Todos los atributos que se pongan irán dentro de las comillas y separados por un espacio entres ellos. Todos ellos son opcionales.

ATRIBUTO ELEMENTO toolbar=[yes|no] Barra de herramientas. location=[yes|no] Barra de direcciones. directories=[yes|no] Histórico. channelmode==[yes|no] Barra de canales.
menubar=[yes|no] Barra de menús. status=[yes|no] Barra de estados scrollbars=[yes|no] Barras de Scroll. resizable=[yes|no] Dimensionable. width=pixels Ancho de ventana. height=pixels Alto de ventana. fullscreen=[yes|no] Maximizada. top=pixels Posición superior. left=pixels Posición izquierda
Todos los atributos que se pongan irán dentro de las comillas y separados por un espacio entres ellos. Todos ellos son opcionales.

EJEMPLO 1:
<html>
<head>
<script>
var v1;
function abre()
{
v1=window.open("ab.htm","v","status=yes resizable=yes);
v1.status="Ventana creada para publicidad";
status="Ventana Estandar del Navegador";
}

function cierra()
{
v1.close();
}
</script>
</head>
<body onload=abre();>
<input type="button" value="Cerrar" onClick=cierra();>
</body>
</html>

DOCUMENT:
Objeto dependiente de window, es quien contiene las propiedades para trabajar con el documento y su contenido, es decir, la página web. Sus métodos pueden ser usados también por window. Y estos son con los que normalmente se trabaja.

bellaco69

METODO DESCRIPCION SINTAXIS write Escribe en el documento. document.write(dato); writeln Escribe y salta de línea. document.writeln(dato); alinkColor Color de enlace (sin usar). document.alinkColor="color"; linkColor Color de enlace (activo). document.linkColor="color"; vlinkColor Color de enlace (usado). document.vlinkColor="color"; bgColor Color de fondo. document.bgColor="color"; fgColor Color del texto. document.fgColor="color"; referrer Url del documento anterior. var=document.referrer; location Url del documento actual. var=document.location; lastModified Fecha modificación. var=document.lastModified;

EJEMPLO 1:
<html>
<head>
<script>
function fondo(colores){document.bgColor=colores;}
function texto(colores){document.fgColor=colores;}
</script>
</head>
<body>
COLOR DEL FONDO <br>
BLANCO<input type="radio" name="F" onClick=fondo("white");>
<br>
ROJO<input type="radio" name="F" onClick=fondo("red");>
<br>
AZUL<input type="radio" name="F" onClick=fondo("blue");>
<br>
<br>
COLOR DEL TEXTO
NEGRO<input type="radio" name="T" onClick=texto("black");>
<br>
GRIS<input type="radio" name="T" onClick=texto("gray");>
<br>
VERDE<input type="radio" name="T" onClick=texto("green");>
</body>
</html>

HISTORY:
Objeto derivado de window, contiene todas las direcciones que se han ido visitando durante la sesión actual. Al ser un objeto derivado de window, este también puede utilizar sus métodos. Tiene 3 métodos:
METODO DESCRIPCIÓN SINTAXIS back() Vuelve a la página anterior. window.history.back(); forward() Nos lleva a la página siguiente. window.history.forward(); go(valor) Van donde le indique el número. Este puede ser: -1 como back. num lleva a pag X
1 como forward window.history.go(valor);
EJEMPLO:
<html>
<head>
<script>
function pasa(valor)
{
window.history.go(valor);
}
</script>
</head>
<body>
<input type="button" value="Atrás" onClick=pasa(-1);>
<br>
<input type="button" value="Adenlant" onClick=pasa(1);>
<br>
<a href="ab.htm">ir a la paginoa AB</a>
</body>
</html>

SCREEN:
Objeto por el cual podemos conocer la configuración y tipo de tarjeta gráfica que tiene el usuario. Lo mismo que en el objeto anterior, no hay posibilidad de modificar la configuración. Sus métodos más importantes son:

MÉTODO DESCRIPCIÓN SINTAXIS
height Altura de la pantalla. var=screen.height
width Ancho de la pantalla. var=screen.width
colorDepth Bits por pixel, los colores en pantalla. var=screen.colorDepth

EJEMPLO:
<html>
<head>
<script>
function resol()
{
var ancho=screen.width;
var alto=screen.height;

if(ancho<1800 && alto<1600)
{
alert("Aumentar Resolución a 1800x1600");
document.write("Aumente la Resolución");
}
}
</script>
</head>
<body onLoad=resol();>
</body>
</html>

bellaco69

MÉTODOS PARA FECHA Y HORA
Métodos que nos van a permitir realizar una serie de operaciones o procedimientos utilizando fechas y horas. Lo primero que tendremos que hacer, construir un objeto Date, para que posteriormente podamos utilizar los métodos de fecha y hora.
SINTAXIS DEL OBJETO:
var nombre_objeto=new Date();
MÉTODO
objeto.toGMTString(); objeto.getDate(); objeto.getMonth()+1; objeto.getYear(); objeto.getHours(); objeto.getMinutes(); objeto.getSeconds();
Todas estas funciones tienen su pareja que nos permite modificar sus valores. Su sintaxis es la misma, solo que ahora comienzan por set. Por ejemplo setMinutes(minutos) cambiará los minutos de la hora del sistema.

EJEMPLO 1:
<html>
<head>
<script>
function fecha()
{
var obj_fecha=new Date();

var completo=obj_fecha.toGMTString();

var hora=obj_fecha.getHours();
var minuto=obj_fecha.getMinutes();
var segundo=obj_fecha.getSeconds();

var dia=obj_fecha.getDate();
var mes=obj_fecha.getMonth()+1;
var anis=obj_fecha.getYear();

alert(hora +":" +minuto +":" +segundo);
alert(dia +"/" +mes +"/" +anis);
alert(completo);
}
</script>
</head>
<body onLoad=fecha();>
</body>
</html>
EJEMPLO 2: Creación de un reloj digital.
<html>
<head>
<script>
setTimeout("reloj()",100);
function reloj()
{
var tiempo=new Date();
var hora=tiempo.getHours();
var minuto=tiempo.getMinutes();
var segundo=tiempo.getSeconds();
var textohora=hora+":"+minuto+":"+segundo;
caja.value=textohora;
setTimeout("reloj()",500);
}
</script>
</head>
<body>
<input type="text" name="caja" size="10">
</body>
<html>

17. MÉTODOS PARA CADENAS
Métodos destinados a realizar operaciones con cadenas de texto. Al igual que las funciones matemáticas vamos a necesitar un objeto. En este caso el objeto puede ser una variable normal y corriente que va a contener texto o también podríamos construir un objeto String. En ambos casos se trabajará del mismo modo.
SINTAXIS DEL OBJETO String:
var nombre_objeto=new String();

MÉTODO DESCRIPCIÓN
objeto/var.length; Devuelve la longitud de la cadena. objeto/var.charAt(indice); Devuelve la letra que este en la posición del índice. objeto/var.subString(ind1,ind2); Devuelve el texto comprendido entre los índices. objeto/var.indexof(letra); Devuelve el índice de la letra buscada. objeto/var.replace(letr1,letr2); Reemplaza letr1 por letr2. objeto/var.toLowerCase(); Transforma en minúsculas el texto del objeto. objeto/var.toUpperCase(); Transforma en mayúsculas el texto del objeto
.
EJEMPLO: Pedimos una contraseña de mínimo 4 letras, la pasamos a mayúsculas y mostramos la primera letra. Si la contraseña no llega a 4 letras le avisamos del mínimo de letras y volvemos a pedir.
<html>
<head>
<script>
function pasa()
{
var contra=T.value;
var nletras=contra.length;
if(nletras<4)
{
alert("Mínimo 4 letras");
T.value="";
nletras=0;
}
if(nletras!=0)
{
contra=contra.toUpperCase();
alert("La primera es: "+contra.charAt(0));
}
}
</script>
</head>
<body>
<input type="password" name="T" size="9" onBlur=pasa();>
</body>
</html>

-----------------------
Fin de Tutorial
Aun no lo leo el 100 %
pero mas de alguno debe ir mas avanzado

xxhiramxx

porque no lo pusiste en word bellaco?? hubiera estado mas simple

bellaco69

es que ya habia empezado a postear
y no lo quize subir.....
me demoraba mas en hacer lo segundo..jeje

AGE_vs_shory

la proxima subelo a un pdf o un word pero todo eso no sirve para leer y ademas es solo con operador html hay solo das ejemplos y nada de practica loco pero en fin gracias

krna

qque flojera me das bellako :s.... jeje, era mejor en un word y subir como dice hiram

	INICIO	CARÁTULAS	ARTISTAS	FOTOS	LÍRICAS	RADIO

VIDEOS › Top 10 › Videos Recientes › Sugerir Video › Diseño Digital › Entrevistas › Eventos › Fruity Loops › Graciosos › Perriando › Tiraera › Videos Musicales CD's › Top Cd's › Líricas FORO › Comunidad › Mundo Lirical › Reggaeton › Mp3 Music › Otros Temas › Mundo Reggaeton BATALLAS › Empezar una Batalla › Batallas Abiertas › Historial de Batallas [Tu Cuenta \| Regístrate]
Sonando en la Radio CONTRATAR PUBLICIDAD

Inicio \| Historial del Foro \| Contacto \| Politica de Privacidad \| Términos y condiciones \| Contratar Publicidad 1,770 Días Online
Propiedad de High Level Webs \| Creación de Daniel Santiago Meléndez © MundoReggaeton.com 2004-2008. Todos los derechos reservados.