44:["$","title",null,{"children":"Data-Driven Web Engineering: Einführung JavaScript (Teil 1) | pmeschenmoser-hslu | Observable"}] 4c:T480,- Bisher: HTML insbesondere für Strukturierung von Webpages und deren Inhalten, CSS insbesondere für Formatierung und Gestaltung der Webpages. Jetzt: JavaScript für Interaktivität, Datenabfrage, Scripting, etc. bei Webpages. - Was soll nach Buttonclick geschehen? Wie kann ich nach einem Event die Gestalt eines Elements anpassen? Wie kann ich Formulardaten auslesen? Wie kann ich Webdaten von einem Server abfragen? Wie kann ich diese Daten auf der Webpage interaktiv visualisieren? Und vieles mehr... - Die Programmiersprache (manchmal auch *Skriptsprache*) JavaScript wird auf 97.9% aller Websites genutzt: für die Ausführung des Codes wird nur ein Browser gebraucht. - Bemerkung: Das Ausführungsergebnis einer JavaScript-Zelle in ObservableHQ kann sich etwas von dem Ergebnis einer separaten *script.js*-Datei (mit plain bzw. Vanilla Javascript) unterscheiden, siehe auch hier. Für die Demo gewisser Grundlagen bietet sich ObservableHQ dennoch sehr gut an. 4d:[] 48:{"id":"7c10b8bf9f2f99c0","slug":"intro-js-part1","title":"Data-Driven Web Engineering: Einführung JavaScript (Teil 1)","thumbnail":"35786dc097d4ffcfcc7c4c8648e0366e2866372e41a9b5d156c4e0df43855336","access_level":"public","create_time":"$D2022-04-12T09:21:19.671Z","update_time":"$D2023-04-19T10:28:31.092Z","view_time":null,"first_public_time":"$D2023-04-18T14:19:57.276Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"d453c31c6f30f58d","login":"pmeschenmoser-hslu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/63655b833b666ab4131690b92aedce308446ed9468293aec56b2ee71db090aaa","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":442,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5a3b6ff689928461","login":"pmeschenmoser-hslu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/63655b833b666ab4131690b92aedce308446ed9468293aec56b2ee71db090aaa","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"5a3b6ff689928461","login":"pmeschenmoser-hslu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/63655b833b666ab4131690b92aedce308446ed9468293aec56b2ee71db090aaa","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":17,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Data-Driven Web Engineering: Einführung JavaScript (Teil 1)","cells":[{"id":0,"value":"# Data-Driven Web Engineering: Einführung JavaScript (Teil 1)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"$4c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"## 1. Hello World, console und Kommentare","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"- Analog zu *print()* in Python, können Sie in JavaScript die Methode *console.log()* aufrufen, um die Welt mit einem String zu begrüssen.\n- Ein Semikolon hinter Statements wie dem folgenden ist optional, wird aber generell empfohlen. Bei der Verarbeitung des Codes durch die JavaScript Engine werden Semikola z.T. *under the hood* automatisch hinzugefügt.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":52,"value":"console.log(\"Hello World\");\n// einzeilig \n/*\n Dies ist ein mehrzeiliger Kommentar in JavaScript. ObservableHQ erwartet einen Rückgabewert aus der Zelle, console.log() liefert diesen \n jedoch nicht, schreibt nur etwas in die Browserkonsole (siehe Entwicklertools)\n*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"- Die Begrüssung kann auch etwas dramatischer erfolgen, z.B. mit *console.error()* oder *console.warn()*:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":80,"value":"{ //Einzeiliger Kommentar: Blockdefinition durch geschweifte Klammern\n console.error(\"Hello Error\");\n console.log(9); \n console.warn(\"Hello Warning\");\n console.debug(\"Hello Debugger\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"- Es können auch mehrere kommagetrennte Parameter mitgegeben werden:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":107,"value":"console.log('Hello', 42, 'Das ist ein Objekt:', {}, ' und das ist ein Array:', []);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"Weitere Methoden mit der *console* können Sie der Dokumentation finden. Falls die Konsole dann doch einmal zu gut gefüllt sein sollte, nutzen Sie einfach *console.clear()*.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":127,"value":"console.clear();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"- **Aufgabe 1.1**: In der obigen Dokumentation finden Sie auch Methoden zur Zeitmessung in der *console*. Fügen Sie die Aufrufe zur Zeitmessung in die folgende Zelle ein und bestimmen Sie so, wie viel Zeit seit der ersten Ausführung der Zelle vergangen ist.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":256,"value":"{//Ihre Zeitmessung hier:\n console.time('mein Timer');\n console.timeLog('mein Timer'); \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"## 2. Variablen und Konstanten","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":137,"value":"- Mithilfe des Schlüsselworts *let* können lokale Variablen deklariert werden. Die Wertzuweisung erfolgt dann wie in Python über *= wert*:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":141,"value":"{\n let meinevariable; //bis hierhin nur deklariert\n console.log(meinevariable); //daher ist der Wert undefined\n meinevariable = Math.random() // die deklarierte Variable erhält einen zufälligen Zahlenwert zwischen 0 und 1\n console.log(meinevariable); \n return meinevariable // und wird mit dem Schlüsselwort return an ObservableHQ geliefert\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"- Eine mit *let* deklarierte Variable hat ihren Gültigkeitsbereich (*scope*) innerhalb Ihres Blocks, der durch geschweifte Klammern angegeben ist. Eine erneute Deklaration innerhalb desselben Blocks führt zum Syntaxfehler: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":167,"value":"{\n let meinevariable; \n let meinevariable = 1; \n return meinevariable;\n} ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"- Es sind auch mehrere Deklarationen und Wertzuweisungen pro Zeile möglich, Beispiel: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":155,"value":"{\n let meinevariable = 1, meinevariable2 = 2; // mehrere Deklarationen & Wertzuweisungen pro Zelle\n let meinevariable3 = 3;\n return meinevariable + meinevariable2 + meinevariable3; //liefere Summe zurück an ObservableHQ\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"- Oft sieht man auch noch das Schlüsselwort *var* (Standard bis 2015), wodurch lokale Variablen mit etwas erweiterten Gültigkeitsbereichen (vgl. *let*) deklariert werden. Alternativ können Werte auch globalen Variablen zugewiesen werden, dies ist i.A. nicht zu empfehlen. Später mehr zu Gültigkeitsbereichen. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":171,"value":"{\n var meinevariable4 = 1; //Variable mit prinzipiell erweitertem Gültigkeitsbereich, später mehr\n window.globaleVariable = 2; //globale Variable, ausserhalb von ObservableHQ auch ohne window. möglich\n return meinevariable4;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"- Mit der JavaScript-Version aus dem Jahr 2015 (-> ECMA Script 2015, aka. ES6, aka. ECMAScript6) ist auch das Schlüsselwort *const* hinzugekommen. Hiermit können, wenig überraschend, Konstanten deklariert werden, die nur eine einmalige Wertzuweisung erlauben: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":189,"value":"{\n const meinekonstante = 2; //alles OK.\n meinekonstante = 3; //so nicht.\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"{\n const meinekonstante; //so auch nicht. Hier wird direkt eine Wertzuweisung erwartet..\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"- Bei der Benennung von Variablen und Konstanten sind gewisse Regeln zu beachten:\n - Namen dürfen nur enthalten: Buchstaben, Zahlen, _ und $\n - Namen dürfen nicht mit einer Zahl beginnen\n - Namen sind case-sensitive, Gross-/Kleinschreibung macht den Unterschied\n - Selbstverständlich darf der Name kein reserviertes Schlüsselwort sein\n- Manchmal begegnet man bei Konstanten einer Konvention: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":403,"value":"{\n const GROSSGESCHRIEBEN=1\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"- ** Aufgabe 2.1:** Passen Sie die folgende Zelle so an, dass 42 zurück an ObservableHQ geliefert wird. Ändern Sie dazu keine Werte und fügen Sie keine weiteren Statements oder Variablen ein.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":223,"value":"{\nwindow.meinevar=42;var a;var b=1,a = window.meinevar;\nreturn a;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"- **Passende Übungen auf w3Schools:** Variablen (1-4; mit var-Schlüsselwort) ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"## 3. Primitive Datentypen","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":246,"value":"- In Python kann ein und dieselbe Variable (nacheinander) Werte mit verschiedenen Datentypen annehmen: dies ist in JavaScript ebenfalls möglich. JavaScript ist *dynamisch typisiert*. Es erfolgt keine explizite Angabe des Datentyps im Code, wie es zum Beispiel bei der Variablendeklaration in der Programmiersprache Java der Fall wäre.\n- ES6 bietet 6 primitive Datentypen an: *string*, *number*, *boolean*, *null*, *undefined* und neu *symbol*.\n- Der Datentyp einer Variablen kann mithilfe dem Operanden *typeof* abgefragt werden.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":271,"value":"{\n let meineZahl = 1\n meineZahl = 2.78; //keine Unterscheidung nach int oder float, die Variablenwert ist stets vom Typ number \n meineZahl = parseFloat('2.78'); //hier dementsprechend auch nicht\n meineZahl = 1.1e40;\n return typeof meineZahl;\n} ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"{\n let meinString = 'Das ist ein String';\n meinString = \"Auch das ist ein String\";\n meinString = `Und in diesen String wurde ein numerischer Datenwert gepackt, nämlich ${Math.random()}`;\n console.log(meinString);\n return typeof meinString;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"{\n let meinBoolean = true; //Achtung, anders als in Python kleingeschrieben!\n meinBoolean = true && false; //Verundung, führt zu meinBoolean=false\n meinBoolean = 'Banane' === 'Apfel';\n meinBoolean = true || false; //Veroderung, führt zu meinBoolean=true\n return typeof meinBoolean;\n} ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"- Achtung: *typeof nullVar* liefert in der folgenden Zelle den Datentyp *object* zurück. Dies ist jedoch ein JavaScript-Bug, der seit der ersten Version besteht und aus Kompatibilitätsgründen nicht berichtigt wurde. Siehe auch die history of typeof null.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":300,"value":"{\n let undefinedVar; \n let nullVar = null;\n return [typeof undefinedVar, typeof nullVar]; //beide Ergebnisse werden in einem Array zurückgegeben, vergleichbar mit Python-Liste\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"- Und in ES6 ist noch der Datentyp *symbol* hinzugekommen. Mit *Symbol(...)* wird eine eindeutige und unveränderliche ID erstellt. So können bspw. geeignete und nicht miteinander kollidierende Schlüssel für ein JavaScript-Objekt (ungefähr vergleichbar mit Python-Dictionary) erstellt werden. Solche Schlüssel vom Typ *symbol* bieten dann auch ein gewisses Mass an Privatheit, da sie beim Iterieren mit *for (let schluessel in obj)* o.ä. nicht besucht werden. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":356,"value":"- **Aufgabe 3.1**: In den folgenden zwei Zellen werden mehrere Symbole erstellt. Mit *===* wird auf Gleichheit geprüft. Kommentieren Sie für jedes *console.log()*, weshalb genau der entsprechende Wert ausgegeben wird. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":322,"value":"{\n let sym = Symbol()\n let sym2 = Symbol()\n let sym3 = sym;\n console.log(sym === sym3)//1)\n sym = Symbol()\n console.log(sym);//2)\n console.log(sym === sym2);//3)\n console.log(sym === sym3);//4)\n return typeof sym;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"- Zu Debugging-Zwecken kann eine Variable/Konstante vom Datentyp *symbol* auch mit einer Beschreibung versehen werden:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":338,"value":"{\n let sym = Symbol('Meine Beschreibung');\n console.log(sym);\n let sym2 = Symbol('Meine zweite Beschreibung');\n let sym3 = Symbol('Meine Beschreibung');\n console.log(sym === sym2);\n console.log(sym === sym3);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"- **Aufgabe 3.2:** Passen Sie die folgende Zelle so an, dass der Datentyp *number* angezeigt wird.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":385,"value":"type(123.0f)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null