Importante para recién llegados: en este hilo están las normas, sugerencias y políticas para escribir en los foros: https://aprenderaprogramar.com/foros/index.php?topic=1460.0 ¡Léelo antes de escribir!
Mostrar Mensajes
Esta sección te permite ver todos los posts escritos por este usuario. Ten en cuenta que sólo puedes ver los posts escritos en zonas a las que tienes acceso en este momento.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Curso Java</title>
<script type="text/javascript" src="CU01122E(1).js"></script>
<style>
div {
float: left;
border: solid;
width: 20%;
margin: 5%;
font-size: 110%;
color: white;
padding: 5%;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<div style="background-color: black;" onclick="obtenerImporteConImpuestos(100,1);">IVA 21%</div>
<div style="background-color: red;" onclick="obtenerImporteConImpuestos(100,2);">IVA 10%</div>
<div style="background-color: green;"onclick="obtenerImporteConImpuestos(100,3);">IVA 5%</div>
</body>
</html>function obtenerImporteConImpuestos(importeSinImpuestos,a){
var msg;
msg=('El importe sin impuestos es: '+importeSinImpuestos+'\n\n');
if(a==1){
alert(msg+'El importe con impuestos es:'+ivaA(importeSinImpuestos));
}else if(a==2){
alert(msg+'El importe con impuestos es:'+ivaB(importeSinImpuestos));
}else if(a==3){
alert(msg+'El importe con impuestos es:'+ivaC(importeSinImpuestos));
}
}
function ivaA(importeSinImpuestos){
var importeConImpuestos;
importeConImpuestos=importeSinImpuestos*1.21;
return importeConImpuestos;
}
function ivaB(importeSinImpuestos){
var importeConImpuestos;
importeConImpuestos=importeSinImpuestos*1.10;
return importeConImpuestos;
}
function ivaC(importeSinImpuestos){
var importeConImpuestos;
importeConImpuestos=importeSinImpuestos*1.05;
return importeConImpuestos;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Curso Java</title>
<script type="text/javascript" src="CU01122E(2).js"></script>
<style>
div {
float: left;
border: solid;
width: 20%;
margin: 5%;
font-size: 110%;
color: white;
padding: 5%;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<div style="background-color: black;" onclick="alert(obtenerImporteConImpuestos(100));">Ver ejercicio</div>
</body>
</html>function obtenerImporteConImpuestos(importeSinImpuestos){
var resultado;
resultado=[];
resultado[0]=undefined;
resultado[1]=importeSinImpuestos*1.21;
resultado[2]=importeSinImpuestos*1.10;
resultado[3]=importeSinImpuestos*1.05;
return ('Para precio sin impuestos'+importeSinImpuestos+' si el producto es tipo 1 el importe es '+resultado[1]+' , si el producto es tipo 2 el importe es '+resultado[2]/100+' y si el producto es tipo 3 el importe es '+resultado[3]);
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="description" content="Curso JavaScript"/>
<meta name="keywords" content="programar,cursos"/>
<title>Curso JavaScript</title>
<script type="text/javascript" src="CU01121E.js">
</script>
</head>
<body>
<div>
<p>Aquí un párrafo de texto situado antes de la imagen, dentro de un div contenedor.</p>
<img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto"/>
<p onclick="alert('Alerta JavaScript');" style="background-color: #D2691E;">Aquí otro párrafo de texto. JavaScript es un lenguaje utilizado para dotar de efectos dinámicos a la página web.</p>
</div>
</body>
</html>var nombre=[];
a=prompt('Introduce un sustantivo');
b=prompt('Introduce un verbo');
c=prompt('Introduce un adverbio (ej.:rápido, lento)');
nombre[0]=a;
nombre[1]=b;
nombre[2]=c;
alert('Has construido esta frase: El/La '+a+' '+b+' '+c);<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Curso JavaScript</title>
<script type="text/javascript" src="CU01120E.js">
</script>
</head>
<body>
<div>
<p>Aquí un párrafo de texto situado antes de la imagen, dentro de un div contenedor.</p>
<img onclick="dimeTipoMotor();" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto"/>
<p onclick="alert('Alerta JavaScript');" style="background-color: yellow;">Aquí otro párrafo de texto. JavaScript es un lenguaje utilizado para dotar de efectos dinámicos a la página web.</p>
</div>
</body>
</html>function dimeTipoMotor(){
var tipo;
tipo=prompt('Introduce tipo motor \n (valores posibles: 1, 2, 3 y 4)');
if(tipo==""){alert('No has introducido tipo motor');}
tipo=Number(tipo);
switch(tipo){
case 0: alert('No has establecido un valor definido para el tipo de bomba'); break;
case 1: alert('La bomba es una bomba de agua'); break;
case 2: alert('La bomba es una bomba de gasolina'); break;
case 3: alert('La bomba es una bomba de hormigón'); break;
case 4: alert('La bomba es una bomba de pasta alimenticia'); break;
default: alert('No existe un valor válido para tipo de bomba'); break;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Portal web aprenderaprogramar.com</title>
<script type="text/javascript" src="CU01119E.js">
</script>
</head>
<body>
<div>
<p>Aquí un párrafo de texto situado antes de la imagen, dentro de un div contenedor.</p>
<img onclick="mostrarMensaje1();" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto"/>
<p onclick="alert('Alerta JavaScript');" style="background-color: yellow;">Aquí otro párrafo de texto. JavaScript es un lenguaje utilizado para dotar de efectos dinámicos a la página web.</p>
</div>
</body>
</html>function mostrarMensaje1(){
var a, b;
a=prompt('Diámetro de la rueda');
a=Number(a);
if (a>1.4){
alert('La rueda es para un vehículo grande');
} else if(a<=1.4&&a>0.8){
alert('La rueda es para un vehículo mediano');
} else {
alert('La rueda es para un vehículo pequeño.');
}
b=prompt('Grosor de la rueda');
b=Number(b);
alert('El diámetro que haz introducido es este: '+a+'\n y el grosor este: '+b);
if ((a>1.4&&b<0.4)||(a<=1.4&&a>0.8&&b<0.25)){
alert('El grosor para esta rueda es inferior al recomendado');
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Curso JavaScript</title>
<script type="text/javascript">
function mostrarMensaje1(){
var a, b, c;
A=5;
B=3;
C=-12;
alert('a) Valor de verdad para A>3 es: '+(A>3));
alert('b) Valor de verdad para A>C es: '+(A>C));
alert('c) Valor de verdad para A<C es: '+(A<C));
alert('d) Valor de verdad para B<C es: '+(B<C));
alert('e) Valor de verdad para B!=C es: '+(B!=C));
alert('f) Valor de verdad para A==3 es: '+(A==3));
alert('g) Valor de verdad para A*B==15 es: '+(A*B==15));
alert('h) Valor de verdad para A*B==-30 es: '+(A*B==-30));
alert('i) Valor de verdad para C/B<A es: '+(C/B<A));
alert('j) Valor de verdad para C/B==-10 es: '+(C/B==-10));
alert('k) Valor de verdad para C/B==-4 es: '+(C/B==-4));
alert('l) Valor de verdad para A+B+C==5 es: '+(A+B+C==5));
alert('m) Valor de verdad para (A+B==8)&&(A-B==2) es: '+(A+B==8&&A-B==2));
alert('n) Valor de verdad para (A+B==8)||(A-B==6) es: '+(A+B==8||A-B==6));
alert('o) Valor de verdad para A>3&&B>3&&C<3 es: '+(A>3&&B>3&&C<3));
alert('p) Valor de verdad para A>3&&B>=3&&C<-3 es: '+(A>3&&B>=3&&C<-3));
}
</script>
</head>
<body>
<div>
<p>Aquí un párrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img onclick="mostrarMensaje1();" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto"/>
<p onclick="alert('Alerta JavaScript');" >Aquí otro párrafo de texto. JavaScript es un lenguaje utilizado para dotar de efectos dinámicos a las páginas web.</p>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Curso JavaScript</title>
<script type="text/javascript">
function mostrarMensaje1(){
var a, b;
a='arbol';
b='flor';
alert('a) Valor de verdad para a==b es: '+(a==b));//El resultado es false porque a tiene un valor numérico y b otro diferente.
alert('b) Valor de verdad para a===b es: '+(a===b));//El resultado también es false, porque los dos valores numérico de las dos palabras no son exactamente igual.
alert('c) Valor de verdad para a!==a es: '+(a!==a));//El resultado otra vez es false, porque a es igual a a.
}
</script>
</head>
<body>
<div>
<p>Aquí un párrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img onclick="mostrarMensaje1();" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto"/>
<p onclick="alert('Alerta JavaScript');" >Aquí otro párrafo de texto. JavaScript es un lenguaje utilizado para dotar de efectos dinámicos a las páginas web.</p>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Portal web</title>
<script type="text/javascript">
function mostrarMensaje1(){
var num1, num2, result1, result2, result3;
a=Number(prompt("Introduzca un número, por favor:"));
b=Number(prompt("Ahora otro, por favor:"));
result1=a%5;
alert("El resto (módulo) de dividir "+a+" entre 5 es: "+result1);//Muestra el resto (módulo) de dividir el número introducido entre 5.
result2=a/b;
alert("El resultado de dividir "+a+" entre "+b+" es: "+result2);//Muestra el resultado de dividir el primer número introducido por el usuario entre el segundo.
alert('El resultado de sumar los dos números es: '+(a+b));//Suma los dos números introducidos por el usuario. No pude hacerlo con el prompt, tenía que utilizar el valor parseInt.
}
</script>
</head>
<body>
<div onclick="mostrarMensaje1();" style="border: solid; border-radius: 40px; background-color: yellow; width: 100%; position: absolute; top: 10%; left: 0;">
<a href="#" style="text-decoration: none; text-align: center; color: black; font-size: 5em;"><p>Haz click aquí para hacer un cálculo simple</p></a>
</div>
</body>
</html>
<html>
<head>
<title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">
<style type="text/css">
body {text-align: center; font-family: sans-serif;}
div {margin:20px;}
#contenedor {width:405px;margin:auto;}
#adelante, #atras {padding:15px; width: 130px; float: left;
color: white; border-radius: 40px; background: rgb(202, 60, 60);}
#adelante:hover, #atras:hover {background: rgb(66, 184, 221);}
</style>
<script type="text/javascript">
var numeroImagenActual=9;
function moverImagen(movimiento) {
var valorSrc, valorAlt, valorTitle;
valorSrc=[];
valorAlt=[];
valorTitle=[];
valorSrc=['http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_6_humor_informatico_foto.jpg','http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg','http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_11_humor_informatico_foto.jpg'];
valorAlt=['Camiseta 6 aprenderaprogramar.com', 'Camiseta 9 aprenderaprogramar.com', 'Camiseta 11 aprenderaprogramar.com'];
valorTitle=['Desbordado por los números', 'Diálogo entre informáticos', 'Estudiando programacion'];
if(numeroImagenActual==6&&movimiento=='atras'||numeroImagenActual==11&&movimiento=='adelante'){
alert('No es posible hacer ese movimiento');
}
if(numeroImagenActual==11&&movimiento=='atras'||numeroImagenActual==6&&movimiento=='adelante'){
valorNuevoNumeroImagen = 9;
document.getElementById('imgCarrusel').src=valorSrc[1];
document.getElementById('imgCarrusel').alt=valorAlt[1];
document.getElementById('imgCarrusel').title=valorTitle[1];
}
if(numeroImagenActual==9&&movimiento=='atras'){
valorNuevoNumeroImagen=6;
document.getElementById('imgCarrusel').src=valorSrc[0];
document.getElementById('imgCarrusel').alt=valorAlt[0];
document.getElementById('imgCarrusel').title=valorTitle[0];
}
if (numeroImagenActual==9&&movimiento=='adelante'){
valorNuevoNumeroImagen=11;
document.getElementById('imgCarrusel').src=valorSrc[2];
document.getElementById('imgCarrusel').alt=valorAlt[2];
document.getElementById('imgCarrusel').title=valorTitle[2];
}
numeroImagenActual=valorNuevoNumeroImagen;
document.getElementById('numeracion').firstChild.nodeValue='Camiseta '+numeroImagenActual;
}
</script>
</head>
<body>
<div >
<p>Pulsa adelante o atrás</p>
<h1 id="numeracion">Camiseta 9</h1>
<img id="imgCarrusel" src="http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg" alt="Camiseta 9 aprenderaprogramar.com" title="Diálogo entre informáticos">
<div id="contenedor">
<div id ="atras" onclick="moverImagen('atras')"> <<< Atrás </div>
<div id="adelante" onclick="moverImagen('adelante')">Adelante >>></div>
</div>
</div>
</body>
</html><html><head><title>Curso JavaScript</title><meta charset="utf-8"/>
<style type="text/css">
body {
text-align: center;
font-family: sans-serif;
}
div {
margin: 20px;
}
#contenedor {
width: 405px;
margin: auto;
}
#adelante, #atras {
padding: 15px;
width: 130px;
float: left;
color: white;
border-radius: 40px;
background: rgb(202, 60, 60);
}
#adelante:hover, #atras:hover {
background: rgb(66, 184, 221);
}
</style>
<script type="text/javascript">
var numeroImagenActual=9;
function moverImagen(movimiento){
if(numeroImagenActual==6&&movimiento=='atras'||numeroImagenActual==11&&movimiento=='adelante'){
alert('No es posible hacer ese movimiento');
}
if(numeroImagenActual==11&&movimiento=='atras'||numeroImagenActual==6&&movimiento=='adelante'){
valorNuevoNumeroImagen=9;
document.getElementById('imgCarrusel').src='http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg';
document.getElementById('imgCarrusel').alt='Camiseta 9 aprenderaprogramar.com';
document.getElementById('imgCarrusel').title='Diálogo entre informáticos';
}
if(numeroImagenActual==9&&movimiento=='atras'){
valorNuevoNumeroImagen=6;
document.getElementById('imgCarrusel').src='http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_6_humor_informatico_foto.jpg';
document.getElementById('imgCarrusel').alt='Camiseta 6 aprenderaprogramar.com';
document.getElementById('imgCarrusel').title='Desbordado por los números';
}
if(numeroImagenActual==9&&movimiento=='adelante'){
valorNuevoNumeroImagen=11;
document.getElementById('imgCarrusel').src='http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_11_humor_informatico_foto.jpg';
document.getElementById('imgCarrusel').alt='Camiseta 11 aprenderaprogramar.com';
document.getElementById('imgCarrusel').title='Estudiando programacion';
}
numeroImagenActual=valorNuevoNumeroImagen;
document.getElementById('numeracion').firstChild.nodeValue='Camiseta '+numeroImagenActual;
}
</script>
</head>
<body>
<div>
<p>Pulsa adelante o atrás</p>
<h1 id="numeracion">Camiseta 9</h1>
<img id="imgCarrusel" src="http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg" alt="Camiseta 9 aprenderaprogramar.com" title="Diálogo entre informáticos"/>
<div id="contenedor">
<div id="atras" onclick="moverImagen('atras')"><<< Atrás</div>
<div id="adelante" onclick="moverImagen('adelante')">Adelante >>></div>
</div>
<div style="clear: both" ></div>
<div>
<p>Pulsa adelante o atrás</p>
<h1 id="numeracion">Camiseta 9</h1>
<img id="imgCarrusel" src="http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg" alt="Camiseta 9 aprenderaprogramar.com" title="Diálogo entre informáticos"/>
<div id="contenedor">
<div id="atras" onclick="moverImagen('atras')"><<< Atrás</div>
<div id="adelante" onclick="moverImagen('adelante')">Adelante >>></div>
</div>
</div>
</div>
</body>
</html><html><head><title>Curso JavaScript</title><meta charset="utf-8"/>
<style type="text/css">
body {
text-align: center;
font-family: sans-serif;
}
div {
margin: 20px;
}
#contenedor {
width: 405px;
margin: auto;
}
#adelante, #atras {
padding: 15px;
width: 130px;
float: left;
color: white;
border-radius: 40px;
background: rgb(202, 60, 60);
}
#adelante:hover, #atras:hover {
background: rgb(66, 184, 221);
}
</style>
<script type="text/javascript">
var numeroImagenActual=9;
function moverImagen(movimiento){
if(numeroImagenActual==6&&movimiento=='atras'||numeroImagenActual==11&&movimiento=='adelante'){
alert('No es posible hacer ese movimiento');
}
if(numeroImagenActual==11&&movimiento=='atras'||numeroImagenActual==6&&movimiento=='adelante'){
valorNuevoNumeroImagen=9;
document.getElementById('imgCarrusel').src='http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg';
document.getElementById('imgCarrusel').alt='Camiseta 9 aprenderaprogramar.com';
document.getElementById('imgCarrusel').title='Diálogo entre informáticos';
}
if(numeroImagenActual==9&&movimiento=='atras'){
valorNuevoNumeroImagen=6;
document.getElementById('imgCarrusel').src='http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_6_humor_informatico_foto.jpg';
document.getElementById('imgCarrusel').alt='Camiseta 6 aprenderaprogramar.com';
document.getElementById('imgCarrusel').title='Desbordado por los números';
}
if(numeroImagenActual==9&&movimiento=='adelante'){
valorNuevoNumeroImagen=11;
document.getElementById('imgCarrusel').src='http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_11_humor_informatico_foto.jpg';
document.getElementById('imgCarrusel').alt='Camiseta 11 aprenderaprogramar.com';
document.getElementById('imgCarrusel').title='Estudiando programacion';
}
numeroImagenActual=valorNuevoNumeroImagen;
document.getElementById('numeracion').firstChild.nodeValue='Camiseta '+numeroImagenActual;
}
</script>
</head>
<body>
<div>
<p>Pulsa adelante o atrás</p>
<h1 id="numeracion">Camiseta 9</h1>
<img id="imgCarrusel" src="http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg" alt="Camiseta 9 aprenderaprogramar.com" title="Diálogo entre informáticos"/>
<div id="contenedor">
<div id="atras" onclick="moverImagen('atras')"><<< Atrás</div>
<div id="adelante" onclick="moverImagen('adelante')">Adelante >>></div>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Curso JavaScript</title>
<script type="text/javascript">
function mostrarMensaje1(){
var lampara=true;
var chaqueta=false;
alert(lampara+chaqueta); //al tener valores numéricos 1(true) y 0(false), la suma será=1+0=1
alert(lampara.toString()+chaqueta.toString()); //mediante la función .toString requeremos los valores (en letras) de las variables. La suma será=true+false=truefalse
}
</script>
</head>
<body>
<div>
<p>Aquí un párrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img onclick="mostrarMensaje1();" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto"/>
<p onclick="alert(Alerta JavaScript);" >Aquí otro párrafo de texto. JavaScript es un lenguaje utilizado para dotar de efectos dinámicos a las páginas web.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Portal web</title>
</head>
<body>
<script type="text/javascript">
var pi;
pi='\u03C0';
var \u03C0;
\u03C0=3.1416;
alert('El número '+pi+' vale '+\u03C0);
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Portal web</title>
<script type="text/javascript" src="CU01113.js"></script>
</head>
<body>
<div>
<p>Aquí un párrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img onclick="mostrarMensaje1();" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto"/>
<p style="background-color: yellow;" onclick="mostrarMensaje2();">Aquí otro párrafo de texto. JavaScript es un lenguaje utilizado para dotar de efectos dinámicos a las páginas web.</p>
</div>
</body>
</html> function mostrarMensaje1(){
var bacterias=3.55;
var texto="bacterias en la probeta";
var numeroInfinito=Infinity;
alert('La variable bacterias vale:'+bacterias);
bacterias=3.55E5;
alert('La variable bacterias vale(multiplicamos por 1000000):'+bacterias);
bacterias=3.55E-5;
alert('La variable bacterias ahora es un número muy pequeño:'+bacterias);
alert('La variable bacterias ahora es(operación sin sentido):'+bacterias*texto);
bacterias=3.55e100000000000000000;
alert('La variable bacterias ahore es demasiado grande:'+bacterias);
bacterias=3.55E-100000000000000000;
alert('La variable bacterias ahora es demasiado pequeña:'+bacterias);
alert('Un número positivo dividido entre cero(indeterminación matemática) devuelve:'+(4/0));
alert('Un número negativo dividido entre cero(indeterminación matemática) devuelve:'+(-4/0));
alert('Cero dividido entre cero devuelve:'+(0/0));
alert('La variable numeroInfinito vale:'+numeroInfinito);
var diezCentimos=10;
var veinteCentimos=20;
var treintaCentimos=30;
alert('Esperamos 0.1 y lo obtenemos:'+((veinteCentimos-diezCentimos)/100));
alert('Esperamos 0.1 y no lo obtenemos:'+(treintaCentimos-veinteCentimos)/100);
}Crea un código JavaScript donde se genere un error por un mal uso de la palabra clave var y comprueba la respuesta del navegador.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Portal web</title>
<script type="text/javascript" src="CU01112E_1.js"></script>
</head>
<body>
<div>
<p>Aquí un párrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img onclick="mostrarMensaje1()" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto">
<p style="background-color:yellow;" onclick="mostrarMensaje2()">Aquí otro párrafo de texto. JavaScript es un lenguaje utilizado para dotar de efectos dinámicos a las páginas web.
</p>
</div>
</body>
</html>function mostrarMensaje1(){
alert('La variable precio vale:'+precio);
dato1=null;
alert('La variable dato1 vale:'+dato1);
var precio=22.55;
precio=precio+10;
alert('La variable vale:'+var precio);
alert('El dobre de precio es:'+(precio*2));
cantidad=10;
alert('El importe resultante de multiplicar precio por cantidad es:'+(precio*cantidad));
precio='muy caro';
alert('La variable precio vale ahora:'+precio);
alert('El doble de precio es ahora:'+(precio*2));
var precio=99.55;
alert('La variable precio ha sido declarada por segunda vez y ahora vale:'+precio);
var $descuento_aplicado=0.55;
alert('La variable $descuento_aplicado vale:'+$descuento_aplicado);
}
// No se ejecuta el JavaScript porque expresamente hemos utilizado la palabra var indebidamente. SyntaxError: expected expression, got keyword 'var' nombreArchivo.html:13:27
ReferenceError: mostrarMensaje1 is not defined nombreArchivo.html:1:1
Crea una variable y asignale los contenidos true y false, e intenta multiplicarlas por un número (por ejemplo por 2). ¿Qué resultados obtienes? ¿A qué crees que se deben estos resultados?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Portal web</title>
<script type="text/javascript" src="CU01112E_2.js"></script>
</head>
<body>
<div>
<p>Aquí un párrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img onclick="mostrarMensaje1()" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto">
<p style="background-color:yellow;" onclick="mostrarMensaje2()">Aquí otro párrafo de texto. JavaScript es un lenguaje utilizado para dotar de efectos dinámicos a las páginas web.
</p>
</div>
</body>
</html> function mostrarMensaje1(){
alert('La variable precio vale:'+precio);
dato1=null;
alert('La variable dato1 vale:'+dato1);
var precio=22.55;
precio=false;
alert('La variable vale:'+precio);
alert('El dobre de precio es:'+(precio*2));
cantidad=10;
alert('El importe resultante de multiplicar precio por cantidad es:'+(precio*cantidad));
precio='muy caro';
alert('La variable precio vale ahora:'+precio);
alert('El doble de precio es ahora:'+(precio*2));
var precio=99.55;
alert('La variable precio ha sido declarada por segunda vez y ahora vale:'+precio);
var $descuento_aplicado=0.55;
alert('La variable $descuento_aplicado vale:'+$descuento_aplicado);
}
// Si a una variable se le pone true como valor dicha variable tomo como valor "1". En cambio, si a la variable le establecemos el valor boolean false, la misma tomo el valor de "0".<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos102.css"/>
<title>Portal web</title>
</head>
<body>
<div id="caja1">Hola</div>
</body>
</html>#caja1 {
width: 300px;
height: 200px;
animation: anime 5s infinite;
position: absolute;
left: 0;
top: 0;
}
@keyframes anime {
0%{ background: #f00; font-size: 10px; top: 10px;}
25%{background: #a52a2a; font-size: 90px; left: 100px;}
50%{ top: 56px; background: #000; font-size: 90px; }
100%{background: #a52a2a; font-size: 90px; left: 0; }
}
/* A) La animación se llama anime y tien 4 puntos claves.
B) Al principio tendra un fondo de color #f00 con un font-size de 10px y estará a 10px del borde de arriba. Llegada la animación a los 25% tendrá un fonde de color #a52a2a con un tamaño de fuente de 90px y estará a 100px del borde izquierdo. A la mitad de la animación estará a 56px de arriba, con un fonde de color #000 y con un tamaño de letra de 90px. Al final tendrá un fondo de color #a52a2a, con un tamaño de letra de 90px y estará pegado al borde de la izquierda.
C) Es lo mismo usar 0% que from y 100% que to.*/<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos100.css"/>
<title>Portal web</title>
</head>
<body>
<div id="transEj1" style="border: solid 2px; background-color: yellow; width:200px">
<div>
<div id="rotateX"><img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++"/></div>
<div id="rotateY"><img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++"/></div>
<div id="rotateZ"><img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++"/></div>
</div>
</div>
</body>
</html>#transEj1 div {
transition: all 2s ease-in-out;
perspective: 100px;
perspective-origin: 50% 100px;
}
#transEj1:hover #rotateX {
transform: rotateX(180deg);
}
#transEj1:hover #rotateY {
transform: rotateY(180deg);
}
#transEj1:hover #rotateZ {
transform: rotateZ(180deg);
}
Estudia el siguiente código CSS y responde a las cuestiones planteadas:
#skew { transform:skew(35deg); }
#scale { transform:scale(1,0.5); }
#rotate { transform:rotate(45deg); }
#translate { transform:translate(10px, 20px); }
#rotate-skew-scale-translate { transform:skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px); }
a) Crea un documento HTML donde se vean los estilos que tenemos en el código aplicados a distintos elementos.
b) Explica el significado de cada una de las partes del código (por ejemplo #skew indica el estilo que se aplicará a los elementos con atributo id=”skew”. Transform:skew(35deg) indica que …)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos98.css"/>
<title>Portal web</title>
</head>
<body>
<!-- ROTATE -->
<h2>CSS transform: skew</h2>
<div style="float: left; border-style: none; border-width: 0; background-color: white;">
<div id="skew" style="border-radius: 40px;">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg"/></a></div>
</div>
<p style="clear: both;"></p>
<!-- SCALE -->
<h2>CSS transform: scale</h2>
<div style="float: left; border-style: none; border-width: 0; background-color: white;">
<div id="scale" style="border-radius: 40px;">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg"/></div>
</div>
<p style="clear: both;"></p>
<!-- SKEWX -->
<h2>CSS transform: rotate</h2>
<div style="float: left; border-style: none; border-width: 0; background-color: white;">
<div id="rotate" style="border-radius: 40px;">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg"/></div>
</div>
<p style="clear: both;"></p>
<!-- TRANSLATE -->
<h2>CSS transform: translate</h2>
<div style="float: left; border-style: none; border-width: 0; background-color: white;">
<div id="translate" style="border-radius: 40px;">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg"/></div>
</div>
<p style="clear: both;"></p>
<!-- COMBINADO CON HOVER -->
<h2>CSS transform: rotate-skew-scale-translate</h2>
<div style="float: left; border-style: none; border-width: 0; background-color: white;">
<div id="caja1" style="border-radius: 40px;">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg"/></div>
</div>
<p style="clear: both;"></p>
</body>
</html>#skew:hover {
transform: skew(35deg);
}
#scale:hover {
transform: scale(1,0.5);
}
#rotate:hover {
transform: rotate(45deg);
}
#translate:hover {
transform: translate(10px, 20px);
}
#caja1:hover {
transform: skew(30deg)scale(1.1,1.1)rotate(40deg)translate(10px,20px);
}
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
div {
border: 5px solid;
width: 260px;
margin: 10px;
background-color: yellow;
font-size: 20px;
text-align: center;
padding-top: 20px;
word-wrap: break-word;
}
h2 {
margin: 15px 0 -15px 40px;
}
img {
padding: 10px;
}
/* Mediante la propiedad: #skew {transform: skew(35deg);} se aplica al elemento #skew un sesgado de 35grados en horizontal.
Con la propiedad: #scale {transform: scale(1,0.5);} aplicamos al elemento con selector #scale una escala de 1 en horizontal (es decir, queda igual) y de 0.5 en vertical. El mismo efecto se podría conseguir sólo con la propiedad: scaleY(0.5).
A través de la propiedad: #rotate {transform: rotate(45deg);} conseguimos con el elemento #rotate gire 45grados a la derecha.
Medianete la propiedad: #translate {transform: translate(10px,20px);} movemos dicho elemento 10px a la derecha y 20px hacia abajo con referencia a su ubicación inicial.
Por último, con la propiedad: #rotate-skew-scale-translate {transform: skew(30deg)scale(1.1,1.1)rotate(40deg)translate(10px,20px);} aplicamos al elemento #rotate-skew-scale-translate todas las transformaciones a la vez. O sea, le sesgamos 35grados en horizontal, le aplicamos una escala de 1.1 horizontalmente y otra de 1.1 verticalmente, lo rotamos 40grados a la derecha y lo tralsadamos 10px horizontalmente (a la derecha, porque es un valor positivo) y 20px verticalmente (hacia abajo porque es un valor positivo).*/<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos97.css"/>
<title>Portal web</title>
</head>
<body>
<div></div>
</body>
</html>div {
width: 400px;
height: 200px;
border: 5px solid;
background: linear-gradient(45deg, blue, yellow);
border-image-source: url(border-image2.png);
border-image-slice: 33;
border-image-width: 20px;
border-image-repeat: stretch;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos96.css">
<title>Portal web</title>
</head>
<body>
<div>
</div>
</body>
</html>div {
width: 400px;
height: 200px;
margin: 50px;
border: solid;
background: linear-gradient(26.5deg, red, white, blue);
}Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.
Abraham Lincoln (1808-1865) Presidente estadounidense.
aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación
RSS -
WAP2