Java Training Block 9 – Tag 2 Modern Web, HTML, Javascript, bootstr...

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 zweiten Tag in Block 9 gelernt und behalten habe:

HTML Meta Tags

Meta Tags kann man benutzen um z.B. Suchmaschinen zu beeinflussen oder ob die Seite auf Smartphones kippbar ist.

HTML-Meta-Daten:

- https://www.w3schools.com/tags/tag_meta.asp

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Free Web tutorials">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="John Doe">

Responsive html framework: Je nach Client wird eine unterschiedliche Seite zurückgegeben.

Bootstrap: Framework für graphisches Layout.

Javascript Kehrwertbeispiel

Hier noch mal das Kehrwert Beispiel von unserem Trainer:

Oder noch mal anders dargestellt:

Ergebnis:

JavaScript-Datentypen

Strings -> 'Hochkomma' "Anführungszeichen" Backticks(Mehrzeilig)
Number -> Festkomma, Fließkomma
Boolean -> true, false
Array -> Objekt
Objekt -> Instanz einer Klasse

JavaScript-Datentypendeklaration:

var (Globale)
let (Lokale)

ParseFloat ist eine freistehende Funktion (anders als bei Java, wo Funktionen in Objekten gebunden sind):
JavaScript-Freie-Funktionen:

parseFloat(…) -> Fließkomma oder -> NaN
parseInt(…) -> Festkomma oder -> NaN

Styleklassen

Folgendes sorgt dafür, dass alle span-Hintergründe grau sind und der Fehlerfall von "err_zahl"-id wird rot dargestellt:

  - Header ()


Schlechtes Beispiel:

Besser: Einführen von StyleKlassen (hat nichts mit Objekt-Klassen zu tun). Die Variable .mystyle ist so eine Style-Klasse, die unten mit 'class="mystyle"' verwendet wird:

Btw.: Color-Code für telekom-Magenta: #e20074

Wir bauen die Clean Funktion:

Damit sieht unser HTML-Javascript-File wie folgt aus:

<!DOCTYPE html>
<html lang="de">
<head>
    <title>KehrwertRechner</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="KehrwertRechner">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="author" content="Ich">
&lt;style>
    /* selector {style} */
    span      { background-color: lightgrey}
    #err_zahl { color: #ff0000 }
    .mystyle  { background-color: lavender}


    /*label  { background-color: #e20074}*/
&lt;/style>

&lt;script type="text/javascript">
    function calc() {
        let errobj = document.getElementById("err_zahl");
        let outputspan = document.getElementById("out");

        let zahl = parseFloat(document.getElementById("zahl").value);
        console.log("Call: calc() - Zahl: " + zahl);

        if (isNaN(zahl)) {
            errobj.innerText = "Bitte eine Zahl eingeben!";
            outputspan.innerText ="...";
        } else {
            errobj.innerText = "";
            let kehrwert = 1 / zahl;
            outputspan.innerHTML = "&lt;br/> Zahl: " + zahl + "&lt;br/> Kehrwert: " + kehrwert.toFixed(3);
        }
    }

    function clean() {
        console.log("Call: clean()");

        document.getElementById("err_zahl").innerText = "";
        document.getElementById("out").innerText = "...";
        document.getElementById("zahl").value="";
    }

&lt;/script>

</head>

<body>

<header>

<h1>KehrwertRechner</h1>

<hr/>

<section>

<form>

<label for="zahl" > Zahl: <br/>

<input id="zahl" name='zahl' type="text" placeholder="Bitte eine Zahl eingeben"/> <span id='err_zahl'></span><br/>

</label>

<button id="butcalc" type="button" onclick="calc();">Calc</button>

<button id="butclean" type="button" onclick="clean();">Clean</button>

</form>

</section>

<hr/>

<section>

Ergebnis: <span id="out" class="mystyle">...</span>
&lt;/section>

</body>

</html>

Funktionen in externen Libraries

Wir wollen die Berechnung jetzt auslagern und erzeugen eine neue Datei kehrwert-lib.js:

Wir binden das ein mit:

(Was zu einem Fehler führt ist:

Und bei der Ausgabe rufen wir die Funktion auf:

let kehrwertvalue = kehrwert(zahl);
outputspan.innerHTML = "<br/> Zahl: " + zahl + "<br/> Kehrwert: " + kehrwertvalue.toFixed(3);

Exceptions

Bei einem dreifachen Gleicheitszeichen wird neben der inhaltlichen Prüfung auch überprüft, ob die Typen gleich sind (Integer === String?). Wir bauen ein Throw in die JS-Library:

Und fangen die Exception in der Funktion auf:

Ergebnis:

Objektorientiertes Javascript

Javascript kennt auch Klassen. Wir bauen jetzt die JavaScript-Klasse: KehrwertUtilclass

Und bauen diese Klasse in unser Java-Script ein:
                // Objektorientierte Verwendung einer Instanz-Methode aus einer Klasse
                let kehrwertclass = new KehrwertUtilclass();
                let kehrwertvalue = kehrwertclass.kehrwert(zahl);

Übung Kreisrechner (single-Page)

Berechnung ausgelagert:
Input: Radius
Out Radius, Fläche, Umfang
Fehlerbehandlung:

Out-Bereich
a.) Falsche Eingabe
b.) Berechnung nicht möglich (wenn Radius zu klein)
Stylesheets (css)

Hier das funktionierende Ergebnis:

Kreisrechner.html:




    KreisRechner
    
    
    
    
    
    
&lt;script type="text/javascript" src="./Kreiswert-utilclass.js" >&lt;/script>
&lt;script type="text/javascript">
function calc() {
    let errobj = document.getElementById("err_zahl");
    let outputspan = document.getElementById("out");
    let radius = parseFloat(document.getElementById("radius").value);
    console.log("Call: calc() - radius: " + radius);
    if (isNaN(radius)) {
            errobj.innerText = "Bitte eine Zahl eingeben!";
            outputspan.innerText ="...";
        } else {
        try {                   
            let kreiswertclass = new KreiswertUtilclass();
            let kreisflaeche = kreiswertclass.flaeche(radius);
            let kreisumfang =kreiswertclass.umfang(radius);
            outputspan.innerHTML = "&lt;br/> Radius: " + radius + "&lt;br/> Fläche: " + kreisflaeche.toFixed(5) + "&lt;br/> Umfang: " + kreisumfang.toFixed(5);
  //  document.getElementById("out").innerText = "Radius = "+radius;
        }
        catch(e) {
            let msg = " Fehler: " + e.message;
            errobj.innerText = msg;
        }
    }
}
function clean() {
        console.log("Call: clean()");
        document.getElementById("err_zahl").innerText = "";
        document.getElementById("out").innerText = "...";
        document.getElementById("zahl").value="";
    }

</script>

</head>

<body>

<header>

<h1>KreisRechner</h1>

<hr/>

<section>

<form>

<label for="radius" > Radius: <br/>

<input id="radius" name='radius' type="text" placeholder="Bitte gib den Rdius ein"/> <span id='err_zahl'></span><br/>

</label>

<button id="butcalc" type="button" onclick="calc();">Calc</button>

<button id="butclean" type="button" onclick="clean();">Clean</button>

</form>

</section>

<hr/>

<section>

Ergebnis: <span id="out" class="mystyle">...</span>

</section>

</header>

</body>

</html>

Kreiswert-utilclass.js:

class KreiswertUtilclass {
 flaeche(radius){
    if (radius === 0 || radius <0) //
    {
        throw new Error("Div/0 oder negativen Zahlen ist nicht erlaubt!!!");
    }
    let flaechenvalue = 3.14159625 * radius * radius;
return flaechenvalue;

}

umfang(radius){

if (radius === 0 || radius <0) //

{

throw new Error("Div/0 oder negativen Zahlen ist nicht erlaubt!!!");

}
let umfangvalue = 3.14159265 *2 *radius;
return umfangvalue;

}

}

Man kann natürlich auch Pi aus der Mathe-Klasse holen. Details dazu siehe https://www.w3schools.com/js/js_math.asp

BootStrap

Bootstrap kümmert sich um das Layout

Hier Beispiele für Buttons:

JAXRS

JAXRS: Java Extension Restful Services
AJAX: Async Javascript and XML

Kommunikation zwischen Browser und Server:

Wir öffnen ein XHR-Objekt (XML Http Request (so eine Art Browser im Browser))
Wir konfigurieren das XHR Objekt (URL, Methode (Get oder Post,…), Header, Body, CallBackFunktion
Senden
Empfangen (Status, Ready-State, Response-Text(z.B. json) oder Response-XML)

Uebung SWAPI-Client

Es gibt eine öffentliche API wo man Informationen zu Starwars-Figuren erhalten kann:
Swapi.dev
curl -X GET -v https://swapi.dev/api/people/2

Bei unseren Arbeitsrechnern müssen wir noch den Proxy davor setzen (bei einigen klappt es, bei anderen nicht. Auf dem Schulungsserver funktioniert es):

curl --proxy http://HE112113.emea1.cds.t-internal.com:8080 https://swapi.dev/api/people/1

Zum ersten Punkt XMLHttpRequest hier noch ein paar Infos:

Wir lassen diese Prototyp-Version mal laufen und schauen das Log an:

Nun parsen wir das erhaltene JSON File und geben das Ergebnis auf die Webseite:

             starwars_person =JSON.parse(xhr.responseText);
             console.log(" Name: "+starwars_person.name);
             let out = "Name:        " + starwars_person.name + "<br/>";
                    out = out + "Grösse:    " + starwars_person.height + "<br/>";
                    out = out + "Gewicht:   " + starwars_person.mass + "<br/>";
                    document.getElementById("outid").innerHTML=out;

(Ist das nicht mal wieder geil? Wir sind nun in der Lage komfortabel JSON-Files von REST-API Servern zu lesen und einzelne Felder darzustellen!)

Hier das funktionierende html-Dokument:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Starwars person</title>
&lt;script type="text/javascript">
    // 1. XHR erzeugen
    let xhr = new XMLHttpRequest(); //ab ECMA--5

function makeCall(){
    let personidvalue = parseInt(document.getElementById("personid").value);
    //2. Init / Config des XHR Objektes
    xhr.open("GET","https://swapi.dev/api/people/"+personidvalue, true)
    xhr.setRequestHeader("Accept","application/json");

    //Call-Back-Funktion einbinden
    xhr.onreadystatechange = mycallback;

    //3. Senden
    xhr.send();  // bei GET; Bei POST: xhr.send(data); -> data in den RequestBody
}

function mycallback() {
    console.log("Ready State: "+xhr.readyState);
    if (xhr.readyState ===4){  //alle Daten sind komplett geladen
        if(xhr.status ===200) {// Das ist der Gutfall
         console.log("Http-Status: "+xhr.status);
         console.log("Http-Body: "+ xhr.responseText);
         starwars_person =JSON.parse(xhr.responseText);
         console.log(" Name: "+starwars_person.name);
         let out = "Name:        " + starwars_person.name + "&lt;br/>";
                out = out + "Grösse:    " + starwars_person.height + "&lt;br/>";
                out = out + "Gewicht:   " + starwars_person.mass + "&lt;br/>";
                document.getElementById("outid").innerHTML=out;
        }
        
    }
}

&lt;/script>

</head>

<body>

<header>

<h1> Hello Starwars person </h1>

<hr/>

</header>

<section>

<div>

<form>

<label for='personid' > ID <br/>

<input id="personid"    name='personid'    type='number'   value="" size='20' required placeholder="Bitte Id eingeben"/><br/>

</label>

<button type='button' onclick='makeCall();'>MakeCall</button>

</form>

</div>

<div id="outid"></div>
</section>
</body>

</html>

Disclaimer

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

Trainer: Hans-Joachim Blanke blanke@4point.de

In den nächsten Tagen und Wochen geht’s weiter, so: stay tuned!

Gruß, Achim Mertens

Java Training Block 9 – Tag 2 Modern Web, HTML, Javascript, bootstrap, JAXRS