Schritt für Schritt und kostenlos zur eigenen Homepage
Aller Anfang ist schwer, nehmen Sie sich die Zeit und lesen Sie alles in Ruhe durch, folgen Sie einfach den Anleitungen und probieren Sie die Beispiele selber aus, experimentieren Sie auch gerne selber mal etwas rum!
PHP und Co. Programmieren lernen geht natürlich nicht ohne entsprechende Verwendung von Programmen und Tools, als Erstes laden Sie sich einen Texteditor herunter,
diesen dann bitte auch installieren, für Einsteiger kann ich da z. B. Notepad++ empfehlen, dies ist ein
sehr einfacher und guter Texteditor. Im Übrigen auch kostenlos!
Gut, wir haben einen Editor, nun sollten Sie wissen, was ein Dateisystem ist, zumindest sollten Sie sich mit den
sogenannten „Pfaden“ auskennen, das Prinzip ist jedoch ganz einfach, Sie haben einen Hauptordner in dem sich Ihre ganze Webseite später befinden soll. Nun wollen wir ja nicht
alle Dateien in einem Ordner, das wäre bei 3 - 10 Dateien ja kein Problem, aber wenn Sie später einmal hunderte von Dateien in dem Ordner haben, finden Sie sich nicht mehr zurecht.
Daher ist eine übersichtliche Ordnerstruktur immer wichtig! Legen wir nun los. Erstellen Sie sich einen Ordner auf Ihrer Festplatte und benennen Sie ihn wie Sie möchten, z. B. „Homepage“.
Erstellen Sie in diesem Ordner eine Textdatei und nennen Sie diese „index.html“. Dies können Sie nun schon über den Editor ganz einfach erledigen, öffnen Sie Notepad++ und gehen Sie
auf Datei → Neu (CTRL + N), anschließend speichern Sie diese leer in Ihr vorhin erstelltes Homepage-Verzeichnis, dieses nennen wir ab jetzt „Stammverzeichnis“. Haben Sie nun
soweit alles richtig gemacht dann haben Sie nun irgendwo auf Ihrem PC einen Ordner erstellt mit Namen „Homepage“ oder ähnlich und enthält eine Datei namens „index.html“. Ist das so? Wenn
ja dann glückwunsch, Sie haben den Anfang geschafft! Der sogenannte „absolute Pfad“ lautet nun also C:/homepage/index.html - vorausgesetzt Sie haben den Ordner auch „homepage“ genannt und ihn
unter C: erstellt - versteht sich. Der relative Pfad (immer ausgehend vom Stammverzeichnis) lautet also einfach „index.html“! Der absolute Pfad zeigt also auch die Festplatte und das Verzeichnis
mit an, hätten Sie nun bereits einen Webserver mit Domain so könnte das ganze nun so aussehen: https://ihre-domain.de/index.html - dazu kommen wir aber erst später, für den Moment reicht Ihr
Computer völlig aus! Nun wissen Sie was es mit den Pfaden auf sich hat und haben nun auch einen Texteditor, Sie sind jetzt gerüstet! Weiter gehts »
Wenn Sie etwas ins Netz stellen möchten, können Sie dies am einfachsten mit HTML bewerkstelligen, hierzu benötigen Sie erstmal nur den Editor den Sie bereits installiert haben
sollten, zum programmieren lernen, ist dieser Editor auch Ihr bestes Werkzeug! HTML Elemente werden durch ein sogenanntes „Tag“ definiert, ein Link zu einer anderen Seite erstellt man z. B. mit einem „<a>Link</a>“, möchten Sie einen
Text fett darstellen so können Sie das Tag „b“ nutzen: „<b>Fettgedruckter Text</b>“.
Probieren Sie es doch einmal selbst aus, kopieren Sie sich eines der beiden Beispiele, fügen Sie es hier ein und Klicken Sie auf „Run it“, im rechten Fenster
sehen Sie wie dies auf einer Webseite aussehen könnte. Tauschen Sie nun einmal den Buchstaben „b“ oder falls Sie den Link genommen haben, tauschen Sie das „a“ mal gegen ein „i“ aus,
vergessen Sie aber nicht das 2. „a“ am Ende, welches das führende „/“ trägt. Klicken Sie wiederum auf „Run it“ und sehen Sie was passiert. Ihre Schrift ist nun „italic“, also schräg
gestellt. Und so ähnlich z. B. sieht ein Button auf unserer Seite aus: „<a href="javascript:;" class="btn btn-flat aiqia-bg-orange aiqia-font-white">Link</a>“
Nun Erstellen wir aber erstmal ein Grundgerüst, worauf wir dann aufbauen können. HTML-Seiten enthalten immer typische Merkmale und sind von der Grundstruktur her meist ähnlich. Allerdings gibt es jede Menge verschiedene Arten von HTML, darauf gehe ich hier aber nicht weiter ein, wir wenden uns gleich dem modernen HTML5 zu!
Kopieren Sie sich diesen Teil und fügen Sie es in Ihre soeben erstellte „index.html“ ein. Nun, was sehen wir hier jetzt? Wir haben unserer Seite also jetzt ein „Grundgerüst“
verpasst, damit alleine kann sie also schon stehen. Würden Sie die Datei nun in Ihrem Browser aufrufen so würde der Browser sie zwar interpretieren können, d.h. er kann sie zwar
lesen und anzeigen, jedoch ist ja noch keinerlei „Content“ enthalten. Erwähnenswert an dieser Stelle ist auch das Angeben der Sprache durch das „<html lang="de">“ in
der 2. Zeile. Möchten Sie Ihre Seite in Englisch bereitstellen so stellen Sie hier dementsprechende „en“ ein, statt „de“. Die hier sichtbaren „Meta-Tags“ sind standardmäßig wie in unserem
Beispiel hier oben. Wir nutzen also die Zeichenkodierung „UTF-8“ und machen auch „viewport“ angaben für den Gebrauch auf modernen Geräten, sprich Tablet, Mobiles, etc.. Näher müssen wir
für den Anfang aber nicht auf den „<head>“-Bereich eingehen. Wir wenden uns nun dem „<body>“ zu! Hier entsteht letzten Endes Ihre Homepage!
Zunächst sollten wir uns überlegen, wie wir unsere Homepage aufbauen wollen, wir alle haben sicherlich schon tolle Webseiten gesehen und können uns auch gut vorstellen, wie unsere Webseite
später aussehen soll. Dazu können Sie auch einfach ein Blatt und Papier nehmen und die typischen Bereiche einer Webseite grob aufzeichnen. Es muss kein Präzisionswerk werden, sogar das
gröbste Gekritzel ist vollkommen ausreichend, Sie müssen also keinerlei künstlerisch begabt sein, halten Sie nur die Breiten von oben bis unten ein, reihen Sie gerne auch mehrere Blöcke neben-
und oder untereinander an. Hauptsache Sie erkennen, wo Ihre einzelnen Bereiche angezeigt werden sollen. Auf der Homepage wird das später ordentlich aussehen! Für den Anfang und zum programmieren lernen,
können wir aber auch einfach mal eine „Standard“-Seite bauen. Diese Sollten wir aber gleich für mobile geräte optimieren, damit Sie dies jedoch beherrschen benötigen Sie nach Abschluss dieses Bereiches
mindestens noch den Abschnitt „CSS / CSS3“.
Als Erstes bauen wir eine Navigation ein. HTML5 bietet hierfür sogar separate Tags an, wir nutzen hier das Tag „nav“. Und für unsere Navigationslinks
nutzen wir das „ul“ Tag!
Das ganze kann dann z. B. so aussehen:
Setzen Sie diesen Code nun in Ihre Datei ein, dazu kopieren Sie den oben stehenden Code einfach und fügen ihn in den „body“-Bereich (also zwischen „<body> und </body>“) ein. Nun haben Sie bereits Ihre erste eigene Navigation gebaut. Das reicht natürlich noch lange nicht aus, als Nächstes bauen wir einen sogenannten „header“, erweitern Sie Ihre Seite um folgende Codezeilen, setzen Sie diese einfach direkt unter die Navigation (Also nach dem „</nav>“):
Schon eingefügt? Prima, nun schauen wir uns das erste Zwischenergebnis doch einmal an. Rufen Sie dazu Ihren Arbeitsplatz auf und navigieren Sie zu Ihrem Ordner „Homepage“, gefunden? Öffnen
Sie Ihn und rechts klicken Sie die Datei „index.html“, gehen Sie auf „Öffnen mit“ und wählen Sie Ihren Browser, nun sollte sich der Browser öffnen und Sie sollten auch schon Ihre Überschriften
wiedererkennen. Natürlich sieht es auf den ersten Blick nicht gerade ansprechend aus aber hey, Ihre erste, selbst erstellte, Homepage! Und, wenn Sie fleißig dran bleiben verspreche ich Ihnen
das wir das ganze noch hübsch hinbekommen werden. :)
Wichtig ist aber jetzt das Sie verstehen was wir hier gemacht haben, falls Sie das nicht längst durchschaut haben. Die Tags „nav“ und „header“
umschließen nun also weitere Elemente mit weiteren, unterschiedlichen Tags, diese werden nach Bedarf entsprechend eingesetzt. In der Navigation habe ich z. B. von „ul“ Gebrauch gemacht, damit kann man
prima Listen darstellen, dies können auch normale Aufzählungen mit Nummerierung sein sowie einfache Auflistungen mit den klassischen Punkten voran. Das Element „ul“ selbst enthält wiederum einige „li“
welche letztendlich den Link enthalten, die Links kennen wir ja schon vom Anfang, oder schon vergessen? Dann besser noch einmal lesen! :)
Für den Anfang haben wir nun auch genug „Quellcode“ um damit zu arbeiten. Als Nächstes schlage ich vorgehen wir zum CSS über! Weiter gehts »
Cascading Style Sheets, kurz CSS ist ein sehr mächtiges und oft unterschätztes Werkzeug für einen Webdesigner oder auch Programmierer. Mit CSS geben Sie Ihrer Homepage den Stil, den die Seite haben soll, Sie möchten eine überwiegend grüne Seite? Mit CSS ist dies kein Problem, färben Sie jedes Element nach Ihrem Geschmack! CSS göhort m.E. zum programmieren lernen auf jeden Fall dazu! Nun, was müssen Sie wissen? Was Elemente sind, wissen Sie ja bereits, diese Elemente kann man mit weiteren sogenannten „Attributen“ ausstatten, um einem bestimmten Element ein bestimmtes Style zuzuweisen, müssen Sie Ihrem Element eine „id“ oder eine „class“ mitgeben, dies ist zwar nicht zwingend. Elemente kann man grundsätzlich auch im CSS per Tag-Name ansprechen, sowie auch über Class-Names oder eine ID. Eine ID darf allerdings nur ein einziges Mal im gesamten Dokument vorkommen, eine Classe können Sie unendlich oft verwenden. Also wie funktioniert das ganze nun? Angenommen wir möchten zunächst erst einmal unsere Navigation ordentlich „stylen“. OK, lange Rede, kurzer Sinn, fangen wir an:
Gehen Sie nun in Ihren Editor, gehen Sie dort auf Datei → Neu und fügen Sie dort den obigen Abschnitt ein. Speichern Sie die datei nun aber in einem neuen Unterordner Ihres Stammverzeichnisses, Erstellen Sie im Ordner „Homepage“ einen weiteren Ordner mit dem Namen „css“ und speichern Sie dort anschließend die neu erstellte Datei mit dem Namen „style.css“. Fertig? Nun der nächste Schritt, wir müssen diese Datei nun noch im head-Bereich der Seite einbinden, dies macht man mithilfe einer Zeile:
Fügen Sie diese Zeile VOR dem „</head>“-Tag ein und rufen Sie Ihre index.html im Browser erneut auf. Wenn Sie die Datei, in Ihrem Browser noch geöffnet haben brauchen Sie nun nur noch F5 drücken,
damit aktualisieren Sie die Seite. Wie gefällt Ihnen Ihre Navigation nun?
Jetzt sollten Sie aber noch verstehen was wir genau getan haben. Der letzte Code-Schnipsel, also das link-Tag gibt an, welche
css Datei wir also für unsere Webseite verwenden möchten. In unserem Fall ist dies nun unsere selbst erstellte style.css. Mit dem link-Tag kann man also weitere Dateien an das Dokument (die index.html) anfügen.
Dies macht man auch so mit javascript-Dateien z. B., dazu kommen wir aber später auch noch. Versuchen wir nun erstmal zu verstehen was diese paar Zeilen CSS-Code bewirken. Vieles lässt sich ja schon
von den Bezeichnungen ableiten, z. B. sehen wir unter anderem das attribut „width“, man muss kein Meister sein, um zu verstehen, dass ich hier die Breite / Weite einstellen kann. Wir haben 100% gewählt
damit die Navigation auch über die gesamte Breite der Webseite reicht. Wichtig ist hier, dass Sie verstehen, dass sich das Element „nav“, aus unserer index.html, durch das „nav { }“ ansprechen läßt, alles was Sie
nun zwischen den geschweiften Klammern an Eigenschaften deklarieren wird automatisch von dem „nav“-Element in unserem index.html-Dokument übernommen. Die Listenpunkte habe ich hier mit „nav ul > li { }“
angesprochen, alle li-Elemente werden diese Eigenschaften dann übernehmen, das schöne hierbei ist, das man an anderer Stelle eine weitere Auflistung wiederum ganz anders gestalten kann, da wir hier nur das ul
innerhalb der „nav“ ansprechen, daher: „nav ul“, andere „ul“ außerhalb der „nav“ werden somit nicht von diesen Eigenschaften betroffen sein. Dann sehen wir doch mal weiter, welche befehle b.z.w.. Eigenschaften
sehen wir noch? Wir haben da z. B. padding und margin, mit diesen beiden Eigenschaften stellen wir Abstände ein. Margin legt fest wieviel Abstand nach außen eingehalten werden soll, padding legt den inneren
Abstand fest. Den Abstand selbst kann man in verschiedenen Einheiten angeben, die gebräuchlichste ist wohl px für „Pixel“. Für unsere Zwecke reicht dies auch vorerst. Font-size ist klar, hier legen wir unsere
Schriftgröße fest, color beschreibt unsere Schriftfarbe, angegeben wird diese entweder in Hex-Code oder auch in RGB/RGBA, dies ist anfangs etwas verwirrend und sieht kompliziert aus. Eine weitere Möglichkeit
faben zu deklarieren gibt es noch, man kann ganz einfach auch die Farbe in Englisch angeben, z. B. so: „color:black;“, und schon hätten wir eine Schwarze Schrift. Später werden wir auch noch genauer darauf
eingehen, uns reicht es, dass wir wissen das #aaaaaa (kann auch #aaa abgekürzt werden) ein Grauton ist. Im Übrigen habe ich die Zeilen auch alle Dokumentiert, dies kann ich auch jedem empfehlen der anfängt
Programmieren zu lernen, so wissen Sie später immer genau was an den einzelnen Stellen genau passiert und können sich dementsprechend leichter zurechtfinden.
Nun wollen wir uns dem Header zuwenden und
den mal ein wenig ansprechender gestalten, dazu greifen wir nun mal etwas tiefer in unserer Trickkiste und nutzen mal ein wenig die „Power of CSS“! Ergänzen Sie Ihre CSS um folgende Zeilen:
Fertig? Speichern nicht vergessen! Dann aktualisieren Sie Ihre Seite, nun kann man doch schon sehr gut erkennen, dass es sich hierbei um eine Webseite handelt, oder? :)
Ich finde, es ist nun an der Zeit ein kleines Zwischenresümee zu ziehen? Wie kommen Sie zurecht? Verstehen Sie soweit alles? Meinen Sie, Sie könnten sich vorstellen, an derartiger
Arbeit einmal Spaß zu haben? Prima! Dann lassen Sie uns doch einfach weiter programmieren lernen! Ich möchte noch kurz auf unsere CSS-Ergänzung eingehen und diese genauer erläutern. Für unser
„header“-Element haben wir, wie Sie sehen, mehrmals die Eigenschaft „background“ verwendet, wenn Sie dies mit „width“ machen würden, nimmt der Browser immer den zuletzt angegebenen
Wert an. Bei „background“ sieht das ganze Etwas anders aus, hier reagieren die Browser sehr unterschiedlich, daher wird hier auf die verschiedenen Browser Arten eingegangen, damit
der Header auch Browser übergreifend so schön aussieht wie in Ihrem Browser auch. Alle Werte von Eigenschaften, die ein Browser nicht versteht, wird er einfach ignorieren, von daher
ist es also kein Problem das man mehrmals eine bestimmte Eigenschaft deklariert, die Browser suchen sich das raus, was sie verstehen. Weiterführende Links werde ich am Ende dieses
Tutorials noch anfügen. Wer möchte, kann sich dann genauer mit diesen Themen befassen. Für uns reicht das nun erstmal. Wir gehen nun über zum javascript, nach und nach werden wir unserer
Seite noch ausbauen, ein großer Teil kommt später noch im Bereich PHP, hier wird dann der Content, also der Inhalt unserer Seite dynamisch erstellt, also baut sich das Dokument quasi
selbstständig wie von Geisterhand auf. Aber keine Angst, hier wird weder gezaubert noch gepfuscht! Weiter gehts »
Möchte man eine moderne Homepage programmieren, so kommt man wohl an Javascript nicht vorbei! Nun also, was ist Javascript? Und was ist jQuery? Mit diesen Fragen steigen wir in den nächsten Teil unseres kleinen Tutorials „programmieren lernen“ ein. Javascript ist eine Clientseitige Skriptsprache. Clientseitig? Das bedeutet, dass alles was an javascript ausgeführt wird tatsächlich nur bei Ihnen auf Ihrem Computer passiert, in dem Moment in dem Sie die Seite aufrufen. Mit Javascript können Sie Ihre Seite zum Leben erwecken, man macht schöne Animationen oder kann sogar ganze Seitenteile verschwinden oder erscheinen lassen. Theoretisch können Sie Ihre komplette Seite per js (javascript) generieren lassen. Um dies alles etwas zu vereinfachen hat man angefangen ganze Librarys zu schreiben, eine davon ist jQuery, diese Library möchte ich Ihnen gerne näher bringen, um Ihnen einen kleinen Einblick in die Materie zu verschaffen. Nun gut! Schlagen wir das nächste Kapitel auf! Zunächst müssen wir uns mit der jQuery Library ausstatten, dies können wir genauso bewerkstelligen wie wir das bereits mit unserer css-Datei gemacht haben, allerdings nicht per „link“-Tag, sondern mit dem „script“-Tag! Das „script“-Tag wird, im gegensatz zum „link“-Tag, am Ende wieder geschlossen: „</script>“! Laden Sie sich nun die jQuery-Datei herunter, nutzen Sie dazu gerne diesen Link: jQuery hier finden Sie immer die aktuellste Version von jQuery, wenn Sie einen der Versionen wählen öffnet sich ein neues Fenster mit dem code von jQuery. Drücken Sie nun STRG + A um alles auszuwählen und dann STRG + C um den markierten Text zu kopieren. Nun gehen Sie in Ihr Notepad++ zurück, öffnen dort eine neue Datei, fügen Sie den Text dort ein (STRG + V) und speichern Sie ihn unter „homepage/js/jquery.js“ ab. Richtig, Sie haben den Ordner „js“ noch nicht in Ihrem „Stammverzeichnis“, legen Sie ihn an. Alles erledigt? Nun kann es weitergehen! Doch zunächst, was haben wir nun gemacht? Wenn Sie programmieren lernen und einmal selber Webseiten bauen, möchten Sie ja eventuell eine Bildergalerie verwenden oder ähnliches, in diesem Fall wird es vom prinzip her ähnlich ablaufen, Sie brauchen eine „Master“-Datei, so nennen wir es jetzt einfach mal und müssen dann noch spezifisch auf Ihre Webseite reagieren, hier gilt es dann meist irgendwelche Funktionen auf Ihre Elemente abzustimmen. Sprich, Ihnen wird etwas geboten, dass Sie mit Ihrer Page verarbeiten können, b.z.w.. auf Ihrer Webseite anwenden können. Wie so etwas genau aussieht sehen wir gleich.
Fügen Sie diese Zeilen VOR dem abschließendem body-Tag „</body>“ ein. Wie Sie sehen haben wir einmal die jQuery-Datei eingebunden und einen Leerraum in Zeile 3 geschaffen für unseren eigenen
Javascript-Code den wir gleich anwenden wollen.
Alles soweit OK? Falls nicht, gehen Sie das ganze noch einmal in Ruhe durch, denken Sie nicht allzu kompliziert, so schwer ist das nicht!
Wenn Sie soweit sind, konzentrieren wir uns nun auf den Raum zwischen dem „<script>“ und dem „</script>“, fügen Sie die folgenden Codes immer dort ein!
Fügen Sie wie gesagt diesen Code zwischen den Script-Tags ein, damit dieser ordentlich vom Browser erkannt und ausgeführt werden kann! Mithilfe dieses kleinen Schnipsel, so nennen es „Programmierer“ gerne, wartet nun das Dokument, bis es vollständig geladen ist und führt dann den Code, der innerhalb steht, aus. Richtig, bei uns steht ja noch gar nichts drin! Das wollen wir jetzt ändern! Fügen Sie die nachstehenden Zeilen in die Funktion ein:
Wenn Sie nun alles richtig gemacht haben und Sie Ihre Seite aktualisieren sollte sich nun die Überschrift „Meine erste Homepage“ Schwarz färben! Wenn nicht, haben Sie eine Kleinigkeit übersehen!
Möchten Sie auf Fehlersuche gehen? Es Funktioniert? Na also, war gar nicht so schwer, oder?
Kommen wir zu den Einzelheiten, als Erstes sehen wir hier das „var ueberschrift ...“,
was geschieht hier? Ahnen Sie es vielleicht bereits? Richtig! hier wird eine Variable definiert, stellen Sie sich vor Sie haben eine Zahl, die regelmäßig anders sein kann, zB das Kleingeld in Ihrem Portemonnaie z. B.,
der tatsächliche Wert darin ändert sich ja stetig, eine Variable speichert einen x-beliebigen Wert! Diese Variable können Sie im weiteren Verlauf Ihres kleinen Skriptes immer wieder verwenden und weiter verarbeiten.
An dieser Stelle hilft mir nun aber jQuery, der Wert, den ich hier angebe ist nicht etwa der Eurobetrag den ich in meinem Portemonnaie habe, er bezieht sich auf ein Element, nämlich dem h1 innerhalb unseres headers!
In der nächsten Zeile sehen wir „ueberschrift“ OHNE ein var davor, das ist durchaus legitim da die Variable, in der Zeile zuvor, definiert wurde, Sie sollten Ihre Variablen also zumindest einmal mit var vordefinieren!
Dazu reich ein „var xyz;“, im weiteren Verlauf erkennt das Skript die Variable auch ohne ein „var“, Sie können dann, mit einem Punkt zusammengefügt, Funktionen an b.z.w.. mit dieser Variable ausführen und genau dies mache
ich in unserem Beispiel, ich definiere mein Element und führe eine Funktion daran aus, in meinem Fall die Funktion „css“, damit kann ich meine CSS-Eigenschaften angeben und auch ändern! Genauer gehen wir später noch darauf ein,
wichtig ist das Sie verstehen, was Variablen sind! Kommen wir einmal zurück zu unserem Beispiel mit dem Kleingeld im Portemonnaie. Jeder hat ein Portemonnaie, ergo führt jeder auch einen gewissen Betrag mit sich!
Also haben wir: „var portomonaie = x“, x steht hier dann immer für den aktuellen Wert den Sie gerade an Kleingeld mit sich führen! Angenommen ein Freund Ihrerseits schuldete Ihnen 20€, er zahlt Ihnen diese Schulden
zurück, also:
Ein Semikolon schließt jeweils immer eine Zeile ab, was man sich beim Javascript meist jedoch sparen kann, es gibt Ausnahmen, aber das wäre an
dieser Stelle zu viel des guten! Für den Anfang sind Sie schon sehr weit, wenn Sie bisher alles soweit verstanden haben! Nun fehlt Ihnen nur noch der Abschnitt „Das möchte ich Ihnen mit auf den Weg geben“ und
schon kommen Sie ganz alleine klar! Seien Sie sich aber sicher, dass Sie die Bereiche HTML, CSS und Javascript gelesen und verstanden haben! Und eines möchte ich gleich erwähnen, mit den Bereichen PHP und MySQL
wird es erst richtig spannend! Schauen Sie einfach mal drüber und entscheiden Sie selbst ob PHP etwas für Sie sein könnte!
Aber nun erstmal weiter mit dem programmieren lernen, legen wir mal ein Augenmerk auf unseren „fiktiven“ Wert den wir als Kleingeld in unserem Portemonnaie angeben (14,43), verwenden Sie hier ein Komma (wie in unserem
Beispiel), gilt der angegebene Wert als sogenannter String, diese müssen in Hochkomma gesetzt werden! Z. B. so: '23,67'. Ebenso wie Wörter b.z.w. ganze Sätze, diese gelten auch als „String“! Eine ganze
Zahl oder eine Dezimalzahl mit Punkt (nicht mit Komma) gilt als „Integer“ b.z.w. wenn der Wert mit Punkt angegeben wird, also eine Dezimalzahl ist, als sogenannter „Float“, diese brauchen Sie dann nicht in
Hochkomma zu setzen! Aber Sie können es, wenn Sie also ihre 14.43 € mit Hochkomma angeben wird dieser jedoch automatisch zu einem „String“, lassen Sie die Hochkommas weg, bleibt es ein „Float“ b.z.w. wenn Sie
eine ganze Zahl angeben ein „Integer“. Wichtig wird dies, wenn Sie mit Javascript Berechnungen anstellen! Bei Verrechnungen mit gemischten Variablen, sprich, Wenn Sie mit Strings und Integer rechnen:
(var a = '4',b = 3; /* Sie können auch mehrere Variablen, wie in diesem Beispiel, kommagetrennt von einander angegeben */), würden Sie dies nun miteinander verrechnen wollen (var ergebnis = a + b;), würden Sie
die Zahl 43 erhalten, da Javascript den String und den Integer in diesem Fall einfach aneinander setzt, dies kommt daher, weil das + Zeichen nicht nur zum Addieren gedacht ist! Bei Javascript kann man mit dem
+ Zeichen eben Strings zusammenfügen! Deshalb wird der Integer in unserem Beispiel einfach auch als String behandelt da Sie keine reine Integer verrechnet haben, entfernen Sie die Hochkomma von der 4, so erhalten
Sie als Ergebnis korrekterweise die 7!
Also nochmal, Integer (z. B.: 145) können nur ganze Zahlen sein, eine Dezimalzahl hat immer Nachkommastellen (z. B.: 12,675), zählt jedoch als String, wenn Sie ein Komma verwenden, verwenden Sie statt dem Komma
einen Punkt, so erhalten Sie einen Float und können diesen auch verrechnen!
Fleißig üben und dran bleiben, programmieren lernen kann man nicht in wenigen Minuten! Lesen Sie sich alles gerne mehrmals durch und versuchen Sie alles richtig
zu verstehen, wenn Sie einmal nicht weiter wissen, nutzen Sie unser Support Formular, klicken Sie dazu unten Links auf das Fragezeichen, Sie können mir dann gerne eine Frage da lassen und ich Antworte Ihnen
„as soon as possible“! In kürze geht es hier weiter mit PHP und MySqli! Ich versuche immer so Zeitnah wie nur möglich weiter zu schreiben! Bleiben Sie am Ball und vergesst nicht den „Share“-Button zu
drücken! :)
Viel Spaß beim lernen und viel Erfolg!
AIQIA