JavaScript

var vs let

                            
var myVar1 = true;
if (myVar1) {
    var myVar1 = false;
    document.querySelector('#myVar1').innerHTML += 'inside if: ' + myVar1;          // false
}
document.querySelector('#myVar1').innerHTML += '  --  outside if: ' + myVar1;       // false

let myVar2 = true;
if (myVar2) {
    let myVar2 = false;
    document.querySelector('#myVar2').innerHTML += 'inside if: ' + myVar2;          // false
}
document.querySelector('#myVar2').innerHTML += '  --  outside if: ' + myVar2;       // true

var myVar3 = true;
if (myVar3) {
    let myVar3 = false;
    document.querySelector('#myVar3').innerHTML += 'inside if: ' + myVar3;          // false
}
document.querySelector('#myVar3').innerHTML += '  --  outside if: ' + myVar3;       // true

// SyntaxError!
/*let myVar4 = true;
if (myVar4) {
    var myVar4 = false;
    document.querySelector('#myVar4').innerHTML += 'inside if: ' + myVar4;
}
document.querySelector('#myVar4').innerHTML += '  --  outside if: ' + myVar4;*/

myVar1 =
myVar2 =
myVar3 =

Definition und Deklaration

                            
var db = 5.5;
var inte = 5;
var text = "5.5";
var bool = true;
var n;

// Variablen Typen erkennen mit typeof
document.querySelector('#vardb').innerText = typeof db;
document.querySelector('#varinte').innerText = typeof inte;
document.querySelector('#vartext').innerText = typeof text;
document.querySelector('#varbool').innerText = typeof bool;
document.querySelector('#varn').innerText = typeof n;

if('number' == typeof db){
    document.querySelector('#vardbif').innerText = true;
} else {
    document.querySelector('#vardbif').innerText = false;
}

Type of "db" =
Type of "inte" =
Type of "text" =
Type of "bool" =
Type of "n" =
"number" == typeof db:

Operatoren

                            
if (db == text) {
    document.querySelector('#gleich').innerText = " Variable db und text sind gleich!"
} else {
    document.querySelector('#gleich').innerText = " Variable db und text sind ungleich!"
}

                            
if (db === text) {
    document.querySelector('#strenges_gleich').innerText = " Variable db und text sind gleich!"
} else {
    document.querySelector('#strenges_gleich').innerText = " Variable db und text sind ungleich!"
}

                            
for (let i = 0; i < 10; i++) {
    document.querySelector('#forLoop').innerText += i + ", ";
}

let num = 0;
while (++num <= 10) {
    document.querySelector('#whileLoop').innerText += num + ", ";
}

let num2 = 0;
do {
    document.querySelector('#doWhileLoop').innerText += num2 + ", ";
} while (++num2 <= 10);

let arr = [3, 5, 7, 99, 257, 110, 34, 345, 87];
for (let i in arr) {
    document.querySelector('#forInLoop').innerText += i + ", ";
}

for (let i of arr) {
    document.querySelector('#forOfLoop').innerText += i + ", ";
}

For:
While:
DoWhile:
For in (index):
For of(values):

Mehrdimensionale Assoziative Arrays

Element Eigenschaften

Testdiv

                            
let elemProps = document.querySelector('#elemProps');
elemProps.style.fontWeight = '100';
elemProps.style.fontSize = '24px';
elemProps.style.color = 'blue';
elemProps.style.backgroundColor = '#333';
elemProps.innerText += '!!!';

Style per Klassen (add, remove, toggle)

Testdiv

                            
.props{
    font-weight: 100;
    font-size: 24px;
    color: blue;
    background-color: #333;
}

                            
let elemProps2 = document.querySelector('#elemProps2');
elemProps2.classList.add('props');

Events und Listener

Vorname

Nachname

Straße

Hausnummer

Max

Mustermann

Musterstraße

23

Barbara

Johnson

Fairfield Road

1411
```
                            
                        
```

                            
.col-elem {
    display: inline-block;
    width: 20%;
}

#myTable {
    margin-bottom: 30px;
}

.font-green {
    color: green;
}

                            
// Selektiere Button Element mit der id setHeadBold aus DOM
let setHeadBoldButton = document.querySelector("#setHeadBold");
// onclick Event Listener
setHeadBoldButton.onclick = function (e) {
    console.log("sdfs")
    // Selektiere Tabelle mit id #myTable
    let table = document.querySelector("#myTable");
    // Das erste Kindelement von der Tabelle! 
    let headline = table.firstElementChild;
    // Wenn der Text im Button gleich  "Bold Headline" ist, dann Schrift der headline auf bold und Text des Button ändern!
    if (setHeadBoldButton.innerText === 'Bold Headline') {
        headline.style.fontWeight = "bold";
        setHeadBoldButton.innerText = 'Reset Headline';
    } else { // Wenn der Text im Button nicht "Bold Headline" ist, dann Schrift der headline auf normal und Text des Button ändern!
        headline.style.fontWeight = "normal";
        setHeadBoldButton.innerText = 'Bold Headline';
    }
};

// onmouseover Event Listener
setHeadBoldButton.onmouseover = function () {
    //let headline = document.querySelector("#myTable").firstElementChild;
    let headline = document.querySelector("#myTable .row-elem");
    setHeadBoldButton.style.backgroundColor = 'green';
    setHeadBoldButton.style.color = 'white';
};

// onmouseleave Event Listener
setHeadBoldButton.onmouseleave = function () {

    setHeadBoldButton.style.backgroundColor = '';
    setHeadBoldButton.style.color = 'black';
};

// Selektiere Button Element mit der id setfirstColumnBold aus DOM
let setfirstColumnBoldButton = document.querySelector("#setfirstColumnBold");
// onclick Event Listener
setfirstColumnBoldButton.onclick = function () {
    // Selektiere alle .row-elem unter #myTable
    let allRows = document.querySelectorAll("#myTable .row-elem");
    // Iteriere durch alle .row-elem Elemente
    allRows.forEach(function (row) {
        // Selektiere das erste Kind 
        let firstCol = row.firstElementChild;
        // Schrift auf bold setzen
        firstCol.style.fontWeight = "bold";
    })
};

let allColorButton = document.querySelector("#allColor");
allColorButton.onclick = function (e) {
    let elements = document.querySelectorAll("#myTable .col-elem");
    elements.forEach(function (elem) {
        elem.classList.toggle('font-green');
    })
};

let resetAllButton = document.querySelector("#resetAll");
resetAllButton.onclick = function () {
    document.querySelectorAll("#myTable .col-elem, #myTable .row-elem").forEach(function (elem) {
        elem.style.fontWeight = "";
        setHeadBoldButton.innerText = 'Bold Headline';
        elem.classList.remove('font-green')
    });
};

Übergabe von PHP-Variablen an JavaScript

Übergabe per Cookie (HTTP-Header)

Erzeugen eines Cookies in PHP per setcookie(name, value);

                            
setcookie("TestCookie", 'Pass Variable to JavaScript with Cookie');
setcookie("TestCookie2", json_encode($cars));

Auslesen aller Cookies in Javascript

                            
var cookies = document.cookie;
console.log(cookies); // TestCookie=Pass+Variable+to+JavaScript+with+Cookie; TestCookie2=%5B%5B%22Volvo%22%2C22%2C18%5D%2C%5B%22BMW%22%2C15%2C13%5D%2C%5B%22Saab%22%2C5%2C2%5D%2C%5B%22Land+Rover%22%2C17%2C15%5D%5D

Funktion zum Auslesen eines Cookies

                            
function getCookie(cname) {
    const ca = document.cookie.split(';');
    for (let c of ca) {
        let [name, value] = c.trim().split("=");
        if (cname.trim() === name.trim()) {
            return decodeURIComponent(value);
        }
    }
    return null;
}

Ergebnis der getCookie-Funktion

                            
let cookieValue = JSON.parse(getCookie('TestCookie2'));
console.log(cookieValue);
(4) [Array(3), Array(3), Array(3), Array(3)]
0: (3) ["Volvo", 22, 18]
1: (3) ["BMW", 15, 13]
2: (3) ["Saab", 5, 2]
3: (3) ["Land+Rover", 17, 15]
length: 4
__proto__: Array(0)

Übergabe im HTML Header

Beispiel PHP Variablen

                                
$name = 'Pass Variable to JavaScript' ;
$cars = array
(
    array("Volvo",22,18),
    array("BMW",15,13),
    array("Saab",5,2),
    array("Land Rover",17,15)
);

Den Inhalt der PHP-Variablen in den HTML Quelltext schreiben, beispielsweise in der header.php

                            
<script>
    var name = <?php echo json_encode($name);?>;
    var cars = <?php echo json_encode($cars);?>;
</script>

HTML-Quellcode im Browser

                            
var name = "Pass Variable to JavaScript";
var cars = [["Volvo",22,18],["BMW",15,13],["Saab",5,2],["Land Rover",17,15]];

Übergabe als Attribut oder im Content

Beispiel PHP-Variablen

                            
$output = 42;
$array = array("foo", "bar", "hello", "world");
$json = json_encode($array);

PHP Variablen in HTML Dom schreiben

                            
<p><span id='php-single-span'><?php echo $output ?></span> ist die Antwort auf alle Fragen!</p>
<input type="hidden" value="<?php echo $output ?>" id="php-single-hidden"/>
<input type="hidden" value='<?php echo $json ?>' id="php-json-hidden"/>
<button data-output="<?php echo $output ?>" id="php-single-btn">Read Single Values</button>
<button data-output='<?php echo $json ?>' id='php-json-btn'>Read JSON Values</button>
// Hidden ist keine gute Praxis.
<div style="display:none !important;" id='php-json-div'>
    <?php echo $json ?>
</div>

HTML-Quellcode im Browser

                            
<p><span id='php-single-span'>42</span> ist die Antwort auf alle Fragen!</p>
<input type="hidden" value="42" id="php-single-hidden"/>
<input type="hidden" value='["foo","bar","hello","world"]' id="php-json-hidden"/>
<button data-output="42" id="php-single-btn">Read Single Values</button>
<button data-output='["foo","bar","hello","world"]' id='php-json-btn'>Read JSON Values</button>
// Hidden ist keine gute Praxis.
<div style="display:none !important;" id='php-json-div'>
    ["foo","bar","hello","world"]                        </div>

42 ist die Antwort auf alle Fragen!

JavaScript Code zum Auslesen der Variablen

                            
let btnJson = document.querySelector('#php-json-btn');
let btnSingle = document.querySelector('#php-single-btn');
let resDiv = document.querySelector('#passResult');
btnJson.addEventListener('click', getJsonData);
btnSingle.addEventListener('click', getSingleData);

function getJsonData() {
    let div = document.querySelector('#php-json-div');
    let hidden = document.querySelector('#php-json-hidden');
    let btn = document.querySelector('#php-json-btn');
    resDiv.innerHTML = 'DIV content = ' + div.innerHTML + ' , type = ' + typeof JSON.parse(div.innerHTML) + '<br/>';
    resDiv.innerHTML += 'input hidden value  = ' + hidden.value + ' , type = ' + typeof JSON.parse(hidden.value) + '<br/>';
    resDiv.innerHTML += 'btn data-output value  = ' + btn.getAttribute('data-output') + ' , type = ' + typeof JSON.parse(btn.getAttribute('data-output'));
}

function getSingleData() {
    let span = document.querySelector('#php-single-span');
    let hidden = document.querySelector('#php-single-hidden');
    let btn = document.querySelector('#php-single-btn');
    resDiv.innerHTML = 'SPAN content = ' + span.innerHTML + ' , type = ' + typeof JSON.parse(span.innerHTML) + '<br/>';
    resDiv.innerHTML += 'input hidden value  = ' + hidden.value + ' , type = ' + typeof JSON.parse(hidden.value) + '<br/>';
    resDiv.innerHTML += 'btn data-output value  = ' + btn.getAttribute('data-output') + ' , type = ' + typeof JSON.parse(btn.getAttribute('data-output'));
}

GET Übergabe per JavaScript fetch()

Erzeugen einer service.php Datei

                            
<?php
header('Content-Type: application/json');
$cars = array
(
    array("Volvo", 22, 18),
    array("BMW", 15, 13),
    array("Saab", 5, 2),
    array("Land Rover", 17, 15)
);

echo json_encode($cars);

Daten laden per JavaScript fetch-Funktion

                            
fetch('service.php', {
    method: 'GET',
    headers: {'Content-Type': 'application/json'}
}).then(function (response) {
    if (response.ok)
        return response.json();
    else
        throw new Error('Fehler in der Datenübertragung!');
}).then((data) => {
    console.log(data);
    document.querySelector('#getResult').value = data;
}).catch(error => {
    document.querySelector('#getResult').value = error;
});

Result:

POST Übergabe per JavaScript fetch()

Erzeugen einer service.php Datei

                            
<?php
header('Content-Type: application/json');
$res = file_get_contents('php://input');
$obj = json_decode($res,true);
error_log($res);
$arr = "User der zum Server übertragen wurde: ";
foreach ($obj as $key => $value){
    $arr .= $value . ' ';
}
echo json_encode($arr);

Daten laden per JavaScript fetch-Funktion

                            
let user = {
    name: 'John',
    surname: 'Smith'
};

fetch('service2.php', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(user)
}).then(function (response) {
    if (response.ok)
        return response.json();
    else
        throw new Error('Fehler in der Datenübertragung!');
}).then((data) => {
    document.querySelector('#postResult').value = data;
}).catch(error => {
    document.querySelector('#postResult').value = error;
});

Result:

Übergabe von PHP-Variablen an JavaScript

Einfache Formularfeld Validierung

PLZ Please provide a valid zip.

HTML Formularfeld

                            
<input type="text" class="form-control" id="PLZ" name="PLZ" placeholder="54299" value="">
<div class="invalid-feedback">
	Please provide a valid zip.
</div>

Feld direkt bei der Eingabe überprüfen.

                            
document.querySelector("#PLZ").oninput = function () {
    // regex der Überprüft ob die Eingabe nur Zahlen enthält und max. 5 Zeichen beinhaltet
    const regex = /^\d{5}$/gm;
    // Wert aus dem Eingabefeld erhalten mit this
    const str = this.value;
    // Wenn Wert länger als 5, einfach auf 5 kürzen
    if (str.length > 5) {
        this.value = str.substr(0, 5);
    }
    // Wert gegen regex testen
    if (regex.test(this.value)) {
        document.querySelector('#personenModal .invalid-feedback').style.display = 'none';
    } else {
        document.querySelector('#personenModal .invalid-feedback').style.display = 'block';
    }
};

Formular Validierung

                            
document.querySelector("#testForm").addEventListener("submit", function (e) {
    const regex = /^\d{5}$/gm;
    const str = document.querySelector("#PLZ").value;
    if (!regex.test(str)) {
        e.preventDefault();
        document.querySelector('.invalid-feedback').style.display = 'block';
    }
});

HTML5 Validierung (bei diesem Beispiel)

                            
<input type="text" class="form-control" id="PLZ2" name="PLZ2" placeholder="54299" value="" required pattern="\d{5}">

Bei Fragen Mail an boelter@uni-trier.de

var vs let

Definition und Deklaration

Operatoren

Mehrdimensionale Assoziative Arrays

Element Eigenschaften

Style per Klassen (add, remove, toggle)

Events und Listener

Übergabe von PHP-Variablen an JavaScript

Übergabe per Cookie (HTTP-Header)

Erzeugen eines Cookies in PHP per setcookie(name, value);

Auslesen aller Cookies in Javascript

Funktion zum Auslesen eines Cookies

Ergebnis der getCookie-Funktion

Übergabe im HTML Header

Beispiel PHP Variablen

Den Inhalt der PHP-Variablen in den HTML Quelltext schreiben, beispielsweise in der header.php

HTML-Quellcode im Browser

Übergabe als Attribut oder im Content

Beispiel PHP-Variablen

PHP Variablen in HTML Dom schreiben

HTML-Quellcode im Browser

JavaScript Code zum Auslesen der Variablen

GET Übergabe per JavaScript fetch()

Erzeugen einer service.php Datei

Daten laden per JavaScript fetch-Funktion

POST Übergabe per JavaScript fetch()

Erzeugen einer service.php Datei

Daten laden per JavaScript fetch-Funktion

Übergabe von PHP-Variablen an JavaScript

Einfache Formularfeld Validierung

HTML Formularfeld

Feld direkt bei der Eingabe überprüfen.

Formular Validierung

HTML5 Validierung (bei diesem Beispiel)