Informatik-Grundlagen (JS) - TH OWL - eCampus PDF

Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Informatik-Grundlagen (JS) Informatik-Grundlagen (JS) Lehrmaterial der Vorlesungen. Inhalte werden im Laufe des Semesters freigeschaltet Inhalt 1 Aufbau des Kurses 2 Einführung in die Informatik 3 Algorithmus, Pseudocode 4 Computer, Betriebssystem 4.1 Computer 4.2 Betriebssystem 4.3 Scheduling 4.4 Testfragen 5 Grundlagen JavaScript 5.1 Debuggen, Kommentare 5.2 Variablen, Datentypen, Arrays 5.3 Verzweigungen, Schleifen 5.4 Funktionen 5.5 Testfragen 6 Verwalten von Informationen 6.1 Zahlensysteme 6.2 Darstellung von Texten 6.3 Testfragen 7 Boolesche Operatoren 8 Datenstrukturen 9 Suchalgorithmen 10 Daten Senden und Speichern 11 Fehlertolerante Codes 12 Datenkompression 13 Abschluss 14 Testfragen für VL Copyright: Das Lehrmaterial darf nur zu Lernzwecken an der TH OWL verwendet werden. Wenn Sie an einer anderweitigen Nutzung interessiert sind, wenden Sie sich bitte an Prof. Deuter. 1 Aufbau des Kurses Lehrinhalte Als angehende Ingenieurinnen und Ingenieure müssen Sie programmieren können, denn: 1 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Programmierung ist das Fundament der Digitalisierung. Sie werden in Ihrem Berufsleben mit kleineren oder größeren Programmieraufgaben zu tun haben, sei es nur die Anpassung eines Programms wie EXCEL durch ein Makro. Zu- dem ist es wichtig, wesentliche Zusammenhänge der Datenverarbeitung zu verstehen. Lernziele Die Studierenden erlangen Grundkenntnisse in der Informatik und der Programmierung. Sie verstehen, wie Informationen digital gespeichert und verarbeitet werden. Sie sind in der Lage, Datenstrukturen und Algorithmen zu entwerfen und selbstständig Programme in JavaScript und HTML zu erstellen. Lehrinhalte Folgende Themen werden im Laufe des Semesters bearbeitet: Aufbau eines Computers Pseudocode Grundlagen der Programmierung in JavaScript (Variable, Verzweigungen, Schleifen) Graﬁsche Programmierung mit HTML Informationstechnische Grundlagen (Zahlensysteme, Boolesche Algebra) Entwurf von Algorithmen, Suchalgorithmen Grundlagen der Datenverarbeitung (Kommunikation, Speicherung, Kompression, fehlerto- lerante Codes) Programmier-Umgebung Wir werden in der Programmiersprache JavaScript programmieren. Dafür benötigt man lediglich ei- nen Texteditor und einen Browser. Zum besseren Erstellen und Verwalten von Softwareprojekten werden wir jedoch die Software Visual Studio Code von Microsoft einsetzen. In den PC-Räumen der Hochschule ist diese Software installiert. Es wird allerdings dringend empfohlen, dass Sie sich Visual Studio Code auf Ihrem eigenen PC installieren! Dies ermöglicht die Nachbearbeitung der Übungsauf- gaben bzw. unterstützt Ihr Selbststudium. Die Installation von Visual Studio Code ﬁnden Sie hier. Sämtliche Übungsaufgaben an der Hochschule werden mit dem Browser Firefox durchgeführt. Daher empfehlen wir, dass Sie ebenfalls Firefox verwenden. Hinweise zur Prüfung 2 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Die Prüfung ist eine E-Klausur mit Fragen, die sich sowohl auf die Theorie als auch auf die Praxis be- ziehen. Die Bearbeitung einer Programmieraufgabe mit JavaScript ist Teil der E-Klausur (Quelltext er- stellen und digital einreichen). Die E-Klausur wird sowohl zum Ende des Wintersemesters (Ende Januar) als auch des Sommerse- mesters (Anfang Juli) angeboten. Bitte bearbeiten Sie kontinuierlich den praktischen Teil dieses Kurses. Dies wird signiﬁ- kant die Chancen für eine gute Note verbessern. Literatur / PDF-Unterlagen Literatur Die Lehrinhalte wurden auf Basis mehrerer Literaturquellen entwickelt und mit den persönlichen Erfahrungen aus der Industrie ergänzt. Die Literatur ist unten genannt und sollte zusätzlich zum Kursmaterial im Selbststudium genutzt werden. Darüber hinaus gibt es zahlreiche weitere Literatur (Bücher, Artikel, Internet etc.) Wenn Sie Lernmaterial ﬁnden, mit dem Sie gut zurechtkommen, dann melden Sie sich bitte beim Lehrpersonal. Wir nehmen diese Information gern in die Liste auf. Bewersdorﬀ, J. (2018): Objektorientierte Programmierung mit JavaScript: Direktstart für Einsteiger, Springer 3 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Interactive Tutorials, https://www.learn-js.org/ W3Schools Online Web Tutorials: https:// www.w3schools.com/ Herold, H.; Lurz, B.; Wohlrab, J. Grundlagen der Informatik, 3. Auﬂ. Pearson, 2017. Eher was für die ambitionierten "Informatiker". Hier geht es richtig zur Sache. PDF-Unterlagen Es werden keine PDF-Dokumente erstellt und verteilt. Sie können die Inhalte dieses Lernmoduls jedoch jederzeit als PDF speichern. Wählen Sie dazu oben die Option Druckansicht und anschließend einen PDF-Drucker aus. Hinweis: Im PDF wird keine Navigation erstellt. Wir empfehlen Ihnen daher, die Kapitel des 4 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Lernmoduls als einzelne PDF-Dateien auszudrucken und auf Ihrem PC zu strukturieren (z.B. 01- Aufbau des Kurses.pdf, 02-Einführung in die Informatik.pdf etc.) Testfragen Prima! Sie haben das Kapitel durchgearbeitet. Überprüfen Sie nun für sich selbst, wie viel Sie verstanden haben und beantworten Sie die folgenden Fragen. Versuchen Sie, die Fra- gen ohne Nachschlagen zu beantworten! Mit welcher Programmiersprache wird in die- sem Kurs programmiert? C# JavaScript C++ Java Richtig! Auswerten Welche Software wird für die Programmierung in diesem Kurs benötigt? Visual Studio Visual Studio Code Excel 5 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Eclipse Richtig! Auswerten 2 Einführung in die Informatik Perspektiven der digitalen Bildung Perspektiven in der digitalen Bildung Digitale Bildung Man kann die digitale Bildung aus drei Perspektiven betrachten: Gesellschaftlich-kulturelle Perspektive: 6 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Die Frage »Wie wirkt Digitalisierung auf die Gesellschaft?« adressiert die Auswirkungen der Digitalisierung auf die Gesellschaft. Themen sind z.B. die Auswirkungen von autonom fahrenden LKW für die Berufskraftfahrer, staatliche Gesichtserkennungsmaßnahmen etc. Dieser Fragestellung widmen wir uns nicht in diesem Lernmodul. Anwendungsbezogene Perspektive: Die Frage »Wie nutze ich Digitalisierung?« adressiert den technisch-versierten und verant- wortungsvollen Umfang mit IT-Systemen, z.B. wie nutze ich eﬀektiv ein CAD-System. Über die Anwendung von Visual Studio hinaus widmen wir uns nicht dieser Fragestellung. Technologische Perspektive: Die Frage »Wie funktioniert Digitalisierung?« widmet sich dem Inneren von IT-Systemen: Wie werden sie programmiert? Wie sind sie aufgebaut? etc. Dieser Fragestellung widmet sich das Fach »Informatik Programmierung«. https://dagstuhl.gi.de/dagstuhl-erklaerung/ Industrie 4.0 Industrie 4.0 steht für die Digitalisierung der Industrie. Es wird auch als 4. Industrielle Revolution bezeichnet. Die ersten 3 »Revolutionen« sind schematisch in dem folgenden Bild gezeigt. Grund- lage von Industrie 4.0 ist eine massive Vernetzung von und innerhalb von Produktionsprozes- sen. 7 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... https://www.youtube.com/watch?v=kQLbVVPNTMQ Industrie 4.0 grundlegend erklärt Recherchieren Sie den Begriﬀ »Industrie 4.0« und be- antworten Sie für sich die Frage, warum Informatik- Kenntnisse für Ingenieure und Ingenieurinnen unum- gänglich sind. Begriﬀsdeﬁnition "Informatik" Ursprung Informatik umfasst allgemein die automatisierte Informationsverarbeitung in Natur, Technik und Gesellschaft. Anfangs waren hauptsächlich Rechenmaschinen zur Zahlenverarbeitung gefragt, heutige Maschinen verarbeiten beliebige Informationen (Texte, Bilder...) Informatik ist Wortbildung aus "Information" und "Automatik" (Eingeführt von Karl Steinbuch Ende der 1950er Jahre) Im Englischen spricht man von Computer Science (nicht von Informatics) Deﬁnition Die Wissenschaft der Informatik beschäftigt sich mit Strukturen und Prozessen, die in Form von Daten und Algorithmen repräsentiert werden (können). Diese Prozesse werden informatisch modelliert, sodass sie automatisch durchgeführt werden (kön- nen). Die Systeme, die dazu von der Informatik konstruiert werden, werden als In- formatiksysteme bezeichnet. Was Sie auf dem Schreibtisch, in der Tasche, in Ihrem Auto,... haben, sind Informatiksysteme. 8 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Stellungnahme zur Lehrerversorgung Informatik. FG IBN der GI. http://www.researchgate.net/publi- cation/280920203_Schriftliche_Stellungnahme_zur_quantitativen_Erweiterung_der_Lehrerbildung_Infor- matik_in_NRW Historie der Informatik Abakus Rechenbrett mit Kugeln, meist Holz- oder Glasperlen Nutzung bereits vor mehr als 3000 Jahren in China Durchführbar sind Addition, Subtraktion, Multiplikation und Division, aber auch das Zie- hen von Quadrat- und Kubikwurzeln Historische Meilensteine der Informatik Adam Riese (1492-1559): Rechengesetze zum Dezimalsystem Wilhelm Schickard (1592-1635): Erste Rechenmaschine Blaise Pascal (1623-1662): Rechenmaschine mit 6 Stellen Gottfried W. Leibniz (1646-1716): Maschine für vier Grundrechenarten Philipp M. Hahn (1739-1790): 1. mechanische Rechenmaschine Charles Babbage (1792-1871) – Prinzip der ”Analytical Engine“, 19m lang 3m hochAda Lovelace, erstes Programm Wer sich für Geschichte interessiert, dem sei das Heinz-Nixdorf-Forum (HNF) in Paderborn empfohlen. Viele der hier genannten Aspekte werden dort ausführ- lich und mit spannenden Exponaten dargestellt. 9 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Lochkarte Hermann Hollerith (1860-1929) gilt als Erﬁnder der Lochkarte Maschine zum Auswerten von amerikanischen Volkszählungsstatistiken Abtasten der Lochkarte mit Metallstiften ◦ In einem Loch wird Kontakt geschlossen, elektrischer Zähler wird um eins erhöht In 1960er bis 1970er Jahre. Programmspeicherung mit Lochkarten. 10 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Im Netz gibt es ein kleines Beispiel zur Funktionsweise von Lochkarten. Bitte lesen Sie den Text durch und ﬁnden Sie die gesuchte Wortfolge: https://inf.gi.de/01/ wie-liest-man-loecher Beantworten Sie die Frage, was in der Wortfolge ein Widerspruch zu einer Aussa- ge im vorhergehenden Abschnitt ist. Konrad Zuse Erbauer des ersten funktionstüchtigen Computers Verwendung von elektromechanischen Bauteilen (Relais) Z3 (1941): ◦ Ca. 2600 Relais und 64 Speicherplätze mit jeweils 22 Bits. ◦ Multiplikation in etwa 3 Sekunden. 11 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... von Neumann Architektur Mitte der 1940er Jahre entwickelte John von Neumann die Fundamentalprinzipien einer Rechenanlage. ◦ Rechenwerk, Steuerwerk, E/A, Verbindungen ◦ Programm und Daten im Speicher ◦ Schritt für Schritt Bearbeitung von Befehlen ◦ Bedingte Sprünge und Verzweigungen Basis bis zum heutigen Zeitpunkt Generationen der elektronischen Datenverarbeitung 1. Generation Relais und Röhren, ab 1946, sehr unzuverlässig Gewicht in Tonnen, Energiebedarf in Hunderten von KW, 1000 Rechenoperationen / Sek. 2. Generation Transistoren, ab 1955, zuverlässiger, billiger als Röhren 10.000 Rechenoperationen/Sek. Platz- und Energie-Bedarf auf einen Bruchteil reduziert (einige 100W) 3. und 4. Generation 12 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Mikrochips (Transistoren in einem Chip), ab ca. 1962 1971 Intel 4004 Mikroprozessor: ◦ alle Transistoren eines Rechners auf einem Chip ◦ erst Tischrechner, später CPU: programmierbarer 5. Generation: Parallelverarbeitung und Vernetzung Heutige Rechner Moderne Rechner enthalten Mikroprozessoren mit vielen Millionen Transistoren, Arbeits- speicher mit Millionen von Speicherplätzen (GigaBytes) und bewältigen Millionen von Operationen pro Sekunde. Das Moore’sche Gesetz besagt, dass sich die Packungsdichte der Transistoren auf einem Mikroprozessor in etwa alle 18 Monate verdoppelt. Auszug eines Interviews der Süddeutschen Zeitung mit dem Intel-Chef Pat Gel- singer vom 08. Oktober 2023 Intel-Mitgründer Gordon Moore hat in den 1960er-Jahren vorherge- sagt, dass sich die Zahl von Transistoren auf Chips etwa alle zwei Jahre verdoppeln werde. Das hatte überraschend lange Bestand - aber wie sieht es heute aus, gilt Moore's Law noch? Ich sehe mein Amt bei Intel als Bewahrer von Moore's Law. Wenn ich Reden halte, sage ich: Solange das Periodensystem noch nicht ausgeschöpft ist, ist Moore's Law noch nicht erledigt. Erst gestern habe ich mit einem unserer Forscherteams gesprochen. Sie haben mir von einem neuen Material be- richtet, das sie mit Silizium zusammenbringen wollen, und ich war begeis- tert. Was versprechen Sie sich von der neuen Technologie? Wir glauben, dass wir die Leistung von Chips bis zum Ende des Jahrzehnts verzehnfachen können. Die größten Chips enthalten heute etwa 100 Milli- arden Transistoren, und wir glauben, wir können bis 2030 eine Billion Tran- 13 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... sistoren erreichen - bei etwa demselben Stromverbrauch wie bei den heuti- gen Chips. Teilgebiete der Informatik Gebiete der Informatik Technische Informatik - Grundlagen der Hardware: Mikroprozessortechnik Rechnerarchitektur Rechnerkommunikation Praktische Informatik - Grundlagen der Systemsoftware Programmiersprachen, Compiler und Interpreter Algorithmen und Datenstrukturen Betriebssysteme und Netzwerke Datenbanken Die Inhalte dieses Kurses können der praktischen Informatik zugeordnet werden. Theoretische Informatik – Grundlage für die Anderen Automatentheorie und formale Sprachen Berechenbarkeitstheorie Komplexitätstheorie 14 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Angewandte Informatik – Der Computer für den Anwender Wirtschaftliche, kommerzielle Anwendungen Technisch-wissenschaftliche Anwendungen Testfragen Prima! Sie haben das Kapitel durchgearbeitet. Überprüfen Sie nun für sich selbst, wie viel Sie verstanden haben und beantworten Sie die folgenden Fragen. Versuchen Sie, die Fra- gen ohne Nachschlagen zu beantworten! Welche Aussage beschreibt das Moor'sche Gesetz am besten? Alles, was schiefgehen kann, wird auch schiefgehen. Die Anzahl neuer Apps wächst jedes Jahr exponentiell. Die Packungsdichte der Transistoren auf einem Mikroprozessor wird etwa alle 18 Monate verdoppelt. Richtig! Auswerten Wer gilt als Erﬁnder der Lochkarte? Hermann Hollerith Konrad Zuse Wilhelm Schickard 15 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Richtig! Auswerten Wann ungefähr wurde der Abakus zum ersten Mal genutzt? vor ca. 300 Jahren vor ca. 30 Jahren vor ca. 3000 Jahren Richtig! Auswerten 16 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Wer gilt als Erﬁnder der ersten funktionsfähigen Re- chenmaschine? Konrad Zuse Charles Babbage Wilhelm Schickard John von Neumann Richtig! Auswerten 3 Algorithmus, Pseudocode Lösen von Programmierproblemen Grundsätzliche Vorgehensweise Algorithmus 17 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Begriﬀ und Eigenschaften Begriﬀ Geht auf den persischen Mathematiker und Astronom Ibn Musa Al-Chwarismi im 9. Jahrhundert zurück. Ist eine Verarbeitungsvorschrift, die von einer Maschine (oder auch von einem Menschen) durchgeführt werden kann. Aus der Präzision der sprachlichen Darstellung des Algorithmus muss die Abfolge der einzelnen Verarbeitungsschritte eindeutig hervorgehen. Legt fest, wie Eingabedaten in einer endlichen Zahl an Schritten in Ausgabedaten umgewandelt werden. Beispiel Backrezept Zum Herleiten der Eigenschaften von Algorithmen soll ein Backrezept dienen. Zutaten: 300g Mehl, 1 TL Backpulver, 300g Butter, 5 Eier, 259g Zucker, 1 Prise Salz, 3 EL Kakaopulver, 1 EL Schokocreme Zubereitung: Butter mit Zucker und Salz schaumig rühren Eier zugeben Backpulver zum Mehl geben und über Eier-Buttermasse sieben... Im Backofen bei 180 Grad 50-60 Minuten backen Kuchen 10min auskühlen lassen Eigenschaften 18 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Ein Backrezept hat alle Eigenschaften eines Algorithmus. Die Eingabedaten sind die Zutaten, die Ausgabedaten sind der Kuchen. Die Eigenschaften der schrittweisen Abarbeitung sind: Endlichkeit: Die Beschreibung ist endlich lang Terminierung: Nach Durchführung endlich vieler Anweisungen kommt das Verfahren zum Stillstand. Eindeutige Reihenfolge: Die Reihenfolge der Anweisungen ist festgelegt. Eindeutige Wirkung: Die Wirkung jeder Anweisung und damit der gesamten Folge ist ein- deutig festgelegt. Algorithmen sind unabhängig davon, wie sie technisch realisiert werden Algorithmen werden textuell oder graﬁsch dargestellt werden Ein Beispiel für die textuelle Beschreibung ist das Backrezept. Für die graﬁschen Beschreibung werden Diagramme genutzt. Beispiele sind: ◦ Kontrollﬂussgrafen, Programmablaufplan ◦ Im weiteren Verlauf des Moduls werden wir dies vertiefen Vorgehen beim Entwurf Es gibt grundsätzlich zwei Strategien für den Entwurf von Algorithmen: 1. Top-down Strategie 2. Bottom-up Strategie Top-Down Strategie: Das gegebene Gesamtproblem wird in möglichst einfache Teilprobleme zerlegt, die dann einzeln gelöst werden. Aus den Lösungen dieser Teilprobleme wird dann die Lösung des Gesamtproblems abgeleitet. Diese Strategie wird auch „Divide and Conquer“ genannt. Bottom-Up Strategie: Hierbei besteht das Gesamtproblem aus mehreren Teilproblemen. Diese Teilprobleme werden geeignet zusammengefügt, um eine Lösung des Gesamtproblems zu generieren. Für unsere Übungen ist diese Strategie geeignet. Beispiele Euklidscher Algorithmus Von Euklid ca. 300 v.Chr. gefundene Euklid’sche Algorithmus dient der Bestimmung des größten gemeinsamen Teilers (ggT) zweier natürlicher Zahlen a und b Anmerkung: Euklid kannte noch gar keinen Computer! Der Algorithmus ist: Eingabe Zwei ganze positive Zahlen a und b 19 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Ausgabe ggT von a und b Algorithmus Wiederhole folgende Schritte r = Rest der ganzzahligen Division von a:b a=b b=r bis r = 0 ist Gib a aus, da sich nun in a der ggT beﬁndet Beispiel für zwei konkrete Zahlen: Eingabe a = 14, b = 6 Ausgabe ? Algorithmus r = Rest der ganzzahligen Division von 14:6 = 2 a=6 b=2 r = 0? Nein: Wiederholen der Schritte r = Rest der ganzzahligen Division 6:2 = 0 a=2 b=0 r = 0? Ja: Beenden ggT = a = 2 GUI-Algorithmus 1. Bei Klick auf Button „+“ 1. Lies die Zahlen aus den Textboxen ein 2. Addiere die beiden Zahlen 3. Speichere das Ergebnis in einer weiteren Zahl 4. Zeige das Ergebnis an 2. Bei Klick auf Button „-“ 1. … Pseudocode Einführung Wir haben gelernt, dass ein Algorithmus als Text beschrieben werden kann. Die beim Backrezept gezeigte Möglichkeit ist allerdings nicht geeignet, um von einem Computer abgearbeitet zu wer- den. Dafür braucht man eine Programmiersprache. Darauf gehen wir gleich ein. 20 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Um ein Verständnis von Programmiersprachen aufzubauen, beschäftigen wir uns zunächst mit dem sogenannten Pseudocode. Ein Pseudocode ist eine leicht formalisierte (also nach bestimmten Regeln organi- sierte) textuelle Beschreibung, die bereits wesentliche Merkmale einer echten Pro- grammiersprache enthält. Dies soll an einem Beispiel erläutert werden. Das zu lösende Problem ist "Finde das Minimum einer Zahlenreihe". Gegeben ist: Eine Folge a0, a1,...an-1 von n positiven ganzen Zahlen, (also n > 0) Gesucht: Der kleinste Wert a der gegebenen Zahlen, d.h. a = min(a0,....an-1) Zur Lösung des Problems wird folgende Strategie verwendet: Durchlaufe die Elemente der Folge und merke den bisher kleinsten Wert Diese Form des Algorithmus ist aber zu ungenau, um von einem Computer ausgeführt werden zu können (vergleiche mit den Eigenschaften eines Algorithmus). Besser ist folgende, noch im- mer für einen Menschen gut verständliche Darstellung. Setze merker auf a0; Setze i auf 0; Solange i < n ist, fuehre aus: Wenn ai < merker, dann Setze merker auf ai; Erhoehe i um 1; Gib merker zurueck; Pseydocode.mp4 Video zur Erläuterung des Algorithmus Achtung: Das erste Element in einer Folge hat den Index "0", daher setzen wir i = 0 am Anfang des Algorithmus Grundelemente der Programmierung (Erläuterung als Pseudocode) Variable Die im oben gezeigten Algorithmus gemerkte Zahl wir durch merker präsentiert. merker ist eine sogenannte Variable. Eine Variable ist ein "Behälter" bzw. eine "Speicherzelle", die zur Aufnah- me eines Wertes dient. Setze merker auf a0; 21 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Setze i auf 0; Bzw. die Kurzschreibweise, die wir ab jetzt verwenden werden merker = a0; i = 0; Wichtig: Die Wertzuweisung erfolgt immer von rechts nach links, d.h. nur die Variable, die links neben dem Gleichheitszeichen steht, ändert sich, nicht die Variable, die rechts daneben steht. Beispiel: a = 0; b = 1; a = b; Welchen Wert haben a und b am Ende dieses kurzen Algorithmus? Die Antwort ist: a ist 1, b bleibt 1. Es ändert sich also a, und nicht b. Die klingt trivial, dies zu verinnerlichen ist aber wichtig. Dies ist ein Grundprinzip der Programmierung! Anweisung (Statement) Zeilen wie i = 0; nennt man Anweisungen. Eine Anweisung ist eine Auﬀorderung an den Computer: Bitte mach das (in dem Fall weise der Variablen i den Wert Null zu). Es gibt unendliche viele mögliche Anwei- sungen (Zeige Fehlermeldung, Multipliziere zwei Variablen, Warte für 1s usw.) Eine Anweisung endet immer mit einem »Stoppzeichen«, oftmals ist das ein Semikolon. Einfa- che Anweisungen haben keine Bedingungen: Sie werden ausgeführt, sobald der Programmab- lauf diese Anweisung bearbeitet. Sollen Anweisungen nur unter bestimmten Bedingungen aus- geführt werden, spricht man von bedingten Anweisungen. Bedingte Anweisung Wenn/Dann (Conditional Statement if/else) Bedingte Anweisungen werden im Pseudocode durch wenn und eine Bedingung eingeleitet. Ei- ne Bedingung ist im Prinzip eine Abfrage (z.B. Hat ein Anwender die Hauptstadt von Deutsch- land richtig benannt?). Eine Bedingung hat zwei Werte: 22 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Erfüllt oder nicht erfüllt bzw. in der Programmierung spricht man von wahr (true) und falsch (false) Falls die Bedingung erfüllt ist, wird die hinter dann stehende Anweisung ausgeführt. Optional kann eine alternative Anweisung ausgeführt werden, die hinter sonst steht. Schreibweise: 1 Wenn Bedingung, dann 2 Anweisung1; 3 Sonst 4 Anweisung2; Das folgende Beispiel sieht schon mehr nach Programmierung aus, ist aber inhaltlich identisch zum obigen Beispiel 1 if (Bedingung) 2 { 3 true-Anweisungen 4 } 5 else 6 { 7 false-Anweisungen 8 } 9 10 //Einfachauswahl: Wenn die Bedingung wahr ist (z.B. Hauptstadt von Deutschland ist Berlin), dann bearbeite Anweisungen 11 //in der ersten Klammer(true-Anweisungen). 12 13 //Wenn nein, (jemand hat eine andere Stadt angegeben) 14 //dann bearbeite Anweisungen in der zweiten Klammer (false-Anweisungen) Schleife (Loop) Eine Schleife hat die Aufgabe, bestimmte Anweisungen mehrmals auszuführen. Wie oft dies ge- schieht, hängt von der sogenannten Abbruchbedingung ab, die hinter dem Wort solange steht. Welche Anweisungen innerhalb der Schleife ausgeführt werden sollen, wird hinter dem Schlüs- selwort fuehre aus angegeben. Handelt es sich um mehrere Anweisungen, spricht man von einem Block. Die An- weisungen, die zu einem Block gehören, werden durch geschweifte Klammern "{ }" eingefasst. 23 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... 1 Solange Bedingung, führe aus 2 Anweisung1 3 4 //Beispiel 5 a = 1; 6 i = 0; 7 8 Solange i < 5, führe aus 9 { 10 a = a - 1; 11 i = i + 1; 12 } Übung für das Verständnis einer Schleife Beantworten Sie die Frage: Welche Werte haben die Variablen a und i am Ende die- ses Algorithmus? Die Tabelle zeigt die Antwort. Nummer des Durch- i zu Beginn des i zum Ende des Wert von laufs Durchlaufs Durchlaufs a 1 0 1 0 2 1 2 -1 3 2 3 -2 4 3 4 -3 5 4 5 -4 Zum Beantworten der Frage zeigt die Tabelle die Änderungen der Werte von a und i für jeden einzelnen Durchlauf. Die Schleife wird 5-mal durchlaufen. Die Antwort ist daher: i = 5 und a = -4 PseydocodeSchleife.mp4 Video zur Erläuterung (Durchlauf bis i < 3) Das folgende Beispiel sieht schon mehr nach Programmierung aus, ist aber inhaltlich identisch zum obigen Beispiel 24 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... 1 for(begin, condition, step) 2 { 3 Anweisung 1; 4 Anweisung 2; 5 } 6 7 //Setze einen Zählwert auf begin. 8 //Führe die Anweisungen in der Klammer so lange aus, 9 //wie die condition wahr ist. Ändere den Zählwert gemäß 10 //Anweisung in step mit jedem Durchlauf 11 12 Beispiel 13 for{counter=1, counter < 10, counter++} 14 { 15 Anweisung 1; 16 Anweisung 2; 17 } Funktion (Function) Eine Funktion ist eine Stelle im Programm, auf die gezielt hingesprungen werden kann. In der GUI-Programmierung ist dies zum Beispiel die Stelle, auf die bei einem Klick auf einen Button gesprungen wird. Funktionen haben den Zweck, wiederkeh- rende Aufgaben an einer Stelle zu konzentrieren. Im späteren Verlauf des Semes- ters gehen wir noch intensiv auf Funktionen ein. 1 Funktion_PlusButtonClicked 2 { 3 zahl1 = Inhalt von Textbox1; 4 zahl2 = Inhalt von Textbox1; 5 Ergebnis = zahl1 + zahl2; 6 } 7 8 Funktion_MinusButtonClicked 9 { 10 zahl1 = Inhalt von Textbox1; 11 zahl2 = Inhalt von Textbox1; 12 Ergebnis = zahl1 - zahl2; 13 } 25 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Rückgabewert (Return) Die letzte Anweisung des Algorithmus, die mit gib beginnt, ist die sogenannte Rückgabeanwei- sung. Sie liefert den Wert, der in der Variablen merker gespeichert ist, zurück. Wurde der Algo- rithmus innerhalb einer Sprungstelle, d.h. einer Funktion (unten im Beispiel Funktion_Minimum) ausgeführt, so gibt die Rückgabeanweisung den Wert an die aufrufende Funktion (unten im Bei- spiel Funktion_Aufrufstelle) zurück. Funktion_Minimum() { merker = a0; i = 0; Solange i < n ist, fuehre aus: { Wenn ai < merker, dann { merker = ai; } i = i + 1; } Gib merker zurueck; } Funktion_Aufrufstelle { minimum = 0; minimum = Funktion_Minimum() } In vielen Programmiersprachen wird das Schlüsselwort return verwendet, um ei- nen Wert zurückzugeben. Folgen (Array, List) Eine Folge ist eine Auﬂistung von endlich vielen Variablen (beispielsweise Zahlen). Ist n die Anzahl der Glieder einer endlichen Folge, so spricht man von einer Folge der Länge n. Die Variable mit der Nummer i, man sagt hier auch: mit dem Index i, wird i-tes Element der Folge genannt. 26 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... In der Programmierung hat das erste Element eine Folge immer den Index 0. Folg- lich hat das letzte Element immer den Index n-1. Beispiel: Eine Folge a natürlicher Zahlen mit der Länge n = 6: a = {11, 7, 8, 3, 15, 13} Die einzelnen Elemente dieser Folge sind: a0 = 11 a1 = 7... an-1 = 13 Sequentielle Abarbeitung Die Abarbeitung von Code erfolgt schrittweise nacheinander (sequentiell). Innerhalb einer Funk- tion ist dies also "von oben nach unten". Wenn der Algorithmus auf eine Funktion springt, wird die Abarbeitung in dieser Funktion fortgesetzt. Nach der Rückgabeanweisung springt der Algo- rithmus wieder an die Stelle, an der die Funktion aufgerufen wurde. Das folgende Bild erläutert diese Aussage. Die Reihenfolge der Anweisungen wird durch deren Nummerierung angegeben. 27 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Programmiersprachen Einführung Texte (Briefe, E-Mail) werden in einer Sprache geschrieben (Deutsch, Englisch,...) ◦ Möglichkeiten der Sprache werden durch ihre Grammatik bestimmt Computerprogramme werden in einer Programmiersprache geschrieben Ihre Grammatik wird Syntax genannt ◦ "Die Syntax deﬁniert, wie Sprachelemente zusammenhängen und verwendet wer- den dürfen." Ein Programm besteht aus vielen Sprachelementen, die dem Programm eine Bedeutung geben, die Semantik ◦ "Die Semantik ist die Bedeutung des Programms." Übersetzungsvorgang Programmiersprachen werden nicht direkt durch einen Computer verstanden. Daher ist eine Übersetzung des Programmcodes in sogenannten Maschinencode notwendig. Danach ist ein 28 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... ausführbares Programm verfügbar (z.B. EXE auf Windows Betriebssystemen). Wenn es sich um eigenständige ausführbare Programme handelt, wird der Programmcode in Maschinencode mithilfe eines sogenannten Compiler übersetzt. Der Compiler hat auch die Auf- gabe, die Syntax des Programmcodes auf Richtigkeit zu überprüfen. Anmerkung: Der Pro- grammcode wird auch "Quelltext", "Source Code" auch nur "Code" genannt. Der schematische Ablauf des Übersetzungsvorgangs zeigt das folgende Bild. Dieses Vorgehen gilt z.B. für die Programmiersprache C# Das folgende Video zeigt bildhaft die Funktionsweise eines Compilers. Das Video wurde im HNF Paderborn aufgenommen. Funktionsweise eines Compilers JavaScript (wie wir es in diesem Kurs verwenden werden) wird nicht direkt ausge- führt, sondern vom Browser on-the-ﬂy gelesen und interpretiert. Es erfolgt also kei- ne Übersetzung in Maschinencode. Beispiele Es gibt hunderte Programmiersprachen! Hier ein paar wichtige bzw. in der Industrie häuﬁg ge- nutzte Programmiersprachen: 29 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Auswahlkriterien Bestehende Programmier- und Nutzungsgewohnheiten Vorgaben der Zielumgebung (z.B. bei SAP gilt die Programmiersprache ABAP) Unabhängigkeit vom Betriebssystem Vorgeschriebene Standards in den Unternehmen JavaScript Wikipedia schreibt JavaScript (kurz JS) ist eine Skriptsprache, die ursprünglich 1995 von Net- scape für dynamisches HTML in Webbrowsern entwickelt wurde, um Be- nutzerinteraktionen auszuwerten, Inhalte zu verändern, nachzuladen oder zu generieren und so die Möglichkeiten von HTML zu erweitern. Heute wird JavaScript auch außerhalb von Browsern angewendet, etwa auf Servern und in Microcontrollern. Der heutige Name der ursprünglich LiveScript genannten Sprache entstand 1996 aus einer Kooperation von Netscape mit Sun Microsystems. Deren Java-Applets, erstellt mit der gleichfalls 1995 veröﬀentlichten Programmier- sprache Java, wurden mithilfe von LiveScript in den Netscape Navigator in- tegriert. Um die Popularität von Java zu nutzen, wurde LiveScript in JavaScript umbenannt, obwohl die beiden Sprachen voneinander unab- hängig entwickelt wurden und völlig unterschiedliche Grundkonzepte aufweisen. Testfragen 30 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Prima! Sie haben das Kapitel durchgearbeitet. Überprüfen Sie nun für sich selbst, wie viel Sie verstanden haben und beantworten Sie die folgenden Fragen. Versuchen Sie, die Fra- gen ohne Nachschlagen zu beantworten! Welches der folgenden Elemente ist kein Grundele- ment des Pseudocodes? Schleife Variable Bedingte Anweisung Funktion Wirkstelle Richtig! Auswerten Ist ein Algorithmus abhängig von einer Programmier- sprache? Kann man nicht so genau sagen Nein Ja Richtig! Auswerten 31 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Welche der folgenden Aussagen über Compiler ist richtig? Ein Compiler wandelt...... C++ in Java.... Maschinencode in Quelltext.... Quelltext in Maschinencode. Richtig! Auswerten 1 b = 0; 2 i = 0; 3 4 Solange i 2 3 5.2 Variablen, Datentypen, Arrays Variable Begriﬀ Die Variable ist eines der wichtigsten Elemente in der Programmierung. Eine Variable besteht aus einem Namen und einem Wert. Darüber hinaus haben Variablen auch einen Datentyp (Erläuterung im nächsten Abschnitt) 56 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Der Wert kann sich ändern, daher der Begriﬀ "Variable". Der Name der Variable kann nicht geändert werden, sobald der einmal festgelegt wurde. Es ist allerdings möglich, zwei Variablen gleich zu benennen, sofern sie in einem an- deren Geltungsbereich deklariert werden. Wir kommen darauf später zu sprechen im Abschnitt Funktionen Die erstmalige Einführung einer Variablen im Programm heißt Deklaration Deklaration von Variablen 1 //assign the value 1 to variable x 2 let x = 1; 3 4 //assign the value x + 1 to variable x 5 let y = x + 1; 6 7 //add the variables x and y and assign the result to variable z 8 let z = x + y; Variablen müssen immer vor der Verwendung deklariert werden. Die Verwendung von unbekannten Variablen führt zu einem Programmfehler. Neben dem Schlüsselwort let gibt es weitere Möglichkeiten, Variablen zu deklarieren und zwar: Automatisch (ohne Schlüsselwort) Schlüsselwort var Schlüsselwort const Das Schlüsselwort var wurde von 1995 bis 2015 im gesamten JavaScript- Code verwendet. Die Schlüsselwörter let und const wurden 2015 zu JavaScript hinzugefügt. Das Schlüsselwort var sollte nur in Code verwendet werden, der für ältere Browser geschrieben wurde. Auf die automatische Deklaration (ohne Schlüsselwort) sollte ganz ver- zichtet werden. 57 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Verwenden Sie const, wenn der Wert nicht geändert werden soll. Wir verwenden in den Übungen das Schlüsselwort let (ggf. auch mal const). Die Verwendung ohne Schlüsselwort ist mittlerweile unüblich, die Verwendung von var ist veraltet. Block Eine Zeile im Programm wird auch Anweisung genannt. Eine Anweisung kann aus einer einzigen Codezeile mit Semikolon am Ende oder einer Folge von ein- zeiligen Anweisungen in einem Block bestehen. Ein Anweisungsblock ist in ge- schweifte Klammern {} eingeschlossen und kann geschachtelte Blöcke enthalten (siehe Beispiel unten). Am Ende eines Anweisungsblocks steht kein Semikolon. Tipp: Sie können sich wie folgt merken, wann ein Semikolon verwendet wird und wann nicht: Immer wenn eine geschweifte Klammer { folgt, dann wird kein Semikolon gesetzt Beispiele: for() { } if() { } Datentypen Begriﬀ Ein Datentyp bestimmt, was in einer Variablen gespeichert werden kann, also ob ei- ne Zahl, ein Text, ein Datum etc. 58 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Der Datentyp deﬁniert den möglichen Wertebereich [von]..[bis] einer Variablen Bei Festlegung des Datentyps ist der mögliche Wertebereich "zu erahnen", um spätere Probleme zu vermeiden. Siehe Beispiel "Jahr 2000 Problem". Eine Variable eines Datentyps kann in eine Variable eines anderen Datentyps konvertiert (umgewandelt) werden. Beispiel "Jahr 2000 Problem" Als die ersten Programme in den 1960er/1970er entstanden (Banken-Software, Flugbuchungssysteme etc.) nutzte man nur zwei Ziﬀern, um eine Jahreszahl anzuge- ben, z.B. 74 für 1974. Die Gründe dafür lagen hauptsächlich im limitierten Speicher- platz der damaligen Computer. Aber, man konnte sich auch nicht wirklich vorstel- len, dass diese Programme noch im Jahr 2000 genutzt werden würden. Aber, so war es: Es näherte sich das Jahr 2000 und plötzlich realisierte man, dass eine 2-ziﬀrige Jahresangabe doppeldeutig sein würde. Eine 74 könnte in Zukunft also 1974 oder 2074 bedeuten. Es mussten daher große Anstrengungen unternommen werden, um die existierenden Programme anzupassen. Siehe auch Wikidepia. Datentypen in JavaScript JavaScript hat 8 Datentypen: String Number BigInt Boolean Undeﬁned Null Symbol Object The object data type kann enthalten: 1. Ein object 2. Ein array 3. Ein date Beispiele: 59 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... 1 // Numbers: 2 let length = 16; 3 let weight = 7.5; 4 5 // Strings: 6 let color = "Gelb"; 7 let lastName = "Schmidt"; 8 9 // Booleans 10 let x = true; 11 let y = false; Eine JavaScript-Variable kann jeden Datentyp enthalten. Der Datentyp wird automa- tisch durch den zugewiesenen Wert bestimmt (anders als in stark-typisierten Pro- grammiersprachen). Der Datentyp einer Variable kann sich zur Laufzeit ändern! Au- ßerdem kann sowohl der Datentyp als auch der Wert zurückgesetzt werden. Beispiel 1 let x; // Now x is undeﬁned 2 x = 5; // Now x is a Number 3 x = "John"; // Now x is a String 4 5 x = undeﬁned; // Value is undeﬁned, type is undeﬁned JavaScript Zahlen sind immer ein Typ, und zwar: double (64-bit ﬂoating point). Das heißt, für jede Zahl (egal ob ganzzahlig, boolean, Kommazahl, werden immer 64bit im Speicher reserviert. Ausnahme ist der Datentyp BigInt, der größere Zahlen spei- chern kann. Datentypen in C# Anders als JavaScript, ist C# eine stark typisierte Programmiersprache. D.h. der Da- tentyp einer Variable muss explizit bei der Deklaration genannt werden. Eine Um- 60 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... wandlung zwischen Variablen mit unterschiedlichen Datentypen ist oftmals nur durch eine sogenannte Konvertierung möglich. Arrays Begriﬀ Im Pseudocode haben wir bereits Folgen kennengelernt. In JavaScript benutzt man diesen Begriﬀ nicht, man spricht von einem Array Ein Array (Englisch für Feld) ist ein ein- oder mehrdimensionales Element zum Verwalten von Variablen Analogie zur Mathematik ⎛1⎞ ◦ Eindimensionales Array - Vektor ⎜ 2 ⎟ ⎝3⎠ 7 8 ◦ Zweidimensionales Array -> Matrix ( ) 5 6 Arrays vereinfachen die Verwaltung zusammenhängender Variablen Dabei können in JavaScript die Variablen unterschiedliche Datentypen haben (zur Verein- fachung, werden wir in diesem Kurs nur mit Array desselben Datentyps arbeiten. 61 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Vielleicht hilft Ihnen dieses Bild, um besser zu verstehen, was ein Array ist. In der analogen Welt werden CD in einer CD-Box gut strukturiert aufbewahrt. Dies ist viel besser, als die CD lose ungeordnet abzulegen. Außerdem kann die CD-Box nur CD enthalten (nur einen Datentyp), also keine Schallplatten oder Musikkas- setten. Arrays in JavaScript 1 //One variable per weekday, which is not optimal 2 let monday = "Monday"; 3 let tuesday = "Tuesday"; 4 let wednesday = "Wednesday"; 5 let thursday = "Thursday"; 6 let friday = "Friday"; 7 let saturday = "Saturday"; 8 let sunday = "Sunday"; 9 10 //Better to declare an array, which holds all weekdays 11 //Use following syntax 12 const weekdays = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]; 13 14 //Assign the "Wednesday" to a new variable 15 let day = weekdays; Wichtiges über Arrays: 62 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Variablen werden in einem Array mit einem Index adressiert (z.B. für Mitt- woch ist der Index = 2) ◦ let wednesday = weekdays; Arrays sind nullbasiert, d.h. die erste Variable wird über den Index = 0 adressiert (vgl. Folgen in Pseudocode). ◦ let monday = weekdays; Die Länge von Arrays kann wie folgt ermittelt werden: ◦ let numOfWeekday = weekdays.length; Das letzte Element wird mithilfe der Länge adressiert ◦ let sunday = weekdays[weekdays.length - 1]; Größe der Arrays kann dynamisch sein, man kann weitere Elemente hinzu- fügen. ◦ weekdays = "Another Day"; Mehrdimensionale Arrays Es gibt auch mehrdimensionale Arrays. In diesem Kurs gehen wir allerdings nicht näher darauf ein. Ein Beispiel: 1 //Create a two dimension 2 let myArray = [ [1, 2, 3], 3 [4, 5, 6], 4 [7, 8, 9] 5 ]; 6 7 let element = myArray; // gets the value in the second row, third column (6) 5.3 Verzweigungen, Schleifen if-Anweisung/Kontrollﬂussgraph Verzweigung mit einfacher if-Anweisung Bedingte Anweisungen: Verzweigung mit if-Anweisung Bei einer bedingten Anweisung wird prüft, ob ein bestimmter Code ausgeführt wer- 63 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... den soll oder nicht bzw. ob einer optionaler Code ausgeführt werden soll Wenn (if)... dann (then)... sonst (else)... optional if-Anweisung ist eine häuﬁg verwendete bedingte Anweisung. In einer if-Anweisung wird ein boolescher Ausdruck (wahr/falsch) geprüft. Wenn heute Montag ist, dann... Bedingte Anweisungen in JavaScript: Einfache if-Anweisung 1 let x = 4; //Assign a value to x 2 let y = 0; //Declare another variable 3 4 if(x < 4) //Check a certain condition, which is either true or false 5 { 6 y = 8; 7 } Boolescher Ausdruck für Bedingungen Die Bedingung einer Verzweigung ist ein boolescher Ausdruck. Ein boolescher Ausdruck ist eine Formel, in den Operanden durch Operatoren (z.B. Vergleichsoperatoren) verknüpft sind. Ein boolescher Ausdruck ist entweder wahr (true) oder falsch (fal- se). Beispiele: ◦ 3 == 7 //hat den Wert false ◦ 3 != 7 //hat den Wert true ◦ i < n //true, wenn Wert von i kleiner als Wert von n, sonst false Wichtige Vergleichsoperatoren in JavaScript sind: ◦ ▪ == ist gleich (Werte werden verglichen, wenn Number mit String verglichen wird, true wenn beide dieselbe Zahl enthalten) ▪ === ist gleich (Werte und Datentypen werden verglichen, nur true wenn z.B. Number mit Number verglichen wird und beide dieselbe Zahl enthalten) ▪ >= ist größer gleich ▪ ist größer Stellen Sie den Wahrheitswert folgender Bedingun- gen fest: 1. 3/2 > 5 2. 5*2 == 30/3 3. (100*10)/1000 != 1 Kontrollﬂussgraph Ein Kontrollﬂussgraph zeigt den sogenannten Kontrollﬂuss eines Programms, der theoretisch möglich ist. D.h. er zeigt alle möglichen Wege auf, die ein Programm durchlaufen kann. Ein Kontrollﬂussgraph enthält Knoten (engl.: nodes) und gerich- tete Kanten (engl.: edges). Das Beispiel zeigt den Kontrollﬂussgraphen einer if-Anweisung. Sie enthält 4 Knoten und 4 Kanten. Der Knoten n4 steht exemplarisch für die Anweisung, die nach der if-Anweisung folgen würde. 65 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... In einem konkreten Programmablauf ist aber immer nur ein Kontrollﬂuss mög- lich! In dem Beispiel der if-Anweisung folgt also dem Knoten n2 entweder n3 oder n4, beides gleichzeitig geht nicht. Für diese Lehrveranstaltung gelten folgende Regeln beim Zeichnen von Kontrollﬂussgraphen: Der erste Knoten ist die erste Anweisung in der Funktion, der letzte Knoten das return (so- fern gezeigt). Jedes if, else, for... ist ein eigener Knoten Allein stehende Klammern sind keine Anweisungen, daher haben sie keinen Knoten. In der Informatik gibt es etliche Alternativen zum Kontrollﬂussgraphen. Das sind z.B. Struktogramme und Programmablaufpläne. Damit werden wir uns aber damit in diesem Kurs nicht beschäftigen. Verzweigung mit if-Anweisung mit Alternativen Bedingte Anweisungen in JavaScript: if-Anweisung mit einer Alterna- tiven 66 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... 1 let x = n; 2 3 if(x das Attribut onclick ergänzt. Die Syntax ist wie folgt: 1 2 3 Text auf dem Button 1 function printResult(){ 2 //tue etwas 3 } Der Funktion, die bei onclick aufgerufen werden, kann auch ein Parameter übergeben werden. Dafür gibt es syntaktisch mehrere Möglichkeiten. Wir werden in den Übungen folgende Syntax nutzen: 1 2 4 Text auf dem Button 78 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... 1 function printResult(param1){ 2 //der interne Name des Parameters ist param1 3 // er kann wie eine Variable genutzt werden, z.B. 4 let x = 0; 5 let y = x + param1, 6 } Lokale und globale Variablen Variablen, die innerhalb einer JavaScript-Funktion deklariert werden, sind für die Nutzung innerhalb der Funktion begrenzt und werden lokale Variable genannt. Auf lokale Variablen kann also nur innerhalb der Funktion zugegriﬀen werden. Da lokale Variablen nur innerhalb ihrer Funktionen erkannt werden, können Varia- blen mit demselben Namen in verschiedenen Funktionen verwendet werden. Loka- le Variablen werden beim Start einer Funktion erstellt und nach Beendigung der Funktion wieder gelöscht. 1 // code here can NOT use carName 2 3 function myFunction() 4 { 5 let carName = "Volvo"; 6 // code here can use carName 7 } 8 9 // code here can NOT use carName 79 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Der Gültigkeitsbereich einer Variablen bezeichnet die Abschnit- te eines Programms, in dem die Variable genutzt werden kann, bzw. in der sie für den Compiler sichtbar ist. Man spricht daher auch vom Sichtbarkeitsbereich. Eine Variable ist in dem Block, in dem sie deklariert ist, sowie in allen Unterblöcken diese Blocks gültig, d.h. verwendbar. Variablen, die außerhalb einer Funktion deklariert werden, nennt man glo- bale Variablen. In Abhängigkeit von der Stelle, an der die globale Variablen deklariert werden, kann deren Gültigkeitsbereich mehrere Software- Module umfassen. Erläuterung Gültigkeitsbereich (Quelle: Wikipedia) Kurze Übung 80 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Identiﬁzieren Sie die lokalen und globalen Variablen in dem gezeigten Beispiel. 1 let x = 0; 2 3 function myFunction() 4 { 5 let y = 0; 6 7 while (y < 10) 8 { 9 let z = 1; 10 x++; 11 y = x + z; 12 } 13 } 5.5 Testfragen Prima! Sie haben das Kapitel bearbeitet. Prüfen Sie nun für sich selbst, wieviel Sie vom Inhalt verstanden haben. Versuchen Sie die Fragen ohne Nachschlagen zu beantworten! 81 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Was ist der Unterschied zwischen einer while-Schleife und einer do/while Schleife? Keine der beiden Schleifen wird mindestens einmal durchlaufen. Eine do/while Schleife wird mindestens einmal durchlaufen, eine while- Schleife nicht unbedingt. Eine while-Schleife wird mindestens einmal durchlaufen, eine do/while- Schleife nicht unbedingt. Richtig! Auswerten Welche der folgenden Aussagen über Parameter ist richtig? Ein Parameter.... ist eine lokale Variable in einer Funktion... ist der Rückgabewert einer Funktion... ist ein Eingangswert einer Funktion. Richtig! Auswerten Welche der folgenden Aussagen über eine if- 82 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Bedingung sind richtig? Sie.....beschreibt eine exponentielle Berechnungsformel....kann mehrere mathematische und Vergleichsoperationen kombinie- ren...ist entweder wahr oder falsch. Richtig! Auswerten Ordnen Sie die Schleifenarten dem richtigen Schlüs- selwort zu, mit dem Schleifen in JavaScript erstellt werden können. Anordnung zurücksetzen for while do/while Kopfgesteuerte Schleife Fußgesteuerte Schleife Zählschleife 83 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Richtig! Auswerten Welche der folgenden Aussagen über Datentypen sind richtig? Ein Datentyp......beschreibt den Wertebereich von Variablen....zeigt an, dass eine bedingte Anweisung folgt....ist ein Typ, der mit Daten arbeitet....gibt an, von welcher Art die Daten sind, die mit ihm beschrieben wer- den. Richtig! Auswerten Mit welchem Index greifen Sie in JavaScript auf das erste Element in einem Array zu? Mit Index 0 Richtig! 84 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Auswerten Welche der unten genannten Begriﬀe sind gültige Da- tentypen in JavaScript? List Object Number Boolean Index String Real Float Richtig! Auswerten 85 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... 1 function GefuehlteTemperatur(temperatur) 2 { 3 let gefuehlt = ""; 4 5 if(temperatur 10 && temperatur S S -> N Die Beschreibung als Positionssystem Die Basiszahl ist 2. Eine natürliche Zahl n wird durch folgende Summe dargestellt: 90 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... N−1 ◦ n= ∑i=0 bj * 2i ▪ b = Ziﬀern (bj ∊ ℕ0, 0 ≤ bj < 1) ▪ N = Anzahl der Stellen Beispiel: ◦ 12 = 1*23+ 1*22 + 0*21 + 0*20 ◦ Darstellung als Dualzahl: 1100 Übung Wandeln Sie folgende Dualzahlen in Dezimalzah- len 00111100 11111111 10001000 Hexadezimalsystem Neben dem Dualsystem ist in der Informatik noch das Hexadezimalsystem wichtig, da es ebenfalls in einer engen Beziehung zum Dualsystem steht. Es gilt nämlich: 24 = 16. Die Beschreibung als Positionssystem Die Basiszahl ist 16. Ziﬀernvorrat: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F Eine natürliche Zahl n wird durch folgende Summe dargestellt: N−1 ◦ n= ∑i=0 bj * 16i ▪ b = Ziﬀern (bj ∊ ℕ0, 0 ≤ bj < F) ▪ N = Anzahl der Stellen Beispiel: ◦ 28 = 1*161+ C*160 ◦ Darstellung als Hexaldezimalzahl: 1C(16) Hexadezimalzahlen können wie Dezimalzahlen aussehen! 91 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Beispiel: 11 ◦ 11(16) = 17(10) ◦ Die 11 im Hexadezimalsystem ist eine 17 im Dezimalsystem! Achten Sie also immer darauf, um welches Positionssystem es sich bei der Darstellung einer Zahl handelt. Zahlensysteme in JavaScript Wenn in JavaScript eine ganze Zahl nicht gesondert gekennzeichnet ist, dann handelt es sich um eine Dezimalzahl. Um anzuzeigen, dass es sich um eine Hexadezimalzahl handelt, wird ein 0x vorge- stellt. Um anzuzeigen, dass es sich um eine Dualzahl handelt, wird ein 0b vorgestellt. Maßeinheiten in der Informatik Zahlensysteme: Duale Größenangaben (gebräuchlich!) Basierend auf dem Dualsystem haben sich die allgemein bekannten Größenangaben wie Bit, Byte etc. etabliert. Doch was sagen diese Größenangaben genau aus? 92 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Ein Bit ist eine einzelne Binärstelle (0 oder 1), die ein Rechner speichert. Abkürzung für "BInary digiT". Kleinste Informationseinheit, die ein Computer verarbeiten kann. Ein Byte sind 8 Bit. Zum Beispiel: 10011001 Ein WORD sind 16 Bit bzw. 2 Byte. Diese Größenangabe ist in der sogenannten em- bedded Programmierung gebräuchlich. Wir werden dies nicht weiter verwenden. Die Deﬁnitionen der weiteren, uns bekannten Maßeinheiten zeigt die folgende Tabelle. Quelle: Herold, H.; Lurz, Wohlrab, J.: Grundlagen der Informatik, Pearson, 2. Auﬂ., 2012. Die Maßeinheiten sind also immer Potenzen der Zahl 2. Wie Ihnen vielleicht auﬀällt, weicht die Deﬁnition von Kilo (=1024) von der sonst üblichen Deﬁnition (=1000) ab. Duale Größenangaben (normiert) Um diese "Unregelmäßigkeit" zu korrigieren, wurde der Versuch gestartet, die binären Maßein- heiten den dezimalen Maßeinheiten anzupassen. Für die Maßeinheiten der 2er Potenzen wur- den die Präﬁxe "Kibi", "Mebi" etc. eingeführt. Siehe dazu folgende Tabelle. 93 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Quelle (2024): https://www.pcgameshardware.de/Neue-Technologien-Thema-71240/ Specials/PCGH-Basiswissen-im-Video-Was-unterscheidet-Gigabyte-und- Gibibyte-605340/GByte-605340/ Diese Standardisierung konnte sich bislang nicht durchsetzen! In diesem Kurs nut- zen wir die in der Informatik üblichen Maßeinheiten (1 KByte = 1024 Bytes etc.) Umwandlung zwischen Zahlensystemen Es besteht in der Informatik immer wieder die Notwendigkeit, die Darstellung von Zah- len von einem Zahlensystem in ein anderes Zahlensystem umzuwandeln. Die nächsten Abschnitte erläutern, wie dabei vorzugehen ist. Umwandlung von Dual- in Hexadezimalsystem Um eine im Dualsystem dargestellte Zahl ins Hexadezimalsystem zu konvertieren, bildet man von rechts beginnend so genannte Dualtetraden (Vierergruppen). Für jede Vierergruppe wird dann genau eine Hexadezimalzahl ermittelt Beispiel 94 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... 1100100110001111(2) C98F(16) Vierergruppen 1100 1001 1000 1111 Hexadezimalsystem C 9 8 F Kurze Übung Wandeln Sie folgende Dualzahlen in Hexadezimal- zahlen. Nutzen Sie jeweils Vierergruppen 00111100 11111111 10001000 Umwandlung von Dezimal- in Dualsystem Um eine Dezimalzahl x in eine Dualzahl umzuwandeln, wendet man folgende Vorgehensweise an: 1. x : 2 = y Rest z 2. Mache y zum neuen x. Merke dir den Rest. 3. Wiederhole Schritt 1 und 2 fort, solange wie das neue x ungleich 0 ist. Ergebnis: Die ermittelten Reste z von unten nach oben und dann nebeneinander geschrieben, ergeben die Dualzahl. Die folgende Tabelle zeigt diese Vorgehensweise am Beispiel der Dezimalzahl 30 95 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Umwandlung von Dezimal- in Hexadezimalsystem Um eine Dezimalzahl x in eine Hexadezimal umzuwandeln, wendet man folgende Vorgehens- weise an: 1. x : 16 = y Rest z 2. Mache y zum neuen x. Merke dir den Rest. 3. Wiederhole Schritt 1 und 2 fort, solange wie das neue x ungleich 0 ist. Ergebnis: Die ermittelten Reste z von unten nach oben nebeneinander geschrieben ergeben die Hexadezimalzahl. Die folgende Tabelle zeigt diese Vorgehensweise am Beispiel der Dezimalzahl 30 Weitere Umwandlungen Natürlich sind auch weitere Umwandlungen möglich wie: Dualzahl nach Dezimalzahl (haben wir schon geübt) Hexadezimalzahl nach Dezimalzahl 96 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Hexadezimalzahl nach Dualzal Da diese Umwandlungen sehr einfach sind, gehen wir nicht weiter darauf ein. Ermitteln Sie für sich selbst, wie diese Umwandlun- gen erfolgen können. Schreiben Sie jeweils ein Bei- spiel auf. Erinnern Sie sich, was ein Positionssystem ist. Rechnen im Dualsystem Addition von Dualzahlen Duale Zahlen haben lediglich den Wertebereich {0,1}. Wenn man duale Zahlen spaltenweise ad- diert, kann durch Addition der Wertebereich überschritten werden. In dem Fall wird der aus der Grundmathematik bekannte Übertrag genutzt, der den Wert 1 annehmen kann und jeweils ei- ne Spalte links versetzt notiert wird. Wann ein Übertrag in der dualen Addition benötigt wird, zeigt die folgende Tabelle. Addition Ergebnis 0+0 0 0+1 1 1+0 1 1+1 0 (Übertrag 1) 1+1+1 1 (Übertrag 1) 1+1+1+1 0 (Übertrag 10, also zwei Stellen links) Im Folgenden sind zwei Beispiele gezeigt, die dies erläutern. Der Übertrag wird jeweils links neben der Spalte eingetragen, die den Übertrag erzeugt hat. 97 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... In dem Video wird das schrittweise Vorgehen bei einer dualen Addition erläutert. DualeAddition.mp4 Subtraktion von Dualzahlen Ähnlich verhält es sich mit der Subtraktion von dualen Zahlen. Auch hier wird das Hilfsmittel Übertrag genutzt. Die Tabelle zeigt die jeweiligen Ergebnisse einer dualen Subtraktion. Subtraktion Ergebnis 0-0 0 0-1 1 (Übertrag 1) 1-0 1 1-1 0 0-1-1 0 (Übertrag 1) 1-1-1 1 (Übertrag 1) 98 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Im Folgenden ist ein Beispiel gezeigt. Der Übertrag wird wiederum jeweils links neben der Spalte eingetragen, die den Übertrag erzeugt hat. Subtraktion durch 2-er Komplement Die Subtraktion von Dualzahlen gilt als umständlich und ist in der Digitaltechnik mit logischen Verknüpfungen nicht möglich. Es existiert kein digitaler Schaltkreis, der subtrahieren kann. Des- halb behilft man sich mit dem sogenannten Komplement. Zur Erläuterung des Komplement, müssen wir zunächst verstehen, wie negative Zahlen im Com- puter verwaltet werden, da es ja nur den Wertebereich {0,1} gibt. Negative Zahlen werden im sogenannten höchstwertigsten Bit angezeigt (das Bit ganz links in der Dualzahl). Wenn dieses Bit gesetzt ist, dann handelt es sich um eine negative Zahl. Dieses Bit wird auch Most-Signiﬁcant Bit (MSB) genannt. MSB = 0: positive Zahl MSB = 1: negative Zahl Aber, es reicht nicht aus, nur das MSB = 1zu setzen: Falsch ist: 1 = 0001 und -1 = 1001! Negative Zahlen sind das sogenannte 2er Komplement einer positive Zahl. Der Zahlenring unten zeigt jeweils vier Bits einer positiven Zahl und das dazugehörende 2er Komplement. 99 von 191 27.01.2025, 13:52 Informatik-Grundlagen (JS): TH OWL - eCampus https://ecampus.th-owl.de/ilias.php?baseClass=illmpresentationgui&c... Doch wie genau wird das 2er Komplement gebildet? Dafür gibt es die folgende Regel: 1. Fange bei der rechten Stelle (niedrigstwertiges Bit) an. 2. 1. Wenn diese Stelle eine 0 ist, schreibe eine 0 und gehe zu Punkt 3; 2. Wenn diese Stelle eine 1 ist, schreibe eine 1 und gehe zu Punkt 4. 3. Gehe ein Zeichen nach links und wiederhole Punkt 2. 4. Invertiere alle restlichen Stellen bis zum höchstwertigen Bit. Alternative Faustregel: 1. Invertiere alle Stellen 2. Addiere 1 Diese Regeln sind jeweils in beide Richtunge

Informatik-Grundlagen (JS) - TH OWL - eCampus PDF

Document Details

Tags

Related

Summary

Full Transcript