▪️ 1. Semester | ECOM (Fach) / JavaScript (Lektion)
In dieser Lektion befinden sich 41 Karteikarten
JavaScript Skript
Diese Lektion wurde von simoneaschauer erstellt.
Diese Lektion ist leider nicht zum lernen freigegeben.
- Was ist JavaScript? JavaScript ist eine Skriptsprache... um die Möglichkeiten von HTML & CSS zu erweitern
- JS dient zum: Auswerten von Benutzerinteraktionen Verändern von Inhalten – nachladen und generieren
- Wohin wird JS geschrieben? zwischen den Tags <script> und </script>
- Wo wird JS eingebunden? JS kann in den <head> oder in <body> geschrieben werden oder es können externeDateien in JS eingebunden werden
- JavaScript Output JS kann Daten auf verschiedene Weise ausgeben - in ein HTML Element- in die HTML Ausgabe- in eine „Warnmeldung“ (Alert Box)- in die Browserconsole
- HTML Element - document.getElementById(„id“).innerHTML = ... - mit dieser Methode kann JS ein HTML Element ansprechen - mit id wird das HTML Element angesprochen - innerHTML meint den HTML Inhalt
- HTML Ausgabe - document.write(); - zum Testen kann document.write() angewendet werden
- Alert Box - window.alert(5+6); - mithilfe von window.alert() wird eine Alert Box ausgegeben
- In der Browserconsole - console.log(5+6); - mithilfe von console.log() wird es in der Console ausgegeben - die Console ist praktisch zum Testen und zur Fehlersuche
- JavaScript Statements die einzelnen Anweisungen im Programm Code werden Statements genannt z.B. die Anweisung eine Ausgabe in einem HTML Dokument zu machen ist einStatement (document.getElementById(„demo“).innerHTML=“Hello Dolly“; wichtig ist dabei, der Strichpunkt, der die einzelnen Statements voneinander trennt mehrere Statements können in eine Zeile geschrieben werden, wenn sie durchStrichpunkte getrennt sind (z.B. a=5; b=6; c=a+b;) Leerzeichen werden ignoriert, können aber die Lesbarkeit erhöhen
- JavaScript Syntax Wichtige Regeln für die Syntax sind: Zahlen werden mit oder ohne Dezimalpunkt geschrieben (10.50 1001) Strings sind Texte und werden in einfachen oder doppelten Hochkommasgeschrieben JavaScript ist Case Sensitive (dh. Achtung auf Groß- und Kleinschreibung) verboten sind Bindestriche in Variablennamen, diese werden als Minus interpretiert
- JavaScript Kommentare Um Codes übersichtlicher zu strukturieren und seine Funktion zu erklären können Kommentareverwendet werden. Kommentare können über eine oder mehrere Zeilen gehen Einzeiliger Kommentar // alles zwischen // und dem Ende der Zeile wird nicht ausgeführt Mehrzeiliger Kommentar /* ... */ alles zwischen /* und */ wird nicht ausgeführt
- JavaScript Variablen - dienen als Container für Daten Beispiel: var price1 = 5; var price2 = 6; var total = price1 + price2; - Variablen müssen bevor sie verwendet werden mit var deklariert werden -jede Variable hat einen einzigartigen (unique) Namen - Länge des Namens nicht vorgegeben -> kann nur ein Buchstabe sein oderbeschreibend wie z.B. firstName, lastName etc. - Namen können Buchstaben, Zahlen, Unterstriche und $-Zeichen beinhalten - Name muss mit einem Buchstaben beginnen - es gibt reservierte Wörter, die nicht verwendet werden können
- JavaScript Operatoren Operatoren verändern Variablen Wir bearbeiten folgende Operatoren: Arithmetische Operatoren Zuweisung (Assignment) Operatoren String Operatoren Vergleichs Operatoren Logische Operatoren
- Arithmetische Operatoren + Addition - Subtraktion * Multiplikation ** Potenzierung / Division % Modulus ++ Inkrement -- Dekrement
- Zuweisungs Operatoren Operator - Beispiel - Gleichbedeutend 1. = x = y x = y 2. += x+=y. x = x+y 3. -= x-=y. x = x-y
-
- String Operatoren der bekannte + Operator kann dafür verwendet werden um 2 Strings zusammenzufügen Zum Beispiel: var txt1= "John"; var txt2= "Doe"; var txt3= txt1 + " " + txt2;
- Vergleichs Operatoren == equal != not equal > größer >= größer gleich < kleiner <= kleiner gleich
- Logische Operatoren Für die boolsche Algebra && and || or ! not
- JavaScript Bedingungen Mithilfe des Schlüsselworts if werden Codeblöcke an eine Bedingung geknüpft
- Bedingung überprüfen if if (Bedingung) { // führe diesen Code aus } Dieser Codeabschnitt ist folgendermaßen zu interpretieren:- wenn die Bedingung zutrifft, führe den Codeblock innerhalb der geschwungenen Klammern aus- wird die Bedingung nicht erfüllt wird der Codeblock übersprungen Es stehen folgende Logische Operatoren zur Verfügung: Größer > Kleiner < Größer gleich >= Kleiner gleich <= Gleichheit == Ungleichheit !=
- Bedingungslose Alternative if / else if (Bedingung) { // führe diesen Code aus } else { // ansonsten tu dies } Solche bedingungslosen Alternativen werden mit dem Schlüsselwort else abgebildet- sollte die Bedingung im if nicht zutreffen, wird die bedingungslose Alternative immer ausgeführt Bedingungen treten im echten Leben häufig zusammen mit einer Alternative aufo z.B. ist es vor 12:00 Uhr sagt man „Guten Morgen“o ansonsten „Guten Tag“
- Bedingte Alternative if / else if / else if (Bedingung) { // führe diesen Code aus } else if (Bedingung2) { // Alternativer Code } else { // Alternativer Code } Solche Alternativen werden mit dem Schlüsselwort else if () abgebildet es wird immer nur der Codeblock ausgeführt, dessen Bedingung erfüllt wird eine bedingungslose Alternative kann, muss jedoch nicht vorhanden sein Bedingungen können neben einer bedingungslosen, auch beliebig viele bedingte Alternativen besitzeno z.B. Sommer Rabatt: 5% Rabatt für jede Bestellung 10% ab 30€ Mindestwarenwert 15% ab 40€ Mindestwarenwert 20% ab 60€ Mindestwarenwert
- JavaScript Schleifen Tätigkeiten werden oftmals nicht nur einmal ausgeführt, sondern mehrere Male wiederholt Zählen von 0 bis 10 Kaffee solange umrühren, bis sich der Zucker aufgelöst hat Solange Schritt für Schritt vorwärts gehen, bis man am Ziel angelangt ist Dabei kann man zwischen 2 Arten von Wiederholungen unterscheiden man weiß wie oft man etwas wiederholen muss und führt daher die Tätigkeit entsprechend oft aus man wiederholt die Tätigkeit solange eine gewisse Bedingung erfüllt ist Um auch Codes mehrmals hintereinander ausführen zu können stehen verschiedene Schleifen zur Verfügung Zählschleife: for Bedingte Schleife: while
- Zählschleife for bei vielen Tätigkeiten ist es bekannt, wie oft diese ausgeführt werden soll eine Zählschleife wird mit for erstellt for (var i =0; i < 5; i++) { console.log(i); } Generell benötigt das Schlüsselwort for 3 Teile, welche mit einem Strichpunkt getrennt werden: Teil 1: o wird als erstes Statement ausgeführt (ein einziges Mal für die gesamte Schleife) o erzeugt eine Zählvariable Teil 2: o Enthält die Bedingung, welche vor jeder Wiederholung geprüft wird o prüft, ob die Zählvariable kleiner als das geforderte Limit ist Teil 3: o Wird nach jeder Wiederholung ausgeführt o erhöht die Zählvariable um 1
- Bedingte Schleife while oftmals ist eine Wiederholung nicht an eine Zahl gebunden soll eine Tätigkeit wiederholt werden, solange eine Bedingung erfüllt ist, wird die bedingte Schleife benötigt eine bedingt Schleife wird mit dem Schlüsselwort while erstellt while (count < 10) { text +="x"; count++; } Die bedingte Schleife prüft vor jeder Wiederholung ob die Bedingung erfüllt ist auch vor der ersten Wiederholung ist die Bedingung zu Beginn nicht erfüllt, wird dieSchleife auch nicht durchgeführt.
- Zusatz zu Schleifen breakIn einigen Fällen ist es nötig eine Schleife frühzeitig zu beenden. Dies ist mit dem Schlüsselwort break möglich continueOftmals ist es auch nötig nur den aktuellen Schleifendurchgang frühzeitig zu beenden und mit der nächsten Wiederholung fortzusetzen. Dies ist mit dem Schlüsselwort continue möglichbeide Schlüsselwörter treten immer zusammen mit einer vorhergehenden Bedingung auf! Endlosschleife wird die Bedingung einer Schleife IMMER erfüllt entsteht eine sogenannte Endlosschleife ungewollte Endlosschleifen können zum Absturz der Webseite führen
- JavaScript Funktionen Soll ein Codebereich in verschiedenen Bereichen des Programmes verwendet werden muss dieser wiederverwendbar sein. Dies geschieht durch Funktionen. Eine Funktion - hat einen eindeutigen Namen - kann beliebig viele (auch keine) Parameter erfordern - kapselt einen Codebereich - kann ein Ergebnis zurückgeben - kann an beliebiger Stelle im Programm aufgerufen werden Ein Parameter - ist ein benannter, variabler Anteil einer Funktion (vergleichbar mit einer Variable) - muss beim Aufruf der Funktion angegeben werden - erhält seinen Wert über den Aufruf Eine Funktion im JavaScript wird mit dem Schlüsselwort function gefolgt mit dem Namen und den Parametern in runden Klammern erstellt. Der eigentliche Codeblock befindet sich in geschwungenen Klammern.
- Prozeduren (Funktionen) In JavaScript gibt es für Prozeduren kein eigenes Schlüsselwort -> Funktionen unterscheiden sich von Prozeduren nur durch Angabe von return innerhalb des definierten Codes - das Schlüsselwort return gibt an, dass die Funktion ein Ergebnis zurückliefert - das Ergebnis sollte im Anschluss weiter- /wiederverwendet werden durch: o Zuweisung an eine Variable und Verwendung dieser Variable (Ergebnis wiederverwendbar) o direkte Übergabe als Parameter einer anderen Funktion (Ergebnis nur einmalig verwendbar)
- Sichtbarkeitsbereiche (Scopes) Innerhalb des Programmcodes existieren verschiedene Sichtbarkeitsbereiche („Scopes“) - Ein Sichtbarkeitsbereich ist jener Abschnitts eines Codes in dem eine Variable nach der Deklaration mit dem Schlüsselwort var„existiert“ - Sichtbarkeitsbereiche werden geschachtelt, das heißt o ein „Unterbereich“ kann auf zuvor definierte Variablen eines übergeordneten Bereichs zugreifen o ein übergeordneter Bereich kann jedoch NICHT auf Variablen des Unterbereichs zugreifen o genauso wenig können Bereiche auf Variablen anderer gleichwertiger Bereiche zugreifen
- JavaScript Strings Strings werden verwendet um Texte zu speichern - sie enthalten keine oder mehrere Zeichen innerhalb von Anführungszeichen var carName1 = “Volvo XC60“
- String Methoden - Länge eines Strings (length) - String in einem String suchen (locate) - Teile eines Strings ausgeben (slice (startposition, endposition) - Teile eines Strings ausgeben (substring (startposition, endposition) - Teile eines Strings ausgeben (substr (startposition, länge) - Teile eines Strings ersetzten (replace) - Strings verbinden (concat)
-
- JavaScript Arrays Arrays werden verwendet um mehrere Werte in einer Variable zu speichern zum Beispiel: var cars = ["Audi", "Mazda", "BMW"];
- Zugreifen auf ein Array Zugreifen auf Array Werte über den Index zum Beispiel: var cars = ["Audi", "Mazda", "BMW"]; document.getElementById("demo").innerHTML = cars[0] *Wichtig: Index startet mit 0 -> d.h. [0] ist das erste Element
- Werte eines Arrays ändern zum Beispiel: var cars = ["Audi", "Mazda", "BMW"]; cars[0] = "Opel"; document.getElementById("demo").innerHTML = cars[0];
- Auf das ganze Array über den Namen zugreifen zum Beispiel var cars = ["Audi", "Mazda", "BMW"]; document.getElementById("demo").innerHTML = cars;
- JavaScript Events HTML Elevents sind Dinge, die in HTML Elementen passieren -> JavaScript kann dann darauf reagieren Events können sein: - Seite fertig geladen - Button geklickt - Mouseover
- JavaScript Events Button <button onclick="document.getElementById("demo").innerHTML= Date()"> The time is?</button>
- Gängige Events sind - onchange = HTML Element wurde verändert - onclick = wenn HTML Element geklickt wird - onmousover = Maus über HTML Element gehovert
- Arrays -> ein Element hinzufügen mit push() var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.push("Lemon");
- Arrays -> Element löschen Letztes Element löschen mit pop() var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.pop(); Erstes Element löschen mit shift() var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.shift();