Javascript Zusammenfassung

Ich fasse für mich zusammen, weil ich auf diese Weise leichter bzw. schneller lerne. Außerdem muss ich zuerst mal verstehen, WARUM gewisse Befehle angegeben werden müssen und welche Funktion sie haben, weil ansonsten verstehe ich nur Bahnhof. Wobei ich natürlich einiges schon kenne, aber trotzdem aufschreiben möchte.
Es wird eine Weile dauern, doch ich werde versuchen diese Zusammenfassung nach und nach zu erweitern.

Einstieg in Javascript

script

Javascript Anweisungen müssen zunächst in den HTML-Code eingebunden werden. Das Script kann entweder im Header- oder im Bodybereich eingefügt werden. Wird das Script bspw. im Header eingebunden, so wird es bevor sich die Website öffnet ausgeführt.
Das Script ist mittels eines -Tags anzugeben und all das was sich in diesen Container befindet ist ein Script. Damit verständlich wird, um welche Scriptsprache es sich handelt, kann man dies über den Parameter „language“ angeben, wodurch der Befehl lautet:

language javascript

Der Script-Typ wird mittels“type“ angegeben.

Beispiel:

type javascript

Wird zum Beispiel eine separate Scriptdatei verwendet, so muss man das ebenfalls im Code angeben und zwar durch das Attribut „src„, das auf den Pfad zur separaten Datei hinweist:
<script language=“javascript“ type=“text/javascript“ src=“meineFunktion.js“>

Elementare Grundstrukturen von Javascript

Variablen
Arrays
Datentypen
Operatoren
Ausdrücke
Anweisungen
Kommentare

Variablen

Variablen werden mit const, let oder var deklariert und sind ein Speicher oder Platzhalter , denen zur Laufzeit eines Scripts über das Gleichzeichen temporär Werte zugeordnet werden können. Angesprochen werden diese Variablen über Namen, die sie vorher zugewiesen bekommen haben.

Hier ein Beispiel zu einer Variable ohne Typ und ohne Wert:

var Hanswurst;

Hier ein Beispiel zu einer Variable mit Wertzuweisung:

var Hanswurst =50;

Die Variable Hanswurst wird somit als Zahl festgelegt und erhält den Wert 50.

Nun ein kleines Übungsbeispiel:

HTML:

javascript_html_hanswurst

Javascript:

javascript var hanswurst

document.write(„<BR>“) legt den Zeilenumbruch fest.

Ergebnis im Browser:
javascript ergebnis browser

Im weiteren Beispiel wird dem Wert eine Zahl hinzugefügt, wodurch sich das Endergebnis ändert, bzw. erhöht:

html Gemüsekiste
javascript rosemadder

Ergebnis:

browser rosemadder

Arrays

Ein Array ist eine Sammlung von Variablen, die jeweils mittels eines Namens gekennzeichnet sind und dienen dazu eine Reihe von gleichartigen Informationen zu speichern, wie zum Beispiel die Tage eines Monats.

Beispiel:

var Dies_ist_Tag_1 = 1;
var So_ein_Tag_2 = 2;
var Noch_ein_Tag = 3;
var Undnocheiner = 4;
var Tag_5 = 5;
var Und_hier_Tag_6 = 6;
var Tag_7 = 7;

var Jetztwirdeszweistellig = 10;
var Tag_11 = 11;

var Tag_28 = 28;
var Tag_29 = 29;
var Tag_30 = 30;

Der Unterschied eines Arrays ist – im Vergleich zu einer herkömmlichen Variable – dass man neben dem Namen, noch die Anzahl von Elementen angeben- oder ein Kennzeichen setzen muss, dass es sich um ein Array handelt. Zudem wird zur Erzeugung dessen ein Schlüsselwort namens „new“ verwendet.

Beispiel:

var Tag_im_April = new Array(30);

Wenn man einem Element eines Arrays einen Wert zuordnen möchte, dann muss man diesen in einer eckigen Klammer angeben:

var Tag_im_April [ 0 ] = 1;
var Tag_im_April [ 1 ] = 2;

var Tag_im_April [ 29 ] = 30;

Die vier Grundtypen von Variablen

  • Object
  • Number
  • Boolean
  • String

Object = Kann einen Wert eines beliebigen Typs enthalten. In der Regel dient „Object“ zum Speichern von Instanzen von Klassen.

Number = Diese Variable kann einen Dezimal- oder einen Gleitkommawert enthalten. Sie angegebenen Zahlen müssen anstelle des Kommas einen Punkt enthalten.

Boolean = Bei diesem Variablentyp wird nur entweder „true“ oder „false“ angegeben.

String = Dieser Typ der Variablen kann normalen Text sowie auch Zahlen beinhalten.

Schlüsselworte

Bei Schlüsselwörtern in Javascript, handelt es sich um sogenannte „reservierte Wörter“ (reserved words), die nicht als Name für einen Bezeichner verwendet werden dürfen, weil ansonsten die Ausführung des Programms verhindert wird. Aus diesem Grund muss man bei der Namensgebung eines Bezeichners darauf achten, dass es sich dabei nicht um ein Schlüsselwort, bzw. um ein reserviertes Wort handelt.

Reservierte Wörter (aus SELFHTML-Wiki)

Reserviertes WortErläuterung
breakTeil einer Abbruchanweisung. Wird verwendet in Schleifen und bei switch.
caseFür Fallunterscheidungen mit switch.
catchWird bei der Fehlerbehandlung mit try und catch verwendet.
classFür die Definition einer Klasse (ES6).
constLeitet die Deklaration einer oder mehrerer Konstanten ein.
continueTeil einer Fortsetzungsanweisung.
debuggerDefiniert einen Haltepunkt im Programm für Debugger.
defaultStandardklausel bei switch. Auch verwendet bei Standardexport in einem Modul.
deleteOperator zum Löschen von Objekteigenschaften.
doFür Schleifen mit do und while.
elseTeil einer bedingten Anweisung mit if.
exportWird bei der Deklaration eines Exports in einem Modul verwendet.
extendsMit dem Schlüsselwort extends kann eine abgeleitete Klasse definiert werden.
finallyKann bei der Fehlerbehandlung mit try und catch verwendet werden.
forWird in verschiedenen Schleifen verwendet.
functionSchlüsselwort zur Definition einer Funktion.
ifFür bedingte Anweisungen.
importWird verwendet bei der Deklaration eines Imports aus einem Modul.
inOperator in einem relationalen Ausdruck. Auch verwendet in einer Schleife mit for.
instanceofHiermit kann geprüft werden, ob ein Objekt eine Instanz eines Konstruktors ist.
newOperator für den Konstruktorenaufruf.
returnTeil der Rückgabeanweisung einer Funktion.
superSchlüsselwort zum Methoden- oder Konstruktorenaufruf in Objekt oder abgeleiteter Klasse.
switchFür Fallunterscheidungen.
thisEingebaute Kontextvariable von Funktionen.
throwErzeugt eine benutzerdefinierte Ausnahme.
tryWird bei der Fehlerbehandlung mit try und catch verwendet.
typeofOperator, der den Datentyp des Operanden zurückgibt.
varSchlüsselwort für die Deklaration einer oder mehrerer Variablen.
voidWertet den Ausdruck auf der rechten Seite aus und gibt standardmäßig undefined zurück.
whileWird bei Schleifen verwendet.
withKann verwendet werden, um mehrere Anweisungen mit einem Objekt durchzuführen.
yieldPausiert die Ausführung einer Generatorfunktion.

Weitere Schlüsselwörter, die nicht als Name für einen Bezeichner  verwendet werden sollten:

Reserviertes WortErläuterung
letLeitet die Deklaration einer oder mehrerer Variablen ein.
staticWird verwendet um innerhalb einer Klasse eine eigene Methode zu definieren.
Reserviertes WortErläuterung
nullRepräsentiert die beabsichtigte Abwesenheit eines Wertes.
falseBoolescher Wert, der für falsch steht.
trueBoolescher Wert, der für wahr steht.

  • implements
  • interface
  • package
  • private
  • protected
  • public

Anweisungen

Html/CSS: Banner mit Lichteffekt

In den letzten Tagen war ich lange am Rumprobieren. Eigentlich wollte ich ein Logo entwerfen, blieb aber schlussendlich beim Banner stehen. Beim Entwurf eines Logos tue ich mich echt schwer, weil sie eben eher schlicht gehalten werden müssen. Außerdem muss das Logo auch in kleinster Größe erkennbar sein… es ist nicht leicht. Naja, aber den Banner finde ich echt cool, wobei er noch nicht fertig ist. Er hat jedoch schon eine goile Eigenschaft, es geht das Licht an, sobald man mit der Maus darüberfährt 😀  Eine witzige Spielerei, die mir gestern auf Anhieb gelungen ist, ohne nachgoogeln zu müssen, mhmmm 🙂 ^^
Echt mega, ich liebe es..ich könnte von früh-morgens bis spätabends an dieser Seite herumexperimentieren, es ist mega cool. Ja, heute werde ich den Banner noch ausarbeiten und dann mit dem Logo beginnen.

hier mein Lichteffekt-Banner:

Inns_Web 

Man kanns natürlich auch noch steigern xD

wobei ich dieses Beispiel hier eher zum Spaß gemacht habe. Es ist ein einfacher Banner mit Hover-Effekt, also 2 Bilder die mittels Mouseover aktiviert werden 🙂

HTML/CSS: Menü funktioniert! =)

So, jetzt hab ich es endlich geschafft, dass mein Menü nicht zusammenbricht, sobald das Browserfenster verkleinert wird. Ich hätte noch gerne auf jedem Button ein Icon, doch bei längerem Linktext, wie bspw. „Impressum“ rutscht der Text immer unter den Button. Ich hab zwar herausgefunden, wie ich mein Icon positionieren kann, doch es haut irgendwie nicht hin, dass alle Icons mit Schrift einheitlich positioniert sind. Aus diesem Grund gibt es nur das Home-Icon 😀

hier der Link zur Seite:

Dams

– Der Banner muss noch ausgeschmückt werden, außerdem möchte ich noch ein weiteres Menü einsetzen, allerdings anders positioniert und dann müsste ich noch gucken ob es senkrecht oder ebenfalls horizontal erscheinen soll.
Der Name der Site (Dams) ist auf jeden Fall noch wandelbar, denn den Namen gibt es schon…es ist alles noch wandelbar und dient einfach nur dazu, ein Gefühl für html und CSS zu bekommen. Es gibt noch Vieles zu lernen, leider ist das Tutorial nun fertig, ich finde es schade, dass Macjo nicht weitere Tutorials hochgeladen hat, da er wirklich gut und verständlich erklären kann.
Es gibt sicherlich noch x weitere Youtuber, die ähnliche Tutorials anbieten, doch mir wäre es lieber gewesen weiterhin von ihm zu lernen.

HTML/CSS: Kleiner Spaß :-) (Image-Hover-Button)

Letztlich dachte ich mir, dass es cool aussehen könnte, Tastatur-Tasten als Buttons zu benutzen. Schlussendlich hab ich welche gemacht und versucht sie einzusetzen. Leider gefallen sie mir nicht. Sie sehen zwar witzig aus, doch die normalen CSS-Buttons sind deutlich schöner. Aus diesem Grund werden sie nicht zum Einsatz kommen, aber es ist nicht schlecht, dass ich sie gemacht habe, denn so ein Image-hover-Button kann mir vielleicht später mal nützlich sein. Es war jedenfalls eine spaßige Übung, auch wenn ich ziemlich lange daran herumgebastelt habe 🙂

Die Icons von den Tasten-Buttons sind nicht von mir, ich hab sie mir bei deviantart herunter geladen 🙂
Es war nur ein Test, ansonsten hätte ich natürlich selbst welche gezeichnet.

HTML & CSS: Hover Effekt mit Button

Heute konnte ich wieder an meiner Testwebsite arbeiten.
Momentan bin ich am Lernen, wie man Buttons mit diversen Effekten erstellt und wie man mit Schriften arbeitet.
Ab einem gewissen Punkt, wenn ich das Fenster verkleinere, bricht mein Menu zusammen, ich werde daran arbeiten, dass es hinhaut. Es hatte bereits funktioniert, aber ich wollte die buttons erstens nicht ganz oben starten und ihnen auch einen gewissen Abstand verleihen und somit wars dahin^^
Sobald das Fenster eine gewisse Größe erreicht, klappen die buttons nach unten und das ist mega sch…
Ich muss mir das CSS noch ein bisschen genauer angucken.

… LOL, ich habs hinbekommen. Nun sehen die buttons zwar anders aus, aber nun funktioniert es 😀

so, nun passt es, doch zufrieden bin ich nicht, weil jetzt die Schrift zu klein ist…ich musste sie verkleinern, weil sonst der Button-Text nach unten gerutscht wäre

nö…es fuchst immer noch -.- HOPPSALA xD
…ich habs, es ist das LOGO xD, das Logo ist der Grund für die runter springenden Buttons xD…ey -.-

– Wahrscheinlich ist das was ich hier gerade gemacht habe, nicht wirklich möglich 😀
Ich hab da zwei oder 3 verschiedene Tutorials vermischt, also irgendwie umfunktioniert, ohne wirklich schon Ahnung, von einem Button-Menü zu haben, denn im Turorial ging es nur um den Button. Eigentlich käme ein normaler Link oben in die Navigation, aber ich wollte eben den durchsichtigen Navigationsstreifen und ein Button-Menü^^…ich finde das voll cool 🙂 (Morgen schau ich mit einer box zu arbeiten)
Doch ich glaube, dafür muss man andere Befehle geben und die jeweiligen Buttons auch numerieren bzw. ihnen eine class zuteilen. Jo, das is mir aber jetzt echt zu viel, ich hab heute nur 2 Stunden geschlafen. Doch ich werde weiter daran arbeiten und einfach mal die Turorials weiter (der Reihe nach) verfolgen, weil die sind wirklich super!

Tutorial(CSS Tutorial deutsch, CSS3 lernen für Anfänger #1):

CSS Tutorial deutsch, (CSS3 lernen für Anfänger #1 (2018)):

HTML und CSS

Vorgestern hab ich mit html und CSS begonnen, da ich mich auf eine Ausbildung vorbereiten möchte. Es läuft sehr gut, ich konnte bereits eine komplette Seite mit Menü, Links und Bildern erstellen. Mit dem Notepad++ klappt das recht gut, weil man den html- und den css Code nebeneinander legen kann und somit alles gut im Überblick hat. Ein paar Fehler sind noch drin (der Text oder die Bilder passen sich dem Fenster nicht an und das wird bei Handys problematisch. Nebenbei springt die Überschrift hin und her), da mir noch das Wissen dazu fehlt, doch ich werde weiter lernen und daran arbeiten. Ich muss die Positionierung abändern, momentan lautet mein Befehl für den Text so:
margin-left: 400px;
margin-right: 400px; und das führt natürlich dazu, dass sich der Text nicht dem Fenster anpassen kann…doch das muss ich eben noch checken 😀

Es macht richtig Spaß!

Hier meine Test-Website:

Dams

(es ist alles erfunden, auch das Logo ist nur ein Testlogo)

Gameguru hab ich mal zur Seite gelegt, da mein Computer einfach zu alt ist und sich die Gestaltung des Spiels als noch mühevoller als erwartet herausstellt. Ich warte jetzt mal ab, bis die ganzen Neuerungen heraußen sind und bis ich einen neuen, gut funktionierenden PC habe.
Es ist auch so, dass ich des Öfteren an komplett selbst erstellten Objekten arbeite…stundenlang daran arbeite… und dann lassen sie sich aus unerklärlichen Gründen nicht hochladen. Das Sofa, welches ich erst kürzlich erstellt hatte, lässt sich ebenfalls nicht ins Spiel integrieren, nur die Kissen. Das Problem dabei ist, dass ich absolut nicht verstehe wo der Fehler liegt und jo, das nervt! 🙂