ADVANCED JS & CSS flexb ox ES6 WHAT IS ES6? ES (ECMAScript) is - - PowerPoint PPT Presentation

▶
advanced js css
SMART_READER_LITE
LIVE PREVIEW

ADVANCED JS & CSS flexb ox ES6 WHAT IS ES6? ES (ECMAScript) is - - PowerPoint PPT Presentation

Jan 24, 2023 276 likes •712 views

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

slide-1
SLIDE 1

CS498RK SPRING 2020

ADVANCED JS & CSS

es6 flexbox

slide-2
SLIDE 2

ES6

slide-3
SLIDE 3

ES (ECMAScript) is a scripting language standard. JavaScript implements ECMAScript. ES6 means the 6th Edition of ECMAScript.

WHAT IS ES6?

slide-4
SLIDE 4

Timeline

2020

1998: ES2 2000: ES4 (Abandoned) 2015: ES6 2017: ES8 1997: ES1 1999: ES3 2009: ES5 2016: ES7 2018: ES9

Yearly updates since ES6.

2019: ES10

Started in 1997, yearly updates up to 2000 10 years later, ES5. Not much new stuff. 6 years later, ES6! Plethora of new features!

slide-5
SLIDE 5

Let & Const Arrow Functions Default Parameters Template Literals Destructuring Rest & Spread New Array Methods Classes Modules

ES6 FEATURES

and more!

slide-6
SLIDE 6

var x = 1; if (x === 1) { var x = 2; console.log(x); // 2 } console.log(x); // 2

LET

let x = 1; if (x === 1) { let x = 2; console.log(x); // 2 } console.log(x); // 1

before after

slide-7
SLIDE 7

CONST

var num = 42; try { num = 99; } catch (err) { console.log(x); // no err } console.log(num); // 99

before after

const num = 42; try { num = 99; } catch (err) { console.log(x); // TypeError } console.log(num); // 42

slide-8
SLIDE 8

ARROW FUNCTIONS

const arr = [1, 2, 3]; const squares = arr.map(function (x) { return x * x }); const arr = [1, 2, 3]; const squares = arr.map(x => x * x );

before after

slide-9
SLIDE 9

ARROW FUNCTIONS

before after

function MyComponent() { const button = document.getElementById('myButton'); const obj = this; button.addEventListener('click', function () {

  • bj.handleClick();

}); } function MyComponent() { const button = document.getElementById('myButton'); button.addEventListener('click', () => { this.handleClick(); }); }

slide-10
SLIDE 10

DEFAULT PARAMETERS

function magic(x, y) { x = x || 0; y = y || 0; ... } function magic(x = 0, y = 0) { ... }

before after

slide-11
SLIDE 11

TEMPLATE LITERALS

function greet(first, last) { console.log('Hello ' + first + ' ' + last + '!'); } function greet(first, last) { console.log(`Hello ${first} ${last}!`); }

before after

slide-12
SLIDE 12

TEMPLATE LITERALS

var HTML5_SKELETON = '<!doctype html>\n' + '<html>\n' + ' <head>\n' + ' <title></title>\n' + ' <meta charset="UTF-8">\n' + ' </head>\n' + ' <body>\n' + ' </body>\n' + '</html>\n' const HTML5_SKELETON = ` <!doctype html> <html> <head> <title></title> <meta charset="UTF-8"> </head> <body> </body> </html>`

before after

slide-13
SLIDE 13

DESTRUCTURING

// Assignment const numbers = [1, 2, 3]; const [one, two, three] = numbers; // Swapping let a = 1; let b = 2; [a, b] = [b, a] // Ignoring const foo = () => [1, 2, 3]; let [p, , q] = foo(); // Works with objects too! const obj = { bar: 42, baz: true }; const { bar, baz } = obj; // Can also rename variables const { bar: qux, baz: quux } = obj;

slide-14
SLIDE 14

REST

accessing the "rest" of the arguments

function secret(first, ...others) { console.log(first); console.log(others); } secret(1, 2, 3, 4, 5);

slide-15
SLIDE 15

SPREAD

var arr1 = ['a', 'b']; var arr2 = ['c']; var arr3 = ['d', 'e']; console.log(arr1.concat(arr2, arr3)); // ['a', 'b', 'c', 'd', 'e'] const arr1 = ['a', 'b']; const arr2 = ['c']; const arr3 = ['d', 'e']; console.log([...arr1, ...arr2, ...arr3]); // ['a', 'b', 'c', 'd', 'e']

before after

slide-16
SLIDE 16

SPREAD

const arr = [1, 2, 3]; const copyOfArr = [...arr];

copying an array

slide-17
SLIDE 17

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

and more…

slide-18
SLIDE 18

CLASSES

function Person(name) { this.name = name; } Person.prototype.describe = function () { return 'Person called' + this.name; } class Person { constructor(name) { this.name = name; } describe() { return `Person called ${this.name}`; } }

before after

slide-19
SLIDE 19

CLASSES

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 + ') '; }

before

slide-20
SLIDE 20

CLASSES

class Employee extends Person { constructor(name, title) { super(name); this.title = title; } describe() { return `${super.describe()} (${this.title})`; } }

after

slide-21
SLIDE 21

MODULES

// ----- lib.js ------- var sqrt = Math.sqrt; function square(x) { return x * x; } function diag(x, y) { return sqrt(square(x) + square(y)); } module.exports = { sqrt: sqrt, square: square, diag: diag, }

before

// ------ main.js ------ var square = require('./lib').square; var diag = require('./lib').diag; console.log(square(11)) // 121 console.log(diag(3, 4)) // 5

slide-22
SLIDE 22

MODULES

// ----- 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

after

slide-23
SLIDE 23

MODULES

// ------ myFunc.js ------ module.exports = function () { ... } // ------- main.js ------- var myFunc = require('./myFunc') myFunc(); // ------ myFunc.js ------ export default function () { ... } // ------- main.js ------- import myFunc from './myFunc'; myFunc();

before after

slide-24
SLIDE 24

http://exploringjs.com/es6/ https://github.com/lukehoban/es6features http://es6-features.org

RESOURCES

slide-25
SLIDE 25

FLEXBOX

slide-26
SLIDE 26

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.

slide-27
SLIDE 27

TERMINOLOGY

slide-28
SLIDE 28

Container/Parent Properties

slide-29
SLIDE 29

DISPLAY

.container { display: flex; }

slide-30
SLIDE 30

FLEX-DIRECTION

.container { flex-direction: row | row-reverse | column | column-reverse; }

slide-31
SLIDE 31

FLEX-WRAP

.container { flex-wrap: nowrap | wrap | wrap-reverse; }

slide-32
SLIDE 32

FLEX-FLOW

.container { flex-flow: <flex-direction> || <flex-wrap>; }

slide-33
SLIDE 33

JUSTIFY-CONTENT

.container { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; }

slide-34
SLIDE 34

ALIGN-ITEMS

.container { align-items: stretch | flex-start | flex-end | center | baseline; }

slide-35
SLIDE 35

ALIGN-CONTENT

.container { align-content: flex-start | flex-end | center | stretch | space-between | space-around; }

slide-36
SLIDE 36

Item/Child Properties

slide-37
SLIDE 37

ORDER

.item {

  • rder: <integer>;

}

slide-38
SLIDE 38

FLEX-GROW/SHRINK/BASIS

.item { flex-grow: <integer>; flex-shrink: <integer>; flex-basis: <length> | auto; }

slide-39
SLIDE 39

FLEX

.item { flex: none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; }

slide-40
SLIDE 40

ALIGN-SELF

.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }

slide-41
SLIDE 41

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/

slide-42
SLIDE 42

NEXT CLASS: RESPONSIVE DESIGN

https://uiuc-web-programming.gitlab.io/sp20/