Dev Ops - JavaScript

Question 1

Allgemein (6)

Answer 1

(1) Scriptbasierte Programmiersprache für interaktive Webseiten
(2) Schwach typisiert: Kein Laufzeitschutz aber Variablen-Datentypen lassen sich nachträglich ändern
(3) TypeScript = JavaScript + Starke Typisierung (Laufzeitschutz)
(4) Nicht kompiliert: Javascript Engine läuft im Browser und nicht auf Hardware
(5) Kein Zusammenhang mit Java (ausser einiger Methodennamen + Syntax)

(6) Einsatzort:
- Browser (React)
- Backend (Node)
- Mobile (React Native)
- Desktop (Electron)

Question 2

Variablen (7)

Answer 2

(1) 6 Primitive Datentypen:
- String, Number, BigInt, Boolean, undefined, Symbol

(2) 3 Referenztypen:
- Array, Function, Object

(3) Variablentypen werden immer dynamisch/implizit durch Wertzuweisung deklariert (let/var varName = “Text”)
(4) Konstanten werden mit dem Schlüsselwort “const” deklariert.
(5) Variablentypen lassen sich nachträglich ändern.
(6) Es gibt keinen spezifischen Ganzzahltyp.
(7) Variablen werden durch Werte zugewiesen und Referenzvariablen (Objekte) durch Referenzierung. D.h. bei Änderung des Objekts durch eine Referenze wird die Änderung für alle Referenzen sichtbar!

Question 3

Operatoren (7)

Answer 3

(1) 6 Arithmetische Operatoren: +, -, *, /, % (modulo), ** (Potenz)
(2) Vergleichsoperatoren (ohne impliziten Typecast): ===, !==
(3) Vergleichsoperatoren (mit impliziten Typecast): ==, !=
(4) Zuweisungsoperatoren: =, +=, -=, *=, /=, %=, **=
(5) Verknüpfungsoperatoren (Abbruch beim ersten false): &&, ||
(6) Verknüpfungsoperatoren (vollst. Auswertung): &, |
(7) Falsy Values: false, undefined, null, NaN, 0, “”

Question 4

Print-Ausgabe-Methoden (3)

Answer 4

(1) document.write(value);
- Ausgabe im Browser-Content

(2) console.log(value);
- Ausgabe im Log der Konsole

(3) alert(value);
- Ausgabe in Browser-Popup-Fenster

Question 5

Benutzer-Eingabe-Methode (1)

Answer 5

(1) let varname = prompt(“input: “);
1. Ausgabe in Browser-Popup-Fenster
2. Benutzer-Eingabe in Browser-Popup-Fenster

Question 6

“DOM”-Element (3)

Answer 6

(1) DOM = Document Object Modell
(2) Programmierschnittstelle, welche HTML- oder XML-Dokumente als eine Baumstruktur darstellt
(2) Zugriff per JavaScript auf vollständiges HTML-Dokument via “document.”

Question 7

”{}” vs “[]” (2)

Answer 7

(1) “{}” = Definiert ein Object

(2) “[]” = Definiert ein Array: Ein Array ist eine Subklasse von Object und bietet weitere Methoden.

Question 8

Speichern aller DOM-Elemente zu einem Tag-Name in einem Array (1)

Answer 8

(1) let arrName = document.getElementsByTagName(“p”);

Question 9

Speichern eines einzelnen DOM-Elements in einer Variablen (1)

Answer 9

(1) let x = document.getElementById(“headline”);

Question 10

Was wird in der Variablen x gespeichert? (1)

let x = document.body.childNodes;

Answer 10

(1) Es wird ein Array mit allen Objekt-Knoten des darunter liegenden HTML-Strukturbaums zurück gegeben.

Question 11

Was wird in der Variablen x gespeichert? (1)

let x = document.getElementById(“headline”).parentNode;

Answer 11

(1) Es wird ein einzelnes Objekt aus der nächst höheren HTML-Struktur zurück gegeben.

Question 12

Was bewirkt die folgende Funktion? (1)

function createPara(element) {
    let x = element.parentNode;
    let y = document.createElement("p");
    y.innerHTML = "Test Paragraph";
    x.appendChild(y);
}

Answer 12

(1) Beim Aufruf der Funktion wird ein DOM-Objekt übergeben.
(2) In der Funktion wird der Elternknoten des übergeben DOM-Objekts aufgerufen.
(3) Dem Elternknoten wird ein neuer Paragraph mit dem Inhalt “Test Paragraph” als neues Objekt am Ende angehangen.

Question 13

“BOM”-Element? (3)

Answer 13

(1) BOM = Browser Object Modell
(2) Programmierschnittstelle zum Auslesen und Ansteuern von Browserfunktionen .
(2) Zugriff per JavaScript via “window.”

Question 14

Was bewirken die folgenden Funktionen?

(1) window.open(“url”, “_blank”);
(2) window.location.href = “url”;

Answer 14

(1) Öffnet eine URL in einem neuen Browser-Tab.

(2) Öffnet eine URL im bestehenden Browser-Tab.

Question 15

Was bewirkt der folgende Code?

(1) function MyObject(name, age) {
this.name = name;
this.age = age;
(2) this.setAge = function(addValue) {
this.age += addValue;
return this.age;
};
}

(3) let myObj = new MyObject(“Hans”, 22);

(4) for(let elem in myObj) {
alert(myObj[elem]);
}

Answer 15

(1) Klasse “MyObject” wird mit zwei Parametern (name, age) erstellt und es erfolgt eine Wertzuweisung für den beiden Attribute.
(2) Erstellt eine METHODE zum Erhöhen des Alters um den Parameter-Wert “addValue” und gibt das neue Alter zurück.
(3) Neues Objekt vom Typ “MyObject” wird instanziiert, es werden zwei Argumente “Hans” und “22” übergeben und der Referenvariablen “myObj” zugewiesen.
(4) Iteration über alle Elemente des Objekts “myObj” und Ausgabe im Browser-PopUp-Fenster.

Question 16

Was bewirkt der folgende Code? (2)

[Class].prototype.[funktionsname] = function () {
        // put awesome code here
}

Answer 16

(1) Einer Klasse wird eine weitere Methode hinzufügt.

(2) Vorsicht: Nur bei selbsterstellten Klassen verwenden.

Question 17

Was gibt der folgende Code aus? (1)

function ausprobieren() {
   throw("Nicht implementiert);
}

function myFunc() {
   try{
       ausprobieren();
   } catch(e) {
       alert(e);
   }

myFunc();

Answer 17

(1) “Nicht implementiert”

Question 18

“let” vs “var” ? (2)

Answer 18

(1) let = block scope

(2) var = function scope

Question 19

Was gibt folgender Code aus? (3)

function* foo() {
  yield* ["hello"];
  let sum = yield "world";
  yield sum + 4;
}
let gen = foo();
while(true) {
   alert(gen.next(3).value);
}

Answer 19

(1) hello
(2) world
(3) 7