Startseite Beiträge getaggt mit "JavaScript" (Seite 3)

Schlagwort: JavaScript

[JavaScript] Assoziatives Array

Array

// Definition
let language = new Array();
language["DE"] = "Guten Morgen";
language["EN"] = "Good morning";
language["IT"] = "Buongiorno";
language["FR"] = "Bonjour";

// Guten Morgen User!
console.log(language["DE"] + " " + "User!");

// ["DE","EN","IT","FR"]
var aKeys = Object.keys(language);
console.log(JSON.stringify(aKeys));

// 12
console.log(language["DE"].length);
// 0
console.log(language.length);

Object

// Definition
let language = new Object();
language["DE"] = "Guten Morgen";
language["EN"] = "Good morning";
language["IT"] = "Buongiorno";
language["FR"] = "Bonjour";

// Guten Morgen User!
console.log(language["DE"] + " " + "User!");

// ["DE","EN","IT","FR"]
var aKeys = Object.keys(language);
console.log(JSON.stringify(aKeys));

// 12
console.log(language["DE"].length);
// undefined
console.log(language.length);

[JavaScript] Übersicht vordefinierte Objekte und Typen

Übersicht: https://www.w3schools.com/js/js_datatypes.asp

Primitive (nur Werte und keine Properties oder Methoden)

Boolean: true / false

Number: repräsentiert Zahlen

Null: Nichts

String: repräsentiert Strings

Undefined: Variable ohne Wert hat den Wert “undefined”

Komplexe Datentypen (haben Properties oder Methoden, mit typeof abfragbar)

Array: Liste von Objekten

Date: Datumswerte

JSON: Objektdaten formatieren und transportieren

Math: mathematische Berechnungen

RegExp: repräsentiert reguläre Ausdrücken

Function: aufrufbarer Codeabschnitt

Object: haben Properties oder Methoden (alles außer Primitiven ist Object)

[JavaScript] Übersicht HTML DOM Objekte

console

document

location

navigator

screen

window

[JavaScript] DOM-Elemente lesen 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>DOM Read</title>
</head>
<body>
  <div id="bodytext">Hallo Welt!</div>
</body>
</html>

// Zugriff über ID, einzelnes Element
let h = document.getElementById("bodytext");
console.log(h.innerHTML);

// Zugriff über CSS-Ausdruck, erstes Element
let h = document.querySelector("#bodytext");
console.log(h.innerHTML);

// Zugriff über Tag, Liste
let arr = document.getElementsByTagName("div");
for (let e in arr)
{
  console.log(arr[e].innerHTML);
}

// Zugriff über CSS-Ausdruck, Liste
let arr = document.querySelectorAll("div");
for (let e in arr)
{
  console.log(arr[e].innerHTML);
}

[JavaScript] DOM-Elemente ändern 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>DOM Change</title>
</head>
<body>
  <div id="bodytext">Hallo Welt!</div>
</body>
</html>

// Zugriff über ID, einzelnes Element
let h = document.getElementById("bodytext");
// Text setzen
h.innerHTML = "Testtext";
// Schrift setzen
h.setAttribute("style", "color:green; font-size:20px;");

[JavaScript] DOM-Elemente erzeugen 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>DOM Create</title>
</head>
<body>
  <div id="bodytext">Hallo Welt!</div>
</body>
</html>

// Zugriff über ID, einzelnes Element
// div-Tag erstellen
let d = document.createElement("div");
d.style.color = "red";

// Text im div erzeugen
let t = document.createTextNode("Testtext2");

// Text an div anhängen
d.appendChild(t);

// Element an body anhängen
document.body.appendChild(d);

[JavaScript] DOM-Elemente löschen 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>DOM Delete</title>
</head>
<body>
  <div id="bodytext">Hallo Welt!</div>
  <ul id="persons">
    <li id="p1">Udo</li>
    <li id="p2">Ede</li>
    <li id="p3">Heinz</li>
  </ul>
</body>
</html>

// ul ID="persons"
let persons = document.getElementById("persons");
// li ID="p2"
let p2 = document.getElementById("p2");
// Element entfernen
persons.removeChild(p2);

[JavaScript] Eventhandling

  • sich überlagernde Events werden vom innersten zum äußersten Element verarbeitet

Variante 1 (Funktionszuweisung im HTML)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Buttonclick</title>
</head>
<body>
  <button onclick="btnClick();">Klick</button>
</body>
</html>

// Funktionsdefinition
function btnClick(){
  alert("Test");
}

Variante 2 (Registrierung des Listeners im JS)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Buttonclick</title>
</head>
<body>
  <button id="btn1">Klick</button>
</body>
</html>

// Button mit ID="btn1" holen
let b = document.getElementById("btn1");

// Funktionsdefinition
let btnClick = function(){
  alert("Test");
}

// Funktionszuweisung
b.onClick = btnClick;
// Listener hinzufügen
b.addEventListener("click", btnClick);
// Listener wieder entfernen
b.removeEventListener("click", btnClick);

[JavaScript] Prototyping 

function Person(name) {
  this.Vorname = name;
}

// p1 -> Attribut "Alter" für nur dieses Objekt
let p1 = new Person("Ede");
p1.Alter = 60;
console.log(p1.Vorname + " " + p1.Alter);

// p2 -> hat keinen Attribut "Alter"
let p2 = new Person("Horst");
console.log(p2.Vorname + " " + p2.Alter);

// neue Eigenschaft im Prototyp ("Basisklasse") für alle Personen hinzufügen
Person.prototype.Alter = 70;

// p2 hat nun auch ein Attribut "Alter"
console.log(p2.Vorname + " " + p2.Alter);