Diario de clase de los temas 2 y 3

Semana del 10 al 14 de Octubre

Vemos las etiquetas básicas de HTML:

Hacemos este ejemplo en clase:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>sin título</title>
<meta name="generator" content="Geany 1.27" />
</head>
<body>
	<h3>Menú</h3>
	<ul>
			<li>
				<a href="#otrascosas">
				Enlace a otras cosas
				</a>
			</li>
			<li>
				<a href="comollegar.html">
				Cómo llegar
				</a>
			</li>
			<li>Presentación</li>
			<li>
				<a href="http://google.es">
				Buscar en Google
				</a>
			</li>
			<li>
				<a href="https://www.iesvirgendelcarmen.com/moodle/course/view.php?id=190#TEMA2">
				Enlace al tema
				</a>
			</li>
	</ul>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<h3 id="otrascosas">Otras cosas</h3>
</body>

</html>

Semana del 17 al 20 de Octubre

Vemos:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<title>estructura HTML5</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Lobster');

h1 {
    font-size: small;
    text-shadow: #000000 10px 10px 10px;
}

p {
    font-family: 'Lobster', cursive;
}

body {
    text-align: left;
    background: url("https://static.pexels.com/photos/9574/pexels-photo.jpeg") black;
    opacity: 0.7;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100%;
}
</style>
</head>
<body>
<div class="container">
  <header class="jumbotron">
    <h1>Cabecera: header</h1>
  </header>
  <nav class="navbar navbar-default">
    <ul class="nav navbar-nav">
      <li><a href="#">Menú 1</a></li>
      <li><a href="#">Menú 2</a></li>
      <li><a href="#">Menú 3</a></li>
    </ul>
  </nav>
  <div class="row">
	<article class="col-md-8">
		<section class="well">
			Contenido de la página: 
			<strong>article &gt; section</strong>
		</section>
		<section class="well">
			Otra noticia y ya van dos.
		</section>
	</article>
	<aside class="col-md-4">
		<div class="well">
			Área de contenido destacado 
			y relacionado: <strong>aside</strong>
		</div>
	</aside>
  </div>
  <footer class="footer">
	  <div class="text-muted">
		Pie: <strong>footer</strong>. Aquí va el logo 
		y la información de la empresa
	  </div>
  </footer>
</div>
</body>
</html>

Semana del 24 al 28 de Octubre

Comenzamos el apartado de JavaScript. Usaremos esta Web como referencia: https://librosweb.es/libro/javascript/

Creamos un proyecto de aplicación JS:

js01/
├── css
├── fonts
├── img
├── index.html
├── js
│ └── index.js
└── snd

En la carpeta js, creamos el archivo index.js con el siguiente contenido:

function saludo(parametro) {
    document.write(parametro);
}

El fichero index.html lo dejamos como este:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Probando JS</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="js/index.js">
    </script>
</head>
<body>
    <h1> Hola Mundo JS </h1>
    <!-- Comentario HTML -->
    <script>
        /* Comentario JavaScript */
        var nombre = prompt("Dime tu nombre:")
        saludo(nombre + ", te haré reina de un jardín de rosas.");
    </script>
    <h2> Vamos a ver más ejemplos </h2>
    <script>
        document.write("OTRA PRUEBA");
    </script>
</body>
</html>

Semana del 31 de Octubre al 4 de Noviembre

Comenzamos a aprender la sintaxis de JS. Hacemos esta página-tutorial.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Probando JS</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="js/index.js">
    </script>
</head>

<body>
    <h1> Hola Mundo JS </h1>
    <!-- Comentario HTML -->
    <script>
        /* Comentario JavaScript */
        /* llamada bloqueante. JS es no bloqueante salvo esto */
        // var nombre = prompt("Dime tu nombre:")
        saludo(nombre + ", te haré reina de un jardín de rosas.");
    </script>
    <h2> Vamos a ver más ejemplos </h2>

    <script>
        // VARIABLES TIPO NÚMERO
        var numero = 2 + 3;
        document.write("<p>2+3=" + numero + " que es de tipo: " + typeof(numero) + "</p>");
        numero = 2.3 + 5.9;
        document.write("<p>2.3+5.9=" + numero + " que es de tipo: " + typeof(numero) + "</p>");
        numero = 2.3 + "5.9";
        document.write("<p>2.3+'5.9'=" + numero + " que es de tipo: " + typeof(numero) + "</p>");
        numero = 2.3 + +"5.9";
        document.write("<p>2.3+ +'5.9'=" + numero + " que es de tipo: " + typeof(numero) + "</p>");
        numero = 2.3 + -"5.9";
        document.write("<p>2.3+ -'5.9'=" + numero + " que es de tipo: " + typeof(numero) + "</p>");
        // VARIABLES TIPO CADENA DE CARACTERES
        var cadena = "Hola";
        cadena += " Mundo";
        // se pueden anidar unas comillas dobles dentro de simples y viceversa
        document.write('<p>cadena = "' + cadena + '", que es de tipo: ' + typeof(cadena) + '</p>');
        document.write("<p>cadena = '" + cadena + "', que es de tipo: " + typeof(cadena) + "</p>");
        document.write('<p>cadena = \'' + cadena + '\', que es de tipo: ' + typeof(cadena) + '</p>');
        var variable = numero + cadena;
        document.write('<p>variable= numero+cadena = \'' + variable + '\', que es de tipo: ' + typeof(variable) + '</p>');
        // BOOLEANOS verdadero/falso
        var booleano = true;
        document.write("<p>boolano= " + booleano + ", que es de tipo: " + typeof(booleano));
        booleano = "pepe";
        document.write("<p>boolano= " + booleano + ", que es de tipo: " + typeof(booleano));
    </script>


</body>

</html>

Semana del 7 al 11 de Noviembre

Continuamos el ejemplo de aplicación JS y vemos:

ARRAYS en JS: vamos desde 0 hasta tamaño-1
ARRAYs ASOCIATIVOS
OPERADORES INCREMENTO
OPERADORES LÓGICOS

El código:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Probando JS</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="js/index.js">
    </script>
</head>

<body>
    <h1> Hola Mundo JS </h1>
    <!-- Comentario HTML -->
    <script>
        /* Comentario JavaScript */
        /* llamada bloqueante. JS es no bloqueante salvo esto */
        // var nombre = prompt("Dime tu nombre:")
        // saludo(nombre + ", te haré reina de un jardín de rosas.");
    </script>
    <h2> Vamos a ver más ejemplos </h2>

    <script>
        // VARIABLES TIPO NÚMERO
        var numero = 2 + 3;
        document.write("<p>2+3=" + numero + " que es de tipo: " + typeof(numero) + "</p>");
        numero = 2.3 + 5.9;
        document.write("<p>2.3+5.9=" + numero + " que es de tipo: " + typeof(numero) + "</p>");
        numero = 2.3 + "5.9";
        document.write("<p>2.3+'5.9'=" + numero + " que es de tipo: " + typeof(numero) + "</p>");
        numero = 2.3 + +"5.9";
        document.write("<p>2.3+ +'5.9'=" + numero + " que es de tipo: " + typeof(numero) + "</p>");
        numero = 2.3 + -"5.9";
        document.write("<p>2.3+ -'5.9'=" + numero + " que es de tipo: " + typeof(numero) + "</p>");
        // VARIABLES TIPO CADENA DE CARACTERES
        var cadena = "Hola";
        cadena += " Mundo";
        // se pueden anidar unas comillas dobles dentro de simples y viceversa
        document.write('<p>cadena = "' + cadena + '", que es de tipo: ' + typeof(cadena) + '</p>');
        document.write("<p>cadena = '" + cadena + "', que es de tipo: " + typeof(cadena) + "</p>");
        document.write('<p>cadena = \'' + cadena + '\', que es de tipo: ' + typeof(cadena) + '</p>');
        var variable = numero + cadena;
        document.write('<p>variable= numero+cadena = \'' + variable + '\', que es de tipo: ' + typeof(variable) + '</p>');
        // BOOLEANOS verdadero/falso
        var booleano = true;
        document.write("<p>boolano= " + booleano + ", que es de tipo: " + typeof(booleano));
        booleano = "pepe";
        document.write("<p>boolano= " + booleano + ", que es de tipo: " + typeof(booleano));

        var dato = prompt('Dime un número: ')
        var tmp = +dato;
        document.write("<p>tmp= " + tmp + ", que es de tipo: " + typeof(tmp))
        if ((typeof(tmp) === 'number') && (!isNaN(tmp))) {
            document.write('<p>Eso <b>SI</b> es un número</p>')
        } else {
            document.write('<p>Eso <b>NO</b> era un número</p>')
        }

        // ARRAYS en JS: vamos desde 0 hasta tamaño-1
        var semana = ['Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab', 'Dom'];
        for (var i = 0; i <= 6; i++) {
            document.write('<br>Día ' + i + ': ' + semana[i]);
        }

        // ARRAYs ASOCIATIVOS
        var asignaturas = [];
        asignaturas['LMGSGI'] = 'Juangu';
        asignaturas['PROGRAMACION'] = 'Manolo';
        asignaturas['ENTORNOS'] = 'Jacinto';
        asignaturas['BBDD'] = 'Elvira';

        document.write('<br>PROG. la da: ' + asignaturas['PROGRAMACION']);
        document.write('<br> asignaturas[0] = ' + asignaturas[0]);

        // OPERADORES INCREMENTO
        var x = 0;
        document.write('<br>');
        document.write(++x);
        document.write('<br>');
        document.write(x);
        document.write('<br>');
        document.write(x++);
        document.write('<br>');
        document.write(x);

        // OPERADORES LÓGICOS
        var verdad = true;
        var falso = false;
        // Vamos a hacer la tabla del operador AND 
        /* ¡¡OJO!! Esta manera de generar HTML no es la 
        / correcta pero hasta que aprendamos la API DOM 
        de JavaScript y el método "appendChild()" */
        var cod_html = '';
        cod_html += '<table border="1px solid black">';
        // primera fila de la tabla
        cod_html += '<tr>';
        cod_html += '<th>A</th>';
        cod_html += '<th>B</th>';
        cod_html += '<th>A AND B</th>';
        cod_html += '</tr>';

        // segunda fila de la tabla
        cod_html += '<tr>';
        cod_html += '<td>' + (falso) + '</td>';
        cod_html += '<td>' + (falso) + '</td>';
        cod_html += '<td>' + (falso && falso) + '</td>';
        cod_html += '</tr>';

        // tercera fila de la tabla
        cod_html += '<tr>';
        cod_html += '<td>' + (falso) + '</td>';
        cod_html += '<td>' + (verdad) + '</td>';
        cod_html += '<td>' + (falso && verdad) + '</td>';
        cod_html += '</tr>';

        // cuarta fila de la tabla
        cod_html += '<tr>';
        cod_html += '<td>' + (verdad) + '</td>';
        cod_html += '<td>' + (falso) + '</td>';
        cod_html += '<td>' + (verdad && falso) + '</td>';
        cod_html += '</tr>';

        // quinta fila de la tabla
        cod_html += '<tr>';
        cod_html += '<td>' + (verdad) + '</td>';
        cod_html += '<td>' + (verdad) + '</td>';
        cod_html += '<td>' + (verdad && verdad) + '</td>';
        cod_html += '</tr>';

        // Cerramos la tabla
        cod_html += '</table>';

        document.write(cod_html);
    </script>


</body>

</html>

Semana del 14 al 17 de Noviembre

Operadores de comparación:

No es lo mismo el comparador estricto (=== ó !==) que el regular (== ó !=)
Cuidado con los cambios de tipo

// OPERADORES de COMPARACIÓN
var numero1 = 5;
var numero2 = '5';

document.write('numero1=5, numero2="5" ');

// COMPARACION REGULARES
var resultado = numero1 >= numero2;
document.write('<br>');
document.write('numero1 >= numero2 = ' + resultado);

resultado = numero1 <= numero2;
document.write('<br>');
document.write('numero1 <= numero2 = ' + resultado);

resultado = numero1 == numero2;
document.write('<br>');
document.write('numero1 == numero2 = ' + resultado);

resultado = numero1 != numero2;
document.write('<br>');
document.write('numero1 != numero2 = ' + resultado);

// COMPARACIÓN ESTRICTA 
var resultado = numero1 >= numero2;
document.write('<br>');
document.write('numero1 >= numero2 = ' + resultado);

resultado = numero1 <= numero2;
document.write('<br>');
document.write('numero1 <= numero2 = ' + resultado);

resultado = numero1 === numero2;
document.write('<br>');
document.write('numero1 === numero2 = ' + resultado);

resultado = numero1 !== numero2;
document.write('<br>');
document.write('numero1 !== numero2 = ' + resultado);

Conversiones de tipos de datos:

Usamos parseInt() y parseFloat()
Cuidado que no redondean, sólo truncan (cortan) el resultado.

// EJEMPLO DE CONVERSION: "PARSEINT"
numero2 = '5.2 enanitos de blancanieves';
document.write('<br>numero1=' + numero1 + ', numero2="' + numero2 + '" ');
resultado = numero1 === parseInt(numero2);
document.write('<br>');
document.write('Usando parseInt (sólo coge los primeros enteros que encuentra) <br>');
document.write('numero1 === parseInt(numero2) = ' + resultado);

resultado = numero1 !== parseInt(numero2);
document.write('<br>');
document.write('numero1 !== parseInt(numero2) = ' + resultado);


// ESTRUCTURAS DE CONTROL if
document.write("<h1>Estructura de control IF-ELSE</h1>");
var dato1 = parseInt(prompt('Dame un número:'));
var dato2 = parseInt(prompt('Dame otro número:'));

if (isNaN(dato1) || isNaN(dato2)) {
    document.write('Eso no era un número<br>');
} else {
    if (dato1 <= dato2) {
        document.write('El primero es menor o igual que el segundo<br>');
    } else
    if (dato1 >= dato2) {
        document.write('El primero es mayor o igual que el segundo<br>');
    } else {
        document.write('Ninguno de los casos<br>');
    }
}

Ejercicio: Cálculo de la letra del DNI. Haz un programa JavaScript que pregunte con un prompt() un número de DNI válido y el programa debe calcular la letra.

Recuerda que te explican cómo hacerlo en esta Web: http://www.interior.gob.es/web/servicios-al-ciudadano/dni/calculo-del-digito-de-control-del-nif-nie.

El array para el cálculo es: var letras = ['T', 'R', 'W', 'A', 'G', 'M', 'Y', 'F', 'P', 'D', 'X', 'B', 'N', 'J', 'Z', 'S', 'Q', 'V', 'H', 'L', 'C', 'K', 'E', 'T'];

// CASO PRACTICO: Cálculo letra DNI
var DNI = parseInt(prompt('Dime tu DNI sin letra'));

document.write("<h1>Cálculo de la letra del DNI</h1>");

if (isNaN(DNI)) {
    // No es un número
    document.write("Eso no es un número.");
} else {
    if (DNI < 1 || DNI > 99999999) {
        // Si es un número válido 1= Franco
        document.write("Eso no es un número de DNI válido");
    } else {
        // Es un número válido
        var letras = ['T', 'R', 'W', 'A', 'G', 'M', 'Y', 'F', 'P', 'D', 'X', 'B', 'N', 'J', 'Z', 'S', 'Q', 'V', 'H', 'L', 'C', 'K', 'E', 'T'];
        var letra = DNI % 23;
        document.write("<br>El DNI: " + DNI + " tiene la letra: " + letras[letra]);
    }
}

Estructuras de control en JavaScript

Bucle FOR:

Las estructuras if y if...else no son muy eficientes cuando se desea ejecutar de forma repetitiva una instrucción. Por ejemplo, si se quiere mostrar un mensaje cinco veces, se podría pensar en utilizar el siguiente if:

var veces = 0;

if(veces < 4) {
alert("Mensaje");
veces++;
}

La estructura for permite realizar este tipo de repeticiones (también llamadas bucles) de una forma muy sencilla. No obstante, su definición formal no es tan sencilla como la de if():

for(inicializacion; condicion; actualizacion) {
...
}

// ESTRUCTURAS DE CONTROL
// EJEMPLO DE BUCLE FOR

var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];

document.write('<h1> Los días de la semana (bucle FOR) </h1>');

document.write('<ol>');
for (var i = 0; i < 7; i++) {
    document.write("<li>" + dias[i] + "</li>");
}
document.write('</ol>');

La estructura while permite crear bucles que se ejecutan ninguna o más veces, dependiendo de la condición indicada. Su definición formal es:

while(condicion) {
...
}

// Un aleatorio entre 0 y 10
var dato = parseInt(Math.random() * 11);
var respuesta = parseInt(prompt('Adivina un número entre 0 y 10'));

while (dato !== respuesta) {
    if (dato > respuesta) {
        // dame un número mayor
        respuesta = parseInt(prompt('Dame uno más grande!'));
    } else {
        if (dato < respuesta) {
            // dame un número menor
            respuesta = parseInt(prompt('Más pequeño!'));
        } else {
            if (isNaN(respuesta)) {
                respuesta = parseInt(prompt('Eso no es un número!!!'));
            } else {
                // lo adivinaste!!!
            }
        }
    }
    if (respuesta === 666) break;
}
document.write('<p>Adivinaste el número: ' + dato + '</p>');

El bucle de tipo do...while es muy similar al bucle while, salvo que en este caso siempre se ejecutan las instrucciones del bucle al menos la primera vez. Su definición formal es:

do {
...
} while(condicion);

// ESTRUCTURA DE CONTROL do..while

var dato; // undefined

do {
    dato = prompt("Adivina en qué número estoy pensando..."); // prompt devuelve un string 
} while (dato != 8) // con != hace casting
// } while (dato !== 8) los dos tienen que ser del mismo tipo (dato es string y 8 es number)

Semana del 21 al 25 de Noviembre

Aprendemos DOM con esta Web: http://www.w3schools.com/js/js_htmldom.asp

y esta otra: https://librosweb.es/libro/javascript/capitulo_5/tipos_de_nodos.html

DUDA DE CLASE: Mapas para generar varios enlaces en la misma imagen. Ejemplo: Los vengadores.

Prácticas en clase: Nos conectamos al servidor FTP para subir nuestras prácticas.

Para ver nuestra Web accedemos así: https://alumnos.iesvirgendelcarmen.com/~alumno01/ (no olvides HTTPS ni la barra del final)

Semana del 28 de Noviembre al 4 de Diciembre

Seguimos la API DOM de Java con los manuales de librosWeb: https://librosweb.es/libro/javascript/capitulo_5.html

Nuestro objetivo es aprender a controlar el árbol DOM y, con peticiones AJAX, redibujar sólo partes de la página Web (ahorro tiempo y datos). Usamos AJAX para comunicarnos con el servidor, como puodemos leer en: http://www.w3schools.com/xml/ajax_intro.asp

<!DOCTYPE html>
<html>
<body>

<button type="button" onclick="inicio()">Inicio</button>
<button type="button" onclick="saluda()">Saluda</button>

<div id="demo">
<h1>The XMLHttpRequest Object</h1>

</div>

<script>
function inicio() {
  var texto = "<h1>The XMLHttpRequest Object</h1>";
  
  document.getElementById("demo").innerHTML =
      texto;    
}

function saluda() {
  var texto = "<h1> Intro a DOM </h1>";
  texto += "<p> Hola mundo JS DOM </p>";
  texto += "<p> etc... </p>";
  
  document.getElementById("demo").innerHTML =
      texto;    
}

</script>

</body>
</html>

Semana del 9 al 13 de Enero

Instalamos Intel XDK. Puedes ver una breve reseña en el blog del profesor.

Creamos el proyecto para nuestro juego "BattleShip":

Paso 1, crear la estructura básica de la aplicación (menú y paneles/layout):

Paso 2, añadimos los primeros contenidos a cada pantalla:

Semana del 16 al 20 de Enero

Añadimos componentes con Bower y comenzamos con las primeras líneas JS.

Paso 3, creamos las funciones auxiliares para el manejo de matrices.

Semana del 23 al 27 de Enero

Esta semana preparamos el algoritmo de colocar los barcos.

var barcos = [
{tam:2, letra:'f', nombre:'fragata'},
{tam:3, letra:'b', nombre:'buque'},
{tam:3, letra:'s', nombre:'submarino'},
{tam:4, letra:'d', nombre:'destructor'},
{tam:5, letra:'p', nombre:'portaaviones'},
];

Aquí tienes el pseudocódigo que tienes que pasar a JS:

FUNCION moneda() // Ya lo tenemos hecho
...

FUNCION dado() // Ya lo tenemos hecho
...

FUNCIÓN COLOCAR_BARCOS(
    tablero, // matriz
    array_barcos) // barco-> tam, letra 
INICIO
    REPITE DESDE i=0 HASTA ARRAY_BARCOS.tamano-1
    INICIO
        VAR BARCO= ARRAY_BARCOS[i]; 
        REPITE
        INICIO
            BOOLEAN libre = verdad
            VAR direccion = MONEDA() // 0 horizontal o 1 vertical
            SI (direccion==0) // => Horizontal
            INICIO
                x = DADO(0..tablero.TAM_X-1)
                y = DADO(0..[tablero.TAM_Y-BARCO.tamaño-1] 
                // si no le resto el tamaño del barco, me puedo salir del tablero
                PARA (VAR cont_Y = 0; cont_Y<BARCO.tamaño-1; cont_Y++)
                INICIO
                    SI (tablero[x,cont_Y+Y]!='a')
                        libre = falso;
                FIN    
                SI (libre) 
                INICIO
                    PARA (VAR cont_Y = 0; cont_Y<BARCO.tamaño-1; cont_Y++)
                    INICIO
                        tablero[x,cont_Y+Y]=BARCO.letra;
                    FIN    
                FIN            
            FIN
            SINO // dirección == 1 => Vertical
            INICIO
                x = DADO(0..tablero.TAM_X-BARCO.tam-1)
                y = DADO(0..tablero.TAM_Y)
                PARA (VAR cont_X = 0; cont_X<BARCO.tamaño-1; cont_X++)
                INICIO
                    SI (tablero[cont_X+X,Y]!='a')
                        libre = falso;
                FIN    
                PARA (VAR cont_X = 0; cont_X<BARCO.tamaño-1; cont_X++)
                INICIO
                    tablero[cont_X+x,y] = BARCO.letra;
                FIN
            FIN
        FIN
        MIENTRAS libre!=verdad
    FIN    
FIN

Guardando la configuración de la aplicación

Hoy vamos a almacenar en localStorage la información de la partida. Para eso necesitamos consultar estas páginas:

Vídeos de la sesión:

Semana del 30 de Enero al 3 de Febrero

Solución al ejercicio de clase:

function colocarBarcos(matriz){
    //Compruebo que haya más de ocho filas y que la primera fila(igual a las demás) sean más de 8 columnas.
    for (var i=0; i<barcos.length;i++){
        var barco = barcos[i];
        var libre;
        do { 
            // intento colocar el barco hasta 
            // que encuentro espacio libre para él
            libre=true;
            var direccion = moneda();
            if (direccion===0) { // horizontal 
                var fila = dado(matriz.length);
                var col = dado(matriz[fila].length-barco.tam);
                for (var j=0; j<barco.tam;j++){
                    if(matriz[fila][j+col]!='a') {
                        libre=false;
                    }
                }
                if (libre) {
                   for (var j=0; j<barco.tam;j++){
                        matriz[fila][j+col]=barco.letra;
                   }
                }
            } else { // vertical
                var fila = dado(matriz.length-barco.tam);
                var col = dado(matriz[fila].length);
                for (var j=0; j<barco.tam;j++){
                    if(matriz[j+fila][col]!='a') {
                        libre=false;
                    }
                }
                if (libre) {
                   for (var j=0; j<barco.tam;j++){
                        matriz[j+fila][col]=barco.letra;
                   }
                }
            }
        } while (!libre);
    }
    
}

Si no te funciona el proyecto, para seguir las clases esta semana puedes clonar el proyecto desde GitHub:

$ git clone https://github.com/juangualberto/BattleShipJS

CREACIÓN DEL TABLE PARA JUGAR

ALGORITMO GENERAR TABLERO
INICIO
VAR html = <TABLE>

PARA i=0; i<filas; i++
INICIO
html = html + <TR>

PARA j=0; j<columnas; j++
INICIO
html += <TD id="celda_i_j" class="vacio" onclick="disparo(celda_i_j)"> </TD>
FIN

html = html + </TR>
FIN

html = html + </TABLE>

ESCRIBE_HTML("caja_partida",html);

// $("#partida").html(html);
// document.getElementById("partida").innerHTML = html;
FIN

Semana del 6 al 10 de febrero

Creamos las clases para cada barco:

Modificamos la función disparo para cambiar la clase en cada clic:

function disparo(celda,i,j){
    // alert("Has disparado en la caja: "+celda+ "hay que mirar el tablero en la posición"+i+","+j);
    
    switch (tablero[i][j]){
        case 'a':
            tablero[i][j]='A';
            $('#'+celda).removeClass('vacio');
            $('#'+celda).addClass('agua');
            break;
        case 'b':
            tablero[i][j]='B';
            $('#'+celda).removeClass('vacio');
            $('#'+celda).addClass('buque');
            break;
        case 'd':
            tablero[i][j]='D';
            $('#'+celda).removeClass('vacio');
            $('#'+celda).addClass('destructor');
            break;
        case 'f':
            tablero[i][j]='F';
            $('#'+celda).removeClass('vacio');
            $('#'+celda).addClass('fragata');
            break;
        case 'p':
            tablero[i][j]='P';
            $('#'+celda).removeClass('vacio');
            $('#'+celda).addClass('portaaviones');
            break;
        case 's':
            tablero[i][j]='S';
            $('#'+celda).removeClass('vacio');
            $('#'+celda).addClass('submarino');
            break;
                            
        default:
    }
}

Con jQuery, generamos el tabalero:

Semana del 13 al 18 de febrero

Esta semana añadimos tiempo (cuenta atrás) y disparos limitados a nuestro juego.

Aprendemos que es un timer gracias a W3Schools.

Nos basamos en este ejemplo:

<!DOCTYPE html>
<html>
<body>

<p>A script on this page starts this clock:</p>

<p id="demo"></p>

<script>
var cuenta = 0;
var myVar = setInterval(funcionCallBack, 1000);

function funcionCallBack() {
    cuenta++;
    document.getElementById("demo").innerHTML = cuenta+" seg";
}
</script>

</body>
</html>

TAREA: Añadiendo tiempo al juego.

Fíjate en el código de arriba. Creamos un timer con la función setInterval(). Esta función llamará a la función callback (primer parámetro) cada 1000 milisegundos(segundo parámetro).

Para añadir tiempo a nuestro juego necesitaremos una variable "segundos" donde llevar la cuenta de los segundos que nos quedan.

Hay que crear la función callback a la que llame el timer cada 1000 ms que restará un segundo al tiempo cada vez que la llamamos. Si el tiempo llega a 0 hay que parar el timer con la función clearInterval().

Recuerda que puedes ver cómo se usan estas funciones en W3School.

var segundos;
var myTimer;


function crearPartida(){
    // crear una matriz de fil x col
    tablero = crearMatriz(filas,columnas);
    // rellenar la matriz "a"
    inicializaMatriz('a',tablero);
    colocarBarcos(tablero);
    generarTablerojQ();
    
    // PONEMOS LOS SEGUNDOS AL TIEMPO DE PARTIDA
    
    // ARRANCAMOS EL TIMER!!! -> con setInterval()
    
    
    // volcar la matriz a consola
    matriz2console(tablero);
}

function callbackTimer(){
    // actualizar el tiempo que queda
    
    // si el tiempo es <= 0 para el timer clearInterval() y acaba la partida
    
}

Controlando los disparos

Para controlar los disparos, necesitamos una variable global con el número de disparos total que tenemos por defecto. Cada vez que se dispare en una casilla que antes no lo hayamos hecho, se decrementan los disparos que me quedan.

¡Todo junto!

Ya que tenemos el tiempo y los disparos, ahora tenemos que crear una caja donde ver cómo van el tiempo y los disparos. Vamos a usar una caja de clase "row" (BootStrap) y dentro vamos a colocar tres cajas con el tiempo, un botón de pausa y los disparos que nos quedan.

El tiempo y los disparos los cargamos de localStorage. Si no existen los inicializamos por defecto.

Cargando la configuración del tiempo y disparos

Modificamos nuestra función de carga de configuración de la partida:

var segundos;
var myTimer;
var disparos;


$(document).ready(function(){
    //¿hay localStorage disponible? (almacenamos la conf. ahí)
    if (typeof(Storage) !== "undefined") {
        barcos = JSON.parse(localStorage.getItem("barcos"));
        
        if (barcos === null) {
            barcos = [
                {tam:2, letra:'f', nombre:'fragata'},
                {tam:3, letra:'b', nombre:'buque'},
                {tam:3, letra:'s', nombre:'submarino'},
                {tam:4, letra:'d', nombre:'destructor'},
                {tam:5, letra:'p', nombre:'portaaviones'},
            ];            localStorage.setItem("barcos",JSON.stringify(barcos));
        }
        
        filas = parseInt(localStorage.getItem("filas"));
        columnas = parseInt(localStorage.getItem("columnas"));
        
        if (isNaN(filas) || isNaN(columnas)) {
            filas = 8;
            columnas = 8;
            localStorage.setItem("filas",8);
            localStorage.setItem("columnas",8);
        }
        
        segundos = parseInt(localStorage.getItem("segundos"));
        if (isNaN(segundos)) {
            segundos = 100;
            localStorage.setItem("segundos",100);
        }
        
        disparos = parseInt(localStorage.getItem("disparos"));
        if (isNaN(disparos)) {
            disparos = 50;
            localStorage.setItem("disparos",50);
        }
        
        
        
    } else { 
        // NO hay localStorage, no podemos guardar 
        // conf. ni información de las partidas (puntuaciones)
        console.log("No tenemos LocalStorage");
    }
});

Semana del 20 al 24 de febrero

Esta semana vamos a ver cómo almacenar la información de marcadores de los jugadores.

Primero tenemos que modificar el fichero index.html pues tenemos que añadir nuevos paneles para mostrar el formulario para introducir los puntos y otro panel para mostrar el listado de puntuaciones.

<div class="pages">
		..... 
		<div class="panel" id="puntuaciones" data-title="Puntuaciones">
			Mejores puntuaciones
		</div>
		<div class="panel" id="formulario" data-title="Tus puntos">
			<div class="container">
			<form>
				  <div class="form-group">
					<label for="nombre">Nombre:</label>
					<input type="text" class="form-control" id="nombre">
				  </div>
				  <div class="form-group">
					<label for="puntos">Puntos:</label>
					<input type="text" class="form-control" id="puntos" disabled>
				  </div>
				  <div class="form-group">
					<label for="tiempo">Tiempo:</label>
					<input type="text" class="form-control" id="segundos" disabled>
				  </div>
				  <div class="btn btn-default" onclick="guardarPuntos()">Submit</div>
			</form>                
			</div>
		</div>
	</div>

Ahora añadimos las funciones para terminar la partida, guardar la información de la partida y listar los marcadores de todos los jugadores:

function terminarPartida(){
    // CALCULAR PUNTOS
    $("#puntos").val(aciertos*disparos*100+segundos*500);
    $("#segundos").val(segundos);
    // PARAR EL TIMER (porque no me queden disparos
    // o hayamos hundido todos los barcos)
    clearInterval(myTimer);
    
    // Mostrar el diálogo para guardar los puntos
    $.afui.clearHistory();
    $.afui.loadContent("#formulario",false,false,"up");
}

function guardarPuntos(){
    // Cargamos los marcadores de localStorage
    var marcadores = JSON.parse(localStorage.getItem("marcadores"));
    // Si no existe, lo inicializamos.
    if (marcadores === null) {
        marcadores = [];        
    }
    
    // Ejemplo de cómo leer de un formulario a JSON
    var puntuacion = {
        "nombre": $("#nombre").val(),
        "puntos": $("#puntos").val(),
        "tiempo": $("#segundos").val()
    };
    // Introducimos la puntuación en el array.
    marcadores.push(puntuacion);
    
    localStorage.setItem("marcadores",JSON.stringify(marcadores));
    
    mostrarPuntos();
}

function mostrarPuntos(){
    $("#puntuaciones").empty();
    // Cargamos los marcadores de localStorage
    var marcadores = JSON.parse(localStorage.getItem("marcadores"));
    // Si no existe, no hacemos nada.
    var tabla = $("<table border='1px solid black'/>");
    tabla.append("<tr><th>nombre</th><th>puntos</th><th>tiempo</th></tr>");
    if (marcadores !== null) {
        for (var jugador in marcadores) {
            var tr = $("<tr />");
            tr.append("<td>"+marcadores[jugador].nombre+"</td>");
            tr.append("<td>"+marcadores[jugador].puntos+"</td>");
            tr.append("<td>"+marcadores[jugador].tiempo+"</td>");
            tabla.append(tr);
        }
    }
    $("#puntuaciones").append(tabla);
    
    $.afui.clearHistory();
    $.afui.loadContent("#puntuaciones",false,false,"up");
}