wlw

Appearance

Return to top
On this page
JavaScript Basics
1

JavaScript

ES6, ECMA

(Crash Course für Entwickler mit Java Hintergrund)

02.11.2022
JavaScript Basics
2

JavaScript

  • Skriptsprache für den Web Browser
  • Heute via NodeJS auch ausserhalb des Browsers im Einsatz
  • Code kann im Browser zur Laufzeit ausgeführt werden (ohne kompiliert zu sein)
02.11.2022
JavaScript Basics
3

In Webseite einbauen

html
<html>
<head>
  <script>
  console.log("hello")
  </script>
</head>
<body>
</body>
</html>
02.11.2022
JavaScript Basics
4

Console Output

  • Im Webbrowser mit Debug Tools sichtbar (F12)
02.11.2022
JavaScript Basics
5

Dynamisch Typisiert

  • Keine strikte Typen
    • Wilder Westen
  • Objekte als Baumstruktur
    • ... aber ohne Klassen
  • Was sind Nachteile von dynamischer Typisierung?
02.11.2022
JavaScript Basics
6

Funktionale Sprache

  • Funktionen können Variablen zugewiesen werden
  • Funktionen können als Parameter anderen Funktionen mitgegeben werden.
02.11.2022
JavaScript Basics
7

JS Runtime

  • Chrome V8 JS Engine
  • Interpreter
  • Hochoptimiert!
02.11.2022
JavaScript Basics
8

NodeJS

  • Runtime ohne Webbrowser
  • Ideal für Terminalprogramme (als Gegenpol zu Pyhton)
  • Package Management!
  • Mit Frameworks wie expressjs sehr zugänglicher Webserver
02.11.2022
JavaScript Basics
9

Vorteile von JS

  • wie bei Python schnelles Protoyping möglich
  • je nach Anwendungsfall bedeutend bessere Performance als Python
  • wie bei Python riesiges Ökosystem an Frameworks und Libs
  • für Entwickler mit C / Java Hintergrund einfacher Einstieg dank Syntax
02.11.2022
JavaScript Basics
10

Nachteile von JS

  • Dynamische Typisierung
  • ... heisst ohne Compiler
  • ... heisst Crashes und Problem im Feld anstelle von Compilerverweigerung
  • ... typisch: Nullpointers / Undefined Variable
02.11.2022
JavaScript Basics
11

JSON

  • Object Notation
json
{
  "id" : 100,
  "content" : [
    {
      "name": "ls",
      "desc": "lists files"
    },
    {
      "name": "rm",
      "desc": "deletes files"
    }
  ]
}
02.11.2022
JavaScript Basics
12

JSON Einsatz

  • Nr. 1 Datenformat bei Web APIs
  • Speichern von Daten lokal
  • Hauptvorteil gegenüber anderen Notationen:
    • Human Readable!!
02.11.2022
JavaScript Basics
13

JS Funktionen

Funktionen können als Variablen deklariert werden.

02.11.2022
JavaScript Basics

Beispiel Funktionen

14
js

const hello = () => {
    console.log("hello from the terminal")
};

const greetWith = (helloMethod) => {
    console.log("careful, I am greeting now!")
    helloMethod();
};

greetWith(hello);
02.11.2022
JavaScript Basics

Object on the Fly

15
js
const linuxEntry = {
    command: "ls",
    description: "Lists Files in cwd"
};
02.11.2022
JavaScript Basics
16

Semicolon

  • Nicht notwendig
02.11.2022
JavaScript Basics
17

Variablen Deklarieren

js
// immutable variable
const message = "hello"; 

// mutable variable
let currentEntry = 1;
currentEntry = 2;
02.11.2022
JavaScript Basics
18

Immutability: Faustregel

Standardmässig soll immer const verwendet werden.

Nur wenn eine Variable mutabale sein soll let verwenden.

02.11.2022
JavaScript Basics
19

Immutable Objects

js
const linuxEntry = {
    command: "ls",
    description: "Lists Files in the current working directory"
};

// totally safe!
linuxEntry.command = "ls -al"

// forbidden!
linuxEntry = {};
02.11.2022
JavaScript Basics
20

Array Beispiel

js
const commands = [
  {
    name: 'ls',
    desc: 'lists Files'
  },
  {
    name: 'rm',
    desc: 'deletes Files'
  },
  {
    name: 'cd',
    desc: 'changes dir'
  }
];
02.11.2022
JavaScript Basics
21

forEach Loop

js
for(const cmd of commands){
  console.log(`command: ${cmd.name}`);
}
02.11.2022
JavaScript Basics
22

forEach Array function

js
commands.forEach((cmd) => {
  console.log(`command: ${cmd}`);
});
02.11.2022
JavaScript Basics
23

push: Add to Array

  • Arrays können im Gegensatz zu Java während der Laufzeit erweitert werden: Arrays verhalten sich wie Listen
js
commands.push({
  name: 'curl',
  desc: 'executes http request'
});
02.11.2022
JavaScript Basics
24

map()

  • Sehr wichtige Funktion!
js
const names = commands.map((cmd) => {
  return `name: ${cmd.name}`;
});

console.log('names', names); // ein Array
console.log(names.join('/')); // ein String
02.11.2022
JavaScript Basics

Objekt Returnen (Short)

25
  • Beachten ({ ... }) ohne return statement
js
const names = commands.map((cmd) => ({
  name: cmd.name;
}));

console.log('objects', names);
// ein Array

console.log(names.map((n) => n.name).join('/'));
// ein String
02.11.2022
JavaScript Basics
26

filter()

js
const withFiles = 
  commands.filter(cmd => cmd.desc.includes('Files'));
console.log('commands with files', withFiles);
02.11.2022
JavaScript Basics

Object with Keys

27
js
const commands = {
  'ls' : {
    'desc': 'lists Files'
  },
  'rm' : {
    'desc' : 'deletes Files'
  },
  'pwd' {
    'desc' : 'current working dir'
  }
};
02.11.2022
JavaScript Basics
28

Enumerate Keys

js

// Array mit ls, rm, pwd als string
const keys = Object.keys(commands);

for(const k of keys) {
  console.log(`${k} => ${commands[k].desc}`);
}
02.11.2022
JavaScript Basics
29

Browser JS ist Singlethreaded

  • JavaScript im Browser ist Singlethreaded
    • Worksers als alternative
  • ... daher Problematisch, da nur immer etwas ausgeführt werden kann.
  • Problem: fetch request => Blockiert den Thread!
02.11.2022
JavaScript Basics

Promises

30
  • fetch Returnt ein Promise. Es wird implementiert, was passieren soll, wenn das Resultat bereit ist
  • Java: Ereignisorientiert mit ActionListener Callback
js
const promise = fetch('https://google.ch');
promise.then((res) => {
  console.log('res: ' + res);
});
promise.catch((err) => {
  console.log('error: ' + err);
});
02.11.2022
JavaScript Basics

Besser: Async / Await

31
  • Code besser lesbar
  • keine Callback Hell
js
const startRequest = async () => {
  try {
    const res = await fetch('https://google.ch');
    console.log(`res: ${res}`);
  } catch(err) {
    console.log(`error: {err}`);
  }
}

startRequest();
02.11.2022
JavaScript Basics
32

JS Template Strings

js

const command = {
  name: "ls",
  desc: "lists files"
};

console.log(`command: ${command.name}: ${command.desc}`);
02.11.2022
JavaScript Basics

JS Pseudoklassen

33
  • Methode gibt Objekt mit Methoden zurück (Konstruktorersatz) - name ist hier Pseudoattribut.
js

const init = (name) => {

  const printCommand = () => {
    console.log(`command: ${name}`);
  }

  return {
    printCommand,
  }
};

const ls = init("ls");
const pwd = init("pwd");
ls.printCommand();
pwd.printCommand();
02.11.2022