Informática-María García : febrero 2017

domingo, 26 de febrero de 2017

[2017-22-02]

CLASE 04:

Se realizó evaluación correspondiente a la habilidad # 2, esta se basa en ejercicios de aplicación sobre inner HTML.

EVALUACIÓN:

<html>
<head>
<title>Ejercicio 2</title>
</head>

<script >

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

var rta= (a*19/100)
//document.getElementById("rta").value= a * 19/100 ;
document.getElementById("mirespuesta").innerHTML= a * 19/100 ;
}
</script>

<body>
<div id="mirespuesta"></div>
VALOR DEL PRODUCTO <input type="text" id="a"><br><hr><hr>
<input type="button" value="valor del iva" onclick="i();"><br>

</body>

</html>

Se explica el Tema sobre Ventanas Emergentes y Ventanas Modales:

VENTANA EMERGENTE O POP UP:

Llamar otra página y necesitan permisos del cliente.

Una ventana emergente (en inglés se le conoce como pop-up window) es una ventana del navegador de internet que:

Aparece automáticamente, sin ser solicitada.
Usualmente despliega publicidad
Dirige tráfico de Internet a ciertas páginas
Recopila direcciones de correo electrónico.

También existen ventanas emergentes que son parte de una página web.

Una nueva variante de las ventanas emergentes es que en lugar de que las ventanas aparezcan encima de las demás, aparecen por debajo de la ventana en la que está navegando el usuario, ocultando así qué página originó la ventana emergente.Se le conoce en inglés como pop-under (aparece por debajo).

Es posible abrirlas, cerrarlas y pasar datos de una ventana a otra.

TOMADO DE:

http://aprenderinternet.about.com/od/Glosario/g/Que-Es-Una-Ventana-Emergente.htm

CÓDIGO DE LA VENTANA EMERGENTE:

<html>

<head>

<title>emergente</title>

</head>

<body>

<a href="#"onclick='javascript:window.open

("pagina.html","_blank","width=800,height=1200,menubar=no,top=40,left=50")'>Abrir</a>

</body>

</html>

WINDOW.OPEN: Tiene 3 parámetros: " ", " ", " "

El primer parámetro es: Página o producto que se va a abrir o mostrar.
El Segundo parámetro es: Dónde se va abrir (self o blank)
El Tercer parámetro son: Las Propiedades (medidas (px) y menubar (yes o no)).

top y left: Esquina superior Izquierda.

NOTA: Las pantallas crecen de izquierda-a-derecha y arriba-hacia-bajo.

VENTANA MODAL:

Se divide en Dos el tamaño horizontal para que quede en la mitad de la página.

Una ventana modal es una ventana que se encuentra sobre todas las demás ventanas de la misma aplicación, hasta que se cierra o se abre otra ventana modal.

TOMADO DE:

http://digital.ni.com/public.nsf/allkb/7CCD41E4B665E196862573FC0076DC1F

display:none (Oculta Información)

Elementos básicos que se necesitan para realizar una ventana modal con HTML y Javascript.

Se necesita un contenedor, un espacio donde ubicar el contenido web que deseamos mostrar. Normalmente esto se hace con la etiqueta DIV. Este contenedor formará parte de la página web, pero no se mostrará cuando se visualice la página: será un elemento invisible. Luego necesitamos alguna manera de mostrar el contenedor, y su contenido, cuando nos haga falta.Por último, necesitaremos también alguna forma de ocultar el contenedor.

Al final de la sección body de la página web el siguiente código:

<div id=”miVentana” style=”position: fixed; width: 350px; height: 190px; top: 0; left: 0; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; border: #333333 3px solid; background-color: #FAFAFA; color: #000000; display:none;”>
Aquí se coloca el contenido web
</div>

Atributos más importantes del DIV son:

id: el identificador del elemento, que nos permitirá recuperarlo y acceder a él a través del DOM.
display: le indicamos al navegador que no muestre este elemento (none).

TOMADO DE:
http://www.hinojosachapel.com/2008/11/como-hacer-una-simple-ventana-modal-con-html-y-javascript.aspx#.WLNtGtLhDcs

domingo, 19 de febrero de 2017

[2017-15-02]

CLASE 03:

EVENTOS JAVASCRIPT:

Las aplicaciones web creadas con el lenguaje JavaScript pueden utilizar el modelo de programación basada en eventos. Los eventos hacen posible que los usuarios transmitan información a los programas.

Los scripts se dedican a esperar a que el usuario "haga algo" (que pulse una tecla, que mueva el ratón, que cierre la ventana del navegador), el script responde a la acción del usuario normalmente procesando esa información y generando un resultado.

TOMADO DE: http://librosweb.es/libro/javascript/capitulo_6.html

Eventos: Condicionados a cualquier clase de objetos (Botón, Cajas de Texto).

<body>: Es un objeto que contiene todos los objetos. Es el Contenedor más grande.

TIPOS DE EVENTOS

El nombre de cada evento se construye mediante el prefijo on, seguido del nombre en inglés de la acción asociada al evento.

onblur: Deseleccionar el elemento.

Elementos para los que está definido:

onchange : Deseleccionar un elemento que se ha modificado.

· <input>, <select>, <textarea>

onclick: Pinchar y soltar el ratón.

· Todos los elementos

ondblclick: Pinchar dos veces seguidas con el ratón.

· Todos los elementos

onfocus: Seleccionar un elemento.

· <button>, <input>, <label>, <select>, <textarea>, <body>

onkeydown: Pulsar una tecla (sin soltar).

· Elementos de formulario y <body>

onkeypress: Pulsar una tecla.

· Elementos de formulario y <body>

onkeyup: Soltar una tecla pulsada.

· Elementos de formulario y <body>

onload: La página se ha cargado completamente.

· <body>

onmousedown: Pulsar (sin soltar) un botón del ratón.

· Todos los elementos

onmousemove: Mover el ratón.

· Todos los elementos

onmouseout : El ratón "sale" del elemento (pasa por encima de otro elemento).

· Todos los elementos

onmouseover: El ratón "entra" en el elemento (pasa por encima del elemento).

· Todos los elementos

onmouseup: Soltar el botón que estaba pulsado en el ratón.

· Todos los elementos

onreset: Inicializar el formulario (borrar todos sus datos).

· <form>

onresize: Se ha modificado el tamaño de la ventana del navegador.

· <body>

onselect: Seleccionar un texto .

· <input>, <textarea>

onsubmit: Enviar el formulario.

· <form>

onunload: Se abandona la página (por ejemplo al cerrar el navegador).

· <body>

TOMADO DE:

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

document.getElementById

Permite obtener la referencia a un elemento de la página mediante el id de dicho elemento (Llama por medio del id a un elemento).

Por ejemplo, si tenemos una imagen representada por el siguiente código HTML:

<img src="foto.jpg" id="mifoto"/>

Podríamos obtener una referencia a dicha imagen mediante el siguiente código JavaScript:

<script type="text/javascript">

foto=document.getElementById("mifoto")

</script>

Una vez obtenida la referencia al elemento, podemos acceder a todas sus propiedades, ya sea para lectura o escritura.

TOMADO DE: http://lineadecodigo.com/javascript/documentgetelementbyid/

EJERCICIO DE CLASE:

Se realiza un ejercicio javascript donde se coloca en práctica lo explicado por el Docente como lo es la función document.getElementById y poder modificar texto en cualquier posición del sitio web.

Se tiene dos cajas de texto donde se introducen dos valores y se tienen tres botones que al oprimirlos darán sus respectivos resultados de acuerdo a las operaciones asignadas a cada uno de ellos.

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>";

}

</script>

<body>

<hr>

<hr>

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

<hr>

</body>

jueves, 9 de febrero de 2017

[2017-08-02]

CLASE 02:

En esta Clase el Docente parte de una dinámica, la cual consiste en enviar un correo y que en este se encuentre el enlace de lo requerido por parte del profesor. Esta se realiza en grupos y hace parte de la Nota de la Primera Habilidad del Bimestre.

Se realiza en el transcurso de la clase la inscripción al SENA y se llenan algunos formularios.

El enlace que correspondió al Grupo #5 fue el de buscar en Google Maps o Street View la ubicación del Supermercado Éxito de la Rosita, Bucaramanga, Santander, Colombia.

https://www.google.com/maps/place/exito+la+rosita/@7.1132565,-73.1231993,3a,75y,331.88h,90.89t/data=!3m7!1e1!3m5!1smybc8AOIYzg3X-gPdauGxw!2e0!6s%2F%2Fgeo1.ggpht.com%2Fcbk%3Fpanoid%3Dmybc8AOIYzg3X-gPdauGxw%26output%3Dthumbnail%26cb_client%3Dsearch.TACTILE.gps%26thumb%3D2%26w%3D392%26h%3D106%26yaw%3D14.507466%26pitch%3D0%26thumbfov%3D100!7i13312!8i6656!4m5!3m4!1s0x8e683fda7fff9d91:0x42d0d4bda2232d61!8m2!3d7.1133802!4d-73.1231547!6m1!1e1?hl=es

Se consulta en clase sobre las funciones de Javascript y funciones para arrays.

Algunas de las funciones más útiles para el manejo de arrays son:

Length: calcula el número de elementos de un array.

var vocales = ["a", "e", "i", "o", "u"];

var numeroVocales = vocales.length; // numeroVocales = 5

concat(), se emplea para concatenar los elementos de varios arrays.

var array1 = [1, 2, 3];

array2 = array1.concat(4, 5, 6); // array2 = [1, 2, 3, 4, 5, 6]

array3 = array1.concat([4, 5, 6]); // array3 = [1, 2, 3, 4, 5, 6]

join(separador), es la función contraria a split(). Une todos los elementos de un array para formar una cadena de texto. Para unir los elementos se utiliza el carácter separador indicado

var array = ["hola", "mundo"];

var mensaje = array.join(""); // mensaje = "holamundo"

mensaje = array.join(" "); // mensaje = "hola mundo"

pop(), elimina el último elemento del array y lo devuelve. El array original se modifica y su longitud disminuye en 1 elemento.

var array = [1, 2, 3];

var ultimo = array.pop();

// ahora array = [1, 2], ultimo = 3

push(), añade un elemento al final del array. El array original se modifica y aumenta su longitud en 1 elemento. (También es posible añadir más de un elemento a la vez)

var array = [1, 2, 3];

array.push(4);

// ahora array = [1, 2, 3, 4]

shift(), elimina el primer elemento del array y lo devuelve. El array original se ve modificado y su longitud disminuye en 1 elemento.

var array = [1, 2, 3];

var primero = array.shift();

// ahora array = [2, 3], primero = 1

unshift(), añade un elemento al principio del array. El array original se modifica y aumenta su longitud en 1 elemento. (También es posible añadir más de un elemento a la vez)

var array = [1, 2, 3];

array.unshift(0);

// ahora array = [0, 1, 2, 3]

reverse(), modifica un array colocando sus elementos en el orden inverso a su posición original:

var array = [1, 2, 3];

array.reverse();

// ahora array = [3, 2, 1]

TOMADO DE:
http://librosweb.es/libro/javascript/capitulo_3/funciones_y_propiedades_basicas_de_javascript.html

jueves, 2 de febrero de 2017

[2017-01-02]

CLASE 01:

INICIO AÑO ESCOLAR 2017

El Docente da pautas que se tendrán en cuenta en la materia y cada clase, inducción sobre los temas que se trabajaran y se aclaran algunas dudas.

Socializan el Cronograma correspondiente al Primer Bimestre del correspondiente Año Escolar (2017):

Pautas:

Indispensable el manejo de USB, cada estudiante debe tener su respectiva memoria.

Los refuerzos solo serán el día Lunes.

Se trabajara por grupos en algunas ocasiones pero en los exámenes el docente escogerá los grupos de trabajo.

Se manejarán nubes que el Docente compartirá vía Gmail y es necesario que el estudiante tenga una cuenta de correo.

La información como hojas impresas son individuales y para que se le permita el uso al estudiante de estas es necesario que las personalice.

No está permitido el uso de celulares o aparatos electrónicos si el docente no ha solicitado su uso.

Es importante que el estudiante se muestre interesado por la asignatura. Las vías de comunicación entre estudiante y docente es mediante el correo o en las horas que corresponden a la jornada escolar.

Haga saber sus dudas para así facilitar el aprendizaje del tema correspondiente.

Es importante que el estudiante durante toda la semana en jornada escolar porte bien su uniforme, tanto de diario como de Educación física y las niñas también se les tendrá en cuenta el cabello recogido.

FUNCIONES EN JAVASCRIPT:

Se utiliza el function al cual se le designa el nombre de la función, el programador decide que nombre tendrá la función.

Las funciones son uno de los pilares fundamentales en JavaScript. Una función es un procedimiento JavaScript—un conjunto de sentencias que realizan una tarea o calculan un valor. Para usar una función, debe definirla en algún lugar del ámbito desde el cual desea llamarla.

Estructura:

La definición de una función (también llamada declaración de función o sentencia de función) consiste de la palabra clave (reservada) function, seguida por:

El nombre de la función (opcional).

Una lista de argumentos para la función, encerrados entre paréntesis y separados por comas (,).

Las sentencias JavaScript que definen la función, encerradas por llaves, { }.

function + nombre de la función () {

}

TOMADO DE:

https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Funciones

EJEMPLO- PRÁCTICA DE CLASE:

<html>

<head>

</head>

function sumar(){

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

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

alert(a+b);

}

</script>

<body>

<input type="button"

onclick="sumar()" value="oprima">

</body>

</html>