Febrero 22 del 2017

El día de hoy vimos las ventanas emergentes o popup y las ventanas modales y sus diferencias.

Las ventanas emergentes o popup son ventanas que aparecen automáticamente sin nuestro permiso, el código usado en javascript es el siguiente:

    window.open("http://url.com" , "_blank o _self" , "width, menubar, height, top, left")

Como se puede ver, el código cuenta con 3 argumentos separados por colores distintos, el primero y el segundo son obligatorios, mientras que el tercero es opcional. También se puede utilizar window.close en lugar de window.open, el cual, evidentemente cierra la ventana.



Las ventanas modal, en cambio, aparece en la página y no deja al usuario manipular la página, ni dar click en otros lugares de la página hasta que el usuario de click para cerrar el modal.

Para hacer una ventana modal, requiere un código un poco más complejo comparado con la ventana emergente en el que se además de utilizar javascript, también se utiliza un poco de CSS.

A continuación un ejemplo en javascript, en donde dependiendo del número que se digite (del 1 al 4) abre un popup con target _blank o _self, con dirección a diferentes URL.

<!DOCTYPE html>
<html>
<head>
<title>ejemplopopup</title>

    <script>

var y = parseInt(prompt("Digite un numero del 1 al 4"));

if (y == 1){window.open("https://www.google.com", "_blank", "width=300 height=300 top=50 left=50");}
if (y == 2){window.open("http://www.vanguardia.com/" , "_self");}
if (y == 3){window.open("http://coldivinoamor.edu.co/" , "_blank");}
if (y == 4){window.open("http://www.eltiempo.com/" , "_self");}

    </script>

</head>
<body>

</body>

</html>

A CONTINUACIÓN, EL CRONOGRAMA DEL PRIMER PERIODO DEL GRADO DÉCIMO:

Read more

Febrero 15 del 2017

En los primeros 10 minutos de la clase de hoy, se dió un tiempo para inscribirse en el curso de ingles del sena.

Después, se enseñaron lo que eran los eventos en javascript y algunos de ellos, como por ejemplo:

-> onclick: al oprimir y soltar el ratón.

-> ondblclick: oprimir el ratón dos veces seguidas.

-> onfocus: es cuando el puntero está activo en algún objeto, tiene el foco en algún objeto.

-> onblur: es cuando un objeto pierde el foco, es decir, es quien tuvo antes el foco.

-> onkeypress: al oprimir una tecla.

-> onkeyup: soltar una tecla pulsada.

-> onkeydown: pulsar una tecla (sin soltar).

-> onload: es cuando una página se ha cargado completamente, por ejemplo, lo que pasa al oprimir F5.

Así como esos eventos, hay otros más, ver esta url:

http://librosweb.es/libro/javascript/capitulo_6/modelo_basico_de_eventos_2.html

Después, seguimos con las funciones, y se realizó el siguiente ejercicio:

<script>

function s(){
var a = parseInt(document.getElementById("a").value);
var b = parseInt(document.getElementById("b").value);
//alert ( a + b);
//document.write( a + b);
var rta = a + b;
document.getElementById("rta").value = rta;
document.getElementById("holita").innerHTML = "<marquee><b><font color='#ff0000'>" + "Esto es el resultado de mi suma = " + (a + b ) + "</font></b></marquee>";
}
function r(){
var a = parseInt(document.getElementById("a").value);
var b = parseInt(document.getElementById("b").value);
//alert ( a + b);
//document.write( a + b);
document.getElementById("rta").value = a - b;
document.getElementById("holita").innerHTML = "<marquee><b><font color='#ff0000'>" + "Esto es el resultado de mi resta = " + (a - b ) + "</font></b></marquee>";
}

function m(){
    var a = parseInt(document.getElementById("a").value);
    var b = parseInt(document.getElementById("b").value);

    document.getElementById("rta").value= a * b;
    document.getElementById("holita").innerHTML = "<marquee><b><font color='#ff0000'>" + "Esto es el resultado de mi multiplicacion = " + (a*b) + "</font></b></marquee>";
}

</script>
<body>


<label>A:</label> <input type="text" id="a" autocomplete="off"><br>
B: <input type="text" id="b"><br>

Rta: <input type="text" id="rta" readonly ><hr>

&nbsp;&nbsp;<input type="button" value="Sumar" onclick="s();" >&nbsp;&nbsp;
<input type="button" value="Restar" onclick="r();">&nbsp;&nbsp;
<input type="button" value="Multiplicar" onclick="m();">

<hr>
<div id="holita">esto es mi mensaje</div>
<hr>


</body>

En este ejercicio, se utilizó document.getElementById, para que este funcione, se necesita asignar una ID en algún elemento del código, después, lo que hará es tomar la id y así se podrá manipular, por ejemplo, se puede cambiar y asignar un nuevo valor para el elemento.

Read more

Febrero 9 del 2017

El día de hoy, en la primera hora que tuvimos, se hizo una inducción por parte del SENA a nosotros los estudiantes, debíamos registrarnos y confirmar si podíamos entrar a la página del SENA.

En la segunda hora, continuamos con las funciones en javascript y empezamos a ver los arrays, además se hizo un "concurso" en donde habían varios grupos, y el objetivo era que un integrante de cada grupo envíe un e-mail al profesor con las pautas que él colocó.

Se hicieron varias rondas, mi equipo y yo ganamos en una de ellas, en la que debíamos enviar al profesor la URL de una calle que él dijo, por ganar se nos dió la primera habilidad en 100.

ARRAYS:

Los arrays son usados extensamente por los programadores para contener listas de datos en la memoria, por ejemplo, los datos almacenados en un disco suelen leerse y ponerse dentro de un array con el objetivo de facilitar la manipulación de dichos datos, ya que los datos en memoria pueden ser modificados, clasificados, marcados para su eliminacion, etc. para luego ser reescritos al disco. Otro ejemplo podría ser el de un menú de opciones que se desplegarán dentro de una ventana para que el usuario pueda elegir una de éstas, en tales casos y cuando las opciones son numerosas, solamente se ponen unas cuantas de ellas dentro de la ventana pero se le da al usuario la oportunidad de poder subir y bajar a su antojo para ver el resto de opciones que, aunque no se vean en la ventana, forman parte del menú o array de opciones.

Tomado de: https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_C%2B%2B/Arrays_y_cadenas_de_texto


EJEMPLO FUNCIÓN:

<html>
   <head> 
  <title>Funciones</title>
   </head>

 <body>
    <script>

   function saludo(nombre){document.write("Hola " + nombre);}    

          saludo("Nicolas");

   document.write( "<hr/>" );   
     var suma = function(numero1, numero2){var numero1 = numero1;
                                           var numero2 = numero2;
     return numero1 + numero2;}

     document.write(suma(623,165));  
     document.write( "<br>" );
     document.write(suma(6159,41));
    
     document.write("<hr/>")

    function numeroMaximo(valor1, valor2)
      {if ( valor1 > valor2 )
           {return valor1;}
       else {return valor2;}}   
      
      document.write("El numero maximo es: " + numeroMaximo(62,26));
    </script> 
    
 </body>

</html>




Read more

Febrero 2 del 2017

Comienzo del nuevo año escolar.

Se inició el nuevo año escolar 2017, entré a décimo grado.

El día de hoy se dió una introducción sobre cambios en la metodología de trabajo, se utilizarán 2 salas de informática más, y comenzamos a ver funciones en javascript.

Funciones:

Cuando se desarrolla una aplicación compleja, se usan las funciones para repetirlas un número ilimitado de veces.

Supongamos que tenemos un código sobre un ciclo if, entonces una vez utilizado el ciclo, si lo queremos volver a usar hay que escribir de nuevo el mismo código, y así el número de veces que se quiera utilizar; pero hay una manera para ahorrarnos eso, las funciones.

Si se necesita repetir varias veces ese ciclo if, lo podemos poner dentro de una función, así, no es necesario escribir el mismo código varias veces sino que simplemente hay que llamar a la función.

Una función es un conjunto de instrucciones que se agrupan para realizar una tarea concreta y que se pueden reutilizar fácilmente.

A continuación, un código con un ejemplo de una función en la que se piden dos números, después estos números son sumados.

___________________________________________________________________________________

<!DOCTYPE html>

<html>

<head>

        <meta charset="UTF-8">

<title>Function</title>

</head>

<script>

function sumar()

{var a = parseInt(prompt("a"));

 var b = parseInt(prompt("a"));

 alert(a + b);}

</script>

<body>

<input type="button" onclick="javascript:sumar()" value="oprimir">

</body>

</html>

Read more

Noviembre 8 del 2016

Este fue el último día de clases, pasé la materia de informática, y los que no deben ir a nivelar nada ya entran a vacaciones. 

Read more

Noviembre 1 del 2016

PROYECTO:

El día de hoy se entregó el proyecto,  que consistía en simular un sitio web con base a un template gratis, el tema del sitio web era sobre personajes animados, en mi caso me correspondió Jimmy Neutrón.

El proyecto debía ser entregado en un CD y tener varios módulos, estos son:

-Módulo principal

-Módulo de personajes
                       -(OPCIONAL) al dar click sobre la imagen del personaje dirigirse a otra                                    página con la información de este.

-Módulo de derechos(En este debe ir los nombres y apellidos, con una imagen del estudiante indicando porque le gusta el tema seleccionado.

A continuación, algunos ejercicios en JavaScript

Ciclo flor y ciclo while:

<html>
 <head>
   <title>Ciclo for</title>
 </head>

<body>
    <script>
      
      var dias = ["Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sabado", "Domingo"]; 
      
       for( i = 0; i <= dias.length - 1; i = i + 1)
       {document.write(dias[i] + "<br>");}

     </script>
  <hr/>
      <script>
       var dias = ["Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sabado", "Domingo"];      
       
       var numerodias = dias.length -1;
       var i = 0;
       while (i<=numerodias){document.write( dias[i] + "<br>"); i=i+1;}

    </script>
</body>

</html>

Otro ejercicio con condicionales:

<html>
     <head>
        <title>Condicionales</title>
     </head>
<body>
  <script>
   
   var nombre = "Nicola", edad = 15;
   
   if( nombre == "Nicolas" )
   {document.write("Bienvenido " + nombre);}
   
   else if(nombre == "Carlos")
   {document.write("Bienvenido " + nombre);}
   
   else{document.write("Bienvenido anonimo");}


   if (edad >= 18 || nombre == "Carlos"){document.write("Bienvenido, se te ha permitido ingresar");}
   
   else if (nombre == "Nicolas"){document.write("Bienvenido " + nombre);}
   
   else {document.write("No estas permitido a ingresar");}



  </script>

</body>

</html>

                    

Read more

Octubre 25 del 2016

El día de hoy se hizo la introducción al proyecto, explicando en qué consiste y se dió las pautas para el mismo, además, se explicaron las bases para comenzar a realizarlo. 

El proyecto consiste en crear una página web sobre una caricatura, la página web es un template descargado de internet, pero se personaliza de acuerdo al personaje, en mi caso, es Jimmy Neutrón.

¿Que es un template?

Un template es un conjunto de archivos que determinan la estructura y el aspecto visual de un sitio web, y tiene como ventaja principal disminuir tiempos y costos de desarrollo.

Un template es la solución ideal para muchos sitios web institucionales, ya que permiten resolver el aspecto gráfico del sitio en forma rápida y eficiente. Por supuesto que dependerá de cada empresa comprar un template o elegir

Elementos de un template

-Regiones: Son las áreas donde van los bloques de contenido.

-Gama de colores: Por lo general se utilizan entre dos y tres colores principales que hacen a la estética del sitio.

-Tipografías: Un template contempla los tamaños que deberían tener las tipografías, como así también el tipo de fuente a utilizar a lo largo de todo el sitio.

-Menúes de navegación: Por lo general se contempla un menú principal y uno secundario. Es importante que el diseño del menú principal esté cuidadosamente diseñado.

-Botones: Los botones son fundamentales en el sentido que los entendamos como verdaderos call to action.

-Formularios: En todo sitio web hay al menos un formulario de contacto que tiene elementos como las etiquetas (labels) y los cuadros de texto (form-text).

Tomado de: http://www.glidea.com.ar/blog/que-es-un-template

A continuación, algunos ejercicios en JavaScript:

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<script>

var a = parseFloat(prompt("Ingrese el primer numero, en caso de resta o division este es el numero al que se restara o dividira"));

var b = parseFloat(prompt("Ingrese el segundo numero"));

var multiplicacion = a * b

var div = a / b

var suma = a + b

var resta = a - b

document.write("suma="+suma + "<br>" + "resta="+resta + "<br>" + "multiplicacion="+multiplicacion + "<br>" + "division=" + division)

</script>

</body>

</html>

________________________________________________________________________

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Fahrenheit a Celcius</title>

</head>

<body>

<script>

var fahrenheit = parseFloat(prompt("Ingrese el valor en fahrenheit"));

var celcius = (fahrenheit - 32)*5/9;

if (fahrenheit <=  100000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000)

   {alert(celcius);}

else{alert("Error, debe digitar un número.")}

</script>

</body>

</html>

Read more