Meudisseny

HTML 5

HTML 5

HTML 5 es la nueva versión del lenguaje de marcación HTML y sus nuevas características se basan en HTML, CSS, DOM y JavaScript.
HTML5 es una colaboración entre el Consorcio World Wide Web (W3C) y el Grupo de Trabajo de Hipertexto Aplicación de Tecnología Web (WHATWG).
html 5 está formado por muchos módulos distintos, cuyo grado de especificación está en niveles dispares. Leer más ...

Algunas novedades:

Doctype: anterior a HTML 5 determinábamos el tipo de documento de esta forma: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
Ahora únicamente escribimos esto: <!DOCTYPE html> 

Llamada de elementos Script y Links: en estas etiquetas ya no es necesario 
aplicar el atributo type cuando llamamos a un archivo JavaScript o de estilos.
  <link rel="stylesheet" href="archivo.css" />
  <script src="archivo.js"></script>

Utilización de comillas: con html 5 tenemos la posibilidad de omitir las comilas en los valores de los atributos.

  <img class=imagen src="images/img_1" />

Etiquetas de estructura documento:
<!DOCTYPE html>: tipo de documento de la página.
<header></header>: cabecera de página.
<nav></nav>: menú de página.
<article>: artículo de la página.
<section></section>: sección del artículo de la página.
</article>: cierre del artículo de la página.
<aside></aside>: contenido tangencial de la página.
<footer></footer>: pie de la página.
Etiqueta vídeo: html 5 estandariza la etiqueta video.

// Comprobar posibles fallos con "onerror" 
<video controls height="400" width="500" loop="true" 
onerror="falloVideo(event)" poster="imagenes/imagen.jpg" durationHint="61">

    <!--Código para que se visualice el video en todos los navegadores: 
    Colocamos el "SRC" en varios formatos diferentes y el 
    navegador escoge el formato compatible.--> 
    
    <source src="Videos/archivo.webmvp8.webm" type="video/webm" />
    
    <source src="Videos/archivo.mp4" type="video/mp4" />
    <!--mp4 es: type="video/h264". Chrome, Safari e I.Explorer 9.--> 
    
    <source src="Videos/archivo.theora.ogv" type="video/ogg" />
    <!--navegador Firefox, Opera y Folck--> 

</video>

// Script de error para video y audio 
<script type="text/javascript"> 

function fallo(e) {

    switch (e.target.error.code) {
    case e.target.error.MEDIA_ERR_ABORTED: 
    	alert('Has abortado el playback.');
        break;
    case e.target.error.MEDIA_ERR_NETWORK: 
    	alert('Error en la red.');
        break;
    case e.target.error.MEDIA_ERR_DECODE: 
    	alert('Problema de codificación.');
        break;
    case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED: 
    	alert('Formato no encontrado o archivo no encontrado.');
        break;
    default: alert('Ha ocurrido un error desconocido
    		    y el video no se pudo reproducir.'); 
        break;
    }

} 

</script>

Etiqueta audio:

// Comprobar posibles fallos con "onerror" 
<audio controls onerror="falloAudio(event)">
        
    <!--Reproducir el audio en todos los navegadores.--> 
    
    <source src="archivo.mp3" type="audio/mpeg" />
    <source src="archivo.mpeg" type="audio/mp3" />
    <source src="archivo.audioonly.webmvp8.webm" type="audio/webm" /> 
    
</audio>

Autofocus para formularios: este atributo es muy útil para los formularios, nos indica en que campo que nos encontramos al terminar de cargar la página.

	<input name="su_nombre" type="text" autofocus />

Placeholder para formularios: muy útil ya que muestra un texto significativo en un campo de nuestro formulario y que en el instante en que pulsemos sobre él, este desaparece para que podamos introducir nuestro dato.

	<input name="su_nombre" type="text" placeholder="Tu contraseña" />

Validación campos de formulario: Podremos hacer que sea obligatorio insertar un dato en un campo del formulario.

	<input name="su_nombre" type="text" required />

Contenido editable para formularios: introduciendo dentro de la etiqueta contenteditable, podremos editar una lista, título o párrafo.

    <li contenteditable="true">Lista editable</li>

Esta línea es editable, pruébame

Nuevos controles para campos de formularios:
Alguno de estos nuevos controles son:

    
    type="datetime" - Fecha y Hora global.
    type="datetime-local" – Fecha y Hora local.
    type="date" – Fecha.
    type="month" – Año y Mes.
    type="time" – Hora.
    type="week" – Año y Semana.
    type="number" – Número.
    type="range" – Número impreciso basado en un rango.
    type="email" – Dirección de correo electrónico.
    type="url" – Un URL (Unique Resouce Locator), enlaces a páginas web.
    type="search" – Campo de búsqueda en un sitio Web.
    type="tel" – Número telefónico.
    type="color" – Podrá escoger un color de la rueda de colores.

Canvas: mediante el lenguaje JavaScrip podremos dibujar gráficos sobre un texto plano.

<script type="text/javascript"> 
	
    // Función cargada desde <body> 
    function cargador(){ 
     
        // Con "getElementById" le pasamos el id del Objeto canvas. 
        var lienzo = document.getElementById ('lienzo'); 
        
        // "getContext" para poder dibujar 
        var lienzo1 = lienzo.getContext('2d'); 
        
        // Gráfico Triangular.________________________ 
        
        //Indicamos a canvas que vamos a dibujar una figura geométrica. 
        lienzo1.beginPath();
         
        //Color de las líneas. 
        lienzo1.strokeStyle = "rgba(160, 0, 0, 0.45)"; 
        
        // Construimos la figura (TRIANGULO).
        // Posición de figura.(inferior-izquierdo, altura-izquierda) 
        lienzo1.moveTo(15, 500); 
        // Dibujamos la segunda de las líneas del triángulo,
        // (superior-izquierdo, altura-superior.) 
        lienzo1.lineTo(350, 115);
        // Dibujamos la otra línea.(inferior-derecho, altura-derecha)  
        lienzo1.lineTo(500, 400); 
        
        // Finalizar la figura.
        // Damos por finalizado este dibujo. 
        lienzo1.closePath(); 
        
        // Mostrar el triángulo. 
        lienzo1.stroke();
        
    } 
    
</script>

<!-- "onload", llama a la función "cargador()", al cargar la página --> 
<body onload="cargador()"> 
	
    <!--Creamos el lienzo.--> 
    <canvas id="lienzo" height="600" width="500"> 
	
        <!-- Mensaje de advertencia para navegadores antiguos --> 
             Su navegador no soporta la etiqueta canvas HTML5

    </canvas>
     
</body>

Cerrar

CSS 3

CSS 3

CSS Hoja de estilos en cascada, (Cascading Style Sheets). Este lenguage se utiliza para dar un aspecto y un formato a nuestra página web, es decir, está orientado a definir los parámetros esenciales en un documento HTML haciéndola así más vistosa y organizada. CSS 3 también se utiliza como complemento de HTML 5. Leer más ...

Por ejemplo podemos darle un determinado tamaño a un título de nuestra página, introducir un texto en una caja y esta colocarla en cualquier zona de nuestra página, Colocar algún efecto de imagen, controlar el grosor del texto, crear un fondo degradado, aplicando diferentes 'layouts' (diseños), nos servir a diferentes medidas: impresora, resoluciones de pantalla, soportes digitales, etc.

Aplicación de estilos:

Los estilos se pueden aplicar dentro de las etiquetas HTML.
También dentro del <head> de la misma página web.
Aunque es más limpio y aconsejable, colocar los estilos en un documento externo, ya que así:
- la página se carga con más rapidez, los robots entienden con mayor facilidad la información de nuestra página , (cada navegador hace su interpretación de CSS y lo refleja en el sitio web donde se procesa) y para el programador es más sencillo y rápido cambiar los estilos de una plantilla.

 // Las tres formas de dar estilo a nuestra página. 

1_ Dentro de la misma etiqueta HTML
	<p style='size: 12px; color: #F5F5F5;'>

2_ Dentro de la etiqueta <head> de la misma página.
<style type='text/css'> 
    
     // Estilo para CLASE (parf) dentro de etiqueta párrafo (p) 
    p .parf {
        size: 12px;
        color: #F5F5F5;
    }

<style> 

3_ Dentro de <head> vincularemos nuestra página a la hoja de stilos externa.
<link rel='stylesheet' type='text/css' media='screen' href='estilos.css' />

La forma de relacionar los estilos con una etiqueta HTML es mediante palabras clave que especifican los nombres de sus selectores, propiedades y atributos.
Los dos selectores principales son:

La almohadilla (#nombreId) que afecta a todas las etiquetas HTML con un atributo tipo id más el nombre que se le haya destinado a dicha etiqueta, en nuestro caso es 'nombreId'.
```
    <p id='nombreId'> 
    
     // Asignar una alineación hacia la izquierda al id nombreId 
    p#nombreId {
    	text-align: left;
    } 
```

Y el punto (.nombreClase) que afecta a todas las etiquetas HTML con un atributo tipo class más el nombre que se le haya destinado a dicha etiqueta, en nuestro caso es 'nombreClase'.

    <p class='nombreClase'> 
    
     // Asignar una alineación justificada a la clase nombreClase 
    p.nombreClase {
    	text-align: justify;
    }

Algunas novedades en CSS 3

Rotar elementos:
Este efecto se consigue con la propiedad 'transform' y con su valor 'rotate', al que le daremos los grados de rotación entre paréntesis '(360deg)'. Para poderlo visualizar en las últimas versiones de los navegadores más importantes debemos colocar delante de la propiedad 'transform' los prefijos que señalan a un determinado navegador (-moz-, -o-, -ms-, -webkit-).

/* Rotar y escalar un texto con clase 'textoRotar' */ 

p.textoRotar {

    size: 16px; /* tamaño del texto */ 
    color: #2F6A8C; /* azul */ 
    -moz-transition: .7s ease-in-out;
    -o-transition: .7s ease-in-out;
    -webkit-transition: .7s ease-in-out;
    -ms-transition: .7s ease-in-out;
    display: block; /* Importante fijar el valor 'block' */ 
    position: absolute; /* mantiene el texto en su eje de rotación */ 
    z-index: 1001;

}
p.textoRotar:hover {
    
    -webkit-transform: scale(1.2) rotate(360deg); /* safari y chrome */ 
    -moz-transform: scale(1.2) rotate(360deg); /* firefox */ 
    -o-transform: scale(1.2) rotate(360deg); /* opera */ 
    -ms-transform: scale(1.2) rotate(360deg); /* IE 9 */ 
    /* IE 8 valor 0 = nulo, valor 1 = 90º, valor 2 = 180º, valor 3 = 270º */ 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);	
    transform: scale(1.2) rotate(360deg);
    display: block; /* Importante mantener el valor 'block' */ 
    position: absolute; /* mantiene el texto en su eje de rotación */ 

}

Fondos degradados:
Para representar un gradiente lineal de colores (fondo degradado), por ejemplo de una caja o div, utilizamos la función linear-gradient. Y para que funcione correctamente en los diferentes navegadores colocaremos delante, el prefijo correspondiente (-webkit-, -moz-, -o-, -ms-).

#caja {
	
    /* Fondo degradado para caja, que desde la parte superior, su color es
    gris y degrada un 80% de la altura para cambiar a un gris más claro */ 
    
    margin: auto; /* centrar caja */ 
    width: 70%; /* ancho de caja */ 
    height: 100px; /* alto de caja */ 
    /* DEGRADADO PARA FONDO DE CAJA */ 
    /* Mozilla */ 
    background: -moz-linear-gradient(top, LIGHTSLATEGRAY, #F8F8FF 80%);  
    /* Safari, Chrome */ 
    background: -webkit-gradient(linear, 0 0, 0 90%, 
		from(LIGHTSLATEGRAY), to(#F8F8FF)); 
    /* Opera */ 
    background: -o-linear-gradient(top, LIGHTSLATEGRAY, #F8F8FF 80%); 
    /* IE 9 */ 
    background: -ms-linear-gradient(top, LIGHTSLATEGRAY, #F8F8FF 80%); 
     
}

También podemos crear un degradado por columnas con el siguiente código.

/* Fondo degradado por columnas, de un DIV con la clase 'degradColumnas' */ 
.degradColumnas {
	margin: auto;
	width: 70%;
	height: 100px;
    /* prefijo para safari y chrome */ 
	background-color: #006699; /* azul */ 
	background-image: -webkit-linear-gradient(0deg, transparent 33%,
    			  rgba(0, 0, 0, 0.08) 33% ),
    -webkit-linear-gradient(0deg, transparent 66%,
    			  rgba(0, 0, 0, 0.08) 66% ),
    -webkit-linear-gradient(0deg, transparent 100%,
    			  rgba(0, 0, 0, 0.08) 100% );
	/* prefijo para mozilla */ 
	background-image: -moz-linear-gradient(0deg, transparent 33%,
    			  rgba(0, 0, 0, 0.08) 33% ),
    -moz-linear-gradient(0deg, transparent 66%,
    			  rgba(0, 0, 0, 0.08) 66% ),
    -moz-linear-gradient(0deg, transparent 100%,
    			  rgba(0, 0, 0, 0.08) 100% );
	/* prefijo para IE 9 */ 
	background-image: -ms-linear-gradient(0deg, transparent 33%,
    			  rgba(0, 0, 0, 0.08) 33% ),
    -ms-linear-gradient(0deg, transparent 66%,
    			  rgba(0, 0, 0, 0.08) 66% ),
    -ms-linear-gradient(0deg, transparent 100%,
    			  rgba(0, 0, 0, 0.08) 100% );
	/* prefijo para opera */ 
	background-image: -o-linear-gradient(0deg, transparent 33%,
    			  rgba(0, 0, 0, 0.08) 33% ),
    -o-linear-gradient(0deg, transparent 66%,
    			  rgba(0, 0, 0, 0.08) 66% ),
    -o-linear-gradient(0deg, transparent 100%,
    			  rgba(0, 0, 0, 0.08) 100% );
}

Degradado por columnas:

Redondear bordes:
Mediante la propiedad border.radius conseguimos redondear las 4 esquinas de una caja. Para Internet Explorer 9, descargaremos un archivo (border_radius.htc) y lo incluiremos en la raiz de nuestro FTP para poderlo vincular al documento.

/* Redondear bordes */ 
#caja {

    margin: auto; /* centrar caja */ 
    width: 50%; /* anchura caja en porcentaje */ 
    height: 100px; /* altura caja */ 
    background-color: #778899; /* LIGHTSLATEGRAY */
    /* Colocamos un valor para cada una de las esquinas de la caja (6px) */ 
    -webkit-border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    -o-border: 6px 6px 6px 6px;
    -ms-border-radius: 6px 6px 6px 6px;
    border-radius: 6px 6px 6px 6px;
    /* Archivo adjunto para redondear bordes para IE 9.
    Devemos descargar el archivo (border_radius.htc) e incluirlo
    en la raiz del FTP para vincularlo de la siguiente forma */ 
    behavior: url(border_radius_htc/border_radius.htc);

}

Efecto fade:
Para lograr este efecto necesitamos las propiedades opacity y transition. Con opacity le daremos un porcentaje de opacidad al elemento, y con transition controlaremos la velocidad de esa transición.

/* Creamos una caja con 'id=esfumar' que contiene una imagen, a esta le
   damos la 'clase=imgDesvanecer' que recibirá la opacidad */
    
    /* Caja */ 
    #esfumar {
        margin: auto;
        width: 100px;
        height: 100px;
        border: none;
    }
    /* Imagen */ 
    .imgDesvanecer {
        opacity: 0.5; /* opacidad inicial */ 
        filter: alpha(opacity=50); /* IE */ 
        -webkit-transition: opacity 0.4s linear; /* safari y chrome */ 
        -moz-transition: opacity 0.4s linear; /* mozilla */ 
        -o-transition: opacity 0.4s linear; /* opera */ 
        -ms-transition: opacity 0.4s linear; /* IE 9 */ 
    }
    /* Al situar ratón sobre imagen (:hover) */ 
    .imgDesvanecer:hover {
        opacity: 1; /* opacidad con mouse sobre imagen */ 
        filter: alpha(opacity=100); /* IE */ 
        -webkit-transition: opacity 0.4s linear; /* safari y chrome */ 
        -moz-transition: opacity 0.4s linear; /* mozilla */ 
        -o-transition: opacity 0.4s linear; /* opera */ 
        -ms-transition: opacity 0.4s linear; /* IE 9 */ 
    }

Sombra interior:
Podemos conseguir el efecto sombra mediante la propiedad Box-shadow tanto para cajas como para textos.
- Horizontal: si el valor es positivo, la sombra irá orientada hacia la izquierda.
- Horizontal: si el valor es negativo, la sombra irá orientada hacia la derecha.
- Vertical: si el valor es negativo la sombra irá orientada hacia arriba.
- Vertical: si el valor es negativo la sombra irá orientada hacia abajo.
- blur: es una propiedad opcional, al aumentar su valor, la sombra será más borrosa.
- -spread-: valor de dispersión opcional, al aumentar su valor, crecerá su tamaño.

Página generadora de sombras.

#sombra {
	
    margin: auto;
    width: 70%px;
    min-width: 100px;
    min-height: 100px;
    background: #ccc;
    border: 5px solid white;
    position: relative;
    box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.60);
    -moz-box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.60);
    -webkit-box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.60);
    -o-box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.60);
    -ms-box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.60);

}

Media Queries (Consulta de Medios y Responsive Design):
La regla Media Queries, según con que tipo de dispositivo de salida a sido abierta la página, permitirá designar unas determinadas reglas CSS para adaptarse a ese dispositivo, devido a la diferencia de tamaños entre dispositivos (Smartphones, iPads, iPhones, PC sobremesa, portátiles).
También tendremos en cuenta la orientación (vertical 'portrait' u horizontal 'landscape') del dispositivo de salida, adaptando los elementos DOM a esta.

/* Lista para diferentes dispositivos de salida (medios de pantalla) */

/* Smartphones */ 
@media only screen and (min-device-width : 320px)
		   and (max-device-width : 480px) {
	/* Regla CSS para móviles y iPhones 
    	   orientación (vertical y horizontal) */ 
}

/* Smartphones */ 
@media only screen and (min-width : 321px) {
	/* Regla CSS para móviles y iPhones 
    	   orientación (horizontal) */ 
}

/* Smartphones */ 
@media only screen and (max-width : 320px) {
	/* Regla CSS para móviles y iPhones 
    	   orientación (vertical) */ 
}

/* Tablets, iPads */ 
@media only screen and (min-device-width : 768px)
		   and (max-device-width : 1024px) {
	/* Regla CSS para Tablets, iPads 
    	   orientación (vertical y horizontal) */ 
}

/* Tablets, iPads */ 
@media only screen and (min-device-width : 768px)
		   and (max-device-width : 1024px)
		   and (orientation : landscape) {
	/* Regla CSS para Tablets, iPads 
    	   orientación (horizontal) */ 
}

/* iPads) */ 
@media only screen and (min-device-width : 768px)
		   and (max-device-width : 1024px)
		   and (orientation : portrait) {
	/* Regla CSS para Tablets, iPads 
    	   orientación (vertical) */ 
}

/* PC sobremesa y portátiles */ 
@media only screen and (min-width : 1224px) {
	/* Regla CSS para PC sobremesa y portátiles */ 
}

/* Pantallas gran tamaño */ 
@media only screen and (min-width : 1824px) {
	/* Regla CSS para pantallas de gran tamaño */ 
}

/* iPhone 4 */ 
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),
       only screen and (min-device-pixel-ratio : 1.5) {
	/* Regla CSS para iPhone 4 */ 
}

Algunas propiedades de media queries:
Aspect-ratio: Relación de aspecto, describe la superficie visual del dispositivo de salida. El valor está representado por un número de píxeles horizontales, seguido de una barra (/) y número de píxeles verticales.
```
@media screen and (device-aspect-ratio: 16/9), 
		  screen and (device-aspect-ratio: 16/10) { 
		/* reglas CSS para pantallas panorámicas  */  } 
```
Width y height: Ancho y alto de la superficie visual. Los valores pueden expresarse en mínimos y máximos (min- / max-).
```
@media screen and (min-width : 321px) { /* reglas CSS para smartphones  */  } 
```
Orientation: Indica si el diseño es panorámico ( más ancho que alto ) o es vertical ( más alto que ancho ). Útiles para ajustar los elementos de la página a dispositivos que aceptan el giro de la pantalla, (Tablets, iPhone, y smartphones).
```
@media all and (orientation: portrait) { /* reglas CSS solo portátiles */  } 
```
Resolution: Indica la resolución o la densidad de los pixeles en el dispositivo de salida. La resolución podemos especificarla en puntos por pulgada ('dots per inch', dpi) y en puntos por centímetro ('dots per centimeter', dpcm). Muy útil para dispositivos con una resolución superior a 72 dpi.
```
@media print and (min-resolution: 300dpi) { /* reglas CSS impresión */  } 
```
Color, Color-index y monochrome: Color Indica el número de bits por componente de color. Color-index: Indica el número de entrada de colores, monochrome Indica los bits por píxel. Esto nos permite montar diseños determinados para dispositivos de salida de un solo color (monocromáticos).
```
@media all and (color) { /* reglas CSS para dispositivos de color */  }
@media all and (color-index) { /* CSS para dispositivos
		  		que utilizan color indexado */  }
@media all and (monochrome) { /* CSS para dispositivos monocromáticos */  }
```

Cerrar

JavaScript

JavaScript

JavaScript es un lenguaje interpretado basado en prototipos que no requiere de compilación ya que el lenguaje funciona del lado del cliente (client-side), los encargados de interpretar el código serán los navegadores. Podemos crear diferentes efectos e interactuar con los usuarios. Leer más ...

Diciembre de 1995, JavaScript fue desarrollado originalmente por Brendan Eich de Netscape con el nombre de Mocha, el cuál fue renombrado posteriormente a LiveScript, para finalmente quedar como JavaScript.

Cuando programamos en javascript, generalmente nos centramos en describir objetos, escribir funciones que respondan a deiferentes eventos (movimientos del mouse, aperturas de páginas, intervención de teclas, cargas de páginas, relojes, contadores, calendarios, etc...), permitiendo mejoras en la interfaz de usuario y páginas web dinámicas.

Componentes de JavaScript:

Operadores:
Los operadpres nos permiten realizar cálculos y acciones sobre las variables o datos de nuestro código retornando diferentes tipos de valor como resultado de una operación.

/* Operadores      y      Descripción */ 
. [] ()       (Acceso a campos, índice de matrices y llamada a funciones)
++ -- - ~ !   (Incremento +1, decremento -1, negativo, NOT, NOT lógico)
delete, new,  typeof, void (Borrado, crear objeto, mostrar tipo, indefinido)
* / %         (Multiplicación, división, módulo de división 'resto')
+ - +         (Suma, resta, concatenación de cadenas)
<< >> >>>     (Bit shifting 'desplazamiento')
< <= > >=     (menor que, menor o igual que, mayor que, mayor o igual que)
== != === !== (Igualdad, desigualdad, identidad, no identidad)
& 	(AND)
^ 	(XOR)
| 	(OR)
&&	(AND lógico)
|| 	(OR lógico)
?: 	(Condicional)
= 	(Asignación)
, 	(Evaluación múltiple 'coma') 

/* Otros operadores */ 

() [] .  Paréntesis, corchetes y el operador punto que sirve para los objetos
! - ++ --  negación, negativo e incrementos
* / %      Multiplicación división y módulo
+ -        Suma y resta
<< >> >>>  Cambios a nivel de bit
< <= > >=  Operadores condicionales
== !=      Operadores condicionales de igualdad y desigualdad
& ^ |      Lógicos a nivel de bit
&& ||      Lógicos boleanos
= += -= *= /= %= <<= >>= >>>= &= ^= !=  Asignación

Operadores sobre objetos:

delete                  borra un objeto
instanceof              devuelve true si el objeto es de igual clase
new                     crear una instancia de un tipo de objeto 
this                    se refiere al objeto actual
in                      true si la propiedad está en el objeto indicado
. (punto)               acceder a propiedades o métodos del objeto
[] (corchetes)          accede al valor de una propiedad o método del objeto

Expresiones regulares:
Expresión regular o patrón nos permite buscar coincidencias dentro de un texto.
Las expresiones regulares se identifican escribiendo una barra (/) al principio y al final de la cadena que la forman.
Hay dos opciones para definir una erxpresión regular y encontrar las palabras a buscar:
- Patrón simple: conjunto de caracteres para encontrar coincidencias directas con él, manteniendo el mismo orden.
- Caracteres especiales: Nos permiten hacer patrones más complejos y adaptables.
Caracteres de repetición: Busca coincidencias teniendo en cuenta que algunas partes de la cadena puede repetirse un número determinado de veces.
```
/coma{2,4}/ => comaa, comaaa, comaaaa
```
Cracteres especiales: Con estas expresiones se consigue encontrar coincidencias con los retornos de carro, los tabuladores, el inicio o el final de las palabras, las repeticiones de caracteres...
```
/\d\d-\d\d-\d\d\d\d/ => digitos entre 0 y 9
```

Agrupación de valores: Busca coincidencia con palabras que son muy similares y solo se diferencian en una pequeña parte.

/[^io]n/ => El circunflejo '^' dentro de un conjunto de caracteres hace que coincidan con todos los caracteres excepto los indicados en el conjunto.

Caracteres de posición: Podemos indicar en que parte de la línea ha de existir la coincidencia.

/^De/ => El circunflejo ^ colocado al principio del patrón, hace que este tenga que coincidir desde el inicio de la línea.
/e$/ => Dolar $ colocado al final del patrón hace que este coincida hasta la parte final de la línea.

Algunas expresiones útiles:

/\d{9}/ 	            numero de teléfono
/\d{8}{a-zA-Z}/ 	    Número de DNI
/\d{2}-\d{2}-\d{}4]/        Fecha (dia-mes-año)
/\w+@\w+\.\w{2,3}/	    Correo electrónico
/([0][1-9]1[0-2]):[0-5]\d:[0-5]\d/ Hora (hora:minutos:segundos, formato de 12 horas)
/([01]\d|2[0-3]):[0-5]\d:[0-5]\d/  Hora (hora:minutos:segundos formato de 24 horas)

Estructuras de control de flujo: if else
if else, esta estructura de control permite tomar una decisión dependiendo de la expresión. Normalmente las condiciones suelen ser del tipo 'si se cumple esta condición, hazlo; si no se cumple, haz esto otro'.

/* Estructura de control de flujo básica */ 

<script type='text/javascript'> 

function elseif(){
	
var edad = prompt('Edad del usuario ');

	if(edad <= 12 || edad >= 13 && edad <=17) { 
		alert('Eres menor de edad'); 
	} 
	else if(edad >= 18 && edad <= 22 ) { 
		alert('Todavía eres un adolescente'); 
	} 
	else if(edad >= 23 && edad <= 35) { 
		alert('Aún sigues siendo joven'); 
	} 	
	else if (edad >= 36 && edad <= 65) {
		alert('Eres un adulto');
	}
	else {
		alert('Piensa en cuidarte un poco más'); 
	}
} 

</script>

Probar estructura de control

Bucle for
Utilizaremos for si queremos que se repita la instrucción de una estructura y la haremos salir del bucle cuando se cumpla la condición.

for se compone de:
Expresión inicial: Inicializa un a o varias variables que nos servirán a modo de contador. Representa el primer valor de todo el rango que se va a utilizar dentro del bucle for.
Condicíon: Usa la variable como contador, evalúa en cada vuelta si se cumple la expresión especificada; si no la cumple nos dará falso y el bucle terminará su Iteración.
Expresión actualización: Actualiza el valor del contador declarado en la expresión inicial, con la finalidad de hacer falsa la condición en algún momento. Generalmente se utiliza el operador de incremento, aunque se puede usar cualquier tipo de expresión.
```
/* Bucle for */ 
<script type='text/javascript'> 

// Bucle for 
var i = 0; 

/* Repetir iteración 5 veces */ 
for (i = 1; i <= 5; i++) {
	document.write(i + '<sup>a</sup> iteración<br />');
} 
 
</script> 
```
Resultado de bucle for:

Bucle for in:
El objetivo de for in es recorrer un objeto pasando por cada una de sus propiedades para actuar sobre ellas, y ya que en javascript los arrays son Objetos, podemos hacer que itere por cada uno de los valores de sus propiedades.

<script type='text/javascript'> 

/* BUCLE FOR ... IN */	
function bucleForIn(){
	
    // Array con propiedades y sus valores 
	var pers={nombre:'Nombre:
	Juan' ,
                 apellido_uno:'Primer apellido:
	Gómez' , 
                 apellido_2:'Segundo apellido:
	Portillo' , 
                 años:'Edad:
	' + 32 + ' años'}; 
	var usuario; // usuario es el iterador 
    
      for (usuario in pers){ // Recorre las propiedades del Array 
          // Muestra una a una, todas sus propiedades 
          alert(pers[usuario] + ' '); 
      }
}


/* OTRO EJEMPLO FOR IN ---------------------- */           

function otroForIn(){

var array = [];
array[1] = 'Java';
array[2] = 'Script';
array[3] = 'Lenguaje';
 	
        // elem es el iterador 
        for (var elem in array) {
            
            // Muestra una a una, todas sus propiedades         
            alert(array[elem] + ' '); 
       
        }

} 

</script>

Con esta estructura de control hemos accedido a todas las propiedades de una instancia sin conocer sus nombres ni la cantidad de propiedades que había.

Probar 1^er bucle for in:

Probar 2^o bucle for in:

Bucle for each...in:
for each ... in realiza una acción especificada para cada elemento de una matriz.
Esta sentencia fue introducida en JavaScript 1.6 Similar a for...in, pero iteraciona sobre los valores de las propiedades del objeto, no sobre sus nombres.
for each llama a la función callbackfn una vez para cada elemento presencial del Array, mantiene el orden de sis índices de menor a mayor. Si falta´ran elementos en el Array, la llama a la función de devolución de llamada no se hará. for each podrá ser usado además de por matrices, por cualquier objeto con propiedad length y con nombres de propiedad indizada mediante números.
En el código anterior, la variable 'usuario' es nuestro iterador y utilizando el 'in' la palabra clave 'para el' bucle de hecho, recorre todos los elementos de la matriz para nosotros. Con el uso de este bucle ya no tenemos que preocuparnos por la longitud de la matriz.
Una cosa a notar sobre el uso de este bucle para iterar sobre una serie es que no necesariamente va a iterar sobre la matriz en el orden de su índice de 0 a n. Básicamente, el orden de iteración no está garantizado.
```
<script type='text/javascript'> 

/* FOR EACH...IN ---------------- */ 

// Definimos la devolución de llamada función o (callback de función). 
function ForEach(valor, indice, prop){

    /* Mostramos índice y valor de Array */ 
    document.write('' + indice + ''); /* muestra índice númerico del Arrar */ 
    document.write(' => ' + valor + ''); /* muestra valor del Arrar */ 
    document.write('<br />'); /* Salto de línea */ 

}

// Array (valores) 
var siglas = ['J', 'A', 'V', 'A'];

    // Llamar a la función (ForEach) de devolución de
    // llamada o (callback de función) mediante 'for each'
    // Elementos de matriz 
    siglas.forEach(ForEach); 
    
</script>   
```
Probar bucle for each ... in:

<script type='text/javascript'> 
    
/*  OTRO FOR EACH...IN -------------------------------- */

// El argumento 'callback de función' incluye el código 
// de la función de devolución de llamada Array. 
var cifras = [2, 4, 5];

// Llamada a la función devolución de llamada 'fijaNum'
// para cada elemento del Array. 
var sumar = 0;
	
	// Nombre de Array más (.) más foreach(callback[, argumento 'this']) 
	cifras.forEach(
	
		function fijaNum(valor) { sumar += valor; }
		
	);

// Sacar por pantalla 
document.write('La sumar elementos del Array ==> ' + sumar + ' <br />');
    
</script>

Resultado de sumar elementos de un Array:

sort, método de ordenación:
sort nos ayuda a ordenar los elementos del objeto Array.

<script type='text/javascript'> 

window.onload = function(){

    function ordenArray(){	
    
    var arr_1 = new Array(5, 3, 10, 6, 2, 4);
    
    // Ordena el array pero solo tiene en cuenta el 
    // primer número (unidad), y no la (decena) 
    var sortOrdenar = arr_1.sort();
    // Imprimir en div 'contenedor' pantalla 
    document.getElementById('sortMetodo').innerHTML = sortOrdenar;
    
    // Ordena el array de forma ascendente 
    sortOrdenar = arr_1.sort(ordenarPorComparacion);
    // Imprimir en div 'contenedor' pantalla 
    document.getElementById('sortMetodo').innerHTML = sortOrdenar;
    
        // Ordena los elementos del Array
        // de menor a mayor (ascendente) 
        function ordenarPorComparacion(menor, mayor){
            if (menor == mayor)
                return 0;
            if (menor < mayor)
                return -1;
            else
                return 1; 
            }
        }

// Llamada a la función 
	ordenArray();

}//onload  

</script>

Resultado de la ordenación de elementos de un Array:

Sentencia switch / case:
Esta sentencia evalua una expresión que puede tener múltiples valores o posibles opciones.

Estructura while / do while:
while, ejecuta las instrucciones internas repetidamente hasta que la condición sea verdadera.
do ... while, ejecuta una serie de instrucciones, al menos una vez hasta que el valor de la condición que se evalúa es falso.

Sentencia break y continue:
break, termina una ejecución de un bucle for o while cuando una variable toma un determinado valor o cuando se cumple alguna condición.
continue, permite utilizar el bucle for para filtrar los resultados en función de algunas condiciones o cuando el valor de alguna variable coincide con un valor determinado.

Objeto:
objeto, es una estructura que engloba una serie de datos (propiedades) y de funcionalidades necesarias para manejarlos métodos.
Métodos: son funciones miembros de un objeto.
Propiedades: son valores en forma de matriz u objeto que son parte del objeto. Cuando asignamos un valor de cualquier tipo a una variable, ésta se convierte en una instancia de un Objeto, con sus propiedades y métodos propios.

Un Objeto en el caso concreto de una página HTML, son cada uno de los elementos que la conforman ( imágenes, capas, formularios, etc... ), pueden considerarse objetos susceptibles de ser manipulados desde javascript para aplicar dinamismo a la página. En este caso nos estamos refiriendo a objetos del navegador.
Javascript también dispone de objetos para representar diferentes tipos de datos tales como cadenas de texto, números, conjuntos de valores ( arrays ), fechas, . etc... En este caso nos estamos refiriendo a objetos del lenguaje y que ayudan a manipular más cómodamente datos de diferentes tipos.

<script type='text/javascript'> 

window.onload = function(){

	// Creación del objeto 'asignatura' mediante 'new' 
	var asignatura = new Object();
	
	// Asignamos las ropiedades al objeto 
	asignatura.mates = 'Julio Rey Pastor';
	asignatura.program = 'Luís Ivan';
	asignatura.fisic = 'Blas Cabrera';
	
	// También podemos aplicar propiedades de esta forma
	/* var pasta = {mates: 'Julio Rey Pastor', 
                        program: 'Luís Ivan', 
                        fisic: 'Blas Cabrera'}; */  
	
	
            // Asignamos un método al objeto 
            asignatura.obtenerProgram = function() { 
            
                // Retorna el valor de la propiedad 'program' 
                return this.program;
             
            };
	
        // Llamada a una propiedad 
        document.write(asignatura.mates + '<br />>');
        // llama al método 
        document.write(asignatura.obtenerProgram());	

}//onload  

</script>

Prueba a llamar las propiedades y métodos del Objeto 'asignatura':

<script type='text/javascript'> 

/* CREAMOS OTRO OBJETO */ 

function arregloDos(){

    miArreglo = { nombre: 'Jonas', profesion: 'surfista', edad: 36, activo: true };
    
    // Mostramos los datos del Array desglosados 
    for(datos in miArreglo){
    
        // Creamos la etiqueta <P> y creamos los elementos del Array 
        var parf = document.createElement('p'), 
        info = document.createTextNode(datos + ' --> ' + miArreglo[obj_2]);
        
        // Damos un margen a las etiquetas <P> 
        parf.style.marginLeft = '20px';  
         
        // Elementos de Array dentro de etiqueta <P> 
        parf.appendChild(info);
        
        // Introducimos etiqueta <P> con su 
        // texto como un hijo del DIV 'obj_2' 
        document.getElementById('obj_2').appendChild(parf);
    
    }

} 

</script>

Mostramos los métodos y sus propiedades:

Funciones:
Una función contiene una agrupación de procesos los cuales tienen una función definida, de esta forma no tendremos que repetir tantas veces un código, que al fin y al cabo tendrán la misma función, (hora actual del equipo, imprimir mensaje en la pantalla, convertir variables de tipo, operaciones aritméticas, etc...).
Desde el interior de una función podemos llamar a otra función siempre y cuando esten dentro de las mismas etiquetas <script Language='text/javascript'>....<script>, o También si la función se encuentra en un bloque <SCRIPT> anterior (por encima de la llamada) al bloque donde está la llamada.
Si llamamos a una función desde un bloque, y la función que llamamos se encuentra en un bloque inferior al bloque de la llamada, nos dará error.

<script type='text/javascript'> 

window.onload = function(){
	
/* PASAR MÚLTIPLES PARÁMETROS ------ */ 

var w = 'BUM'; // Valor de tipo cadena de caracteres 
	
    // Valores para los parámetros: 8, 4, 9 respectivamente 
    function multiplesParam(r, s, t){
        
        var suma = r + s + t;
        var resta = (r / s) + t;
        var texto = w + t + s;
        
        document.write('Parámetros múltiples: <br />');
        document.write(suma + '<br />');
        document.write(resta + '<br />');
        document.write(texto + '<br />'); // Concatena cadena con cifra 
        
    }

// Llamar a función con paso de parámetros 
multiplesParam(8, 4, 9);

}//onload 

</script>

Prueba la función con paso de parámetros:

Cerrar

jQuery

jQuery

JQuery es la mejor herramienta para poder hacer sitios dinámicos e interactivos.
jQuery es una biblioteca o framework de JavaScript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el arbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la tecnología AJAX a páginas web. Leer más ...

jQuery al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en Javascript que de otra manera requerirían de mucho más código. Es decir, con las funciones propias de esta biblioteca se logran grandes resultados en menos tiempo y espacio.
Antes de empezar con jQuery, lo primero descargaremos una copia de la librería con la última versión.
Podemos descargar la última versión de jQuery desde aquí

Una vez instalada la librería, localizamos su ruta:

<head>
 	
    // Siendo 'jquery.js' nuestra libreria 
	<script type='text/javascript' src='jquery.js'></script> 
    
</head>

noConflict() es un método muy útil para cuando necesitamos más de una librería ya que devuelve el control '$' a otras librerías.

<script src='libreria_1.js' type='text/javascript' /></script> 
<script src='jquery.js' type='text/javascript' /></script> 
<script src='libreria_2.js' type='text/javascript' />
 
    jQuery.noConflict(); 
    
</script> 
<script src='libreria_3.js' type='text/javascript' /></script>

Primero incluimos las dos primeras librerías, asumiendo $ para su propio uso.
De inmediato llamamos a noConflict() que libera $, de manera que el control de él regresa a la primera librería incluida (libreria_1).
Ahora podemos utilizar las dos librerías, aunque siempre que queramos utilizar un método jQuery, utilizaremos la palabra jQuery y no $ de identificador.
Aun que existe un truco para jQuery que es utilizar la función de retrollamada en la que toma un parámetro que es el propio objeto jQuery, así nos permite renombrarlo de forma efectiva sin miedo a conflictos.
```
jQuery(document).ready(function($))
    
    // Ahora ya podemos utilizar el símbolo $ 
    
});    
```
El funcionamiento del mecanismo de carga para jQuery 'jQuery(document).ready()' es el de añadir la nueva función a la cola interna de comportamientos, al cargarse la página se ejecutan todas las funciones, y se ejecutan en el orden en el que se encuentran.
Cuando llamamos a un evento o función concreto, el funcionamiento del mecanismo de carga para jQuery 'jQuery(document).ready()' carga solo el nombre de esa función llamada y ejecuta su contenido.
El símbolo del dolar '$' es un alias de jQuery. Es preferible sustituir el símbolo $ por jQuery, ya que pueden surgir conflictos si más de una de estas librerias se utiliza en una página dada porque una función $() es muy común en librerias JavaScript.

función factory $():
La manera aconsejable, la más correcta y adecuada que tiene jQuery es utilizar la palabra clave function sin un nombre de función, así se define una función el lugar exacto donde se necesita y no antes, eliminando saturaciones.
Para que el bloque de instrucciones se ejecute sólo una vez que la página este disponible, utilizaremos esta sintaxis:
```
jQuery(document).ready(function() {

    // Mensaje que aparece dentro del DIV 'jqFactory' 
    // cuando el documento está cargado 
    $('#jqFactory').text('Documento preparado');  
          
}); 
```

Selectores: Cuando vayamos a utilizar cualquier tipo de selector, tanto CSS, XPhat, como Personalizados, empezaremos por la función Factoría '$()'.
Todo lo que encerremos entre los paréntesis hará un loop (bucle) automáticamente, almacenandose como un Objeto JQuery
Podemos almacenar entre paréntesis; un ('tag o etiqueta HTML'), un ('#id') o una ('.clase')
```
    $('h2')
    $('#nombreId')
    $('.nombreClase') 
```

Jquery, para accceder al árbol de DOM, lo hace a través de los selectores.

Selectores que podemos utilizar en JQuery:

Selectores CSS: Nos permite mejorar nuestro sitio web, sin preocuparnos del navegador con el cual se está visualizando la página, siempre que esté activado Javascript en dicho navegador, de esta forma la funcionalidad de los selectores están garantizados en cualquier navegador. Ejemplo selectores CSS Selectores XPath (XML lenguaje de ruta): Este lenguage identifica los elementos y valores de un archivo XML Selectores Personalizados de JQuery: con este selector accederemos a los elementos DOM de una manera más sencilla. Métodos transversales DOM: Podremos acceder a todos los elementos que se encuentren en el árbol DOM.

Lista de selectores para formularios:

:input Selector => Selecciona todos los elementos de formulario('input' de todos los tipos, 'select', 'textarea' y 'button').

:text Selector => Selecciona todos los inputs de tipo texto(<input type='text'>).

:password Selector => Selecciona todos los inputs de tipo password(<input type='password'>).

:radio Selector => Selecciona todos los inputs de tipo radio(<input type='radio'>).

:checkbox Selector => Selecciona todos los inputs de tipo checkbox(<input type='checkbox'>).

:submit Selector => Selecciona todos los inputs de tipo submit y los botones (<input type='submit'>, <button>).

:image Selector => Selecciona todos los inputs de tipo image(<input type='image'>).

:reset Selector => Selecciona todos los botones de reset(<input type='reset'>).

:button Selector => Selecciona todos los botones e inputs de tipo button(<button>, <input type='button'>).

:file Selector => Selecciona todos los inputs de subida de archivos(<input type='file'>).

:enabled Selector => Selecciona todos los elementos de formulario que están habilitados, es decir, aquellos que no tienen el atributo disabled.

:disabled Selector => Selecciona todos los elementos de formulario que están deshabilitados, es decir, aquellos que tienen el atributo disabled.

:checked Selector => Selecciona todos los elementos del formulario que están checkeados, es decir, los botones de checkbox y radio seleccionados.

:selected Selector => Selecciona todos los elementos de formulario que están seleccionados, es decir, los elementos <option> seleccionados en un <select>.

Selectores CSS: su potencial es aprobechado por la libreria jQuery ya que nos permite acceder rápidamente a los elementos o grupos de elementos en el DOM.
jQuery tiene la capacidad de acceder fácilmente a la selección en el DOM.
Sabiendo que el DOM es una estructura en árbol de ML (Lenguajes de Marcación), por lo tanto se sirve de este modelo para describir las relaciones de cosas en una página. Al hacer referencia a estas relaciones lo haremos de la misma forma que utilizamos la terminología de relaciones familiares: padres, hijos, hermanos, etc...

Árbol ML (lenguaje de marcación):

Siendo Window la etiqueta 'padre'.
La etiqueta document 'hijo de Window y hermano del resto de etiquetas color naranja y padre de forms y demás etiquetas color verde'.
Las etiqueta forms es 'nieto de window, hijo de document y padre de las etiquetas color rosa'.

Ejemplo de como referenciar algunos elementos de una página:

$('p[@class]') // seleccionar todos los párrafos que puedan haber en una página que contengan o implementen una clase  

$('div[p]') // obtener todos los divs que contengan un párrafo dentro de él   

$('body > div > li.lista') // Selecciona todos los elementos 'li' con clase 'lista' descendientes de 'div' descendientes de 'body'

Filtros:

Los filtros nos permitirán acceder a elementos dinámicos en la página, que pueden cambiar en cada carga.

:first – selecciona el primer elemento de el selector.

:last – selecciona el ultimo elemento de el selector.

:nth-child(y) - Selecciona el elemento hijo del índice (y).

:has(y) Selecciona el elemento que contiene el otro elemento (y).

even – selecciona los elementos pares .

odd – selecciona los elementos impares.

:header – selecciona h1, h2, h3…

:animated - selecciona algún selector que este en progreso o siendo animado.

:not(selector) - negación de algún selector.

:gt(y) – elementos mayores a (y).

:lt(y) – elementos menores a (y).

:eq(y) – elementos Iguales a (y).

:parent - selecciona todos los elementos Padre que tienen hijos, incluidos los nodos de texto. Existen un conjunto de elementos que por definición son vacíos y no tienen nodos hijos, por ejemplo, <input>, <img>, <br />; y <hr />. En cambio un elemento <p> puede contener un nodo hijo si tiene un nodo texto.

:empty - es el selector inverso y selecciona los elementos que no tienen ni texto ni elementos.

:contains('texto') - Selecciona todos los elementos que contienen el texto indicado, directamente o en uno de los hijos.

:visible - selecciona todos los elementos visibles (esto incluye los artículos que tienen un display de blok o en online, una visibilidad de visible, y no se forman elementos de tipo hidden).

:hidden - Selecciona todos los elementos 'ocultos' hidden (esto incluye los artículos que tienen un display none, o una visibilidad de hidden, o son elementos de formulario de tipo hidden).

Ejemplo filtros jQuery

Tabla a modificar mediante filtros jQuery:

Objeto 1	Objeto 2	Objeto 3
Dato 1.1	Dato 1.2	Dato 1.3
Dato 2.1	Dato 2.2
Dato 3.1	Dato 3.2	Dato 3.3
Pie tabla

Selectores XPath (XML Path Language): Tipo de lenguaje para identificar diferentes elementos o sus valores dentro de un documento XML, es similar a CSS cuando identifica elementos en HTML. Recordar que los selectores XPath y CSS que utilizamos, son en realidad objetos jQuery.

Algunos selectores:

$('a[@title]'): Mediante el símbolo '@' entre corchetes '[]', localizaremos un atributo de cualquier elemento, en este caso, el atributo 'title'.

$('div[ol]'): Deisgna un elemento que está contenido dentro de otros los elementos, en este caso localiza los sub-elementos 'ol, entre corchetes '[]' que se encuentran dentro de todos los DIV y les aplica la regla o estilo.

Expresiones regulares: Esta es una de las mayores potencialidades vasados en selectores XPath, para desarrollar nuestros filtros.

^ inicio, $('a[@href^='mailto:']') : Localiza el atributo 'href' de los anchor 'a', que lleven un String al principio '^' que es 'mailto:'. Todos los atributos que empiecen por 'mailto:' se les aplicará la regla o estilo.

$ final, $('a[@href$='.pdf']') : Con el signo dolar '$' localizamos el texto final del atributo href, en este caso es '.pdf', (extensión de un archivo). Todos los atributos que terminen con '.pdf' se les aplicará la regla o estilo.

* comodín, $('a[@href*='web.com']') : El selector asterisco '*' es un comodín, localiza en cualquier sitio del String del atributo lo que le indiquemos, en este caso es 'web.com' A todos los atributos que se localicen el texo 'web.com' se les aplicará la regla o estilo.
El siguiente ejemplo muestra como podemos aplicar ciertos selectores Xpath, selectores CSS y combinadores a elementos de una tabla, párrafos y a lincks, aplicando algunas funciones visuales.

Ejemplo selectores

Expresiones regulares XPath:

Se utilizan expresiones para seleccionar nodos o conjuntos de nodos.

Selección de nodos:

Sintaxis	Funcionalidad
/	Selecciona desde el nodo raíz.
//	Selecciona nodos desde el nodo contextual, independientemente del nivel del árbol DOM donde se encuentren.
.	Selecciona el nodo contextual.
..	Selecciona el padre del nodo contextual.
nodo	Selecciona los nodos hijos de nodo mencionado.
@atributo	Selecciona todos los atributos de 'atributo'.

Selección de nodos no conocidos:

Sintaxis	Funcionalidad
//*	Selecciona todos los nodos del documento.
node()	Selecciona todos los nodos del documento.
*	Selecciona todos los nodos elemento.
@*	Selecciona todos los nodos atributo.
/<Nodo_2>/*	Selecciona todos los los nodos hijos del nodo Nodo_2.
//<Nodo_2>[@]	Selecciona todos los atributos del nodo Nodo_2 .

Predicados

Los Predicados son utilizados para encontrar nodos específicos o un nodo contenedor de un valor determinado. Están encerrados entre corchetes '[]'.

Lo que es lo mismo; son condiciones que permiten seleccionar un nodo de unos determinados atributos o características.

Sintaxis	Funcionalidad
empleados/peón[1]	Selecciona el primer elemento peón.
empleados/peón[last()]	Selecciona el último elemento peón.
empleados/peón[position()<3]	Selecciona dos elementos.
empleados/peón[price>900.00]	Selecciona todos los empleados con sueldo mayor a 900.00.
//title[@lang='ca']	Selecciona todos los elementos que tienen atributo lang con valor ca.

Método .animate(), animar un elemento:

Este método realiza una animación personalizada de un conjunto de propiedades CSS.
Sirbe para cambiar un elemento de un estado a otro con estilos CSS. El valor de la propiedad CSS se cambia poco a poco, para crear un efecto animado.
Sólo valores numéricos pueden ser animados (como 'margin: 50px'). Los valores de cadena no pueden ser animados (como 'background-color: Blue').

Usaremos los operadores '+ =' o '- =' para las animaciones relativas.

Parámetros para este método:
- 1/ Aceleración (speed): Especifica la velocidad de la animación (milliseconds, slow, fast), (milisegundos, lenta y rápida).
- 2/ facilitar (easing): Especifica la velocidad del elemento en distintos puntos de la animación.
  - swing (oscilar): Es su valor por defecto. Movimientos lentos al principio o al final, pero más rápido en el medio.
  - linear (lineal): Movimiento constante.
- 3/ Función de devolución (callback): Función que se ejecutará después de la animación completa, Es decir que la devolución de llamada se ejecutará después de que el efecto actual se termine.
En este ejemplo animaremos el logo 'jQuery' haciéndolo desplazar por los 4 lados de la caja en la que está encerrado.
Ejemplo animate()

Cerrar

PHP 6

PHP 6

PHP Hypertext Pre-processor: Diseñado en el año 1994 por Rasmus Lerdorf Puede ser procesado por la mayoría de los servidores web y en prácticamente todos los sistemas operativos y plataformas libres (sin costo alguno), es de uso general, utilizado para crear páginas web dinámicas y el código es del lado servidor. Una ventaja es la práctica y fácil aplicación de este código incrustado en un documentos HTML o en un archivo externo. Leer más ...

Los datos en PHP se procesan de la siguiente forma:

PHP (Pre-Procesador de Hipertexto) es procesado en servidores (superordenadores muy potentes con un software y hardware específicos). Al abrir una página web con una extensión final (.php), los datos de esa solicitud son enviados al servidor que los procesa mediante (otros servidores o webs, base de datos, etc...), apilando los datos (proceso dinámico), entonces el servidor devuelve al cliente (navegador) los datos de forma entendible, o sea con código estático HTML.

Esquema de como PHP interpreta los datos hasta llegar al cliente:

Los datos o valores, generalmente son almacenados en variables y ocupan un determinado espacio en la memoria, estos permanecerán allí hasta que necesitemos acceder a esos datos bien para eliminarlos, para hacer un cálculo o para cambiar su valor o tipo.
Variables: '$'
Es un espacio de memoria reservado para almacenar un valor que corresponde a un tipo de dato soportado por el lenguaje de programación. Una variable es representada y usada a través de una etiqueta (un nombre) que le asigna un programador o que ya viene predefinida.

Una variable se representa mediante el símbolo '$' dolar seguido del nombre y su valor, que estará entre comillas dobles o sencillas, sólo si se trata de una cadena.

Variable tipo cadena: "$nombre_variable = 'valor_variable'"
Variable numérica: "$variable_numerica = 90.0"

Tipos de variables:
- boleano
- entero
- decimal de coma flotante
- caracter, cadena de texto
- arreglo
- matriz
- tipo definido por el usuario

Tipo de datos:
Estos se definen como un conjunto de valores y las operaciones que se permiten en esos valores.
El tipo de datos básicos incluidos en PHP son variables, es decir; son identificadores para la ubicación de memoria para almacenar datos.

Integer (entero: -1): $q = -1;

Double (real: 1.2e4): $q = 1.2e4;

String (cadena de caracteres: "Hola"): $q = "Hola";

Boolean (true, false):

        
	$q = true;
	$q = ( $var1 > $var2 );

$Cadena = "Tipo de dato de cadena";

$NumeroEntero = 1;  // Un valor entero 

$NumeroFlotante = 1.55; // Un valor numérico con decimales 

$Booleano = True; // Un valor booleano True (1) o False (0)  
 
$Matriz[0]= "A"; // Primer elemento de un matriz  
 
$Matriz[2] = 3; // Matriz con índice 2 y valor numérico 3 
 
$Matriz[4] = "Barcelona"; // Matriz índice 4, dato de tipo cadena  
 
$Matriz[5] = "París"; // Matriz índice 5, dato de tipo cadena 

  echo "__ Booleano: " . $Booleano . " <br />";
  
  echo "__ $Matriz[0]: " . $Matriz[0] . ", Valor de matriz con índice '0'
			<br />";
  
  echo "__ $Matriz[2]: " . $Matriz[2] . ", Valor de matriz con índice 2
			<br />";
  
  echo "Permiten almacenar una parte fraccionaria: <br />";
  
  echo "__ Exponencial: " . $NumeroFlotanteExp;
  echo "__ Estándar: " . $NumeroFlotanteEst;

Resultado tipo de dato cadena:

__ Booleano: 1
__ $Matriz[0]: A, Valor de matriz con subíndice '0'
__ $Matriz[2]: 3, Valor de matriz con subíndice 2

Permiten almacenar una parte fraccionaria:

__ Exponencial: 1550
__ Estándar: 1.55

Tipo numérico:

__ $NumeroEntero: Número entero: 1
__ $NumeroFlotante: Número flotante: 1.55 , permiten almacenar una parte fraccionaria.

// OTROS TIPOS DE DATOS 

$NumeroOctal = 012; // octal 12 es decimal 10

// En la asignación Hexadecimal se indica 0x delante y luego números de 0 a 9 y letras de A a F.

// {que se corresponden con los números decimales de 10 a 15)
$NumeroHexadecimal = 0x1C; // hexadecimal 1c igual a decimal 28 

$NumeroNegativo = -33; // números negativos llevan el signo menos (-) delante 

// Son los que permiten almacenar una parte fraccionaria. 
// Existen dos sintaxis: estándar y exponencial 
$NumeroFlotanteExp = 1.55e3; // Exponenecial 
$NumeroFlotanteEst = 1.55; // Etándar 

$comillasDobles = 'permire tener comillas dobles interiores';
$comillasDobles2 = 'permite comillas dobles en el interior , 
	           "escapándolo con barra invertida (\)"';

Resultado otros tipos:

__ $NumeroOctal: ' . 10 . ' , se indica un cero delante y luego números entre 0 y 7.
__ $NumeroHexadecinal: ' . 28 . ' , se indica 0x delante y luego números de 0 a 9 y letras de A a F (que se corresponden con los números decimales de l0 a l5).
__ $NumeroNegativo: ' . -33 . '

Matriz:

Los vectores o array son listas ordenadas de elementos. Utilizaremos la función array() para definir un vector en PHP.
Cuando hayamos definido un vector, accederemos a sus elementos identificados mediante un número ( empezando por 0 ) o una clave (tipo cadena de carácteres).
los arrays nos permiten manejar la información de forma más fácil y cómoda, pudiendo buscar, agrupar, recorrer y ordenar listas de datos de una manera sencilla.
Las matrices en PHP nos permiten almacenar elementos de diferented tipos de datos dentro de una misma matriz.
las principales variables de PHP están almacenadas en matrices ($_SERVER, $_GET. $_POST, $_SESSlON, $_ENVIRONMENT, etc.).

Existen muchos tipos de arrays: listas(vector), diccionarios, colas, pilas, tablas, hash, etc. Todas ellas parten de un enfoque básico que nos permiten clasificar las matrices según el tipo de índice utilizado.

Arrays enumerativos: Al definir un Array, si no se especifica una clave, PHP asigna automáticamente un valor numérico ordenado, creando así un array enumerativo a partir del "0". Son los que poseen números en las claves.

Arrays asociativos: Son los que tienen claves de tipo caracter o cadena de caracteres, también denominadas tablas, hash o indexadas por cadenas. Los Arrays pueden contener claves o índices numéricos y también de caracteres, (arrays mixtos), son una mezcla de enumerativos y de asociativos.

Existen dos formas para definir un array:

Definición explícita: es necesaria la palabra array() seguido de sus datos entre paréntesis, además, los datos almacenados son del tipo clave => valor (key => value), o simplemente valor (en este caso PHP asigna automáticamente las claves, asociando el primer valor a "0", el 2º valor a 1, y así con el resto de valores del array); los elementos deben ir separados por una coma (,), a cada uno de estos pares de datos los denominamos elementos.

Definición por operador "[]": Detrás del nombre del array va la clave dentro de corchetes [] seguido de la asignación = y terminando con el valor que deseamos para ese elemento.
```
// Array tipo cadena de carácteres 
$arrayNumerico = array('Alpha', 'Gamma', 'Omega');

// Array tipo numérico 
$arrayNumerico = array(9, 8, 20);

// Elemento compuestos por una clave y su valor  
$arrayClaveValor = array('Pepe' => 35, 'Carla' => 29, 'Noelia' => 41);

// Tipo mixto (numérico y de cadena)  
$arrayClaveValorMixto = array(1 => 'uno', 2 => 'dos', 'tres' => '3'); 

// Crear un Array vacio  
$arrayVacio = array(); 
```

Array escalar:

Cuando los índices de un array son numéricos o enteros entonces es un Array escalar, también se la conoce como matriz enumerada o indexada, su índice numérico empieza con una base 0 así que el índice final será un número menor que su número de elementos. Al contrario, si los índices fueran cadenas pasarian a llamarse Array asociativo.

// Array escalar con operador array '[ ]'  

// Array escalar (el índice numérico, se lo ponemos nosotros) 
$arrayEscalarConIndice[2] = 'España';     

// Array escalar (índice numérico, PHP lo genera automáticamente) 
$arrayEscalarSinIndice[] = 'Portugal';    

// Array asociativo (índice de cadena de caracteres) 
$arrayAsociativo["cadena"] = 'Francia';

Asignación automática de índices en el constructor de array, cuando no se le asigna ningún índice a los valores del array, PHP los asigna automáticamente, asignando al primer elemento el '0' e ir sumando uno para cada elemento del array.

Ejemplo de asignación automática de índices:

// ASIGNACIÓN AUTOMÁTICA DE ÍNDICES ---------------------

// Recorrer los índices de un Array  

$uniArray = array('PHP', 'JavaScript', 'AJAX');
		
	echo '<table>';
		echo '<tr>';
			echo '<th>Índices</th>';
			
			// Recorrer los índices         
			for ($ind = 0; $ind < count($uniArray); $ind++)
				// Comprobamos los índices 
				echo'<td>$ind</td>'; 
		
		echo '</tr>';
		echo '<tr>';
		
			echo '<th>Valores</th>';
		
			// Recorrer los valores     
			for ($ind = 0; $ind < count($uniArray); $ind++)
				echo '<td> $uniArray[$ind] </td>';
			 
		echo '</tr>';
	echo '</table>';

Resultado asignación automática de índices:

Índices	0	1	2
Valores	PHP	JavaScript	AJAX

funciones para array:

PHP dispone de funciones para array, ya sea para aumentar su tamaño o reducirlo, combinar matrices, extraer o añadir elementos, buscar un determinado valor, ordenar elementos, etc ...
Por ejemplo podemos ver la función asort() que ordena de menor a mayor, pero respetando le relación de clave con valor, el resultado final es el ordenamiento de los valores, no de los índices, es decir que al ser ordenado el valor su índice se mantendrá indiferentemente del número de orden que tenga.

Ordenar alfanuméricamente los valores de menor a mayor, manteniendo asociación clave con valor:

// FUNCIÓN DE ORDENACIÓN DE VALORES DE UN ARRAY

// asort() 
$ordarrasort = array('Es' => 'Españoles', 'It' => 'Italianos',
		     '2' => 'Argentinos', '4' => 'Canadienses',
		     '1' => 'Franceses', '0' => 'Rusos');

// Ordenar de menor a mayor con relación (clave / valor) 
asort($ordarrasort);
  
  // Recorrer el array 
  foreach($ordarrasort as $claasort => $valasort) {
	  
	// Si valores son idénticos al nombre de estos valores ... 
	if($valasort === 'Españoles' || $valasort === 'Italianos'):
		
	  // Dar estilo diferente 
	  echo '<span class='lila'>' . $claasort' . '</span>/ ' . $valasort . '<br />';
	
	else:
	
	  echo '<em>' . $claasort . '</em>/ ' . $valasort . '<br />';
	
	endif;
	  
  }

Resultado asort():

2/ Argentinos
4/ Canadienses
Es/ Españoles
1/ Franceses
It/ Italianos
0/ Rusos

Ordenar alfanuméricamente las claves de mayor a menor, manteniendo asociación clave con valor:

krsort(): Ordena un array de mayor a menor por su clave, manteniendo la correlación entre la clave y valores. Esto es útil principalmente para arrays asociativos. La función inversa es ksort() que ordena de menor a mayor.

// FUNCIÓN DE ORDENACIÓN DE CLAVES DE UN ARRAY

// krsort() 
$ordarrkrsort = array('3' => 'Españoles', '5' => 'Italianos',
		      '2' => 'Argentinos', '4' => 'Canadienses',
		      '1' => 'Franceses', '0' => 'Rusos');

	// Ordenar de mayor a menor con relación (clave / valor) 
	krsort($ordarrkrsort);
	
	// Recorrer el array 
	foreach(\$ordarrkrsort as $clakrsort => $valkrsort){
		
		echo $clakrsort . "/ " . $valkrsort . "<br />";
		
	}

Resultado krsort():

4/ Canadienses
2/ Argentinos
1/ Franceses
0/ Rusos
It/ Italianos
Es/ Españoles

Estructuras de control de flujo:

Estas estructuras nos van a pemritir evaluar condiciones, tomar decisiones y controlar el flujo del prograna, mediante sentencias condicionales y Sentencias de control de bucles.
- 1/ Sentencias condicionales: Ejecutan una sección del código, cuando se cumple una condición.
- 2/ Sentencias de control de bucles: Grupos de instrucciones definidas que se ejecutan repetidamente hasta que se cumpla una cierta condición.
PHP posee varias estructuras de control de bucles:
- if...else
  switch
  While
  do...[while]
  for
  foreach

if...else:

La sentencia if sirve para evaluar una expresión.
La sentencia else es simple y no se le puede incluir una evaluación como en el caso de la sentencia if.
La sentencia else if complementa a la sentencia if para definir otras evaluaciones adicionales y pueden haber más de una de estas sentencias, que se evaluan ordenadamente y al evaluar una como verdadera, las otras no las tendrá en cuenta.

// IF / ELSE

// Método que devuelve la hora
// entre 00 a 23 horas 
$tiempo = date('H');

// Si no hemos modificado el GTM del servidor
// debemos añadir esta línea de código (zona horaria) 
date_default_timezone_set('Europe/Madrid');

	if($tiempo > '06' && $tiempo < '14') {
	   echo '<p>Buenos días por la mañana!</p>';
	   }
	else if ($tiempo >'14' && $tiempo < '20') {
	   echo '<p>Buenas tardes!</p>';
	   }
	else if ($tiempo > '20' && $tiempo < '06') {
	   echo '<p>Buenas noches!</p>';
	   }

Resultado if...else:

Buenas tardes! --- son las 21 horas

switch:

Evalúa una variable o una expresión y luego en una o varias sentencias case se compara esa variable o el resultado de esa expresión con diferentes valores.

Si alguna de las sentencias case cumple la condición, se ejcutará su bloque de instrucciones pero continuará evaluando las sentencias case que tenga por debajo de la que cumplió la condición. Para evitar que pase esto, colocaremos dentro de cada case la sentencia break.

Para terminar incluiremos la sentencia default detrás del último case que se ejecutará siempre, tanto si una sentencia case cumple la condición como si no la cumple, así no se creará un bucle infinito.

// SWITCH (cambiar) 	
 
$miLang = 'PHP';

switch ($miLang){
	
	case 'JavaScript':
	   echo 'Tu lenguage favorito es JavaScript';
	   break;
	
	case 'HTML':
	   echo 'Tu lenguage favorito es HTML';
	   break;
	
	case 'AJAX':
	   echo 'Tu lenguage favorito es AJAX';
	   break;
	
	case 'PHP':
	   // Se cumple la condición 
	   echo '<li>Tu lenguage favorito es ' . $miLang . '</li>'; 
	   break; // Sale de la sentencia de control de bucle
	
	// Si no se cumple la condición en ninguna sentencia 'switch', 
	// sale del bucle con el siguiente mensaje 
	default: 
	   echo '<p>Tu color favorito no es ni JavaScript, ni HTML, 
	   	 ni AJAX, ni PHP </p>';

}

Resultado switch:

Tu lenguage favorito es PHP

While:

Sentencia simple que ejecuta la instrucción o el bloque de instrucciones que se encuentra dentro de las llaves mientras que se siga cumpliendo la expresión que se evalúa antes de cada ejecución del bucle.
Para que el bucle no sea infinito algo tendná que ir cambiando dentro del bucle para que alguna vez la condición deje de cumplirse.

Si la primem vez que se ejecuta la sentencia while la evaluación de la expresión resutase falsa, las sentencias que hay dentro del bucle while no se ejecutan ni siquiera una vez.

// WHILE 
$arrayFrutas = array('naranja', 'plátano', 'manzana', 'frambuesa');

$i = 0;

// 'count()' Cuenta todos los elementos del array 
$c = count($arrayFrutas);

// Mientras ($i = 0) sea menor que número de índices del array ... 
while ($i < $c) {
   $a = $arrayFrutas[$i]; // Irá mostrando sus elementos 
   
   // Muestra el índice y valor correspondiente al índice 
   echo $i . "/ " . $a . "<br />"; 
   
   $i++; // Incrementa el número del índice hasta 
	 // igualar número de índices de array, entonces se
	 // deja de cumplir la condición y sale de la sentencia. 
}

Resultado while:

0/ naranja
1/ plátano
2/ manzana
3/ frambuesa

do...[while]:

Ejecutará una instrucción una vez, si la condición se cumple (verdadero) continuará con el bloque de instrucciones, el número específicado de veces que hayamos indicado, cuando la condición sea falsa (no se cumpla), saldrá del bucle. Este bucle se ejecurá siempre por lo menos una vez.

La utilizaremos cuando no sepamos cuantas veces se ha de ejecutar un bucle, al igual que el bucle WHILE, con la diferencia de que sabemos seguro que el bucle por lo menos se ejecutará una vez, ya que primero ejecuta la sentencia con do y luego evalua la condición con while.
```
// BUCLE DO...WHILE 

$varDo = 5;
$varCont = 0;

// Hacer que ... 
do{
  // Decrementar e incrementar en '1' los valores de estas variables. 
  $varDo--;
  $varCont++;
  
  // Mostrar por pantalla ... 
  echo '<p>' . $varCont . '<sup>o</sup> do, vale ==> ' . $varDo . '<p>';
  }
  
// Mientras que el valor sea inferior o igual a '3'
// o suoerior o igual a '0', irá mostrando su resultado. 
while ($varDo >= 0 && $varCont <= 3); // Muestra 4 veces el mensaje.  
```

Resultado do..while:

1^o do, vale ==> 4
2^o do, vale ==> 3
3^o do, vale ==> 2
4^o do, vale ==> 1

for:

for se utiliza cuando se sabe de antemano cuántas veces se debe ejecutar la secuencia de comandos.

Parámetros de for:

1^er parámetro: Generalmente se utiliza para ajustar el contador (pero puede ser cualquier código que se ejecutará una vez al principio del bucle).
2^o parámetro: Evalúa por cada iteración del bucle. Si se evalúa como TRUE, el bucle continúa. Si se evalúa como FALSE, el bucle termina.
3^er parámetro: Generalmente se utiliza para incrementar un contador (pero puede ser cualquier código que se ejecuta al final de la iteración).
```
// BUCLE FOR

// for con sus tres parámetros 
for ($varFor = 1; $varFor <= 3; $varFor++){
	
	// Se repetirá hasta cumplir el 2^o parámetro 
	echo '<li>' . $varFor . '<sup>a</sup> vuelta de for ==> ' . $varFor . '<br />';
	
} 
```

Resultado for:

1^a vuelta de for ==> vale 1
2^a vuelta de for ==> vale 2
3^a vuelta de for ==> vale 3

foreach:

foreach se utiliza para recorrer arrays. El bucle se ejecutará tantas veces como elementos tenga la matriz.
foreach sólo funciona sobre arrays y sobre objetos desde la versión 5, y emitirá un error al intentar usarlo con una variable de un tipo diferente de datos o una variable no inicializada.
foreach tiene dos sintaxis: en ambas , en cada iteracón se recibe el valor del elemento de la matriz. Pero en la segunda sintaxis, además, recive la clave y el valor del elemento.

// RECIVIR EL VALOR DE UN ARRAY 

// foreach (valor)
$vector = array('valUno', 'valDos', 'valTres');

  // Recorrer los elementos del Array, asignando cada elemento a una variable '$valor' 
  foreach ($vector as $valor) {
  
	// Si $valor es igual a 'valTres' ... 
	if($valor == 'valTres') {
	
	  // Muestra el valor del elemento sin puntos suspensivos finales 
	  echo $valor . ' <br />';
	
	}else {
	
	  // Se asigna una variable '$valor', para sacar cada elemento de la matriz 
	  // (el puntero se mueve por uno), así que en la siguiente iteración del
	  // bucle, se asigna el siguiente valor de la matriz a variable '$valor'.  
	  echo $valor . ' ... <br />'; 
	  // Muestra cada elemento del array en cada iteración. 
	  
	}
  
  }

Resultado valor de un array:

valUno ...
valDos ...
valTres

// RECIVIR LA CLAVE Y EL VALOR DE UN ARRAY

// foreach (clave/valor) 
$varArray = array('valUno' => 1, 'valDos' => 2, 'valTres' => 3);

// Asignar una variable para la clave y otra para el valor de cada elemento.   
foreach($varArray as $varClave => $varValor){
	
	// Si clave y valor iguales a ('valTres' => 3) ... 
	if($varClave == 'valTres') {
		
		// Mostrar este elemento sin puntos suspensivos finales. 
		echo '$varArray[$varClave] => $varValor <br />';
		
	}else {
		
		// Mostrar de cada elemento su clave y valor.  
		echo '$varArray[$varClave] => $varValor ... <br />';
		
	}
	
}

Resultado clave/valor de un array:

$varArray[valUno] => 1 ...
$varArray[valDos] => 2 ...
$varArray[valTres] => 3

Funciones PHP:

Función: es una subrrutina independiente que realiza una operación muy definida, la cual la podemos utilizar muchas veces desde nuestro código.

Las funciones pueden ser internas o externas:

Función externa: la definición de la función puede hacerse fuera de la secuencia de comandos y almacenarse en una biblioteca externa , de esta manera estará accecible a todos los programas.

Función interna: la definición de la función se realiza dentro de la secuencia de comandos o script de esta manera estará accecible desde cualquier punto del mismo programa, pero los programas externos no podrán hacer uso de ella.
```
// FUNCIONES PHP 

// Sintaxis de una función con paso de parámetros  
function pasoParam($param_1, $param_2) {

  // Expresión 
  $sumaParam = $param_1 + $param_2;
  
  // Devolver valor de parámetros 
  return $sumaParam; 	
	
}

$param_1 = 4;
$param_2 = 2;
	
  // Llamada a la función exactamente con su mismo nombre 
  echo '<p>Suma parámetros = ' . pasoParam($param_1, $param_2) . '</p>';
```

Resultado función con paso de parámetros:
Suma parámetros = 6

El nombre de una función no debe empezar con el símbolo dolar ($), debe ser un nombre único. Aunque los nombres de función no diferencian entre mayúsculas y minúsculas es recomendable ser coherente al nombrar la función exactamente con el mismo nombre con el que ha sido llamada.

Los parámetros son obcionales y van entre parántesis y separados por una coma (,).
La instrucción return es obcional, ya que la función en algunos casos puede retornar un valor o realizar cualquier acción determinada sin necesidad de retornar ningún valor.

Tipos de funciones:

Las funciones de PHP se clasifican en tres tipos:
- Nativas del lenguage
  Extensión de lenguaje
  Definidas por el usuario
Funciones nativas del lenguage: Son las que se utilizan con matrices y cadenas.

Funciones extensión de lenguaje: Las podemos encontrar en bibliotecas de extensión y no están instaladas en la configuración básica de PHP. Al estar en bibliotecas algunas extensiones se instalan de forma predeterminada aunque hay otras que se tienen que instalar en el sistema de forma específica.

Funciones definidas por el usuario: Se trata de las funciones que creamos como usuarios, son personalizadas para resolver un problema propio de nuesto código.

Array como valor de retorno:

Cuando queremos retornar un valor usaremos la sentencia return.
La sentencia return únicamente puede devolver un valor, pero puede ser un valor simple o incluidos arrays y objetos. Esto causa que la función finalice su ejecución inmediatamente y pase el control de nuevo a la línea desde la que fue llamada.
La variable de retorno también puede ser una referencia a una variable mediante el operador ampersand (&).

// Array con valor de retorno 
function retornaArray(){

	$arr = array(10, 'veinte', 30);
	
	return $arr; // Retornar el valor del array 

}
	
	// Declarar variable para almacenar valores de tipo Array 
	$verArray = array();
	
	// Pasar los valores retornados de la función a la variable 
	$verArray = retornaArray();
	
	// Inicio un contador 
	$contador = 0;
	
	echo ' <br />';
	
	// Recorrer los valores 
	foreach ($verArray as $cla => $val) {
	
		echo 'Índice ' . $contador . ' --> ' . $val . ' <br />';
	
		// Incremento de contador 
		$contador++;
	
	}

Resultado Array como valor de retorno:

Índice 0 --> 10
Índice 1 --> veinte
Índice 2 --> 30

Función getdate():

PHP posee una gran variedad de funciones para la fecha y la hora, una de estas funciones es getdate() la cual devuelve una matriz asociativa con la información desglosada y completa de la fecha y la hora.
getdate() obtiene información de la fecha/hora. Devuelve un array asociativo que contiene la información de la fecha si se indica el primer parámetro, o el momento local actual si no se indica el primer parámetro.
```
// Función getdate()

// Muestra toda la información de la fecha y la hora actual 
$inforFechaHora = getdate(); 

	foreach($inforFechaHora as $claFH => $valFH){
		
		// Recorremos elementos de getdate() 
		echo $claFH . ' --> ' . $valFH . '<br />';
		
	} 
```

Resultado getdate():

seconds --> 30
minutes --> 37
hours --> 21
mday --> 25
wday --> 4
mon --> 4
year --> 2024
yday --> 115
weekday --> Thursday
month --> April
0 --> 1714073850

Recursividad en una función:

La recursividad en una función es la capacidad de estas para llamarse a sí mismas, facilitandonos y mucho la codificación sobretodo en cálculos y problemas matemáticos. Una función recursiva se llama así misma hasta que se cumpla una condición, por ejemplo vamos a calcular el factorial de un número.

// Recursividad de las funciones
// Cálculo del factorial de 4 
$entero = 4;

// Llamada a función con parámetro 
echo 'Factorial de ' . $entero . ' es ' . (factorial($entero) . '<br />');

  // Parámetro 'entero' ahora es 'factor'  
  function factorial($factor) {
  
	// irá llamando recursivamente a factorial()
	// $factor es una variable local de cada función factorial
	// Si número entero es menor que '1' ... 
	if ($factor < 1){ 
	
	  // Retorna 1, que lo multiplicará por el 
	  // número resultante y finalizará la función. 
	  return 1;
	
	}
	
	echo 'Multiplicar por ' . $factor . '<br />';
	
	// La función se vuelve a llamar a si misma hasta que se cumpla la
	// condición restará '-1' para ir bajando hasta el número '1' final 
	$numFact = $factor * factorial ($factor -1);
	
	return $numFact;
  
  }

Resultado recursividad de una función:

Multiplicar por 4
Multiplicar por 3
Multiplicar por 2
Multiplicar por 1
Factorial de 4 es 24

PHP posee mucho más contenido que él visto hasta ahora, si quieres puedes acceder a él desde aquí.

Encontrarás muchos ejemplos de como y cuando utilizar cada uno de los elementos que componen PHP 6, espero ayududar con este tutorial a personas, que como yo, han dedicado mucho tiempo buscando frustradamente una solución a su código.

Cerrar

Pronto estará ajax!

Tabla a modificar mediante filtros jQuery:

Selección de nodos:

Selección de nodos no conocidos:

Predicados