O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Java script.trend(spec)

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Próximos SlideShares
Modern Mobile Web Apps
Modern Mobile Web Apps
Carregando em…3
×

Confira estes a seguir

1 de 71 Anúncio
Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Quem viu também gostou (20)

Anúncio

Semelhante a Java script.trend(spec) (20)

Mais de dynamis (20)

Anúncio

Mais recentes (20)

Java script.trend(spec)

  1. 1. 
 HTML5 CSS3 ECMA6DOM4 HTTP/2
  2. 2. 
 
 
 

  3. 3. 
 

  4. 4.
  5. 5. var gulp = require("gulp"); var babel = require("gulp-babel"); var concat = require("gulp-concat"); gulp.task("default", function () { return gulp.src("src/**/*.js") .pipe(babel()) .pipe(concat("all.js")) .pipe(gulp.dest("dist")); }); $ npm install gulp-babel babel-preset-es2015 gulp-concat gulp-sourcemaps --save-dev $ echo '{ "presets": ["es2015"] }' > .babelrc
  6. 6. var gulp = require("gulp"); var sourcemaps = require("gulp-sourcemaps"); var babel = require("gulp-babel"); var concat = require("gulp-concat"); gulp.task("default", function () { return gulp.src("src/**/*.js") .pipe(sourcemaps.init()) .pipe(babel()) .pipe(concat("all.js")) .pipe(sourcemaps.write(".")) .pipe(gulp.dest("dist")); });
  7. 7. import gulp from "gulp" import babel from "gulp-babel" import concat from "gulp-concat" gulp.task("default", () => { return gulp.src("src/**/*.js") .pipe(babel()) .pipe(concat("all.js")) .pipe(gulp.dest("dist")); }); // これくらいのサンプルじゃ嬉しくも何ともないけど... $ npm install babel-core babel-preset-es2015 gulp-babel gulp-concat --save-dev $ echo '{ "presets": ["es2015"] }' > .babelrc
  8. 8. var color = "Red" var browsers = { fx: "Firefox", op: "Opera" } var secret = `${color} Panda is ${browsers.fx}! ${color} Browser is ${browsers.op}!` // ECMAScript 5th // 文字列はひたすら + 演算子で連結 secret = color + " Panda is " + browsers.fx + "!n" + color + " Browser is " + browsers.op + "!"
  9. 9. var tag = `<a href="...">Can't stop using ES6!</a>` var re = `"[^"]*"|'[^']*'` var list = `<ul> <li>firefox <li>red panda <li>lesser panda <li>petit panda </li>`
  10. 10. function panda(s = "lesser") { return `${s} panda` } panda() === "lesser panda" panda("red") === "red panda" // ECMAScript 5th function panda(s) { if (s === undefined) { s = "lesser" } return s + "panda" }
  11. 11. function log(x, y, ...rest) { console.log(x, y, rest) } log(1, 2, 3, 4, 5) // 1 2 [3, 4, 5] log(0) // 0 undefinded [] // ECMAScript 5th function log(x, y) { var a = Array.prototype.slice.call(arguments, 2) console.log (x, y, a) };
  12. 12. var array = [ "hello", true, 7 ] var params = [ 1, 2, ...array ] sum(1, 2, ...params) === 9 var str = "fox" var chars = [ ...str ] // [ "f", "o", "x" ] // ECMAScript 5th var array = [ "hello", true, 7 ] var params = [ 1, 2 ].concat(array) sum.apply(null, [ 1, 2 ].concat(params)) === 9 var str = "fox" var chars = str.split("") // [ "f", "o", "x" ]
  13. 13. [a, b] = [b, a] var [c,d] = (function f() { return [1,2]; })() var [e,,[x,y],z=100] =[3,4,[10,20]]
  14. 14. var fx={ name:"Firefox", vendor:"Mozilla", ver:26 } var ch={ name:"Chrome", vendor:"Google", ver:31 } var browsers={ firefox: fx, chrome: ch } var { name: n, ver: v } = fx // -> n="Firefox", v=26 (function ({ vendor: ven }) { console.log(ven) })(fx); // -> "Mozilla"
  15. 15. class Animal { constructor(name) { this.name = name; this.hungry = true; } eat() { this.hungry = false; } run() { this.hungry = trye; } }
  16. 16. class LesserPanda extends Animal { constructor(name, tail) { super(name); this.tail = tail; } }
  17. 17. function Animal(name) { this.name = name; this.hungry = true; } Animal.prototype.eat = function() { this.hungry = false; } Animal.prototype.run = function() { this.hungry = true; }
  18. 18. function LesserPanda(name, tail) { Animal.call(this, name); this.tail = tail; } LesserPanda.prototype = Object.create(Animal.prototype); LesserPanda.prototype.constructor = LesserPanda;
  19. 19. { let a = 1, b = 10; let (a = 100, c = 300) console.log(a); // -> 100 for (let a=0; a<3; a++) { console.log(a+b); // -> 10, 11, 12 } console.log(a); // -> 1 } console.log(a); // × ReferenceError: a is not defined
  20. 20. var browser = "Edge"; { // block scope let browser = "Firefox"; } browser === "Edge"; // ECMAScript 5th // 変数のスコープは関数スコープしか存在しなかった var browser = "Edge"; (function(){ // function scope hack... var browser = "Firefox"; })() browser === "Edge";
  21. 21. { function browser() { return "Edge"; } browser() === "Edge"; // true { function browser() { return "Firefox"; } browser() === "Firefox"; // true } browser() === "Edge"; // true }
  22. 22. const browser = "Firefox"; const browser = "Internet Explorer"; browser = "Chrome"; console.log(browser); // -> "Firefox"
  23. 23. [1,2,3].map(x => x * x); setInterval(() => { alert("HEY! 提督ぅー!alertしてもイイけどサー、時間と場所をわきまえな ヨー!"); }, Math.random()*10*1000); var factorial=((f=n=>n>1 ?n*f(n-1):1)=>(f))(); factorial(10); // 3628800
  24. 24. odds = evens.map(v => v + 1) pairs = evens.map(v => ({ even: v, odd: v + 1 })) nums = evens.map((v, i) => v + i) halfs = evens.map(v => { return v / 2 }) // ECMAScript 5th odds = evens.map(function (v) { return v + 1; }) pairs = evens.map(function (v) { return { even: v, odd: v + 1 } }) nums = evens.map(function (v, i) { return v + i; })
  25. 25. function Person(){ this.age = 0 setInterval(() => { this.age++ // this は Person オブジェクト }, 1000) } var p = new Person()
  26. 26. function doFirstAsync(fileurl) { return new Promise(function(resolve,reject) { $.ajax({ src: fileurl, dataType: "json" }).done(function(data){ resolve(data); }); } } async function task(param) { await new Promise((resolve) => { setTimeout(resolve,1000); }); let first = await doFirstAsync(".../first.json") let second = await doSecondAsync(".../second.json") let third = await doThirdAsync(".../third.json") // ...取得したデータを使って色々処理 };
  27. 27. 
 
 

  28. 28. var set = new Set() // 集合に追加・確認・削除 set.add("Firefox") set.add("Thunderbird") set.add(+0);
 set.add(NaN) set.has("Firefox")  // -> true set.has("Sunbird")  // -> false set.delete("Firefox") set.has("Firefox")  // -> false // -0 と +0 は同値と見なす (初期実装と異なる), NaN は自身と一致 // 初期の仕様・実装では -0 と +0 は区別されていたが変更された set.has(-0)   // -> true set.has(NaN)   // -> true ここが === での比較と異なるので注意
  29. 29. var map = new Map() var str = "Mozilla", obj = {}, func = function(){} // Map に値を格納 map.set(str, "Firefox") map.set(obj, "Thunderbird") map.set(func, "Japan") // キーに対応する値を取得 map.get(str)    // -> "Firefox" map.get(obj)    // -> "Thunderbird" map.get(func)  // -> "Japan" // 設定したキーと引数の比較は == ではないので注意 map.get("Mozilla")  // -> "Firefox" map.get({})          // -> undefined map.get(function(){}) // -> undefined
  30. 30. 大規模アプリの処理速度では C 言語が圧倒的に早かった (小規模アプリや一部ベンチ限定なら既に十分高速だった)
  31. 31. asm.js 導入直後で C の 2 倍遅い程度、今では数割程度の違い (Java や C# の処理速度と同程度以上の水準に)
  32. 32.

×