JavaScript - HTML DOM

El HTML DOM (Document Object Model)

Cuando se carga una página web, el navegador crea un Document Object Model de la página.

¿Qué es el DOM?

El DOM es un W3C (World Wide Web Consortium) estándar.

El DOM define un acceso estándar a los documentos:

El W3C del Modelo de Objetos del Documento (DOM) es una interfaz de la plataforma y del lenguaje neutro que permite a los programas y scripts acceder y actualizar dinámicamente el contenido, a la estructura y al estilo de un documento.

El W3C DOM estándar se separa en 3 partes:

Core DOM - modelo estándar para todos los tipos de documentos

DOM XML - modelo estándar para documentos XML

HTML DOM - modelo estándar para documentos HTML

¿Qué es el DOM HTML?

El DOM HTML es un objeto estándar del modelo y del interfaz de la programación HTML. 

Se define:

Los elementos HTML como objetos

Las propiedades de todos los elementos HTML

Los métodos para acceder a todos los elementos HTML

Los eventos de todos los elementos HTML

En otras palabras: El DOM HTML se trata de cómo obtener, cambiar, añadir o eliminar elementos HTML.

HTML DOM Árbol de objetos

Con el modelo de objetos, JavaScript recibe toda la energía que necesita para crear HTML dinámico:
JavaScript puede cambiar todos los elementos HTML de la página
JavaScript puede cambiar todos los atributos HTML en la página
JavaScript puede cambiar todos los estilos CSS en la página
JavaScript puede quitar elementos y atributos HTML existente
JavaScript puede agregar nuevos elementos y atributos HTML
JavaScript puede reaccionar a todos los eventos de HTML existentes en la página
JavaScript puede crear nuevos eventos HTML en la página

El HTML DOM modelo está construido como un árbol de objetos

JavaScript - Prototype

//La propiedad prototype permite añadir nuevas propiedades a un prototipo existente: 
function person(first, last, age, eye) {
 this.firstName = first;
 this.lastName = last;
 this.age = age;
 this.eyeColor = eye;
}
person.prototype.nationality = "English";

var myFather = new person("John", "Doe", 50, "blue");
  
console.log ("My father is " + myFather.nationality); //My father is English


//La propiedad prototype también permite añadir nuevos métodos a un prototipo existente:
function person(first, last, age, eye) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye;
}
person.prototype.name = function() {
    return this.firstName + " " + this.lastName
};

var myFather = new person("John", "Doe", 50, "blue");

console.log("My father is " + myFather.name()); //My father is John Doe

JavaScript - Algoritmo de ordenamiento

function quitaElmasGrande(v){
    var max = 0;
    var posMasgrande = 0;
    for(var i=0; i<v.length;i++){
        if(v[i] > max){
            max = v[i]   
            posMasgrande = i;
        }
    }    
    v.splice(posMasgrande,1)    //quita el elemento
    return max;
}

function ordenarDeMayorAMenor(arr){
    var original = arr.slice() //hago una copia del vector
    var vec_ordenado = []
    var max=0;    
    
    while( original.length > 0 ){ //corto cuando no tengo mas elementos en el array
        max = quitaElmasGrande(original)
        vec_ordenado.unshift(max)       //agrega al inicio 
    }
    
    return vec_ordenado;
}

/* --------------- aca empieza ----------------- */
var vec = [5,4,2,9,4,6,3,2,6]
//console.log(vec, quitaElmasGrande(vec), vec)

var vec2 = ordenarDeMayorAMenor(vec)
//vec.splice(3,1)
console.log("le mando este vector desordenado: ", vec)
console.log("y me lo devuelve ordenado: ", vec2) //[2, 2, 3, 4, 4, 5, 6, 6, 9]

JavaScript - Funciones como valor de retorno

function filterMaker(filterFunction){
  
   function filter (lista) {
    var nLista = [];
    for(var i = 0; i < lista.length; i++){
     if ( filterFunction(lista[i]) ){
      nLista.push(lista[i]);
     }
    }
    return nLista;
   }
   
   return filter;
  }
  
  var nums = [5,8,2,9,21,6,9,23,85]
  
  var funcionRecibida = filterMaker(function(n){
   return n > 20
  })  
  
  var res = funcionRecibida(nums) 
  
  /*
  var res = (filterMaker(function(n){
   return n > 20
  }))(nums) */ 
  
  
  console.log("resultado", res) // resultado [21, 23, 85]

JavaScript - Función como parámetro

//filter es una func que recibe 2 parametros: 
// - uno es la lista de COSAS (no importa de que)
// - el otro parametro es una funcion que evalua cada elemento
 function filter(lista, valid){
  var nLista = [];
  for(var i = 0; i < lista.length; i++){
   if ( valid(lista[i]) ){
    nLista.push(lista[i]);
   }
  }
  return nLista;
 }
 
 //----------------------------------------
 var numeros = [3,8,7,0,9,67,23,12,2,23,76] 
 //quiero los numeros pares
 var res = filter(numeros, function(e){
   return e % 2 == 0
 }) 
 console.log(res)
 //----------------------------------------
 function contiene(palabra, letra){  
  for(var i =0; i<palabra.length; i++){
    if (palabra[i] == letra) return true;
  }
  return false;
 }
 
 var nombres = ["Joao","Ricardo","Elias","Pepe"];
 var res = filter(nombres, function(e){
   return contiene(e,"o")
 })
 console.log(res)
 //----------------------------------------
 
 function Person(nombre, edad){
  this.nombre = nombre,
  this.edad = edad;
 }
 
 var Joao = new Person("Joao", 11);
 var Ricardo = new Person("Ricardo", 19);
 
 var personas = [Joao, Ricardo];
 var res = filter(personas, function(e){
  return e.edad > 18;
 })
 console.log(res)

SQL y NoSQL

SQL:

. Son estructuras fijas como tablas.
. Son bases de datos relacionales
. Existe ACID (Atomicity, Consistency, Isolation, Durability)

- MySQL
- Postgre
- Oracle (Pivada)
- 

NoSQL:

.Existe BASE (Basic Availability, Soft State, Eventual Consistency) que da características para el manejo de datos.

-MongoDB
-Cassandra
-MariaDB

SQL & NoSQL pueden convivir perfectamente (Ejemplo Twitter)

MySQL

DB

Tabla noticias

Tabla usuarios

Tabla comentarios

-- Función COUNT() "Cuenta el número de filas en una tabla determinada"

SELECT COUNT(*) cantidad_usuarios
FROM usuarios
WHERE id_usuario

-- Sentencia JOIN "Se utiliza para relacionar varias tablas"

SELECT N.id_noticia, N.titulo, N.fecha fecha_noticia, C.comentario, C.fecha fecha_comentario, U.usuario
FROM noticias N
JOIN comentarios C ON (N.id_noticia =C.id_noticia)
JOIN usuarios U ON (C.id_usuario = U.id_usuario)

-- Cláusula ORDER BY "Esta instrucción ordena columnas"

SELECT n.fecha fecha_noticia, N.id_noticia, N.titulo, C.comentario, U.usuario, C.fecha fecha_comentario
FROM noticias N
JOIN comentarios C ON( N.id_noticia = C.id_noticia)
JOIN usuarios U ON(C.id_usuario = U.id_usuario)
ORDER BY N.fecha DESC, usuario ASC

asdasdasdasdsad

Iniciando sesión PHP

<?php
 session_start();
 include("../sistema/db.php");
 $usuario = $_POST['USUARIOxFORM'];
 $password = $_POST['PASSWORDxFORM'];

 if(isset($usuario) && !empty($usuario) && isset($password) && !empty($password))
 {
  $sel = "SELECT USERxTABLA, PASSxTABLA 
  FROM NOMBRE_BASE_de_DATOS 
  WHERE USERxTABLA = '$usuario'";  

  $result = mysql_query($sel);
  $row = mysql_fetch_array($result);

   if(md5($password) == $row['PASSxTABLA'])   {
    $_SESSION['username'] = $usuario;
    header("Location: admin.php");
   }  
   else
   {
    header("Location: index.html");
   }
 }
?>

Copiando tablas PHP

<?php
 session_start();
 if(!isset($_SESSION['username'])) header("Location: index.html");
 include('../sistema/db.php');

 $sql = "SELECT id_variable, nombre_variable, variables_default FROM z_remi_variables_globales";
 $result = mysql_query($sql) or trigger_error(mysql_error());
 $IDS_VARIABLE = Array();
 $VALOR_VARIABLES = Array();
 
 while($row = mysql_fetch_array($result))
 {
  $IDS_VARIABLE[] = $row['id_variable'];
  $VALOR_VARIABLES[] = $row['variables_default'];
 }
 for ($i=0; $i < count($IDS_VARIABLE); $i++) { 
  $sql = "UPDATE z_remi_variables_globales 
  SET valor = '".$VALOR_VARIABLES[$i]."' WHERE id_variable = ".$IDS_VARIABLE[$i];
  mysql_query($sql);
 }
 header("Location: admin.php");
?>

valor copiara los valores de variables_default

Cerrar sesión PHP

<?php
session_start();
session_unset();
session_destroy();

header("Location: index.html");
?>