HTML
<!Doctype html><html lang="es">
<head>
<TITLE>index</TITLE>
<LINK REL="stylesheet" HREF="index.css" TYPE="text/css">
<meta charset"utf-8" />
<script type="text/javascript" src="index.js"></script>
<script>
function Ventana()// creamos una función con un nombre y le indicamos qué hacer
{
window.open("http://www.google.com","","width=550,height=420")//Para abrir una ventana con el google
}
function Saludo()
{
window.alert("Hola")//sale un mensaje
}
function Fecha()
{
window.alert (new Date())//vemos la fecha
}
</script>
<SCRIPT>
código javascript
</SCRIPT>
<NOSCRIPT>
Este navegador no comprende los scripts que se están ejecutando, debes actualizar tu versión de
navegador a una más reciente.
<br><br>
<a href=http://netscape.com>Netscape</a>.<br>
<a href=http://microsoft.com>Microsoft</a>.
</NOSCRIPT>
</head>
<body>
<a name="arriba"></a>
<div id="menu" >
<h1 class="nombre">Melani</h1>
<div id="contenedor">
<div id="menu1">
<ul>
<a href="#uno" title="Ir Arriba"><li>Ejercicio uno</li></a>
<p></p>
<a href="#dos" title="Ir Arriba"><li>Ejercicio dos</li></a>
<p></p>
<a href="#tres" title="Ir Arriba"><li>Ejercicio tres</li></a>
<p></p>
<a href="#cuatro" title="Ir Arriba"><li>Ejercicio cuatro</li></a>
</ul>
</div>
<div id="menu2">
<ul>
<a href="#nueve" title="Ir Arriba"><li>Ejercicio nueve</li></a>
<p></p>
<a href="#diez" title="Ir Arriba"><li>Ejercicio diez</li></a>
<p></p>
<a href="#once" title="Ir Arriba"><li>Ejercicio once</li></a>
<p></p>
<a href="#doce" title="Ir Arriba"><li>Ejercicio doce</li></a>
</ul>
</div>
<div id="menu1">
<ul>
<a href="#cinco" title="Ir Arriba"><li>Ejercicio cinco</li></a>
<p></p>
<a href="#seis" title="Ir Arriba"><li>Ejercicio seis</li></a>
<p></p>
<a href="#siete" title="Ir Arriba"><li>Ejercicio siete</li></a>
<p></p>
<a href="#ocho" title="Ir Arriba"><li>Ejercicio ocho</li></a>
</ul>
</div>
<div id="menu2">
<ul>
<a href="#trece" title="Ir Arriba"><li>Ejercicio trece</li></a>
<p></p>
<a href="#catorce" title="Ir Arriba"><li>Ejercicio catorce</li></a>
<p></p>
<a href="#quince" title="Ir Arriba"><li>Ejercicio quince</li></a>
<p></p>
<a href="#dieciseis" title="Ir Arriba"><li>Ejercicio dieciseis</li></a>
</ul>
</div>
</div>
<a name="uno"><h1>Ejercicio uno</h1></a><!-- Se ejecutan directamente//-->
<div id="menu1">
<script>
function ejer1()
{
window.open("http://www.google.com","","width=550,height=420")
window.alert("Bienvenido")
}
</script>
<script> document.write(new Date()) </script>
<input type=button value=Atrás onclick="history.go(-1)">
<input type=button value="Ejecutar ejer1" onclick="ejer1()"><!-- Se ejecuta el ejercicio uno//-->
</div>
<div id="menu2">
<p><b>Colocamos éstas líneas de código entre etiquetas "script", exceptuando la línea que tiene "input", eso sí, añadimos el corchete que le falta</b></p>
<p>window.open("http://www.google.com","","width=550,height=420,menubar=no")</p>
<p>window.alert("Bienvenido")</p>
<p>document.write (new Date()) </p>
<p>input type=button value=Atrás onclick="history.go(-1)"></p>
</div>
<a name="dos"><h1>Ejercicio dos</h1></a><!-- Hay que pulsar botones//-->
<div id="menu1">
<p></p>
<input type=button value="Abrir nueva ventana" onclick="Ventana()">
<input type=button value="¿Quieres que te salude?" onclick="Saludo()">
<p></p>
<input type=button value="Ver la fecha" onclick="Fecha()">
</div>
<div id="menu2">
<p><b>Botón para abrir una ventana(creando función en head)</b></p>
<p>input type=button value="Abrir nueva ventana" onclick="Ventana()"> </p>
<p><b>Botón para ver un saludo (creando función en head)</b></p>
<p>input type=button value="¿Quieres que te salude?" onclick="Saludo()"> </p>
<p><b> Botón para ver fecha (creando función en head)</b></p>
<p>input type=button value="Ver la fecha" onclick="Fecha()"> </p>
</div>
<a name="tres"><h1>Ejercicio tres</h1></a> <!-- En archivo externo//-->
<div id="menu1">
<p></p>
<input type=button value="Ventana de google" onclick="abrir()">
<p></p>
<input type=button value="Click para ver tu mensaje" onclick="mensaje()">
<p></p>
<input type=button value="Fecha" onclick="dia()">
</div>
<div id="menu2">
<p><b> Escribiendo esto en el head con las etiquetas de script, hemos indicado que se ejecute un archivo externo de javascript</b></p>
<p>script language=javascript src="index.js">
/script></p>
</div>
<a name="cuatro"><h1>Ejercicio cuatro</h1></a><!-- Ventana al gusto, abrimos una ventana y damos la opción al usuario de abrir la dirección que desee//-->
<div id="menu1">
<input type=button value="Ventana al gusto" onclick="venta()">
</div>
<div id="menu2">
<p><b>Escribimos esto en es js para que funcione el botón y el usuario escriba qué página quiere visitar</b></p>
<p>function venta()
{
var URL///*creamos la variable*/
URL=prompt ('Ingrese dirección a abrir en una nueva ventana:','http:\\\\');
window.alert(URL)
window.open(URL,"","width=550,height=420")
}</p>
</div>
<a name="cinco"><h1>Ejercicio cinco</h1></a><!-- alerta mensajes//-->
<div id="menu1">
<INPUT TYPE="button" VALUE="Botón pregunta" onClick="alerta()"><!-- Se abre una ventana que pide un texto y luego lo muestra//-->
<INPUT TYPE="button" VALUE="Botón 1" onClick="alerta1('Has pulsado el botón nº 1')"><!-- los tres botones muestran cada uno su texto//-->
<INPUT TYPE="button" VALUE="Botón 2" onClick="alerta1('Has pulsado el botón nº 2')">
<INPUT TYPE="button" VALUE="Botón 3" onClick="alerta1('Has pulsado el botón nº 3')">
</div>
<div id="menu2">
<p><b>Escribimos los botones en html y este código en js</b></p>
<p>function alerta() {
var mensaje
mensaje=prompt('Escribe mensaje para la alerta','')
window.alert(mensaje);
}
function alerta1(mensaje){
window.alert(mensaje);
}</p>
</div>
<a name="seis"><h1>Ejercicio seis</h1></a>
<div id="menu1">
<INPUT TYPE="button" VALUE="Suma" onClick="suma()">
</div>
<div id="menu2">
<p><b> Botón que llama a esta función</b></p>
<p>function suma()
{
var suma1,suma2,rsuma
suma1=prompt('Introduzca el primer número:','')
suma2=prompt('Introduzca el segundo número:','')
num1= parseInt(suma1)
num2= parseInt(suma2)
rsuma = num1 + num2
window.alert('El resultado es:'+rsuma)
}</p>
</div>
<a name="siete"><h1>Ejercicio siete</h1></a>
<div id="menu1">
<input type="button" value="Te digo la edad" onClick="edad()">
</div>
<div id="menu2">
<p><b>Botón que al hacer click va a esta función</b></p>
<p>function edad()
{
var edadnu,actual = 2014
año= prompt('Introducir año de nacimiento:','')
var anonum= parseInt(año)
edadnu = actual - anonum
window.alert ('Tu edad es:' +edadnu)
}</p>
</div>
<a name="ocho"><h1>Ejercicio ocho</h1></a><!-- variable local y global//-->
<div id="menu1">
<input type="button" value="Meter 15 en funcion externa"onClick="glo()">
<script>
var estrella= 5 //global
function lo(){
window.alert(' el número estrella ahora es es ' +estrella)
}
</script>
<input type="button" value="Mostrar numeroestrella " onClick="lo()"> <!--local//-->
<input type="button" value="numeroestrella = 8" onClick="estrella = 8">
</div>
<div id="menu2">
<p><b>local en html</b></p>
input type="button" value="Meter 15 en funcion externa"onClick="glo()">
script>
var estrella= 5
function lo(){
window.alert(' el número estrella ahora es es ' +estrella)
}
/script>
input type="button" value="Mostrar numeroestrella " onClick="lo()">
input type="button" value="numeroestrella = 8" onClick="estrella = 8">
<br><b>global en js</b>
<p>function glo()
{
estrella = 15
window.alert(' el número estrella en este momento es ' +estrella)
}</p>
</div>
<a name="nueve"><h1>Ejercicio nueve</h1></a>
<div id="menu1">
<input type="button" value="Formulario" onClick=" formulario()">
</div>
<div id="menu2">
<p><b>Con un botón llamamos a este formulario en js</b></p>
<p>function formulario(){
nombre=prompt ('Escribe tu nombre: ','')
apellidos=prompt ('Escribe tus apellidos: ','')
direccion=prompt ('Escribe tu dirección: ', '')
edad=prompt ('Escribe tu edad: ', '')
sexo=prompt('Escribe tu Sexo :','')
fecha_de_nacimiento=prompt('Escribe tu de nacimiento :','')
trabajando=confirm('¿Está trabajando? :','')
edadnum=parseInt(edad)
window.alert(nombre+' '+apellidos+'. '+sexo+'. Que vive en '+direccion+' con fecha de nacimiento '+fecha_de_nacimiento+' y '+edadnum+' años de edad. '+trabajando+' trabajando.')
}</p>
</div>
<a name="diez"><h1>Ejercicio diez</h1></a><!-- pequeños códigos que provocan distintos resultados en los mensajes de alerta (saltos de línea, tabulaciones etc)-->
<div id="menu1">
<input type="button" value="\n" onClick="window.alert('Toma intro \n salto de linea')">
<input type="button" value="\r" onClick="window.alert('retorno \r de carro')">
<input type="button" value="\t" onClick="window.alert(' vamos a colocarlo todo tabulado \t tabulación horizontal')">
<input type="button" value="\v" onClick="window.alert('tabulación \v vertical')">
<input type="button" value="\'" onClick="window.alert('comilla simple')">
<input type="button" value="comillas dobles" onClick="window.alert('comilla doble')">
<input type="button" value="\\" onClick="window.alert('Doble barra')">
<input type="button" value="\xdd: caracter" onClick="window.alert('Carácter especial especificado mediante dos dígitos hexadecimales dd, nos permite, entre otras cosas, insertar letras acentuadas o la letra ñ.')">
</div>
<div id="menu2">
input type="button" value="\n" onClick="window.alert('Toma intro \n salto de linea')">
input type="button" value="\r" onClick="window.alert('retorno \r de carro')">
input type="button" value="\t" onClick="window.alert(' vamos a colocarlo todo tabulado \t tabulación horizontal')">
input type="button" value="\v" onClick="window.alert('tabulación \v vertical')">
input type="button" value="\'" onClick="window.alert('comilla simple')">
input type="button" value="comillas dobles" onClick="window.alert('comilla doble')">
input type="button" value="\\" onClick="window.alert('Doble barra')">
input type="button" value="\xdd: caracter" onClick="window.alert('Carácter especial especificado mediante dos dígitos hexadecimales dd, nos permite, entre otras cosas, insertar letras acentuadas o la letra ñ.')">
</div>
<a name="once"><h1>Ejercicio once</h1></a>
<div id="menu1">
<input type="button" value="Te saludo, terrícola" onClick="ejemplo()">
<input type="button" value="Aquí te digo el tiempo" onClick="ejem()">
<input type="button" value="Pronóstico futuro" onClick="eje()">
</div>
<div id="menu2">
<form>
<textarea rows="13" cols="68" wrap="soft">function mensajeven(etiqueta1, mensa1)
{
ven=window.open("","mensaje","height=260,width=400");
ven.document.write("title>Ventana/title>body>table border=0>tr>td width='90%' height='90%' valign=top align=left>font size=4>");
ven.document.write("font color='ff0000'>b>"+etiqueta1+"/b>/font>p>"+mensa1);
ven.document.write("/td>td width='10%'>/td>/tr>tr>td>/td>td valign=top align=right>form>input type='button' value='Aceptar' onClick='self.close()'>/form>/td>/tr>/table>/body>");
ven.document.close();
}
function ejemplo(){
mensajeven("Que linda mañana","hola")
}
function ejem(){
mensajeven("Parece que va a llover","prepara el paraguas")
}
function eje(){
mensajeven("Pero luego saldrá el sol","sonrie")
}</textarea>
</form>
</div>
<a name="doce"><h1>Ejercicio doce</h1></a>
<div id="menu1">
<input type="button" value="Vamos a operar" onClick="operaciones()">
</div>
<div id="menu2">
<p><b>botón que llama a este código para sumar, restar, multiplicar y dividir dos números</b></p>
<p>
function operaciones(){
var nu1, nu2, rsuma, rresta, rmultiplicacion, rdivision
nu1=prompt('Introduce el primer número',"")
nu2=prompt('Introduce el segundo número',"")
var nu1=parseFloat(nu1)
var nu2=parseFloat(nu2)
rsuma= nu1 + nu2
rresta= nu1 - nu2
rmultiplicacion= nu1 * nu2
rdivision= nu1 / nu2
window.alert('El resultado de la suma es: '+rsuma+'\nEl resultado de la resta es: '+rresta+' \nEl resultado de la multiplicación es: '+rmultiplicacion+' \nEl resultado de la división es: '+rdivision)
}
</p>
</div>
<a name="trece"><h1>Ejercicio trece</h1></a>
<div id="menu1">
<input type="button" value="Vamos a operar con números establecidos" onClick="asignacion()">
</div>
<div id="menu2">
function asignacion()
{
var nume1,nume2
nume1=prompt('Introduce el primer número',"")
nume2=prompt('Introduce el segundo número',"")
var num1=parseFloat(nume1)
var num2=parseFloat(nume2)
suma=50.0
suma+=num2
resta=30
resta-=num1
multi=2.0
multi*=num2
division=100.0
division/=num1
window.alert('Suma mas 50 : '+suma+'\n30 menos '+num1+' es: '+resta+'\n2 multiplicado por '+num2+' es: '+multi+'\n100 entre '+num1+' es: '+division)
}
</div>
<a name="catorce"><h1>Ejercicio catorce</h1></a>
<div id="menu1">
<input type="button" value="Vamos a hacer una cadena" onClick="cadena()">
</div>
<div id="menu2">
<p>function cadena ()
{
var nu1,nu2,texto,resultado
nu1=prompt('Introduce el primer número',"")
nu2=prompt('Introduce el segundo número',"")
resultado=nu1+nu2
nu2+=nu1
window.alert('La cadena del primer número y del segundo número: '+resultado+'\nLa cadena del segundo número y del primero: '+nu2)
}
</p>
</div>
<a name="quince"><h1>Ejercicio quince</h1></a>
<div id="menu1">
<input type="button" value="Operadores lógicos y condicionales" onClick="numero()">
</div>
<div id="menu2">
<p>function numero()
{
nu1=prompt('Introduce un número entre 10 y 100:',"")
numero=parseInt(nu1)
respuesta=(numero>=10 && numero<= 100)
window.alert('El numero esta entre 10 y 100: '+respuesta)
}</p>
</div>
<a name="dieciseis"><h1>Ejercicio dieciseis</h1></a>
<div id="menu1">
<input type="button" value="Operación con y sin paréntesis" onClick="opi()">
</div>
<div id="menu2">
<p>
function opi(){
result=10*4+7;
window.alert('El resultado es:' +result);
result=10*(4+7);
window.alert('El resultado es:' +result);
}</p>
</div>
</div>
<a class="ir" href="#arriba"><img src="gato.gif"/></a>
</body>
</html>
JS
//Ejercicio 3
function abrir()
{
window.open("http://www.google.com","","width=550,height=420")//Para abrir una ventana con el google
}
function mensaje()//este es el nombre de una función
{
window.alert("Hola")//sale un mensaje
}
function dia()
{
window.alert(new Date()) ///*vemos la fecha*/
}
//Ejercicio 4
function venta()
{
var URL///*creamos la variable*/
URL=prompt ('Ingrese dirección a abrir en una nueva ventana:','http:\\\\');
window.alert(URL)
window.open(URL,"","width=550,height=420")
}
//ejercicio 5
function alerta() {
var mensaje
mensaje=prompt('Escribe mensaje para la alerta','')//definimos mensaje
window.alert(mensaje);//llamamos a mensaje y lo mostramos como alerta de javascript
}
function alerta1(mensaje){
window.alert(mensaje);
}
//Ejercicio 6
function suma()
{
var suma1,suma2,rsuma
suma1=prompt('Introduzca el primer número:','')
suma2=prompt('Introduzca el segundo número:','')
num1= parseInt(suma1)//números entteros
num2= parseInt(suma2)//números enteros
rsuma = num1 + num2//operamos
window.alert('El resultado es:'+rsuma)//el signo mas hay que ponerlo para que aparezca la variable
}
// Ejercicio 7
function edad()
{
var edadnu,actual = 2014//le damos un valor a actual
año= prompt('Introducir año de nacimiento:','')
var anonum= parseInt(año)
edadnu = actual - anonum
window.alert ('Tu edad es:' +edadnu)
}
//Ejercicio 8
function glo() //local en archivo externo
{
estrella = 15
window.alert(' el número estrella en este momento es ' +estrella)
}
//ejercicio 9
function formulario(){
nombre=prompt ('Escribe tu nombre: ','')
apellidos=prompt ('Escribe tus apellidos: ','')
direccion=prompt ('Escribe tu dirección: ', '')
edad=prompt ('Escribe tu edad: ', '')
sexo=prompt('Escribe tu Sexo :','')
fecha_de_nacimiento=prompt('Escribe tu fecha de nacimiento :','')
trabajando=confirm('¿Está trabajando? :','')
edadnum=parseInt(edad)
window.alert(nombre+' '+apellidos+'. '+sexo+'. Que vive en '+direccion+' con fecha de nacimiento '+fecha_de_nacimiento+' y '+edadnum+' años de edad. '+trabajando+' trabajando.')
//el signo mas despues es necesario para que aparezca lo siguiente, como si fuese una cadena de texto
}
//Ejercicio 11
function mensajeven(etiqueta1, mensa1)//creamos ventanas independientes con su html determinado para especificar su estructura. Si quisieramos hacer algo más elaborado, es preferible un enlace a un html
{
ven=window.open("","mensaje","height=260,width=400");
ven.document.write("<title>Ventana</title><body><table border=0><tr><td width='90%' height='90%' valign=top align=left><font size=4>");
ven.document.write("<font color='ff0000'><b>"+etiqueta1+"</b></font><p>"+mensa1);
ven.document.write("</td><td width='10%'></td></tr><tr><td></td><td valign=top align=right><form><input type='button' value='Aceptar' onClick='self.close()'></form></td></tr></table></body>");
ven.document.close();
}
function ejemplo(){
mensajeven("Que linda mañana","hola")
}
function ejem(){
mensajeven("Parece que va a llover","prepara el paraguas")
}
function eje(){
mensajeven("Pero luego saldrá el sol","sonrie")
}
//Ejercicio 12
function operaciones(){
var nu1, nu2, rsuma, rresta, rmultiplicacion, rdivision//distintas operaciones con los números que el usuario escribe
nu1=prompt('Introduce el primer número',"")
nu2=prompt('Introduce el segundo número',"")
var nu1=parseFloat(nu1)//son decimales, no enteros
var nu2=parseFloat(nu2)//son decimales
rsuma= nu1 + nu2
rresta= nu1 - nu2
rmultiplicacion= nu1 * nu2
rdivision= nu1 / nu2
window.alert('El resultado de la suma es: '+rsuma+'\nEl resultado de la resta es: '+rresta+' \nEl resultado de la multiplicación es: '+rmultiplicacion+' \nEl resultado de la división es: '+rdivision)
}
//Ejercicio 13
function asignacion()//Esta vez los números introducidos se operan con otros ya establecidos
{
var nume1,nume2
nume1=prompt('Introduce el primer número',"")
nume2=prompt('Introduce el segundo número',"")
var num1=parseFloat(nume1)
var num2=parseFloat(nume2)
suma=50.0
suma+=num2
resta=30
resta-=num1
multi=2.0
multi*=num2
division=100.0
division/=num1
window.alert('Suma mas 50 : '+suma+'\n30 menos '+num1+' es: '+resta+'\n2 multiplicado por '+num2+' es: '+multi+'\n100 entre '+num1+' es: '+division)
}
//Ejercicio 14
function cadena()//aquí hacemos dos cadenas entre los números que el usuario introduce, primeramente el primer número seguido del segundo y, posteriormente, a la inversa
{
var nu1,nu2,texto,resultado
nu1=prompt('Introduce el primer número',"")//con el prompt mostramos algo al usuario, concretamente lo que aparece entre comillas y entre los paréntesis
nu2=prompt('Introduce el segundo número',"")
resultado=nu1+nu2
nu2+=nu1
window.alert('La cadena del primer número y del segundo número: '+resultado+'\nLa cadena del segundo número y del primero: '+nu2)
}
//Ejercicio 15
function numero()
{
nu1=prompt('Introduce un número entre 10 y 100:',"")
numero=parseInt(nu1)
respuesta=(numero>=10 && numero<= 100)// comprueba si el número está comprendido entre 10 y 100, es decir, que no es menor que 10 o mayor que 100, de ser así, le dice true al usuario, o false en el caso contrario
window.alert('El numero esta entre 10 y 100: '+respuesta)
}
//Ejercicio 16
function opi(){//el resultado de las operaciones depende del orden de cuando se opere
result=10*4+7;//primeramente se multiplica 10 por cuatro y se le suma siete porque las multiplicaciones tienen preferencia antes que la suma, a parte, porque es la operación que más a la izquierda está
window.alert('El resultado es:' +result);
result=10*(4+7);//al haber un paréntesis, la operación de éste tiene prioridad, posteriormente a su resultado se le multiplica por diez
window.alert('El resultado es:' +result);
}
CSS
body{ background-image: url( "gatito.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#menu
{ background-color: #CEF6F5;
width: 1310px;
height:5900px;
margin-top: 5%;
margin-right: 10%;
margin-left: 7%;
border-radius: 15px;
opacity: 0.7;
padding: 20px;
}
h1{
text-align: center;
font-family: "Segoe Script";
position: relative;
width:300px;
}
.nombre{
text-align: center;
font-family: "Segoe Script";
position: relative;
top:5px;
font: bold 90%;
}
#menu1{width: 500px;
height: 200px;
border: solid 1px black;
float: left;
margin-left: 25px;
}
#menu2{width: 500px;
height: 200px;
border: solid 1px black;
margin-left: 750px;
}
li{font-size: 26px;
}
h2{position: relative;
width:300px;
}
#menu3{width: 500px;
height: 250px;
border: solid 1px black;
float: left;
margin-left: 25px;
position: relative;
top: 50px;
left: 3px;
}
.dos{ position: relative;
top: 5px;
left: 450px;
}
#menu4{width: 500px;
height: 250px;
border: solid 1px black;
float: left;
margin-left: 250px;
position: relative;
}
#contenedor{ width: 100%;
height: 300px;
position: relative;
}
.ir{position:fixed;
right:0;
top:0;
}
No hay comentarios:
Publicar un comentario