Códigos Ficheros Con Javascript

PAGINAS CON JAVASCRIPT
01_Saludo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-88591" />
<title>El primer script</title>
<script type="text/javascript"> alert("Hola Mundo!"); </script>
</head>
<body>
<p>Esta pgina contiene el primer script</p>
</body>
</html>
02_Mensaje.html
<head>
<title>El primer script</title>
<script type="text/javascript src=javascript/js/codigo.js"> </script>
</head>
<body>
<p onclick="mostrarMsj()">Esta página contiene el primer
script</p>
</body>
</html>
codigo.js
function mostrarMsj(){ alert("Hola Mundo"); }
03_Mensaje.html
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf8">
<script type="text/javascript" src="js/functions.js"></script>
</head>
<body onload="alert('Completada la carga de la pgina')">
<div>
<p>Aqu un prrafo de texto situado antes de la imagen, dentro de un div
contenedor</p>
<img onclick="mostrarMensaje1()" src="http://i.imgur.com/afC0L.jpg"
alt="Notepad++"
title="Notepad++, un til editor de texto">
<p onclick="mostrarMensaje2()">Aqu otro prrafo de texto. JavaScript es un
lenguaje utilizado
para dotar de efectos dinmicos a las pginas web.</p>

</div>
</body>
</html>
functions.js
function mostrarMensaje1(){
alert('Bienvenido al curso JavaScript de aprenderaprogramar.com');
}
function mostrarMensaje2(){
alert('Ha hecho click sobre el prrafo inferior');
}
04_HoraActual.html
<html>
<head>
<title>Llamando a una funci&oacuten que devuelve la hora actual</title>
</head>
<body>
<script language="JavaScript">
if(confirm("\u00BFQuiere saber la hora?")){
mostrar_hora();
}
function mostrar_hora(){
var ahora= new Date();
alert("Fecha: " + ahora);
var horas= ahora.getHours();
var minutos= ahora.getMinutes();
var segundos= ahora.getSegundos();
var horaActual= horas + ":" + minutos + ":" + segundos;
alert("la hora actual donde se encuentra es: " + horaActual);
}
</script>
</body>
</html>
05_Factorial.html
<html>
<head><title>Factorials</title></head>
<body>
<h2>Table of Factorials</h2>
<script>
var fact = 1;
for(i = 1; i < 10; i++) {
fact = fact*i;
document.write(i + "! = " + fact + "<br>");
}
</script>
</body>
</html>
06_Button.html
<button onclick="alert('You clicked the button');">
Click here
</button>
07_Loan_Calculator.html
<html>
<head>
<title>JavaScript Loan Calculator</title>
<style>
/* This is a CSS style sheet: it adds style to the program output */
.result { font-weight: bold; } /* For elements with class="result" */
#payment { text-decoration: underline; } /* For element with
id="payment" */
</style>
</head>
<body>
<!-This is an HTML form that allows the user to enter data and allows JavaScript
to display the results it computes back to the user. The form elements are
embedded in a table to improve their appearance. The form itself is given the
name "loandata", and the fields within the form are given names such as
"interest" and "years". These field names are used in the JavaScript code that
follows the form.
Note that some of the form elements define "onchange" or "onclick" event
handlers. These specify strings of JavaScript code to be executed when the
user enters data or clicks on a button.
-->
<form name="loandata">
<table>
<tr><td><b>Enter Loan Information:</b></td></tr>
<tr>
<td>1) Amount of the loan (any currency):</td>
<td><input type="text" name="principal" onchange="calculate();"></td>
</tr>
<tr>
<td>2) Annual percentage rate of interest:</td>
<td><input type="text" name="interest" onchange="calculate();"></td>
</tr>
<tr>
<td>3) Repayment period in years:</td>
<td><input type="text" name="years" onchange="calculate();"></td>
</tr>
<tr><td></td>
<td><input type="button" value="Compute" onclick="calculate();"></td>
</tr>
<tr><td><b>Payment Information:</b></td></tr>
<tr>
<td>4) Your monthly payment:</td>
<td>$<span class="result" id="payment"></span></td>
</tr>
<tr>
<td>5) Your total payment:</td>
<td>$<span class="result" id="total"></span></td>
</tr>
<tr>
<td>6) Your total interest payments:</td>
<td>$<span class="result" id="totalinterest"></span></td>

</tr>
</table>
</form>
/*
* This is the JavaScript function that makes the example work. Note that this
script defines the
* calculate() function called by the event handlers in the form. The function
reads values from the
* form <input> fields using the names defined in the HTML code above. It
outputs its results into
* the named <span> elements.
*/
function calculate( ) {
// Get the user's input from the form. Assume it is all valid.
// Convert interest from a percentage to a decimal, and convert from an
annual rate to a monthly
// rate. Convert payment period in years to the number of monthly payments.
var principal = document.loandata.principal.value;
var interest = document.loandata.interest.value / 100 / 12;
var payments = document.loandata.years.value * 12;
// Now compute the monthly payment figure, using esoteric math.
var x = Math.pow(1 + interest, payments);
var monthly = (principal*x*interest)/(x-1);
// Get named <span> elements from the form.
var payment = document.getElementById("payment");
var total = document.getElementById("total");
var totalinterest = document.getElementById("totalinterest");
// Check that the result is a finite number. If so, display the results by setting
the HTML
// content of each <span> element.
if (isFinite(monthly)) {
payment.innerHTML = monthly.toFixed(2);
total.innerHTML = (monthly * payments).toFixed(2);
totalinterest.innerHTML = ((monthly*payments)-principal).toFixed(2);
}
// Otherwise, the user's input was probably invalid, so display nothing.
else {
payment.innerHTML = "";
total.innerHTML = ""
totalinterest.innerHTML = "";
}
}
</script>
</body>
</html>
08_datosArray.html

<head>
<title>Mostrar Datos Array</title>
<script type="text/javascript" src="js/datosArray.js"> </script>
</head>
<body>
<button onclick="mostrarDatos();">Mostrar Datos Tabla</button>
<p onclick="mostrarDatos()">Mostrar datos</p>
</body>
</html>
datosArray.js
function mostrarDatos(){
var
meses=['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre',
'Octubre','Noviembre','Diciembre'];
var msg="";
for(i=0;i<meses.length; i++)
msg= msg + meses[i]+ ",";
alert(msg);
}
09_Funcion_Eval.html
<html>
<head>
<title>Curso de JavaScript</title>
<script type="text/javascript">
function f1(){
var n1 = eval("10 * 10");
alert(n1);
// Devuelve 100
}
function f2(){
var n1 = eval("10 * 10");
var n2 = eval( "n1 + (40 * 2)");
alert(n2); // Devuelve 180
}
function f3(){
// Al procesarse esta lnea se mostrar el alert() con el texto y el
resultado de la suma:
eval( alert("La suma de 2 y 3 es igual a " + (2+3)) );
}
function f4(){
// Se mostrar el alert() con el texto y el resultado de la suma, como en el
ejemplo anterior:
eval( "alert('La suma de 2 y 3 es igual a ' + (2+3))" );
}
</script>
</head>
<body>
<p onclick="f1()">Evaluar 10 * 10</p>

<p onclick="f2()">Evaluar 100 + (40*2)</p>
<p onclick="f3()">Evaluar suma 2+3</p>
<p onclick="f4()">Evaluar suma 2+3</p>
</body>
</html>
10_Funcion_Timeout.html
<html>
<head>
var temporizador;
function iniciar() {
temporizador = setTimeout("mensaje()", 5000);
}
function detener() {
clearTimeout( temporizador );
}
function mensaje() {
alert("Han transcurrido 5 segundos.");
}
</script>
</head>
<body onload="iniciar();">
<p><b>Temporizador de 5000 milisegundos</b></p>
</body>
</html>
11_Funcion_Interval.html
<html>
<head>
var temporizador;
function iniciar() {
temporizador = setInterval("mensaje()", 5000);
}
function detener() {
clearInterval( temporizador );
}
function mensaje() {
alert("Han transcurrido 5 segundos.");
}
</script>
</head>
<body>
<input type="button" value="Iniciar temporizador"
onclick="iniciar();" />
<input type="button" value="Detener temporizador"
onclick="detener();" />
</body>
</html>
12_Crear_Numeros.html
<html>
<head>
function ejemplo(){
var objNumero1 = new Number( "" );
var objNumero2 = new Number( " " );
var objNumero3 = new Number( null );
var objNumero4 = new Number( undefined );
var objNumero5 = new Number( "0900" );
var objNumero6 = new Number( "0X900" );
var objNumero7 = new Number( 0900 );
var objNumero8 = new Number( 0X900 );
var objNumero9 = new Number(55);
var objNumero10 = new Number(" 55");
var objNumero11 = new Number("55 ");
var objNumero12 = new Number("55");
var objNumero13 = new Number("55 77");
var objNumero14 = new Number("55 BC");
var objNumero15 = new Number("BC 55");
var objNumero16 = new Number("55A");
var objNumero17 = new Number("B-55A");
var objNumero18 = new Number(true);
var objNumero19 = new Number(false);
var objNumero20 = new Number( new Date() );
var objNumero21 = new Number( 55,60 );
var objNumero22 = new Number( 55.60 );
document.write( "\"\"= " + objNumero1 + "<br />" ); // Devuelve 0
document.write( "\" \"= " + objNumero2 + "<br />" ); // Devuelve
0
document.write( "null= " +objNumero3 + "<br />" ); // Devuelve 0
document.write( "undefined= " + objNumero4 + "<br />" ); //
Devuelve NaN
document.write( "0900= " + objNumero5 + "<br />" ); // Devuelve
900
document.write( "0X900= " + objNumero6 + "<br />" ); //
Devuelve 2304
document.write( "(En rojo)0900= " + objNumero7 + "<br />" ); //
Devuelve 900
document.write( "(En rojo)0X900= " + objNumero8 + "<br />" ); //
Devuelve 2304
document.write( "(En rojo)55= " + objNumero9 + "<br />" ); //
Devuelve 55
document.write( " 55= " + objNumero10 + "<br />" ); // Devuelve
55
document.write( "55 =" + objNumero11 + "<br />" ); // Devuelve
55
document.write( "55= " + objNumero12 + "<br />" ); // Devuelve
55
document.write( "55 77= " + objNumero13 + "<br />" ); //

Devuelve NaN
document.write( "55 BC= " + objNumero14 + "<br />" ); //
Devuelve NaN
document.write( "BC 55= " + objNumero15 + "<br />" ); //
Devuelve NaN
document.write( "55A= " + objNumero16 + "<br />" ); // Devuelve
NaN
document.write( "B-55A= " + objNumero17 + "<br />" ); //
Devuelve NaN
document.write( "true= " + objNumero18 + "<br />" ); // Devuelve
1
document.write( "false= " + objNumero19 + "<br />" ); // Devuelve
0
// Te dar un valor diferente, ya que hars el clculo en otra fecha y
hora:
document.write( "new Date()= " + objNumero20 + "<br />" ); //
Devuelve
document.write( "55,60= " + objNumero21 + "<br />" ); //
Devuelve 55
document.write( "55.60= " + objNumero22 + "<br />" ); //
Devuelve 55.6
}
</script>
</head>
<body onload="ejemplo();">
<h2> Creación de Números </h2>
</body>
</html>
13_Comprobar_Numeros.html
<html>
<head>
function ejemplo(){
document.write("Es NaN?: <br/>");
document.write( "33= " + isNaN(33)
+ "<br />" ); //
Devuelve: false
document.write( "-33= " + isNaN(-33) + "<br />" ); //
Devuelve: false
document.write( "33= " + isNaN("33") + "<br />" ); //
Devuelve: false
document.write( "h33= " + isNaN("h33") + "<br />" ); //
Devuelve: true
document.write( "x33= " + isNaN("x03") + "<br />" ); //
Devuelve: true
document.write( "33H= " + isNaN("33H") + "<br />" ); //
Devuelve: true
document.write( "33-p= " + isNaN("33-p") + "<br />" ); //
Devuelve: true
document.write( "null= " + isNaN(null) + "<br />" );
//
Devuelve: false
document.write( "\"\"= " + isNaN("")
+ "<br />" );
//
Devuelve: false
document.write( "\" \"= " +isNaN(" ") );
// Devuelve:
false
}
</script>
</head>
Comprobación de números
</body>
</html>
14_Numeros_Decimales
<html>
<head>
function ejemplo(){
document.write( objNumero1.toFixed(2) + "<br />" );
//
Devuelve 55.00
//
Devuelve 55.000
var objNumero3 = new Number("55.4");
document.write( objNumero3.toFixed() + "<br />" );
//
Devuelve 55
//
Devuelve 56
//
Devuelve 56
}
</script>
</head>
<body align= "center" onload="ejemplo();">
<p>Uso del método toFixed(). </p>
</body>
</html>
15_Numeros_Precision.html
<html>
<head>
function ejemplo(){
var objNum1 = new Number("55.867");
document.write( objNum1.toPrecision() + "<br />" ); // Devuelve
"55.867"
document.write( objNum1.toPrecision(2) + "<br />" ); // Devuelve
"56"
"55.9"

"55.87"
}
</script>
</head>
<body onload="ejemplo();"> Este texto no lo escribe el navegador
</body>
</html>
16_Numeros_Convertir
<html>
<head>
function ejemplo(){
document.write( parseInt("50365", 8) + "<br />" ); // Devuelve:
20725 (octal)
50365 (decimal)
328549
document.write( parseInt("33,565")
+ "<br />" ); // Devuelve: 33
document.write( parseInt("44.565")
+ "<br />" ); // Devuelve: 44
document.write( parseInt("88")
+ "<br />" ); // Devuelve: 88
document.write( parseInt("088556")
+ "<br />" ); // Devuelve: 0
document.write( parseInt("0x88556") + "<br />" ); // Devuelve:
558422
document.write( parseInt("true")
+ "<br />" ); // Devuelve: NaN
document.write( parseInt("false")
+ "<br />" ); //
Devuelve: NaN
document.write( parseInt( new Date() ) + "<br />" ); // Devuelve:
NaN
document.write( parseInt("12/07/2011") + "<br />" ); // Devuelve:
12
document.write( parseInt("p55")
+ "<br />" ); // Devuelve: NaN
document.write( parseFloat("33,4") + "<br />" );
// Devuelve: 33
// Devuelve: 33
// Devuelve: 33
document.write( parseFloat("44.4") + "<br />" );
// Devuelve:
44.4
// Devuelve:
44.56
// Devuelve:
44.6
// Devuelve:
55.4
document.write( parseFloat("55.A6") + "<br />" );
// Devuelve: 55
document.write( parseFloat("5B5.6") + "<br />" );
// Devuelve: 5
document.write( parseFloat("C55.6") + "<br />" );
// Devuelve:
NaN
}
</script>
</head>
Convertir a valores enteros y coma flotante.

</body>
</html>
17_Funciones_Math.html
<html>
<head>
function ejemplo(){
document.write("abs():<br />");
document.write( Math.abs(33) + "<br />"); //
Devuelve: 33
document.write( Math.abs(-33) + "<p />");
//
Devuelve: 33
document.write("min() y max:<br />");
document.write( Math.min(3,5,7) + "<br />"); //
Devuelve: 3
document.write( Math.max(3,5,7) + "<p />"); //
Devuelve: 7
document.write("sqrt():<br />");
document.write( Math.pow(2,3) + "<p />");
//
Devuelve: 8 (2*2*2)
document.write("sqrt():<br />");
document.write( Math.sqrt(9) + "<p />");
// Devuelve:
3
document.write("ceil():<br/>");
document.write( Math.ceil(7.4) + "<br />"); //
Devuelve: 8
document.write( Math.ceil(7.5) + "<br />"); //
Devuelve: 8
document.write( Math.ceil(7.6) + "<p />"); // Devuelve:
8
document.write("floor():<br/>");
document.write( Math.floor(7.4) + "<br />"); //
Devuelve: 7
document.write( Math.floor(7.5) + "<br />"); //
Devuelve: 7
document.write( Math.floor(7.6) + "<p />"); //
Devuelve: 7
document.write("round():<br/>");
document.write( Math.round(7.4) + "<br />"); //
Devuelve: 7
document.write( Math.round(7.5) + "<br />"); //
Devuelve: 8
document.write( Math.round(7.6) + "<p />"); //
Devuelve: 8
}
</script>
</head>
Funciones del Objeto Math.
</body>
</html>
18_Fechas_Crear.html
<html>
<head>
function ejemplo(){
var objFecha1 = new Date();
var objFecha2 = new Date("May 14, 2011");
var objFecha3 = new Date("May 14, 2011 20:21:22");
var objFecha4 = new Date(2011, 4, 14); // Los meses comienzan
desde 0. 4 es Mayo
var objFecha5 = new Date(2011, 4, 14, 20, 21, 22);
// Devuelve la fecha actual, por ejemplo: "Mon May 16 13:52:40
UTC+0100 2011"
document.write( objFecha1 + "<br />" );
// Devuelve "Sat May 14 00:00:00 UTC+0100 2011"
// Creamos una fecha no vlida (febrero del 2011 tiene slo 28 das):
var objFecha = new Date (2011, 1, 29);
var dia = objFecha.getDate();
var mes = objFecha.getMonth();
var anio = objFecha.getFullYear();
// Devuelve: '1/2/2011':
document.write( dia + "/" + mes + "/" + anio );
}
</script>
</head>
Creación de Fechas
</body>
</html>
19_Fechas_Obtener.html
<html>
<head>
function ejemplo(){
var objFecha = new Date(2011, 4, 14, 20, 21, 22);
document.write( objFecha.getDate() + "/" + objFecha.getMonth() + "/"
+
objFecha.getFullYear() + "<br />" );
//
Devuelve: "14/4/2011"
// Devuelve: "14/5/2011" (puede variar dependiendo del navegador web
usado)
document.write("toLocaleDateString(): " +
objFecha.toLocaleDateString() + "<br />" );
document.write( objFecha.getHours()+ ":" + objFecha.getMinutes() + ":"

+
objFecha.getSeconds() + "<br />" );
// Devuelve: "20:21:22"
// Devuelve: "20:21:22"
document.write("toLocaleTimeString(): " +
objFecha.toLocaleTimeString() + "<br />" );
}
</script>
</head>
Obtención de datos de fechas.
</body>
</html>
20_Fechas_Modificar.html
<html>
<head>
function ejemplo(){
objFecha.setDate(14);
objFecha.setMonth(4);
objFecha.setFullYear(2011);
objFecha.setHours(20);
objFecha.setMinutes(21);
objFecha.setSeconds(22);
alert( objFecha ); // Devuelve: "Sat May 14 20:21:22
UTC+0100 2011"
}
</script>
</head>
<body onload="ejemplo();"> Modificar datos de objeto Date.
</body>
</html>
21_Fechas_Validar_1.html
<html>
<head>
// NOTA: esta funcin tiene en cuenta los meses desde 1 hasta 12, en
lugar de 0 a 11
function validarFecha ( d, m, a ){
var ok = true;
if( (a < 1900) || (a > 2050) || (m < 1) || (m > 12) || (d < 1) || (d > 31) )
ok = false;
else {
if( (a%4 != 0) && (m == 2) && (d > 28) )
ok = false;
else {
if( (((m == 4) || (m == 6) || (m == 9) || (m==11)) && (d>30)) ||
((m==2) && (d>29)) )
ok = false;
}
}
return ok;
}
// ----------------------------function ejemplo()
{
// Devuelve 'false' ya que febrero del 2011 tiene slo 28
das:
document.write( validarFecha(29, 2, 2011) + "<br />");
// Devuelve 'true'
document.write( validarFecha(7, 10, 2010) + "<br />");
}
</script>
</head>
Valida Fechas.
</body>
</html>
22_Fechas_Validar_2.html
<html>
<head>
function trim( cadena ) {
cadena += "";
cadena = cadena.replace(/^\s+/, '');
return cadena.replace(/\s+$/, '');
}
// ----------------------------// NOTA: esta funcin tiene en cuenta los meses desde 1 hasta 12, en
lugar de 0 a 11
function esFecha( cadena ){
if( (trim(cadena) == "") || (trim(cadena).length != 10) )
return false;
var dia = parseInt(cadena.substr(0,2), 10);
var mes = parseInt(cadena.substr(3,2), 10);
var anio = parseInt(cadena.substr(6,4), 10);
if( isNaN(anio) || (anio < 1900) )
return false;
if( isNaN(mes) || (mes < 1) || (mes > 12) )
return false;
if( isNaN(dia) || (dia < 1) || (dia > 31) )
return false;
else{
if( (dia == 31) && ((mes == 4 ) || (mes == 6) || (mes == 9)
|| (mes == 11)) )
return false;
var diaMax = 31;
if( (anio % 4 == 0) && (anio % 100 != 0) || (anio % 400 == 0) )
diaMax = 29;
else
diaMax = 28;
if( dia > diaMax )

return false;
}
return true;
}
// ----------------------------function ejemplo(){
// Devuelve 'false' ya que febrero del 2011 tiene slo 28 das:
document.write( esFecha("29/02/2011") + "<br />");
// Devuelve 'true'
document.write( esFecha("07/10/2010") + "<br />");
}
</script>
</head>
Validación de Fechas.
</body>
</html>
22_Fechas_UTC.html
<html>
<head>
function ejemplo(){
// Devuelve: "14/5/2011"
document.write( objFecha.getUTCDate() + "/" +
objFecha.getUTCMonth() + "/" +
objFecha.getUTCFullYear() + "<br />" );
// Devuelve: "19:21:22"
document.write( objFecha.getUTCHours()+ ":" +
objFecha.getUTCMinutes() + ":" +
objFecha.getUTCSeconds() );
}
</script>
</head>
Fechas UTC
</body>
</html>
23_Fechas_UTC.html
<html>
<head>
function ejemplo()
{
// Devuelve: 1305400882000
document.write( objFecha.getTime() + "<br />" );
// Devuelve: 1305327600000
document.write( Date.parse("May 14, 2011") + "<br />" );
// Devuelve: 1305331200000
document.write( Date.parse("May 14, 2011 UTC") + "<br />" );
// Devuelve: 1305400882000
document.write( Date.parse("May 14, 2011 20:21:22") + "<br />" );
// Devuelve: 1305404482000
document.write( Date.parse("May 14, 2011 20:21:22 UTC") + "<br />" );
// Devuelve: 1305404482000
document.write( Date.UTC(2011, 4, 14, 20, 21, 22) );
}
</script>
</head>
Fechas UTC
</body>
</html>
24_Fechas_UTC.html
<html>
<head>
function ejemplo(){
objFecha.setUTCDate(14);
objFecha.setUTCMonth(11);
objFecha.setUTCFullYear(2011);
objFecha.setUTCHours(20);
objFecha.setUTCMinutes(21);
objFecha.setUTCSeconds(22);
// Devuelve: "Wed Dec 14 20:21:22 UTC 2011"
alert( objFecha );
}
</script>
</head>
Fechas UTC
</body>
</html>
25_Fechas_UTC.html
<html>
<head>
function mostrarFechaHora( objFecha ){
document.body.innerHTML += "[" + objFecha.getDate() + "/" +
objFecha.getMonth() + "/"
+ objFecha.getFullYear() + " - " + objFecha.getHours() + ":" +
objFecha.getMinutes() + ":"
+ objFecha.getSeconds() + "]<br />";
}
function ejemplo(){
var milisegundos = objFecha.getTime();
mostrarFechaHora( objFecha );
// Sumar 2 hora:
objFecha.setTime( milisegundos + (2 * 3600000) );
// Sumar 2 das:
objFecha.setTime( milisegundos + (2 * 86400000) );
// Restar 3 das:
objFecha.setTime( milisegundos - (3 * 86400000) );
}
</script>
</head>
<p>Fechas en JavaScript</p>
</body>
</html>
26_Fechas_UTC.html
<html>
<head>
function ejemplo(){
// Crear dos objetos de tipo fecha:
var objFecha1 = new Date( 2011, 4, 1 );
var objFecha2 = new Date( 2011, 4, 30 );
// Obtener el nmero de milisegundos de cada una:
var milisegundos1 = objFecha1.getTime();
var milisegundos2 = objFecha2.getTime();
var dif = null;
// Obtener la diferencia en milisegundos entre ambas fechas, la
// fecha inicial no puede ser mayor que la final:
if( milisegundos2 >= milisegundos1 )
dif = milisegundos2 - milisegundos1;
if( dif == null )
document.body.innerHTML += "La fecha inicial es mayor que la
final.";
else{
var segundos = dif / 1000;
var minutos = dif / 60000;
var horas = dif / 3600000;
var dias
= dif / 86400000;
document.body.innerHTML += "Entre ambas fechas hay una
diferencia de [" + dif
+
"] milisegundos.<br />";
diferencia de [" +
segundos + "]
segundos.<br />";
diferencia de [" +
minutos + "]
minutos.<br />";
diferencia de [" + horas
+ "] horas.<br />";

diferencia de [" + dias
+ "] das.<br />";
}
}
</script>
</head>
<p>Fechas UTC</p>
</body>
</html>
27_Fechas_UTC.html
<html>
<head>
<title>www.aprender-informatica.com - Curso de JavaScript</title>
var objeto_fecha = new Date(2011, 4, 10, 15, 00, 00);
function sumarRestarDias( objFecha, nDias, accion ){
var milisegundos_fecha = objFecha.getTime();
// Obtener los milisegundos de los das a sumar:
var milisegundos_dias = nDias * 86400000;
// Milisegundos a sumar o restar:
var milisegundos_diferencia;
switch( accion ){
case 0:
// Sumar
milisegundos_diferencia = milisegundos_fecha +
milisegundos_dias;
break;
case 1:
// Restar
milisegundos_diferencia = milisegundos_fecha milisegundos_dias;
break;
default:
// Opcin no vlida
milisegundos_diferencia = -1;
}
// Se obtiene el resultado de realizar la operacin indicada, o null si no
era vlida:
if( milisegundos_diferencia != -1 )
objFecha.setTime( milisegundos_diferencia );
else
objFecha = null;
return objFecha;
}
function mostrarFecha( objFecha ){
var dia = objFecha.getDate();
var mes = objFecha.getMonth();
var anio = objFecha.getFullYear();
document.getElementById("txtFecha").value = dia + "/" + mes + "/"
+ anio;
}
function sumar_dias(){
// Suma 9 das:
var objNuevaFecha = sumarRestarDias( objeto_fecha, 9, 0 );
mostrarFecha( objNuevaFecha );
}
function restar_dias(){
// Resta 5 das:
var objNuevaFecha = sumarRestarDias( objeto_fecha, 5, 1 );
mostrarFecha( objNuevaFecha );
}
</script>
</head>
<body>
<p>Otro ejemplo</b>
<p>Fecha: <input type="text" id="txtFecha" name="txtFecha"
value="10/4/2011" /></p>
<input type="button" id="btnSumarDias" name="btnSumarDias"
value="Sumar 9 das"
onclick="sumar_dias();" />
<input type="button" id="btnRestarDias" name="btnRestarDias"
value="Restar 5 das"
onclick="restar_dias();" />
</body>
</html>
28_Cadenas.html
<html>
<head>
function ejemplo(){
var cadena1 = "Aprendiendo a programar en javaScript";
cadena2 = cadena1.toLowerCase();
document.write( cadena2 + "<br />" );
cadena3 = cadena1.toUpperCase();
document.write( cadena3 + "<br />" );
var cadena = "Aprendiendo a programar en javaScript";
document.write( cadena.charAt(0) + "<br />" ); // Devuelve 'A'
document.write( cadena.charAt(2) + "<br />" ); // Devuelve 'r'
var cadena3 = "Concatenando ";
var cadena4 = "tres cadenas ";
var cadena5 = "de caracteres";
var cadena6= cadena3.concat( cadena4, " ", cadena5 );
alert( cadena6 ); // Devuelve "Concatenando tres cadenas de
caracteres"
}
</script>
</head>
Concatenado de cadenas.
</body>
</html>
29_Cadenas.html
<html>
<head>
function ejemplo() {
var s1 = "C/Redonda n " + 3;
var s2 = String(33);
var s3 = String("44 55");
var s4 = String(true);
var s5 = String(false);
var s6 = String( new Date() );
var s7 = String("10/05/2011");
document.write( s1 + "<br />" ); // Devuelve: "C/Redonda n 3"
document.write( s2 + "<br />" ); // Devuelve: "33"
document.write( s3 + "<br />" ); // Devuelve: "44 55"
document.write( s4 + "<br />" ); // Devuelve: "true"
document.write( s5 + "<br />" ); // Devuelve: "false"
document.write( s6 + "<br />" ); // Devuelve: "Tue May 17 14:41:53
UTC+0100 2011"
document.write( s7 + "<br />" ); // Devuelve: "10/05/2011"
}
</script>
</head>
Objetos Cadena
</body>
</html>
30_Cadenas_Exp_Reg.html
<html>
<head>
function ejemplo(){
// Cadenas de caracteres:
var cadena01 = "Cursos de informatica gratis";
var cadena02 = "25/05/2011";
// Patrones (realizan lo mismo):
var patron01 = /gratis/gi;
var patron02 = new RegExp("gratis", "gi");
var patron03 = /^[a-zA-Z\s]+$/;
var patron04 = new RegExp("^[a-zA-Z\\s]+$");
var patron05 = /^\d{2}\/\d{2}\/\d{4}$/;
var patron06 = new RegExp("^\\d{2}\\/\\d{2}\\/\\d{4}$
document.write( "CADENA: [" + cadena01 + "]<br />" );
document.write( "Encontrada la palabra 'gratis' (en maysculas o
minsculas): [" +
patron01.test(cadena01) + "]<br />" );
document.write( "Encontrada la palabra 'gratis' (en maysculas o

minsculas): [" +
patron02.test(cadena01) + "]<br />" );
document.write( "La cadena tiene slo letras y espacios: [" +
patron03.test(cadena01) +
"]<br />" );
document.write( "La cadena tiene slo letras y espacios: [" +
patron04.test(cadena01) +
"]<p />" );
document.write( "La fecha es vlida: [" + patron05.test(cadena02) +
"]<br />" );
document.write( "La fecha es vlida: [" + patron06.test(cadena02) +
"]<br />" );
}
</script>
</head>
Expresiones Regulares
</body>
</html>
<html>
<head>
function ejemplo(){
var cadena01 = "patron";
var cadena02 = "patrones";
var cadena03 = "PATRONes";
// Patrones:
var patron01 = /patron/; // La cadena contiene 'patron',
en minscula
var patron02 = /patron/i; // La cadena contiene 'patron',
en maysculas o minsculas
var patron03 = /^patron$/; // La cadena es exctamente
'patron', en minscula
// Resultado:
document.write( "La cadena contiene 'patron' en
minscula?: " + patron01.test(cadena01) + "<br />" );
maysculas o minsculas?: " + patron02.test(cadena01) + "<br />" );
document.write( "La cadena es exctamente 'patron',
en minsculas?: " + patron03.test(cadena01) + "<br />" );
document.write( "---------------------<p />" );

document.write( "---------------------<p />" );
}
</script>
</head>
</body>
</html>
<html>
<head>
function ejemplo(){
var cadena01 = "patron";
var cadena02 = "patrones";
var cadena03 = "PATRONes";
// Patrones:
var patron01 = /patron/; // La cadena contiene 'patron', en minscula
var patron02 = /patron/i; // La cadena contiene 'patron', en maysculas
o minsculas
var patron03 = /^patron$/; // La cadena es exctamente 'patron', en
minscula
// Resultado:
document.write( "La cadena contiene 'patron' en minscula?: " +
patron01.test(cadena01) + "<br />" );
document.write( "La cadena contiene 'patron' en maysculas o
minsculas?: " +
document.write( "La cadena es exctamente 'patron', en minsculas?:
"+
document.write( "---------------------<p />" );
minsculas?: " +
"+

document.write( "---------------------<p />" );
minsculas?: " +
"+
}
</script>
</head>
</body>
</html>
<html>
<head>
function ejemplo(){
var cadena01 = "111-222-333";
var cadena02 = "C11-222-333";
var cadena03 = "111-222-3334";
var cadena04 = "11.222.333-X";
var cadena05 = "11.222.333-X4";
var cadena06 = "11.222.333-XB";
var cadena07 = "11.222.333-4";
// Patrones:
var patron01 = /^[0-9]{3}\-[0-9]{3}\-[0-9]{3}$/;
// Telfono
vlido
var patron02 = /^[0-9]{2}\.[0-9]{3}\.[0-9]{3}\-[a-zA-Z]$/; // NIF
vlido
document.write( "Telfono vlido?: " + patron01.test(cadena01) +
"<br />" );
document.write( "NIF vlido?: "
+ patron02.test(cadena01) +
"<br />" );
document.write( "---------------------<p />" );
"<br />" );
"<br />" );
document.write( "---------------------<p />" );
"<br />" );
"<br />" );
document.write( "---------------------<p />" );
"<br />" );
"<br />" );
document.write( "---------------------<p />" );
"<br />" );
"<br />" );
document.write( "---------------------<p />" );
"<br />" );
"<br />" );
document.write( "---------------------<p />" );
"<br />" );
"<br />" );
document.write( "---------------------<p />" );
}
</script>
</head>
</body>
</html>
<html>
<head>
function ejemplo(){
// Cadena de caracteres:
var cadena01 = "CURSOS GRATIS de informatica gratis online";
// Patrones:
var patron01 = /gratis/;
var patron02 = /gratis/gi;
document.write( "Palabra 'gratis' (en minsculas), usando 'search()'
encontrada en la
posicin: [" + cadena01.search(patron01) +
"]<br />" );
document.write( "Palabra 'gratis' (en maysculas o minsculas)
encontrada en la posicin:
[" + cadena01.search(patron02) + "] (slo se tiene en cuenta la primera

coincidencia)<br />" );
document.write( "Palabra 'gratis' (en minsculas), usando 'match()': ["
+
cadena01.match(patron01) + "]<br />" );
document.write( "Palabra 'gratis' (en maysculas o minsculas), usando
'match()': [" +
cadena01.match(patron02) + "]<br />" );
}
</script>
</head>
</body>
</html>
35_Informacion_Navegador.html
<html>
<head>
function ejemplo(){
document.write( "appCodeName: " + navigator.appCodeName +
"<p />" );
document.write( "appName: "
+ navigator.appName
+
"<p />" );
document.write( "appVersion: " + navigator.appVersion + "<p
/>" );
document.write( "cookieEnabled: " + navigator.cookieEnabled + "<p
/>" );
document.write( "platform: "
+ navigator.platform
+ "<p />" );
document.write( "userAgent: "
+ navigator.userAgent
+ "<p />"
);
document.write( "javaEnabled: " + navigator.javaEnabled() + "<p
/>" );
}
</script>
</head>
Informacin del Navegador
</body>
</html>
36_Informacion_Pantalla.html
<html>
<head>
function ejemplo(){
document.write( "height: "
+ screen.height
+ "<br
/>" );
document.write( "availHeight: " + screen.availHeight +
"<br />" );
document.write( "width: "
+ screen.width
"<br />" );
document.write( "availWidth"
+ screen.availWidth +
"<br />" );
}
</script>
</head>
Informacin de Pantalla
</body>
</html>
37_Informacion_Location.html
<html>
<head>
function ejemplo(){
document.write( "hash: "
+ location.hash
+
"<br />" );
document.write( "host: "
+ location.host
+
"<br />" );
document.write( "hostname: " + location.hostname +
"<br />" );
document.write( "href: "
+ location.href
+
"<br />" );
document.write( "pathname: " + location.pathname +
"<br />" );
document.write( "port: "
+ location.port
+
"<br />" );
document.write( "protocol: " + location.protocol +
"<br />" );
document.write( "search: " + location.search + "<p
/>" );
// Carga la URL en el navegador web:
location.href = "http://www.aprender-informatica.com/";
}
</script>
</head>
<p>Propiedades Location</p>
<p><b>IMPORTANTE</b>: para que el ejemplo funcione correctamente
hay que cargar la
pgina web desde un <b>servidor web</b>.</p>
</body>
</html>
38_Agregar_Favoritos.html
<html>
<head>
function agregar(){
if( (navigator.appName=="Microsoft Internet Explorer")

&& (parseInt(navigator.appVersion) >=4 ) ){
var url="http://www.aprender-informatica.com/";
var titulo="Aprender Informatica";
window.external.AddFavorite( url,titulo );
}
else{
alert ("Presiona <Control+D> para agregar la
pgina a tus Favoritos");
}
}
</script>
</head>
<body onload="agregar();">
<p>Agregar a Favoritos</p>
</body>
</html>
39_Agregar_Inicio.html
<html>
<head>
function inicio(){
if( (navigator.appName == "Microsoft Internet Explorer") &&
(parseInt(navigator.appVersion)>3) ){
document.body.style.behavior = "url(#default#homepage)";
document.body.setHomePage("http://www.aprenderinformatica.com/");
}
else{
alert("Esta opcin es vlida slo para Internet Explorer");
}
}
</script>
</head>
<body>
<input type="button" id="boton1" name="boton1" onclick="inicio();"
value="Agregar como
pgina de inicio" />
</body>
</html>
40_Dimensiones_Documento.html
<html>
<head>
window.onload = function(){
document.body.innerHTML = "clientHeight: " +
document.body.clientHeight + "<br />";
document.body.innerHTML += "clientWidth: " +
document.body.clientWidth;
}
window.onresize = function(){
document.body.innerHTML = "clientHeight: " +
document.body.clientHeight + "<br />";
document.body.innerHTML += "clientWidth: " +
document.body.clientWidth;
}
</script>
</head>
<body>
Dimensiones de Documento
</body>
</html>
41_Escribir_Documento.html
<html>
<head>
function ejemplo(){
document.write( "Esto es una l\u00EDnea.<br />");
document.write( "<p style='color:red;font-weight:bold;'>Esto es un
p\u00E1rrafo.</p>" );
alert("Ahora escribiremos con innerHTML");
document.body.innerHTML = "<p style='color:red;fontweight:bold;'>Esto es un
p\u00E1rrafo.</p><br/>";
}
</script>
</head>
Escribir Documento
</body>
</html>
42_Documento_Acceder.html
<html>
<head>
<script language="javaScript">
function cargar() {
// Inserta cdigo HTML en la pgina web (elimina lo existente):
document.body.innerHTML = "<p id='parrafo1'>Haz click en este <a
id='enlace'
href='http://www.aprenderinformatica.com/'>enlace</a></p>" +
"<p id='parrafo2'><span style='color:red;'>Cursos de informtica
gratis</span></p>";
// Usando el operador '+=' se aade el siguiente cdigo HTML al
existente:
document.body.innerHTML += "<p id='parrafo3' >Curso de
JavaScript</p>";
document.body.innerHTML += "<p id='parrafo4' ><input type='text'
id='texto1' value='El
texto' /></p>";
document.body.innerHTML += "<p id='parrafo5' ><input type='button'
id='boton1'
value='Esto es un botn' /></p>";
alert("Pulsa para modificar la pgina");
document.getElementById("enlace").innerHTML = "enlace a
www.aprenderinformatica.com";
document.getElementById("parrafo2").innerHTML = "CURSOS GRATIS";
}
</script>
</head>
<body onload="cargar();">
Acceder a Documento
</body>
</html>
43_Documento_DOM_Crear.html
<html>
<head>
function ejemplo(){
var enlace1 = document.createElement("A");
// Atributos o Propiedades:
enlace1.id = "enlace_1";
enlace1.innerHTML = "Cursos de inform\u00E1tica
gratis";
enlace1.href = "http://www.aprender-informatica.com/";
enlace1.target = "blank";
// Insertar el enlace al final del body:
document.body.appendChild( enlace1 );
}
</script>
</head>
Crear DOM <br/>
</body>
</html>
44_Documento_DOM_Crear.html
<html>
<head>
function insertar(){
// Crear un enlace:
var enlace1 = document.createElement("a");
enlace1.id = "enlace_1";
enlace1.innerHTML= "Cursos de inform\u00E1tica gratis";
enlace1.href = "http://www.aprender-informatica.com/";
enlace1.target = "blank";
// Crear un botn:
var boton1 = document.createElement("input");

boton1.id = "boton_2";
boton1.type = "button";
boton1.value= "Blog de inform\u00E1tica y tecnolog\u00EDa";
// Evento:
boton1.onclick = function(){
window.location.href = "http://www.informaticapc.com/";
}
// Crear un span:
var span2 = document.createElement("span");
span2.id = "span_2";
span2.style.backgroundColor = "red";
span2.innerHTML = "Contenido del span 2";
// Crear un span:
var span3 = document.createElement("span");
span3.id = "span_3";
span3.style.backgroundColor = "blue";
span3.innerHTML = "Contenido del span 3";
// Insertar el enlace al final del body:
document.body.appendChild( enlace1 );
// Insertar el botn al final de 'div1':
document.getElementById("div1").appendChild( boton1 );
// Insertar 'span2' fuera de 'span1':
document.getElementById("span1").parentNode.insertBefore( span2 );
// Insertar 'span3' dentro de 'span1':
document.getElementById("span1").appendChild( span3 );
}
</script>
</head>
<body onload="insertar();">
<div id="div1" style="background-color:yellow;">
<span id="span1" style="background-color:cyan;">Contenido del
span 1</span>
</div>
</body>
</html>
45_Documento_DOM_Eliminar.html
<html>
<head>
function insertar()
{
// Accedemos al elemento que deseamos borrar:
var objDiv = document.getElementById("div1");
// Obtenemos el nodo padre del elemento:
var objNodoSuperior = objDiv.parentNode;
// Borramos el elemento:
objNodoSuperior.removeChild( objDiv );
}
</script>
</head>
<body onload="insertar();">
<p>Objetos DOM</p>
<div id="div1" style="background-color:yellow;">
<p>Texto del div 1</p>
<span id="span1" style="background-color:cyan;">Contenido del
span 1</span>
</div>
<p><a href="http://www.aprender-informatica.com/">www.aprenderinformatica.com</a></p>
</body>
</html>
46_Documentos_DOM_Dimensionar.html
<html>
<head>
function ejemplo(){
alert( "offsetHeight: " +
document.getElementById("span1").offsetHeight + "\n" +
"offsetWidth: " +
document.getElementById("span1").offsetWidth );
}
</script>
</head>
<span id="span1" style="backgroundcolor:yellow;height:40px;width:100px;">Curso de
JavaScript</span>
</body>
</html>
47_Documentos_DOM_Posicion.html
<html>
<head>
function cargado(){
alert( "offsetTop: " + document.getElementById("span1").offsetTop +
"\n" +
"offsetLeft: " + document.getElementById("span1").offsetLeft );
}
</script>
</head>
<body onload="cargado();">
<p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem
Ipsum</p><p>Lorem Ipsum</p> <p>Lorem Ipsum</p><p>Lorem
Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p> <p>Lorem
Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem
Ipsum</p> <p>Lorem Ipsum</p><p>Lorem Ipsum</p> <p>Lorem
Ipsum</p><p>Lorem Ipsum</p> <p>Lorem Ipsum</p><p>Lorem
Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p> <p>Lorem

Ipsum</p> <p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem
Ipsum</p> <p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem
Ipsum</p><p>Lorem Ipsum</p>
<div id="div1" style="background-color:red; width:300px; margintop:80px;
margin-left:100px; padding-top:0px; padding-left:0px;">
<span id="span1" style="background-color:yellow; height:40px;
width:100px;">
Curso de JavaScript</span>
</div>
</body>
</html>
48_Formularios_Validar.html
<html>
<head>
function validar(){
var ok = true;
if( document.getElementById("txt1").value == "" ||
document.getElementById("txt2").value == "" ){
alert("Introduzca todos los datos");
ok = false;
}
return ok;
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="form1.php"
onsubmit="return validar();">
Nombre: <input type="text" id="txt1" name="txt1" />
Apellidos: <input type="text" id="txt2" name="txt2" />
<input type="submit" id="btnEnviar" name="btnEnviar" value="Enviar"
/>
</form>
</body>
</html>
49_Formularios_CheckBox_Radio.html
<html>
<head>
<title> Curso de JavaScript</title>
function comprobarSeleccionado(){
var aRadios = document.getElementsByName("grupo1");
var radioActivo = null;
for( var contador=0; contador < aRadios.length; contador++ ){
if( aRadios[contador].checked == true )
radioActivo = aRadios[contador].value;
}
if( radioActivo == null )
alert("Selecciona un radio button");

else
alert("radio: " + radioActivo);
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="#">
<label for="opc11">Opcin 1A</label>
<input type="radio" id="opc11" name="grupo1" value="OPCION_1A" />
<label for="opc12">Opcin 1B</label>
<input type="radio" id="opc12" name="grupo1" value="OPCION_1B"/>
<label for="opc13">Opcin 1C</label>
<input type="radio" id="opc13" name="grupo1" value="OPCION_1C"
/><hr/>
<input type="reset" />
<input type="button" id="btnComprobar" name="btnComprobar"
value="Comprobar
seleccionados" onclick="comprobarSeleccionado();" />
</form>
</body>
</html>
50_Formularios_Select.html
<html>
<head>
function insertar(){
var valor = document.getElementById("txt1").value;
var texto = document.getElementById("txt2").value;
if( valor != "" && texto != "" ){
var objOption = new Option(texto, valor);
document.getElementById("select1").add( objOption );
}
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="#">
<select id="select1" name="select1" size="4">
<option value="A">Opcin 1</option>
<option value="B">Opcin 2</option>
</select><p/>
Valor: <input type="text" id="txt1" name="txt1" value="" size="7" />
Texto: <input type="text" id="txt2" name="txt2" value="" />
<input type="button" id="boton1" name="boton1" onclick="insertar();"
value="Insertar
elemento" />
</form>
</body>
</html>
51_Formularios_Select_Cambiar.html
<html>
<head>
function cambiar(){
var seleccionado =
document.getElementById("selContinentes").selectedIndex;
if( seleccionado == 0 )
document.getElementById("text1").value = "";
else
document.getElementById("text1").value =
document.getElementById("selContinentes").options[ seleccionado ].value;
}
</script>
</head>
<body>
<form id="miFormulario" name="miFormulario" method="post"
action="#" >
Continentes:
<select id="selContinentes" name="selContinentes"
onchange="cambiar();">
<option value="NINGUNO">( NINGUNO )</option>
<option value="AFRICA">frica</option>
<option value="AMERICA">Amrica</option>
<option value="ASIA">Asia</option>
<option value="EUROPA">Europa</option>
<option value="OCEANIA" selected>Oceana</option>
</select>
Seleccionado: <input type="text" value="" id="text1" name="text1" />
</form>
</body>
</html>
52_Ventanas_Abrir-Cerrar.html
<html>
<head>
var miVentana;
function abrir() {
miVentana = window.open("http://google.es/","ventana1",
"height=500,width=700,left=300,
location=yes,menubar=no,resizable=no,scrollbars=yes,status=no,titlebar=yes,t
op=500" );
}
function cerrar() {
miVentana.close();
}
</script>
</head>
<body>
<input type="button" value="Pulsa para abrir la ventana"

onclick="abrir()" />
<input type="button" value="Pulsa para cerrar la ventana" onclick="cerrar()"
/>
</body>
</html>
53_Ventanas_Focus.html
<html>
<head>
function prueba(){
var miVentana = window.open( "02_1_ventanas_foco_2.html",
"ventana1",
"height=200,width=700,left=100,top=300" );
alert("Pulsa para devolver el foco a la ventana padre");
miVentana.blur();
alert("Pulsa para devolver el foco a la ventana hija");
miVentana.focus();
}
</script>
</head>
<body onload="prueba();">
Propiedades blur y focus de Ventana
</body>
</html>
54_Ventanas_Redimensionar.html
<html>
<head>
function redimensionar(){
alert("Pulsa para redimensionar la ventana");
window.resizeTo(300, 500);
alert("Pulsa para estirar la ventana");
// Estira la ventana al ancho y alto especificado en pxels, a
partir de la esquina
inferior derecha de la misma.
window.resizeBy(200, 100);
}
</script>
</head>
<p>Redimensionado de Ventana</p>
<input type="button" id="boton1" name="boton1" value="Haz click para
redimensionar la
ventana" onclick="redimensionar();" />
</body>
</html>
55_Ventanas_Mover.html
<html>
<head>
function mover(){
alert("Pulsa para mover la ventana");
window.moveTo(300, 200);
alert("Pulsa para mover la ventana");
// Mueve una ventana (no maximizada) un determinado nmero
de pxels, partiendo
// desde la esquina superior izquierda. Se pueden usar valores
negativos.
window.moveBy(-50, 50);
}
</script>
</head>
<body onload="mover();">
<p>Mover Ventana</p>
<input type="button" id="boton1" name="boton1" value="Haz click para
redimensionar la
ventana" onclick="redimensionar();" />
</body>
</html>
56_Ventanas_Scrollbar.html
<html>
<head>
function ejemplo(){
alert("Pulsa para hacer scroll");
window.scrollTo(10,400);
alert( "pageXOffset: ["+window.pageXOffset+"], pageYOffset:
["+window.pageYOffset + "]" );
}
</script>
</head>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</body>
</html>
57_Ventanas_Posicion.html
<html>
<head>
function prueba(){
if( navigator.appName == "Microsoft Internet Explorer" )
alert( "screenTop: [" + window.screenLeft + "] / screenTop: [" +
window.screenTop + "]" );
else
alert( "screenX: [" + window.screenX + "] / screenY: [" + window.screenY
+ "]" );
}
</script>
</head>
Posicion Ventana en pantalla
</body>
</html>
66_Establecer_Fondo.html
<html>
<head>
<title>Llamar a una funció al pulsar un botón</title>
<script language="JavaScript" type="text/JavaScript">
function make_background_red(){
document.bgColor="red";
}
function make_background_white(){
document.bgColor="white";
}
</script>
<head>
<body>
<form>
<input type="button" value="Haga clic para establecer un fondo rojo"
onclick="make_background_red();">
<input type="button" value="Haga clic para establecer un fondo
blanco" onclick="make_background_white();">
</form>
</body>
</html>
67_Funcion_Argumentos.html
<html>
<head>
<title>Llamar a una funció al pulsar un botón</title>
function change_colors(back_color, fore_color){
document.bgColor= back_color;
document.fgColor= fore_color;
}
</script>
<head>
<body>
<h2>PASO DE VARIOS VALORES A UNA FUNCION</h2><br/><br/>
<form>
<input type="button" value="Fondo rojo y texto verde"
onclick="change_colors('red','green');">
<input type="button" value="Fondo verde y texto azul"
onclick="change_colors('green','blue');">
</form>
</body>
</html>
68_Funcion_Recursiva.html
<html>
<head>
<title>Funcion Recursiva</title>
var counter= 0;
function add_one(){
counter= counter + 1;
if(confirm("El valor del contador es: " + counter + "\n" +
"\u00BFA\u00F1adir otro valor?"))
add_one();
}
</script>
<head>
<body>
<h2>FUNCION RECURSIVA DE CUENTA</h2><br/><br/>
<form>
add_one();
</script>
</form>
</body>
</html>
69_Listado_Propiedades.html
<html>
<head>
<title>Lista de Propiedades</title>
display_object_properties(prompt("Introduzca el nombre del objeto:"));
function display_object_properties(object_string){
var actual_object= eval(object_string);
var property_message= "Aqui tiene la propiedad del objeto " +
object_string + ":\n\n";
for(var property_name in actual_object){
property_message += object_string + "." + property_name + " =
" + actual_object[property_name] + "\n";
}
alert(property_message);
}
</script>
</head>
<body>
<h1>SE RECOPILA Y MUESTRA LAS PROPIEDADES DEL OBJETO
SOLICITADO</h1>
</body>
</html>
70_Eventos.html
<html>
<head><title> Ejemplo de los Eventos onChange y onBlur </title>
function butCheckForm_onclick() {
var myForm = document.form1;
if (myForm.txtAge.value == "" || myForm.txtName.value == "") {
alert("Complete todo el formulario, por favor");
if (myForm.txtName.value == "") {
myForm.txtName.focus();
}
else {
myForm.txtAge.focus();
}
}
else {
alert("Gracias por rellenar el formulario " + myForm.txtName.value);
}
}
function txtAge_onblur() {
var txtAge = document.form1.txtAge;
if (isNaN(txtAge.value) == true) {
alert("Inserte una edad vlida");
txtAge.focus();
txtAge.select();
}
}
function txtName_onchange() {
window.status = " Hola ;-) " + document.form1.txtName.value;
}
</script>
</head>
<body>
<form name="form1">
Por favor, introduzca la siguiente informacin:
<p>
Nombre: <br/>
<input type="text" name="txtName" onchange="txtName_onchange()">
<br/>
Edad: <br/>
<input type="text" name="txtAge" onblur="txtAge_onblur()" size="3"
maxlength="3"> <br/>
<input type="button" value="Verificar" name="butCheckForm"
onclick="butCheckForm_onclick()">
</form>
</body>
</html>

Códigos Ficheros Con Javascript

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Códigos Ficheros Con Javascript

Uploaded by

Copyright:

Available Formats

PAGINAS CON JAVASCRIPT

para dotar de efectos dinmicos a las pginas web.</p>

<td>$<span class="result" id="totalinterest"></span></td>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<p onclick="f1()">Evaluar 10 * 10</p>

document.write( "55 77= " + objNumero13 + "<br />" ); //

document.write( "\"\"= " + isNaN("")

document.write( objNum1.toPrecision(4) + "<br />" ); // Devuelve

Convertir a valores enteros y coma flotante.

document.write( objFecha.getHours()+ ":" + objFecha.getMinutes() + ":"

if( dia > diaMax )

document.body.innerHTML += "Entre ambas fechas hay una

document.write( "Encontrada la palabra 'gratis' (en maysculas o

document.write( "La cadena es exctamente 'patron',

patron03.test(cadena02) + "<br />" );

document.write( "NIF vlido?: "

[" + cadena01.search(patron02) + "] (slo se tiene en cuenta la primera

document.write( "width: "

if( (navigator.appName=="Microsoft Internet Explorer")

var boton1 = document.createElement("input");

Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p> <p>Lorem

alert("Selecciona un radio button");

<input type="button" value="Pulsa para abrir la ventana"

You might also like