Site hosted by Angelfire.com: Build your free website today!

Javascript - Introduccion
Esta es una pequeña guia de Javascript. Aqui abajo tienes unos codigos bastante buenos de Javascript

VOLVER

Javascript es un lenguaje de programación originalmente creado por la empresa Netscape para añadir interactividad a las páginas web vistas con su navegador, el Netscape Navigator. Actualmente Javascript está integrado en otras aplicaciones y otros navegadores de internet, y es uno de los lenguajes más utilizados para este propósito (el otro más utilizado es el VBScript de Microsoft, pero sólamente lo interpreta el MS Internet Explorer, por lo que su uso no está ni mucho menos tan extendido).

No hay que confundir JavaScript con Java. Este último es un lenguaje de propósito más general creado por la empresa Sun Microsystems con unos objetivos muy diferentes. JavaScript se diseñó teniendo Java en mente y sus sintaxis son muy similares, pero son lenguajes muy distintos.

El código JavaScript se integra en el código HTML de las páginas web de forma que podemos enriquecer mucho este código, añadiéndole más "inteligencia" e interactividad con el usuario. No se necesita ninguna herramiento especial para programar en JavaScript, puesto que de caras al programador se trata de una extensión más del HTML, o una forma distinta de mejorar el mismo código de nuestras páginas. Incluso con el bloc de notas podemos crear una buena página web con código HTML y JavaScript integrados.

Por último, hay que decir que hay muchas versiones de JavaScript , y lamentablemente, cada navegador interpreta su propia versión. Netscape fue la creadora de JavaScript, pero Microsoft, que por aquél entonces no podía competir con Navigator, debía "reinventar" alguna cosa para no quedarse en el camino, es por eso que adaptó su propia versión de JavaScript y la llamó "JScript". Actualmente, la última versión del Netscape Navigator interpreta código JavaScript hasta la versión 1.4 de este lenguaje. Microsoft Internet Explorer, por su parte, interpreta código JScript hasta la versión 5.5. (No pienses que es mucho mejor una que otra por la numeración de las versiones, lo que pasa es que JScript de Microsoft avanza sus numeraciones a pasos agigantados sin ofrecer casi ningún cambio significativo).

A continuación veremos las pricipales técnicas en Javascript que se utilizan en Internet, siendo casi todos los ejemplos compatibles con Javascript de Netscape y JScript de Microsoft.

1_Espectacular Menu 

Ahí va el código HTML de esta página con el Javascript integrado. Copia y pega el código cambiando los textos y las URL de las imágenes, así como los enlaces, etc. (no olvides cambiar los links a tu gusto)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META content="text/html; charset=windows-1252" http-equiv=Content-Type>
<SCRIPT language=JavaScript>
<!--



n = (document.layers) ? 1:0
ie = (document.all) ? 1:0

function init() {
slideoutActive = 0
if (n) {
slideout1 = document.slideoutInterface.document.slideoutContent.document.slideoutContent1
slideout2 = document.slideoutInterface.document.slideoutContent.document.slideoutContent2
slideout3 = document.slideoutInterface.document.slideoutContent.document.slideoutContent3
slideout4 = document.slideoutInterface.document.slideoutContent.document.slideoutContent4
slideout5 = document.slideoutInterface.document.slideoutContent.document.slideoutContent5
}

if (ie) {
slideout1 = slideoutContent1.style
slideout2 = slideoutContent2.style
slideout3 = slideoutContent3.style
slideout4 = slideoutContent4.style
slideout5 = slideoutContent5.style
}
slideoutShown = slideout1 
slideoutShown.xpos = 0
slideoutNew = "none" 
slideoutNew.xpos = -285
}


function slideout(which) {
if (!slideoutActive && slideoutShown != which) {
slideoutActive = 1 
slideoutNew = which
slideoutNew.xpos = -285
slideoutLeft()
}
}


function slideoutLeft() {
if (slideoutShown.xpos > -285) {
slideoutShown.xpos -= 15
slideoutShown.left = slideoutShown.xpos
setTimeout("slideoutLeft()",30)
}
else {
hide(slideoutShown)
show(slideoutNew)
setTimeout("slideoutRight()",50)
}
}


function slideoutRight() {
if (slideoutNew.xpos < 0) {
slideoutNew.xpos += 15
slideoutNew.left = slideoutNew.xpos
setTimeout("slideoutRight()",30)
}
else {
slideoutShown = slideoutNew
slideoutActive = 0 // stops the sequence
}
}


function show(showobj) {
if (n) showobj.visibility = "show"
if (ie) showobj.visibility = "visible"
}
function hide(hideobj) {
if (n) hideobj.visibility = "hide"
if (ie) hideobj.visibility = "hidden"
}

//-->
</SCRIPT>

<STYLE type=text/css>A {
COLOR: #000000; FONT-FAMILY: 'Arial'; FONT-SIZE: 10pt; FONT-WEIGHT: bold; LINE-HEIGHT: 20pt; TEXT-DECORATION: none
}
STRONG {
FONT-FAMILY: 'Arial'; FONT-SIZE: 15pt; FONT-WEIGHT: bold; LINE-HEIGHT: 25pt
}
P {
FONT-FAMILY: 'Arial'; FONT-SIZE: 10pt; LINE-HEIGHT: 13pt
}
TD {
FONT-FAMILY: 'Arial'; FONT-SIZE: 10pt; LINE-HEIGHT: 13pt
}
#slideoutInterface {
BACKGROUND-COLOR: #000000; CLIP: rect(0px 400px 250px 0px); HEIGHT: 250px; LEFT: 50px; POSITION: absolute; TOP: 50px; VISIBILITY: visible; WIDTH: 400px; layer-background-color: #000000
}
#slideoutSidebar1 {
BACKGROUND-COLOR: #9797ff; CLIP: rect(0px 100px 30px 0px); HEIGHT: 30px; LEFT: 5px; POSITION: absolute; TOP: 5px; WIDTH: 100px; layer-background-color: #9797FF
}
#slideoutSidebar2 {
BACKGROUND-COLOR: #ffff00; CLIP: rect(0px 100px 30px 0px); HEIGHT: 30px; LEFT: 5px; POSITION: absolute; TOP: 40px; WIDTH: 100px; layer-background-color: #FFFF00
}
#slideoutSidebar3 {
BACKGROUND-COLOR: #ff80c0; CLIP: rect(0px 100px 30px 0px); HEIGHT: 30px; LEFT: 5px; POSITION: absolute; TOP: 75px; WIDTH: 100px; layer-background-color: #FF80C0
}
#slideoutSidebar4 {
BACKGROUND-COLOR: #00ff80; CLIP: rect(0px 100px 30px 0px); HEIGHT: 30px; LEFT: 5px; POSITION: absolute; TOP: 110px; WIDTH: 100px; layer-background-color: #00FF80
}
#slideoutSidebar5 {
BACKGROUND-COLOR: #ff5353; CLIP: rect(0px 100px 30px 0px); HEIGHT: 30px; LEFT: 5px; POSITION: absolute; TOP: 145px; WIDTH: 100px; layer-background-color: #FF5353
}
#slideoutContent {
BACKGROUND-COLOR: #000000; CLIP: rect(0px 285px 240px 0px); HEIGHT: 240px; LEFT: 110px; POSITION: absolute; TOP: 5px; WIDTH: 285px; layer-background-color: #000000
}
#slideoutContent1 {
BACKGROUND-COLOR: #dedede; CLIP: rect(0px 285px 240px 0px); HEIGHT: 240px; LEFT: 0px; POSITION: absolute; TOP: 0px; VISIBILITY: visible; WIDTH: 285px; layer-background-color: #DEDEDE
}
#slideoutContent2 {
BACKGROUND-COLOR: #dedede; CLIP: rect(0px 285px 240px 0px); HEIGHT: 240px; LEFT: -285px; POSITION: absolute; TOP: 0px; VISIBILITY: hidden; WIDTH: 285px; layer-background-color: #DEDEDE
}
#slideoutContent3 {
BACKGROUND-COLOR: #dedede; CLIP: rect(0px 285px 240px 0px); HEIGHT: 240px; LEFT: -285px; POSITION: absolute; TOP: 0px; VISIBILITY: hidden; WIDTH: 285px; layer-background-color: #DEDEDE
}
#slideoutContent4 {
BACKGROUND-COLOR: #dedede; CLIP: rect(0px 285px 240px 0px); HEIGHT: 240px; LEFT: -285px; POSITION: absolute; TOP: 0px; VISIBILITY: hidden; WIDTH: 285px; layer-background-color: #DEDEDE
}
#slideoutContent5 {
BACKGROUND-COLOR: #dedede; CLIP: rect(0px 285px 240px 0px); HEIGHT: 240px; LEFT: -285px; POSITION: absolute; TOP: 0px; VISIBILITY: hidden; WIDTH: 285px; layer-background-color: #DEDEDE
}
</STYLE>

<META content="MSHTML 5.00.2314.1000" name=GENERATOR></HEAD>
<BODY bgColor=#ffffff onload=init() text=#000000>
<DIV id=slideoutInterface>
<DIV id=slideoutSidebar1>
<P align=center><A href="javascript:slideout(slideout1)">Contactar</A></P></DIV>
<DIV id=slideoutSidebar2>
<P align=center><A href="javascript:slideout(slideout2)">Ayuda</A></P></DIV>
<DIV id=slideoutSidebar3>
<P align=center><A href="javascript:slideout(slideout3)">Servicios</A></P></DIV>
<DIV id=slideoutSidebar4>
<P align=center><A href="javascript:slideout(slideout4)">Productos</A></P></DIV>
<DIV id=slideoutSidebar5>
<P align=center><A href="javascript:slideout(slideout5)">Otros</A></P></DIV>
<DIV id=slideoutContent>
<DIV id=slideoutContent1>
<P align=center><STRONG>Contactar</STRONG> 
<P>
<TABLE border=0 width=275>
<TBODY>
<TR>
<TD>Puedes añadir <A href="http://www.masrecursos.galeon.com/"><FONT 
color=blue>enlaces</FONT></A>. 
<P>O imagenes: <IMG border=0 height=44 src="http://www.masrecursos.galeon.com/images/buttons/javalogo52x88.gif" width=26> 
<P>O usar el texto y explicar lo que te dé la gana ;)
</P></TD></TR></TBODY></TABLE></P></DIV>
<DIV id=slideoutContent2>
<P align=center><STRONG>Ayuda</STRONG> 
<P>
<TABLE border=0 width=275>
<TBODY>
<TR>
<TD>Puedes poner más <A href="http://www.masrecursos.galeon.com/"><FONT 
color=blue>enlaces</FONT></A>. 
<P>O imagenes: <IMG border=0 height=44 src="http://www.masrecursos.galeon.com/images/buttons/javalogo52x88.gif" width=26>
<P>O explicar tu vida y milagros aquí mismo ;) 
</P></TD></TR></TBODY></TABLE></P></DIV>
<DIV id=slideoutContent3>
<P align=center><STRONG>Servicios</STRONG> 
<P>
<TABLE border=0 width=275>
<TBODY>
<TR>
<TD>Puedes poner <A href="http://www.masrecursos.galeon.com/"><FONT 
color=blue>enlaces</FONT></A>. 
<P>O imagenes: <IMG border=0 height=44 src="http://www.masrecursos.galeon.com/images/buttons/javalogo52x88.gif" width=26>
<P>O explicar el objetivo de esta sección aqui mismo. 
</P></TD></TR></TBODY></TABLE></P></DIV>
<DIV id=slideoutContent4>
<P align=center><STRONG>Productos</STRONG> 
<P>
<TABLE border=0 width=275>
<TBODY>
<TR>
<TD>Puedes poner <A href="http://www.masrecursos.galeon.com/"><FONT 
color=blue>enlaces</FONT></A>. 
<P>O imagenes: <IMG border=0 height=44 src="http://www.masrecursos.galeon.com/images/buttons/javalogo52x88.gif" width=26>
<P>Y vender aqui tus productos! 
</P></TD></TR></TBODY></TABLE></P></DIV>
<DIV id=slideoutContent5>
<P align=center><STRONG>Otros</STRONG> 
<P>
<TABLE border=0 width=275>
<TBODY>
<TR>
<TD>Puedes poner <A href="http://www.masrecursos.galeon.com"><FONT 
color=blue>enlaces</FONT></A>. 
<P>O imagenes: <IMG border=0 height=44 src="http://www.masrecursos.galeon.com/images/buttons/javalogo52x88.gif" width=26>
<P>O exponer aqui cualquier cosa referente a tu website. 
</P></TD></TR></TBODY></TABLE></P></DIV></DIV><!-- END OF Slide Out DHTML --></DIV></BODY></HTML>

2_Calculadora (copia y pega el codigo)

<CENTER>

<FORM name="Keypad" action="">
<TABLE>
<B>
<TABLE border=2 width=50 height=60 cellpadding=1 cellspacing=5>
<TR>
<TD colspan=3 align=middle>
<input name="ReadOut" type="Text" size=24 value="0" width=100%>
</TD>
<TD
</TD>
<TD>
<input name="btnClear" type="Button" value=" C " onclick="Clear()">
</TD>
<TD><input name="btnClearEntry" type="Button" value=" CE " onclick="ClearEntry()">
</TD>
</TR>
<TR>
<TD>
<input name="btnSeven" type="Button" value=" 7 " onclick="NumPressed(7)">
</TD>
<TD>
<input name="btnEight" type="Button" value=" 8 " onclick="NumPressed(8)">
</TD>
<TD>
<input name="btnNine" type="Button" value=" 9 " onclick="NumPressed(9)">
</TD>
<TD>
</TD>
<TD>
<input name="btnNeg" type="Button" value=" +/- " onclick="Neg()">
</TD>
<TD>
<input name="btnPercent" type="Button" value=" % " onclick="Percent()">
</TD>
</TR>
<TR>
<TD>
<input name="btnFour" type="Button" value=" 4 " onclick="NumPressed(4)">
</TD>
<TD>
<input name="btnFive" type="Button" value=" 5 " onclick="NumPressed(5)">
</TD>
<TD>
<input name="btnSix" type="Button" value=" 6 " onclick="NumPressed(6)">
</TD>
<TD>
</TD>
<TD align=middle><input name="btnPlus" type="Button" value=" + " onclick="Operation('+')">
</TD>
<TD align=middle><input name="btnMinus" type="Button" value=" - " onclick="Operation('-')">
</TD>
</TR>
<TR>
<TD>
<input name="btnOne" type="Button" value=" 1 " onclick="NumPressed(1)">
</TD>
<TD>
<input name="btnTwo" type="Button" value=" 2 " onclick="NumPressed(2)">
</TD>
<TD>
<input name="btnThree" type="Button" value=" 3 " onclick="NumPressed(3)">
</TD>
<TD>
</TD>
<TD align=middle><input name="btnMultiply" type="Button" value=" * " onclick="Operation('*')">
</TD>
<TD align=middle><input name="btnDivide" type="Button" value=" / " onclick="Operation('/')">
</TD>
</TR>
<TR>
<TD>
<input name="btnZero" type="Button" value=" 0 " onclick="NumPressed(0)">
</TD>
<TD>
<input name="btnDecimal" type="Button" value=" . " onclick="Decimal()">
</TD>
<TD colspan=3>
</TD>
<TD>
<input name="btnEquals" type="Button" value=" = " onclick="Operation('=')">
</TD>
</TR>
</TABLE>
</TABLE>
</B>
</FORM>
</CENTER>
<font face="Verdana, Arial, Helvetica" size=2>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var FKeyPad = document.Keypad;
var Accumulate = 0;
var FlagNewNum = false;
var PendingOp = "";
function NumPressed (Num) {
if (FlagNewNum) {
FKeyPad.ReadOut.value = Num;
FlagNewNum = false;
}
else {
if (FKeyPad.ReadOut.value == "0")
FKeyPad.ReadOut.value = Num;
else
FKeyPad.ReadOut.value += Num;
}
}
function Operation (Op) {
var Readout = FKeyPad.ReadOut.value;
if (FlagNewNum && PendingOp != "=");
else
{
FlagNewNum = true;
if ( '+' == PendingOp )
Accumulate += parseFloat(Readout);
else if ( '-' == PendingOp )
Accumulate -= parseFloat(Readout);
else if ( '/' == PendingOp )
Accumulate /= parseFloat(Readout);
else if ( '*' == PendingOp )
Accumulate *= parseFloat(Readout);
else
Accumulate = parseFloat(Readout);
FKeyPad.ReadOut.value = Accumulate;
PendingOp = Op;
}
}
function Decimal () {
var curReadOut = FKeyPad.ReadOut.value;
if (FlagNewNum) {
curReadOut = "0.";
FlagNewNum = false;
}
else
{
if (curReadOut.indexOf(".") == -1)
curReadOut += ".";
}
FKeyPad.ReadOut.value = curReadOut;
}
function ClearEntry () {
FKeyPad.ReadOut.value = "0";
FlagNewNum = true;
}
function Clear () {
Accumulate = 0;
PendingOp = "";
ClearEntry();
}
function Neg () {
FKeyPad.ReadOut.value = parseFloat(FKeyPad.ReadOut.value) * -1;
}
function Percent () {
FKeyPad.ReadOut.value = (parseFloat(FKeyPad.ReadOut.value) / 100) * parseFloat(Accumulate);
}
// End -->
</SCRIPT>

3_Texto en la ventana

<!-- Copiar este código dentro del tag HEAD -->

<script language="JavaScript1.2">

var message="Bienvenido a este javascriptt" 
var message=message+" " 
i="0" 
var temptitle=""
var speed="150"

function titler(){
if (!document.all&&!document.getElementById)
return
document.title=temptitle+message.charAt(i)
temptitle=temptitle+message.charAt(i)
i++ 
if(i==message.length)
{
i="0"
temptitle=""
}
setTimeout("titler()",speed)
}

window.onload=titler
</script>

VOLVER

Para ver mas codigos haz click en Mas Codigos en la pagina principal