Images cronograma primer periodo

Images Feb-22-2017

           Ventanas modal sencillas sin javascript

Aunque hay más formas de hacer modales sin necesidad de Javascript, quizá la más cómoda sea mediante el selector :target, un elemento muy olvidado pero muy útil. Gracias a él vamos a decirle a un ‹a› con un ancla en su href que el elemento al que está anclado y oculto se muestre al ejecutarse :target, es decir, que cuando pinchemos en el botón nos muestre la ventanita modal.

Código HTML:
/* El botón */
‹a href=”#modal” title=”” class=”btn”›Pincha aquí‹/a›
/* La modal */
‹div id=”modal”›
   ‹a href=”#cerrar”›‹/a›
   ‹div id=”modalContent”›
      ‹h1›Soy una ventana modal‹/h1›
      ‹p›Hecha sin JS ni jQuery, solo CSS3‹/p›
      ‹a href=”#cerrar”›X‹/a›
   ‹/div›
‹/div›


Código CSS:
/* Creamos unos estilos para el botón */
.btn{
   position:relative;
   padding:8px 16px;
   font-family:'psychotik';
   font-size:1.2em;
   font-weight:normal;
   color:#fff;
   text-shadow:none;
   border-radius:16px;
   background:#00A6B6;
   box-shadow:inset 2px 2px 1px #007f8b;
}
.btn:hover{
   background:#FF9C00;
   box-shadow:inset 2px 2px 1px #995f02;
}
/* Un bloque que ocupe toda la pantalla y contendrá nuestra modal... */
#modalContent{
   position:absolute;
   top:50%;
   left:50%;
   z-index:6;
   margin:-2% 0px 0px -150px;
   float:left;
   width:300px;
   color:#fff;
   line-height:22px;
   padding:15px;
   border-radius:5px;
   background:#00A6B6;
   border:1px solid #fff;
   box-shadow:0px 2px 1px #999;
}
/* ... los estilos de la ventana central ... */
#modal{
   position:fixed;
   top:0px;
   left:0px;
   z-index:5;
   float:left;
   width:100%;
   height:100%;
   background:rgba(0,0,0,0.2);
   display:none;
   opacity:0;
}
/* ... y un ‹a› transparente que ocupa todo el espacio para poder cerrar la modal desde cualquier punto */
#modal > a{
   position:fixed;
   top:0px;
   left:0px;
   z-index:1;
   float:left;
   width:100%;
   height:100%;
}
El elemento clave, le decimos que cualquier elemento susceptible de absorber esta propiedad, se muestre, o lo que es lo mismo, cuando pulsemos el botón, se ejecutará :target y nos mostrará la modal
:target{
   display:block!important;
   opacity:1!important;
}
/* Un botón de cerrar para no despistar al usuario */
#modalContent > a{
   position:absolute;
   top:-4px;
   right:-4px;
   color:#00A6B6;
   border-radius:2px;
   background:#fff;
   padding:4px;
}

sacado de: http://www.psychotik.net/ventanas-de-alerta-chulas-y-animadas-con-css3/#cerrar

Images 15-02-2017

                               inner.html

eventos--> el usuario"hace algo" el script responde a la accion generando un resultado

"event handlers"-->"manejadores de eventos"


objetos frecuentes usados:

Evento
onclick

Descripción
Pinchar y soltar el ratón

Evento
onfocus

Descripción
Seleccionar un elemento

Evento
onblur

Descripción
Deseleccionar el elemento


Evento

onkeypress

Descripción
Pulsar una tecla


Evento
onkeydown

Descripción
Pulsar una tecla (sin soltar)


<script type="text/javascript">
function sumar() {
var a= parseInt (document.getElementById("a").value);
var b= parseInt (document.getElementById("b").value);
document.getElementById("rta").value = a + b;
}
function resta() {
var a= parseInt (document.getElementById("a").value);
var b= parseInt (document.getElementById("b").value);
document.getElementById("rta").value = a - b;
}
function multi() {
var a= parseInt (document.getElementById("a").value);
var b= parseInt (document.getElementById("b").value);
document.getElementById("rta").value = a * b;
}

</script>


a: <input type="text" id="a"><br>
b: <input type="text" id="b"><br>
rta: <input type="text" id="rta"readonly><br>
<input type="button" value="sumar" onclick="sumar();">
<br>
<input type="button" value="resta" onclick="resta();">
<br>
<input type="button" value="multiplicacion" onclick="multi();">
<br>


</body>


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

Images 08-02-17

En la primera hora de informática el profesor la dio para la inscripción a sofia plus.

en la segunda hora se hizo investigación sobre funciones en javascript y se hizo una actividad que tenia como premio la habilidad 1:

Images 02-01-17

El profesor nos dio una charla de inicio de año y se trabajo un ejercicio con el código funcion:

En programación, una función es un grupo de instrucciones con un objetivo en particular y que se ejecuta al ser llamada desde otra función o procedimiento. Una función puede llamarse múltiples veces e incluso llamarse a sí misma (función recurrente).

Ejercicio de funcion:

<html>
<head><title>2017</head></title>
<body>
<script>
function sumar(){
var a= parseInt(prompt("a"));
var b= parseInt(prompt("b"));
alert(a+b);
} sumar();
</script>
</body>
</html>


http://www.alegsa.com.ar/Dic/funcion.php