La forma normal es:
<A HREF="http://www.yoursite.com">Click here</A>
donde http:// indica el protocolo de la World Wide Web. Es posible utilizar otros protocolos: mailto: (ej. mailto:info@mailcall.com), ftp://, gopher:// y file://.
En JS existe el protocolo javascript:. Ejemplo:
<A HREF="javascript: history.go(-1)>Go back to previous page</A>
La evaluación de la expresión siempre ha de devolver una cadena que represente una URL. Ejemplo:
var demoloc="http://www.netscape.com"
<A HREF="javascript:demoloc">Netscape<A>
Otro protocolo propio de Netscape es about:, que equivale al comando Ayuda-Acerca de. Con about:plug-ins se obtiene información de los plug-ins instalados, y con about:plug-ins se obtienen estadísticas de la cache del navegador.
A continuación se muestran dos ejemplos de enlaces con sus propiedades:
El atributo NAME sirve tanto para declarar un Punto de Anclaje como para acceder al objeto link al que corresponde dicho enlace.
Los atributos asociados a eventos son onMouseOver y onClick. Ejemplo:
<A NAME="myname" HREF="http://www.yoursite.com" onMouseOver=
"window.status='Please visit my site.'; return true">
Click here</A>
<A NAME="mymessage" HREF="http://www.newsite.com" onClick=
"alert('Thanks for visiting. Enjoy the new site.')">
Visit Newsite</A>
Es posible modificar un enlace a través de sus propiedades, pero no se puede modificar el texto que aparece en el documento. Ejemplo:
<SCRIPT Language="JavaScript">
function timeText()
{
today=new Date()
hour=today.getHours() //get hour of the date
if (hour > 18) //after 6:00 p.m use graphics
yahooURL="http://www.yahoo.com/"
else //all other times use test mode
yahooURL="http://www.yahoo.com/text/"
return yahooURL
}
</SCRIPT>
...
<A NAME="yahooLink" HREF="" onClick="this.href=timeText()"
onMouseOver="window.status='Hyperlink to Yahoo!'; return true">
Yahoo!</A>
<IMG NAME="imgName" SRC="srcFile" [LOWSRC="lowsrcFile"]
[HEIGHT="height"][WIDTH="width"][BORDER=pixels][ALIGN="align"]
[HSPACE="hspace"][VSPACE="vspace"][ALT="text"]
[onMouseOver="handlerText"][onMouseOut="handlerText"]>
</FORM>
Para acceder a las propiedades y métodos:
Propiedades:
La propiedad src permite cambiar dinámicamente la imagen. Así por ejemplo, con los eventos onMouseOver y onMouseOut se podría mostrar una u otra imagen al situar o no el puntero del ratón sobre la misma.
En el caso de intercambiar imágenes grandes que tardan en cargarse, es posible precargarlas creando dos objetos auxiliares. Ej.:
var img1=new Image(); img1.src="gifs/boton1_on.gif";
var img2=new Image(); img1.src="gifs/boton1_off.gif";
...
<IMG ... onMouseOver="document.Boton1.src=img1.src"
onMouseOut="document.Boton1.src=img2.src">
También es posible comprobar si la imagen ha terminado de cargarse mediante el atributo complete, así como comprobar si el navegador admite imágenes mediante el array images: if (document.images [!= null) ...
<FORM NAME="formname" TARGET="windowname" ACTION="serverURL"
METHOD=GET|POST ENCTYPE="encodingType"
[onSubmit="handlerText"]>
</FORM>
El evento onSubmit se produce cuando se pulsa en botón SUBMIT o bien cuando se ejecuta el método submit desde cualquier script.
Todos los objetos form del documento se almacenan en un array llamado forms. De ahí que se pueda acceder a las propiedades y métodos del objeto de dos maneras:
Algunas propiedades son:
<INPUT TYPE="button" NAME="nameInside"
VALUE="nameOnButton" [onClick="handlerText"]>
Para acceder a las propiedades y métodos:
La propiedad value devuelve el texto del botón. Si se modifica esta propiedad, no se ve el resultado en pantalla a menos que se recargue el documento, con lo cual volverá a cargarse el valor por defecto. Más adelante se verá cómo guardar un valor de forma permanente.
<INPUT TYPE="checkbox" NAME="checkboxName"
VALUE="checkboxValue" [CHECKED]
[onClick="handlerText"]>textToDisplay
Se accede a las propiedades y métodos de la misma forma que para button. Algunas propiedades son:
Sólo es posible seleccionar un botón de radio de entre todos aquellos del formulario que tengan el mismo atributo NAME.
<INPUT TYPE="radio" NAME = "radioName"
[CHECKED] [onClick=handlerText"]>textToDisplay
Para acceder a sus propiedades y métodos:
El método click permite seleccionar un botón de radio (todos los demás del grupo se desactivan).
Permite guardar información que se desea enviar al servidor junto con los demás datos del formulario.
<INPUT TYPE="hidden" NAME="hiddenName" [VALUE="textValue"]>
Para acceder a las propiedades y métodos:
La propiedad value equivale al atributo VALUE.
<INPUT TYPE="password" NAME="passwordName"
SIZE=integer [VALUE="textValue"]>
Para acceder a las propiedades y métodos:
Dispone de los métodos focus(), blur() y select(). El método focus() se suele utilizar para situar el cursor en un control al cargar el documento. Ej.:
<INPUT [TYPE="text"] NAME="textName" VALUE="textValue"
SIZE=integer [onBlur="handlerText"] [onChange="handlerText"]
[onFocus="handlerText"] [onSelect="handlerText"]>
Propiedades:
Métodods:
Atributos para definir manejadores de eventos:
<TEXTAREA NAME="textareaName" ROWS=integer COLS=integer
WRAP=on|off|physical|virtual [onBlur="handlerText"]
[onChange="handerText"] [onFocus="handlerText"]
[onSelect="handlerText"]>textToDisplay
</TEXTAREA>
Sus propiedades, métodos y eventos son iguales que para el objeto text.
<INPUT TYPE="submit" NAME="submitName"
VALUE="buttonText" [onClick="handlerText"]>
Para acceder a las propiedades y métodos:
Dispone del atributo onClick y del método click(), que equivale a pulsar el botón.
Siempre que se pulsa el botón submit se carga una nueva página, aunque sea la misma página que la actual.
<INPUT TYPE="reset" NAME="resetName" VALUE="buttonText"
[onClick ="handlerText"]>
Para acceder a las propiedades y métodos:
Dispone del atributo onClick y del método click().
<SELECT NAME="selectName" [SIZE="integer"] [MULTIPLE]
[onBlur="handlerText"] [onChange="handlerText"]
[onFocus="handlerText"]>
<OPTION VALUE="optionValue" [SELECTED]>textToDisplay
[...]
</SELECT>
El atributo NAME y el atrivuto VALUE de la opción seleccionada se envían al servidor al submitir el formulario. El atributo NAME también se puede usar como punto de anclaje para un enlace.
Atributos de eventos:
Ejemplo de onChange:
<SCRIPT LANGUAGE="JavaScript">
function changeCurrency(form)
{
form.currency.value=
form.country.options[form.country.selectedIndex].value
}
</SCRIPT>
...
</FORM><
<B>Select your country</B><BR>
<SELECT NAME="country" onChange="changeCurrency(this.form)">
<OPTION VALUE="US Dollars">USA
<OPTION VALUE="Canadian Dollars">Canada
<OPTION VALUE="Peso">Mexico
</SELECT>
<P><B>Prices are displayed in:</B><BR>
<INPUT TYPE="text" NAME="currency">
</FORM>
Ejemplo de onBlur:
<SCRIPT LANGUAGE="JavaScript">
function checkEggs(form)
{
form.eggs.value=
form.quantity.options[form.quantity.selectedIndex].value
if (form.quantity.selectedIndex == 0)
alert ('People usually order eggs by the dozen.')
}
</SCRIPT>
...
<FORM>
<B>How many eggs do you want:</B><BR>
<SELECT NAME="quantity" onBlur="checkEggs(this.form)">
<OPTION VALUE="6">Half dozen
<OPTION VALUE="12">Dozen
<OPTION VALUE="24">Two dozen
</SELECT>
<P><B>We are holding this many eggs for you:</B><BR>
<INPUT TYPE="text" NAME="eggs">
</FORM>
Ejemplo de onFocus:
<SCRIPT LANGUAGE="JavaScript">
function giveAnswer(form)
{
if (form.answer.selectedIndex==2)
alert ('People usually forget trains run on two tracks.')
}
var already=0
function callCalculator(form)
{
if (already == 0)
{
already=1 //...only need to open this window once
newWindow=window.open("http://www.netscape.com/comprod/\
products/navigator/version_2.0/script/calc.html")
}
}
</SCRIPT>
...
<FORM>
<P><B>What is your answer:</B><BR>
<SELECT NAME="answer" onFocus="callCalculator(this.form)"
onBlur="giveAnswer(this.form)">
<OPTION VALUE="21">21
<OPTION VALUE="29">29
<OPTION VALUE="88">88
</SELECT>
</FORM>
Aunque al igual que en text y textarea no es posible modificar el texto que se visualiza en una opción, sí es posible cambiar la opción seleccionada mediante la propiedad selected. Ejemplo:
<FORM>
<P><B>How much money do you have for dinner?</B><BR>
<INPUT TYPE="radio" NAME="a" onClick=
"this.form.meal.options[0].selected=1">$10<BR>
<INPUT TYPE="radio" NAME="a" onClick=
"this.form.meal.options[1].selected=1">$15<BR>
<INPUT TYPE="radio" NAME="a" onClick=
"this.form.meal.options[2].selected=1">$20<BR></P>
<B>Your dinner tonite is:</B><BR>
<SELECT NAME="meal" >
<OPTION VALUE="$10">Pizza
<OPTION VALUE="$15">Extra Cheese Pizza
<OPTION VALUE="$20">Extra Veggies Pizza
</SELECT>
</FORM>