Exercici JavaScript 2

13 02 2013
var usuario1 ={
  nombre:”Marcelo”, 
  instrumentos:[“piano”,”bateria”,”los cojones”],
  saluda:function(){alert(“hola”);},
  followers:458, 
  activo:true
};
var usuario2 ={
  nombre:”tutia”, 
  instrumentos:[“organo”,”tambores”,”coles de brusela”],
  saluda:function(){alert(“que tal?”);},
  followers:458, 
  activo:true
};
var usuario3 ={
  nombre:”tuprimo”, 
  instrumentos:[“dong”,”triangulo”,”cajita china”],
  saluda:function(){alert(“que pasa wei?”);},
  followers:458, 
  activo:false
};
var usuario4 ={
  nombre:”tuabuela”, 
  instrumentos:[“guitarra”,”bajo”,”las maracas”],
  saluda:function(){alert(“eingh?”);},
  followers:458, 
  activo:true
};
 
var listagente =[usuario1,usuario2,usuario3,usuario4];
 
console.log(listagente);
                       
//quitar elementos inactivos
function quita_inactivos(){
  var nueva=[];
  for (var i=0; i<listagente.length;i++){
    if (listagente[i].activo){
      nueva.push(listagente[i]);
    }
  }
  console.log(nueva);
  return nueva;
  
 
//ordenar por nombre
listagente.sort(ordenar_por_nombre);
function ordenar_por_nombre (a,b){
return a.nombre-b.nombre;
}




JavaScript de apuestas de dados

9 02 2013

var dinero;
var apuesta;
var ganado=0;
var perdido=0;
var cantidad_ganada=0;
var cantidad_perdida=0;

// pedir si quiere jugar
var tirar=confirm(“quieres jugar?”);
if (tirar=true){
reset();
while(tirar===true){
apostar();
jugar();
estado();
tirar=confirm(“quieres volver a jugar?”);
}
}

else{ console.log(“espero que nos veremos poronto”)}

//resetea el dinero y las apuestas, es decir, reinicia el juego de nuevo
function reset (){
dinero=100;
apuesta=0;
}

// administra la apuesta y la separa del dinero
function apostar(){
apuesta=10;
dinero=(dinero-apuesta);
console.log(“has apostado 10€”);
console.log(“tu dinero actual es: “+dinero);
}

//nos permite tirar los dados i administrar el resultado
function jugar(dado1, dado2){
dado1=Math.floor((Math.random()*6)+1);
dado2=Math.floor((Math.random()*6)+1);
if (dado1+dado2==7) {
console.log(“[ “+dado1+” ]”+” [ “+dado2+” ]”);
apuesta=(apuesta*10);
ganado=apuesta;
dinero=(dinero+apuesta);
apuesta=10;
console.log (“tu dinero actual es: “+dinero);
}
else if (dado1===dado2) {
console.log(“[ “+dado1+” ]”+” [ “+dado2+” ]”);
console.log(“Han salido iguales, puedes volver a tirar”);
console.log(“tu dinero actual es: ” +dinero);
}

else{
console.log(“[ “+dado1+” ]”+” [ “+dado2+” ]”);
console.log(“Has perdido”);
dinero=(dinero-apuesta);
perdido=10;
console.log(“tu dinero actual es: ” + dinero);
}
cantidad_ganada=(cantidad_ganada+ganado);
cantidad_perdida=(cantidad_perdida+perdido);

}

//indica el estado de dinero, apuesta realizada i ganancias o perdidas
function estado(){
console.log (“tu dinero: “+dinero);
console.log (“llevas ganados: “+ cantidad_ganada+”€”);
console.log (“llevas perdidos: “+ cantidad_perdida+”€”);

}





Pseudocodigo Pasteles

9 02 2013

comandas<-cierto_es_logico
pedido_actual es pedido;
mientras(comandas)hacer
pedido_actual<-coger_pedido
si(pedido_actual<>fin) entonces
encasoque pedido_actual
sea”normal” hacer anadir_lista_manana
sea”brazo” hacer anadir_lista_tarde
sea”infantil” hacer anadir_lista_manana
sea”boda” hacer anadir_lista_tarde
finencasoque

sino comandas<-falso
finalsi
finalmientreas
imprimir lista tarde, lista mañana





EXERCICI DELS NAVEGADORS

24 01 2013

PAG. PRINCIPAL

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>navegadores</title>
<link rel=”stylesheet” type=”text/css” href=”navegadores.css”>
</head>
<body>
<div id=”superdiv”>
<div id=”cabezera” ><h1>NAVEGADORES</h1></div>
<div id=”firefox” class=”logo”><a href=”firefox.html” target=”_blank”><img src=”http://xombit.com/files/2012/04/firefox-logo.jpg”><h3>Firefox</h3></a></div&gt;
<div id=”chrome” class=”logo”><a href=”chrome.html” target=”_blank”><img src=”http://blog.xmundo.net/wp-content/uploads/2011/02/chrome-logo-200×200.png”><h3>Chrome</h3></a></div&gt;
<div id=”safari” class=”logo”><a href=”safari.html” target=”_blank”><img src=”http://xonos.files.wordpress.com/2008/09/safari-logo.png”><h3>Safari</h3></a></div&gt;
<div id=”explorer” class=”logo”><a href=”explorer.html” target=”_blank”><img src=”http://3.bp.blogspot.com/-nIyUviAHZ4E/TZtPQzVSmLI/AAAAAAAAABw/tZYMVqMWv6U/s200/microsoft-ie9-logo.png”><h3>Explorer</h3></a></div&gt;

</div>

</body>
</html>

 

PAG. FIREFOX

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>firefox</title>
<link rel=”stylesheet” type=”text/css” href=”navegadores.css”>
</head>
<body>
<h1>FIREFOX</h1>
<div class=”fotogrande”><img src=”http://vector4u.com/wp-content/uploads/2009/06/mozilla_firefox_logo.jpg”&gt;
</div>
<p class=”textnav” > Firefox se creò el 3 de abril de 2003</p>
<p class=”motor”> Este navegador utiliza el motor de renderizado Gecko</p>
<p class=”version”>El Mozilla Firefox ya va por la version <strong>Firefox 18.0.1</strong> </p>
</body>
</html>

 

PAG. CHROME

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Chrome</title>
<link rel=”stylesheet” type=”text/css” href=”navegadores.css”>
</head>
<body>
<h1>Chrome</h1>
<div class=”fotogrande”><img src=”http://www.livbit.com/article/wp-content/uploads/2011/02/Chrome_Logo.jpg”&gt;
</div>
<p class=”textnav” > Chrome se creò el 2 de septiembre de 2008 </p>
<p class=”motor”> Este navegador utiliza el motor de renderizado Webkit</p>
<p class=”version”> Chrome ya va por la version <strong>Chrome 25.0</strong> </p>
</body>
</html>

 

PAG. SAFARI

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Safari</title>
<link rel=”stylesheet” type=”text/css” href=”navegadores.css”>
</head>
<body>
<h1>Safari</h1>
<div class=”fotogrande”><img src=”http://www.click.com.ar/blog/wp-content/uploads/2010/07/Safari-logo.jpg”&gt;
</div>
<p class=”textnav” > Safari se creò el junio de 2003 </p>
<p class=”motor”> Este navegador utiliza el motor de renderizado Webkit</p>
<p class=”version”> Safari ya va por la version <strong>Safari 5.1.7</strong> </p>
</body>
</html>

 

PAG. I. EXPLORER

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Internet Explorer</title>
<link rel=”stylesheet” type=”text/css” href=”navegadores.css”>
</head>
<body>
<h1>Internet Explorer</h1>
<div class=”fotogrande”><img src=”http://assets.vr-zone.net/9508/internet_explorer_logo.jpg”&gt;
</div>
<p class=”textnav” > Internet Explorer se presentó en agosto de 1995 </p>
<p class=”motor”> Este navegador utiliza el motor de renderizado Trident <small class=”small”>es considerado por la mayoría de desarrolladores como el cáncer de Internet (fuente: http://www.circulodemaquetadores.com/motores-de-renderizado-navegadores/)</small></p>
<p class=”version”> Internet Explorer ya va por la version <strong>Internet Explorer 10</strong> <small class=”small”ss>(solo para wondows 8)</small> </p>
</body>
</html>

 

ESTILS CSS

#cabezera{
width:600px;
height:50px;
text-align:center;
margin:0px 0px 0px 180px;

}
.logo{
width:300px;
height:300px;
border:1px blue solid;
position:relative;
float:left;
margin:50px 0px 0px 150px;
text-align:center;
}
h1{
font-size: 40px;
text-align:center;
color:blue solid;
}
h3{
color:red;
font-size:35px;
}
.fotogrande{
width:500px;
height:500px;
text-align:center;
margin:0px 0px 0px 300px;
}
.textnav{
text-align:center;
font-size: 30px;

}
.motor{
text-align:center;
font-size: 30px;
}
.version{
text-align:center;
font-size: 30px;
}
.small{font-size: 15px;
}

 

 

 





Aplicaciones

22 01 2013

<!DOCTYPE html>
<html>
<head>
<title>aplicaciones web</title>
<link rel=”stylesheet” type=”text/css” href=”aplicacionesweb.css”>
</head>
<body>
<div id=”superdiv”>
<div id=”cabecera”><h1>TITULO</h1>
<div id=”Flash”><h2>Flash</h2><hr>
<img id=”flashimag” src=”http://4.bp.blogspot.com/_XmsE1Mkus74/SpFW0WkX4WI/AAAAAAAAAg4/9EjlDmH0pmA/s320/adobe_flash_logo1.png&#8221; height=160 width=160>

<hr>
<p>diciembre de 1996 </p>
<hr>
<p class=”explicaciòn”>Es una aplicación de creación y manipulación de gráficos vectoriales con posibilidades de manejo de código mediante un lenguaje de scripting llamado ActionScript. Flash es un estudio de animación que trabaja sobre “fotogramas” y está destinado a la producción y entrega de contenido interactivo para diferentes audiencias alrededor del mundo sin importar la plataforma.</p>
</div>
<div id=”Silverlight”><h2>Silverlight</h2>
<hr>
<img id=”silverlightimg” src=”http://1.bp.blogspot.com/-dqlojFjP5ts/TeaIo5cB73I/AAAAAAAAApk/_l6zUR-KtnM/s1600/silverlight-logo.jpg&#8221; height=160 width=160/>
<hr>
<p>septiembre de 2007</p>
<hr>
<p class=”explicaciòn”>Microsoft Silverlight es un complemento para navegadores de Internet basado en la plataforma Windows que agrega nuevas funciones multimedia como la reproducción de vídeos, gráficos vectoriales, animaciones y de entorno de desarrollo; en forma similar a lo que hace Adobe Flash.</p>
</div>

<div id=”Java”><h2>Java</h2>
<hr>
<img id=”javaimg” src=”http://www.idrsolutions.com/Portals/60734/images/javafx_logo_color_1R.jpg&#8221; height=160 width=160/>
<hr>
<p> mayo de 2007</p>
<hr>
<p class=”explicaciòn”>Es una familia de productos y tecnologías de Sun Microsystems, adquirida por Oracle Corporation, para la creación de Rich Internet Applications (RIAs), esto es, aplicaciones web que tienen las características y capacidades de aplicaciones de escritorio, incluyendo aplicaciones multimedia interactivas. Las tecnologías incluidas bajo la denominación JavaFX son JavaFX Script y JavaFX Mobile, aunque hay más productos JavaFX planeados.</p></div>
</div>
</body>
</html>

 

ESTILS CSS

 

div{ position:absolute;
text-align:center;
}
h1{text-align: center}
h2{text-align:center}
.explicaciòn{
font-size:15px;
text-align:justify;
padding:9px;
}

#superdiv{
width:820px;
height:640px;
padding:250px;
top:-200px;
}
#cabecera{
width:640px;
height:100px;
border:1px green solid;}
#Flash{
width:200px;
height:700px;
top:120px;
border:1px green solid;
}
#flashtext{text-align:justify;}
#Silverlight{
width:200px;
height:700px;
top:120px;
left:220px;
border:1px green solid;
}
#Java{
width:200px;
height:700px;
top:120px;
left:440px;
border:1px green solid;
}





FORMULARIO

21 01 2013

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div>
<form action=”mailto:sastreria@mizapato.es”>
<fieldset>
<h1>Formulario de contacto</h1>
<br><span>Nombre:</span> <input type=”text” name=”nombre” placeholder=”tu nombre” autofocus>
<br><br>
<span>Apellidos: </span><input type=”text” name=”apellidos” placeholder=”Apellidos”>
<br><br>
<span>Telefono:</span><input type=”number” name=”teléfono” placeholder=”Teléfono”><br><br>
<span> email:</span><input type=”email” name=”email” placeholder=”e-mail”><br><br>
<fieldset>
<legend>Talla:</legend><br>
<input type=”radio” value=”XS” name=”Talla”> <span>XS</span> <br>
<input type=”radio” value=”S” name=”Talla”> <span> S</span> <br>
<input type=”radio” value=”L” name=”Talla”> <span> L </span><br>
<input type=”radio” value=”M” name=”Talla”> <span> M </span> <br>
<input type=”radio” value=”XL” name=”Talla”><span>XL</span> <br>
<input type=”radio” value=”XXL” name=”Talla”><span> XXL</span> <br>
</fieldset>
<br>
<span>Color: </span><select name=”color”>
<option value=”Amarillo” name=”color”><span> Amarillo </span><br>
<option value=”Verde” name=”color”><span> Verde</span><br>
<option value=”Rojo” name=”color”><span> Rojo</span><br>
<option value=”Blanco” name=”color”><span> Blanco</span><br>
<option Value=”negro”name=”color”><span> Negro</span><br><br>
</select>
<br>
<br>
<span> color </span><input type=”color” value=”color” name=”color”><br><br>
<span> Cantidad</span><input type=”range” value=”cantidad” name=”cantidad”><br><br>

<span> Fecha de entrega </span><input type=”date” name=”fecha de entrega”><br><br>
<span> Comentarios:</span><br>
<textarea rows=”4″ cols=”50″>
</textarea>
<br><br>

<input type=”reset” value=”Borrar”>

<input type=”submit” value=”Aceptar”>

</form>

<p>Click the “Submit” button and the form-data will be sent to a page on the server called “demo_form.asp”.</p>

</body>
</html>

ESTILOS CSS

input[type=submit]{
padding:5px 10px;
}
input[type=submit]:hover{
background-color:#9f9;
}
input[type=reset]{
padding:5px 10px;
}
input[type=reset]:hover{
background-color:red;
}
fieldset h1{text-align:center
}
span{width:100px;
display:inline-block;
}
input{min-width:150px;
}

 

 





treball amb caixes css

16 01 2013

<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”estilos2.css”>
</head>
<body>
<p>texto cualquiera</p>
<div id=”cajaIzq”>
<p class=”centro”>Izquierda</p>
<p class=”centro”>Izquierda</p>
</div>
<div id=”cajaDer”>
<p class=”centro”>derecha</p>
<p class=”centro”>derecha</p>
</div>
</body>
</html>

(estilos css del doc)

*{
margin:0;
padding:0;
}
/*
div, p {
display: inline;
}
*/

div p {
display: block;
background: transparent;
margin: 0;
padding: 0;
border:none;
}

div {
padding: 40px;
border:3px dashed red;
background: #aaa;
}

div p {
margin: 40px;
border: 1px dotted green;
background: #aaf;
}

div,div p{
margin: 40px;
padding: 10px;
}

#cajaIzq {
background: #faa;
}
#cajaDer {background: #afa;
}





Els principis de Javascript

16 01 2013

<DOCTYPE html>
<html>
<body>
<div style=”text-align:center”>
<video id=”video-cabecera” width=”640″ >
<source src=”./mov_bbb.ogg” type=”video/ogg”>
¿no tienes <a href=”http://goole.com/chrome”></a&gt;
</source>
</video>
<br>
<button onclick=”reproducir()”>Pausa-Play</button>
<button onclick=”ampliar()”>Ampliar</button>
<button onclick=”reducir()”>Reducir</button>
<button onclick=”normal()”>Normal</button>
</div>
<script type=”text/javascript”>
var mivideo =document.getElementById(‘video-cabecera’);

function reproducir() {
if(mivideo.paused)
mivideo.play();
else mivideo.pause();
}

function ampliar() {
mivideo.width = 960;
}
function reducir() {
mivideo.width = 480;
}
function normal() {
mivideo.width = 640;
}
</script>
</body>
</html>





audio i video en HTML5

16 01 2013

<DOCTYPE html>
<html>
<body>
<video width=”320″ height=”240″ autoplay loop>
<source src=”./mov_bbb.ogg” type=”video/ogg”>
¿no tienes <a href=”http://goole.com/chrome”></a&gt;
</source>
</video>
<br>
<audio controls>
<source src=”./horse.ogg” type=”audio/ogg”>
¿no tienes <a href=”http://goole.com/chrome”></a&gt;
</source>
</audio>
</body>
</html>





Exercici DIVS

15 01 2013

<html>
<head>
<title>Exercici DIVS</title>
</head>
<body>
<div id=”principalwrapper” style=”height:600px; width:800px; border:1px blue solid; background-color:whitesmoke”>

<div id=”logo” style=”float:left;height:200px; width:200px; border:1px blue solid”>
<img src=”https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcS0bq4z2Ln4uFFy-pAZg9HxrcYoAvuL7k3qrECvPZFZ2_-hl7C2Lw&#8221; style=”padding:20px 10px 10px 20px”>
</div>
<div id=”menu superior” style=”float:left;height:100px; width:596px; border:1px blue solid”>
<h1 style=”padding:10px 10px 10px 10px text-alaign: justify”>LA WEB DE LOS DIBUJOS ANTIGUOS</h1>
</div>
<div id=”barra detalles” style=”float:left;height:98px; width:596px; border:1px blue solid”>
barra detalles
</div>
<div id=”menu izquierdo”style=”float:left;height:396px; width:180px; border:1px blue solid”>
<h3 style=”text-align:justify”>escoje tu personaje faborito</h3>
<ol>
<li>Mafalda</li>
<li>snoopy</li>
<li>Fido didoo</li>
</ol>
</div>
<!–aqui pondre las imagenes de mafalda, snoopy y fido dido y un lapiz–>
<div id=”imagen izquierda” style=”float:left;height:180px; width:175px; border:1px blue solid”>
<img src=”http://4.bp.blogspot.com/-ZM_vtJL6VO0/T2DHNSKJxcI/AAAAAAAABSI/2OWoL_ZUTpc/s1600/mafalda.jpg&#8221; height=180 width=175>
</div>
<div id=”imagen central”style=”float:left;height:180px; width:175px; border:1px blue solid”>
<img src=”https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQoCA-G6aJLFzKkVIPjSTqljQCPyYJ9V4hkFA30FTJGV_02m_Cz&#8221; height=180 width=175>
</div>
<div id=”imagen derecha”style=”float:left;height:180px; width:175px; border:1px blue solid”>
<img src=”https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR7Fw7iGvKSWyv53EjWkkrfb1cPWuYfqTZzQ0km2sVm93y_HCf_&#8221; height=180 width=175>
</div>
<div id=”imagen derecha”style=”float:right;height:396px; width:85px; border:1px blue solid”>
<img src=”https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRo5IiZy_TMMTA1FAirVxHXxPCCbTsqUCOTIZ_X7XUN-os7kjFy&#8221; height=396 width=85>
</div>
<!–aqui van los textos de cada dibujo–>
<div id=”texto imagen derecha” style=”float:left;height:150px; width:175px; border:1px blue solid”>
<p style=”padding:5px 5px 10px 10px; font-size: 14px; text-align:justify”>
<strong style=”font-size:18px; color:green;”>L</strong>orem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit quam vitae erat rhoncus consectetur. Fusce vulputate, tellus cursus porta hendrerit, nisi nibh
</p>
</div>
<!–aqui van los textos de cada dibujo–>
<div id=”texto imagen central” style=”float:left;height:150px; width:175px; border:1px blue solid”>
<p style=”padding:5px 5px 10px 10px; font-size: 14px; text-align:justify”>
<strong style=”font-size:18px; color:green;”>L</strong>orem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit quam vitae erat rhoncus consectetur. Fusce vulputate, tellus cursus porta hendrerit, nisi nibh
</p>
</div>
<div id=”texto imagen derecha” style=”float:left;height:150px; width:175px; border:1px blue solid”>
<p style=”padding:5px 5px 10px 10px; font-size: 14px; text-align:justify”>
<strong style=”font-size:18px; color:green;”>L</strong>orem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit quam vitae erat rhoncus consectetur. Fusce vulputate, tellus cursus porta hendrerit, nisi nibh
</p>
</div>
<div id=”pie de pagina” style=”float:left;height:62px; width:529px; border:1px blue solid”>

pie de pagina
</div>

</div>
</body>
</html>