Taller de JavaScript

Taller presentado en el WordCamp San José de Costa Rica 2018.

https://2018.sanjose.wordcamp.org/taller-js-para-wordpress/

Transcript

1. Taller de JavaScript WordCamp San José 2018 Por Elio Rivero
2. Breve historia 1995
 Mocha -> LiveScript -> JavaScript 1997
 Primer estándar ECMA 1998
 Alex Hopmann - Microsoft: XMLHttpRequest 2002
 Douglas Crockford: JSON Brendan Eich
3. Tipos Boolean Object Number String Symbol Null Undefined true/false { pura: “vida” } 123456 “pura vida” const VIDA = Symbol( ‘pura’ ) null undefined
4. Tipos typeof null “object” null + {} "null[object Object]” {} + null <——?? Null
5. Tipos typeof [ 1, 2, 3 ] “object” Object
6. Tipos [ 1, 2, 3 ] 0: 1
 1: 2
 2: 3
 length: 3
 __proto__: Array(0) { a:1, b:2, c:3 }
 a: 1
 b: 2
 c: 3
 __proto__: Object Object
7. Tipos const noEsUnNumero = NaN
 typeof noEsUnNumero
 
 “number” const alInfinitoYMasAlla = Infinity
 typeof alInfinitoYMasAlla “number” Number
8. Tipos const agua = Symbol()
 const igualQueAgua = Symbol()
 agua === igualQueAgua false Symbol
9. JSON const aJSON = {
 array: [ 1, 2, 3 ],
 boolean: true,
 null: null,
 number: 123,
 object: {
 a: "b",
 c: "d",
 e: "f"
 },
 string: "Hello World"
 };
10. JSON enJSON = JSON.stringify( aJSON ); ‘{"array": [1,2,3],"boolean":true,"null":null,"number": 123,"object": {"a":"b","c":"d","e":"f"},"string":"Hello World”}’ JSON.parse( enJSON ) es igual a aJSON
11. JSON + REST API [ {
 "id": 6545,
 "date": "2018-06-14T09:58:23",
 "date_gmt": "2018-06-14T12:58:23",
 "guid": { "rendered": “https://elio.blog/?p=6545" },
 "modified": "2018-06-14T18:18:48",
 "modified_gmt": "2018-06-14T21:18:48",
 "slug": "tram-in-lisbon",
 "status": "publish",
 "type": “post",
 "link": "https://elio.blog/tram-in-lisbon/",
 "title": { "rendered": "Tram in Lisbon” },
 "content": {
 "rendered": "<p>Cute trams roaming through the narrow Lisbon streets.</p>",
 "protected": false
 },
 "excerpt": {
 "rendered": "<p>Trams in Lisbon are part of their identity.</p>\n”,
 "protected": false
 },
 "author": 1,
 "featured_media": 6560,
 "comment_status": "open",
 "ping_status": "open",
 "sticky": false,
 "template": "",
 "format": "standard",
 "meta": [],
 "categories": [ 4 ],
 "tags": [ 94, 103, 109 ],
 "_links": { … }
 }, { … }, { … }, { … } ] https://elio.blog/wp-json/wp/v2/posts
12. Librerías JS en WP • jQuery • Backbone • WP API • Underscore • imagesloaded • Masonry • MediaElement y muchos más… Ruta de librerías en WP /wp-includes/js/
13. Carga de JS wp_enqueue_script() • head o footer • versiones • dependencias
14. Carga de JS wp_register_script() • mejor para aplicaciones grandes • múltiples cargas con wp_enqueue_script() • registro para dependientes
15. Carga de JS wp_register_script(
 'tallerjs',
 plugins_url( 'js/script.js', __FILE__ ),
 array(
 'jquery',
 'tallerjs-lodash',
 'tallerjs-moment'
 ),
 false,
 true
 );
16. Carga de JS wp_enqueue_script( ‘tallerjs’ );
17. Cuándo registrar el JS ‘wp_enqueue_scripts’ • action hook • antes de generar la página • también pasar datos de PHP
18. Datos de PHP a JS wp_localize_script() • array asociativo en PHP => objeto en JS • asociado al script • al registrar
19. Carga de JS wp_localize_script(
 'tallerjs', 
 'tallerJsData',
 array(
 ‘wpApiRoot’ => esc_url_raw( rest_url() )
 )
 );
20. https://www.ecma-international.org/ecma-262/ https://web.archive.org/web/20070623125327/http:// www.alexhopmann.com/xmlhttp.htm http://json.org/ http://2ality.com/2014/12/es6-symbols.html https://medium.com/dailyjs/the-why-behind-the-wat-an-explanation-of- javascripts-weird-type-system-83b92879a8db https://es6console.com/ https://developer.wordpress.org/rest-api/ https://jsoneditoronline.org/
21. https://developer.wordpress.org/reference/functions/ wp_enqueue_script/ https://lodash.com/ https://momentjs.com/