CS498RK SPRING 2020 e s 6 ADVANCED JS & CSS flexb ox
ES6
WHAT IS ES6? ES (ECMAScript) is a scripting language standard . JavaScript implements ECMAScript. ES6 means the 6th Edition of ECMAScript.
Timelin e 6 years later, ES6! Started in 1997, yearly updates up to 2000 Plethora of new features! 2000: ES4 2019: ES10 2015: ES6 2017: ES8 1998: ES2 (Abandoned) 2020 1997: ES1 2018: ES9 2016: ES7 2009: ES5 1999: ES3 10 years later, ES5. Yearly updates since ES6. Not much new stuff.
ES6 FEATURES Let & Const Rest & Spread Arrow Functions New Array Methods Default Parameters Classes Template Literals Modules Destructuring an d mor e !
LET befor e afte r var x = 1; let x = 1; if (x === 1) { if (x === 1) { var x = 2; let x = 2; console.log(x); // 2 console.log(x); // 2 } } console.log(x); // 2 console.log(x); // 1
CONST befor e afte r var num = 42; const num = 42; try { try { num = 99; num = 99; } catch (err) { } catch (err) { console.log(x); // no err console.log(x); // TypeError } } console.log(num); // 99 console.log(num); // 42
ARROW FUNCTIONS befor e const arr = [1, 2, 3]; const squares = arr.map(function (x) { return x * x }); afte r const arr = [1, 2, 3]; const squares = arr.map(x => x * x );
ARROW FUNCTIONS function MyComponent() { const button = document.getElementById('myButton'); const obj = this; befor e button.addEventListener('click', function () { obj.handleClick(); }); } function MyComponent() { const button = document.getElementById('myButton'); afte r button.addEventListener('click', () => { this.handleClick(); }); }
DEFAULT PARAMETERS befor e afte r function magic(x, y) { function magic(x = 0, y = 0) { x = x || 0; ... y = y || 0; } ... }
TEMPLATE LITERALS befor e function greet(first, last) { console.log('Hello ' + first + ' ' + last + '!'); } afte r function greet(first, last) { console.log(`Hello ${first} ${last}!`); }
TEMPLATE LITERALS befor e afte r var HTML5_SKELETON = const HTML5_SKELETON = ` '<!doctype html>\n' + <!doctype html> '<html>\n' + <html> ' <head>\n' + <head> ' <title></title>\n' + <title></title> ' <meta charset="UTF-8">\n' + <meta charset="UTF-8"> ' </head>\n' + </head> ' <body>\n' + <body> ' </body>\n' + </body> '</html>\n' </html>`
DESTRUCTURING // Assignment const numbers = [1, 2, 3]; const [one, two, three] = numbers; // Works with objects too! // Swapping const obj = { bar: 42, baz: true }; let a = 1; const { bar, baz } = obj; let b = 2; [a, b] = [b, a] // Can also rename variables const { bar: qux, baz: quux } = obj; // Ignoring const foo = () => [1, 2, 3]; let [p, , q] = foo();
REST function secret(first, ...others) { console.log(first); console.log(others); } secret(1, 2, 3, 4, 5); accessin g th e "res t " of th e argument s
SPREAD var arr1 = ['a', 'b']; var arr2 = ['c']; befor e var arr3 = ['d', 'e']; console.log(arr1.concat(arr2, arr3)); // ['a', 'b', 'c', 'd', 'e'] const arr1 = ['a', 'b']; const arr2 = ['c']; afte r const arr3 = ['d', 'e']; console.log([...arr1, ...arr2, ...arr3]); // ['a', 'b', 'c', 'd', 'e']
SPREAD const arr = [1, 2, 3]; const copyOfArr = [...arr]; copyin g a n arra y
NEW ARRAY METHODS const arr = [1, 2, 3]; arr.forEach(n => console.log(n)); // prints 1, 2, 3 arr.map(n => n * n); // returns [1, 4, 9] arr.find(n => n > 1); // returns 2 arr.filter(n => n > 1); // returns [2, 3] arr.some(n => n > 1); // returns true arr.every(n => n > 1); // returns false arr.reduce((n, acc) => acc + n, 0); // returns 6 an d mor e …
CLASSES befor e afte r class Person { function Person(name) { constructor(name) { this.name = name; this.name = name; } } describe() { Person.prototype.describe = function () { return `Person called ${this.name}`; return 'Person called' + this.name; } } }
CLASSES befor e function Employee(name, title) { Person.call(this, name); this.title = title; } Employee.prototype = Object.create(Person.prototype); Employee.prototype.constructor = Employee; Employee.prototype.describe = function () { return Person.prototype.describe.call(this) + ' (' + this.title + ') '; }
CLASSES afte r class Employee extends Person { constructor(name, title) { super(name); this.title = title; } describe() { return `${super.describe()} (${this.title})`; } }
MODULES befor e // ----- lib.js ------- var sqrt = Math.sqrt; function square(x) { return x * x; // ------ main.js ------ } var square = require('./lib').square; function diag(x, y) { var diag = require('./lib').diag; return sqrt(square(x) + square(y)); } console.log(square(11)) // 121 console.log(diag(3, 4)) // 5 module.exports = { sqrt: sqrt, square: square, diag: diag, }
MODULES afte r // ----- lib.js ------- export const sqrt = Math.sqrt; export const square = x => x * x; export const diag = (x, y) => sqrt(square(x) + square(y)); // ------ main.js ------ import { square, diag } from './lib'; console.log(square(11)) // 121 console.log(diag(3, 4)) // 5
MODULES befor e afte r // ------ myFunc.js ------ // ------ myFunc.js ------ module.exports = function () { ... } export default function () { ... } // ------- main.js ------- // ------- main.js ------- var myFunc = require('./myFunc') import myFunc from './myFunc'; myFunc(); myFunc();
RESOURCES http://exploringjs.com/es6/ https://github.com/lukehoban/es6features http://es6-features.org
FLEXBOX
WHAT IS FLEXBOX? Flexbox is a layout model which aims to make it easier to lay out and align elements dynamically. Main Idea: Containers have the ability to adjust their content dynamically. Flexbox is direction-agnostic : can accommodate both horizontal and vertical layouts.
TERMINOLOGY
Containe r /Paren t Prope r tie s
DISPLAY .container { display: flex; }
FLEX-DIRECTION .container { flex-direction: row | row-reverse | column | column-reverse; }
FLEX-WRAP .container { flex-wrap: nowrap | wrap | wrap-reverse; }
FLEX-FLOW .container { flex-flow: <flex-direction> || <flex-wrap>; }
JUSTIFY-CONTENT .container { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; }
ALIGN-ITEMS .container { align-items: stretch | flex-start | flex-end | center | baseline; }
ALIGN-CONTENT .container { align-content: flex-start | flex-end | center | stretch | space-between | space-around; }
Ite m /Chil d Prope r tie s
ORDER .item { order: <integer>; }
FLEX-GROW/SHRINK/BASIS .item { flex-grow: <integer>; flex-shrink: <integer>; flex-basis: <length> | auto; }
FLEX .item { flex: none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; }
ALIGN-SELF .item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
RESOURCES https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://developer.mozilla.org/en-US/docs/Learn/CSS/ CSS_layout/Flexbox https://flexboxfroggy.com/
NEXT CLASS: RESPONSIVE DESIGN https://uiuc-web-programming.gitlab.io/sp20/
Recommend
More recommend
