martes, 20 de junio de 2017

Curso básico de programación

En la página platzi.com disponemos de un curso gratuito de programación básica.

El curso nos ha gustado, está bastante bien. Aquí vamos a incluir algunos de los códigos que se ven en el curso, y también algunas soluciones a los ejercicios propuestos, así como variantes propias.

ATOM

Nos recomiendan como editor de código usar ATOM.



Ruta

Podemos ver la ruta o url de la página en la que estamos.


 var ruta = window.location;  
 console.log(ruta);  
 document.write("Estás en: " + ruta);  

Canvas

Primero veamos cómo hace un par de líneas, una horizontal y otra vertical en el lienzo.

Código del fichero dibujo0.html

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8" />  
   <title>Dibujando con canvas</title>  
  </head>  
  <body>  
   <h1>Dibujo en canvas</h1>  
   <canvas width="300" height="300" id="dibujito"></canvas>  
   <p>Asi queda tu dibujo.</p>  
   <script src="dibujo0.js"></script>  
  </body>  
 </html>  

Código del fichero dibujo0.js

 var d = document.getElementById("dibujito");  
 var lienzo = d.getContext("2d");  
 dibujarLinea("blue", 1,1,1,299);   //dibuja una lína vertical  
 dibujarLinea("blue", 1,299,299,299); //dibuja una línea horizontal  
 function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal)  
 {  
  lienzo.beginPath();  
  lienzo.strokeStyle = color;  
  lienzo.moveTo(xinicial, yinicial);  
  lienzo.lineTo(xfinal, yfinal);  
  lienzo.stroke();  
  lienzo.closePath();  
 }  

El resultado visual es el siguiente.


Canvas con bucle

Ahora vamos a crear una malla haciendo líneas reiteradamente con la ayuda de un bucle FOR.

Código del fichero dibujo1.html

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8" />  
   <title>Dibujando con canvas</title>  
  </head>  
  <body>  
   <h1>Dibujo en canvas</h1>  
   <canvas width="300" height="300" id="dibujito"></canvas>  
   <p>Asi queda tu dibujo.</p>  
   <script src="dibujo1.js"></script>  
  </body>  
 </html>  

Código del fichero dibujo1.js

 var d = document.getElementById("dibujito");  
 var lienzo = d.getContext("2d");  
 var lineas=30;  
 var yi, xf;  
 var colorcito="blue";  
 for (l=0; l<lineas; l++)  
 {  
  yi=10*l;  
  xf=10*l+10;  
  dibujarLinea(colorcito,0,yi,xf,300);  
 }  
 dibujarLinea("blue", 1,1,1,299);   //dibuja una lína vertical  
 dibujarLinea("blue", 1,299,299,299); //dibuja una línea horizontal  
 function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal)  
 {  
  lienzo.beginPath();  
  lienzo.strokeStyle = color;  
  lienzo.moveTo(xinicial, yinicial);  
  lienzo.lineTo(xfinal, yfinal);  
  lienzo.stroke();  
  lienzo.closePath();  
 }  

El resultado visual es el siguiente.


Canvas con botón

Código del fichero dibujo2.html

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8" />  
   <title>Dibujando con canvas</title>  
  </head>  
  <body>  
   <h1>Dibujo en canvas</h1>  
   <p>  
    Cuantas lineas quieres  
    <input type="text" id="texto_lineas" />  
    <input type="button" value="A darle!" id="botoncito" />  
   </p>  
   <canvas width="300" height="300" id="dibujito"></canvas>  
   <p>Asi queda tu dibujo</p>  
   <script src="dibujo2.js"></script>  
  </body>  
 </html>  

Código del fichero dibujo2.js

 var texto = document.getElementById("texto_lineas");  
 var boton = document.getElementById("botoncito");  
 boton.addEventListener("click", dibujoPorClick );  
 var d = document.getElementById("dibujito");  
 var ancho = d.width;  
 var lienzo = d.getContext("2d");  
 function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal)  
 {  
  lienzo.beginPath();  
  lienzo.strokeStyle = color;  
  lienzo.moveTo(xinicial, yinicial);  
  lienzo.lineTo(xfinal, yfinal);  
  lienzo.stroke();  
  lienzo.closePath();  
 }  
 function dibujoPorClick()  
 {  
  var lineas = parseInt(texto.value);  
  var l = 0;  
  var yi, xf;  
  var colorcito = "#FAA";  
  var espacio = ancho / lineas;  
  for(l = 0; l < lineas; l++)  
  {  
   yi = espacio * l;  
   xf = espacio * (l + 1);  
   dibujarLinea(colorcito, 0, yi, xf, 300);  
   console.log("Linea " + l);  
  }  
  dibujarLinea(colorcito, 1,1,1,299);  
  dibujarLinea(colorcito, 1,299,299,299);  
 }  


El resultado visual para 50 líneas es el siguiente.


1 comentario:

  1. hola. me pueden decir como se llama la figura que se forma, recuerdo que tenia un nombre tipo "tiengulo de algo
    "

    ResponderEliminar