Funciones
En jаvascript también podemos definir funciones (por medio de la palabra reservada function), pasarles argumentos y devolver valores. La estructura general de la definición de una función es:function nombre_funcion(arg1, ... , argN) {
Código de la función
Return (valor de retorno);}Ámbito de las variables
En jаvascript tenemos variables locales y variables globales. Las variables locales serán aquellas que se definan dentro de un función, mientras las variables globales serán aquellas que se definan fuera de la función, y podrán ser consultadas y modificadas por cualquiera de las funciones que tengamos en el documento HTML.
Ejemplo:
<script languaje=“jаvascript”>
<!--
var x; // variable global
function f (valor ){
x = 3; // variable local, con una asignación. return (valor+x);
}
// -->
</script>
<body>
<script>
document.write("El valor retornado por la función es: ",f (5 ), ".")
</script>
</body>Método write y writeline
Para sacar mensajes por pantalla se utiliza el método: write( ) Ejemplos:
var texto=“esto es un mensaje de texto”;
document.write (` Esto es un mensaje `);
document.write (texto);
document.write (texto + ` más largo');
El método writeline() produce, además de sacar un mensaje por pantalla, un retorno de carro.
La ventana prompt
La función PROMPT sirve para poder pedir un dato al usuario. La respuesta por defecto es optativa, si no la ponemos, no hay respuesta por defecto. Esta función devuelve una cadena con la respuesta que hayamos introducido, tras pulsar el botón “Aceptar”. Si cancelamos, devuelve NULL.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>La ventana prompt</title>
</head>
<body>
<script language="jаvascript" type="text/jаvascript">
<!--
function fu()
{
nombre=prompt("¿Como te llamas?","defecto"); if (nombre!=null){
alert("hola"+nombre);}
}
-->
</script>
<input type="button" value="pulsa" onclick="fu()">
</body>
</html>
Objetos de jаvascript
Se definen objetos que están relacionados con la fecha actual, la ventana del navegador, etc. Cada objeto tiene por un lado unas propiedades (el color de fondo de una página por ejemplo) y por el otro lado tiene métodos (funciones que se pueden realizar con ese objeto). Sobre estos objetos se pueden producir eventos.
Los eventos que se pueden producir en jаvascript son:
- onblur: se produce cuando un elemento pierde el foco.
- onclick: se produce cuando pinchamos sobre ese elemento.
- onchange: se produce cuando el usuario cambia el valor de algún elemento.
- onfocus: se produce cuando un elemento coge el foco.
- onload: se produce al cargar esta página en el navegador.
- onmouseover: se produce cuando pasamos el ratón por encima.
- onmouseout: se produce cuando el ratón salga de ese elemento.
- onselect: se produce cuando seleccionamos un elemento.
- onsubmit: se produce cuando pulsamos el botón “Enviar” de un formulario.
- onunload: se produce cuando el usuario abandona una web.
- Anchor
- Button
- Checkbox
- Date
- Document
- Elements (array)
- Form
- Frame
- Hidden
- History
- Link
- Location
- Math
- Navigator
- Password
- Radio
- Select
- Reset
- String
- Submit
- Text
- Textarea
- Window
Cada elemento de un formulario puede llevar determinados eventos:
- <SELECT> € onblur, onchange, onfocus.
- Type = “checkbox” € onclick
- Type = “radio” € onclick
- Type = “reset” € onclick
- Type = “button” € onclick
- Type = “submit” € onclick
- Type “ text”€ onblur, onchange, onfocus, onselect
- <TEXTAREA> € onblur, onchange, onfocus, onselect Fuera de un formulario:
- Documento <BODY> € onload, onunload
- <FRAME> € onload, onunload
- <A href> € onclick, onmouseover, onmouseout
- <FORM> € onsubmit
Objeto String
Es un tipo de objeto de jаvascript que nos permite trabajar con cadenas de caracteres. La única propiedad que tiene es length la cual contiene el número de caracteres de ese objeto. La sintaxis para usar las propiedades es:
nombre objeto.propiedad
Los métodos de este objeto son:- Anchor () € crea un elemento ancla (enlace) e irá donde le diga el objeto string. Con “cadena”, visualizaremos lo que queramos que se vea en la web.
- Big () € muestra la cadena a la que hacemos referencia con una fuente grande. Blink () € muestra la cadena parpadeando.
- Bold () € muestra la cadena en negrita.
- CharAt (índice) € muestra el carácter que esté en la posición que indique índice. Fixed () € muestra la cadena en un tipo de letra de ancho fijo.
- Fontcolor () € muestra esa cadena en el color especificado en formato HTML.
- IndexOf (subcadena, inicio) € devuelve la posición o el índice de la primera letra o subcadena que coincida con subcadena a partir de inicio.
- Italics () € muestra la cadena en letra cursiva.
- LastIndexOf (subcadena) € devuelve la posición de la última letra o subcadena que coincida con el parámetro que hemos pasado.
- Link (URL) € hace lo contrario que el método anchor. Nos aparecerá subrayado el contenido del objeto string.
- Small ()€ muestra la cadena con un tipo de fuente pequeño. Strike () € muestra la cadena con el texto tachado.
- Sub () € muestra la cadena en subíndice. Sup () € muestra la cadena en superíndice.
- Substring (inicio, final) € nos devuelve el texto contenido entre la posición inicial y final. ToLowerCase () € nos devuelve la cadena en minúsculas.
- ToUpperCase () € nos devuelve la cadena en mayúsculas
Ejemplo
<script language="jаvascript" type="text/jаvascript">
<!—
var frase = “Hoy es Lunes”;
document.write (“frase =” + frase + `<br>');
document.write (“Longitud =” + frase.length + `<br>');
document.write (“Negrita =” + frase.bold + `<br>');
document.write (“Negrita =” + frase.bold () + `<br>');
document.write (“Mayúsculas =” + frase.toUpperCase () + `<br>');
//-- >
</script>Objeto Math
Lo utilizaremos para efectuar cálculos matemáticos o funciones trigonométricas. Sus propiedades son:
- E: contiene el número e.
- LN2: contiene el logaritmo natural de 2. LN10: contiene el logaritmo natural de 10. LOG2E: contiene el logaritmo de e en base 2.
- LOG10E: contiene el logaritmo de e en base 10. PI: contiene el número pi.
- SQRT1_2: contiene la raíz cuadrada de ½. SQRT2: contiene la raíz cuadrada de 2.
- Sus métodos son:
- Abs (n) € devuelve el valor absoluto de n.
- Acos (n) € devuelve el arcocoseno de n expresado en radianes. Asin (n) € devuelve el arcoseno de n expresado en radianes.
- Atan (n)€ devuelve la arcotangente del ángulo n.
- Ceil (n) € devuelve el menor valor entero que es igual o mayor que n. Cos (n) € devuelve el coseno del ángulo n.
- Exp (n) € devuelve el número e elevado a n.
- Floor () € devuelve el valor entero mayor que sea igual o menor que n. Log (n) € calcula el logaritmo natural de n en base e.
- Max (x,y) € devuelve el mayor de x e y. Min (x,y) € devuelve el menor de x e y.
- Pow (x,y) € calcula la potencia x elevado a y.
- Random () € devuelve un número aleatorio entre cero y uno. Round (n) € devuelve el número redondeado.
- Sin (n) € devuelve el seno del ángulo n expresado en radianes. Sqrt (n) € devuelve la raíz cuadrada de n.
- Tan (n) € nos devuelve la tangente del ángulo n.
Objeto Date
Se usa para trabajar con fechas y con horas. Por ejemplo:
Var fecha = new Date (); (Fecha y hora del equipo) También se puede poner:
Var fecha = new Date (cadena); siendo cadena (“día, mes, año, hh, mm, ss”) La tercera manera de ponerlo es:
Var fecha = new Date (año, mes, día, hh, mm, ss);- GetDate () € nos devuelve el día del mes. Un número entre 1 y 31. GetDay () € nos devuelve el día de la semana siendo el cero el domingo. GetHours () € nos devuelve la hora.
- GetMinutes () € nos devuelve los minutos comprendidos entre 0 y 59. GetMonth () € nos devuelve el número del mes siendo el cero enero. GetSeconds () € nos devuelve los segundos comprendidos entre 0 y 59.
- GetTime () € nos devuelve los milisegundos que han pasado desde el de enero de 1970 hasta la fecha indicada.
- GetYear () € devuelve el año.
- SetDate () € establecemos el día del mes. SetHours () € establecemos las horas.
- SetMinutes () € establecemos los minutos. SetMonth () € establecemos el mes.
- SetSeconds () € establecemos los segundos.
- SetTime (ms) € devuelve la fecha equivalente a los milisegundos que le pasemos a partir del 1 de enero de 1970.
- SetYear () € establecemos el año.
- ToLocaleString () € nos devuelve una cadena que contiene la fecha actual.
- Parse () € le pasamos una cadena y lo convierte a un objeto de tipo date.
<body>
<script language="jаvascript" type="text/jаvascript">
var fecha = new Date ();
document.write (“Hoy estamos a” + fecha.getDate ());
document.write (“del mes nº” + fecha.getMonth () + 1);
document.write (“del año” + fecha.getYear () + 1900);
document.write (“y son las” + fecha.getHours () + “horas” + fecha.get.Minutes () + “Minutos”);
</script>
</body>Objeto Window
Hace referencia a la ventana del navegador, al programa. Las propiedades de este objeto son:
- DefaultStatus: contiene el mensaje a mostrar en la barra de estado del navegador. Frames: es un array que contiene todos los frames de una página.
- Length: contiene el número de frames. Name: contiene el nombre de la ventana.
- Parent: se utiliza para hacer referencia a alguna ventana que contenga la etiqueta frameset. Self: hace referencia a la ventana activa.
- Status: hace referencia a la barra de estado del navegador. Top: hace referencia a una ventana superior del navegador.
- Window: es lo mismo que self, hace referencia a la ventana activa.
- Document: hace referencia al documento que estamos viendo en el navegador. Frame: hace referencia al frame activo. Devolvería el nombre del frame activo. Location: contiene la URL del documento que se muestra.
- Los métodos son: (pudiendo poner window.método () o método a secas)
- Alert (“mensaje”) => muestra una ventana de alerta con el mensaje que pongamos y un botón de aceptar.
- Close () => cierra una ventana.
- Confirm (“mensaje”) => muestra una vetana con un botón de aceptar o cancelar.
- Open (“URL”, “nombre ventana”, [opciones]) => abre una nueva ventana y carga en esa ventana el documento que refleje URL. Con nombre ventana le asignamos un nombre para poder cerrarla después.
- toolbar = yes/no :si queremos que la ventana nueva tenga la barra de herramientas.
- location = yes/no : hace referencia al campo donde introducimos la URL donde introducimos la URL de la página.
- directories = yes/no : hace referencia a los botones de directorio.
- status = yes/no : hace referencia a la barra de estado.
- menubar = yes/no : hace referencia a la barra de los menús.
- scrollbar = yes/no : si queremos que la ventana tenga barras de desplazamiento.
- resizable = yes/no :si queremos que la ventana se pueda redimensionar.
- width = número :ancho de la ventana.
- height = número :alto del navegador.
prompt (“mensaje” [“cadena”] => nos muestra una ventana con un botón de aceptar, otro de cancelar y una caja de texto. Para recoger el dato introducido, este método se puede guardar en una variable. Por ejemplo: var cad = prompt (“Escribe tu nombre”)
setTimeout (ms) => retrasa la ejecución de una instrucción los milisegundos que le indiquemos. También hay que guardarlo en una variable.
focus () => coloca el enfoque en una determinada ventana. Hace referencia a la ventana activa. Por ejemplo: ventana2.focus ().
blur () => quita el enfoque de la ventana activa que indiquemos.
scroll () => recorre la ventana.
Objeto Location
Este objeto hace referencia al campo dirección de la ventana del navegador. Además de ser independiente, es una propiedad del objeto window. No tiene ningún método. Sólo tiene propiedades. El formato es:
Protocol//hostname : port pathname search hash
Protocol => hace referencia al tipo de protocolo incluyendo los dos puntos.Hostname => hace referencia a la dirección de la página siendo su número IP o su nombre del dominio.
Port => hace referencia al puerto por el que se realiza la conexión. Por defecto en HTTP es 80.
Pathname => hace referencia a la ruta del directorio de la página.
Search => hace referencia a la ruta del directorio de la página. Es equivalente al parámetro TARGET de HTML.
Hash => especifica un nombre de ancla (enlace a una misma página). EJEMPLO
Ejemplo:
<body>
<a name = “top”> </a>
Al final de la página hay un botón
<br>
<script language = “jаvascript”>
<!—
for (var i = 1; i<40; i++) {
document.write(“más abajo”+'<BR><P>');
//-->
</script>
<formname = “formulario”>
<input type = “button” name = “botón” value = “volver arriba” onclick = “location.hash = `top'”>
</form>
</body><html>
<head>
<title>Nueva ventana </title>
</head>
<body>
<script language = “jаvascript”>
<!—
= no”);
function abrir () {
miventana = open (“”, “Mi_ventana, toolbar = no, directories = no, menubar = no”);
miventana.document.write(“<head><title>Una nueva ventana</title></head>”);
miventana.document.write(“<center><H1><b>Cabeceras</b></h1>
</center>”);
}
//-->
</script>
<form>
<input type = “button” name = “botón” value = “Pincha aquí” onclick = “abrir ()”>
</form>
</body>
</html> Objeto Document
Hace referencia al archivo HTML que vemos en el navegador. Las propiedades que tiene son:
- Alinkcolor => hace referencia al color de un enlace cuando pinchemos en él.
- Anchors => es un array que contiene las anclas que hay en el documento.
- Bgcolor => hace referencia al color de fondo de nuestra página.
- Cookie => hace referencia a una cookie.
- Forms => es un array que contiene los formularios que hay en el documento.
- LastModified => hace referencia a la última fecha y hora de la modificación de la página.
- LinkColor => se refiere al color del enlace cuando aún no lo hemos visitado.
- Links => es un array que hace referencia a los enlaces que hay en nuestra página.
- Location => contiene la URL de nuestro documento.
- Title => se refiere al título de la página.
- Vlinkcolor => se refiere al color de un enlace cuando ya lo hemos visitado.
- Length => (sólo para anchors, forms, links) contiene el número de elementos de ese array. Los métodos son:
- Clear () => borra la página de nuestra navegador.
- Close () => cierra el documento pero no cierra la ventana. Open () € vuelve a hacer activos todos esos elementos. Write () € imprime una cadena en la página.
- Writln () => imprime una cadena en la página haciendo un salto de línea aunque suele funcionar en sistemas operativos UNIX.
Objeto History
Contiene las direcciones que el usuario ha visitado en la ventana actual.
Sólamente tiene una propiedad:
Length => contiene el número de registros del objeto history.
Los métodos son:
- Back () => va a la página anterior.
- Forward () => va a la página siguiente.
- Go () => va al registro que nosotros le indiquemos.
Document.history : ventana actual
Nombre marco.history
Ventana.history
Objeto Navigator
Contiene información sobre el navegador que está utilizando el usuario. No tiene métodos y tiene tres propiedades:
- AppCodeName => contiene el código del navegador.
- AppName => contiene el nombre del navegador.
- AppVersion => contiene la versión del navegador.
<body>
<script language = “jаvascript”>
document.write(“Código:”+navigator.appCodeName+'<P>');
document.write(“Nombre:”+navigator.appName+'<P>');
document.write(“Versión:”+navigator.appVersion+'<P>');
</script>
</body>Se refiere a un texto o imagen que se hay incluido en la etiqueta <a href>. Las propiedades de cada objeto link son las mismas que el objeto location y tampoco tiene métodos.
href => hace referencia a lo que es la URL completa de una página
Ejemplo:
<HTML>
<HEAD>
<TITLE> 2 Frames con 1 click </TITLE>
</HEAD>
<FRAMESET cols = “40%, *”>
<FRAME name = “fr1” src = “pg1.htm”>
<FRAMESEt rows = “50%, *”>
<FRAME name = “fr2” src = “”>
<FRAME name = “fr3” src = “”>
</FRAMESET>
</FRAMESET>
<BODY> Sin frames </BODY>
</HTML><HTML>
<HEAD>
<TITLE> Página 1 </TITLE>
<SCRIPT language = “jаvascript”>
<!—
function cargar (p1, p2){
parent.fr2.location.href = p1; parent.fr3.location.href = p2;
}
//-->
</SCRIPT>
<BODY>
<FORM>
<INPUT type = “button” value = “2 en 1” onclick = “cargar (`pg2.htm','pg3.htm')”>
</FORM>
</BODY>
</HTML>Objet Form
Es un objeto que nos permite denominar formularios y modificar o comprobar el valor de sus campos antes de enviarlos a un servidor.
Podemos utilizar la forms que es un array para acceder al contenido de un formulario escribiendo:
- Document.forms[n].nombre elemento.contenido
- Document.formulario.nombre elemento.contenido
Checked => contiene el estado de ese elemento. Si están marcadas nos va a devolver true. Si no, devolverán false.
Ejemplo:
<HTML>
<HEAD>
<TITLE> Objeto FORM </TITLE>
<SCRIPT language = “jаvascript”> function ventana (){
var cadena = “”; if(documetn.forms[0].mayorDeEdad.checked){
cadena = “mayor de edad”;
}
else {
}
cadena = “menor de edad”;
alert(“El nombre del campo de texto es:”+document.forms[0].nombre.name+”,\su contenido es:”+document.formulario.nombre.value+”\n y eres”+cadena);
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<FORM name = “formulario”>
<INPUT type = “text” name = “nombre”> <P>
<INPUT type = “checkbox” name = “mayorDeEdad” checked> Mayor de Edad <P>
<INPUt type = “button” name = “botón” value = “Pulsar” onclick = “ventana ()”>
</FORM>
</CENTER>
</BODY>
</HTML>| Atrás... | Indice del curso.... |
Mas sobre formulario...
Mas sobre jаvascript...
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!