miércoles, 12 de octubre de 2016

03 Javascript Bucles y Condicionales

En este video muestro como se realizan repeticiones y condicionales con Javascript, usando IF, FOR, WHILE, DO WHILE y SWITCH.
Podeis ver el video aqui.



Entre las etiquetas script va el codigo de ejemplo. Os pongo el codigo aqui:

<!doctype html>
<html lang="ES">
<head>
<title>
Condicionales y bucles - JavaScript
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
<p>Parrafos</p>
<script>
//Condicional IF
var num1=7;
var num2=10;
if(num1<num2){
    alert("Numero 1 es menor que Numero 2");
} else if (num1>num2){
    alert("Numero 1 es mayor que Numero 2");
}
//Switch
switch(num1){
    case 1:
        document.write("La var num1 es 1 en el switch");
        break;
    case 7:
            document.write("La var num1 es 7 en el switch");
        break;
    default:
        break;
}

//repeticion FOR
document.write("<br>Bucle For<br>");
for(i=1;i<=20;i++){
   
    document.write(i+"<br>");
}
//repeticion While
document.write("<br>Bucle While<br>");
var i=0;
while(i<=15){
document.write(i+"<br>");
i++;
}
var i=0;
//repeticion Do While
document.write("<br>Bucle DoWhile<br>");
do{
document.write(i+"<br>");
i++;
} while(i<=5);
</script>
</article>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>

</body>
</html>

martes, 4 de octubre de 2016

02 Javascript Variables y operadores

Introduccion sobre variables y operadores javascript:



Declaramos una variable usando la palabra reservada var, le damos un valor y la imprimimos en el documento web, todo mediante este codigo encerrado entre las etiquetas script (dentro del html):
<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/display.css">
<title>
Variables
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1></h1>
<h2></h2>
</hgroup>
<script>
var x=16;
document.write(x);
</script>

</article>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>
</body>
</html>
Si quisieramos imprimir comillas u otros caracteres especiales dentro del documento, tendremos que usar escapes como la "\", por ejemplo: document.write("\"Hola\""); de esta forma imprime "Hola" con las comillas.
Los operadores que podemos manejar son:
Primitivos + - * / %
var x=10+6;//x vale 16
document.write(x);
var x=26%6; //modulo, valor de x es 2 que es el resto
Incremento / decremento
var a=0;
var b=10;
var a =b++;//a vale 10 en este se incrementa despues
var a=++b;//a vale 11 en este se incrementa antes

//igual ocurre en decremento b-- y --b PROBARLO
Asignacion

var a=0;
var b=12;
a=b;//ahora a es 12
a+=b;//equivale a a=a+b
a-=b;//equivale a a=a-b

Comparacion

 //lo veremos con detalle en bucles y condicionales
a==b;  a===b; a!=b; a!==b; a>b; a<b; a>=b; a<=b;

Logicos

(4<2)&&(10<15); // daria False por que no se cumplen las 2 condiciones
&& //operador and, se tienen que cumplir las 2 condiciones
|| operador or, se tienen que cumplir una condicion

Ternario

variable(condicion)?valor1:valor2;
var Mayor(edad<18)?"Es menor":"Es mayor";
Todos los operadores los iremos viendo conforme avancemos con el codigo, ahora nos vale con conocerlos y ver de que disponemos.
Espero os sea util, gracias.

domingo, 2 de octubre de 2016

01 Javascript Toma de contacto

En este video se muestra como empezar con Javascript, mostrando mensajes en HTML de manera sencilla.
El codigo se puede realizar con cualquier editor de texto.


El codigo javascript lo insertamos dentro del documento HTML, abriendo y cerrando con la etiqueta "script".
Los comentarios van con // si es una linea o /* */ si son varias lineas, esto nos sirve para insertar texto que no se tendra en cuenta en la ejecucion y nos  puede valer para  indicar que hacemos en el codigo, para facilitar su comprension si se ve tiempo despues o si lo ven otras personas con las que colaboramos para que entiendan el codigo con mayor facilidad.
Lo siguiente que expongo en este primer contacto es como insertar texto dentro del documento HTML, con "document.write("texto");", donde podremos insertar etiquetas HTML, tal y como hacemos insertando un titulo H1.

<script>
//comentario de una linea
/*comentario de varias lineas
*/
document.write("Hola, bienvenidos a JavaScript");
document.write("<h1>Mensaje con formato</h1>");
alert("Ventana javascript");

</script>

El codigo completo del archivo HTML seria asi:

<!doctype html>
<html lang="ES">
<head>
<title>
Toma de contacto - JavaScript
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
<p>Parrafos</p>
<script>
//comentario de una linea
/*comentario de varias lineas
*/
document.write("Hola, bienvenidos a JavaScript");
document.write("<h1>Mensaje con formato</h1>");
alert("Ventana javascript");</script>
</article>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>

</body>
</html>

Espero os sea util, gracias.

lunes, 26 de septiembre de 2016

11 CSS PseudoElementos, transformacion y rotacion

En el video se indican algunas propiedades para rotar, transformar y trasladar elementos dentro de la web, asi como algunos pseudoelementos CSS.



El codigo HTML es:

<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/pseudoElementos.css">
<title>
PseudoElementos
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
</article>

<div id="primero">
<a href="#">Enlace 1</a>
<p>Break word y Linear gradient. Parrafo 1 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjlsajlfjaljdkjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<p>Parrafo 2 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjlsajkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkjlfjaljdflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<a href="#">Enlace 2</a>
<p>Parrafo 3 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkjlsajlfjaljdflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
</div>

<div id="segundo">
<p>Normal word y Radial gradient. Parrafo 1 dkfjkasdjflkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<p>Parrafo 2 dkfjkasdjflkjalkfjlajdflajdslfjsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<p>Parrafo 3 dkfjkkkjlsajlfjaljdflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
</div>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>
</body>
</html>

El codigo CSS es:

/*www.ticoticotaa.es*/
/*@2016*/
*{
   
}
p::first-letter{
    font-size:42px;
    color:blue;
}
#primero{

    background-color:gray;
    word-wrap:break-word;
    background:-moz-linear-gradient(red,black);
   
}
#segundo{

    background-color:pink;
    word-wrap:normal;
    background:-moz-radial-gradient(green,pink,blue);
    border:20px solid rgba(0,0,0,0.3);
    -moz-background-clip:padding-box;
}
div{
    width:200px;
    height:200px;
}
div:hover{
    width:400px;
    transform:skew(30deg);
    transform:rotate(10deg);
    transform-origin:25% 75%;
    transform:translate(100px 50px);
}

Espero os sea util. Gracias.

domingo, 25 de septiembre de 2016

10 CSS Bordes y Sombras

En el video se indica como dar bordes redondeados y sombras a las cajas mediante CSS.



El codigo HTML es:

<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/bordesSombras.css">
<title>
Bordes y Sombras
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
</article>
<div id="primero">
<p>Parrafo 1 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjlsajlfjaljdkjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<p>Parrafo 2 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjlsajkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkjlfjaljdflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<p>Parrafo 3 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkjlsajlfjaljdflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
</div>
<div id="segundo">
<p>Parrafo 1 dkfjkasdjflkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<p>Parrafo 2 dkfjkasdjflkjalkfjlajdflajdslfjsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<p>Parrafo 3 dkfjkkkjlsajlfjaljdflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
</div>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>
</body>
</html>

El codigo CSS es:

/*www.ticoticotaa.es*/
/*@2016*/
*{
   
}
#primero{
    border-radius:20px;
    background-color:orange;
    color:white;
    padding:15px;
    margin:10px;
    box-shadow:-15px -15px 5px 5px yellow;
}
#segundo{
    width:200px;
    height:200px;   
    border-radius:100px;
    background-color:blue;
    color:white;
    padding:30px;
    margin:20px;
    box-shadow:inset 10px 10px 5px yellow,
        inset -10px -10px 5px yellow;
}

Espero os sea util, no olvideis practicar. Gracias.

sábado, 24 de septiembre de 2016

09 CSS Posicionamiento

Vemos en este video como posicionar distintos parrafos de nuestra web, metiendolos en "cajas", como se visualiza el parrafo si la caja donde esta contenido es de menor dimension al contenido en si, tambien vemos como sobreponemos unos encima de otros y los desplazamos a la posicion que deseamos.



El codigo HTML es:

<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/posicionamiento.css">
<title>
Poscionamiento
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
</article>
<p id="parrafo1">Parrafo 1 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjlsajlfjaljdkjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<p id="parrafo2">Parrafo 2 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjlsajkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkjlfjaljdflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<p id="parrafo3">Parrafo 3 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkjlsajlfjaljdflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>
</body>
</html>

El codigo CSS es:

/*www.ticoticotaa.es*/
/*@2016*/
*{
   
}
#parrafo1{
    margin-bottom:15px;
    width:100px;
    height:100px;
    color:green;
   
    background-color:gray;
    overflow:auto;
    z-index:2;
    position:relative;
}
#parrafo2{
    width:200px;
    height:100px;
    margin-top:-40px;
    margin-left:50px;
    color:blue;
    background-color:yellow;
    overflow:scroll;
    z-index:1;
    position:relative;
}
#parrafo3{
width:200px;
background-color:gray;
    overflow:visible;
    color:red;
}





Espero os sea util, no dejeis de practicar y probar opciones. Gracias.

jueves, 22 de septiembre de 2016

07. Juego tres en raya, activar boton partida y terminacion

En este video activo el boton de volver a jugar y preparamos el codigo para que el juego este completamente operativo.



El codigo HTML queda asi:

<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
<title>
Tres en Raya
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Juego Tres en Raya</h1>
</hgroup>
<div id="tiempo">
<p>Contador:</p>
<p id="contador">
<span id="minutos">00</span>:
<span id="segundos">00</span></p>
</div>
<div id="tablero">
<div class="row">
<div id="c00" onClick="RevisarCelda(0,0)" class="celda amarillo"></div>
<div id="c01" onClick="RevisarCelda(0,1)" class="celda rojo"></div>
<div id="c02" onClick="RevisarCelda(0,2)" class="celda amarillo"></div>
</div><!--row-->
<div class="row">
<div id="c10" onClick="RevisarCelda(1,0)" class="celda amarillo"></div>
<div id="c11" onClick="RevisarCelda(1,1)" class="celda rojo"></div>
<div id="c12" onClick="RevisarCelda(1,2)" class="celda amarillo"></div>
</div><!--row-->
<div class="row">
<div id="c20" onClick="RevisarCelda(2,0)" class="celda amarillo"></div>
<div id="c21" onClick="RevisarCelda(2,1)" class="celda rojo"></div>
<div id="c22" onClick="RevisarCelda(2,2)" class="celda amarillo"></div>
</div><!--row-->
</div><!--tablero-->
<p id="mensaje"></p>
<p id="boton" onClick="jugarOtraVez()"></p>
</article>
</section>
<aside>
</aside>
<footer>
</footer>
<script src="js/tablero.js"></script>
<script src="js/juego.js"></script>
<script src="js/cronometro.js"></script>
<script src="js/ejecutar.js"></script>
</body>
</html>
El codigo de ejecutar.js queda asi:
var Total_segs;
var Total_mins;
var cronometro;
//tablero
var tablero=new Array(3);
var casillapte=9;
var color;
//jugador
var jugador=1;
var gana=0;
var fin=false;
function jugarOtraVez(){
    jugador=1;
    gana=0;
    fin=null;
    casillapte=9;
    Mensaje.style.display="none";
    textoBoton.style.display="none";

    ejecutar();
}
function SeleccionaCelda(x,y,jugador){
   
    tablero[x][y]=jugador; //podra ser 2 por otro jugador
    //pintamos la celda
    PintarCelda(x,y,"blue",jugador);   
    casillapte--;
    comprobar(x,y,jugador);
}
function tiraJugador2(){
    jugador=2;
    x2=Math.round(Math.random()*2);
    y2=Math.round(Math.random()*2);
    while((tablero[x2][y2]==1) ||( tablero[x2][y2]==2)){
        x2=Math.round(Math.random()*2);
    y2=Math.round(Math.random()*2);
    }
    if(fin){
        mensajeFin();
    }else{
        SeleccionaCelda(x2,y2,jugador);
    }
    jugador=1;
}
function RevisarCelda(x,y){
    if(tablero[x][y]==1 || tablero[x][y]==2){
        //alert("Casilla ocupada");
        mensajeCasilla();
    } else if(fin){
        //alert("Se acabo la partida");
        mensajeFin();
    } else {
        jugador=1;
    SeleccionaCelda(x,y,jugador);
    if(casillapte>0){
        jugador=2;
        tiraJugador2();
    }
    }
}
function ejecutar(){
    //array tablero
    for(i=0;i<3;i++){
        tablero[i]=new Array(3);
    }
    LimpiaReloj();
    IniciaReloj();
color="red";   
    IniciarTablero(color);
 
}
ejecutar();
El codigo de tablero.js queda asi:

function IniciarTablero(color){
    for(i=0;i<3;i++){
        for(j=0;j<3;j++){
            tablero [i][j]=0;
            celda=document.getElementById("c"+i+j);
            celda.style.background=color;
            celda.innerHTML="";
        }
    }
}
function PintarCelda(x,y,color,jugador){
    //selecciona celda
    celda=document.getElementById("c"+x+y);
    //ponemos color
    celda.style.background=color;
    if(jugador==1){
        celda.innerHTML="<img src='img/cruz.png'></img>";
    }else {
        celda.innerHTML="<img src='img/circulo.png'></img>";
    }
}
El codigo de juego.js queda asi:

function comprobar(x,y,jugador){
    if(tablero[0][0]==jugador && tablero[0][1]==jugador && tablero[0][2]==jugador){
        gana=jugador;
    }
        if(tablero[1][0]==jugador && tablero[1][1]==jugador && tablero[1][2]==jugador){
        gana=jugador;
    }
        if(tablero[2][0]==jugador && tablero[2][1]==jugador && tablero[2][2]==jugador){
        gana=jugador;
    }
        if(tablero[0][0]==jugador && tablero[1][0]==jugador && tablero[2][0]==jugador){
        gana=jugador;
    }
        if(tablero[0][1]==jugador && tablero[1][1]==jugador && tablero[2][1]==jugador){
        gana=jugador;
    }
        if(tablero[0][2]==jugador && tablero[1][2]==jugador && tablero[2][2]==jugador){
        gana=jugador;
    }
        if(tablero[0][1]==jugador && tablero[1][1]==jugador && tablero[2][2]==jugador){
        gana=jugador;
    }
        if(tablero[0][2]==jugador && tablero[1][1]==jugador && tablero[2][0]==jugador){
        gana=jugador;
    }
    if(gana==1){
        //alert("Gana el jugador 1");
        mensaje(gana);
        fin=true;
    }else if(gana==2){
        //alert("Gana el jugador 2");
        mensaje(gana);
        fin=true;
    }else if(casillapte==0){
        fin=true;
        gana=0;
        mensaje(gana);
    }
}
function mensaje(gana){
    if(gana!=0){
        textoMensaje="Gana el jugador "+gana;
        Mensaje=document.getElementById("mensaje");
        Mensaje.style.display="block";
        Mensaje.innerHTML=textoMensaje;
        texto="Jugar Otra Vez";
        textoBoton=document.getElementById("boton");
        textoBoton.style.display="block";
        textoBoton.innerHTML=texto;
       
    }else{
                textoMensaje="Empate";
        Mensaje=document.getElementById("mensaje");
        Mensaje.style.display="block";
        Mensaje.innerHTML=textoMensaje;
        texto="Jugar Otra Vez";
        textoBoton=document.getElementById("boton");
        textoBoton.style.display="block";
        textoBoton.innerHTML=texto;
    }
}
function mensajeFin(){
            textoMensaje="Se acabo la partida";
        Mensaje=document.getElementById("mensaje");
        Mensaje.style.display="block";
        Mensaje.innerHTML=textoMensaje;
        Pausa();
}
function mensajeCasilla(){
            textoMensaje="Casilla ocupada";
        Mensaje=document.getElementById("mensaje");
        Mensaje.style.display="block";
        Mensaje.innerHTML=textoMensaje;
        Pausa();
}
function Pausa(){
    segundos=0;
    tiempo=setInterval(function(){
        while(segundos<2){
            segundos++;
        }
        if(segundos==2){
            Mensaje.style.display="none";
        }
    },2000);
}
El codigo de cronometro.js y estilo.css queda igual que estaba en video anterior.
Con este video acabo el tutorial para crear un juego sencillo de tablero como el Tres en Raya.
Si teneis alguna duda podeis contactar conmigo para aclararla.
Espero os sea util y no olvideis practicar. Gracias.