Start Webentwicklung Archiv nach Kategorie "JavaScript" (Seite 3)

Kategorie: 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

history

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);