Lenguaje de Marcas - Apuntes Ver2 7 PDF

LENGUAJE
DE
MARCAS
APUNTES
Apuntes HTML
Una pagina web se compone de varias parte, dentro de las cuales se mete el contenido, dentro de HEAD es donde van las
especificaciones de la pagina y el titulo de la misma (el nombre que nos muestra el Navegador en su barra) y dentro de BODY
metemos todo el contenido de la pagina, seria algo as (En azul los comentarios que se pueden poner dentro de la pagina pero
que el Navegador web no muestra):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" >
<title>"Aqu el nombre de la pagina"</title>
</head>
<body>
"Aqu va el contenido, Texto, fotos, videos, Formularios, etc.

<p><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/validhtml401" alt="Valid HTML 4.01 Strict" height="31" width="88"></a></p>
</body>
</html>
Los Formularios

<html>
<head>

<title>Formularios HTML</title>
</head>
<body>

<form action="mailto:txaba@gmail.com" method="post">

<p>
Teclee su nombre:
<input type="text" name="usu" size="10" maxlength="15">
</p>

<p>
Teclee su nombre:
<input type="text" name="usu" size="10" maxlength="15" value="Dña">
</p>

<p>
Teclee su clave:
<input type="password" name="pas" size="10" maxlength="10">
</p>

<p>
Selecciona los Lenguajes que conoces: <br>
<input type="checkbox" name="java"> Java <br>
<input type="checkbox" name="html"> Html <br>
<input type="checkbox" name="Cobol"> Cobol <br>
<input type="checkbox" name="Pascal"> Pascal <br>
</p>

<p>
Selecciona los Lenguajes que conoces: <br>
<input type="checkbox" name="java"> Java <br>
<input type="checkbox" name="html" checked="checked"> Html <br>
<input type="checkbox" name="Cobol"> Cobol <br>
<input type="checkbox" name="Pascal"> Pascal <br>
</p>

<p>
Selecciona tu nivel maximo de Estudios: <br>
<input type="radio" name="nivel" value="1"> Sin Estudios <br>
<input type="radio" name="nivel" value="2"> Bachiller <br>
<input type="radio" name="nivel" value="3"> Grado Medio <br>
<input type="radio" name="nivel" value="4"> Grado superior <br>
<input type="radio" name="nivel" value="5"> Universitario <br>
</p>

<p>
<input type="radio" name="nivel" value="1"> Sin Estudios <br>
<input type="radio" name="nivel" value="2" checked="checked"> Bachiller <br>
</p>

<p>Selecciona tu nivel maximo de Estudios: <br>
<input type="radio" name="nivel" value="1" disabled="disabled"> Sin Estudios <br>
</p>

<p>Elige tu color favorito</p>
<p><select name="Color">
<option value="1"> Amarillo </option>
<option value="2"> Rojo </option>
<option value="3"> Naranja </option>
<option value="4"> Verde </option>
<option value="5"> Azul </option>
</select></p>

<p>Elige tu plato preferido</p>
<p><select name="pla" size="1">
<optgroup label="Carnes">
<option value="1"> Entrecot </option>
<option value="2"> Chuleta </option>
<option value="3"> Solomillo </option>
<option value="4"> San Jacobo </option>
<option value="5"> Cordero </option>
</optgroup>
<optgroup label="Pescados">
<option value="6"> Salmon </option>
<option value="7"> Rodaballo </option>
<option value="8"> Merluza </option>
<option value="9"> Sardinas </option>
<option value="10"> Atun </option>
</optgroup>
<optgroup label="Postres">
<option value="11"> Helado </option>
<option value="12"> Hojaldre </option>
<option value="13"> Fruta </option>
<option value="14"> Pastel </option>
<option value="15"> Flan </option>
</optgroup>
</select></p>

<p>Elige tus platos preferidos (Para elegir mas de uno manten pulsada la tecla Ctrl)</p>
<p><select name="pla" size="10" multiple="multiple">
<option value="2"> Chuleta </option>
</optgroup>
<option value="6"> Salmon </option>
</optgroup>
<option value="11"> Helado </option>

</optgroup>
</select></p>

<p> Elige tus platos preferidos (Para elegir mas de uno manten pulsada la tecla Ctrl)</p>
<p><select name="pla" size="10" multiple="multiple">
<option value="2" selected="selected"> Chuleta </option>
</optgroup>
<option value="6" selected="selected"> Salmon </option>
</optgroup>
<option value="11" selected="selected"> Helado </option>
</optgroup>
</select></p>
<fieldset>

<legend> Rellena el formulario </legend>

<input type="radio" name="nivel" value="1" disabled="disabled"> Sin Estudios <br>
</fieldset>

<p>
Al pasar TAB pasamos de una caja a otra por columnas<br>
<input type="text" name="t1" size="5" value="f1-c1" tabindex="1">
<br>
<br>
</p>

<p>
<label for="nombre"> Teclee su nombre </label>
<input type="text" name="nombre" size="30" id="nombre" > <br>

<label for="email"> Teclee su email </label>
<input type="text" name="correo" size="50" id="email" > <br>
</p>

<p>
Teclee su nombre:<br>
Teclee su nombre:
<input type="text" name="usu" size="10" maxlength="15" value="Dña">
</p>


<p> Introduzca aquí sus comentarios: </p>

<p><textarea name="comentarios" rows="7" cols="70"></textarea><br>

<textarea name="comentarios" rows="7" cols="70">Introduzca sus comentarios:</textarea>
<br><br>


<input type="submit" value="Enviar">

<input type="reset" value="Borrar">
</p>

<p>Teclee su nombre:
<input type="text" name="izena" size="13" value="Euskosoftware" disabled="disabled"><br>
<textarea name="comentarios" rows="7" cols="70" disabled="disabled">
CLAUSULA SEGUNFA-OBJETO DEL CONTRATO
EL PROVEEDOR otorga la ENTIDAD licencia para utilizar los programas que se
relacionan en el Anexo.
El pago de la Licencia otorgada bajo el presente contrato, no constituye la compra de los
programas.
CLAUSULA TERCERA_PRECIO Y FORMA DE PAGO
El precio convenido por la licencia de uso de los programas objeto de este contrato es la
que se......
....................................................................................................
..............................................................
</textarea></p>
<p><input type="radio" name="val" value="1" checked="checked"> Acepto <br>
<input type="radio" name="val" value="2"> No Acepto <br></p>
</form>

<p>
<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/validhtml401" alt="Valid HTML 4.01 Strict" height="31" width="88"></a>
</p>
</body>
</html>
Apuntes HTML 2
Tamao Ttulos
El tamao de titulo varia segn se utilice h1, h2,...h6 y es un tamao que tiene prefijada cada navegador
<h1>, <h2>, ......<h6>
</h1>
<html>
<head>
<title>Encabezamientos</title>
<head>
<body>
<h6>Este encabezado es de letra pequea</h6>
<h5>Si no lees no te preocupes</h5>
<h4>Esta letra es normal</h4>
<h3>Esta letra es para abuelos</h3>
<h2>Si no lees esto corre al oculista</h2>
<h1>Estilo ONCE</h1>
</body>
<html>
Con h6:
Con h5.
Con h4:
Con h3:
Con h2:
Con h1:
Estilos de letras:
Las palabras contenidas dentro de estos comandos se muestran segn se especifica.
<em>
</em>
Emphatize
es igual que <i>
</i>
<strong>
</strong>
Negrita
es igual que <b>
</b>
itlica
bold
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Encabezamientos</title>
<head>
<body>
<p>Esta <i>palabra</i> va en italica y esta <b>otra</b> en negrita</p>
<p>Esta <em>palabra</em> va en emphatize y esta <strong>otra</strong> en negrita</p>
</body>
<html>
Hipervinculos:
Hipervinculo a otra pagina del mismo sitio
<a>
</a>
<a href="LM 13 Html_Hipervinculo pagina2.html"> aquí</a>

Como se ve el comando hace referencia a un enlace html y incluye la palabra aqu que es donde pincharemos para
saltar a dicho enlace, en este caso el archivo tiene que estar en el mismo directorio donde esta el archivo original que
le llama.
As seria el cdigo:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hipervinculo pagina1</title>
<head>
<body>
<h1>Esta es la Página 1</h1>
<p>Pincha <a href="LM 13 Html_Hipervinculo pagina2.html"> aquí</a> para ir a la página 2</p>
<p>Pincha <a href="LM 13 Html_Hipervinculo pagina3.html"> aquí</a> para ir a la página 3</p>
</body>
<html>
Y se vera as:
Si queremos que aparezca un bocadillo informativo:

aadimos la opcin title
<a href="LM 13 Html_Hipervinculo pagina2.html" title=Si pinchas aqu iras a la pagina 1> aquí</a>
se vera as:
Al pasar con el ratn o cursor por encima de aqu (pero sin hacer click) aparece el bocadillo, recuadro en amarillo)
Hipervinculo a otra pagina web <a>
</a>
En vez de poner la ruta al archivo, ponemos la direccin web deseada:
<a href="http://www.google.es"> Ir a Google;</a>
Por lo general el navegador nos abrir la pagina en la pestaa que estamos y perdemos la pagina original, para evitar
esto usaramos una funcin de java script que hace que se abra en una pestaa nueva.
Se puede hacer con target en html y aunque funciona da error al validar la pagina, seria as:
<a href="http://www.google.es" title="Si pinchas aqu iras a google" target="_blank"> Ir a Google</a>
Hipervinculo a una direccin de correo
<p> Para ponerte en contacto conmigo pincha <a href=mailto:natxo@gmail.com title=Direccion de correo del
autor> aquí</a></p>
Se vera as:
Hipervinculo a una posicin/apartado de la propia pagina

Una forma de hacerlo es usando el comando ancla
<a name=ancla1></a>
Con esto ponemos el ancla
< a href=#ancla1> Volver</a>
Con esto vamos al ancla
*Nota: Esta forma ya no se utiliza. En su lugar ponemos un id a la etiqueta a la que queremos ir.
Hipervinculo con imagen
<a href="http://www.greenpeace.org">
<img src="fotos/gorda.jpg" title="Greenpeace" alt="Greenpeace" width="240" height="240" /></a>
Mapa de Imgenes:
Pinchando en una zona de la imagen que se abra un enlace u otro evento.
El Mapa de una imagen se puede dividir en reas tipo cuadrado, circulo y polgonos, Se definen coordenadas.
(X1, Y1)
(X2, Y2)
(X3, Y3)
(r)
(X1, Y1)
(X2, Y2)
(X1, Y1)
(X4, Y4)

<html>
<head>
<title>Mapa de Imagenes</title>
</head>
<body>
<h3> Mapa de Imagenes <h3>
<p> Este mapa consiste en la imagen del pinguino en la que se le han puesto 4 zonas activas que corresponden a los dos cuadrados
y a los dos pies del animalito. Pinche en cada uno de ellos para acceder a una pagina diferente.
<img src="fotos/tux1.jpg" alt="Pinguino" title"Pinguino" with="80" height="96" usemap="#pingu">
<map id="pingu" name="pingu">
<area shape="rect" coords="6,4,20,20" href="http://www.google.es" alt="Ir a Google" title="Ir a Google">
<area shape="rect" coords="65,8,80,20" href="http://www.yahoo.es" alt="Ir a Yahoo" title="Ir a Yahoo">
<area shape="poly" coords="6,90,7,71,17,57,22,74" href="http://www.msn.es" alt="Ir a Msn" title="Ir a Msn">
<area shape="poly" coords="54,67,53,87,75,79,68,66" href="http://www.terra.es" alt="Ir a Terra" title="Ir a Msn">
<area shape="circle" coords="37,52,15" href="http://es.wikipedia.org" alt="Ir a la Wikipedia" title="Ir a la Wikipedia">
</map>
</body>
</html>
Se vera as (la barriga seria el rea del circulo del enlace a la wiki):
Listas Ordenadas:
<ul> y <ol>
Utilizando <ol> </ol> (ordered list)
Utilizando <ul> </ul> (unordered list)
<html>
<head>
<title>Listas ordenadas</title>
</head>
<body>
<h3> Listas ordenadas </h3>
<h4> Clasificacion Moto GP</h4>
<ol>
<li> Lorenzo </li>
<li> Pedrosa </li>
<li> Rossi </li>
<li> Stoner </li>
<li> Dovizioso </li>
</ol>
</body>
</html>
<html>
<head>
<title>Listas ordenadas</title>
</head>
<body>
<h3> Listas ordenadas </h3>
<h4> Clasificacion Moto GP</h4>
<ul>
<li> Lorenzo </li>
<li> Pedrosa </li>
<li> Rossi </li>
<li> Stoner </li>
<li> Dovizioso </li>
</ul>
</body>
</html>
Y se vera as:
Listas Anidadas:
Una lista dentro de otra, utilizando los comando de listas ordenadas.
<html>
<head>
<title>Listas anidadas</title>
</head>
<body>
<h3> Listas anidadas </h3>
<h4> Comunidad autonoma de Euskadi</h4>
<ul>
<li>Bizkaia</li>
<ul>
<li> Bilbao </li>
<li> Gernika </li>
<li> Balmaseda </li>
</ul>
</li>
<li>Guipuzkoa</li>
<ul>
<li> Donosti </li>
<li> Irun </li>
<li> Tolosa </li>
</ul>
</li>
<li>Araba</li>
<ul>
<li> Vitoria </li>
<li> Laudio </li>
<li> Agurain </li>
</ul>
</li>
</ul>
</body>
</html>
Se vera as en los dos casos:
Lista de definiciones:
<dl> Lista de una definicin </dl>
<dt> Termino de una definicin </dt>
<dd> descripcin de una definicin </dd>
<html>
<head>
<title>Listas anidadas</title>
</head>
<body>
<h3> Listas anidadas </h3>
<h4> Comunidad autonoma de Euskadi</h4>
<ul>
<li>Bizkaia</li>
<ul>
<li> Bilbao </li>
<ol>
<li> Zorrotza </li>
<li> Kasttrexana </li>
<li> Rekalde </li>
<li> San Ignacio </li>
</ol>
<li> Gernika </li>
<li> Balmaseda </li>
</ul>
</li>
<li>Guipuzkoa</li>
<ul>
<li> Donosti </li>
<li> Irun </li>
<li> Tolosa </li>
</ul>
</li>
<li>Araba</li>
<ul>
<li> Vitoria </li>
<li> Laudio </li>
<li> Agurain </li>
</ul>
</li>
</ul>
</body>
</html>
Tablas Simples:
<html>
<head>
<title>Tablas</title>
</head>
<body>
<h3> Tablas simples </h3>
<table border="1">
<tr>
<td> Fila 1, Col 1 </td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Se vera as:
Tablas con encabezado:

<html>
<head>
</head>
<body>
<h3> Tablas con encabezado </h3>
<table border="1">
<tr>
<th> Pais </th>
<th> Habitantes </th>
</tr>
<tr>
<td> China </td>
<td> 1.300 Millones </td>
</tr>
<tr>
<td> India </td>
</tr>
<tr>
<td> Estados Unidos </td>
<td> 295 Millones </td>
</tr>
</table>
</body>
</html>
<html>
<head>
</head>
<body>
<h3> Tablas con encabezado </h3>
<table border="1">
<caption> Habitantes por paises </caption>
<tr>
<th> Pais </th>
<th> Habitantes </th>
</tr>
<tr>
<td> China </td>
</tr>
<tr>
<td> India </td>
</tr>
<tr>
<td> Estados Unidos </td>
<td> 295 Millones </td>
</tr>
</table>
</body>
</html>
Se vera as:
Y as usando <caption>
Combinando celdas:
A las etiquetas <td> y <th> se les puede poner el atributo rowspan y colspan
<th colspan=4> .................... </th>
<html>
<head>
<title> Tablas </title>
</head>
<body>
<h2>Combinando Celdas</h2>
<table border="1">
<tr>
<th colspan="4">Hora de llegada a casa para los menores de edad</th>
</tr>
<tr>
<td> </td>
<td> Antes de las 10 </td>
<td> Antes de las 12 </td>
<td> Despues de las 12 </td>
</tr>
<tr>
<td> Hombres </td>
<td> 23% </td>
<td> 52% </td>
<td> 25% </td>
</tr>
<tr>
<td> Mujeres </td>
<td> 34% </td>
<td> 47% </td>
<td> 19% </td>
</tr>
</table>
</body>
</html>
Se vera as:
Ejercicio Horarios de clase.

<html>
<head>
<title> Tablas </title>
</head>
<body>
<h2>Combinando Celdas</h2>
<table border="1">
<tr>
<th colspan="6">Horarios de clase</th>
</tr>
<tr>
<td> Hora </td>
<th> LUNES </th>
<th> MARTES </th>
<th> MIERCOLES </th>
<th> JUEVES </th>
<th> VIERNES </th>
</tr>
<tr>
<th> 1 </th>
<td> Hardware </td>
<td rowspan="2"> Redes </td>
<td rowspan="2"> FOL </td>
<td rowspan="2"> Hardware </td>
</tr>
<tr>
<th> 2 </th>
<td rowspan="2"> Bases de datos </td>
</tr>
<tr>
<th> 3 </th>
<td> Lenguaje de Marcas </td>
<td> Bases de datos </td>
<td> Sistemas operativos </td>
<td> Lenguajes de marcas </td>
</tr>
<tr>
<th colspan="6"> Descanso </th>
</tr>
<tr>
<th> 4 </th>
<td rowspan="2"> Sistemas operativos </td>
<td> Lenguaje de Marcas </td>
<td> Bases de datos </td>
<td> Sistemas operativos </td>
<td> Lenguajes de marcas </td>
</tr>
<tr>
<th> 5 </th>
<td rowspan="2"> Bases de datos </td>
</tr>
<tr>
<th> 6 </th>
<td> FOL </td>
</tr>
</table>
</body>
</html>
Apuntes JavaScript
<html>
<head>
<title> Mi primer Javascript </Title>
</head>
<body>


<script type="text/javascript">
document.write("Este es mi primer programa javascript<br><br>");
/*La variables que se van a utilizar se declaran al principio con var, estas variables se pueden utilizar en
todo el documento, para concatenar texto y variables se utiliza el simbolo +, ademas en el caso de las tildes y acentos no
se usa ñ ni á*/
var nombre="Luis Mariano Enrique";
var edad=23;
var altura=1.82;
var casado=false;
document.write("Te llamas "+nombre+" tienes "+edad+" aos"+" y mides "+altura+" metros y casado:
"+casado);
/*Para separar en lineas el texto los ponemos uno a uno y con <br> para saltos de linea*/
document.write("<br><br>Te llamas: "+nombre);
document.write("<br>Tienes: "+edad);
document.write("<br>mides: "+altura);
/*Si queremos que nos presente la informacin en una ventana del navegador se usa alert y para separar lineas
con \n*/
alert("Te llamas "+nombre+"\n tienes "+edad+" aos"+"\n y mides "+altura+" metros y casado:
"+casado);
/*Asignar valores a las variables introducidos por teclado en una ventana, con la sentencia prompt, si
queremos que en el recuadro aparezca por defecto una lo escribimos en las segundas comillas que hay
como en el ejemplo*/
var nom_prov;
nom_prov=prompt("Teclea provincia:","Vizcaya");
document.write("<br><br>Asi que eres de " + nom_prov);
</script>


var num1=5;
var num2=7;
var suma,produ;
var suma=num1+num2;
//Si asigno unos valores a num1 y num2 y defino la variable suma, si hace la suma
document.write("<br>"+num1+ "+"+num2+"="+suma);
//Si embarhgo si no defino la suma y los valores, concatena y no suma
num1=prompt("Teclea un numero","");
num2=prompt("Teclea otro numero","");
suma=num1+num2;
produ=num1*num2;
//De esta forma lo escribe en la paginas
document.write("<br>"+num1+ "x"+num2+"="+produ);
//De esta forma lo presenta en una nueva ventana
alert("La suma es: "+suma+"\n El producto es: "+produ);
//poniendo parseInt en las operaciones soluciono el problema de que no sume

num1=parseInt(prompt("Teclea un numero",""));
num2=parseInt(prompt("Teclea otro numero",""));
suma=num1+num2;
produ=num1*num2;
document.write("<br>"+num1+ "x"+num2+"="+produ);
</script>
</body>
</html>
Estructura simple con IF

INICIO
if (condicin)
{
sent1;
Presentacin
sent2;
}
num
sent3;
Si se cumple la condicin se realizan las sentencias 1 y 2,
finalizando con la sentencia 3, pero si no se cumple se pasa a
la sentencia Fin.
Las condiciones pueden ser:
Num
>
10
> mayor que

Mensaje 1
< menor que

== igual que
Mensaje 2
>= mayor o igual que

<= menor o igual que
! distinto
Mensaje Fin
Ejemplo consistente en meter un numero y si es mayor que 10, se vern los mensajes 1, mensaje 2 y mensaje Fin, si
el numero es menor o igual que 10, se vera el mensaje Fin.
<html><head>
<title> Estructura simple </title>
</head>
<body>

//En este caso utilizamos alert para que nos preente la informacion en un cuadro
alert("\n Si tecleas un mumero mayor que 10 deberas ver mensaje 1, mensaje 2 y mensaje Fin"
+"\n Si tecleas un numero menor o igual que 10 deberas ver el mensaje Fin");
/*Declaramos las variables, hacemos la peticion de numero y con if (condicion) realizamos el proceso,
las sentencias a mostrar en este caso son de texto (Mensaje1, Mensaje 2......*/
var num;
num=parseInt(prompt("Teclea un numero",""));
if(num > 10)
{
document.write("Mensaje 1");
document.write("<br>"+"Mensaje 2");
}
document.write("<br>"+"Mensaje Fin");
</script>
</body>
</html>
Estructura Compuesta con IF y ELSE

if (condicin)
INICIO
{
sent1;
Presentacin
sent2;
}
else
num
{
sent3;
sent4;
}
Si <= 10 (else)
sent5;
Si se cumple la condicin se realizan las sentencias 1 y 2,
finalizando con la sentencia Fi, pero si no se cumple se pasa a
la rama del No con else y se ejecuta la sentencia 3, 4 y Fin.
Las condiciones pueden ser:
> mayor que
Num
>
10
Si > 10
Mensaje 3
Mensaje 1
Mensaje 4
Mensaje 2
< menor que

== igual que
Mensaje Fin
>= mayor o igual que

<= menor o igual que
Fin
!= distinto
Ejemplo consistente en meter un numero y si es mayor que 10, se vern los mensajes 1, mensaje 2 y mensaje Fin, si
no se cumple la condicin se vera el mensaje 3, mensaje 4 y mensaje Fin.
<html><head>
<title> Estructura compuesta </title>
</head>
<body>
alert("Programa que prueba tus habilidades codificando JavaScript:"
+"\n Si tecleas un mumero mayor que 10 deberas ver mensaje 1, mensaje 2 y mensaje Fin"
+"\n Si tecleas un numero menor o igual que 10 deberas ver mensaje 3, mensaje 4 y mensaje Fin");
var num;
num=parseInt(prompt("Teclea un numero",""));
if(num > 10)
{
document.write("Mensaje 1");
}
else
{
}
document.write("<br>"+"Mensaje Fin");
</script>
</body>
</html>
Ejemplo 1 (Estructura Compuesta con IF y ELSE)

INICIO
Presentacin
num1
num2
NO
num1
>
num2
SI
El mayor es num1
El menor es num2
El mayor es num2
El menor es num1
Mensaje Fin
Ejemplo consistente en meter dos nmeros y ver cul es el mayor y cual el menor.
<html>
<head>
</head>
<body>
<p>Programa que define que numero es mayor y cual menor:<br>
Si tecleas dos numeros te dice cual es mayor y cual es menor de los dos</p>
var num1;
var num2;
num2=parseInt(prompt ("Teclea otro numero",""));
if(num1 > num2)
{
document.write("El mayor es: "+ num1);
document.write("<br>"+"El menor es: "+ num2);
}
else
{
document.write("<br>"+"El mayor es: "+ num2);
}
document.write("<br>"+"Fin");
</script>
</body>
</html>
INICIO
Presentacin
num1
num2
NO
NO
El mayor es num2
El menor es num1
num1
==
num2
num1
>
num2
SI
El mayor es num1
El menor es num2
SI
Son iguales
Fin
Ejemplo consistente en meter dos nmeros y ver cul es el mayor y cual el menor, pero en este caso si el numero es
igual lo detecta y te lo dice.

<html>
<head>
</head>
<body>
<p>Programa que define que numero es mayor y cual menor, ademas diferencia si son iguales:<br>
Si tecleas dos numeros te dice cual es mayor, cual es menor de los dos y si son iguales</p>
var num1;
var num2;
num2=parseInt(prompt ("Teclea otro numero",""));
if(num1 > num2)
{
document.write("El mayor es: "+ num1);
}
else
{
if(num1==num2) {document.write(num1+" y "+num2+" Son iguales")}
else
{
document.write("<br>"+"El mayor es: "+ num2);
}
}
document.write("<br>"+"Fin");
</script>
</body>
</html>

INICIO
Presentacin
num1
num2
num3
NO
SI
num1
>
num2
NO
NO
num1
>
num3
menor=num1
NO
mayor=num3
num2
>
num3
SI
SI
mayor=num2
mayor=num3
menor=num3
menor=num2
mayor=num2
SI
num1
>
num3
mayor=num1
NO
menor=num2
num2
>
num3
SI
menor=num3
El Mayor es mayor
El Menor es menor
FIN
Ejemplo consistente en meter tres nmeros y ver cul es el mayor de los tres y cual el menor de los tres.

<html>
<head>
</head>
<body>
<p>Programa que define que numero es mayor de tres numeros:<br>
Si tecleas tres numeros te dice cual es el mayor de los tres</p>
var num1;
var num2;
var num3;
num1=parseInt(prompt("Teclea el primer numero",""));
num2=parseInt(prompt ("Teclea el segundo numero",""));
num3=parseInt(prompt("Teclea el tercer y ultimo numero",""));
if(num1 > num2)
if(num1>num3)
{
mayor=num1;
if(num2>num3) menor=num3;
else menor=num2;
}
else
{
mayor=num3;
menor=num2;
}
else
if(num1>num3)
{
mayor=num2;
menor=num3;
}
else
{
menor=num1;
if(num2>num3)
mayor=num2;
else
mayor=num3;
}
document.write("El mayor es: "+mayor+"<br>"+"El menor es:
"+menor);
</script>
</body>
</html>
Funcin % , El resto de dividir 2 numeros

INICIO
Presentacin
num1
num2
NO
num1%num2
==
0
SI
Num1 Es divisible
Entre num2
Num1 No es divisible
Entre num2
FIN
Ejemplo consistente en meter 2 nmeros y ver si son divisibles el uno con el otro (si el numero es divisible, el resto
sera 0), utilizando la Funcin %, significa el resto de dividir 2 nmeros.
<html>
<head>
<title> Estructura compuesta Funcion % </title>
</head>
<body>
<p>Programa que define si un numero es divisible entre otro:<br>
Si tecleas 2 numeros te dice si son divisibles</p>
var num1;
var num2;
alert("Script que te pide 2 numeros y te dice si son divisibles");
num1=parseInt(prompt("Teclea el primer numero",""));
num2=parseInt(prompt ("Teclea el segundo numero",""));
if(num1%num2==0)
{
//Dos formas de dar la informacion, en pantalla o en ventana emergente
document.write(num1+" Es divisible entre "+num2);
alert(num1+" Es divisible entre "+num2);
}
else
{
document.write(num1+" No es divisible entre "+num2);
alert(num1+" No es divisible entre "+num2);
}
</script>
</body>
</html>
Sentencia Repetitiva con while (0 a n veces)

En esta estructura el programa primero comprueba la condicin: si es cierta pasa a ejecutar el cuerpo del bucle, y si es
falsa pasa a la instruccin siguiente a la sentencia while.
INICIO
Presentacin
nombre
cont=1
while (condicin)
{
sentencia1;
sentencia2;
}
cont
<=
10
NO
SI
Hola nombre
cont=cont+1
FIN
Ejemplo consistente en meter un nombre y el programa lo repite las veces que le hayamos dicho, en este caso 10
veces (con cont<=10), si queremos que se repita 100 veces, entonces pondremos 100 en vez de 10.
<html>
<head>
<title> Sentencia repetitiva </title>
</head>
<body>
<p>Programa que repite un nombre 10 veces:<br>
Si tecleas un nombre lo repite</p>
var nombre;
var cont;
nombre=prompt("Teclea tu nombre","");
cont=1;
while(cont<=10)
{
document.write(cont+" Hola "+ nombre+"<br>");
cont=cont+1;
}
</script>
</body>
</html>
Sentencia Repetitiva con while y n de veces definido por el usuario

INICIO
Presentacin
nombre
nveces
cont=1
while (condicin)
{
sentencia1;
sentencia2;
}
cont
<=
nveces
NO
SI
Hola nombre
cont=cont+1
FIN
Ejemplo consistente en meter un nombre y el programa lo repite las veces que por teclado le definamos, en este caso
en vez de definir un valor fijo, le decimos el numero de veces con una entrada por teclado para la variable nveces.
<html>
<head>
</head>
<body>
<p>Programa que repite un nombre las veces que le indiques:<br>
Si tecleas un nombre y una cantidad, lo repite las veces que hayas puesto</p>
var nombre;
var nveces;
var cont;
nombre=prompt("Teclea tu nombre","");
nveces=prompt("Cuantas veces quieres que se repita","");
cont=1;
while(cont<=nveces)
{
document.write(cont+" Hola "+ nombre+"<br>");
cont=cont+1;
}
</script>
</body>
</html>
Ejemplo 1 (Sentencia Repetitiva con while)

INICIO
Presentacin
num1
num2
cont=num1
while (condicin)
{
sentencia1;
sentencia2;
}
cont
<=
num2
NO
SI
Hola nombre
cont=cont+1
FIN
Ejemplo consistente en poner los nmeros naturales entre 2 nmeros dados, si metemos 5 y 9, pondr 5, 6. 7, 8 y 9.
<html>
<head>
</head>
<body>
<p>Programa que escribe los numeros naturales entre 2 introducidos:<br>
Si tecleas dos numeros, escribe los numeros que hay entre los introducidos y incluido estos.</p>
var num1;
var num2;
var cont;
num1=prompt("Teclea el primer numero","");
num2=prompt("Teclea el segundo numero","");
cont=parseInt(num1);
while(cont<=num2)
{
document.write(cont+" - ");
cont=cont+1;
}
</script>
</body>
</html>

INICIO
Presentacin
lim_inf
lim_sup
while (condicin)
{
sentencia1;
lim_inf
<
lim_sup
NO
lim_inf%2
==
0
SI
sentencia2;
}
NO
lim_inf
lim_inf ++
FIN
Ejemplo consistente en Mostrar los nmeros pares entre 2 nmeros dados, si metemos 2 y 10, pondr 2, 4. 6, 8 y 10.
<html>
<head>
</head>
<body>
<p>Si tecleas dos numeros, escribe los numeros pares que hay ellos dos.</p>
var lim_inf;var lim_sup;var cont;
lim_inf=parseInt(prompt("Teclea el primer numero",""));
lim_sup=parseInt(prompt("Teclea el segundo numero",""));
cont=lim_inf
while(cont<=lim_sup)
{
if(cont%2==0)
{
document.write(cont+"<br>");
}
cont=cont+1;
}
</script>
</body>
</html>

INICIO
Presentacin
lim_inf
lim_sup
while (condicin)
{
sentencia1;
SI
lim_inf%2
!=
0
sentencia2;
NO
lim_inf=lim_inf+1
lim_inf
<=
lim_sup
NO
SI
lim_inf
lim_inf=lim_inf+2
FIN
Ejemplo consistente en Mostrar los nmeros pares entre 2 nmeros dados, si metemos 2 y 10, pondr 2, 4. 6, 8 y 10,
esta es la forma optimizada de hacerlo (solo pongo la parte dentro de <body>.
<p>Programa que escribe los numeros pares entre 2 introducidos (Metodo optimizado):<br>
var lim_inf;
var lim_sup;
lim_inf=parseInt(prompt("Teclea el numero mas bajo",""));
lim_sup=parseInt(prompt("Teclea el numero mas alto",""));
if(lim_inf%2!=0)
{
lim_inf=lim_inf+1;
}
while(lim_inf<=lim_sup)
{
document.write(lim_inf+"<br>");
lim_inf=lim_inf+2
}
</script>
Estructura Repetitiva con do y while (1 a n veces)

Se trata de un bucle en el que la condicin se comprueba tras la primera iteracin, es decir que el cuerpo del bucle se
ejecuta al menos una vez.
do
Sentencia
{
sentencias;
}
while (Condicin)
SI
Condicion
NO
Ejemplo 1 (Estructura repetitiva do-While)
Teclea un numero
mayor que 10
num
num
<=
0
Mientras no metamos un numero mayor que 10, no seguir pidiendo que lo metamos.
<html>
<head>
<title> Sentencia repetitiva</title>
</head>
<body>

<p>Tienes que teclear un numero mayor que 10:<br>
var num;
do
{
num=parseInt(prompt("Teclea un numero mayor que 10",""));
}
while(num<=10)
</script>
<p>Eres un pardillo<br>
</body>
</html>
Ejercicio 1 (Estructura Repetitiva con while)

INICIO
Presentacin
num_ale=Math.floor(Math.random()*100+1)
num_usu
num_usu
!=
num_ale
num_usu
>
num_ale
Para arriba
Para abajo
num_usu
Has acertado
FIN
Sentencia Math.random() , crea un numero aleatorio entre 0.000.....

0.999.....
Sentencia Math.random()*100 , crea un numero aleatorio entre
0.00.......
99.99.....
Sentencia Math.random()*100+1 , crea un numero aleatorio entre 1.00.......

100.99.....
Sentencia Math.floor(Math.random()*100+1) , crea un numero aleatorio entre
num_ale=Math.floor(Math.random()*100+1);
1....
100
Ejemplo consistente en acertar un numero que el ordenador ha elegido al azar entre 1 y 100 (usando la sentencia
anterior), si no acertamos nos dice si esta por arriba o por abajo y debemos volver a meter otro numero hasta que lo
acertemos.
<html>
<head>
<title>Sentencia repetitiva</title>
</head>
<body>

<p>Tienes que teclear un numero:<br>
var num_usu;
var num_ale;
num_usu=parseInt(prompt("Teclea un numero entre 1 y 100",""));
while(num_usu!=num_ale)
{
if (num_usu>num_ale)
{
alert("Para abajo");
}
else
{
alert("Para arriba");
}
num_usu=parseInt(prompt("Teclea otro numero",""));
}
alert("Has acertado")
</script>
</body>
</html>
Ejercicio 2 (Estructura Repetitiva con while)

INICIO
VAR(variables):
num_ale
Presentacin
num_usu
con_int
lim_inf
lim_sup
lim_inf=1
lim_sup=100
Teclea un numero entre +
lim_inf+y+lim_sup
} prompt
num_usu
cont_int=1
num_usu
!=
num_ale
NO
SI
NO
num_usu
>
num_ale
lim_inf=num_usu
SI
lim_sup=num_usu
cont_int++

lim_inf+y+lim_sup
} prompt
num_usu
Has acertado con+

con_int+intentos
FIN
Sentencia para generar numero aleatorio entre 1 y 100: num_ale=Math.floor(Math.random()*100+1);

Ejemplo similar al anterior que consistente en acertar un numero que el ordenador ha elegido al azar entre 1 y 100
(usando la sentencia anterior), en este caso nos dir con cuantos intentos hemos acertado, si fallamos no dir los
nuevos margenes entre los que esta el numero.

<html>
<head>
</head>
<body>
<p>Tienes que teclear un numero:<br>
var num_usu;
var num_ale;
var cont_int;
var lim_inf;
var lim_sup;
lim_inf=1
lim_sup=100
cont=1;
{
{
lim_sup=num_usu
}
else
{
lim_inf=num_usu
}
num_usu=parseInt(prompt("Teclea un numero entre "+lim_inf+" y "+lim_sup,""));
cont=cont+1;
}
alert("Has acertado y lo has hecho con: "+cont+" intentos");
alert("fin");
</script>
</body>
</html>
Ejercicio 3 (Estructura Repetitiva con do y while)

INICIO
VAR(variables):
num_ale
Presentacin
num_usu
con_int
lim_inf
lim_sup
lim_inf=1
resp
lim_sup=100
lim_inf+y+lim_sup
} prompt
num_usu
cont_int=1
num_usu
!=
num_ale
NO
SI
NO
num_usu
>
num_ale
lim_inf=num_usu
SI
lim_sup=num_usu
cont_int++

lim_inf+y+lim_sup
} prompt
Has acertado con+
con_int+intentos
num_usu
Otra partida
resp
SI
resp==S
OR
resp=s
NO
FIN
OR se pone ||
AND se pone &&

nuevos margenes entre los que esta el numero y una vez acertado no preguntara si queremos volver a repetir.

<html>
<head>
</head>
<body>
<p>Se trata de acertar un numero aleatorio que genera el ordenador<br>
var num_usu;
var num_ale;
var cont_int;
var lim_inf;
var lim_sup;
var resp;
do
{
lim_inf=1
lim_sup=100
cont=1;
{
{
lim_sup=num_usu
}
else
{
lim_inf=num_usu
}
cont=cont+1;
}
resp=prompt("Quieres repetir Si o No?","");
}
while(resp=="S"||resp=="s");
alert("fin");
</script>
</body>
</html>
Ejercicio 4 (Estructura Repetitiva con do y while doble)

INICIO
VAR(variables):
num_ale
Presentacin
num_usu
con_int
lim_inf
lim_sup
lim_inf=1
resp
lim_sup=100
lim_inf+y+lim_sup
} prompt
num_usu
cont_int=1
num_usu
!=
num_ale
NO
SI
NO
num_usu
>
num_ale
lim_inf=num_usu
SI
lim_sup=num_usu
Has acertado con+

con_int+intentos
cont_int++
} prompt
Otra partida

lim_inf+y+lim_sup
resp
num_usu
SI
resp!=s AND resp!=S AND resp!=n AND resp!=N
NO
SI
resp==S
or
resp=s
NO
FIN
OR se pone ||
AND se pone &&

nuevos margenes entre los que esta el numero y una vez acertado no preguntara si queremos volver a repetir, en este
caso se tiene que meter s o S para repetirlo y n o N para salir del juego, con cualquier otra tecla nos seguir
preguntando.

<html>
<head>
</head>
<body>
<p>Se trata de acertar un numero que crea aleatoriamente el ordenador, suerte<br>
var num_usu;
var num_ale;
var cont_int;
var lim_inf;
var lim_sup;
var resp;
do
{
lim_inf=1
lim_sup=100
cont=1;
{
{
lim_sup=num_usu
}
else
{
lim_inf=num_usu
}
cont=cont+1;
}
do
{
}
while(resp!="s"&&resp!="S"&&resp!="n"&&resp!="N");
}
alert("fin");
</script>
</body>
</html>
Ejercicio 5 (Estructura Repetitiva con do y while doble)

INICIO
VAR(variables):
num_ale
Presentacin
num_usu
con_int
lim_inf
lim_sup
lim_inf=1
resp
lim_sup=100
lim_inf+y+lim_sup
} prompt
num_usu
cont_int=1
num_usu
!=
num_ale
NO
SI
NO
cont_int++
NO
num_usu
!=
num_ale
lim_sup=num_usu
SI
num_usu<lim_inf
||
num_usu>lim_inf
No seas zoquete he dicho

entre+lim_inf+ y+lim_sup+
\n por esta vez te perdono
SI
Has acertado con+

con_int+intentos
lim_inf=num_usu
Otra partida S/N?
} prompt
resp

lim_inf+y+lim_sup
SI
num_usu
NO
SI
resp==S
or
resp=s
NO
FIN
OR se pone ||
AND se pone &&

nuevos margenes entre los que esta el numero y una vez acertado no preguntara si queremos volver a repetir, en este
caso se tiene que meter s o S para repetirlo y n o N para salir del juego, con cualquier otra tecla nos seguir
preguntando, con algunas mejoras mas.
<html>
<head>
</head>
<body>
<p>Se trata de acertar un numero que crea aleatoriamente el ordenador, suerte<br>
var num_usu; //Este es el numero que introduce el usuario
var num_ale; //Este es el numero que se genera aleatoriamente
var cont_int; //Este es el contador de intentos
var lim_inf; //Define el limite inferior
var lim_sup; //Define el limite superior
var resp; //Se utiliza para preguntar Si o No se repite
do
{
// alert(num_ale) "para saber el numero en las pruebas"
lim_inf=1;
lim_sup=100;
cont_int=1;
{
if(num_usu<lim_inf||num_usu>lim_sup)
alert("No seas zoquete he dicho entre"+lim_inf+" y "+lim_sup+"\n Por esta vez te perdono el fallo");
else
{
cont_int++;
if (num_usu<num_ale)
lim_inf=num_usu;
else
lim_sup=num_usu;
}
}
alert("Has acertado y lo has hecho con: "+cont_int+" intentos");
do
{
}
while(resp!="s"&&resp!="S"&&resp!="n"&&resp!="N")
}
while(resp=="S"||resp=="s")
alert("fin");
</script>
</body>
</html>
Estructura Repetitiva con for (n veces, pero el valor de n se sabe de antemano)

Esta sentencia utiliza una variable de control a modo de contador para controlar la repeticin del cuerpo del bucle. La
sentencia da un valor inicial a este contador y en cada iteracin lo modifica segn le indiquemos y comprueba la
condicin, si se cumple ejecuta el cuerpo del bucle, si no lo salta y contina por la siguiente sentencia.
for (i=0 ; i<n ; i++) entre ( ) la condicin

Efectuar n veces
{
sentencia;
}
Mientras la variable i este dentro de los
valores 0 a n repite la sentencia, por cada
paso se incrementa el valor de i hasta llegar
al valor de n y termina el bucle.
Sentencia
Ejemplo 1 (Estructura repetitiva con for)

Se trata de lanzar una moneda al aire 100 veces y contar cuantas veces ha salido cruz y cuantas cara.
As se hara con while:
Y as se hara con la sentencia for:

INICIO
cont_caras=0
cont_cruces=0
Presentacin
cont=1
cont_caras=0
NO
Cont
<=
100
NO
Cont=1;cont<=100;cont++
SI
SI
num_ale=Math.floor(Math.random()*2)
NO
cont_cruces=0
num_ale
==
0
SI
num_ale
==
0
cont_caras++
cont_caras++
cont_cruces++
cont_cruces++
cont++
Han salido +cont_caras+ caras

y +cont_cruces+ cruces
FIN
for(cont=1;cont<=100;cont++)
{
num_ale=Math.floor(Math.random()*2);
if(num_ale==0
cont_caras++;
else
cont_cruces++;
}

<html>
<head>
</head>
<body>

<p>Se trata de ver cuantas veces sale cara o cruz<br>
var cont_caras; //El numero de veces que sale cara
var cont_cruces; //El numero de veces que sale cruz
var num_ale;
var cont;
var num_lanzamientos
cont_caras=0
cont_cruces=0
num_lanzamientos=parseInt(prompt("Teclea numero de intentos entre 1 y 100",""));
//para numero lanzamientos 100 seria for(cont=1;cont<=100;cont++)
for(cont=1;cont<=num_lanzamientos;cont++)
{
if(num_ale==0)
cont_caras++;
else
cont_cruces++;
}
alert("Han salido "+cont_caras+" caras y "+cont_cruces+" cruces");
alert("fin");
</script>
</body>
</html>
Ejercicio 1 (Estructura repetitiva con for)

INICIO
VAR(variables):
Presentacin
num_ale
num_lanz
Cuantos lanzamientos?
cont_caras
cont_cruces
num_lanz
cont
cont_caras=0
NO
Se trata de lanzar una moneda al aire la cantidad de veces
especificada por el usuario y contar cuantas veces ha salido
cruz y cuantas cara.
Cont=1;cont<=num_lanz;cont++
SI
NO
num_ale
==
0
SI
cont_caras++
cont_cruces=num_lanz-cont_caras
Han salido +cont_caras+ caras
y +cont_cruces+ cruces
FIN
<html>
<head>
</head>
<body>
<p>Se trata de ver cuantas veces sale cara o cruz<br>
var cont_caras; //El numero de veces que sale cara
var cont_cruces; //El numero de veces que sale cruz
var num_ale;
var cont;
var num_lanzamientos;
cont_caras=0;
num_lanzamientos=parseInt(prompt("Teclea numero de intentos entre 1 y 100",""));
//para numero lanzamientos 100 seria for(cont=1;cont<=100;cont++)
for(cont=1;cont<=num_lanzamientos;cont++)
{
if(num_ale==0)
cont_caras++;
}
cont_cruces=num_lanzamientos-cont_caras;
alert("Han salido "+cont_caras+" caras y "+cont_cruces+" cruces");
alert("fin");
</script>
</body>
</html>
Ejercicio 2 (Estructura repetitiva con for)

Programa que dice cuantas veces ha salido un numero de un dado, el numero de lanzamientos lo define el usuario.
VAR(variables):
INICIO
num_ale ; num_lanz ; i ; cont1 ; cont2 ; cont3 ; cont4 ; cont5 ; cont6

Presentacin
num_lanz
Cont1=0;cont2=0;cont3=0;cont4=0;cont5=0;cont6=0
NO
I=0 ; i<num_lanz ; i++
SI
NO
num_ale
==
2
NO
cont6++
num_ale
==
5
num_ale
==
3
num_ale
==
4
num_ale
==
1
SI
cont1++
cont2++
cont3++
cont4++
SI
cont5++
La cara 1 ha salido + cont1 + veces \ln

...............
Mas lanzamientos? S/N:
resp
SI
NO
SI
resp==S
or
resp=s
NO
FIN

<html>
<head>
</head>
<body>
<p>Se trata de ver cuantas veces sale una cara de un dado<br>
var cont1 //El numero de veces que sale la cara del 1
var i;
var num_ale; //numero aleatorio entre 1 y 6
var num_lanz; //El numero de lanzamientos
var resp;
do
{
cont1=0; cont2=0; cont3=0; cont4=0; cont5=0; cont6=0;
num_lanz=parseInt(prompt("Teclea numero de intentos entre 1 y 100",""));
//para numero lanzamientos 100 seria for(i=0;cont<100;i++)
for(i=0;i<=num_lanz;i++)
{
if(num_ale==1)
cont1++;
else
if(num_ale==2)
cont2++;
else
if(num_ale==3)
cont3++;
else
if(num_ale==4)
cont4++;
else
if(num_ale==5)
cont5++;
else
cont6++;
}
alert("La cara 1 ha salido "+cont1+" veces \n"+"La cara 2 ha salido "+cont2+" veces \n"+
"La cara 3 ha salido "+cont3+" veces \n"+"La cara 4 ha salido "+cont4+" veces \n"+
"La cara 5 ha salido "+cont5+" veces \n"+"La cara 6 ha salido "+cont6+" veces \n");
do
{
}
}
alert("fin");
</script>
</body>
</html>
Ejercicio JavaScript (Estructura Compuesta con IF y ELSE)

1- Confecciona un script que te pida tu peso en kilos y tu altura en cm y que mediante el indice de masa corporal
(IMC), te indique si estas en tu peso, te sobran kilos o te faltan.
El IMC se calcula dividiendo el peso en kilos entre la altura en metros elevada al cuadrado, ten en cuenta que como le
has pedido la altura en cm deberas dividirlo entre 100 antes de hacer el calculo.
Si IMC menor que 20,5 estas delgado, si mayor o igual que 25,5 estas gordo y entre ambas marcas es tu peso.
2- Mejora el script anterior indicando el numero de kilos que te sobran o te faltan, si no estas en tu peso.
INICIO
var:
Presentacin
imc
Peso
alturacm
peso
alturacm
lim_inf=20.5;
lim_sup=25.5
altura
lim_sup=25.5
lim_sup
lim_inf
exceso
altura=(alturacm/100)
defecto
Calculo imc
imc=(peso/(altura*altura))
pesoinf
pesosup
pesoinf=(lim_inf*(altura*altura));
pesosup=(lim_sup*(altura*altura))
exceso=(peso-pesosup);
defecto=(pesoinf-peso)
NO
NO
Estas bien de peso
Imc
>=
lim_sup
Imc
<=
lim_inf
SI
SI
Estas delgado y te faltan +

defecto.toFixed(2)+ Kg para estar bien
Estas Obeso y te sobran +

exceso.toFixed(2)+ Kg para estar bien
Quieres repetir el calculo de tu masa corporal? S/N

resp
SI
NO
SI
resp==S
or
resp=s
NO
FIN
Datos de prueba:
Altura=170cm , Peso=80Kg, 60Kg y 55Kg
imc=80/1,7*1,7=27,68
peso inferior=imc(inferior)*altura 2 y peso superio=imc(superior)*altura 2
pesoinf=2,89x20,5=59,24Kg (para una altura de 170cm)
pesosup=2,89x25,5=73,69Kg (para una altura de 170cm)
<html>
<head>
<title>Ejercicio JavaScript</title>
</head>
<body>

<p>Se trata de meter tus datos de Peso en Kilos y altura en cm para calcular tu indice de masa corporal o IMC<p>
<p>De tal manera que sepas si tienes sobrepeso, estas delgado o tu peso es el adecuado<p>
<p>Ademas te dice por cuanto peso te pasas o te falta<p>
var imc //El indice de masa corporal que se calcula con altura al cuadrado entre el peso
var peso //El peso en kilogramos
var alturacm //La altura en cm
var altura //La altura pasada a metros
var lim_inf //Limite inferior fijado en 20.5 por debajo del cual se considera persona delgada
var lim_sup //Limite superior a partir del cual se considera persona obesa
var exceso //Cantidad de kilos que te sobran
var defecto //Cantidad de Kilos que necesitas coger para estar bien de peso
var pesoinf //Limite de Kg por debajo del que se considera persona delgada para la altura dada
var pesosup //Limite de Kg a partir del que se considera persona obesa para la altura dada
do
{
alert("Calculo de el indice de masa corporal IMC a partir de tu Altura y Peso");
peso=parseInt(prompt("Introduce tu peso en Kg",""));
alturacm=parseInt(prompt("Introduce tu altua en Cm",""));
lim_inf=20.5;
lim_sup=25.5;
altura=(alturacm/100);
imc=(peso/(altura*altura));
pesosup=(lim_sup*(altura*altura));
defecto=(pesoinf-peso);
if(imc<=lim_inf)
{
//Para que solo muestre un numero determinado de decimales se aade .toFixed(2) entre () el n de decimales
alert("Estas delgado y te faltan "+defecto.toFixed(2)+" Kg para estar bien de peso");
}
else
{
if(imc>=lim_sup)
{
alert("Estas Obeso y te sobran "+exceso.toFixed(2)+" Kg para estar bien de peso");
}
else
{
alert("Estas bien de peso");
}
}
do
{
}
}
alert("fin");
</script>
</body>
</html>
Algunas mejoras, sobre el anterior, muestra en el navegador los datos dados y resultados del IMC
<html>
<head>
</head>
<body>

<p>Se trata de meter tus datos de Peso en Kilos y altura en cm para calcular tu indice de masa corporal o IMC</p>
<p>De tal manera que sepas si tienes sobrepeso, estas delgado o tu peso es el adecuado</p>
<p>Ademas te dice cuanto peso te sobra o te falta</p>
var nombre //Nombre de la persona
var edad // Edad de la persona
do
{
nombre=prompt("Introduce tu nombre","");
edad=parseInt(prompt("Introduce tu edad",""));
lim_inf=20.5;
lim_sup=25.5;
document.write("<br> Nombre: "+nombre+"<br> Edad: "+edad);
document.write("<br> peso= "+peso+"kg"+"<br> altura= "+alturacm+"cm");
if(imc<=lim_inf)
{
//Para que solo muestre un numero determinado de decimales se aade .toFixed(2) entre () el n de decimales
document.write("<br> Estas delgado y te faltan "+defecto.toFixed(2)+" Kg para estar bien de peso <br>");
}
else
{
if(imc>=lim_sup)
{
document.write("<br> Estas Obeso y te sobran "+exceso.toFixed(2)+" Kg para estar bien de peso <br>");
}
else
{
alert("Estas bien de peso y tu indice de masa corporal IMC es de "+imc.toFixed(2)+
"\n Los margenes del IMC son de 20.5 a 25.5");
document.write("<br> Estas bien de peso y tu indice de masa corporal IMC es de "+imc.toFixed(2)+
"<br> Los margenes del IMC son de 20.5 a 25.5 <br>");
}
}
do
{
}
}
alert("fin");
</script>
<p></p>
</body>
</html>
El mismo programa con algunas mejoras, tambin muestra en la pagina los resultados, junto con el nombre y edad.
<html>
<head>
</head>
<body>

<p>Se trata de meter tus datos de Peso en Kilos y altura en cm para calcular tu indice de masa corporal o IMC</p>
<p>De tal manera que sepas si tienes sobrepeso, estas delgado o tu peso es el adecuado</p>
<p>Ademas te dice cuanto peso te sobra o te falta</p>
var nombre //Nombre de la persona
var edad // Edad de la persona
do
{
edad=parseInt(prompt("Introduce tu edad",""));
lim_inf=20.5;
lim_sup=25.5;
document.write("<br> Nombre: "+nombre+"<br> Edad: "+edad);
document.write("<br> peso= "+peso+"kg"+"<br> altura= "+alturacm+"cm");
if(imc<=lim_inf)
{
//Para que solo muestre un numero determinado de decimales se pone .toFixed(2) entre () el n de decimales
document.write("<br> Estas delgado y te faltan "+defecto.toFixed(2)+" Kg para estar bien de peso <br>");
}
else
{
if(imc>=lim_sup)
{
document.write("<br> Estas Obeso y te sobran "+exceso.toFixed(2)+" Kg para estar bien de peso <br>");
}
else
{
alert("Estas bien de peso y tu indice de masa corporal IMC es de "+imc.toFixed(2)+
"\n Los margenes del IMC son de 20.5 a 25.5");
document.write("<br> Estas bien de peso y tu indice de masa corporal IMC es de "+imc.toFixed(2)+
"<br> Los margenes del IMC son de 20.5 a 25.5 <br>");
}
}
do
{
}
}
alert("fin");
</script>
<p></p>
</body>
</html>
Ejercicio JavaScript (Estructura repetitiva con for)

Simula n lanzamientos de un dado trucado, en el que la cara 3 tiene doble probabilidades de salir que el resto.
VAR(variables):
INICIO
num_ale ; num_lanz ; i ; cont1 ; cont2 ; cont3 ; cont4 ; cont5 ; cont6

Presentacin
num_lanz
cont1=0;cont2=0;cont3=0;cont4=0;cont5=0;cont6=0
NO
i=0 ; i<num_lanz ; i++
A6
SI
num_ale
==
6
cont3++
A6
num_ale
==
2
cont6++
num_ale
==
5
NO
NO
num_ale
==
3
num_ale
==
4
num_ale
==
1
SI
cont1++
cont2++
cont3++
cont4++
SI
cont5++

...............
Mas lanzamientos? S/N:
resp
SI
NO
SI
resp==S
or
resp=s
NO
FIN

<html>
<head>
</head>
<body>
Donde la cara 3 tiene el doble de probabilidades de salir que el resto</p>
var i;
var resp;
do
{
cont1=0; cont2=0; cont3=0; cont4=0; cont5=0; cont6=0;
{
if(num_ale==1)
cont1++;
else
if(num_ale==2)
cont2++;
else
if(num_ale==3)
cont3++;
else
if(num_ale==4)
cont4++;
else
if(num_ale==5)
cont5++;
else
if(num_ale==6)
cont6++;
//En este paso cuando salga el 7 se sumara al 3 para el doble probailidad
else
cont3++;
}
alert("La cara 1 ha salido "+cont1+" veces \n"+"La cara 2 ha salido "+cont2+" veces \n"+
"La cara 3 ha salido "+cont3+" veces \n"+"La cara 4 ha salido "+cont4+" veces \n"+
"La cara 5 ha salido "+cont5+" veces \n"+"La cara 6 ha salido "+cont6+" veces \n");
do
{
}
}
alert("fin");
</script>
</body>
</html>
ARRAYS
Sirve para que de una tacada, declarar un montn de variables, que ademas se llaman igual.
Ejemplo de una ruleta
El array se inicializa as
(poner contenidos a 0):
i=15;
num_rul[i]=37;
for (i=0 ; i<37 ; i++)
num_rul[i]=0:
num_rul
5
2
7
23
36
Para diferenciarlos se asigna un indice (entre corchetes)

num_rul[2]=5;
num_rul[23]=7;
Para presentarlo en pantalla, haramos lo siguiente:
document.write("contenido del elemento 15 es "num_rul[15];
notese que se cuenta del 0 en adelante, con el 0 incluido.
Para declarar esto se hace (la cantidad de variables del array entre ()):
var num_rul= new Array (37);
El Array hay que inicializarlo y poner los contenidos a 0, se hace con una sentencia for:
i=15;
num_rul[i]=37;
for (i=0 ; i<37 ; i++)
num_rul[i]=0:
Para verlo en un ejemplo, hagamos el ejercicio de tirar dados:
Bucle para
inicializar
el Array
INICIO
Presentacin
num_lanz
i=0 ; i<6 ; i++
cont[i]=0
Bucle para calcular

los lanzamientos y
actualizar el Array
cont [num_ale] ++
El array va de 0 a 5, para mostrar de 1 a 6 se suma 1
i=0 ; i<6; i++

Bucle para
volcar el
Array
<br> La cara + (i+1) +

ha salido + cont[i] + veces
FIN

<html>
<head>
<title>Arrays</title>
</head>
<body>

var cont= new Array (6)
var i;
var resp;
do
{
for(i=0;i<6;i++)
{
cont[i]=0
}
{
cont[num_ale]++
}
for(i=0;i<6;i++)
document.write("<br> La cara "+(i+1)+" ha salido "+cont[i]+" veces");
do
{
}
}
alert("fin");
</script>
</body>
</html>
Comprobar la diferencia con el ejercicio de dados echo anteriormente (con sentencia repetitiva for y
sentencia if - else)
Ejercicio JavaScript
1- Confecciona un script que nos muestre 2 nmeros de dos dgitos y nos pida su suma, si el resultado es correcto as
nos lo comunica y si es errneo nos dir la solucin.
2- El mismo ejercicio pero que pregunte si se quiere volver a hacer mas sumas.
3- Que cuando yo le diga si quiero hacer mas sumas, si le respondo que No, me diga de las sumas hechas cuantas he
hecho bien y cuantas mal.
INICIO
var:
Presentacin
num1
Aciertos=0; fallos=0
num2
resultado
num1=Math.floor(Math.random()*90+10)
suma
num_suma
num1=Math.floor(Math.random()*90+10)
aciertos
fallos
Introduce el resultado
resp
resultado
suma=num1+num2
NO
resultado
==
suma
SI
La suma de +num1+ + +num2+ da

Como resultado +suma+ has acertado
La suma de +num1+ + +num2+ da

Como resultado +suma+ has fallado
aciertos++
fallos++
Quieres repetir? S/N

resp
SI
NO
SI
NO
resp==S
or
resp=s
num_suma=aciertos+fallos De +num_suma+ sumas has acertado +aciertos+ y has fallado +fallos

FIN
Notas:
num1=Math.floor(Math.random()*90+10) seria igual que num1=ParseInt((Math.random()*90+10)
fallos++ es igual que poner fallos=fallos+1

<html>
<head>
<title>Sumas</title>
</head>
<body>
<p>A partir de 2 numeros dados tienes que realizar la suma y el programa te dice si lo has hecho bien</p>
var num1; //primer numero de 2 cifras a sumar
var num2; //segundo numero de 2 cifras a sumar
var resultado; //resultado de la suma introducido por el usuario
var suma; //resultado de la suma, valor correcto
var num_suma; //numero de sumas realizadas
var aciertos; //numero de aciertos
var fallos; //numero fallos
aciertos=0;
fallos=0;
do
{
num1=Math.floor(Math.random()*90+10);
num2=Math.floor(Math.random()*90+10);
document.write("<br><br> el primer numero es "+num1);
document.write("<br> el segundo numero es "+num2+"<br> haz la suma y pon el resultado");
resultado=parseInt(prompt("introduce el resultado",""));
suma=(num1+num2);
if(resultado==suma)
{
document.write("<br> La suma de "+num1+" + "+num2+" da como resultado = "+suma+" y has acertado");
aciertos++;
}
else
{
document.write("<br> La suma de "+num1+" + "+num2+" da como resultado = "+suma+" tu has puesto "+resultado+ "
que esta mal");
fallos++;
}
do
{
}
}
num_suma=(aciertos+fallos);
document.write("<br><br> de "+num_suma+" sumas propuestas, has acertado "+aciertos+" y has fallado "+fallos);
document.write("<br><br> Fin");
</script>
</body>
</html>
Ruleta de n nmeros (Sentencia for y Arrays)

Programa que simula una ruleta, con 37 nmeros y en funcin a los lanzamientos que le digamos nos dice
cuantas veces ha salido un numero y el numero, usando arrays y la sentencia for.
num_ale
num_lanz
cont[5] = 0 ;
VAR:
num_ale
cont
0
cont=new Array(37)
1
36
i = 5;
cont[i] = 0 ;
num_lanz
i es el indice, osea 0, 1, 2, 3, ....., 36
INICIO
Bucle para
inicializar
el Array
Presentacin
i=0 ; i<37 ; i++
cont[i]=0
num_lanz
Bucle para calcular

los lanzamientos y
actualizar el Array
cont [num_ale] ++
i=0 ; i<37; i++

Bucle para
volcar el
Array
<br> El numero + i +
FIN
-Se ha cambiado 37 por la variable num y as poder cambiar los nmeros de la ruleta segn se necesite

<html>
<head>
<title>Arrays</title>
</head>
<body>
<p>Se trata de ver cuantas veces sale un numero de la ruleta<br>
var num=37; //numeros en la ruleta
var cont= new Array (num);
var i;
var num_ale; //numero aleatorio entre 1 y num
var resp;
var aux;
do
{
for(i=0;i<num;i++)
{
cont[i]=0
}
num_lanz=parseInt(prompt("Teclea numero de apuestas",""));
{
num_ale=Math.floor(Math.random()*num);
cont[num_ale]++
}
for(i=0;i<num;i++)
if (cont[i]!=0)
{
if(cont[i]>1) aux="veces";
else aux="vez";
document.write("<br> El numero "+(i)+" ha salido "+cont[i]+" "+aux);
}
do
{
}
}
alert("fin");
</script>
</body>
</html>
Ruleta de n nmeros (2) (Sentencia for y Arrays)

Programa que simula una ruleta, con 37 nmeros y en funcin a los lanzamientos que le digamos nos dice
cuantas veces ha salido un numero y el numero, usando arrays y la sentencia for.
Variacin del ejercicio anterior, que nos dice el numero que mas veces ha salido y cuantas veces.
num_ale
VAR:
num_lanz
num_ale
cont=new Array(37)
cont
i
0
36
num_lanz
mas_veces

mas_veces
num_mas_veces
num_mas_veces
INICIO
Presentacin
Bucle para
inicializar
el Array
i=0 ; i<37 ; i++

cont[i]=0
mas_veces=0
num_mas_veces=0
Bucle para ver que

numero ha salido
mas veces y cuantas
i=0 ; i<37 ; i++
NO
mas_veces
<
cont[i]
num_lanz
Bucle para calcular

los lanzamientos y
actualizar el Array
SI
mas_veces=cont[i]
cont [num_ale] ++
num_mas_veces=i
<br> El numero que mas veces ha

Salido es el + num_mas_veces +
con + mas_veces + salidad
i=0 ; i<37; i++
<br> El numero + i +
Bucle para
volcar el
Array
FIN
-Se ha cambiado 37 por la variable num y as poder cambiar los nmeros de la ruleta segn se necesite

<html>
<head>
<title>Arrays y sentencia for</title>
</head>
<body>
<p>Se trata de ver el numero que mas veces ha salido en la ruleta y cuantas<br>
var num=37; //numeros en la ruleta
var cont= new Array (num);
var i;
var num_ale; //numero aleatorio entre 1 y num
var resp;
var aux;
do
{
for(i=0;i<num;i++) //para inicializar el array
{
cont[i]=0
}
num_lanz=parseInt(prompt("Teclea numero de apuestas",""));
for(i=0;i<=num_lanz;i++) //Para hacer girar la ruleta tantas veces como digamos
{
num_ale=Math.floor(Math.random()*num);
cont[num_ale]++
}
for(i=0;i<num;i++)//Para que nos ponga que numeros han salido y cuantas veces
if (cont[i]!=0)
{
if(cont[i]>1) aux="veces";
else aux="vez";
document.write("<br> El numero "+(i)+" ha salido "+cont[i]+" "+aux);
}
mas_veces=0;
num_mas_veces=0;
for(i=0;i<num;i++) //Para saber el numero que mas veces ha salido y cuantas
if(mas_veces<cont[i])
{
mas_veces=cont[i]
num_mas_veces=i
}
//else Cuando no tiene sentencias que ejecutar no se pone
document.write("<br> El numero que mas veces ha salido es el "+
num_mas_veces+" con "+mas_veces+" salidas");
do
{
}
}
alert("fin");
</script>
</body>
</html>
Funciones y Mtodos
function nombre_funcin(arg1, arg2, ....., arg9)
{
instrucciones de la funcin
.....
}
funcin de un script que llama a otra:
<html>
<head>
<title>Funciones</title>
</head>
<body>
function saludo()
{
document.write("Hola Juan <br>");
}
</script>
var i;
for(i=0;i<5;i++)
saludo();
</script>
</body>
</html>
Funcion de un script que llama a otra y le devuelve el valor:

<html>
<head>
</head>
<body>
function saludo(nombre)
{
document.write("Hola "+nombre+"<br>");
nombre="Pepe";
document.write("Hola "+nombre+"<br>");
return nombre;
}
</script>
var i;
var mi_nombre;
var nom_vuelta;
mi_nombre=prompt("Teclea tu nombre","");
for(i=0;i<1;i++)
nom_vuelta=saludo(mi_nombre);
document.write("Hola "+nom_vuelta+"<br>");
</script>
</body>
</html>
Suma nmeros entre limites (Funciones)

Ejercicio que pide limite inferior y limite superior de dos nmeros y realiza la suma entre los nmeros
comprendidos.
var:
INICIO
lim_inf
lim_sup
Presentacin
suma
La funcin es:
Teclea el limite inferior
MostrarSumar
suma=0
lim_inf
Teclea el limite superior
i=lim_inf ; i<=lim_sup ; i++

lim_sup
i++
Suma=Suma+i
Volver
MostrarSumar
As se representa la funcin
La suma es =
suma
FIN

<html>
<head>
<title>Funciones con paso de argumentos</title>
function mostrarSumar(lim_inf,lim_sup)//las variables entre () ya estan declaradas y no hay que volver a declararlas
{
var suma;
var i; //se podria declarar en una sola linea con var suma, i;
suma=0;
for(i=lim_inf;i<=lim_sup;i++)
{
document.write(i+" + ");
suma=suma+i;//suma+=i;
}
return(suma);
}
</script>
</head>
<body>
<p>Introduce 2 numeros (inferior y superior) y el programa calcula la suma de todos los numeros comprendidos</p>
var lim_inf;
var lim_sup;
var suma;
lim_inf=parseInt(prompt("Teclea numero limite inferior",""));
lim_sup=parseInt(prompt("Teclea numero limite superior",""));
suma=mostrarSumar(lim_inf,lim_sup);
document.write("La suma es = "+suma);
</script>
</body>
</html>
Crear nmero aleatorios entre 2 nmeros dados (Funciones)

Ejercicio que pide limite inferior y limite superior de dos nmeros y de entre ellos saca un numero aleatorio
(se podra poner 1 y 6 de un dado y que saque un numero como si tirsemos el dado).
var:
INICIO
lim_inf
lim_sup
Presentacin
num_ale
La funcin es:
Teclea el limite inferior
calcularAleatorio
posib=lim_sup-lim_inf+1
lim_inf
Teclea el limite superior
num_ale=Math.floor(Math.random()*posib)
lim_sup
num_ale=num_ale+lim_inf
Volver
calcularAleatorio
As se representa la funcin
El numero aleatorio entre

+lim_inf+ y +lim_sup+
es +num_ale
FIN

<html>
<head>
<title>Funciones con paso de argumentos</title>
function calcularAleatorio(lim_inf,lim_sup)//las variables entre () ya estan declaradas y no hay que volver a declararlas
{
var num_ale;
var posib;
num_ale=lim_inf+(Math.floor(Math.random()*(lim_sup-lim_inf+1)));//equivale a las tres lineas siguientes
//posib=lim_sup-lim_inf+1;
//num_ale=Math.floor(Math.random()*posib)
//num_ale=num_ale+lim_inf;
return(num_ale);
}
</script>
</head>
<body>
<p>Introduce 2 numeros (inferior y superior) y el programa calcula numeros aleatorios</p>
var lim_inf;
var lim_sup;
var num_ale;
lim_inf=parseInt(prompt("Teclea numero limite inferior",""));
lim_sup=parseInt(prompt("Teclea numero limite superior",""));
num_ale=calcularAleatorio(lim_inf,lim_sup);
document.write("El numero aleatorio entre "+lim_inf+" y "+lim_sup+" es: "+num_ale);
</script>
</body>
</html>
Ejercicio JavaScript 1 Examen 1 Evaluacin
(2,5 puntos)
Mostrar los divisores de un numero dado.

VAR(variables):
INICIO
num;
Presentacin
i;
Los divisores de num son:
num
NO
i=1 ; i<num ; i++
NO
num%i
==
0
SI
i+-
En la sentencia for se ha puesto hasta <num 8esto es para que no salga el guion
detrs del ultimo numero), y una vez que se termina el bucle, se pone el numero
as se evita que quede un guion detrs del ultimo numero.
num
FIN
<html>
<head>
<title>sentencia for</title>
</head>
<body>
<p>Programa que muestra los divisores de un numero</p>
var num;
var i;
num=parseInt(prompt("Introduce un numero:",""));
document.write("<br> Los divisores de: "+num+" son: ");
for(i=1;i<num;i++) //se ha puesto <num y no <=num para evitar el guion al final
{
if(num%i==0)
{
document.write(i+" - ");
}
} //La siguiente sentencia es para poner el ultimo numero y que no quede un guion
document.write(num);//tambien valdria: con document.write(i);
document.write("<br> FIN");
</script>
</body>
</html>
(2,5 puntos)
Dar 3 datos (lado A, lado B y lado C) y indicar si se puede construir o no un triangulo, si se puede construir indicar si es
Equilatero (todos los lados iguales), Escaleno (todos los lados distintos) o Issceles (2 lados iguales).
Ademas se tiene que poder preguntar si se quiere repetir o no.
INICIO
var:
Presentacin
Lado A
b
c
Lado B
resp
Lado C
a<(b+c)
&&
b<(a+c)
&&
c<(a+b)
NO
Con los datos dados no se puede construir
SI
Se puede construir
NO
a==b
&&
a==c
Es Equilatero
a!=b
&&
a!=c
&&
B!c
Es Isosceles
SI
SI
Es Escaleno
Quieres repetir? S/N

resp
SI
NO
SI
NO
resp==S
or
resp=s
FIN
<html>
<head>
<title>sentencia do-while y if-else</title>
</head>
<body>
<p>Programa que te dice si se puede construir un triangulo y de que tipo</p>
var a;
var b;
var c;
var resp;
do
{
a=parseInt(prompt("Introduce un numero para el lado A:",""));
b=parseInt(prompt("Introduce un numero para el lado B:",""));
c=parseInt(prompt("Introduce un numero para el lado C:",""));
if(a<(b+c)&& b<(a+c) && c<(a+b))
{
if(a==b && b==c)
{
document.write("<br> El Triangulo es Equilatero");
}
else if(a!=b && a!=c && b!=c)
{
document.write("<br> El Triangulo es Escaleno");
}
else
{
document.write("<br> El Triangulo es Isosceles");
}
}
else
{
document.write("<br> El triangulo no se puede construir con los datos dados");
}
do
{
resp=prompt("Desea continuar S/N:","");
}
}
while(resp=="s"||resp=="S")
</script>
</body>
</html>
(5 puntos)
En base al Radio calcula la longitud y el Area de una circunferencia (eleccin 1 y 2) y si quiero salir indicarlo (eleccin 3).
var:
Pi = 3,14
INICIO
l
a
Presentacin
eleccion
La funcin es:
Escoge
Longitud (1)
Area (2)
Fin (3)
Longitud
Function longitud(Radio)
Eleccion
Longitud=2*Pi*Radio
NO
Eleccion
==
1
return(Longitud)
SI
Teclea Radio
NO
Eleccion
==
2
SI
Radio
Teclea Radio
MostrarLongitud
Area
Radio
Function Area(Radio)
MostrarArea
Area=Pi*Radio2
return(Area)
SI
Eleccion
!=
3
NO
FIN
<html>
<head>
function longitud(radio)
{
var longitud;
longitud=2*3.14*radio;//se puede saltar este paso poniendo return=(2*3.14*radio);
return(longitud);
}
function area(radio)
{
var area;
area=3.14*radio*radio;//se puede saltar este paso poniendo return=(3.14*radio*radio);
return(area);
}
</script>
</head>
<body>
<p>Programa que en base al Radio de una circunferencia, Calcula la Longitud y el Area</p>
var r;
var l;
var a;
var eleccion;
do
{
eleccion=prompt("Si quieres calcular la longitud, introduce 1 \nSi quieres calcular el Area,introduce 2 \nSi quieres finalizar
introduce 3","");
if(eleccion==1)
{
r=prompt("Introduce el valor del Radio, si hay decimales separados con un .","");
l=longitud(r);
document.write("<br> Para un valor del Radio de: "+r+" La longitud de la circunferencia es: "+l.toFixed(2));
//Para que solo muestre un numero determinado de decimales se pone .toFixed(2) entre () el numero de decimales
}
else if(eleccion==2)
{
r=prompt("Introduce el valor del Radio, si hay decimales separados con un .","");
a=area(r);
document.write("<br> Para un valor del Radio de: "+r+" El area de la circunferencia es: "+a.toFixed(2));
}
}
while(eleccion!=3);
</script>
</body>
</html>
Apuntes HTML con JavaScript

Creacin Eventos
Hacer click en un recuadro o pasar con el ratn por una zona de la pantalla se llama evento, en JavaScript
para hacer referencia al contenido de una caja (creada con html) se utiliza:
minimo=document.getElementById("min").value;
Para enviar un texto, dato o resultado obtenido en JavaScript a una caja de html se utiliza:
document.getElementById("res").value=r; donde r es el resultado de una funcin o operacin.
La caja creada con html que contendra el dato o donde se vera, seria:
<input type="text" name="res" id="res" size="5">
Para llamar a una funcin desde un recuadro de pulsar en html seria:
<input type="button" value="area Circulo" onClick="areacirculo()">
Ejemplo Calculo Nmeros aleatorios:
min
onClik
res
<html>
<head>
<title>Numeros Aleatorios</title>
function CalculoAleatorio()
{
var minimo, maximo, numposi, resultado;
minimo=document.getElementById("min").value;
maximo=document.getElementById("max").value;
resultado=Math.floor(Math.random()*(maximo-minimo+1))+parseInt(minimo);
document.getElementById("res").value=resultado;
}
</script>
</head>
<body>
<h1> CALCULO DE NUMEROS ALEATORIOS </h1>
<form name="f1" id="f1" action="">
<p> Teclea el numero mayor y menor del intervalo </p>
<p> Minimo:
<input type="text" name="min" id="min" size="5">
Maximo:
<input type="text" name="max" id="max" size="5">
<br><br>
<input type="button" value="Calcular Aleatorio" onClick="CalculoAleatorio()">
<br><br>Resultado:
<input type="text" name="res" id="res" size="5">
</form>
</body>
</html>
Ejercicio JavaScript Calculo iMC

1- Confecciona un script que te pida tu peso en kilos y tu altura en cm y que mediante el indice de masa corporal
(IMC), te indique si estas en tu peso, te sobran kilos o te faltan.
El IMC se calcula dividiendo el peso en kilos entre la altura en metros elevada al cuadrado, ten en cuenta que como le
has pedido la altura en cm deberas dividirlo entre 100 antes de hacer el calculo.
Si IMC menor que 20,5 estas delgado, si mayor o igual que 25,5 estas gordo y entre ambas marcas es tu peso.

<html>
<head>
<title>formulario peso ideal</title>
function calculaIMC()
{
var peso, altura, imc, leyenda;
peso=document.getElementById("peso").value;
altura=document.getElementById("altura").value/100;
imc=peso/(altura*altura);
document.getElementById("imc").value=imc.toFixed(2);
if(imc<=20.5)
leyenda="Estas delgado. Debes engordar " + (altura*altura*20.5-peso).toFixed(1) + " kilos";
else
if(imc>=25.5)
leyenda="Tienes sobrepeso. Debes adelgazar "+(peso-altura*altura*25.5).toFixed(1) +" kilos";
else
leyenda="Estas en tu peso ideal";
document.getElementById("leyenda").value=leyenda;
}
</script>
</head>
<body>
<fieldset>
<legend>CALCULO DEL PESO IDEAL IMC (Indice de Masa Corporal)</legend>
<p>Peso en kg.:
<input type="text" name="peso" id="peso" size="3" maxlength="4">
</p>
<p>Altura en cm.:
<input type="text" name="altura" id="altura" size="3" maxlength="3">
<input type="button" value="Calcular IMC" onClick="calculaIMC()">
</p>
<p> IMC:
<input type="text" name="imc" id="imc" size="10" maxlength="15">
Leyenda:
<input type="text" name="leyenda" id="leyenda" size="42">
</p>
</fieldset>
</form>
</body>
</html>
Ejercicio JavaScript Calculadora

1- Confecciona una calculadora sencilla
<html>
<head>
<title>Pruebas JavaScript</title>
function producto(a,b)
{
var r;
a=document.getElementById("num1").value;
b=document.getElementById("num2").value;
r=a*b;
document.getElementById("r").value=r.toFixed(2);
document.getElementById("operacion").value=" X";
}
function dividir(a,b)
{
var r;
r=a/b;
document.getElementById("operacion").value=" /";
}
function resta(a,b)
{
var r;
r=a-b;
document.getElementById("operacion").value=" -";
}
function suma(a,b)
{
var r;
r=parseFloat(a)+parseFloat(b);
document.getElementById("operacion").value=" +";
}
</script>
</head>
<body>
<fieldset>
<legend>Programa que simula una calculadora</legend>
<p><input type="text" name="num1" id="num1" size="6" maxlength="5">
<input type="text" name="operacion" id="operacion" size="1" maxlength="1">
<input type="text" name="num2" id="num2" size="6" maxlength="5" value=></p>
<p>=<input type="text" name="r" id="r" size="12" maxlength="10"></p>
<input type="button" value="/" onClick="dividir()">
<input type="button" value="X" onClick="producto()">
<input type="button" value="-" onClick="resta()">
<input type="button" value="+" onClick="suma()">
<input type="reset" value="CE">
</fieldset>
</form>
</body>
</html>
Ejercicio JavaScript Calculo Area Triangulo

Calculo del rea de un triangulo dados sus tres lados. Formula de Heron de Alejandria.
a
b
c
Sp = (a+b+c)/2
Area = sp*(sp-a)*(sp-b)*(sp-c)
<html>
<head>
<title>Calculo Area</title>
function CalculoArea()
{
var a, b, c, sp, area;
a=parseInt(document.getElementById("a").value);
b=parseInt(document.getElementById("b").value);
c=parseInt(document.getElementById("c").value);
if(a<(b+c)&& b<(a+c) && c<(a+b))
{
if(a==b && b==c)
{
document.getElementById("Tipo").value="El Triangulo es Equilatero";
//document.write("<br> El Triangulo es Equilatero");
}
else if(a!=b && a!=c && b!=c)
{
document.getElementById("Tipo").value="El Triangulo es Escaleno";
//document.write("<br> El Triangulo es Escaleno");
}
else
{
document.getElementById("Tipo").value="El Triangulo es Isosceles";
//document.write("<br> El Triangulo es Isosceles");
}
sp=(parseInt(a)+parseInt(b)+parseInt(c))/2;
area=Math.sqrt(sp*(sp-a)*(sp-b)*(sp-c));
document.getElementById("area").value=area.toFixed(2);
}
else
{
document.getElementById("Tipo").value="El triangulo no se puede construir con los datos dados";
//document.write("<br> El triangulo no se puede construir con los datos dados");
}
}
</script>
</head>
<body>
<h1> CALCULO DEL AREA DE UN TRIANGULO DADOS SUS 3 LADOS </h1>
<p> Lado A:
<input type="text" name="a" id="a" size="5"></P>
<p> Lado B:
<input type="text" name="b" id="b" size="5"></p>
<p> Lado C:
<input type="text" name="c" id="c" size="5"></p>
<br><br>
<input type="button" value="Calcular Area" onClick="CalculoArea()">
<br><br>Area:
<input type="text" name="area" id="area" size="5">
<p>El Triangulo es: <input type="text" name="Tipo" id="Tipo" size="50"></p>
</form>
</body>
</html>
Ejercicio Comprobacin password

Comprueba si se ha introducido correctamente una password:
<html>
<head> <title>Eventos JavaScript</title>
function ComprobarPassword()
{
var pass1=document.getElementById("pass1").value;
var pass2=document.getElementById("pass2").value;
var clavevalida;
if(pass1!=pass2)
{
alert("La clave introducida no coincide");
document.getElementById("pass1").value="";
document.getElementById("pass1").focus();
}
else
{
alert("Clave introducida correctamente");
clavevalida=pass1
alert("Recuerda, tu clave es: "+clavevalida);
}
}
function ComprobarLongitud()
{
var longitud=document.getElementById("pass1").value.length;
/* otra forma de acceder a la cja del formulario seria:
var longitud=document.getElementById("f1").pass1.value.length*/
/* otra forma de acceder a la cja del formulario seria:
var longitud=document.getElementById("f1");
longitud.pass1.value.length*/
if(longitud<5)
{
alert("Teclea al menos 5 caracteres");
//asignamos valor vacio a las cajas para limpiar el contenido
//damos foco a la caja de introducir clave
}
else if(pass2=null)
{
alert("Teclea al menos 5 caracteres");
}
}
function ComprobarNull()
{
var pass2=document.getElementById("pass2").value.length;
if(pass2<1)
{
alert("No has introducido clave, introduce tu clave");
}
}
</script>
</head>


<body onLoad="document.getElementById('pass1').focus()">
<h1> Comprobacion Password </h1>
<p> Teclea clave (al menos 5 caracteres):

<input type="password" name="pass1" id="pass1" maxlength="10" size="8" onBlur="ComprobarLongitud()"></p>
Teclea la clave de nuevo:
<input type="password" name="pass2" id="pass2" maxlength="10" size="8" onBlur="ComprobarNull()">
<input type="button" value="Comprobar" onClick="ComprobarPassword()"></p>
</form>
</body>
</html>
Con "onBlur" hacemos que al abandonar la caja se llame a una funcin que comprueba la longitud.
Ejercicio JavaScript DNI

Se trata de introducir un DNI y comprobar si hemos introducido correctamente la letra, si no introducimos
correctamente la letra que le corresponde, se volver a posicionar para que lo introduzcamos borrando el
DNI previamente introducido, ademas si ponemos la letra en minscula, el programa automticamente la
pondr en mayscula y con un alert nos avisara si esta bien o mal introducido..
<html>
<head>
<title>Calculo Area</title>
function CalculoLetra()
{
//Se define la cadena de letras validad y en el orden para el DNI, la posicion va de 0 a 23
var cadena="TRWAGMYFPDXBNJZSQVHLCKE";
//dividiendo el numero de DNI entre 23 se obtiene un resto, que determina la posicion de la letra que le corresponde
var posicion=document.getElementById("dni").value%23;
//se determina la letra que corresponde segun la posicion calculada anteriormente
var letra=cadena.charAt(posicion);
//realizamos la comparacion para determinar si es correcto el DNI introducido, con un If else
if(document.getElementById("nif").value.toUpperCase()!=letra || document.getElementById("dni").value.length !=8)
//poniendo .length a la variable le estamos diciendo el tamao de la cadena de valores, en este caso de 8
{
alert("DNI introducido incorrectamente");
document.getElementById("dni").value="";
document.getElementById("nif").value="";
document.getElementById("dni").focus();
}
else
{
alert("DNI correcto");
document.getElementById("nif").value=document.getElementById("nif").value.toUpperCase();
}
}
</script>
</head>

<body onLoad="document.getElementById('dni').focus()">
<h1> DNI </h1>
<p> DNI:
<input type="text" name="dni" id="dni" maxlength="8" size="8">
Letra:
<input type="text" name="nif" id="nif" maxlength="1" size="1">
<input type="button" value="OK" onClick="CalculoLetra()"></p>
</form>
</body>
</html>
Ejercicio Validacin formulario

Se trata de validar un formulario antes de enviarlo.
Verificar todo
sw=true
NO
NO
NO
NO
Nombre
==
Nombre
==
SI
Nombre
==
SI
Nombre
==
SI
alert
SI
focus
alert
sw=false
alert
focus
focus
sw=false
alert
sw=false
focus
sw=false
return
sw

<html>
<head>
<title> Validar formulario </title>
function verificartodo()
{
var sw=true;
if(document.getElementById("nombre").value=="")
{
alert("Debes rellenar el campo nombre");
document.getElementById("nombre").focus();
sw=false;
}
else if(document.getElementById("email").value=="")
{
alert("Debes rellenar el campo de email");
document.getElementById("email").focus();
sw=false;
}
else if (document.getElementById("pass1").value.length<5)
{
alert ("Imprescindible poner al menos 5 caracteres en el password");
sw=false;
}
else if(document.getElementById("pass1").value != document.getElementById("pass2").value)
{
alert("Los passwords tienen que ser iguales");
sw=false;
}
else if (sw==true)
{
alert ("Pagina validada");
}
return (sw);
}
</script>
</head>
<body onLoad="document.getElementById('nombre').focus()">
<h2> Formulario campos obligatorios </h2>

<form name="f1" id="f1" action="mailto:pepe@hotmail.com" onSubmit="return verificartodo()">
<p> Nombre y Apellidos*:
<input type="text" name="nombre" id="nombre" maxlength="10" size="8"></p>
<p> Email*:
<input type="text" name="email" id="email" maxlength="10" size="8"></p>
<p> Teclea clave (al menos 5 caracteres):
<input type="password" name="pass1" id="pass1" maxlength="10" size="8">
Teclea la clave de nuevo:
<input type="password" name="pass2" id="pass2" maxlength="10" size="8"></p>
Todos los campos son necesarios, El password tendra al menos 5 caracteres
<p><input type="submit" value="Enter"></p>
</form>
</body
</html>
Ejercicio Reloj
Se trata de presentar un reloj digital
html>
<head>
<title>Eventos JavaScript</title>
function RelojDigital()
{
var horaImprimir;
var fObj=new Date();//Creamos un objeto que contiene un array con datos de hora, fecha, dia etc del
ordenador.
var horas=fObj.getHours();//extraemos la hora
var minutos=fObj.getMinutes();//extraemos los minutos
var segundos=fObj.getSeconds();//extraemos los segundos
if(horas<=9)//le decimos que si las horas son menor que 9 meta un 0 por delante
horas="0"+horas;
if(minutos<=9)
minutos="0"+minutos;
if(segundos<=9)
segundos="0"+segundos;
horaImprimir=horas+":"+minutos+":"+segundos;
document.getElementById("reloj").value=horaImprimir;
}
</script>
</head>

<body onLoad="setInterval('RelojDigital()',1000)">
<h2> Reloj digital </h2>
<p>
<input type="text" name="reloj" id="reloj" size="8" style="color:#000000;backgroundcolor:#cccccc">
</p>
</form>
</body>
</html>
Conversin de HTML a XHTML

Una (gran) motivacin para pasar nuestro sitio a XHTML radica en que HTML (actualmente en la
versin 4.0) no se desarrollar ms. Existe un acuerdo para abandonarlo paulatinamente en
beneficio de XHTML (Extensible Hyper Text Markup Language).
La diferencia principal entre HTML y XHTML es que el cdigo de este ltimo se sujeta a un tipo de
reglas que se especifican en el DOCTYPE (tipo de documento) con el que inicia todo documento
XHTML. Veamos un pgina elemental de XHTML:
<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="es" lang="es">
<head>
<title> ::EL titulo </title>
</head>
<body>
<p>Este es mi primer XHTML !!</p>
<br />
</body>
</html>
La primera lnea (xml version=1.0) no es obligatoria, algunos navegadores como el IE 4.5 para
Mac y el Netscape 4.0 no despliegan bien el cdigo con esta lnea, pero realmente hay muy pocos
navegadores de este tipo hoy da. Colocar esta lnea o no, es su eleccin. Sin embargo, est lnea
le indica al navegador la codificacin de la pgina, en este caso el iso-8859-1 seala que la pgina
actual ser desplegada usando los carcteres de Europa Occidental (que incluyen al espaol).
Puede teclear los acentos y las ees sin necesidad de aacute;, eacute; ntilde; y dems etcteras!
El documento xhtml1-transitional.dtd contiene los lineamientos que los tags deben seguir para que
la pgina sea un documento vlido. Esto es interesante pues XHTML nos permite crear nuestros
propios tags para estructurar nuestra informacin segn nuestras necesidades. Al iniciarnos con
XHTML usaremos el Document Type Declaration o DTD transitional, pues es un poco menos
exigente en la marcacin de los tags, sin embargo, cuando usted sienta que ya domina
satisfactoriamente el XHTML, deber pasarse al DTD strict.
La lnea <html xmlns=http://www.w3.org/1999/xhtml xml:lang=es lang=es> indica el elemento

root (raz) de la pgina. Si usted ha usado Linux sabe que del root (/) parten los elementos del
sistema. Los documentos XHTML tambin deben tener un lugar de donde partir. Adems del
elemento root, esta lnea seala que todo lo que se desprenda de l, estar en espaol (es).
Yo uso:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<title>Título de la web</title>
</head>
Escribiendo XHTML
Veamos las diferencias principales en la codificacin de XHTML con respecto a HTML.
1.- Todos los tags en minsculas. tanto los tags como sus atributos deben ir en minsculas. En
HTML podemos tener:
<P><B> Este es un parrafo </B></P>

<FORM ACTION=EDIT.PHP METHOD=POST>
Pero en XHTML debe ser:
<p><b> Este es un parrafo </b></p>
<form action="edit.php" method="post">
2.- Correcta anidacin de los tags. En XHTML no podemos intercalar desordenadamente los tags.
En HTML podemos tener:
<p><i><b>Cdigo mal anidado<i></b></p>
<p><b><i>Cdigo bien anidado<i></b></p>
3.- Todos los atributos llevan comillas dobles. En HTML podemos tener:
<table align=center width=90% border=0>
<table align="center" width="90%" border="0">
4.- Todo tag abierto se cierra. incluso los tag img, type (de los formularios) y br deben cerrarse. En
HTML podemos tener:
<input type="hidden" value="9" name="pass">
<br>
<img src="imagen.jpg" alt="Imagen" title="Imagen" >

<input type="hidden" value="9" name="pass" />
<br />
<img src="imagen.jpg" alt="Imagen" title="Imagen" />
Adems de cerrarse, el tag img debe tener el atributo alt y title, alt es alternative text (para los
navegadores Web textuales como lynx o Links). Mientras, title es el tooltip que se despliega
cuando colocamos el cursor del ratn sobre la imagen.
5.- JavaScript dentro de tag CDATA. Los javascripts que van dentro del cuerpo de la pgina (no en
el header) deben estar dentro del tag CDATA. En HTML podemos tener:
<script language="JavaScript" type="text/javascript">
<!-document.write("Hello World!");
-->
</script>

<![CDATA[
document.write("Hello World!");
]]>
</script>
6.- Las anclas son IDs. Las anclas (anchor) que nos permiten navegar dentro una pgina grande,
ya no son referenciadas por el tag a sino por el ID del elemento hacia el cual deseamos ir. En
HTML podemos tener:
<a name=top> <img src=imagen.png> </a>
<a href="#top"> Ir arriba </a>
<img src="imagen.png" id="top"
title="Imagen" alt="Imagen" /></a><a href="#top">Ir arriba</a>
7.- Los atributos deben ser explcitos. Los atributos deben tener un nombre y un valor sin
reducirlos. En HTML podemos tener:
<input type="radio" value="2" checked>
<td nowrap> Texto </td>
<option value="m" selected>
<input type="radio" value="2" checked="checked">
<td nowrap="nowrap"> Texto </td>
<option value="m" selected="selected">
XML
XML es un Lenguaje de Etiquetado Extensible muy simple, pero estricto que juega un papel
fundamental en el intercambio de una gran variedad de datos. Es un lenguaje muy similar a HTML
pero su funcin principal es describir datos y no mostrarlos como es el caso de HTML.
XML es un formato que permite la lectura de datos a travs de diferentes aplicaciones y sirve para
estructurar, almacenar e intercambiar informacin.
Ventajas del XML
Es extensible: Despus de diseado y puesto en produccin, es posible extender XML con
la adicin de nuevas etiquetas, de modo que se pueda continuar utilizando sin complicacin
alguna.
El analizador es un componente estndar, no es necesario crear un analizador especfico
para cada versin de lenguaje XML. Esto posibilita el empleo de cualquiera de los
analizadores disponibles. De esta manera se evitan bugs y se acelera el desarrollo de
aplicaciones.
Si un tercero decide usar un documento creado en XML, es sencillo entender su estructura
y procesarla. Mejora la compatibilidad entre aplicaciones. Podemos comunicar aplicaciones
de distintas plataformas, sin que importe el origen de los datos, es decir, podramos tener
una aplicacin en Linux con una base de datos Postgres y comunicarla con otra aplicacin
en Windows y Base de Datos MS-SQL Server.
Transformamos datos en informacin, pues se le aade un significado concreto y los
asociamos a un contexto, con lo cual tenemos flexibilidad para estructurar documentos.
Estructura de un documento XML
La tecnologa XML busca dar solucin al problema de expresar informacin estructurada de la
manera ms abstracta y reutilizable posible. Que la informacin sea estructurada quiere decir que
se compone de partes bien definidas, y que esas partes se componen a su vez de otras partes.
Entonces se tiene un rbol de trozos de informacin. Ejemplos son un tema musical, que se
compone de compases, que estn formados a su vez por notas. Estas partes se llaman
elementos, y se las seala mediante etiquetas.
Una etiqueta consiste en una marca hecha en el documento, que seala una porcin de ste como
un elemento. Un pedazo de informacin con un sentido claro y definido. Las etiquetas tienen la
forma <nombre>, donde nombre es el nombre del elemento que se est sealando.
A continuacin se muestra un ejemplo para entender la estructura de un documento XML:
<?xml version="1.0" encoding="ISO-8859-1" ?>

<?xml-stylesheet type="text/css" href="css/filmoteca.css"?>

<pelicula>


<titulo>Tom & Jerry</titulo>

<director>Akira Kurosawa</director>
<actores>
<actor>Asakadazu Nakai</actor>
<actor>Yuri Salomi</actor>
</actores>
</pelicula>
El fichero de estilos .css contiene lo siguiente:

titulo
{
display
font-size
}
director
{
display
font-size
}
director:before
{
content
font-size
}
actor
{
display
font-size
}
actor:before
{
content
font-size
}
:block;
:30px;
:block;
:20px;
:"Director:";
:20px;
:block;
:20px;
:"Reparto:";
:20px;
Definicin de tipo de documento

Una definicin de tipo de documento o DTD (siglas en ingls de document type definition) es
una descripcin de estructura y sintaxis de un documento XML o SGML.
Su funcin bsica es la descripcin de la estructura de datos, para usar una estructura comn y
mantener la consistencia entre todos los documentos que utilicen la misma DTD.
De esta forma, dichos documentos pueden ser validados, conocen la estructura de los elementos
y la descripcin de los datos que trae consigo cada documento, y pueden adems compartir la
misma descripcin y forma de validacin dentro de un grupo de trabajo que usa el mismo tipo de
informacin.
Las DTD se emplean generalmente para determinar la estructura de un documento mediante
etiquetas (en ingls tags) XML o SGML. Una DTD describe:
Elementos: indican qu etiquetas son permitidas y el contenido de dichas etiquetas.
Estructura: indica el orden en que van las etiquetas en el documento.
Anidamiento: indica qu etiquetas van dentro de otras.
A continuacin se muestra un ejemplo de un documento XML con la definicin DTD en fichero

aparte:
<?xml version="1.0" encoding="ISO-8859-1"?>

<?xml-stylesheet type="text/css" href="css/filmoteca.css"?>

<!DOCTYPE pelicula SYSTEM "css/filmoteca.dtd">

<pelicula>


<titulo>Tom & Jerry</titulo>

</pelicula>
El fichero DTD .dtd contiene lo siguiente:
<!ELEMENT pelicula (titulo)>
<!ELEMENT titulo (#PCDATA)>
Las reglas para los elementos son:
<!ELEMENT nombre tipo>
El elemento clasificacin esta vaci
<!ELEMENT clasificacion EMPTY>
El elemento pelicula pueden ser cualquiera (no se admite &,<,>,',)
<!ELEMENT pelicula ANY>
& se usa &
> se usa >
< se usa &lt
' se usa '
se usa "
El elemento Titulo tienen un conjunto de caracteres
<!ELEMENT Titulo (#PCDATA)>
Cardinalidad:
?
Puede aparecer una o ninguna vez
*
Puede aparecer ninguna, una o mas de una vez
+
Puede aparecer una o mas de una vez
|
Uno u otro
Atributos:
<!ATTLIST elemento nombreatributo tipo valor_por_defecto>
Presencia:
#IMPLIED
#REQUIRED
#FIXED valor
valor
Es opcional asignar un valor al atributo

Es obligatorio asignar un valor al atributo
El valor de atributo es el indicado y no se puede cambiar
El valor asignado es el predeterminado
se ve en el archivo: LM21_XML_05_filmoteca4.xml y su dtd filmoteca4.dtd
Ejemplo del XML:


<?xml-stylesheet type="text/css" href="css/filmoteca7.css"?>

<!DOCTYPE hemeroteca SYSTEM "dtd/hemeroteca1.dtd">

<hemeroteca>
<pelicula>


<titulo duracion="32">Tom & Jerry</titulo>

<director>Pepe calleja</director>
<reparto>
<actor papel="Actor_principal">jose Maldonado</actor>
<actor papel="Actor_secundario">jesus Montes</actor>
<actor>jose Riano</actor>
</reparto>
</pelicula>
<pelicula>


<titulo duracion="150">Star Trek</titulo>

<director>Gene Roddenberry</director>
<reparto>
<actor papel="Actor_principal">William Shatner</actor>
<actor papel="Actor_secundario">Leonard Nimoy</actor>
<actor>George Takei</actor>
</reparto>
</pelicula>
</hemeroteca>
Ejemplo del dtd:

<!ELEMENT hemeroteca (pelicula+)>
<!ELEMENT pelicula (titulo,director,reparto?)>
<!ELEMENT titulo (#PCDATA)>
<!ATTLIST titulo duracion CDATA "">
<!ELEMENT director (#PCDATA)>
<!ELEMENT reparto (actor+)>
<!ELEMENT actor (#PCDATA)>
<!ATTLIST actor papel (Actor_principal|Actor_secundario) #IMPLIED>
XML en Esquema (Schema)

XML Schema es un lenguaje de esquema, utilizado para describir la estructura y las restricciones
de los contenidos de los documentos XML de una forma muy precisa, ms all de las normas
sintcticas impuestas por el propio lenguaje XML. Se consigue as una percepcin del tipo de
documento con un nivel alto de abstraccin.
XML Schema es un lenguaje de esquema escrito en XML, basado en la gramtica y pensado para
proporcionar una mayor potencia expresiva que las DTD, menos capaces al describir los
documentos a nivel formal.
Tipo:
string
boolean
byte, short, integer, long
float, double, decimal
date
time
cadena de texto
valores booleanos
nmeros enteros
nmeros reales
fecha
hora
Ejemplo:
Dersu Uzala
true/false
27, -3542
-27,32 , 519,38
27/03/2012
23:15
Ejemplo XML schema:

<pelicula xmlns:xs="http://www.w3.org/2001/XMLSchema-instance"
xs:noNamespaceSchemaLocation="dtd/filmoteca2.xsd">
<titulo>Dersu Uzala</titulo>
<duracion>141</duracion>
</pelicula>
Y su xsd:
<schema xmlns="http://www.w3.org/2001/XMLSchema">
<element name="pelicula">
<complexType>
<sequence>
<element name="titulo" type="string"/>
<element name="duracion" type="integer"/>
</sequence>
</complexType>
</element>
</schema>
Otro ejemplo mas completo:
<pelicula xmlns:xs="http://www.w3.org/2001/XMLSchema-instance"
xs:noNamespaceSchemaLocation="dtd/pelicula.xsd">
<director>Alex de la Iglesia</director>
<reparto>
<actor>Jose de la Vega</actor>
<actor>Juan Etxanove</actor>
<actor>Leonardo di Caprio</actor>
<actor>Kate Winslet</actor>
</reparto>
</pelicula>
Y su xsd:
<schema xmlns="http://www.w3.org/2001/XMLSchema">
<element name="pelicula">
<complexType>
<sequence>
<element name="titulo" type="string"/>
<element name="director" type="string"/>
<element name="reparto">
<complexType>
<sequence>
<element maxOccurs="unbounded" name="actor" type="string"/>
</sequence>
</complexType>
</element>
</sequence>
</complexType>
</element>
</schema>
Un ejemplo mas:
<hemeroteca xmlns:xs="http://www.w3.org/2001/XMLSchema-instance"
xs:noNamespaceSchemaLocation="dtd/hemerotecaschema.xsd">
<pelicula>
<director>Alex de la Iglesia</director>
<reparto>
<actor>Jose de la Vega</actor>
<actor>Juan Etxanove</actor>
</reparto>
</pelicula>
<pelicula>
<titulo>Titanic</titulo>
<director>James Camero</director>
<reparto>
<actor>Leonardo di Caprio</actor>
<actor>Kate Winslet</actor>
</reparto>
</pelicula>
<pelicula>
<titulo>Airbag</titulo>
<director>Pedro Ruiz</director>
</pelicula>
</hemeroteca>
y su xsd:
<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified">
<xs:element name="hemeroteca">
<xs:complexType>
<xs:sequence>
<xs:element name="pelicula" maxOccurs="unbounded">
<xs:complexType>
<xs:sequence>
<xs:element name="titulo" type="xs:string"/>
<xs:element name="director" type="xs:string"/>
<xs:element name="reparto" minOccurs="0" maxOccurs="1">
<xs:complexType>
<xs:sequence>
<xs:element name="actor" maxOccurs="unbounded" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
con xs: delante definimos que es un espacio de nombres propio.
Otro ejemplo mas completo:
<hemeroteca
xmlns:xs="http://www.w3.org/2001/XMLSchema-instance"
xs:noNamespaceSchemaLocation="hemerotecaschema2.xsd">
<pelicula>

<reparto>
<actor papel="Actor principal">Asakadazu Nakai</actor>
<actor papel="Actor principal">Yuri Solomin</actor>
<actor papel="Actor secundario">Svletana Danilchenko</actor>
<actor>Dima Kortishev</actor>
</reparto>
</pelicula>
<pelicula>
<titulo>Dos hombres y un destino</titulo>
<director>George Roy Hill</director>
<reparto>
<actor papel="Actor principal">Robert Redford</actor>
<actor papel="Actor principal">Paul Newman</actor>
<actor papel="Actor secundario">Katharine Ross</actor>
</reparto>
</pelicula>
<pelicula>
<director>Pedro Almodovar</director>
</pelicula>
</hemeroteca>
Y su xsd:
<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified">
<xsd:element name="hemeroteca">
<xsd:complexType>
<xsd:sequence>
<xsd:element maxOccurs="unbounded" name="pelicula">
<xsd:complexType>
<xsd:sequence>
<xsd:element name="titulo" type="xsd:string" />
<xsd:element name="director" type="xsd:string" />
<xsd:element name="reparto" minOccurs="0">
<xsd:complexType>
<xsd:sequence>
<xsd:element maxOccurs="unbounded" name="actor" >
<xsd:complexType>
<xsd:simpleContent>
<xsd:extension base="xsd:string">
<xsd:attribute name="papel" >
<xsd:simpleType>
<xsd:restriction base="xsd:string">
<xsd:enumeration value="Actor principal" />
<xsd:enumeration value="Actor secundario" />
</xsd:restriction>
</xsd:simpleType>
</xsd:attribute>
</xsd:extension>
</xsd:simpleContent>
</xsd:complexType>
</xsd:element>
</xsd:sequence>
</xsd:complexType>
</xsd:element>
</xsd:sequence>
</xsd:complexType>
</xsd:element>
</xsd:sequence>
</xsd:complexType>
</xsd:element>
</xsd:schema>
Hojas de Estilos para XML (xslt)

XSL significa Extensible Stylesheet Language, y es un lenguaje de hojas de estilo para
documentos XML.
XSLT significa Transformaciones XSL. En este tutorial usted aprender cmo utilizar XSLT para transformar
documentos XML en otros formatos, como XHTML.
CSS = hojas de estilo para HTML
Xsl = hojas de estilo para XML
XSL - Ms que un lenguaje de hojas de estilo
XSL consta de tres partes:
XSLT - un lenguaje para transformar documentos XML
XPath - un idioma para navegar en documentos XML
XSL-FO - un lenguaje para formatear documentos XML
XSLT es un lenguaje para transformar documentos XML en documentos XHTML u otros

documentos XML.
XPath es un lenguaje para navegar en documentos XML.
Qu es XSLT?
XSLT significa Transformaciones XSL
XSLT es la parte ms importante de XSL
XSLT transforma un documento XML en otro documento XML
XSLT usa XPath para navegar en documentos XML
XSLT es una Recomendacin del W3C
Hoja de estilo correcto, Declaracin

El elemento raz que declara que el documento es una hoja de estilo XSL es <xsl:stylesheet> o
<xsl:transform>.
Nota: <xsl:stylesheet> y <xsl:transform> son completamente sinnimos, y puede ser utilizado!
La forma correcta de declarar una hoja de estilo XSL de acuerdo con la Recomendacin del W3C XSLT es:
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
o bien:
<xsl:transform version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
Para conseguir el acceso a los elementos XSLT, atributos y caractersticas que debe declarar el espacio de
nombres de XSLT en la parte superior del documento.
Los xmlns: xsl = "http://www.w3.org/1999/XSL/Transform~~HEAD=NNS" apunta a que el funcionario de
espacio de nombres del W3C XSLT. Si usted utiliza este espacio de nombres, tambin debe incluir la versin
atributo = "1.0".
Una hoja de estilo XSL se compone de uno o varios conjuntos de reglas que se llaman plantillas.
Una plantilla contiene las reglas que se aplican cuando un nodo especificado coincide.
Teoria aqui:
http://www.w3schools.com/xsl
Para editar se puede usar Note Pad ++ que ademas tiene validacin de xml:
http://notepad-plus-plus.org/
Al instalarlo hay que instalar XML tools
Otro editor mejor es XML Copy Editor 1.2.0.6
http://xml-copy-editor.sourceforge.net
Informacin y curso de XML en:
http://www.w3schools.com/xml/xml_whatis.asp
Generador de schema para xml:
http://www.xmlforasp.net/codebank/system_xml_schema/buildschema/buildxmlschema.aspx
XML XSD XSL CSS

Prueba.xml :
Prueba.xsd :
Prueba.xsl :
Prueba.css:
Lenguaje etiquetado extensible

Lenguaje de esquema (Describe la estructura y restricciones del XML)
Lenguaje extensible de hojas de estilo (Muestra el XML como si se tratase de una pagina web)
Definicin de los estilos para el xsl
Ejemplo 1 de XML:
1 Creamos el archivo XML (hemerotecaschema3.xml)
<?xml-stylesheet type="text/xsl" href="hemerotecaschema3.xsl"?>
<hemeroteca xmlns:xs="http://www.w3.org/2001/XMLSchema-instance"
xs:noNamespaceSchemaLocation="hemerotecaschema3.xsd">
<pelicula>

<reparto>
<actor papel="Actor principal">Asakadazu Nakai</actor>
<actor papel="Actor principal">Yuri Solomin</actor>
<actor papel="Actor secundario">Svletana Danilchenko</actor>
<actor>Dima Kortishev</actor>
</reparto>
</pelicula>
<pelicula>
<titulo>Dos hombres y un destino</titulo>
<director>George Roy Hill</director>
<reparto>
<actor papel="Actor principal">Robert Redford</actor>
<actor papel="Actor principal">Paul Newman</actor>
<actor papel="Actor secundario">Katharine Ross</actor>
</reparto>
</pelicula>
<pelicula>
<director>Pedro Almodovar</director>
</pelicula>
<pelicula>
<titulo>La balada de Cable Hogue</titulo>
<director>Sam Peckinpah</director>
<reparto>
<actor papel="Actor principal">Jason Robards</actor>
<actor papel="Actor principal">Stella Stevens</actor>
<actor papel="Actor secundario">David Warners</actor>
</reparto>
</pelicula>
</hemeroteca>
2 Creamos un archivo para Definir la estructura y restricciones del XML (hemerotecaschema3.xsd)

<xsd:element name="hemeroteca">
<xsd:complexType>
<xsd:sequence>
<xsd:element maxOccurs="unbounded" name="pelicula">
<xsd:complexType>
<xsd:sequence>
<xsd:element name="titulo" type="xsd:string"/>
<xsd:element name="director" type="xsd:string"/>
<xsd:element name="reparto" minOccurs="0">
<xsd:complexType>
<xsd:sequence>
<xsd:element maxOccurs="unbounded" name="actor" >
<xsd:complexType>
<xsd:simpleContent>
<xsd:extension base="xsd:string">
<xsd:attribute name="papel">
<xsd:simpleType>
<xsd:enumeration value="Actor principal"/>
<xsd:enumeration value="Actor secundario"/>
</xsd:restriction>
</xsd:simpleType>
</xsd:attribute>
</xsd:extension>
</xsd:complexType>
</xsd:element>
</xsd:sequence>
</xsd:complexType>
</xsd:element>
</xsd:sequence>
</xsd:complexType>
</xsd:element>
</xsd:sequence>
</xsd:complexType>
</xsd:element>
</xsd:schema>
3 Creamos un archivo para mostrar el XML como si fuese una pagina web (hemerotecaschema3.xsl)
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="/">
<html>
<head>
<title>Hemeroteca</title>
<link rel="StyleSheet" href="hemerotecaschema3.css" type="text/css"/>
</head>
<body>
<h1>Peliculas</h1>
<table border="1">
<tr>
<th>Titulo</th><th>Director</th><th>Reparto</th>
</tr>
<xsl:for-each select="hemeroteca/pelicula">



<tr>
<td class="resaltado"><xsl:value-of select="titulo"/></td>
<td><xsl:value-of select="director"/></td>
<td>
<ul>
<xsl:for-each select="reparto/actor">

<li>
<xsl:value-of select="."/>

<ul>
<span class="papel"><xsl:value-of select="@papel"/></span>

</ul>
<br />
</li>
</xsl:for-each>
</ul>
</td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
4 Creamos el archivo de estilos para una presentacin bonita (hemerotecaschema3.css)

h1
{
text-align:left;
font-family:helvetica;
font-size:25px;
}
table
{
border:3px solid green;
}
th
{
text-align:center;
text-decoration :bold;
font-family :arial;
font-size :15px;
background :#dfd;
}
td
{
text-align :left;
font-family :arial;
font-size :13px;
background :#ddd;
padding-left:10px;
}
ul
{
text-align :left;
font-family :arial;
font-size :12px;
padding-left:10px;
}
.resaltado
{
font-size:1.2em;
color:red;
}
.rojo
{
color:red;
}
.papel
{
margin:5px;
color:green;
text-align:right;
}
5 El resultado visualizado con firefox al abrir hemerotecaschema3.xml es:
Ejemplo 2 de XML:
1 Creamos el archivo XML (cdcatalog.xml)
<?xml-stylesheet type="text/xsl" href="cdcatalog.xsl"?>
<catalog xmlns:xs="http://www.w3.org/2001/XMLSchema-instance"
xs:noNamespaceSchemaLocation="cdcatalog.xsd">
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
<cd>
<title>Hide your heart</title>
<artist>Bonnie Tyler</artist>
<country>UK</country>
<company>CBS Records</company>
<price>9.90</price>
<year>1988</year>
</cd>
<cd>
<title>Greatest Hits</title>
<artist>Dolly Parton</artist>
<country>USA</country>
<company>RCA</company>
<price>9.90</price>
<year>1982</year>
</cd>
<cd>
<title>Still got the blues</title>
<artist>Gary Moore</artist>
<country>UK</country>
<company>Virgin records</company>
<price>10.20</price>
<year>1990</year>
</cd>
<cd>
<title>Eros</title>
<artist>Eros Ramazzotti</artist>
<country>EU</country>
<company>BMG</company>
<price>9.90</price>
<year>1997</year>
</cd>
</catalog>
Nota: El listado original tiene mas cd pero como no entraban en una hoja, los he borrado, no hay problema
porque el formato era el mismo que los que estn puestos.
2 Creamos un archivo para Definir la estructura y restricciones del XML (cdcatalog.xsd)

<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema" attributeFormDefault="unqualified"
elementFormDefault="qualified" version="1.0">
<xsd:element name="catalog">
<xsd:complexType>
<xsd:sequence>
<xsd:element maxOccurs="unbounded" name="cd">
<xsd:complexType>
<xsd:sequence>
<xsd:element name="title" type="xsd:string"/>
<xsd:element name="artist" type="xsd:string"/>
<xsd:element name="country" type="xsd:string"/>
<xsd:element name="company" type="xsd:string"/>
<xsd:element name="price" type="xsd:decimal"/>
<xsd:element name="year" type="xsd:int"/>
</xsd:sequence>
</xsd:complexType>
</xsd:element>
</xsd:sequence>
</xsd:complexType>
</xsd:element>
</xsd:schema>
3 Creamos un archivo para mostrar el XML como si fuese una pagina web (cdcatalog.xsl)
<html>
<head>
<title>Catalogo CDs</title>
<link rel="StyleSheet" href="cdcatalog.css" type="text/css"/>
</head>
<body>
<h1>Mi coleccion de CDs</h1>
<table border="1">
<tr>
<th>Titulo</th><th>Artista</th><th>Precio</th>
</tr>
<xsl:for-each select="catalog/cd">

<xsl:sort select="price"/>

<xsl:if test="price > 8 and price < 10">

<tr>
<td class="resaltado"><xsl:value-of select="title"/></td>
<td><xsl:value-of select="artist"/></td>
<xsl:choose>

<xsl:when test="price > 9">
<td class="rojo"><xsl:value-of select="price"/></td>
</xsl:when>
<xsl:otherwise>
<td><xsl:value-of select="price"/></td>
</xsl:otherwise>
</xsl:choose>
</tr>
</xsl:if>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
4 Creamos el archivo de estilos para una presentacin bonita (cdcatalog.css)

h1
{
text-align:left;
font-size:25px;
}
table
{
}
th
{
text-align:center;
font-family :verdana;
font-size :15px;
background :#dfd;
}
td
{
text-align :left;
font-family :arial;
font-size :12px;
background :#ddd;
padding-left:10px;
}
.resaltado
{
font-size:1.8em;
color:red;
}
.rojo
{
color:red;
}
5 El resultado visualizado con firefox al abrir cdcatalog.xml es:
Ejemplo 3 de XML:
1 Creamos el archivo XML (biblioteca.xml)
<?xml-stylesheet type="text/xsl" href="biblioteca.xsl"?>
<biblioteca xmlns:xs="http://www.w3.org/2001/XMLSchema-instance"
xs:noNamespaceSchemaLocation="biblioteca.xsd">
<libro>
<titulo>El mesias</titulo>
<autor>Dan Brown</autor>
<editorial>Paraninfo</editorial>
<isbn>24567266</isbn>
<precio tapa="Tapa blanda">10.50</precio>
<precio tapa="Tapa dura">17.50</precio>
<edicion>1985</edicion>
</libro>
<libro>
<titulo>Desaire</titulo>
<autor>Ricardo Montalban</autor>
<editorial>Blume</editorial>
<isbn>34562398</isbn>
</libro>
<libro>
<titulo>Asesinos</titulo>
<autor>Richard Stamp</autor>
<editorial>Sesgo</editorial>
<isbn>32565388</isbn>
</libro>
<libro>
<titulo>Contact</titulo>
<autor>Carl Sagan</autor>
<editorial>Editors</editorial>
<isbn>52564328</isbn>
</libro>
<libro>
<titulo>Alien</titulo>
<autor>Sergi Tomas</autor>
<editorial>Editors</editorial>
<isbn>22264728</isbn>
</libro>
</biblioteca>
Nota: El listado de libros es corto, pero como prueba para hacer el xml es suficiente.
2 Creamos un archivo para Definir la estructura y restricciones del XML (biblioteca .xsd)
<xsd:element name="biblioteca">
<xsd:complexType>
<xsd:sequence>
<xsd:element maxOccurs="unbounded" name="libro">
<xsd:complexType>
<xsd:sequence>
<xsd:element name="titulo" type="xsd:string" />
<xsd:element name="autor" type="xsd:string" />
<xsd:element name="editorial" type="xsd:string" />
<xsd:element name="isbn" type="xsd:integer" />
<xsd:element minOccurs="1" maxOccurs="2" name="precio">
<xsd:complexType>
<xsd:simpleContent>
<xsd:extension base="xsd:decimal">
<xsd:attribute name="tapa">
<xsd:simpleType>
<xsd:enumeration value="Tapa blanda" />
<xsd:enumeration value="Tapa dura" />
</xsd:restriction>
</xsd:simpleType>
</xsd:attribute>
</xsd:extension>
</xsd:complexType>
</xsd:element>
<xsd:element name="edicion" type="xsd:integer" />
</xsd:sequence>
</xsd:complexType>
</xsd:element>
</xsd:sequence>
</xsd:complexType>
</xsd:element>
</xsd:schema>
3 Creamos un archivo para mostrar el XML como si fuese una pagina web (biblioteca .xsl)
<html>
<head>
<title>Biblioteca</title>
<link rel="StyleSheet" href="biblioteca.css" type="text/css"/>
</head>
<body>
<h1>Listado de Libros</h1>
<table border="1">
<tr>
<th>Titulo</th><th>Autor</th><th>Editoria</th><th>ISBN</th><th>Precio</th><th>Edicion</th>
</tr>
<xsl:for-each select="biblioteca/libro">

<xsl:sort select="precio"/>


<tr>
<td class="resaltado"><xsl:value-of select="titulo"/></td>
<td><xsl:value-of select="autor"/></td>
<td><xsl:value-of select="editorial"/></td>
<td><xsl:value-of select="isbn"/></td>
<td>
<ul>
<xsl:for-each select="precio">

<li>
<span class="papel"><xsl:value-of select="@tapa"/><xsl:text> : </xsl:text></span><xsl:value-of
select="."/>


</li>
</xsl:for-each>
</ul>
</td>
<td><xsl:value-of select="edicion"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
4 Creamos el archivo de estilos para una presentacin bonita (biblioteca .css)

h1
{
text-align:left;
font-size:25px;
}
table
{
}
th
{
text-align:center;
font-family :verdana;
font-size :15px;
background :#dfd;
}
td
{
text-align :left;
font-family :arial;
font-size :13px;
background :#ddd;
padding-left:10px;
padding-right:15px;
}
.resaltado
{
font-size:1.2em;
color:red;
}
.rojo
{
color:red;
}
5 El resultado visualizado con firefox al abrir biblioteca.xml es:
Pasar de XML a HTML mediante JavaScript

El Objeto XMLHttpRequest
El objeto XMLHttpRequest se utiliza para intercambiar datos con un servidor
El objeto XMLHttpRequest es el sueo de un desarrollador , porque puedes:
Actualizar una pgina Web sin tener que recargar la pgina

Solicitar datos desde un servidor despus de que la pgina se ha cargado
Recibir datos de un servidor despus de que la pgina se ha cargado
Enviar datos a un servidor en segundo plano
Crear un objeto XMLHttpRequest

Todos los navegadores modernos (Internet Explorer 7 +, Firefox, Chrome, Safari y Opera)
tienen un objeto XMLHttpRequest incorporado.
Sintaxis para crear un objeto XMLHttpRequest:
xmlhttp=new XMLHttpRequest();
Las versiones antiguas de Internet Explorer (IE5 y IE6) utilizan un objeto ActiveX:
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
Analizar un documento XML

El siguiente fragmento de cdigo analiza un documento XML en un objeto XML DOM:
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
}
else
{// code for IE6, IE5
}
xmlhttp.open("GET","note.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
mtodo para preparar una conexin http a travs del objeto XMLHttpRequest e inicializacin
de los atributos del objeto
GET permite al navegador guardar datos en cach
note.xml es la URL del fichero de datos xml
false es transmisin sncrona
xmlhttp.send()
enviamos los datos
xmlDoc=xmlhttp.responseXML
.responseXML con este atributo se devuelve una referencia al cuerpo del documento
descargado del servidor en la peticin XMLHttpRequest
El XML DOM
El DOM XML define una manera estndar para acceder y manipular documentos XML.
El XML DOM considera que un documento XML como una estructura de rbol.
Todos los elementos se puede acceder a travs del rbol DOM. Su contenido (texto y los
atributos) puede ser modificado o eliminado, y los nuevos elementos se pueden crear. Los
elementos, su texto y sus atributos son conocidos como nodos.
Cargar un archivo XML - Ejemplo

El siguiente ejemplo se analiza un documento XML (" note.xml ") en un objeto XML DOM y
se utiliza para extraer informacin mediante JavaScript:
Documento XML:

<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
Documento HTML con JavaScript:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>De XML a HTML con JavaScript</title>
</head>
<body>
<h1>W3Schools Internal Note</h1>
<div>
<b>To:</b> <span id="to"></span><br>
<b>From:</b> <span id="from"></span><br>
<b>Message:</b> <span id="message"></span>
</div>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
}
else
{// code for IE6, IE5
}
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.getElementById("to").innerHTML=
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML=
xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML=
xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
Nota Importante!
getElementsByTagName("to")[0].childNodes[0].nodeValue
Para extraer el texto "Tove" desde el elemento <to> en el archivo XML de arriba ("note.xml").
Tenga en cuenta que incluso si el archivo XML contiene slo un elemento <to> tienes que
especificar el ndice de la matriz [0]. Esto es porque getElementsByTagName () devuelve
siempre un array.
Nota Ms Importante!
If you just double-click on an HTML file to open it in IE, IE is running in a higher security
mode and won't allow things like ajax request. You need to upload your files to a web server
and access the file over HTTP.
Use a web server to upload the files to and test with. If this is going to be on a web server
anyway, then you should be developing it on a web server. Otherwise, you can change IE's
security settings.
RESUMEN JavaScript
>Declaracin de JavaScript:
"Aqu iran todas las sentencias de javascript"
</script>
>Declarar variables que se van a usar:
var nombre;
var edad;
>Escribir un texto:
document.write("<br> Aqu el texto que se quiera que aparezca en pantalla");
con <br> hacemos saltos de linea
>Escribir un texto en ventana emergente:
alert("\n Aqui el texto que se quiere que aparezca");
con \n hacemos saltos de linea, (en alert no funciona <br>)
>Para poner comentarios seria:
// As para comentarios de una linea
/* As para comentarios de mas de una linea */
>Para asignar valores a las variables declaradas, seria:
var nombre;
las segundas comillas es por si se quiere que aparezca en la ventana emergente un nombre
metido por defecto o como ejemplo, que se puede cambiar al meter el que se pide.
nombre=prompt("Introduce tu nombre","Pepe");
>Operadores:
cuando se trabaja con nmeros en las peticiones de datos se usa parseInt:
numero=parseInt(prompt("Introduce un numero",""));
Operador
Incremento
Disminucin
Menos unitario
Suma
Resta
Multiplicacin
Division
Resto (modulo)
Smbolo
++
-+
*
/
%
Accin
Incrementa una unidad
Disminucin
Vuelve negativo un nmero
Suma dos numeros
Resta el segundo numero del primero
Multiplica dos nmeros
Divide un numero entre otro
Facilita el resto de la division entre 2 numero
>Estructura simple con if:

if (condicin)
{
sentencia 1;
}
sentencia 2;
Si no se cumple la condicin se salta directamente a la sentencia 2, si se cumple la condicin se
realiza la sentencia 1 y luego se termina con la sentencia 2.
>Las condiciones pueden ser:
>
mayor que
<
menor que
==
igual
>=
mayor o igual
<=
menor o igual
!=
distinto
>Estructura compuesta con if y else:
if (condicin)
{
sentencia A;
}
else
{
sentencia B;
}
sentenciaC;
Si no se cumple la condicin se salta a la sentencia B, si se cumple la condicin se realiza la

sentencia A y tras realizar el paso por el SI (sentencia A) o por el NO (sentencia B) se termina con
la sentencia C.
>Estructura repetitiva con while (0 a n veces):
while(condicin)
{
sentencia 1;
}
- Mientras se cumpla la condicin se ejecutara la
sentencia 1, hay que poner un contador de veces:
while(cont<=5)
{
document.write(cont+" - ");
cont=cont+1;
}
>Estructura repetitiva con do y while (1 a n veces):

do
{
sentencia 1;
}
while(condicin)
Hacer la sentencia 1 mientras se cumpla la condicin
impuesta por while
>Estructura repetitiva con for (n veces, pero el valor de n se sabe de antemano):

for (inicializacion ; condicin ; actualizacin)
{
Sentencias;
}
for (i=0 ; i<n ; i++)
{
sentencia 1;
}
Hacer la sentencia 1 mientras se cumpla la
condicin impuesta por for, en este caso desde 0
hasta n veces y por cada paso se incrementa i
hasta llegar al valor de n.
>Los Arrays (Se usan acompaados de for):
Sirve para de una tacada, declarar un montn de variables, que ademas se llaman igual.
num_ale
num_lanz
cont
0
36
var cont=new Array(37);

var i;
for(i=0;i<37;i++)
{
cont[i]=0;
}
>Funciones y Mtodos:
Una funcin es un elemento del programa creado con la finalidad de realizar una determinada
accin. Una funcin puede ser llamada desde otra.
En JavaScript, las funciones se definen en la cabecera del documento HTML. Su sintaxis es:
function nombre_funcin(arg1, arg2, ....., arg9)
{
Funcion
Sentencias;
}
Ejemplo calculo del rea de un circulo:
function areacirculo(radio)
{
var pi;
var area;
pi= Math.PI;
area=pi*radio*radio;
return area;
}
Sentencias
Return
Y la llamada se hace en otro script as:

var radio, area;
radio=parseInt(prompt("teclea valor",""));
area=areacirculo(radio);
document.write("el area del circulo es: "+area);
Ejemplo calculo volumen de un acuario:
<html>
<head>
<title>pruebas</title>
function volumen(a,b,c)
{
var vol;
vol=(a*b*c)/1000;
return(vol);
}
</script>
</head>
<body>
<p>Pruebas de javascript</p>
var largo, fondo, alto;
document.write("<br>Calculo del volumen de un acuario");
do
{
ancho=prompt("Introduce el ancho del acuario en cm, si hay decimales separas con .","");
fondo=prompt("Introduce el fondo del acuario en cm, si hay decimales separas con .","");
alto=prompt("Introduce el alto del acuario en cm, si hay decimales separas con .","");
resultado=volumen(ancho,fondo,alto);
document.write("<br>Para un acuario de dimensiones "+ancho+"x"+fondo+"x"+alto+"cm");
document.write("<br>Sale un Volumen de: "+resultado+" litros");
respuesta=prompt("Quieres repetir s/n?","");
}
while(respuesta=="s"||respuesta=="S");
</script>
</body>
</head>
>Creacin Eventos:
Hacer click en un recuadro o pasar con el ratn por una zona de la pantalla se llama evento, en JavaScript
para hacer referencia al contenido de una caja (creada con html) se utiliza:
radio=document.getElementById("caja1").value;
"caja1" es el nombre puesto en id
Para enviar un texto, dato o resultado obtenido en JavaScript a una caja de html se utiliza:
document.getElementById("caja1").value=r;
r es el dato que aparecer en la caja1
document.getElementById("caja1").value=""; si = ""; borra el contenido de la caja1
Para poner en foco (que el cursor este en) una caja de html se utiliza:
document.getElementById("caja1").focus();
pone el cursor en input con id="caja1"
La caja creada con html que contendra el dato o donde se vera, seria:
<input type="text" name="caja1" id="caja1" size="3" maxlength="3">
La caja creada con html tipo password, que contendra el dato o donde se vera, seria:
<input type="password" name="pass1" id="pass1" size="3" maxlength="3">
Para llamar a una funcin desde un recuadro de pulsar en html seria:
<input type="button" value="area Circulo" onClick="areacirculo()">
Para llamar a una funcin al abandonar una caja:
<input type="password" name="pass1" id="pass1" maxlength="5" size="5" onBlur="Verificar()">
Boton para borrar contenido de las cajas en html seria:
<input type="reset" value="borra">
Declarar un Formulario:
<form name="f1" id="f1" action=""> </form>
Botn enviar formulario:
<input Type="submit" value="enviar">
Enviar formulario a direccin de correo:
<form name="f1" id="f1" action="mailto:pepe@gmail.com">
No enviar un formulario hasta revisarlo con "onSubmit", la funcin devolver false o true:
<form name="f1" id="f1" action="mailto:pepe@gmail.com" onSubmit="return verifica()">
La funcin devolver true si la verificacin es correcta y el formulario se enviara.
La funcin devolver false si la verificacin no es correcta y entonces no se envi el formulario.
seria return(sw); donde sw=false; o sw=true;
Poner en foco una caja del formulario al iniciar la pagina se hace aadiendo a <body> "onLoad"
<body onLoad="document.getElementById('caja').focus()">
Para determinar si una caja contiene un determinado n de caracteres se utiliza length con un if
if(document.getElementById("caja1").value.length<5)
Para determinar si una caja no se ha rellenado, se utiliza =="" con un if
if(document.getElementById("caja1").value=="")
Definicin cadena y llamada a una posicin:
var cadena="ABCDEFGHYJKLMO";
se cuenta de de izquierda a derecha y de 0 a 15
var letra=cadena.charAt(posicion); asi cadena.charAt(5)=F;
Array con datos de hora, fecha, da etc. del ordenador:
var fObj=new Date();
var horas=fObj.getHours(); Extrae la hora var minutos=fObj.getMinutes(); Extrae los minutos
var segundos=fObj.getSeconds(); Extrae los segundos

Lenguaje de Marcas - Apuntes Ver2 7 PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Lenguaje de Marcas - Apuntes Ver2 7 PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

LENGUAJE

<!--cuando queremos que en la seleccion desplegable se diferencien grupos, usamos la etiqueta

<!--cuando queremos que en la seleccion desplegable, podamos seleccionar mas de una

<option value="11"> Helado </option>

<!--Para validar la pagina, vamos a http://validator.w3.org/#validate_by_upload+with_options

<a href="LM 13 Html_Hipervinculo pagina2.html"> aqu&iacute;</a>

Si queremos que aparezca un bocadillo informativo:

Hipervinculo a una posicin/apartado de la propia pagina

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Utilizando <ol> </ol> (ordered list)

Utilizando <ul> </ul> (unordered list)

Se vera as en los dos casos:

Tablas con encabezado:

Ejercicio Horarios de clase.

//poniendo parseInt en las operaciones soluciono el problema de que no sume

Estructura simple con IF

> mayor que

< menor que

>= mayor o igual que

Estructura Compuesta con IF y ELSE

< menor que

>= mayor o igual que

Ejemplo 1 (Estructura Compuesta con IF y ELSE)

Ejemplo 2 (Estructura Compuesta con IF y ELSE)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Ejemplo 3 (Estructura Compuesta con IF y ELSE)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Funcin % , El resto de dividir 2 numeros

Sentencia Repetitiva con while (0 a n veces)

Sentencia Repetitiva con while y n de veces definido por el usuario

Ejemplo 1 (Sentencia Repetitiva con while)

Ejemplo 2 (Sentencia Repetitiva con while)

Ejemplo 3 (Sentencia Repetitiva con while)

Estructura Repetitiva con do y while (1 a n veces)

Ejemplo 1 (Estructura repetitiva do-While)

Ejercicio 1 (Estructura Repetitiva con while)

Sentencia Math.random() , crea un numero aleatorio entre 0.000.....

Sentencia Math.random()*100+1 , crea un numero aleatorio entre 1.00.......

Ejercicio 2 (Estructura Repetitiva con while)

Teclea un numero entre +

Has acertado con+

Sentencia para generar numero aleatorio entre 1 y 100: num_ale=Math.floor(Math.random()*100+1);

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Ejercicio 3 (Estructura Repetitiva con do y while)

Teclea un numero entre +

Sentencia para generar numero aleatorio entre 1 y 100: num_ale=Math.floor(Math.random()*100+1);

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Ejercicio 4 (Estructura Repetitiva con do y while doble)

Has acertado con+

Teclea un numero entre +

Sentencia para generar numero aleatorio entre 1 y 100: num_ale=Math.floor(Math.random()*100+1);

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Ejercicio 5 (Estructura Repetitiva con do y while doble)

No seas zoquete he dicho

Has acertado con+

Otra partida S/N?

Teclea un numero entre +

Sentencia para generar numero aleatorio entre 1 y 100: num_ale=Math.floor(Math.random()*100+1);

Estructura Repetitiva con for (n veces, pero el valor de n se sabe de antemano)

for (i=0 ; i<n ; i++) entre ( ) la condicin

Ejemplo 1 (Estructura repetitiva con for)

Y as se hara con la sentencia for:

<a href="LM 13 Html_Hipervinculo pagina2.html"> aquí</a>