Tecnologías para la web

Certificado de CSS

El CSS desarrollador certificado demuestra el conocimiento fundamental de desarrollo web con CSS1 y CSS2.

Lea más sobre el Certificado CSS ...

Precio: $ 95.00

Certificado de JavaScript

El Certificado de JavaScript desarrollador demuestra el conocimiento fundamental del desarrollo web utilizando JavaScript y el DOM HTML.

Lea más sobre el Certificado de JavaScript ...

Precio: $ 95.00

Certificado de jQuery

El Certificado de jQuery desarrollador demuestra conocimiento fundamental del desarrollo web usando la biblioteca jQuery.

Lea más sobre el Certificado de jQuery ...

Precio: $ 95.00

Certificado de PHP

El programador PHP Certificado demuestra el conocimiento fundamental de desarrollo web con PHP y SQL (MySQL).

Lea más sobre el Certificado de PHP ...

Precio: $ 95.00

Certificado de arranque

El Certificado de Bootstrap desarrollador demuestra el conocimiento fundamental de desarrollo web con Bootstrap.

Lea más sobre el Certificado Bootstrap ...

Precio: $ 95.00

Certificado XML

El desarrollador XML certificado demuestra el conocimiento fundamental del desarrollo web utilizando XML, DOM XML y XSLT.

Lea más sobre el Certificado XML ...

Precio: $ 95.00

XML

XML es una herramienta en software y hardware independiente para el almacenamiento y el transporte de datos.

¿Qué es XML?

XML significa eXtensible Markup Language

XML es un lenguaje de marcas muy similar a HTML

XML fue diseñado para almacenar y transportar datos

XML fue diseñado para ser auto-descriptivo

XML es una recomendación de la W3C

XML no hace nada

Tal vez es un poco difícil de entender, pero XML no hace nada.

Esta nota es una nota a Tove de Jani, almacenada como XML:

<note>
  <to>Tove</to>
  <from>Jani</from>
  <heading>Reminder</heading>
  <body>Don't forget me this weekend!</body>
</note>

El XML anterior es bastante auto-descriptivo:

Tiene información del remitente.
Tiene información receptor
Tiene un título
Tiene un cuerpo de mensaje.

Pero aún así, el XML anterior no hace nada. XML es sólo información envuelto en las etiquetas.

Alguien tiene que escribir una pieza de software para enviar, recibir, almacenar, o mostrarlo:

Nota

Para: Tove

De: Jani

Recordatorio

No me olvides este fin de semana!

La diferencia entre XML y HTML

XML y HTML fueron diseñados con diferentes objetivos:

XML fue diseñado para transportar datos - con el foco en qué datos están

HTML fue diseñado para mostrar los datos - con el foco en el aspecto de datos

Las etiquetas XML no están predefinidas, como son etiquetas HTML

XML no utiliza las etiquetas predefinidas

El lenguaje XML no tiene etiquetas predefinidas.

Las etiquetas en el ejemplo anterior (como <para> y <desde>) no se definen en cualquier estándar XML. Estas etiquetas son "inventados" por el autor del documento XML.

HTML trabaja con etiquetas predefinidas como <p>, <h1>, <table>, etc.

Con XML, el autor debe definir tanto las etiquetas y la estructura del documento.

XML es Extensible

La mayoría de las aplicaciones XML funcionará como se espera, incluso si se añaden nuevos datos (o eliminado).

Imagínese una aplicación diseñada para mostrar la versión original de note.xml (<para> <del> <heading> <data>).

Entonces se puede imaginar una versión más reciente de note.xml con agregado <fecha> y <hora> elementos, y un eliminado <título>.

La forma en XML se construye, la versión anterior de la aplicación todavía puede trabajar:

<note>
  <date>2015-09-01</date>
  <hour>08:30</hour>
  <to>Tove</to>
  <from>Jani</from>
  <body>Don't forget me this weekend!</body>
</note>

Versión antigua

Nota

Para: Tove

De: Jani

Cabeza: (ninguno)

No me olvides este fin de semana!

Nueva versión

Nota

Para: Tove

De: Jani

Fecha: 09/01/2015 08:30

No me olvides e

XML simplifica las cosas

Se simplifica el intercambio de datos
Simplifica el transporte de datos
Simplifica cambios de plataforma
Simplifica la disponibilidad de datos

Muchos sistemas informáticos contienen datos en formatos incompatibles. El intercambio de datos entre sistemas incompatibles (o sistemas actualizados) es una tarea que consume tiempo para los desarrolladores web. Grandes cantidades de datos deben ser convertidos, y datos incompatibles a menudo se pierde.

almacena los datos XML en formato de texto plano. Esto proporciona una forma en software y hardware-independiente de almacenar, transportar y compartir datos.

XML también hace que sea más fácil de ampliar o actualizar a los nuevos sistemas operativos, nuevas aplicaciones o nuevos navegadores, sin perder datos.

Con XML, los datos pueden estar disponibles para todo tipo de "máquinas de lectura", como las personas, ordenadores, máquinas de voz, canales de noticias, etc.

DOM XML

¿Qué es el DOM?

El DOM define un estándar para acceder y manipular documentos:

"El modelo de objetos de documento del W3C (DOM) es una interfaz de plataforma y lenguaje neutro que permite a los programas y scripts acceder y actualizar el contenido, la estructura y el estilo de un documento de forma dinámica."

El HTML DOM define una manera estándar para acceder y manipular documentos HTML. Presenta un documento HTML como una estructura de árbol.

El DOM XML define una forma estándar para acceder y manipular documentos XML. Presenta un documento XML como una estructura de árbol.

La comprensión del DOM es una necesidad para cualquier persona que trabaje con HTML o XML.

El DOM HTML

Todos los elementos HTML se puede acceder a través del DOM HTML.

En este ejemplo se cambia el valor de un elemento HTML con id = "demo":

Ejemplo

<h1 id="demo">This is a Heading</h1>

<script>
document.getElementById("demo").innerHTML = "Hello World!";</script>

El DOM XML

Todos los elementos XML se puede acceder a través del DOM XML.

El DOM XML es:

Un modelo de objetos estándar para XML
Una interfaz de programación estándar para XML
La plataforma y del independiente del lenguaje
Un estándar de la W3C

En otras palabras: El DOM XML es un estándar de cómo obtener, cambiar, añadir o eliminar elementos XML.

DTD

¿Qué es un DTD?

Una DTD es una definición de tipo de documento.

Un DTD define la estructura y los elementos jurídicos y atributos de un documento XML.

¿Por qué utilizar una DTD?

Con una DTD, grupos independientes de las personas se ponen de acuerdo en una DTD estándar para el intercambio de datos.

Una aplicación puede utilizar una DTD para verificar que los datos XML es válido.

Una declaración de DTD interna

Si el DTD se declara dentro del archivo XML, debe ser envuelto dentro de la <! DOCTYPE> definición:

documento XML con una DTD interna

<?xml version="1.0"?>
<!DOCTYPE note [
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend</body>
</note>

Ver archivo XML »

El DTD anterior se interpreta así:

! DOCTYPE nota define que el elemento raíz de este documento es la nota
! ELEMENT nota define que el elemento nota debe contener cuatro elementos: "a, desde la partida, el cuerpo"
! ELEMENT define el elemento para que sea del tipo "#PCDATA"
! ELEMENT partir define el de elemento a ser del tipo "#PCDATA"
! Título de elemento define el elemento de encabezado para ser del tipo "#PCDATA"
! ELEMENT cuerpo define el elemento del cuerpo al ser del tipo "#PCDATA"

SCHEMA XML

¿Qué es un esquema XML?

Un esquema XML describe la estructura de un documento XML.

El lenguaje XML Schema también se conoce como definición de esquemas XML (XSD).

Ejemplo XSD

<?xml version="1.0"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

<xs:element name="note">
  <xs:complexType>
    <xs:sequence>
      <xs:element name="to" type="xs:string"/>
      <xs:element name="from" type="xs:string"/>
      <xs:element name="heading" type="xs:string"/>
      <xs:element name="body" type="xs:string"/>
    </xs:sequence>
  </xs:complexType>
</xs:element>

</xs:schema>

El propósito de un esquema XML es definir los bloques de construcción legal de un documento XML:

los elementos y atributos que pueden aparecer en un documento
el número de (y el orden de los) elementos secundarios
tipos de datos para los elementos y atributos
valores predeterminados y fijos para elementos y atributos

XSLT

XSL (Extensible Stylesheet Language) es un lenguaje de estilo para XML.

XSLT significa Transformaciones XSL.

Este tutorial te enseñará cómo utilizar XSLT para transformar documentos XML en otros formatos (como la transformación de XML en HTML).

Editor de XSLT en línea

Con nuestro editor en línea, puede editar el código XML y XSLT, y haga clic en un botón para ver el resultado.

Ejemplo XSLT

<?xml version="1.0"?>

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
  <html>
  <body>
    <h2>My CD Collection</h2>
    <table border="1">
      <tr bgcolor="#9acd32">
        <th>Title</th>
        <th>Artist</th>
      </tr>
      <xsl:for-each select="catalog/cd">
        <tr>
          <td><xsl:value-of select="title"/></td>
          <td><xsl:value-of select="artist"/></td>
        </tr>
      </xsl:for-each>
    </table>
  </body>
  </html>
</xsl:template>

</xsl:stylesheet>

XPath

¿Cuál es XPath?

XPath es un elemento importante en el estándar XSLT.

XPath se puede utilizar para navegar a través de los elementos y atributos en un documento XML.

XPath significa Lenguaje de rutas XML
XPath utiliza "camino como" sintaxis para identificar y navegar nodos en un documento XML
XPath contiene más de 200 funciones incorporadas
XPath es un elemento importante en el estándar XSLT
XPath es una recomendación W3C

Las expresiones de ruta XPath

XPath utiliza expresiones de ruta para seleccionar nodos o conjuntos de nodos en un documento XML.

Estas expresiones de ruta se parecen mucho a las expresiones de ruta que utiliza con sistemas de archivos de ordenador tradicionales:

Funciones estándar XPath

XPath incluye más de 200 funciones incorporadas.

Hay funciones para valores de cadena, valores numéricos, booleanos, fecha y tiempo de comparación, la manipulación de nodo, manipulación de secuencia, y mucho más.

Hoy expresiones XPath también se pueden utilizar en JavaScript, Java, XML Schema, PHP, Python, C y C ++, y un montón de otros idiomas.

XQuery

¿Cuál es XQuery?

XQuery es XML ¿Qué es SQL a bases de datos.

XQuery está diseñado para consultar datos XML.

Ejemplo XQuery

for $x in doc("books.xml")/bookstore/book
where $x/price>30
order by $x/title
return $x/title

¿Cuál es XQuery?

XQuery es el idioma para la consulta de datos XML
XQuery para XML es como SQL para bases de datos
XQuery se basa en expresiones XPath
XQuery es apoyado por todas las principales bases de datos
XQuery es una Recomendación del W3C
XQuery es sobre cómo realizar consultas XML
XQuery es un lenguaje para la búsqueda y los elementos y atributos de documentos XML extracción.

He aquí un ejemplo de lo que podría resolver XQuery:

"Seleccionar todos los registros de CD con un precio de menos de $ 10 de la colección de CD almacenada en cd_catalog.xml"

XQuery y XPath

XQuery 1.0 y XPath 2.0 comparten el mismo modelo de datos y admiten las mismas funciones y operadores. Si ya ha estudiado XPath que no tendrá problemas con la comprensión de XQuery.

XQuery - Ejemplos de Uso

XQuery se puede utilizar para:

Extraer información para utilizar en un servicio Web
Generar informes de resumen
Transformar los datos XML a XHTML
documentos de búsqueda de Internet para información relevante

Lado del Servidor

SQL

SQL es un lenguaje estándar para acceder y manipular bases de datos.

¿Qué es SQL?

SQL significa Lenguaje de consulta estructurado
SQL que permite acceder y manipular bases de datos
SQL es un estándar ANSI (American National Standards Institute)

Lo SQL puede hacer

SQL puede ejecutar consultas contra una base de datos
SQL puede recuperar datos de una base de datos
SQL puede insertar registros en una base de datos
SQL puede actualizar registros en una base de datos
SQL puede eliminar registros de una base de datos
SQL puede crear nuevas bases de datos
SQL puede crear nuevas tablas en una base de datos
SQL puede crear procedimientos almacenados en una base de datos
SQL puede crear vistas en una base de datos
SQL puede establecer permisos en las tablas, procedimientos y puntos de vista
SQL es un estándar - PERO ....

Aunque SQL es un ANSI (American National Standards Institute) estándar, existen diferentes versiones del lenguaje SQL.

Sin embargo, para ser compatible con el estándar ANSI, que todo el apoyo, al menos, los comandos principales (como SELECT, UPDATE, DELETE, INSERT, DONDE) de una manera similar.

Algunos de los más importantes comandos SQL

SELECT - extrae datos de una base de datos
ACTUALIZACIÓN - actualiza los datos en una base de datos
DELETE - elimina los datos en una base de datos
INSERT INTO - inserta nuevos datos en una base de datos
CREAR BASE DE DATOS - crea una nueva base de datos
ALTER DATABASE - modifica una base de datos
CREATE TABLE - crea una nueva tabla
ALTER TABLE - modifica una tabla
DROP TABLE - elimina una tabla
CREATE INDEX - crea una (clave de búsqueda) Índice
DROP INDEX - Elimina un índice

PHP

¿Qué es PHP?

PHP es un acrónimo de "PHP: Hypertext Preprocessor"
PHP es un lenguaje de programación de código abierto ampliamente utilizado
scripts PHP se ejecutan en el servidor

PHP es para descargar y utilizar gratis

PHP es un lenguaje sorprendente y popular!

Es lo suficientemente potente como para estar en el centro del sistema de blogs más grande en la web (WordPress)!

Es lo suficientemente profunda para ejecutar la mayor red social (Facebook)!

También es bastante fácil de ser la primera lengua del lado del servidor de un principiante!

¿Qué es un archivo PHP?

Archivos PHP pueden contener texto, HTML, CSS, JavaScript, PHP y el código
Código PHP se ejecutan en el servidor, y el resultado se devuelve al explorador como HTML plano
Archivos PHP tienen extensión ".php"

Lo que puede hacer con PHP

PHP puede generar páginas con contenidos dinámicos
PHP puede crear, abrir, leer, escribir, borrar y cerrar archivos en el servidor
PHP puede recopilar datos de formularios
PHP puede enviar y recibir cookies
PHP puede añadir, borrar, modificar los datos de su base de datos
PHP puede ser usado para el control de acceso de los usuarios
PHP puede cifrar los datos
Con PHP no está limitado a la salida HTML. Usted puede emitir imágenes, archivos PDF y películas Flash. También puede exportar cualquier texto, como XHTML y XML.

¿Por qué PHP?

PHP se ejecuta en varias plataformas (Windows, Linux, Unix, Mac OS X, etc.)
PHP es compatible con casi todos los servidores utilizados en la actualidad (Apache, IIS, etc.)
PHP es compatible con una amplia gama de bases de datos
PHP es gratuito. Puedes descargarlo desde el recurso oficial de PHP: www.php.net
PHP es fácil de aprender y funciona de manera eficiente en el lado del servidor

Sintaxis PHP

Ejemplo

<!DOCTYPE html>
<html>
<body>

<h1>My first PHP page</h1>

<?php
echo "Hello World!";
?>

</body>
</html>

Los comentarios en PHP

Un comentario en el código PHP es una línea que no es de lectura / ejecuta como parte del programa. Su único propósito es para ser leído por alguien que está buscando en el código.

Los comentarios pueden ser utilizados para:

Deje que los demás comprendan lo que está haciendo

Recuérdese a sí mismo de lo que hizo - La mayoría de los programadores han experimentado regresando a su propio trabajo uno o dos años más tarde y tener que volver a averiguar lo que hicieron. Comentarios pueden recordarle lo que estabas pensando cuando escribiste el código

PHP soporta varias maneras de comentar:

Ejemplo

<!DOCTYPE html>
<html>
<body>

<?php
// This is a single-line comment
# This is also a single-line comment
/*
This is a multiple-lines comment block
that spans over multiple
lines
*/

// You can also use comments to leave out parts of a code line$x = 5 /* + 15 */ + 5;
echo $x;
?>

</body>
</html>

PHP Sensibilidad a mayúsculas

En PHP, todas las palabras clave (por ejemplo, si, no puede, cuando, eco, etc.), clases, funciones y funciones definidas por el usuario no entre mayúsculas y minúsculas.

En el ejemplo siguiente, los tres estados de eco a continuación son legales (e igual):

Ejemplo

<!DOCTYPE html>
<html>
<body>

<?php
ECHO "Hello World!<br>";
echo "Hello World!<br>";
EcHo "Hello World!<br>";
?>

</body>
</html>

Sin embargo; todos los nombres de las variables entre mayúsculas y minúsculas.

En el siguiente ejemplo, sólo la primera sentencia visualiza el valor de la variable $ color (esto se debe a $ color, $ color, y $ color son tratados como tres variables diferentes):

Ejemplo

<!DOCTYPE html>
<html>
<body>

<?php
$color = "red";
echo "My car is " . $color . "<br>";
echo "My house is " . $COLOR . "<br>";
echo "My boat is " . $coLOR . "<br>";
?>

</body>
</html>

ASP

ASP significa A ctivo S erver P edades

ASP es un marco de desarrollo para la creación de páginas web.

ASP es compatible con muchos modelos de desarrollo diferentes:

ASP clásico

ASP.NET Web Forms

ASP.NET MVC

Páginas Web ASP.NET

ASP.NET API

ASP.NET Core

La tecnología ASP

ASP y ASP.NET son tecnologías del lado del servidor.

Ambas tecnologías permiten código de ordenador para ser ejecutado por un servidor de Internet.

Cuando un navegador solicita un archivo ASP o ASP.NET, el motor ASP lee el archivo, ejecuta cualquier código en el archivo, y devuelve el resultado al navegador.

Classic ASP - Active Server Pages

ASP (también conocido como ASP clásico) fue introducido en 1998 como el primer lenguaje de script del lado del servidor de Microsoft.

Las páginas ASP clásicos tienen la extensión .asp y normalmente se escriben en VBScript.

Páginas Web ASP.NET

Páginas Web es uno de los muchos modelos de programación para la creación de sitios web y aplicaciones web ASP.NET.

Páginas Web proporciona una manera fácil de combinar HTML, CSS y el código del servidor:

Fácil de aprender, entender, y el uso
Utiliza un modelo de aplicación SPA (Aplicación Una sola página)
Al igual que en PHP y ASP clásico
VB (Visual Basic) o C # (Do sostenido) lenguajes de script

Además, las aplicaciones de las páginas web son fácilmente ampliable con ayudantes programables para bases de datos, vídeos, gráficos, redes sociales y mucho más.

Páginas Web Ejemplo

<html>
<body>
     <h1>Hello Web Pages</h1>
     <p>The time is @DateTime.Now</p>
</body>
</html>

Ejemplo de ejecución »

JavaScript

JavaScript puede cambiar el contenido HTML

Uno de los muchos métodos JavaScript HTML es getElemenById () .

En este ejemplo se utiliza el método de "encontrar" un elemento HTML (con id = "demo") y cambia el contenido del elemento ( innerHTML ) para "Hola JavaScript":

Ejemplo

document.getElementById("demo").innerHTML = "Hello JavaScript";

Con HTML y JavaScript se puede usar comillas simples o dobles:

Ejemplo

document.getElementById('demo').innerHTML = 'Hello JavaScript';

JavaScript puede cambiar los atributos HTML

En este ejemplo se cambia una imagen HTML cambiando el atributo src (fuente) de una etiqueta <img>:

La bombilla

JavaScript puede cambiar los estilos HTML (CSS)

Cambiar el estilo de un elemento HTML, es una variante de cambiar un atributo HTML:

Ejemplo

document.getElementById("demo").style.fontSize = "25px";

JavaScript puede ocultar elementos HTML

Ocultación de elementos HTML se puede hacer cambiando el estilo de visualización:

Ejemplo

document.getElementById("demo").style.display = "none";

JavaScript puede mostrar los elementos HTML

Se muestran los elementos HTML ocultos también se puede hacer cambiando el estilo de visualización:

Ejemplo

document.getElementById("demo").style.display = "block";

JQuery

jQuery es una biblioteca JavaScript.

jQuery simplifica enormemente la programación JavaScript.

jQuery es fácil de aprender.

jQuery es un peso ligero, "escribir menos, hacer más", biblioteca de JavaScript.

El propósito de jQuery es para que sea mucho más fácil de usar JavaScript en su página web.

jQuery toma una gran cantidad de tareas comunes que requieren muchas líneas de código JavaScript para llevar a cabo, y los envuelve en los métodos que se pueden llamar con una sola línea de código.

jQuery también simplifica mucho las cosas complicadas de JavaScript, como las llamadas AJAX y la manipulación del DOM.

La librería jQuery contiene las siguientes características:

HTML manipulación / DOM
La manipulación de CSS
Métodos de evento HTML
Efectos y animaciones
AJAX
Utilidades

Consejo: Además, jQuery tiene plugins para casi cualquier tarea que hay.

¿Por qué jQuery?

Hay un montón de otros marcos de JavaScript por ahí, pero jQuery parece ser el más popular, y también la más extensible.

Muchas de las empresas más grandes en la Web utiliza jQuery, tales como:

google

microsoft

IBM

Netflix

jQuery sintaxis

La sintaxis de jQuery es hecho a medida para la selección de los elementos HTML y realizar alguna acción sobre el elemento (s).

Sintaxis básica es: $ ( selector ). acción ()

Un signo $ para definir / jQuery acceso

A ( Selector ) para "consulta (o encontrar)" elementos HTML

A jQuery acción () para ser realizado en el elemento (s)

Ejemplos:

$ (This) .hide () - oculta el elemento actual.

$ ( "P") ocultar () -. Disimular todo elementos <p>.

$ ( ". Test") ocultar () -. Oculta todos los elementos con class = "prueba".

$ ( "# Test") ocultar () -. Esconde el elemento con id = "prueba".

AppML

AppML significa App pu- M odeling L anguage.

AppML se ejecuta en cualquier página HTML. No se requiere instalación.

AppML es una herramienta para convertir los datos en las aplicaciones HTML:

A partir de los objetos
A partir de los archivos
A partir de las bases de datos

de texto Archivos Los archivos XML JSON archivos PHP / MySQL

¿Por AppML?

HTML está diseñado para describir documentos estáticos.

HTML no es muy adecuado para la descripción de aplicaciones web.

AppML está hecho a medida para aplicaciones web:

Se extiende HTML con datos de atributos.
Se añade controladores a HTML, para controlar el comportamiento de los datos HTML.

AppML es muy fácil de entender, y extraordinaria rapidez a desarrollar.

Ejemplo AppML

Este ejemplo muestra cómo AppML fácil puede aportar datos a HTML:

Ejemplo AppML

<!DOCTYPE html>
<html lang="en-US">

<title>Customers</title>
<link rel="stylesheet" href="style.css">
<script src="https://www.w3schools.com/appml/2.0.3/appml.js"></script>

<body>
<h1>Customers</h1>

<table appml-data="customers.js">
<tr>
  <th>Customer</th>
  <th>City</th>
  <th>Country</th>
</tr>
<tr appml-repeat="records">
  <td>{{CustomerName}}</td>
  <td>{{City}}</td>
  <td>{{Country}}</td>
</tr>
</table>

</body>
</html>

AngularJS

AngularJS es un marco de JavaScript . Puede ser agregado a una página HTML con una etiqueta <script>.

AngularJS extiende atributos HTML con las Directivas , y se une a los datos HTML con expresiones .

AngularJS es un framework JavaScript

AngularJS es un marco de JavaScript. Es una biblioteca escrito en JavaScript.

AngularJS se distribuye como un archivo JavaScript, y se puede agregar a una página web con una etiqueta de script:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

Extiende AngularJS HTML

AngularJS extiende HTML con NG-directivas .

El ng-app Directiva define una aplicación AngularJS.

El ng-modelo de directiva se une el valor de los controles HTML (input, select, textarea) para datos de aplicación.

El ng-bind Directiva se une datos de la aplicación a la vista HTML.

Ejemplo AngularJS

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

</body>
</html>

Ejemplo explicó:

AngularJS se inicia automáticamente cuando la página web se ha cargado.

El ng-app directiva indica AngularJS que el elemento <div> es el "dueño" de un AngularJS aplicación .

El ng-modelo de directiva se une el valor del campo de entrada a la variable de la aplicación nombre .

El ng-bind Directiva se une el innerHTML del elemento <p> para la variable de aplicación nombre .

AJAX

AJAX es el sueño de un desarrollador, ya que pueden:

Actualizar una página web sin tener que recargar la página
Solicitar datos de un servidor - después de que la página se ha cargado
Recibir datos de un servidor - después de que la página se ha cargado
Enviar datos a un servidor - en el fondo

Ejemplo AJAX

AJAX

AJAX is not a programming language.

AJAX is a technique for accessing web servers from a web page.

AJAX stands for Asyncronous JavaScript And XML.

Página HTML

<!DOCTYPE html>
<html>
<body>

<div id="demo">
  <h2>Let AJAX change this text</h2>
  <button type="button" onclick="loadDoc()">Change Content</button>
</div>

</body>
</html>

La página HTML contiene una sección <div> y <botón>.

La sección <div> se utiliza para mostrar información de un servidor.

El botón <> llama a una función (si se hace clic).

La función solicita datos desde un servidor web y lo muestra:

loadDoc función ()

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

¿Qué es AJAX?

AJAX = A síncrono J avascript Un nd X ML.

AJAX no es un lenguaje de programación.

AJAX sólo utiliza una combinación de:

Un navegador incorporado objeto XMLHttpRequest (para datos de solicitud desde un servidor web)

JavaScript y HTML DOM (mostrar o usar los datos)

AJAX es un nombre engañoso. aplicaciones AJAX pueden utilizar XML para transportar datos, pero es igualmente común para transportar datos como texto plano o texto JSON.

AJAX permite que las páginas web se actualicen de forma asincrónica mediante el intercambio de datos con un servidor Web detrás de las escenas. Esto significa que es posible actualizar partes de una página web, sin volver a cargar la página entera.

¿Como funciona AJAX?

1. Se produce un evento en una página web (la página se carga, se hace clic en un botón)
2. Un objeto XMLHttpRequest es creado por JavaScript
3. El objeto XMLHttpRequest envía una petición a un servidor web
4. El servidor procesa la solicitud
5. El servidor envía una respuesta de vuelta a la página Web
6. La respuesta es leído por JavaScript
7. La acción apropiada (como actualización de la página) se realiza mediante JavaScript

¿Qué es JSON?

JSON significa J ava S cripta O bject N flotación

JSON es un formato de intercambio de datos ligera

JSON es "auto-descripción" y fácil de entender

JSON es independiente del lenguaje *

JSON utiliza la sintaxis de JavaScript, pero el formato JSON es sólo texto.

El texto puede ser leído y utilizado como un formato de datos por cualquier lenguaje de programación.

El formato JSON se especificó originalmente por Douglas Crockford .

¿Por qué utilizar JSON?

Dado que el formato JSON es solamente de texto, que puede ser fácilmente enviado a y desde un servidor, y se utiliza como un formato de datos por cualquier lenguaje de programación.

JavaScript ha construido en función de convertir una cadena, escrito en formato JSON, en objetos JavaScript nativos:

JSON.parse()

Por lo tanto, si recibe datos de un servidor, en formato JSON, se puede utilizar como cualquier otro objeto de JavaScript.

Intercambio de datos

Al intercambiar datos entre un navegador y un servidor, los datos sólo pueden ser texto.

JSON es texto, y podemos convertir cualquier objeto JavaScript en JSON y JSON enviar al servidor.

También podemos convertir cualquier JSON recibido del servidor en objetos de JavaScript.

De esta manera se puede trabajar con los datos como objetos de JavaScript, sin análisis complicado y traducciones.

Envío de datos

Si tiene datos almacenados en un objeto JavaScript, puede convertir el objeto en JSON, y enviarlo a un servidor:

Ejemplo

var myObj = { "name":"John", "age":31, "city":"New York" };
var myJSON = JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;

Los datos que recibe

Si recibe datos en formato JSON, puede convertirlo en un objeto de JavaScript:

Ejemplo

var myJSON = '{ "name":"John", "age":31, "city":"New York" }';
var myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;

Almacenamiento de datos

Al almacenar los datos, los datos tienen que ser un determinado formato, y con independencia del lugar donde se desee almacenarlo, el texto es siempre uno de los formatos legales.

JSON hace posible el almacenamiento de objetos de JavaScript como texto.

Ejemplo

Almacenar datos en el almacenamiento local

//Storing data:myObj = { "name":"John", "age":31, "city":"New York" };
myJSON = JSON.stringify(myObj);
localStorage.setItem("testJSON", myJSON);

//Retrieving data:text = localStorage.getItem("testJSON");
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name;