JavaScript for Python Developers EuroPython 26th July, 2018 an - - PowerPoint PPT Presentation

▶
javascript for python developers
SMART_READER_LITE
LIVE PREVIEW

JavaScript for Python Developers EuroPython 26th July, 2018 an - - PowerPoint PPT Presentation

Mar 02, 2023 207 likes •701 views

JavaScript for Python Developers EuroPython 26th July, 2018 an Anderle Twitter: @z_anderle Raise your hand if JavaScript and Python developers https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f Overview

slide-1
SLIDE 1

JavaScript for Python Developers

EuroPython 26th July, 2018

Žan Anderle Twitter: @z_anderle

slide-2
SLIDE 2

Raise your hand if…

slide-3
SLIDE 3

JavaScript and Python developers

slide-4
SLIDE 4

https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f

slide-5
SLIDE 5
slide-6
SLIDE 6
slide-7
SLIDE 7

Overview

  • JavaScript history and versions
  • Basics of the language
  • JavaScript ecosystem
  • How to make sense of it all?
slide-8
SLIDE 8
slide-9
SLIDE 9

Overview

  • JavaScript history and versions
  • Basics of the language
  • Different tools
  • How to make sense of it all?
slide-10
SLIDE 10
slide-11
SLIDE 11

Overview

  • JavaScript history and versions
  • Basics of the language
  • Different tools
  • How to make sense of it all?
slide-12
SLIDE 12

Syntax

let myName = 'EuroPython 2018'; function sayHi(name) { console.log(`Hey there, ${name}`); } sayHi(myName); // 'Hey there, EuroPython 2018'; let someArray = [1, 2, 5, 10]; let newArray = []; for (let el of someArray) { if (el > 2) { newArray.push(el); } else { console.log('Nope!'); } } // 'Nope!' // 'Nope!'

slide-13
SLIDE 13

Syntax

class Hero { constructor(name, superPower) { this.name = name; this.superPower = superPower; } superPower() { console.log('I can count really fast!'); let count = 0; while (count < 1000) { count++; } return count; } } let superMan = new Hero('SuperMan'); superMan.superPower(); // 'I can count really fast!' // 1001

slide-14
SLIDE 14

Syntax

let x = 1; // x is a number x = 'Hi!'; // x is now a string x = () => { return 1; }; // x is now a function

slide-15
SLIDE 15

Syntax

slide-16
SLIDE 16

Variables

var x = 1; let name = 'John'; const someConstant = 45;

slide-17
SLIDE 17

Variable hoisting

var x = 1; // Some other code var name = 'John'; var x; var name; x = 1; // Some other code name = 'John';

slide-18
SLIDE 18

Variable hoisting

var txt = ["a","b","c"]; for (var i = 0; i < 3; ++i ) { var msg = txt[i]; setTimeout(function() { alert(msg); }, i*1000); } // Alerts 'c', 'c', 'c'

slide-19
SLIDE 19

Data Types

  • Boolean
  • String
  • Number
  • Null
  • Undefined
  • Object

let a = true; let b = false; let name = 'John'; name.length; // 4 let num = -124.56; num = 10; let empty = null; let unknown = undefined; let something = {key: 'A value', anotherKey: name}; let things = ['string', 2, (x, y) => { return x + y; }];

slide-20
SLIDE 20

Object literal

let bigObj = { key: 'Some string', add: function(x, y) { return x + y; }, anotherObj: { name: 'I am a nested object' } };

slide-21
SLIDE 21

Objects are mutable

slide-22
SLIDE 22

Operators

if (!a && b) { // Some code } else if (a || b) { // Some code }

slide-23
SLIDE 23

Operators

== and != OR === and !==

slide-24
SLIDE 24

Operators

slide-25
SLIDE 25

Functions

let func = function(a, b) { return a + b; }; let func = (a, b) => { return a + b; }; let func = (a, b) => a + b;

slide-26
SLIDE 26

Functions

function func(a = 1, b = 2) { return a + b; } func(5); // 7

slide-27
SLIDE 27

Functions

function func(a = 1, b = 2) { // Do some calculations } func(5); // undefined

slide-28
SLIDE 28

this

slide-29
SLIDE 29

this

slide-30
SLIDE 30

this

slide-31
SLIDE 31

Classes

slide-32
SLIDE 32

Modules

slide-33
SLIDE 33

Template literals

var a = 5; var b = 10; console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`); // "Fifteen is 15 and // not 20."

slide-34
SLIDE 34

Template literals

let a = 5; let b = 10; console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.'); // "Fifteen is 15 and // not 20."

slide-35
SLIDE 35

Promises

slide-36
SLIDE 36

Overview

  • JavaScript history and versions
  • Basics of the language
  • Different tools
  • How to make sense of it all?
slide-37
SLIDE 37

Bad Parts

  • Global variables
  • ==
  • +
  • scope
slide-38
SLIDE 38

TypeScript

slide-39
SLIDE 39

Overview

  • JavaScript history and versions
  • Basics of the language
  • Different tools
  • How to make sense of it all?
slide-40
SLIDE 40

Different tools

  • npm, bower, yarn
  • Babel
  • Webpack
  • gulp, grunt
slide-41
SLIDE 41

Different tools

  • npm, bower, yarn
  • Babel
  • Webpack
  • gulp, grunt
slide-42
SLIDE 42

Different tools

  • npm, bower, yarn
  • Babel
  • Webpack
  • gulp, grunt
slide-43
SLIDE 43

Different tools

  • npm, bower, yarn
  • Babel
  • Webpack
  • gulp, grunt
slide-44
SLIDE 44

Different tools

  • npm, bower, yarn
  • Babel
  • Webpack
  • gulp, grunt
slide-45
SLIDE 45
slide-46
SLIDE 46

Overview

  • JavaScript history and versions
  • Basics of the language
  • Different tools
  • How to make sense of it all?
slide-47
SLIDE 47

How to get started

  • Start somewhere
  • Prepare your codebase
  • No need to learn and use everything at once
slide-48
SLIDE 48
slide-49
SLIDE 49

Thank you! Questions?