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
¿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:
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;
No hay comentarios:
Publicar un comentario