Ich nehme derzeit an einer Akademie zum Java Fullstack Software Engineer teil. In den kommenden Wochen möchte ich hier meine Mitschrift, so gut es geht, aufzeichnen und mitteilen. Hier ist das, was ich vom ersten Tag in Block 9 gelernt und behalten habe:
Eine moderne Webseite ist wie folgt aufgebaut:
HTML basiert auf Tags (die Dinger in eckigen Klammern):
<html>
<head> <- Head Knoten
<title> Page1 </title> <- Title-Knoten, Page1 ist ein Subknoten
</head>
<body>
<h1> Page 1 </h1>
<hr/> <- horizontale Linie
<ol id = "list"> <- ordered List, ID-Knoten (document.getElementbyID="list")
<li> Aufwachen </li> <- List Entry
<li> Aufstehen </li>
<li> Waschen </li>
</oi>
</body>
</html>
HTML
Werkzeuge: VisualStudioCode, oder IntelliJ
IntelliJ hat in der Common-Lizenz-Version beim Umgang mit HTML einige Schwächen. Wir benutzen daher VisulaStudioCode.
Eine einfache Webseite sieht wie folgt aus:
HTML: Hypertext Markup Language
Markup = Bemerkung, Meta-Information:
Xml ist die Metasprache der Metasprachen
Auszug aus html5-css3.pdf. HTML5 ist sehr tolerant:
Wir erweitern unsere erste Webseite um eine Tabelle:
Besser als das Design der Tabelle (hier der Rahmen) in den Daten zu definieren, ist es eine Trennung von Design und Inhalt über die Style-Sheets vorzunehmen:
Leerzeichen lassen sich mit non blocked Spaces ( ) einfügen:
Bitte überall UTF8 eintragen um uns so etwas zu ersparen:
Javascript setzt auf HTML auf. Es sind erweiterte Befehle, die normale Browser in deren Runtime-Environments laufen lassen.
Wir setzen hier einen Stop-Point. Beim Aufrufen der Seite erscheint jetzt eine Box:
Wir können auch eine Funktion definieren. Sie wird hier aber nicht aufgerufen,…
… sondern erst durch das doit():
Die Funktion kann auch innerhalb des Bodys erfolgen:
...
Div und Span sind Container.
DIV erzwingt einen Zeilenumbruch.
SPAN erzwingt keinen Umbruch:
Span wird gerne für Fehlertexte Neben dem Feld eingesetzt, damit nicht die gesamte Seite durch einen Zeilenumbruch nach unten verrutscht.
Wir bauen ein neues HTML-Formular:
Uns fällt auf, dass "Senden" und "Zurücksetzen" gar nicht im Code vorkommen. Diese Wörter werden vom Browser aufgrund der language Einstellung genommen.
Wenn ich das nicht möchte, kann ich auch den Value vorgeben ("Abchicken"):
Bei MultiPages (JSP, Servlets, JSF, SpringMVC) werden vom Server immer komplette HTML-Dateien übertragen.
Beim Klick auf "abchicken" wird tatsächlich eine neue Seite aufgerufen:
So macht man das aber heute nicht mehr.
Bei Singelpages wird im Browser (Client) nur eine einzige HTML-Seite geladen (index.html). Weitere Daten werden vom Server als XML, JSON, TEXT oder HTML-Fragmente nachgeladen. Anschließend werden die Daten dann mittels JavaScript in den DOM-Baum eingebettet.
Hier unten sehen wir im Java-Script im Head-bereich unser klassische EVA (EIngabe, Verarbeitung, Ausgabe).
Die beiden let-Befehle lesen aus dem Feld "namef2" (welches unten in der Section beschrieben wird) und fügen das Ergebnis in die Variable "name".
console.log ist ein Verarbeitungsbefehl.
Die beiden letzten Zeilen der Funktion doit() sorgen für die Ausgabe des Ergebnisses im Feld "out", welches unten in der Section beschrieben wird:
Um den Namen Fett darzustellen, muss man innerHTML verwenden (wenn man nicht Stylesheets verwendet):
Mit STRG-Shift-I im Browser, kann man debuggen:
---------------------------------------------
Erzeuge eine Funktion in Java Script, die den Kehrwert zurückgibt.
Hier das Ergebnis:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Form-01</title>
<style>
</style>
<script type="text/javascript">
function doit() {
let namefield = document.getElementById("namef2");
let name = namefield.value;
console.log("Call: doit() -Name: " + name);
//Restfull Call to Server
let outputspan = document.getElementById("out");
outputspan.innerText = name;
//outputspan.innerHTML = "<b>"+name+"</b>";
}
function kehrwert() {
let namefield = document.getElementById("Zahlf1");
let Zahl = namefield.value;
console.log("Call: kehrwert() - Zahl: " + Zahl);
let outputspan = document.getElementById("out2");
outputspan.innerText = "Der Kehrwert von " + Zahl + " lautet: " + 1 / Zahl;
}
</script>
</head>
<body>
<header>
<h1>Form-01</h1>
<hr />
</header>
<section>
<!-- Bei MultiPages (JSP, Servlets, JSF, SpringMVC) werden vom Server immer komplette HTML-Dateien übertragen -->
Klassiker bei Multipages <br />
<form method="get" action="http://4point.de/servlet/MyServletClass">
<label for="namef1"> Name </label> <br />
<input id="namef1" name='user' type="text" /> <br />
<input id="send" type="submit" value="Abchicken" />
<input id="clean" type="reset" />
</form>
</section>
<section>
<!-- Bei SIngelpages im Browser (Client) wird nur eine einzige HTML-Seite geladen (index.html)
weitere Daten werden vom Server als XML, JSON, TEXT oder HTML-Fragmente nachgeladen.
Anschließend werden die Daten dann mittels JavaScript in den DOM-Baum eingebettet.
-->
Modern bei SIngelpages
<hr />
<form>
<label for="namef2"> Name: </label>
<br />
<input id="namef2" name="user" type="text" /> <br />
<button id="but" type="button" onclick="doit();">ClickMe</button>
</form>
</section>
<hr />
<section>
Output: <span id="out"> ... </span>
</section>
<hr />
<section>
<form>
<label for="Zahlf1"> Zahl: </label>
<br />
<input id="Zahlf1" type="text" /> <br />
<button id="buttonZahl" type="button" onclick="kehrwert();"> ClickMe </button>
</form>
</section>
<section>
Output: <span id="out2"> ... </span>
</section>
</body>
</html>
Alles was ich mitschrieb und verstanden habe ist ohne Gewähr. Die Bilder stammen teilweise aus dem Internet und wir haben keine Urheberansprüche darauf.
Besten Dank an unseren sehr empfehlenswerten
In den nächsten Tagen und Wochen geht’s weiter, so: stay tuned!
Gruß, Achim Mertens