Anda di halaman 1dari 42

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
<!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 src=javascript/js/codigo.js"> </script>
</head>
<body>
<p onclick="mostrarMsj()">Esta p&aacute;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>
<script language="JavaScript">
/*
* 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

<!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>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>
<title>Curso de JavaScript</title>
<script type="text/javascript">
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>
<title>Curso de JavaScript</title>
<script type="text/javascript">
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>
<title>Curso de JavaScript</title>
<script type="text/javascript">
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&oacute;n de N&uacute;meros </h2>
</body>
</html>
13_Comprobar_Numeros.html
<html>
<head>
<title>Curso de JavaScript</title>
<script type="text/javascript">
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>
<body onload="ejemplo();">
Comprobaci&oacute;n de n&uacute;meros
</body>
</html>
14_Numeros_Decimales
<html>
<head>
<title>Curso de JavaScript</title>
<script type="text/javascript">
function ejemplo(){
var objNumero1 = new Number("55");
var objNumero2 = new Number("55");
document.write( objNumero1.toFixed(2) + "<br />" );
//
Devuelve 55.00
document.write( objNumero2.toFixed(3) + "<br />" );
//
Devuelve 55.000
var objNumero3 = new Number("55.4");
var objNumero4 = new Number("55.51389");
var objNumero5 = new Number("55.678");
document.write( objNumero3.toFixed() + "<br />" );
//
Devuelve 55
document.write( objNumero4.toFixed(3) + "<br />" );
//
Devuelve 56
document.write( objNumero5.toFixed(2) + "<br />" );
//
Devuelve 56
}
</script>
</head>
<body align= "center" onload="ejemplo();">
<p>Uso del m&eacute;todo toFixed(). </p>
</body>
</html>
15_Numeros_Precision.html
<html>
<head>
<title>Curso de JavaScript</title>
<script type="text/javascript">
function ejemplo(){
var objNum1 = new Number("55.867");
document.write( objNum1.toPrecision() + "<br />" ); // Devuelve
"55.867"
document.write( objNum1.toPrecision(2) + "<br />" ); // Devuelve
"56"
document.write( objNum1.toPrecision(3) + "<br />" ); // Devuelve
"55.9"

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


"55.87"
}
</script>
</head>
<body onload="ejemplo();"> Este texto no lo escribe el navegador
</body>
</html>
16_Numeros_Convertir
<html>
<head>
<title>Curso de JavaScript</title>
<script type="text/javascript">
function ejemplo(){
document.write( parseInt("50365", 8) + "<br />" ); // Devuelve:
20725 (octal)
document.write( parseInt("50365", 10) + "<br />" ); // Devuelve:
50365 (decimal)
document.write( parseInt("50365", 16) + "<br />" ); // Devuelve:
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
document.write( parseFloat("33,5") + "<br />" );
// Devuelve: 33
document.write( parseFloat("33,6") + "<br />" );
// Devuelve: 33
document.write( parseFloat("44.4") + "<br />" );
// Devuelve:
44.4
document.write( parseFloat("44.56") + "<br />" );
// Devuelve:
44.56
document.write( parseFloat("44.6") + "<br />" );
// Devuelve:
44.6
document.write( parseFloat("55.4") + "<br />" );
// 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>
<body onload="ejemplo();">

Convertir a valores enteros y coma flotante.


</body>
</html>
17_Funciones_Math.html
<html>
<head>
<title>Curso de JavaScript</title>
<script type="text/javascript">
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>
<body onload="ejemplo();">
Funciones del Objeto Math.
</body>

</html>
18_Fechas_Crear.html
<html>
<head>
<title>Curso de JavaScript</title>
<script type="text/javascript">
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"
document.write( objFecha2 + "<br />" );
// Devuelve "Sat May 14 20:21:22 UTC+0100 2011"
document.write( objFecha3 + "<br />" );
// Devuelve "Sat May 14 00:00:00 UTC+0100 2011"
document.write( objFecha4 + "<br />" );
// Devuelve "Sat May 14 20:21:22 UTC+0100 2011"
document.write( objFecha5 + "<br />" );
// 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>
<body onload="ejemplo();">
Creaci&oacute;n de Fechas
</body>
</html>
19_Fechas_Obtener.html
<html>
<head>
<title>Curso de JavaScript</title>
<script type="text/javascript">
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>
<body onload="ejemplo();">
Obtenci&oacute;n de datos de fechas.
</body>
</html>
20_Fechas_Modificar.html
<html>
<head>
<title>Curso de JavaScript</title>
<script type="text/javascript">
function ejemplo(){
var objFecha = new Date(2000, 1, 1, 12, 00, 00);
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>
<title>Curso de JavaScript</title>
<script type="text/javascript">
// 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>
<body onload="ejemplo();">
Valida Fechas.
</body>
</html>
22_Fechas_Validar_2.html
<html>
<head>
<title>Curso de JavaScript</title>
<script type="text/javascript">
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>
<body onload="ejemplo();">
Validaci&oacute;n de Fechas.
</body>
</html>
22_Fechas_UTC.html
<html>
<head>
<title>Curso de JavaScript</title>
<script type="text/javascript">
function ejemplo(){
var objFecha = new Date(2011, 5, 14, 20, 21, 22);
// 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>
<body onload="ejemplo();">
Fechas UTC
</body>
</html>
23_Fechas_UTC.html
<html>
<head>
<title>Curso de JavaScript</title>
<script type="text/javascript">
function ejemplo()
{
var objFecha = new Date(2011, 4, 14, 20, 21, 22);
// 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>
<body onload="ejemplo();">
Fechas UTC
</body>
</html>
24_Fechas_UTC.html
<html>
<head>
<title>Curso de JavaScript</title>
<script type="text/javascript">
function ejemplo(){
var objFecha = new Date(2000, 1, 1, 12, 00, 00);
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>
<body onload="ejemplo();">
Fechas UTC
</body>
</html>
25_Fechas_UTC.html
<html>
<head>
<title>Curso de JavaScript</title>
<script type="text/javascript">
function mostrarFechaHora( objFecha ){
document.body.innerHTML += "[" + objFecha.getDate() + "/" +
objFecha.getMonth() + "/"
+ objFecha.getFullYear() + " - " + objFecha.getHours() + ":" +
objFecha.getMinutes() + ":"
+ objFecha.getSeconds() + "]<br />";
}
function ejemplo(){
var objFecha = new Date(2011, 4, 10, 15, 00, 00);
var milisegundos = objFecha.getTime();
mostrarFechaHora( objFecha );
// Sumar 2 hora:
objFecha.setTime( milisegundos + (2 * 3600000) );

mostrarFechaHora( objFecha );
// Sumar 2 das:
objFecha.setTime( milisegundos + (2 * 86400000) );
mostrarFechaHora( objFecha );
// Restar 3 das:
objFecha.setTime( milisegundos - (3 * 86400000) );
mostrarFechaHora( objFecha );
}
</script>
</head>
<body onload="ejemplo();">
<p>Fechas en JavaScript</p>
</body>
</html>
26_Fechas_UTC.html
<html>
<head>
<title>Curso de JavaScript</title>
<script type="text/javascript">
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 />";
document.body.innerHTML += "Entre ambas fechas hay una
diferencia de [" +
segundos + "]
segundos.<br />";
document.body.innerHTML += "Entre ambas fechas hay una
diferencia de [" +
minutos + "]
minutos.<br />";
document.body.innerHTML += "Entre ambas fechas hay una
diferencia de [" + horas
+ "] horas.<br />";

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


diferencia de [" + dias
+ "] das.<br />";
}
}
</script>
</head>
<body onload="ejemplo();">
<p>Fechas UTC</p>
</body>
</html>
27_Fechas_UTC.html
<html>
<head>
<title>www.aprender-informatica.com - Curso de JavaScript</title>
<script type="text/javascript">
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>
<title>Curso de JavaScript</title>
<script type="text/javascript">
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>
<body onload="ejemplo();">
Concatenado de cadenas.
</body>

</html>
29_Cadenas.html
<html>
<head>
<title>Curso de JavaScript</title>
<script type="text/javascript">
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>
<body onload="ejemplo();">
Objetos Cadena
</body>
</html>
30_Cadenas_Exp_Reg.html
<html>
<head>
<title>Curso de JavaScript</title>
<script type="text/javascript">
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");
// Patrones (realizan lo mismo):
var patron03 = /^[a-zA-Z\s]+$/;
var patron04 = new RegExp("^[a-zA-Z\\s]+$");
// Patrones (realizan lo mismo):
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( "CADENA: [" + cadena02 + "]<br />" );
document.write( "La fecha es vlida: [" + patron05.test(cadena02) +
"]<br />" );
document.write( "La fecha es vlida: [" + patron06.test(cadena02) +
"]<br />" );
}
</script>
</head>
<body onload="ejemplo();">
Expresiones Regulares
</body>
</html>
31_Cadenas_Exp_Reg.html
<html>
<head>
<title>Curso de JavaScript</title>
<script type="text/javascript">
function ejemplo(){
// Cadenas de caracteres:
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( "CADENA: [" + cadena01 + "]<br />" );
document.write( "La cadena contiene 'patron' en
minscula?: " + patron01.test(cadena01) + "<br />" );
document.write( "La cadena contiene 'patron' en
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( "CADENA: [" + cadena02 + "]<br />" );
document.write( "La cadena contiene 'patron' en
minscula?: " + patron01.test(cadena02) + "<br />" );
document.write( "La cadena contiene 'patron' en
maysculas o minsculas?: " + patron02.test(cadena02) + "<br />" );

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


en minsculas?: " + patron03.test(cadena02) + "<br />" );
document.write( "---------------------<p />" );
document.write( "CADENA: [" + cadena03 + "]<br />" );
document.write( "La cadena contiene 'patron' en
minscula?: " + patron01.test(cadena03) + "<br />" );
document.write( "La cadena contiene 'patron' en
maysculas o minsculas?: " + patron02.test(cadena03) + "<br />" );
document.write( "La cadena es exctamente 'patron',
en minsculas?: " + patron03.test(cadena03) + "<br />" );
}
</script>
</head>
<body onload="ejemplo();">
Expresiones Regulares
</body>
</html>
32_Cadenas_Exp_Reg.html
<html>
<head>
<title>Curso de JavaScript</title>
<script type="text/javascript">
function ejemplo(){
// Cadenas de caracteres:
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( "CADENA: [" + cadena01 + "]<br />" );
document.write( "La cadena contiene 'patron' en minscula?: " +
patron01.test(cadena01) + "<br />" );
document.write( "La cadena contiene 'patron' en 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( "CADENA: [" + cadena02 + "]<br />" );
document.write( "La cadena contiene 'patron' en minscula?: " +
patron01.test(cadena02) + "<br />" );
document.write( "La cadena contiene 'patron' en maysculas o
minsculas?: " +
patron02.test(cadena02) + "<br />" );
document.write( "La cadena es exctamente 'patron', en minsculas?:
"+

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


document.write( "---------------------<p />" );
document.write( "CADENA: [" + cadena03 + "]<br />" );
document.write( "La cadena contiene 'patron' en minscula?: " +
patron01.test(cadena03) + "<br />" );
document.write( "La cadena contiene 'patron' en maysculas o
minsculas?: " +
patron02.test(cadena03) + "<br />" );
document.write( "La cadena es exctamente 'patron', en minsculas?:
"+
patron03.test(cadena03) + "<br />" );
}
</script>
</head>
<body onload="ejemplo();">
Expresiones Regulares
</body>
</html>
33_Cadenas_Exp_Reg.html
<html>
<head>
<title>Curso de JavaScript</title>
<script type="text/javascript">
function ejemplo(){
// Cadenas de caracteres:
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( "CADENA: [" + cadena01 + "]<br />" );
document.write( "Telfono vlido?: " + patron01.test(cadena01) +
"<br />" );
document.write( "NIF vlido?: "
+ patron02.test(cadena01) +
"<br />" );
document.write( "---------------------<p />" );
document.write( "CADENA: [" + cadena02 + "]<br />" );
document.write( "Telfono vlido?: " + patron01.test(cadena02) +
"<br />" );
document.write( "NIF vlido?: "
+ patron02.test(cadena02) +
"<br />" );
document.write( "---------------------<p />" );
document.write( "CADENA: [" + cadena03 + "]<br />" );
document.write( "Telfono vlido?: " + patron01.test(cadena03) +
"<br />" );

document.write( "NIF vlido?: "

+ patron02.test(cadena03) +

"<br />" );
document.write( "---------------------<p />" );
document.write( "CADENA: [" + cadena04 + "]<br />" );
document.write( "Telfono vlido?: " + patron01.test(cadena04) +
"<br />" );
document.write( "NIF vlido?: "

+ patron02.test(cadena04) +

"<br />" );
document.write( "---------------------<p />" );
document.write( "CADENA: [" + cadena05 + "]<br />" );
document.write( "Telfono vlido?: " + patron01.test(cadena05) +
"<br />" );
document.write( "NIF vlido?: "

+ patron02.test(cadena05) +

"<br />" );
document.write( "---------------------<p />" );
document.write( "CADENA: [" + cadena06 + "]<br />" );
document.write( "Telfono vlido?: " + patron01.test(cadena06) +
"<br />" );
document.write( "NIF vlido?: "

+ patron02.test(cadena06) +

"<br />" );
document.write( "---------------------<p />" );
document.write( "CADENA: [" + cadena07 + "]<br />" );
document.write( "Telfono vlido?: " + patron01.test(cadena07) +
"<br />" );
document.write( "NIF vlido?: "

+ patron02.test(cadena07) +

"<br />" );
document.write( "---------------------<p />" );
}
</script>
</head>
<body onload="ejemplo();">
Expresiones Regulares
</body>
</html>
34_Cadenas_Exp_Reg.html
<html>
<head>
<title>Curso de JavaScript</title>
<script type="text/javascript">
function ejemplo(){
// Cadena de caracteres:
var cadena01 = "CURSOS GRATIS de informatica gratis online";
// Patrones:
var patron01 = /gratis/;
var patron02 = /gratis/gi;
document.write( "CADENA: [" + cadena01 + "]<br />" );
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 onload="ejemplo();">
Expresiones Regulares
</body>
</html>
35_Informacion_Navegador.html
<html>
<head>
<title>Curso de JavaScript</title>
<script type="text/javascript">
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>
<body onload="ejemplo();">
Informacin del Navegador
</body>
</html>
36_Informacion_Pantalla.html
<html>
<head>
<title>Curso de JavaScript</title>
<script type="text/javascript">
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>
<body onload="ejemplo();">
Informacin de Pantalla
</body>
</html>
37_Informacion_Location.html
<html>
<head>
<title>Curso de JavaScript</title>
<script type="text/javascript">
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>
<body onload="ejemplo();">
<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>
<title>Curso de JavaScript</title>
<script type="text/javascript">
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>
<title>www.aprender-informatica.com - Curso de JavaScript</title>
<script language="JavaScript">
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>
<title>Curso de JavaScript</title>
<script language="JavaScript">
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>
<title>Curso de JavaScript</title>
<script language="JavaScript">
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>
<body onload="ejemplo();">
Escribir Documento
</body>
</html>
42_Documento_Acceder.html
<html>
<head>
<title>Curso de JavaScript</title>
<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>
<title>Curso de JavaScript</title>
<script type="text/javascript">
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>
<body onload="ejemplo();">
Crear DOM <br/>
</body>
</html>
44_Documento_DOM_Crear.html
<html>
<head>
<title>Curso de JavaScript</title>
<script type="text/javascript">
function insertar(){
// Crear un enlace:
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";
// Crear un botn:

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


// Atributos o Propiedades:
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");
// Atributos o Propiedades:
span2.id = "span_2";
span2.style.backgroundColor = "red";
span2.innerHTML = "Contenido del span 2";
// Crear un span:
var span3 = document.createElement("span");
// Atributos o Propiedades:
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>
<title>www.aprender-informatica.com - Curso de JavaScript</title>
<script type="text/javascript">
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>
<title>Curso de JavaScript</title>
<script language="JavaScript">
function ejemplo(){
alert( "offsetHeight: " +
document.getElementById("span1").offsetHeight + "\n" +
"offsetWidth: " +
document.getElementById("span1").offsetWidth );
}
</script>
</head>
<body onload="ejemplo();">
<span id="span1" style="backgroundcolor:yellow;height:40px;width:100px;">Curso de
JavaScript</span>
</body>
</html>
47_Documentos_DOM_Posicion.html
<html>
<head>
<title>Curso de JavaScript</title>
<script language="JavaScript">
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>
<title>Curso de JavaScript</title>
<script language="JavaScript">
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>
<script language="JavaScript">
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>
<title>Curso de JavaScript</title>
<script language="JavaScript">
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>
<title>Curso de JavaScript</title>
<script language="JavaScript">
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>
<title>www.aprender-informatica.com - Curso de JavaScript</title>
<script type="text/javascript">
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>
<title>Curso de JavaScript</title>
<script type="text/javascript">
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>
<title>Curso de JavaScript</title>
<script type="text/javascript">
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>
<body onload="prueba();">
<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>

<title>Curso de JavaScript</title>
<script type="text/javascript">
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>
<title>Curso de JavaScript</title>
<script type="text/javascript">
function ejemplo(){
alert("Pulsa para hacer scroll");
window.scrollTo(10,400);
alert( "pageXOffset: ["+window.pageXOffset+"], pageYOffset:
["+window.pageYOffset + "]" );
}
</script>
</head>
<body onload="ejemplo();">
<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>
<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>
<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>
<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>
<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>

<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>

<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>
<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>
<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>
<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>
<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>
<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>
<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>
<title>Curso de JavaScript</title>
<script type="text/javascript">
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>
<body onload="prueba();">
Posicion Ventana en pantalla
</body>
</html>
66_Establecer_Fondo.html
<html>
<head>
<title>Llamar a una funci&oacute; al pulsar un bot&oacute;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&oacute; al pulsar un bot&oacute;n</title>
<script language="JavaScript" type="text/JavaScript">
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>
<script language="JavaScript" type="text/JavaScript">
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>
<script language="JavaScript">

add_one();
</script>
</form>
</body>
</html>
69_Listado_Propiedades.html
<html>
<head>
<title>Lista de Propiedades</title>
<script language="JavaScript" type="text/JavaScript">
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>
<script language="JavaScript">
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>