Anleitung
Die Zielgruppe dieser Schulung sind Webentwickler und Websitedesigner, die Javascript einsetzten möchten.
Für das verstehen dieser Schulung werden guten Grundkentnisse in HTML und CSS vorausgesetzt.
Für das verstehen dieser Schulung werden guten Grundkentnisse in HTML und CSS vorausgesetzt.
HTML:
HTML = "Hypertext Markup Language"
HTML ist eine reine Textstrukturierungssprache, die aus verschiedenen TAGS (<xxx>yyyy<\xxx>) besteht.
HTML Tutorial
HTML ist eine reine Textstrukturierungssprache, die aus verschiedenen TAGS (<xxx>yyyy<\xxx>) besteht.
HTML Tutorial
CSS:
CSS = "Cascading Style Sheets"
Es handelt sich um die Schönheit einer Website und auch Gestaltungssprache.
CSS Tutorial
Es handelt sich um die Schönheit einer Website und auch Gestaltungssprache.
CSS Tutorial
Javascript:
Javascript wurde entwicklet, um die statische Inhalte von Websiten dynamisch zu verändern.
Beispielweise hat JS die folgenden Nutzung:
Beispielweise hat JS die folgenden Nutzung:
- Sicherstellen die korrekte Eingabe der Daten
- Kommunikation mit dem Server
- ...
ID:
Id weißt einem Tag einen Namen zu. ID muss eine eindeutige Attribute sein und Jedes TAG darf nur ein ID haben.
(<xxx id="ID_Name"><\xxx>)
Beispiel
JS:
document.getElementById("ID_Name")
(<xxx id="ID_Name"><\xxx>)
Beispiel
JS:
document.getElementById("ID_Name")
Class:
Class dienen dazu, mehrere TAGS zu gruppieren. Mithilfe einer Klasse können alle Elemente einer Klasse verändert werden.
Beispiel:
(<xxx id="ID_Name_1" class="class_1" ><\xxx>)
(<yyy id="ID_Name_2" class="class_1" ><\yyy>)
Class
JS:
Beispiel:
(<xxx id="ID_Name_1" class="class_1" ><\xxx>)
(<yyy id="ID_Name_2" class="class_1" ><\yyy>)
Class
Elements_Obj=document.getElementsByClassName("classname")
Elements_Obj ist ein Array
Parent and Children
das obige Foto stellt eine Hierarchie zwischen Elemente dar. Beispielweise hat HTML-TAG zwei children(Kinder) Head und Body.
Die Schlüsselwörter (childNodes, firstChild und nextSilbling) greifen auf die Elemente bzw. TAG zu, die keine ID oder keinen Klass-Attribute haben.
JavaScript:
Array_children = document.getElementById("Parent_ID").childNodes //Zugriff auf alle Kinder. Die Kinder sind die Elemente eines ArraysWie füge ich ein Element zu den Eltern ein?
new_child = document.createElement("TAG") // Erstellung des neues Kindesdocument.getElementById("Parent_ID").appendChild(new_child); // füge ein neues Kind zu den Eltern ein.
Wie füge ich als erstes Kind ein Element ein?
new_child = document.createElement("TAG")parent=document.getElementById("Parent_ID")
parent.insertBefore(new_child, parent.firstChild);
Bedingung
Wenn eine Bedingung richtig ist, dann werden die Befehle innerhalb ihres Block ausgeführt. Andere Bediengungen werden nicht geprüft.
Javascript:
if(condition1){.....}
else if (condition2)
{......}
else
{......}
JavaScript_Comparision
JavaScript_if_else
Funktion
Wenn wir einige Programmabläufe öfters benötigen, verwenden wir eine „Funktion“.
- Jede Funktion hat nur eine Aufgabe
- Jede Funktion könnte Eingaben und Rückgaben haben
- Innerhalb einer Funktion kann eine andere Funktion aufgerufen werden
- Nach dem Schlüsselwort „return“ werden die verbleibenden Befehle nicht ausgeführt
this
This ist ein Verweis auf das Object bzw. TAG bzw. Element, das die aktuelle Javascript-Funktion aufgerufen hat.
event
This ist ein Verweis auf die events des TAGS, die gerade passieren.
Arrow Function
Mit "Arrow function" können wir die Funktionen zusammenfassen.
Beispiel
Funktion
function Example (a,b) {
return a+b}
return a+b}
Arrow function
let myFunction = (a, b) => a * b;
Jquery
Jqeury ist eine JS-Bibliothek, die unsere Arbeit erleichtert. Mit Jquery können wir viele schöne Animationen bauen.
Code
importieren Jquery
https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js
Selector
$("tag or class_name or Tag")
neue Welt vs. alte Welt
alte Welt
Bis jetzt haben wir bezüglich des Frontend gelernt, wie wir viele schöne Sache zu bauen. Viele Tools wurden schon gebaut. Wir brauchen nur diese Tools aufrufen bzw. importieren und verwenden.
neue Welt
die neue Welt ist sehr wunderbar, aber sie hat viele Vorteile und Nachteile
- sehr sicher
- enthält viele Tools
- Userfriendly für die Kunden
- manchmal komleziert für den Entwickler
- Entwickler müssen viel lernen
