JavaScript Spickzettel

JavaScript Spickzettel

Wenn Sie alle paar Jahre JavaScript schreiben, vergessen Sie leicht die Syntax. In diesem Fall können Sie diesen Spickzettel nutzen.

Inhaltsverzeichnis

Hilfreiche Referenzen

JavaScript im Jupyter Notebook und VSCode mit Deno

Deno installieren

In Jupyter oder VS Code nutzen

Kernel selektieren → Select another Kernel → Jupyter Kernel → Deno

JavaScript in Visual Studio Code formatieren

Drücken Sie Strg + Umschalten + P (Ctrl + Shift + P) um die Befehlszeile zu öffnen. Geben Sie anschließend Format an und wählen Sie Format Document aus.

Alternativ können Sie die Tastenkombination Umschalten + Alt + F ( Shift + Alt + F) nutzen. Sie können auch einen selektierten Bereich im Code formatieren, indem Sie Strg + K und anschließend Strg + F drücken (nacheinander).

Debugging Tipps

Wie Sie Ihre JavaScript Erweiterungen in SAP Analytics Cloud debuggen

In Chrome Developer Tools (Strg + Umschalt + I) in Sources Tab Strg + Umschalt + F drücken, um nach einem bestimmten Code String in allen Funktion zu suchen. Z.B. Table_1.getDataSource.

Funktioniert auch bei SAP Analytics Cloud Custom Widgets

Kommentare

// Comment line
/* 
Block comment - Multiple lines
*/

Style Guide

Bei Variablen wird camelCase verwendet. Das erste Wort klein, danach jedes neue Wort groß.

let studentName = "Alice";

Konstanten verwenden nur Großbuchstaben.Wörter werden mit Unterstrichen getrennt. 

const MAX_RETRIES = 5;
const API_KEY = "dein-key-hier";

Nicht jede const-Variable wird großgeschrieben. Nur echte Konstanten (wie Konfigurationswerte). Normale const-Variablen folgen camelCase:

const userName = "Alice";  // Nicht: USER_NAME

Funktionen verwenden camelCase. Das erste Wort klein, danach jedes neue Wort groß.

function calculateTotalPrice() {
  // ...
}

Bei Klassen wird jedes Wort großschreiben, keine Unterstriche (PascalCase).

class StudentProfile {
  constructor(name) {
    this.name = name;
  }
}

Script Platzierung

Die Platzierung von Skripten am Ende des <body>-Elements verbessert die Anzeigegeschwindigkeit, da die Interpretation der Skripte die Anzeige verlangsamt.

<body>
<!--This is a comment. Comments are not displayed in the browser-->
<script>
console.log("Hello world");
</script>
</body>
<html>
<head> <meta charset="UTF-8"> </head>
<body>
<p>Hello <input id="message"></p>

<script>
 setInterval(function(){
  var messageInput = document.getElementById("message");
  console.log(messageInput);
  window.alert(messageInput.value);
 }, 10000);

</script>
</body>
</html>

document.write fügt Text in die Webseite ein.

Alternativ kann man JavaScript aus einer externen Datei laden:

<script src="script.js"></script>

Console Log

Chrome Entwicklertools – Strg + Umschalt + I

console.log(42); //gibt 42 in der Console (Developer Tools) aus
//string:
console.log("Hello world");
console.log('Hello world');
console.log('I love "coding"');
console.log("I love 'coding'");

Arithmetische Operatoren

console.log(3+4); // =7
console.log(5-1); // =4
console.log(4*2); // =8
console.log(9/3); // =3
//Modulo:
console.log(11%3); // =2
console.log(12%3); // =0

String concatenation

console.log("I love to" + "code");

Properties

console.log("Hello".length); // prints 5

Methoden

console.log("Hello".toUpperCase()); // prints HELLO
console.log("Hey".startsWith("He")); // prints true
console.log("Hey".startsWith("Hello")); // prints false

.trim //remove whitespace
.trimStart() 
.trimEnd()

console.log(Math.random()); // prints random Number
Math.floor() // rounds down to the nearest whole number
Math.ceil() // rounds up to the nearest whole number

Nesting

console.log(
  Math.floor(
    Math.random() * 100
    )
  );

Integer

console.log(Number.isInteger(2024)); // prints true
console.log(Number.isInteger(2024.5)); // prints false

Variablen

  • var – universal
  • let – kann mit einem anderen Wert neu zugewiesen werden
  • const – Konstante

Wenn wir einer mit dem Schlüsselwort „let“ deklarierten Variablen keinen Wert zuweisen, hat sie automatisch den Wert „undefiniert“.

„const“ ohne Wert – führt zu SyntaxError

„const“ neuen Wert zuweisen – führt zu TypeError

Mathematische Zuweisungsoperatoren

let w = 4;
w = w + 1; // 5

let w2 = 4;
w2 + = 1 // 5, "+ = 1" bedeutet "erhöhen um 1", "+ = x" erhöhen um x

let w3 = 4;
w3 ++; // 5, "++" bedeutet "um eins erhöhen"

- = x; // verringern um x
* = x; // multiplizieren mit x
/ = x; // teilen durch x
++ // um eins erhöhen
-- // um eins verringern

let a =1;
a++; // Can be written as a = a + 1
console.log(a); // Output: 2

let b =2;
b += 2; // Can be written as a = a + 2
console.log(b); // Output: 4

let x = 20;
x -= 5; // Can be written as x = x - 5
console.log(x); // Output: 15

let y = 50;
y *= 2; // Can be written as y = y * 2
console.log(y); // Output: 100

let z = 8;
z /= 2; // Can be written as z = z / 2
console.log(z); // Output: 4

String concatenation with variables

let myCat = 'Kleopatra';
console.log('Meine Katze heißt ' + myCat + ' !')

oder mit Escape Backticks – template literals. String interpolation.

let myCat = 'Kleopatra';
console.log(`Meine Katze heißt ${myCat} !`)

typeof Operator

Returns datatype as string

let myName = "Denis";
console.log(typeof myName);

Conditional statements

if, else if, else

Innerhalb von Klammern () wird eine Bedingung angegeben, die als wahr oder falsch ausgewertet wird.

Wenn die Bedingung wahr ist, wird der Code innerhalb der geschweiften Klammern {} ausgeführt.

Wenn die Bedingung falsch ist, wird der Block nicht ausgeführt.

if (true) { //<-condition
 console.log("This message will print!"); // <- execution
}
let sale = true;
if (sale) {console.log("Buy now!")};

If … Else

if (false) {
	console.log("The code in this block wont run!");
	} else {
		console.log("But the code in this block will!")
		};
let isMale = true;

if(isMale) {
    console.log("You are male");
} else {
    console.log("You are not male")
}
function handleModel(model) {
    // Convert model to lowercase for case-insensitive comparison
    const modelLower = model.toLowerCase();
    
    // Check if model is o1 or o1-mini
    if (modelLower === 'o1' || modelLower === 'o1-mini') {
        // Code block for o1 or o1-mini models
        console.log('Executing code for o1 or o1-mini model');
        // Add your specific code here
        return 'o1/01-mini code executed';
    } else {
        // Code block for all other models
        console.log('Executing code for other models');
        // Add your specific code here
        return 'other model code executed';
    }
}

// Example usage:
console.log(handleModel('o1'));         // o1/o1-mini code executed
console.log(handleModel('o1-mini'));    // o1/o1-mini code executed
console.log(handleModel('other'));      // other model code executed

Ternary Operator

Kürzere if .. else Statements

Statt diesem Code:

let isNightTime = true;
if (isNightTime) {
	console.log("Turn on the lights!");
	} else {
		console.log("Turn on the lights!");
		};

Kann ich auch so schreiben:

let isNightTime = true;

isNightTime ? 
console.log("Turn on the lights!") //if true   
: 
console.log("Turn on the lights!"); // if false

Oder

let favoritePhrase = "Love that!";

favoritePhrase ===  "Love that!" ? //condition 
console.log("I love that!") //if true   
: 
console.log("I don't love that!"); // if false

Else if

if ...
  else if ...
else ...

Switch

Wie CASE

let groceryItem = "papaya";

switch (groceryItem) {
	case "tomato":
		console.log("Tomatoes are 0.49 CHF");
		break;
	case "lime":
		console.log("Limes are 1.49 CHF");
		break;	
	case "papaya":
		console.log("Papayas are 1.29 CHF");
		break;	
	default:
		console.log("Invalid item");
		break;	
}

Vergleichsoperatoren

  • < less than // 10 < 12 evaluates to true
  • > greater than
  • <= less than or equal to
  • >= greater than or equal to
  • == is equal to
  • === is equal to (strict equality, both type and value)
  • !== is not equal to

Logische Operatoren

  • && and
  • || or
  • ! not

„Truthy“ & „falsy“ assignment

Manche Werte gelten in einer Bedingung als wahr (truthy) oder falsch (falsy), ohne direkt true oder false zu sein. Use Cases wie Existenz-Checks oder Fallback-Werte.

// Statt
if (username !== "" && username !== null) { ... }
// kann man einfach:
if (username) { ... }
// schreiben.
// Leerer String und null sind falsy.

Falsy Werte in JavaScript.

// Falsy-Werte
const falsyValues = [false, 0, 0.0, "", null, undefined, NaN];

falsyValues.forEach(val => {
    const result = val ? "truthy" : "falsy";
    console.log(String(val) + " → " + result);
});

Truthy Werte in JavaScript.

// Truthy-Werte
const truthyValues = [true, 1, -1, "hello", " ", [], [0], {}];

truthyValues.forEach(val => {
    const result = val ? "truthy" : "falsy";
    console.log(JSON.stringify(val) + " → " + result);
});

Zwei wichtige Unterschiede zu PHP:

WertPHPJavaScript
"0"falsytruthy
[]falsytruthy
undefinedgibt es nichtfalsy
NaNgibt es nichtfalsy

Wenn username irgendetwas Brauchbares enthält, nimm es, sonst nimm den Fallback. Egal ob username leer ist, null ist oder gar nicht gesetzt wurde.

let username = "";
let defaultName = username || "Fremder"; // || or. If username "falsy", print "Fremder"
console.log(defaultName); // prints "Fremder"

Code wird lesbarer, weil man nicht jeden Randfall einzeln prüfen muss. if (items) prüft gleichzeitig ob das Array nicht leer ist — [] ist falsy, [1, 2, 3] ist truthy.

Der Nachteil: Es kann subtile Bugs erzeugen. 0 ist falsy — wenn score = 0 ein gültiger Wert ist, wird if (score) unerwartet false. Dann braucht man doch einen expliziten Check: if (score !== null).

Random number

Von 0 bis 999

let randomNumber = Math.floor(Math.random() * 1000);

console.log(randomNumber);

Funktionen

Funktionen ermöglichen es, eine bestimmte Aufgabe mehrfach auszuführen. Funktionen stellen einen wiederverwendbaren Codeblock dar, der eine Folge von Anweisungen zusammenfasst, um eine bestimmte Aufgabe zu erfüllen.

function greetWorld() {
  console.log('Hello World!');
}

greetWorld(); // Output: Hello World!

Mit Parameter:

function greetWorld(name) {
  console.log('Hello ' + name);
};

let name = "Denis";
greetWorld(name); // Output: Hello Denis

Oder:

function begruessung(name) {
    return `Hallo, ${name}!`;
};

console.log(begruessung('Denis'));

Zwei Zahlen addieren

function addition(num1, num2){
    return num1 + num2;
};

console.log( addition(4,5));

Verkompliziert: 

function addition(num1, num2){
    let ergebnis = num1 + num2;
    return ergebnis;
}

let summe = addition(4,5);

console.log( summe );

Zwei Zahlen multiplizieren

// Funktion zur Multiplikation von zwei Zahlen
function multiplyNumbers(num1, num2) {
    // Multipliziere die Zahlen
    return num1 * num2;
}

// Vom Benutzer bereitgestellte Eingaben
let number1 = 2;
let number2 = 3;

// Rufe die Funktion mit den Eingaben auf und speichere das Ergebnis in einer Variablen
let number3 = multiplyNumbers(number1, number2);

// Gib das Ergebnis aus
console.log(`The result of multiplying ${number1} and ${number2} is ${number3}`);

Klassen

Und als Klasse:

// Definition der Klasse
class Multiplier {
    // Konstruktor (optional, falls Initialisierung benötigt wird)
    constructor() {}

    // Methode zur Multiplikation von zwei Zahlen
    multiplyNumbers(num1, num2) {
        return num1 * num2;
    }
}

// Instanziierung der Klasse
const multiplier = new Multiplier();

// Vom Benutzer bereitgestellte Eingaben
let number1 = 2;
let number2 = 3;

// Aufruf der Methode und Speichern des Ergebnisses
let number3 = multiplier.multiplyNumbers(number1, number2);

// Ausgabe des Ergebnisses
console.log(`The result of multiplying ${number1} and ${number2} is ${number3}`);

Array

Ein Array ist eine geordnete Sammlung von Elementen. Jedes Element hat einen Index, der mit 0 beginnt, und kann beliebige Datentypen enthalten (z. B. Zahlen, Strings, Objekte, Funktionen usw.).

let farben = ['rot', 'grün', 'blau'];
console.log(farben[0]); // 'rot'
console.log(farben[2]); // 'blau'

Ein bestimmtes Element ändern.

farben[1] = 'violett';
console.log(farben); // ['rot', 'violett', 'blau']

Loop über ein Array

let farben = ['rot', 'grün', 'blau'];
for (let i = 0; i < farben.length; i++) {
    console.log(farben[i]);
}

Mit for … of:

let farben = ['rot', 'grün', 'blau'];
for (let farbe of farben) {
    console.log(farbe);
}

Oder forEach nutzen:

let farben = ['rot', 'grün', 'blau'];
farben.forEach((item) => console.log(item));

For Schleife

For Schleife durchläuft einen Codeblock mehrmals in einer Schleife. Sie besteht aus drei Teilen: Initialisierung (Startwert setzen), Bedingung (Wiederholungsbedingung), Inkrement/Dekrement (Wertänderung pro Durchlauf).

for (Initialisierung; Bedingung; Inkrement/Dekrement) {
    // Codeblock
}
for (let i = 0; i < 5; i++) {
    console.log(`Durchlauf Nummer: ${i}`);
}
let farben = ['rot', 'grün', 'blau'];
for (let i = 0; i < farben.length; i++) {
    console.log(farben[i]);
}

For … of Schleife

Die for ... of Schleife wird verwendet, um über Elemente eines Arrays, Strings oder anderer iterierbarer Objekte zu iterieren. Syntax:

for (Element of IterierbaresObjekt) {
    // Codeblock
}

Beispiel mit einem Array:

let farben = ['rot', 'grün', 'blau'];
for (let farbe of farben) {
    console.log(farbe);
}
// Ausgabe: rot, grün, blau

Beispiel mit einem String:

let text = "Hallo";
for (let buchstabe of text) {
    console.log(buchstabe);
}
// Ausgabe: H, a, l, l, o

For … in Schleife

Die for-in-Schleife wird verwendet, um über die Eigenschaften eines Objekts zu iterieren.

let person = { name: 'Denis', alter: 42, beruf: 'Berater' };
for (let eintrag in person) {
    console.log(`${eintrag}: ${person[eintrag]}`);
}
// Ausgabe:
//name: Denis
//alter: 42
//beruf: Berater

JSON

JavaScrip Object Notation. Dateiendung .json. Speichert Informationen in einer Reihe von Schlüssel-Wert-Paaren. Ähnlich wie Dictionaries in Python.

JSON Syntax In One Video

JavaScript JSON

{
	"name": "Denis",
	"age": 23,
	"note": 1.8,
	"male": true,
	"flaws": null
}

Kann auch innerhalb eines Objekts gespeichert werden.

{
	"person": {
	"name": "Denis",
	"age": 23,
	"note": 1.8,
	"male": true,
	"flaws": null
	}
}
// access via person.name

Auch Listen möglich

{
	"person": {
	"name": "Denis",
	"age": 23,
	"note": 1.8,
	"male": true,
	"flaws": null,
	"hobbies": ["snowboard", "books", "writing"]
	}
}

Listen von Objekten

{
	"person": {
	"name": "Denis",
	"age": 23,
	"note": 1.8,
	"male": true,
	"flaws": null,
	"hobbies": ["snowboard", "books", "writing"],
	"friends": [
		{
		 "name": "Stephan",
		 "age": 33
		},
				{
		 "name": "Adam",
		 "age": 34
		},
		]
	}
}
/0 Kommentare/von
Das könnte Dich auch interessieren
SAP Analytics Cloud Skripte und Custom Widgets debuggenSAP Analytics Cloud Skripte und Custom Widgets debuggen
SAP Analytics Cloud Tabelleninhalte an AI weitergeben
0 Kommentare

Hinterlasse einen Kommentar

An der Diskussion beteiligen?
Hinterlasse uns deinen Kommentar!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre, wie deine Kommentardaten verarbeitet werden.

Python SpickzettelPython SpickzettelClaude Code SpickzettelClaude Code Spickzettel