Manual JQuery

Agregar:

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

</script>

DEBEMOS METER TODO LO DE JQUERY DENTRO DE:

Opcion 1:
$(document).ready(function(){

   // jQuery methods go here...

});


Opcion 2:
$(function(){

   // jQuery methods go here...

})

SELECTORES:

$("p") ---> Selecciona todos los elementos "p" de la pagina

$("#test") ---> Selecciona por id

$(".test") ---> Selecciona por clase (<d class="test" >)


ARCHIVO APARTE

<script src="my_jquery_functions.js"></script>

FUNCIONES EVENTOS

Mouse Events:---> click, dblclick, mouseenter, mouseleave ( $("p").click(function() ) ( $("p").dblclick(function())
Keyboard Events:---> keypress, keyup, keydown
Form Events:---> submit, focus, change, blur
Document/Window Events:---> load, resize, scroll, unload

MOSTRAR / OCULTAR

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

Unir las 2 en una:

$("button").click(function(){
  $("p").toggle();
});

Suavemente:

$("p").fadeIn();

$("p").fadeOut();

Unir las 2 en una:

$("p").fadeToggle();


ANIMACION

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

Agrandar y achicar:

$("#nono").click(function(){
    var div=$("div");
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");
  });

  <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>


ALERTA EN TEXTO O HTML o un atributo:

$("#nono").click(function(){
  alert("Text: " + $("#pepito").text());
});
$("#nono2").click(function(){
  alert("HTML: " + $("#pepito").html());
});

 alert($("#w3s").attr("href"));


CAMBIAR COSAS

$("#pepito").text("Hello world!");
  });

$("#test2").html("<b>Hello world!</b>");
$("#test3").val("Dolly Duck");

AÑADIR ATRIBUTOS:

$("#pepito").attr("href","http://www.w3schools.com/jquery");


AÑADIR TEXTO:
Detras:
  $("p").append("Some appended text.");
Delante:
  $("p").prepend("Some prepended text.");


DEJAR ALGO EN BLANCO O ELIMINARLO:

$("#div1").remove();

$("#div1").empty();


AÑADIR/ELIMINAR CSS:

.important
{
font-weight:bold;
font-size:xx-large;
}

$("#div1").addClass("important");
$("#div1").removeClass("important");

$("#div1").toggleClass("important");


MODIFICAR CSS:

$("p").css("background-color","yellow");

MODIFICAR TAMAÑO:

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()

$("#pepito").width(500).height(500);
  });

<p id="pepito" style="height:100px;width:300px;background-color:lightblue;">nono <bold> HOLAA!</bold></p>


Fuente: http://www.w3schools.com/jquery/default.asp

MANUAL JAVASCRIPT

Cualquier trozo de javascript incrustrado en HTML debe ir entre esto:

<script type="text/javascript">
  "Instrucciones"
</script>

Al final de cada linea-----> ;

Para escribir en la pagina:
document.write('Hola Nono');
document.write(nombre + ' esta aprobado con un ' + nota);

Para marcar un intro:
document.write('<br>');

Declarar variables:
var nono;
nono='Antonio';

Ingresar variables por teclado:
var nombre;
nombre=prompt('Ingrese su nombre:','Valor por defecto');

Tratar un numero como tal (suma, multiplicacion, etc...):
var suma=parseInt(valor1)+parseInt(valor2);

Cambiar color del fondo:
document.bgColor='#ff0000';

CONDICIONES IF

if (nota > 4)
{

}
else
{

}
>  mayor
>= mayor o igual
<  menor
<= menor o igual
!= distinto
== igual

Para unir condiciones usamos && o ||

OPERADOR SWITCH

switch (valor) {
    case 1: document.write('uno');
            break;
    case 2: document.write('dos');
            break;
    case 3: document.write('tres');
            break;
    case 4: document.write('cuatro');
            break;
    case 5: document.write('cinco');
            break;
    default:document.write('debe ingresar un valor comprendido entre 1 y 5.');
  }

OPERADOR WHILE

while (condicion)
{
instrucciones
}

OPERADOR DO WHILE

do
{


}while(x!=0);


OPERADOR FOR

var f;
  for(f=1;f<=10;f++)
  {
   instrucciones
  }

 FUNCIONES

 function mostrarMensaje(x1,x2)
  {
  var nono='Hola';
    document.write("Cuidado<br>");
    document.write("Ingrese su documento correctamente<br>");

   return nono;
  }

 LLamada a la funcion ----->  mostrarMensaje(v1,v2);


OBJETOS CLASE DATE


fecha = new Date();//creación de un objeto de la clase Date
fecha = new Date(año, mes, dia);
fecha = new Date(año, mes, dia, hora, minuto, segundo);

Metodos de la clase:
getYear()
setYear(año)
    Obtiene y coloca, respectivamente, el año de la fecha.
    Éste se devuelve como número de 4 dígitos excepto en el
    caso en que esté entre 1900 y 1999, en cuyo caso
    devolverá las dos últimas cifras.
getFullYear()
setFullYear(año)
   Realizan la misma función que los anteriores, pero sin
    tanta complicación, ya que siempre devuelven números
    con todos sus dígitos.
getMonth()
setMonth(mes)
getDate()
setDate(dia)
getHours()
setHours(horas)
getMinutes()
setMinutes(minutos)
getSeconds()
setSeconds(segundos)
    Obtienen y colocan, respectivamente, el mes, día, hora,
    minuto y segundo de la fecha.
getDay()
    Devuelve el día de la semana de la fecha en forma de
    número que va del 0 (domingo) al 6 (sábado)


BOTONES

<form>
  <input type="button" onClick="funcionJS()" value="Incrementar">
</form>

CAJAS DE TEXTO

<script type="text/javascript">
function mostrar()
{
  var nom=document.getElementById('nombre').value;
  var ed=document.getElementById('edad').value;
  alert('Ingresó el nombre:' + nom);
  alert('Y la edad:' + ed);
}
</script>


<form>
Ingrese su nombre:
<input type="text" id="nombre"><br>
Ingrese su edad:
<input type="text" id="edad"><br>
<input type="button" value="Confirmar" onClick="mostrar()">
</form>

CONTRASEÑAS

<script type="text/javascript">
  function verificar()
  {
    var clave=document.getElementById('clave').value;
    if (clave.length<5)
    {
      alert('La clave no puede tener menos de 5 caracteres!!!');
    }
    else
    {
      alert('Largo de clave correcta');
    }
  }
</script>

<form>
Ingrese una clave:
<input type="password" id="clave">
<br>
<input type="button" value="Confirmar" onClick="verificar()">
</form>

CAJITA CON VALORES

<script type="text/javascript">
function cambiarColor()
{
  var seleccion=document.getElementById('select1');
  document.getElementById('text1').value=seleccion.selectedIndex;
  document.getElementById('text2').value=seleccion.options[seleccion.selectedIndex].text;
  document.getElementById('text3').value=seleccion.options[seleccion.selectedIndex].value;
}
</script>

<form>
  <select id="select1" onChange="cambiarColor()">
    <option value="0xff0000">Rojo</option>
    <option value="0x00ff00">Verde</option>
    <option value="0x0000ff">Azul</option>
  </select>
  <br>
  Número de índice seleccionado del objeto SELECT:<input type="text" id="text1"><br>
  Texto seleccionado:<input type="text" id="text2"><br>
  Valor asociado:<input type="text" id="text3"><br>
</form>


CAJITAS TRUE/FALSE

http://www.javascriptya.com.ar/temarios/descripcion.php?cod=27



ON MOUSE


<script type="text/javascript">
  function pintar(col)
  {
    document.bgColor=col;
  }
</script>

<a href="pagina1.html" onMouseOver="pintar('#ff0000')" onMouseOut="pintar('#ffffff')">Rojo</a>
-
<a href="pagina1.html" onMouseOver="pintar('#00ff00')" onMouseOut="pintar('#ffffff')">Verde</a>
-
<a href="pagina1.html" onMouseOver="pintar('#0000ff')" onMouseOut="pintar('#ffffff')">Azul</a>


ELEMENTO WINDOW


toolbar[=yes|no]
location[=yes|no]
directories[=yes|no]
status[=yes|no]
menubar[=yes|no]
scrollbars[=yes|no]
resizable[=yes|no]
width=pixels
height=pixels



IMPORTAR ARCHIVO .JS

<script type="text/javascript" src="funciones.js"></script>



MODIFICAR IMAGEN DINAMICAMENTE

<script type="text/javascript">

 function cambiar () {
  document.getElementById('matrix').src = "mt07.jpg";
 }

 function volver () {
  document.getElementById('matrix').src = "mt05.jpg";
 }

</script>

<img src="mt05.jpg" id="matrix" onMouseOver="cambiar();" onMouseOut="volver();"/>

Arboles Binarios Ordenados Equilibrados

Vamos a resolver el siguiente ejercicio:

Inserta, en el orden especificado, los siguientes enteros en un ABOE
aplicando las rotaciones pertinentes cuando corresponda: 11, 8, 18, 15, 13, 20, 7, 6, 10, 12 y 21.

1) Comenzamos insertando el "11"

 

2) Insertamos el "8"

 3) Insertamos el "18"

 

4)Insertamos el "15"

 

5) Insertamos el "13" y vemos que el arbol esta desequilibrado a partir del nodo "18" con una desigualdad mayor de uno (Izquierda 2-Derecha 0), y procedemos a reorganizarlo.

 

6) Hacemos una rotacion simple Izquierda-Izquierda y queda equilibrado de nuevo

 

7) Insertamos el "20"

 

8) Insertamos el "7"

 

9) Insertamos el "6" y el arbol vuelve a desequilibrarse desde el nodo "8".

 

10) Volvemos a usar una rotacion simple Izquierda-Izquierda para reestructurarlo.

 

11) Insertamos el "10" y se desequilibra desde el nodo "11"

 

12) Aplicamos una rotacion doble Izquierda-Derecha para recuperar el equilibrio.

 

13) Al introducir el "12" como hijo del nodo "13" volvemos a perder el equilibrio a partir del nodo raiz con un (4-2) y reestructuramos con una rotacion doble Izquierda-Derecha para reequilibrar el arbol

 

14) Insertamos finalmente el nodo "21" y el arbol sigue ordenado.

 

Antonio Sanchez Rosa

Estructura de Datos y de la Informacion (EDI)

 

Organizaciones de ficheros

Las organizaciones de ficheros mas comunes serían las siguientes:
-Apilada.
-Secuencial.
-Encadenada.
-Secuencial Indexada.
-Indexada.
-Hashing.


Serán desarrolladas en ese orden, ya que cada una va dando solución a uno o varios de los inconvenientes de la anterior.




*ORGANIZACIÓN APILADA
Sería la primera en ver, es la más fácil de programar, y su principal desventaja es el alto coste de mantenimiento con el desarrollo del tiempo respecto a la creación del mismo. Otro sería la posible redundancia de información. Los datos entre sí no tienen orden alguno.


*SECUENCIAL
Es esta organización los datos si están ordenados por la clave. Lo que mejora bastante el acceso a los datos en eficiencia respecto a la organización apilada. La búsqueda se convierte también en mas eficiente. Las lecturas suelen ser ordenadas por lo que es mas rápido de esta forma. También seguimos teniendo inconvenientes como los problemas a la hora de insertar y la ordenación de los registros se deteriora con el tiempo.


*ENCADENADA
Esta organización tendría un puntero por cada clave de ordenación, lo que a la hora de ordenar mejoraría mucho mas la eficiencia aun teniendo varias claves. Respecto a la ordenación secuencial, esta ordenación nos permite tener varias claves y la eficiencia de búsqueda sería igual para todas. Esto también conlleva una desventaja que sería que los punteros de ordenación dependen del dispositivo físico y en la perdida o fallo de alguno conllevarían al desorden total.


*SECUENCIAL INDEXADA
Aquí tendríamos un indice que nos haría mejorar la búsqueda de un registro concreto, caso que no se ha mejorado en ninguna de las organizaciones anteriores. Pero tiene algunas desventajas como que ocupan mas espacio al tener un indice por el que acceder y también necesitan de reordenación con respecto al tiempo.


*INDEXADA

Las mejoras respecto a la secuencial indexada serian la eliminación de la zona de derrama causante de grandes retrasos en todas las operaciones,  las restricciones impuestas a la zona maestra y el índice debe ser actualizable dinámicamente.



*HASHING

Con la organización hashing lo que elimina sería el acceso repetitivo en varias operaciones de la organización indexada, para acceder a un registro concreto en una sola operación.

Antonio Sánchez Rosa

Estructuras de Datos

Hª de la informatica (1996-Actualidad)

Para hablar un poco de la historia de la informática desde 1996 hasta la actualidad, haremos una división fundamental respecto a hardware y software.

SOFTWARE

                Nos referimos a la evolución de los S.O.

                Libre:

                Aquí situamos los sistemas GNU/Linux que en 1996 fueron liberados para su desarrollo de forma libre. Tenemos varios SO de este tipo como por ejemplo Debian, Fedora, Ubuntu, etc...

                Desde hace unos años a la actualidad se está haciendo hincapié en esos sistemas operativos para el uso público debido al gran coste de los SO privativos, desarrollando versiones para la llamada educación 2.0 (Guadalinex) . En la actualidad se encuentran en un gran momento debido al gran desarrollo que están sufriendo.

                La gran ventaja de estos sistemas es la liberación de piratería informática a través de virus, debido a su arquitectura de datos y a los permisos de usuario en internet.

                Privativo:

                Aquí realizamos una nueva división que marca la informática desde hace tiempo, la lucha “Mac vs. Windows”à”Apple vs. Microsoft”.

                Referente a Mac, ha tenido menos presencia en el mercado, en el año 1997 presento “Mac OS 8”, Dos años más tarde saco la siguiente versión de este sistema operativo “Mac OS 9”  y en 2001 “Mac OS X”, de este se han ido sacando versiones hasta la actual 10.7 (Lion).

El mercado de esta marca ha sido más selectivo debido al elevado coste de sus productos pero aportando una eficiencia mayor y mayor aporte tecnológico.

                Referente a Windows ha sido el claro vencedor de los SO en la Hª de la informática, el producto estrella de Microsoft, el cual ha hecho a su dueño Bill Gates el hombre más rico del mundo durante varios años.

El desarrollo comienza con el lanzamiento de “Windows 95” en el año 1995 que  causó una gran revolución en la informática ya que tenía una interfaz de usuario, un menú de inicio y la tecnología “plug and play”, en una siguiente actualización incorporaría el famoso “Microsoft Internet Explorer”.

Tres años más tarde sacaría una nueva versión “Windows 98” con la base MSN de Microsoft respecto a  Internet, el cual quería monopolizar con su navegador “Explorer”. Esto le llevó a los tribunales en varios países y tuvo que realizarse una modificación para poder desinstalar el navegador de Microsoft de los ordenadores, ya que en la primera versión no era posible.

En el 2000 se publico “Windows ME” que tuvo poco éxito.

En 2001 se estrena una nueva interfaz con “Windows XP” y muy mejorado para fusionar el ámbito laboral y de hogar.

Hasta el año 2006 no aparece la siguiente versión  “Windows vista” que incorpora la novedad de un programa ofrecido por Microsoft contra el software malintencionado (Windows Defender).

En 2009 aparece “Windows 7” un sistema aparentemente mejorado y siempre enfocado a la facilidad de uso sin conocimientos informáticos.

HARDWARE

               A mitad de la década de los 90, aparece Intel con un nuevo producto estrella, la gama Pentium de microprocesadores, este modelo estuvo presente en el mercado con las versiones 2, 3 y 4 hasta el 2005. AMD también estuvo muy presente en este mercado con su serie K(5-6-7). Los precios de AMD eran más bajos que los de Intel pero su producción era baja y la inmersión en el mercado también. 

A partir de 2005 se comienza a trabajar con más de un núcleo de proceso, esto lo comienza Intel encapsulando 2 microprocesadores Pentium 4 en uno solo. También se empieza a trabajar con una arquitectura de 64 bits. En la actualidad tanto Intel como AMD tienen en el mercado procesadores de hasta 8 núcleos. Intel con su serie i(i3, i5 e i7) y AMD con Phenon II y Athlon II

IBM se mantiene un poco al margen, en los 90 proveía de procesadores los ordenadores fabricados por Apple, hasta que paso a ser Intel el proveedor, la empresa en el ámbito de hardware fue en detrimento hasta que en 2006 vendió su división a Lenovo. Ahora se interesa por el desarrollo de software libre GNU. 

Bibliografia:

 http://www.monografias.com/trabajos10/recped/recped.shtml#bhi

http://www.jimenez-ruiz.es/ernesto/II/Historia/treball.html

http://es.wikipedia.org

Trabajo realizado por: Antonio Sánchez Rosa